From 753ba1647ef67fcefd63d79b11ce3ee52ee2a5d3 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 24 Aug 2023 12:49:00 -0400
Subject: [PATCH 001/351] Extends `useControlledValue` to accept any type

---
 .changeset/soft-berries-obey.md                       |  5 +++++
 .../src/useControlledValue/useControlledValue.ts      | 11 +++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/soft-berries-obey.md

diff --git a/.changeset/soft-berries-obey.md b/.changeset/soft-berries-obey.md
new file mode 100644
index 0000000000..f169b748be
--- /dev/null
+++ b/.changeset/soft-berries-obey.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/hooks': minor
+---
+
+Extends `useControlledValue` to accept any type
diff --git a/packages/hooks/src/useControlledValue/useControlledValue.ts b/packages/hooks/src/useControlledValue/useControlledValue.ts
index 008235ee54..c1eacd848d 100644
--- a/packages/hooks/src/useControlledValue/useControlledValue.ts
+++ b/packages/hooks/src/useControlledValue/useControlledValue.ts
@@ -1,7 +1,7 @@
 import { ChangeEventHandler, useEffect, useState } from 'react';
 import isUndefined from 'lodash/isUndefined';
 
-interface ControlledValueReturnObject<T extends string> {
+interface ControlledValueReturnObject<T extends any> {
   /** Whether the value is controlled */
   isControlled: boolean;
 
@@ -24,14 +24,17 @@ interface ControlledValueReturnObject<T extends string> {
  * Returns a {@link ControlledValueReturnObject} with the controlled or uncontrolled `value`,
  * `onChange` & `onClear` handlers, a `setInternalValue` setter, and a boolean `isControlled`
  */
-export const useControlledValue = <T extends string>(
+export const useControlledValue = <T extends any>(
   controlledValue?: T,
   changeHandler?: ChangeEventHandler<any>,
-): ControlledValueReturnObject<T> => {
+  defaultValue?: T,
+): ControlledValueReturnObject<T | undefined> => {
   const isControlled = !isUndefined(controlledValue);
 
   // Keep track of state internally, initializing it to the controlled value
-  const [value, setInternalValue] = useState<T>(controlledValue ?? ('' as T));
+  const [value, setInternalValue] = useState<T | undefined>(
+    controlledValue ?? defaultValue,
+  );
 
   // If the controlled value changes, update the internal state variable
   useEffect(() => {

From c565f2638902fabe592895c0dcb9a5c1bb61eed6 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 24 Aug 2023 15:16:06 -0400
Subject: [PATCH 002/351] Adds more explicit tests

---
 .../useControlledValue.spec.ts                | 112 +++++++++++++-----
 1 file changed, 83 insertions(+), 29 deletions(-)

diff --git a/packages/hooks/src/useControlledValue/useControlledValue.spec.ts b/packages/hooks/src/useControlledValue/useControlledValue.spec.ts
index 8ebc6f789a..035cee5cb5 100644
--- a/packages/hooks/src/useControlledValue/useControlledValue.spec.ts
+++ b/packages/hooks/src/useControlledValue/useControlledValue.spec.ts
@@ -1,42 +1,96 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, ChangeEventHandler } from 'react';
 import { act } from 'react-test-renderer';
 import { renderHook } from '@testing-library/react-hooks';
 
 import { useControlledValue } from './useControlledValue';
 
+const changeEventMock = {
+  target: { value: 'banana' },
+} as ChangeEvent<any>;
+
 describe('packages/lib/useControlledValue', () => {
-  test('with controlled component', async () => {
-    const value = 'apple';
-    const handler = jest.fn();
-    const {
-      result: { current },
-    } = renderHook(() => useControlledValue(value as string, handler));
-    expect(current.isControlled).toBe(true);
-    expect(current.value).toBe(value);
-
-    act(() => {
-      current.handleChange({ target: { value: 'banana' } } as ChangeEvent<any>);
-      current.setUncontrolledValue('banana');
+  describe('with controlled component', () => {
+    test('calling with a value sets value and isControlled', () => {
+      const handler = jest.fn();
+      const { result } = renderHook(v => useControlledValue(v, handler), {
+        initialProps: 'apple',
+      });
+      expect(result.current.isControlled).toBe(true);
+      expect(result.current.value).toBe('apple');
+    });
+
+    test('calling with a new value changes the value', () => {
+      const handler = jest.fn();
+      const { result, rerender } = renderHook(
+        v => useControlledValue(v, handler),
+        {
+          initialProps: 'apple',
+        },
+      );
+
+      expect(result.current.value).toBe('apple');
+
+      act(() => {
+        rerender('banana');
+      });
+
+      expect(result.current.value).toBe('banana');
+    });
+
+    test('provided handler should be called', () => {
+      const handler = jest.fn();
+      const { result } = renderHook(v => useControlledValue(v, handler), {
+        initialProps: 'apple',
+      });
+
+      // simulate responding to an event
+      act(() => {
+        result.current.handleChange(changeEventMock);
+      });
+      expect(handler).toHaveBeenCalledWith(
+        expect.objectContaining(changeEventMock),
+      );
+      // value doesn't change unless we explicitly change it
+      expect(result.current.value).toBe('apple');
     });
-    expect(handler).toHaveBeenCalledWith(
-      expect.objectContaining({ target: { value: 'banana' } }),
-    );
-    expect(current.value).toBe('apple');
   });
 
-  test('with uncontrolled component', async () => {
-    const value = undefined;
-    const handler = jest.fn();
-    const {
-      result: { current },
-    } = renderHook(() => useControlledValue(value, handler));
-    expect(current.isControlled).toBe(false);
-    expect(current.value).toBe('');
-
-    act(() => {
-      current.handleChange({ target: { value: 'apple' } } as ChangeEvent<any>);
+  describe('with uncontrolled component', () => {
+    test('calling without a value sets value and isControlled', () => {
+      const handler = jest.fn();
+      const { result } = renderHook(v => useControlledValue(v, handler), {
+        initialProps: undefined,
+      });
+      expect(result.current.isControlled).toBe(false);
+      expect(result.current.value).toBe(undefined);
+    });
+
+    test('calling setter updates value', () => {
+      const handler = jest.fn();
+      const { result } = renderHook(
+        v => useControlledValue<string>(v, handler),
+        {
+          initialProps: undefined,
+        },
+      );
+
+      act(() => {
+        result.current.setUncontrolledValue('apple');
+      });
+      expect(result.current.value).toBe('apple');
+    });
+
+    test('provided handler should be called', () => {
+      const handler = jest.fn();
+      const { result } = renderHook(v => useControlledValue(v, handler), {
+        initialProps: undefined,
+      });
+
+      act(() => {
+        result.current.handleChange(changeEventMock);
+      });
       expect(handler).toHaveBeenCalledWith(
-        expect.objectContaining({ target: { value: 'apple' } }),
+        expect.objectContaining(changeEventMock),
       );
     });
   });

From b61283585a257987408ccfa6b54b6ce23dd27d45 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 24 Aug 2023 15:28:30 -0400
Subject: [PATCH 003/351] adds test component tests

---
 ...ue.spec.ts => useControlledValue.spec.tsx} | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)
 rename packages/hooks/src/useControlledValue/{useControlledValue.spec.ts => useControlledValue.spec.tsx} (51%)

diff --git a/packages/hooks/src/useControlledValue/useControlledValue.spec.ts b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
similarity index 51%
rename from packages/hooks/src/useControlledValue/useControlledValue.spec.ts
rename to packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
index 035cee5cb5..bfff17fbb2 100644
--- a/packages/hooks/src/useControlledValue/useControlledValue.spec.ts
+++ b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
@@ -1,6 +1,9 @@
+import React from 'react';
 import { ChangeEvent, ChangeEventHandler } from 'react';
 import { act } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
+import userEvent from '@testing-library/user-event';
 
 import { useControlledValue } from './useControlledValue';
 
@@ -94,4 +97,81 @@ describe('packages/lib/useControlledValue', () => {
       );
     });
   });
+
+  describe('with test component', () => {
+    const TestComponent = ({
+      valueProp,
+      handlerProp,
+    }: {
+      valueProp?: string;
+      handlerProp?: ChangeEventHandler;
+    }) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const { value, handleChange } = useControlledValue(
+        valueProp,
+        handlerProp,
+      );
+
+      return <input data-testid="test" value={value} onChange={handleChange} />;
+    };
+
+    describe('Controlled test component', () => {
+      test('initially renders with a value', () => {
+        const result = render(<TestComponent valueProp="apple" />);
+        const input = result.getByTestId('test');
+        expect(input).toHaveValue('apple');
+      });
+
+      test('responds to value changes', () => {
+        const result = render(<TestComponent valueProp="apple" />);
+        const input = result.getByTestId('test');
+        result.rerender(<TestComponent valueProp="banana" />);
+        expect(input).toHaveValue('banana');
+      });
+
+      test('user interaction triggers handler', () => {
+        const handler = jest.fn();
+        const result = render(
+          <TestComponent valueProp="apple" handlerProp={handler} />,
+        );
+        const input = result.getByTestId('test');
+        userEvent.type(input, 'b');
+        expect(handler).toHaveBeenCalled();
+      });
+
+      test('user interaction does not change the element value', () => {
+        const handler = jest.fn();
+        const result = render(
+          <TestComponent valueProp="apple" handlerProp={handler} />,
+        );
+        const input = result.getByTestId('test');
+        userEvent.type(input, 'b');
+        expect(input).toHaveValue('apple');
+      });
+    });
+
+    describe('Uncontrolled test component', () => {
+      test('initially renders without a value', () => {
+        const result = render(<TestComponent />);
+        const input = result.getByTestId('test');
+        expect(input).toHaveValue('');
+      });
+
+      test('user interaction triggers handler', () => {
+        const handler = jest.fn();
+        const result = render(<TestComponent handlerProp={handler} />);
+        const input = result.getByTestId('test');
+        userEvent.type(input, 'b');
+        expect(handler).toHaveBeenCalled();
+      });
+
+      test('user interaction does not change the element value', () => {
+        const handler = jest.fn();
+        const result = render(<TestComponent handlerProp={handler} />);
+        const input = result.getByTestId('test');
+        userEvent.type(input, 'banana');
+        expect(input).toHaveValue('banana');
+      });
+    });
+  });
 });

From f4e1c613075c85b707533d8831840073fbb7cf87 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 24 Aug 2023 15:32:55 -0400
Subject: [PATCH 004/351] adds value tests

---
 .../useControlledValue.spec.tsx               | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
index bfff17fbb2..8b2e85a018 100644
--- a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
+++ b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
@@ -56,6 +56,46 @@ describe('packages/lib/useControlledValue', () => {
       // value doesn't change unless we explicitly change it
       expect(result.current.value).toBe('apple');
     });
+
+    describe('value types', () => {
+      test('accepts number values', () => {
+        const { result } = renderHook(v => useControlledValue(v), {
+          initialProps: 5,
+        });
+        expect(result.current.value).toBe(5);
+      });
+
+      test('accepts boolean values', () => {
+        const { result } = renderHook(v => useControlledValue(v), {
+          initialProps: false,
+        });
+        expect(result.current.value).toBe(false);
+      });
+
+      test('accepts array values', () => {
+        const arr = ['foo', 'bar'];
+        const { result } = renderHook(v => useControlledValue(v), {
+          initialProps: arr,
+        });
+        expect(result.current.value).toBe(arr);
+      });
+
+      test('accepts object values', () => {
+        const obj = { foo: 'foo', bar: 'bar' };
+        const { result } = renderHook(v => useControlledValue(v), {
+          initialProps: obj,
+        });
+        expect(result.current.value).toBe(obj);
+      });
+
+      test('accepts date values', () => {
+        const date = new Date('2023-08-23');
+        const { result } = renderHook(v => useControlledValue(v), {
+          initialProps: date,
+        });
+        expect(result.current.value).toBe(date);
+      });
+    });
   });
 
   describe('with uncontrolled component', () => {

From bbb1832e65f3661f6f2dbc98706cf26844e2e53a Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 24 Aug 2023 15:51:20 -0400
Subject: [PATCH 005/351] isControlled never changes from initial render

---
 .changeset/soft-berries-obey.md               |  3 +-
 .../useControlledValue.spec.tsx               | 63 +++++++++++++------
 .../useControlledValue/useControlledValue.ts  |  6 +-
 3 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/.changeset/soft-berries-obey.md b/.changeset/soft-berries-obey.md
index f169b748be..8d0236cdfe 100644
--- a/.changeset/soft-berries-obey.md
+++ b/.changeset/soft-berries-obey.md
@@ -2,4 +2,5 @@
 '@leafygreen-ui/hooks': minor
 ---
 
-Extends `useControlledValue` to accept any type
+- Extends `useControlledValue` to accept any type.
+- The value of `isControlled` is now immutable after the first render
diff --git a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
index 8b2e85a018..faf8fc1b6f 100644
--- a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
+++ b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
@@ -14,8 +14,7 @@ const changeEventMock = {
 describe('packages/lib/useControlledValue', () => {
   describe('with controlled component', () => {
     test('calling with a value sets value and isControlled', () => {
-      const handler = jest.fn();
-      const { result } = renderHook(v => useControlledValue(v, handler), {
+      const { result } = renderHook(v => useControlledValue(v), {
         initialProps: 'apple',
       });
       expect(result.current.isControlled).toBe(true);
@@ -23,13 +22,9 @@ describe('packages/lib/useControlledValue', () => {
     });
 
     test('calling with a new value changes the value', () => {
-      const handler = jest.fn();
-      const { result, rerender } = renderHook(
-        v => useControlledValue(v, handler),
-        {
-          initialProps: 'apple',
-        },
-      );
+      const { result, rerender } = renderHook(v => useControlledValue(v), {
+        initialProps: 'apple',
+      });
 
       expect(result.current.value).toBe('apple');
 
@@ -40,7 +35,7 @@ describe('packages/lib/useControlledValue', () => {
       expect(result.current.value).toBe('banana');
     });
 
-    test('provided handler should be called', () => {
+    test('provided handler is called within returned hook handler', () => {
       const handler = jest.fn();
       const { result } = renderHook(v => useControlledValue(v, handler), {
         initialProps: 'apple',
@@ -57,6 +52,15 @@ describe('packages/lib/useControlledValue', () => {
       expect(result.current.value).toBe('apple');
     });
 
+    test('setting value to undefined should keep the component controlled', () => {
+      const { result, rerender } = renderHook(v => useControlledValue(v), {
+        initialProps: 'apple',
+      });
+      expect(result.current.isControlled).toBe(true);
+      act(() => rerender(undefined));
+      expect(result.current.isControlled).toBe(true);
+    });
+
     describe('value types', () => {
       test('accepts number values', () => {
         const { result } = renderHook(v => useControlledValue(v), {
@@ -100,8 +104,7 @@ describe('packages/lib/useControlledValue', () => {
 
   describe('with uncontrolled component', () => {
     test('calling without a value sets value and isControlled', () => {
-      const handler = jest.fn();
-      const { result } = renderHook(v => useControlledValue(v, handler), {
+      const { result } = renderHook(v => useControlledValue(v), {
         initialProps: undefined,
       });
       expect(result.current.isControlled).toBe(false);
@@ -109,13 +112,9 @@ describe('packages/lib/useControlledValue', () => {
     });
 
     test('calling setter updates value', () => {
-      const handler = jest.fn();
-      const { result } = renderHook(
-        v => useControlledValue<string>(v, handler),
-        {
-          initialProps: undefined,
-        },
-      );
+      const { result } = renderHook(v => useControlledValue<string>(v), {
+        initialProps: undefined,
+      });
 
       act(() => {
         result.current.setUncontrolledValue('apple');
@@ -136,6 +135,32 @@ describe('packages/lib/useControlledValue', () => {
         expect.objectContaining(changeEventMock),
       );
     });
+
+    test('calling the returned handler sets the value', () => {
+      const handler = jest.fn();
+      const { result } = renderHook(v => useControlledValue(v, handler), {
+        initialProps: undefined,
+      });
+
+      act(() => {
+        result.current.handleChange(changeEventMock);
+      });
+      expect(result.current.value).toBe('banana');
+    });
+
+    test('changing value prop from initial undefined is ignored', () => {
+      const { result, rerender } = renderHook(
+        v => useControlledValue<string>(v),
+        {
+          initialProps: undefined,
+        },
+      );
+      expect(result.current.isControlled).toBe(false);
+      // @ts-ignore - picking up renderHook.options types, not actual hook types
+      act(() => rerender('apple'));
+      expect(result.current.isControlled).toBe(false);
+      expect(result.current.value).toBe(undefined);
+    });
   });
 
   describe('with test component', () => {
diff --git a/packages/hooks/src/useControlledValue/useControlledValue.ts b/packages/hooks/src/useControlledValue/useControlledValue.ts
index 536879319f..e843f2f551 100644
--- a/packages/hooks/src/useControlledValue/useControlledValue.ts
+++ b/packages/hooks/src/useControlledValue/useControlledValue.ts
@@ -1,4 +1,4 @@
-import { ChangeEventHandler, useState } from 'react';
+import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import isUndefined from 'lodash/isUndefined';
 
 interface ControlledValueReturnObject<T extends any> {
@@ -28,7 +28,9 @@ export const useControlledValue = <T extends any>(
   controlledValue?: T,
   changeHandler?: ChangeEventHandler<any>,
 ): ControlledValueReturnObject<T | undefined> => {
-  const isControlled = !isUndefined(controlledValue);
+  // isControlled should only be computed once
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const isControlled = useMemo(() => !isUndefined(controlledValue), []);
 
   // Keep track of the uncontrolled value state internally
   const [uncontrolledValue, setUncontrolledValue] = useState<T>();

From af6cc4867690aeac0cf8f57618e4fb0819a4441c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 24 Aug 2023 16:31:17 -0400
Subject: [PATCH 006/351] adds synthetic events

---
 .changeset/soft-berries-obey.md               |   1 +
 packages/hooks/package.json                   |   1 +
 .../useControlledValue.spec.tsx               | 108 +++++++++++++++---
 .../useControlledValue/useControlledValue.ts  |  30 ++++-
 packages/hooks/tsconfig.json                  |   6 +-
 5 files changed, 130 insertions(+), 16 deletions(-)

diff --git a/.changeset/soft-berries-obey.md b/.changeset/soft-berries-obey.md
index 8d0236cdfe..b428fe5f29 100644
--- a/.changeset/soft-berries-obey.md
+++ b/.changeset/soft-berries-obey.md
@@ -3,4 +3,5 @@
 ---
 
 - Extends `useControlledValue` to accept any type.
+- Adds `updateValue` function in return value. This method triggers a synthetic event to update the value of a controlled or uncontrolled component.
 - The value of `isControlled` is now immutable after the first render
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 27ca1b683d..e3f73c5d70 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -22,6 +22,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@leafygreen-ui/lib": "^11.0.0",
     "lodash": "^4.17.21"
   },
   "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0",
diff --git a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
index faf8fc1b6f..837c94aaa3 100644
--- a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
+++ b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { ChangeEvent, ChangeEventHandler } from 'react';
 import { act } from 'react-test-renderer';
 import { render } from '@testing-library/react';
@@ -11,6 +11,10 @@ const changeEventMock = {
   target: { value: 'banana' },
 } as ChangeEvent<any>;
 
+const mutableRefMock = {
+  current: document.createElement('div'),
+};
+
 describe('packages/lib/useControlledValue', () => {
   describe('with controlled component', () => {
     test('calling with a value sets value and isControlled', () => {
@@ -61,6 +65,30 @@ describe('packages/lib/useControlledValue', () => {
       expect(result.current.isControlled).toBe(true);
     });
 
+    test('setUncontrolledValue does nothing for controlled components', () => {
+      const { result } = renderHook(v => useControlledValue(v), {
+        initialProps: 'apple',
+      });
+      act(() => {
+        result.current.setUncontrolledValue('banana');
+      });
+      expect(result.current.value).toBe('apple');
+    });
+
+    test('updateValue triggers the provided handler', async () => {
+      const handler = jest.fn();
+
+      const { result } = renderHook(v => useControlledValue(v, handler), {
+        initialProps: 'apple',
+      });
+
+      await act(() => {
+        result.current.updateValue('banana', mutableRefMock);
+      });
+
+      expect(handler).toHaveBeenCalled();
+    });
+
     describe('value types', () => {
       test('accepts number values', () => {
         const { result } = renderHook(v => useControlledValue(v), {
@@ -111,15 +139,20 @@ describe('packages/lib/useControlledValue', () => {
       expect(result.current.value).toBe(undefined);
     });
 
-    test('calling setter updates value', () => {
-      const { result } = renderHook(v => useControlledValue<string>(v), {
-        initialProps: undefined,
-      });
+    test('setUncontrolledValue updates value', () => {
+      const handler = jest.fn();
+      const { result } = renderHook(
+        v => useControlledValue<string>(v, handler),
+        {
+          initialProps: undefined,
+        },
+      );
 
       act(() => {
         result.current.setUncontrolledValue('apple');
       });
       expect(result.current.value).toBe('apple');
+      expect(handler).not.toHaveBeenCalled();
     });
 
     test('provided handler should be called', () => {
@@ -136,6 +169,23 @@ describe('packages/lib/useControlledValue', () => {
       );
     });
 
+    test('updateValue updates value & calls handler', () => {
+      const handler = jest.fn();
+      const { result } = renderHook(
+        v => useControlledValue<string>(v, handler),
+        {
+          initialProps: undefined,
+        },
+      );
+
+      act(() => {
+        result.current.updateValue('banana', mutableRefMock);
+      });
+
+      expect(handler).toHaveBeenCalled();
+      expect(result.current.value).toBe('banana');
+    });
+
     test('calling the returned handler sets the value', () => {
       const handler = jest.fn();
       const { result } = renderHook(v => useControlledValue(v, handler), {
@@ -171,25 +221,39 @@ describe('packages/lib/useControlledValue', () => {
       valueProp?: string;
       handlerProp?: ChangeEventHandler;
     }) => {
+      const inputRef = useRef<HTMLInputElement>(null);
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      const { value, handleChange } = useControlledValue(
+      const { value, handleChange, updateValue } = useControlledValue(
         valueProp,
         handlerProp,
       );
 
-      return <input data-testid="test" value={value} onChange={handleChange} />;
+      return (
+        <>
+          <input
+            ref={inputRef}
+            data-testid="test-input"
+            value={value}
+            onChange={handleChange}
+          />
+          <button
+            data-testid="test-button"
+            onClick={() => updateValue('carrot', inputRef)}
+          />
+        </>
+      );
     };
 
     describe('Controlled test component', () => {
       test('initially renders with a value', () => {
         const result = render(<TestComponent valueProp="apple" />);
-        const input = result.getByTestId('test');
+        const input = result.getByTestId('test-input');
         expect(input).toHaveValue('apple');
       });
 
       test('responds to value changes', () => {
         const result = render(<TestComponent valueProp="apple" />);
-        const input = result.getByTestId('test');
+        const input = result.getByTestId('test-input');
         result.rerender(<TestComponent valueProp="banana" />);
         expect(input).toHaveValue('banana');
       });
@@ -199,7 +263,7 @@ describe('packages/lib/useControlledValue', () => {
         const result = render(
           <TestComponent valueProp="apple" handlerProp={handler} />,
         );
-        const input = result.getByTestId('test');
+        const input = result.getByTestId('test-input');
         userEvent.type(input, 'b');
         expect(handler).toHaveBeenCalled();
       });
@@ -209,23 +273,31 @@ describe('packages/lib/useControlledValue', () => {
         const result = render(
           <TestComponent valueProp="apple" handlerProp={handler} />,
         );
-        const input = result.getByTestId('test');
+        const input = result.getByTestId('test-input');
         userEvent.type(input, 'b');
         expect(input).toHaveValue('apple');
       });
+
+      test('clicking the button updates the value', () => {
+        const result = render(<TestComponent valueProp="apple" />);
+        const input = result.getByTestId('test-input');
+        const button = result.getByTestId('test-button');
+        userEvent.click(button);
+        expect(input).toHaveValue('carrot');
+      });
     });
 
     describe('Uncontrolled test component', () => {
       test('initially renders without a value', () => {
         const result = render(<TestComponent />);
-        const input = result.getByTestId('test');
+        const input = result.getByTestId('test-input');
         expect(input).toHaveValue('');
       });
 
       test('user interaction triggers handler', () => {
         const handler = jest.fn();
         const result = render(<TestComponent handlerProp={handler} />);
-        const input = result.getByTestId('test');
+        const input = result.getByTestId('test-input');
         userEvent.type(input, 'b');
         expect(handler).toHaveBeenCalled();
       });
@@ -233,10 +305,18 @@ describe('packages/lib/useControlledValue', () => {
       test('user interaction does not change the element value', () => {
         const handler = jest.fn();
         const result = render(<TestComponent handlerProp={handler} />);
-        const input = result.getByTestId('test');
+        const input = result.getByTestId('test-input');
         userEvent.type(input, 'banana');
         expect(input).toHaveValue('banana');
       });
+
+      test('clicking the button updates the value', () => {
+        const result = render(<TestComponent />);
+        const input = result.getByTestId('test-input');
+        const button = result.getByTestId('test-button');
+        userEvent.click(button);
+        expect(input).toHaveValue('carrot');
+      });
     });
   });
 });
diff --git a/packages/hooks/src/useControlledValue/useControlledValue.ts b/packages/hooks/src/useControlledValue/useControlledValue.ts
index e843f2f551..3720c08cc0 100644
--- a/packages/hooks/src/useControlledValue/useControlledValue.ts
+++ b/packages/hooks/src/useControlledValue/useControlledValue.ts
@@ -1,6 +1,8 @@
-import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
+import { ChangeEventHandler, MutableRefObject, useMemo, useState } from 'react';
 import isUndefined from 'lodash/isUndefined';
 
+import { createSyntheticEvent } from '@leafygreen-ui/lib';
+
 interface ControlledValueReturnObject<T extends any> {
   /** Whether the value is controlled */
   isControlled: boolean;
@@ -14,8 +16,17 @@ interface ControlledValueReturnObject<T extends any> {
   /**
    * A setter for the internal value.
    * Does not change the controlled value if the provided value has not changed.
+   * Prefer using `updateValue` to programmatically set the value.
+   * @internal
    */
   setUncontrolledValue: React.Dispatch<React.SetStateAction<T>>;
+
+  /**
+   * Synthetically triggers a change event within the `handleChange` callback.
+   * Signals that the value should change for controlled components,
+   * and updates the internal value for uncontrolled components
+   */
+  updateValue: (newVal: T, ref: MutableRefObject<any>) => void;
 }
 
 /**
@@ -44,10 +55,27 @@ export const useControlledValue = <T extends any>(
     }
   };
 
+  // A wrapper around `handleChange` that fires a simulated event
+  const updateValue = (newVal: T | undefined, ref: MutableRefObject<any>) => {
+    if (ref.current) {
+      ref.current.value = newVal;
+      const synthEvt = createSyntheticEvent(
+        new Event('change', {
+          cancelable: true,
+          bubbles: true,
+        }),
+        ref.current,
+      );
+
+      handleChange(synthEvt);
+    }
+  };
+
   return {
     isControlled,
     value: isControlled ? controlledValue : uncontrolledValue,
     handleChange,
     setUncontrolledValue,
+    updateValue,
   };
 };
diff --git a/packages/hooks/tsconfig.json b/packages/hooks/tsconfig.json
index 9f2d965a63..a2786ad64a 100644
--- a/packages/hooks/tsconfig.json
+++ b/packages/hooks/tsconfig.json
@@ -14,5 +14,9 @@
     "src/**/*"
   ],
   "exclude": ["**/*.spec.*", "**/*.story.*"],
-  "references": []
+  "references": [
+    {
+      "path": "../lib"
+    }
+  ]
 }

From f6751e822baa7198a47ff3e526399aab9b0097d9 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 24 Aug 2023 17:10:12 -0400
Subject: [PATCH 007/351] adds initialValue & warning

---
 .../useControlledValue.spec.tsx               | 43 +++++++++++++++----
 .../useControlledValue/useControlledValue.ts  | 28 +++++++++---
 2 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
index 837c94aaa3..36805f620f 100644
--- a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
+++ b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
@@ -15,7 +15,7 @@ const mutableRefMock = {
   current: document.createElement('div'),
 };
 
-describe('packages/lib/useControlledValue', () => {
+describe('packages/hooks/useControlledValue', () => {
   describe('with controlled component', () => {
     test('calling with a value sets value and isControlled', () => {
       const { result } = renderHook(v => useControlledValue(v), {
@@ -89,6 +89,16 @@ describe('packages/lib/useControlledValue', () => {
       expect(handler).toHaveBeenCalled();
     });
 
+    test('initial value is ignored when controlled', () => {
+      const { result } = renderHook(
+        v => useControlledValue(v, null, 'foobar'),
+        {
+          initialProps: 'apple',
+        },
+      );
+      expect(result.current.value).toBe('apple');
+    });
+
     describe('value types', () => {
       test('accepts number values', () => {
         const { result } = renderHook(v => useControlledValue(v), {
@@ -127,22 +137,36 @@ describe('packages/lib/useControlledValue', () => {
         });
         expect(result.current.value).toBe(date);
       });
+
+      test('accepts multiple types', () => {
+        const { result, rerender } = renderHook(
+          v => useControlledValue<string | number>(v),
+          {
+            initialProps: 5 as string | number,
+          },
+        );
+        expect(result.current.value).toBe(5);
+        act(() => {
+          rerender('foo');
+        });
+        expect(result.current.value).toBe('foo');
+      });
     });
   });
 
   describe('with uncontrolled component', () => {
-    test('calling without a value sets value and isControlled', () => {
-      const { result } = renderHook(v => useControlledValue(v), {
+    test('calling without a value sets value to initialValue and isControlled: false', () => {
+      const { result } = renderHook(v => useControlledValue(v, null, ''), {
         initialProps: undefined,
       });
       expect(result.current.isControlled).toBe(false);
-      expect(result.current.value).toBe(undefined);
+      expect(result.current.value).toBe('');
     });
 
     test('setUncontrolledValue updates value', () => {
       const handler = jest.fn();
       const { result } = renderHook(
-        v => useControlledValue<string>(v, handler),
+        v => useControlledValue<string>(v, handler, ''),
         {
           initialProps: undefined,
         },
@@ -157,7 +181,7 @@ describe('packages/lib/useControlledValue', () => {
 
     test('provided handler should be called', () => {
       const handler = jest.fn();
-      const { result } = renderHook(v => useControlledValue(v, handler), {
+      const { result } = renderHook(v => useControlledValue(v, handler, ''), {
         initialProps: undefined,
       });
 
@@ -172,7 +196,7 @@ describe('packages/lib/useControlledValue', () => {
     test('updateValue updates value & calls handler', () => {
       const handler = jest.fn();
       const { result } = renderHook(
-        v => useControlledValue<string>(v, handler),
+        v => useControlledValue<string>(v, handler, ''),
         {
           initialProps: undefined,
         },
@@ -188,7 +212,7 @@ describe('packages/lib/useControlledValue', () => {
 
     test('calling the returned handler sets the value', () => {
       const handler = jest.fn();
-      const { result } = renderHook(v => useControlledValue(v, handler), {
+      const { result } = renderHook(v => useControlledValue(v, handler, ''), {
         initialProps: undefined,
       });
 
@@ -200,7 +224,7 @@ describe('packages/lib/useControlledValue', () => {
 
     test('changing value prop from initial undefined is ignored', () => {
       const { result, rerender } = renderHook(
-        v => useControlledValue<string>(v),
+        v => useControlledValue<string>(v, null, ''),
         {
           initialProps: undefined,
         },
@@ -226,6 +250,7 @@ describe('packages/lib/useControlledValue', () => {
       const { value, handleChange, updateValue } = useControlledValue(
         valueProp,
         handlerProp,
+        '',
       );
 
       return (
diff --git a/packages/hooks/src/useControlledValue/useControlledValue.ts b/packages/hooks/src/useControlledValue/useControlledValue.ts
index 3720c08cc0..e2d5c45842 100644
--- a/packages/hooks/src/useControlledValue/useControlledValue.ts
+++ b/packages/hooks/src/useControlledValue/useControlledValue.ts
@@ -1,7 +1,13 @@
-import { ChangeEventHandler, MutableRefObject, useMemo, useState } from 'react';
+import {
+  ChangeEventHandler,
+  MutableRefObject,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import isUndefined from 'lodash/isUndefined';
 
-import { createSyntheticEvent } from '@leafygreen-ui/lib';
+import { consoleOnce, createSyntheticEvent } from '@leafygreen-ui/lib';
 
 interface ControlledValueReturnObject<T extends any> {
   /** Whether the value is controlled */
@@ -35,16 +41,19 @@ interface ControlledValueReturnObject<T extends any> {
  * Returns a {@link ControlledValueReturnObject} with the controlled or uncontrolled `value`,
  * `onChange` & `onClear` handlers, a `setInternalValue` setter, and a boolean `isControlled`
  */
-export const useControlledValue = <T extends any>(
+export const useControlledValue = <T>(
   controlledValue?: T,
-  changeHandler?: ChangeEventHandler<any>,
+  changeHandler?: ChangeEventHandler<any> | null,
+  initialValue?: T,
 ): ControlledValueReturnObject<T | undefined> => {
   // isControlled should only be computed once
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const isControlled = useMemo(() => !isUndefined(controlledValue), []);
 
   // Keep track of the uncontrolled value state internally
-  const [uncontrolledValue, setUncontrolledValue] = useState<T>();
+  const [uncontrolledValue, setUncontrolledValue] = useState<T | undefined>(
+    initialValue,
+  );
 
   // Create a change event handler that either updates the internal state
   // or fires an external change handler
@@ -71,6 +80,15 @@ export const useControlledValue = <T extends any>(
     }
   };
 
+  useEffect(() => {
+    // Log a warning if neither controlled value or initialValue is provided
+    if (isUndefined(controlledValue) && isUndefined(initialValue)) {
+      consoleOnce.error(
+        `Warning: \`useControlledValue\` hook is being used without a value or initialValue. This will cause a React warning when the input changes. Please decide between using a controlled or uncontrolled input element, and provide either a controlledValue or initialValue to \`useControlledValue\``,
+      );
+    }
+  }, [controlledValue, initialValue]);
+
   return {
     isControlled,
     value: isControlled ? controlledValue : uncontrolledValue,

From 0fd6d6bda2225a07888a00125ce6d31733a49829 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 25 Aug 2023 10:20:25 -0400
Subject: [PATCH 008/351] Update useControlledValue.spec.tsx

---
 .../hooks/src/useControlledValue/useControlledValue.spec.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
index 36805f620f..17a3fec8ec 100644
--- a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
+++ b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
@@ -230,10 +230,11 @@ describe('packages/hooks/useControlledValue', () => {
         },
       );
       expect(result.current.isControlled).toBe(false);
+      expect(result.current.value).toBe('');
       // @ts-ignore - picking up renderHook.options types, not actual hook types
       act(() => rerender('apple'));
       expect(result.current.isControlled).toBe(false);
-      expect(result.current.value).toBe(undefined);
+      expect(result.current.value).toBe('');
     });
   });
 

From 405229a473173ec3b49b2d6fb348dd65ea9f46ed Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 25 Aug 2023 10:28:40 -0400
Subject: [PATCH 009/351] resolves circular dependency in lib

---
 packages/lib/src/consoleOnce.ts       |  7 +++++++
 packages/lib/src/index.ts             | 26 +-------------------------
 packages/lib/src/validateChildren.tsx | 20 +++++++++++++++++++-
 3 files changed, 27 insertions(+), 26 deletions(-)
 create mode 100644 packages/lib/src/consoleOnce.ts

diff --git a/packages/lib/src/consoleOnce.ts b/packages/lib/src/consoleOnce.ts
new file mode 100644
index 0000000000..0157a30216
--- /dev/null
+++ b/packages/lib/src/consoleOnce.ts
@@ -0,0 +1,7 @@
+import once from 'lodash/once';
+
+export const consoleOnce = {
+  error: once(console.error),
+  warn: once(console.warn),
+  log: once(console.log),
+};
diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
index 5efc1a09b8..143983c11e 100644
--- a/packages/lib/src/index.ts
+++ b/packages/lib/src/index.ts
@@ -1,5 +1,3 @@
-import isObject from 'lodash/isObject';
-import once from 'lodash/once';
 import * as typeIs from './typeIs';
 import createUniqueClassName from './createUniqueClassName';
 import getNodeTextContent from './getNodeTextContent';
@@ -8,6 +6,7 @@ import getTheme from './getTheme';
 import { allEqual } from './allEqual';
 export { validateChildren } from './validateChildren';
 export { createSyntheticEvent } from './createSyntheticEvent';
+export { consoleOnce } from './consoleOnce';
 
 export {
   type ExtendedComponentProps,
@@ -87,23 +86,6 @@ export type OneOf<T1, T2> =
   | (T1 & Partial<Record<Exclude<keyof T2, keyof T1>, never>>)
   | (T2 & Partial<Record<Exclude<keyof T1, keyof T2>, never>>);
 
-/** Helper type to check if element is a specific React Component  */
-export function isComponentType<
-  T extends React.ReactElement = React.ReactElement,
->(element: React.ReactNode, displayName: string): element is T {
-  return (
-    element != null &&
-    typeof element === 'object' &&
-    'type' in element &&
-    ((element.type as any).displayName === displayName ||
-      // TODO: temp solution; Components using InferredPolymorphic have a displayName inside render.
-      // https://jira.mongodb.org/browse/LG-3232
-      (isObject(element.type as any) &&
-        'render' in (element.type as any) &&
-        (element.type as any).render?.displayName === displayName))
-  );
-}
-
 /**
  * Utility for making it easier to couple a React Component to a css selector.
  * Useful when writing css selectors that rely on interactivity, i.e. :hover.
@@ -220,9 +202,3 @@ export type RecursivePartial<T> = {
 export function enforceExhaustive(value: never): never {
   throw Error(`Received unhandled value: ${value}`);
 }
-
-export const consoleOnce = {
-  error: once(console.error),
-  warn: once(console.warn),
-  log: once(console.log),
-};
diff --git a/packages/lib/src/validateChildren.tsx b/packages/lib/src/validateChildren.tsx
index 2ec4a592ff..aac74b0cc8 100644
--- a/packages/lib/src/validateChildren.tsx
+++ b/packages/lib/src/validateChildren.tsx
@@ -1,6 +1,24 @@
+import isObject from 'lodash/isObject';
 import isUndefined from 'lodash/isUndefined';
 import React, { ReactElement } from 'react';
-import { consoleOnce, isComponentType } from '.';
+import { consoleOnce } from '.';
+
+/** Helper type to check if element is a specific React Component  */
+export function isComponentType<
+  T extends React.ReactElement = React.ReactElement,
+>(element: React.ReactNode, displayName: string): element is T {
+  return (
+    element != null &&
+    typeof element === 'object' &&
+    'type' in element &&
+    ((element.type as any).displayName === displayName ||
+      // TODO: temp solution; Components using InferredPolymorphic have a displayName inside render.
+      // https://jira.mongodb.org/browse/LG-3232
+      (isObject(element.type as any) &&
+        'render' in (element.type as any) &&
+        (element.type as any).render?.displayName === displayName))
+  );
+}
 
 /**
  * Filters children down to a restricted set of component types.

From 152db57f57532314a864a6d02462c6f9eb288334 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 25 Aug 2023 10:56:05 -0400
Subject: [PATCH 010/351] expect no console

---
 .changeset/soft-berries-obey.md                   |  1 +
 .../useControlledValue.spec.tsx                   | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/.changeset/soft-berries-obey.md b/.changeset/soft-berries-obey.md
index b428fe5f29..b3ab179499 100644
--- a/.changeset/soft-berries-obey.md
+++ b/.changeset/soft-berries-obey.md
@@ -4,4 +4,5 @@
 
 - Extends `useControlledValue` to accept any type.
 - Adds `updateValue` function in return value. This method triggers a synthetic event to update the value of a controlled or uncontrolled component.
+- Adds `initialValue` argument. Used for setting the initial value for uncontrolled components. Without this we may encounter a React error for switching between controlled/uncontrolled inputs
 - The value of `isControlled` is now immutable after the first render
diff --git a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
index 17a3fec8ec..cbc5d43611 100644
--- a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
+++ b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
@@ -15,7 +15,17 @@ const mutableRefMock = {
   current: document.createElement('div'),
 };
 
+const errorSpy = jest.spyOn(console, 'error');
+
 describe('packages/hooks/useControlledValue', () => {
+  beforeEach(() => {
+    errorSpy.mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    errorSpy.mockReset();
+  });
+
   describe('with controlled component', () => {
     test('calling with a value sets value and isControlled', () => {
       const { result } = renderHook(v => useControlledValue(v), {
@@ -235,6 +245,7 @@ describe('packages/hooks/useControlledValue', () => {
       act(() => rerender('apple'));
       expect(result.current.isControlled).toBe(false);
       expect(result.current.value).toBe('');
+      expect(errorSpy).not.toHaveBeenCalled();
     });
   });
 
@@ -246,12 +257,13 @@ describe('packages/hooks/useControlledValue', () => {
       valueProp?: string;
       handlerProp?: ChangeEventHandler;
     }) => {
+      const initialVal = '';
       const inputRef = useRef<HTMLInputElement>(null);
       // eslint-disable-next-line react-hooks/rules-of-hooks
       const { value, handleChange, updateValue } = useControlledValue(
         valueProp,
         handlerProp,
-        '',
+        initialVal,
       );
 
       return (
@@ -318,6 +330,7 @@ describe('packages/hooks/useControlledValue', () => {
         const result = render(<TestComponent />);
         const input = result.getByTestId('test-input');
         expect(input).toHaveValue('');
+        expect(errorSpy).not.toHaveBeenCalled();
       });
 
       test('user interaction triggers handler', () => {

From 50a45ae491ea209d999d8a133c6aaec375bc0feb Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 25 Aug 2023 12:33:53 -0400
Subject: [PATCH 011/351] Adds NextLink legacyBehavior test

---
 packages/button/src/Button/Button.spec.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/button/src/Button/Button.spec.tsx b/packages/button/src/Button/Button.spec.tsx
index 2cb453d69e..f488039fda 100644
--- a/packages/button/src/Button/Button.spec.tsx
+++ b/packages/button/src/Button/Button.spec.tsx
@@ -146,7 +146,24 @@ describe('packages/button', () => {
     test(`renders a when passing in a NextJS Link wrapper`, () => {
       // eslint-disable-next-line react/prop-types
       const Linker = ({ href, children, ...props }: any) => (
-        <NextLink href={href}>
+        <NextLink href={href} {...props}>
+          {children}
+        </NextLink>
+      );
+
+      const { container, button } = renderButton({
+        href: 'https://mongodb.design',
+        as: Linker,
+      });
+
+      expect(container.querySelector('button')).not.toBeInTheDocument();
+      expect(button.tagName.toLowerCase()).toBe('a');
+    });
+
+    test(`renders a when passing in a legacy NextJS Link wrapper`, () => {
+      // eslint-disable-next-line react/prop-types
+      const Linker = ({ href, children, ...props }: any) => (
+        <NextLink legacyBehavior href={href}>
           <a {...props}>{children}</a>
         </NextLink>
       );

From 80dc30c464c496daf97aa8633bd17f71cfca123c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 25 Aug 2023 12:46:50 -0400
Subject: [PATCH 012/351] rm lib from dev dep

---
 packages/hooks/package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index dd703afe60..28ec0140ee 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -35,7 +35,6 @@
     "url": "https://jira.mongodb.org/projects/PD/summary"
   },
   "devDependencies": {
-    "@leafygreen-ui/emotion": "^4.0.7",
-    "@leafygreen-ui/lib": "^11.0.0"
+    "@leafygreen-ui/emotion": "^4.0.7"
   }
 }

From d5a9f7706d045634b3f28ae66ad3be3c7873e442 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 21 Aug 2023 15:28:47 -0400
Subject: [PATCH 013/351] init date picker

---
 packages/date-picker/README.md                | 19 ++++++++++++
 packages/date-picker/package.json             | 29 +++++++++++++++++++
 .../date-picker/src/DatePicker.stories.tsx    | 13 +++++++++
 .../src/DatePicker/DatePicker.spec.tsx        |  8 +++++
 .../src/DatePicker/DatePicker.styles.ts       |  3 ++
 .../date-picker/src/DatePicker/DatePicker.tsx |  8 +++++
 .../src/DatePicker/DatePicker.types.ts        |  1 +
 packages/date-picker/src/DatePicker/index.ts  |  2 ++
 packages/date-picker/src/index.ts             |  1 +
 packages/date-picker/tsconfig.json            | 25 ++++++++++++++++
 10 files changed, 109 insertions(+)
 create mode 100644 packages/date-picker/README.md
 create mode 100644 packages/date-picker/package.json
 create mode 100644 packages/date-picker/src/DatePicker.stories.tsx
 create mode 100644 packages/date-picker/src/DatePicker/DatePicker.spec.tsx
 create mode 100644 packages/date-picker/src/DatePicker/DatePicker.styles.ts
 create mode 100644 packages/date-picker/src/DatePicker/DatePicker.tsx
 create mode 100644 packages/date-picker/src/DatePicker/DatePicker.types.ts
 create mode 100644 packages/date-picker/src/DatePicker/index.ts
 create mode 100644 packages/date-picker/src/index.ts
 create mode 100644 packages/date-picker/tsconfig.json

diff --git a/packages/date-picker/README.md b/packages/date-picker/README.md
new file mode 100644
index 0000000000..f6e3e2c39d
--- /dev/null
+++ b/packages/date-picker/README.md
@@ -0,0 +1,19 @@
+# Date Picker
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/date-picker.svg)
+
+#### [View on MongoDB.design](https://www.mongodb.design/component/date-picker/example/)
+
+## Installation
+
+### Yarn
+
+```shell
+yarn add @leafygreen-ui/date-picker
+```
+
+### NPM
+
+```shell
+npm install @leafygreen-ui/date-picker
+```
diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
new file mode 100644
index 0000000000..3348ac848e
--- /dev/null
+++ b/packages/date-picker/package.json
@@ -0,0 +1,29 @@
+{
+ "name": "@leafygreen-ui/date-picker",
+  "version": "0.1.0",
+  "description": "LeafyGreen UI Kit Date Picker",
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "lg build-package",
+    "tsc": "lg build-ts",
+    "docs": "lg build-tsdoc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/emotion": "^4.0.4",
+    "@leafygreen-ui/lib": "^10.4.0"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/date-picker",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/PD/summary"
+  }
+}
diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
new file mode 100644
index 0000000000..244db0d24a
--- /dev/null
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+
+import { DatePicker } from '.';
+
+export default {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+};
+
+const Template: StoryFn<typeof DatePicker> = props => <DatePicker {...props} />;
+
+export const Basic = Template.bind({});
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
new file mode 100644
index 0000000000..298770a7c5
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { DatePicker } from '.';
+
+describe('packages/date-picker', () => {
+  test('condition', () => {});
+});
diff --git a/packages/date-picker/src/DatePicker/DatePicker.styles.ts b/packages/date-picker/src/DatePicker/DatePicker.styles.ts
new file mode 100644
index 0000000000..356c065c34
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePicker.styles.ts
@@ -0,0 +1,3 @@
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseStyles = css``;
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
new file mode 100644
index 0000000000..164b860c48
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+// TODO: forwardRef
+export function DatePicker({}) {
+  return <div>your content here</div>;
+}
+
+DatePicker.displayName = 'DatePicker';
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
new file mode 100644
index 0000000000..6f0717280b
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -0,0 +1 @@
+export interface DatePickerProps {}
diff --git a/packages/date-picker/src/DatePicker/index.ts b/packages/date-picker/src/DatePicker/index.ts
new file mode 100644
index 0000000000..a38c902e84
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/index.ts
@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export { DatePickerProps } from './DatePicker.types';
diff --git a/packages/date-picker/src/index.ts b/packages/date-picker/src/index.ts
new file mode 100644
index 0000000000..9775b18e9c
--- /dev/null
+++ b/packages/date-picker/src/index.ts
@@ -0,0 +1 @@
+export { DatePicker, DatePickerProps } from './DatePicker';
diff --git a/packages/date-picker/tsconfig.json b/packages/date-picker/tsconfig.json
new file mode 100644
index 0000000000..72a0203d44
--- /dev/null
+++ b/packages/date-picker/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "extends": "@lg-tools/build/config/package.tsconfig.json",
+   "compilerOptions": {
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "rootDir": "src",
+    "baseUrl": ".",
+    "paths": {
+      "@leafygreen-ui/icon/dist/*": ["../icon/src/generated/*"],
+      "@leafygreen-ui/*": ["../*/src"]
+    }
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": ["**/*.spec.*", "**/*.story.*"],
+  "references": [
+    {
+      "path": "../emotion"
+    },
+    {
+      "path": "../lib"
+    }
+  ]
+}

From 8233b8fcb4cd189be80e50b089c210d6c2d2ac60 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 21 Aug 2023 16:29:05 -0400
Subject: [PATCH 014/351] init date picker types

---
 packages/date-picker/package.json             | 10 ++-
 .../date-picker/src/DatePicker/DatePicker.tsx | 10 +--
 .../src/DatePicker/DatePicker.types.ts        | 26 ++++++-
 packages/date-picker/src/types.ts             | 69 +++++++++++++++++++
 packages/date-picker/tsconfig.json            |  6 ++
 yarn.lock                                     |  9 +++
 6 files changed, 122 insertions(+), 8 deletions(-)
 create mode 100644 packages/date-picker/src/types.ts

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 3348ac848e..114bc9973b 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -1,5 +1,5 @@
 {
- "name": "@leafygreen-ui/date-picker",
+  "name": "@leafygreen-ui/date-picker",
   "version": "0.1.0",
   "description": "LeafyGreen UI Kit Date Picker",
   "main": "./dist/index.js",
@@ -15,8 +15,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@leafygreen-ui/emotion": "^4.0.4",
-    "@leafygreen-ui/lib": "^10.4.0"
+    "@leafygreen-ui/emotion": "^4.0.7",
+    "@leafygreen-ui/lib": "^10.4.3",
+    "@leafygreen-ui/tokens": "^2.1.4"
+  },
+  "peerDependencies": {
+    "@leafygreen-ui/leafygreen-provider": "^3.1.6"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/date-picker",
   "repository": {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 164b860c48..451f40fcb3 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
-// TODO: forwardRef
-export function DatePicker({}) {
+import { DatePickerProps } from './DatePicker.types';
+
+// eslint-disable-next-line no-empty-pattern
+export const DatePicker = forwardRef(({}: DatePickerProps) => {
   return <div>your content here</div>;
-}
+});
 
 DatePicker.displayName = 'DatePicker';
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index 6f0717280b..cbed00cf2e 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -1 +1,25 @@
-export interface DatePickerProps {}
+import { BaseDatePickerProps } from 'src/types';
+
+export interface DatePickerProps extends BaseDatePickerProps {
+  /** The initial selected date. Ignored if `value` is provided */
+  initialValue: string | Date;
+
+  /** The selected date */
+  value: string | Date;
+
+  /**
+   * A Callback fired when the user makes a value change.
+   * Fired on click of a new date in the menu, or on keydown if the input contains a valid date
+   *
+   * Callback date argument will be a Date object in ISO-8601 format, and in UTC time.
+   */
+  onChange: (value: Date) => void;
+
+  /**
+   * A callback fired when validation should run, based on our [form validation guidelines](https://www.mongodb.design/foundation/forms/#form-validation-error-handling).
+   * Use this callback to compute the correct `state` value.
+   *
+   * Callback date argument will be a Date object in ISO 8601 format, and in UTC time.
+   */
+  handleValidation: (value: Date) => void;
+}
diff --git a/packages/date-picker/src/types.ts b/packages/date-picker/src/types.ts
new file mode 100644
index 0000000000..8abb6a394f
--- /dev/null
+++ b/packages/date-picker/src/types.ts
@@ -0,0 +1,69 @@
+import { DarkModeProps } from '@leafygreen-ui/lib';
+import { BaseFontSize } from '@leafygreen-ui/tokens';
+
+const Size = {
+  xsmall: 'xsmall',
+  small: 'small',
+  default: 'default',
+  large: 'large',
+};
+type Size = typeof Size[keyof typeof Size];
+
+export interface BaseDatePickerProps extends DarkModeProps {
+  /**
+   * A label for the input
+   */
+  label: string;
+
+  /**
+   * Sets the _presentation format_ for the displayed date.
+   * Fallback to the user’s browser preference (if supported), otherwise ISO-8601.
+   *
+   * Currently only the following values are officially supported.
+   * Other valid [Locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)
+   * strings may work, however no assurances are made.
+   *
+   * @enum 'en-US' | 'en-UK' | 'iso8601'
+   *
+   * @default 'iso8601'
+   */
+  dateFormat?: string;
+
+  /**
+   * A valid IANA timezone string, or UTC offset.
+   * Sets the _presentation time zone_ for the displayed date.
+   * Fallback to the user’s browser preference (if available), otherwise UTC.
+   *
+   * @default 'utc'
+   */
+  timeZone?: string;
+
+  /** The earliest date accepted */
+  min?: string | Date;
+
+  /** The latest date accepted */
+  max?: string | Date;
+
+  /**
+   * The base font size of the input. Inherits from the nearest LeafyGreenProvider
+   */
+  baseFontSize?: BaseFontSize;
+
+  /**
+   * Whether the input is disabled. Note: will not set the `disabled` attribute on an input
+   */
+  disabled?: boolean;
+
+  /** The size of the input */
+  size?: Size;
+
+  /**
+   * Whether to show an error message
+   */
+  state?: 'unset' | 'error';
+
+  /**
+   * A message to show in red underneath the input when in an error state
+   */
+  errorMessage?: string;
+}
diff --git a/packages/date-picker/tsconfig.json b/packages/date-picker/tsconfig.json
index 72a0203d44..e07c9e1508 100644
--- a/packages/date-picker/tsconfig.json
+++ b/packages/date-picker/tsconfig.json
@@ -18,8 +18,14 @@
     {
       "path": "../emotion"
     },
+    {
+      "path": "../leafygreen-provider"
+    },
     {
       "path": "../lib"
+    },
+    {
+      "path": "../tokens"
     }
   ]
 }
diff --git a/yarn.lock b/yarn.lock
index d7adccea09..b26d0a3f5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2258,6 +2258,15 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
+"@leafygreen-ui/lib@^10.4.3":
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/lib/-/lib-10.4.3.tgz#f5ebdabc82922067adee8f37833237685bb1b1a8"
+  integrity sha512-p5BtXHeQsvLnnrN0eunPFZeaMtW9z7Mbvm2WOS9lvnAySj8xZp5Vn9Y3XjyYLbPhpGVBhhOAJFP3YMxbP9DKgg==
+  dependencies:
+    "@storybook/csf" "^0.1.0"
+    lodash "^4.17.21"
+    prop-types "^15.7.2"
+
 "@manypkg/find-root@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@manypkg/find-root/-/find-root-1.1.0.tgz#a62d8ed1cd7e7d4c11d9d52a8397460b5d4ad29f"

From 1bcf234229ecf5203da5d6d08580aea5d73d3ed8 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 23 Aug 2023 17:46:45 -0400
Subject: [PATCH 015/351] scaffolds minor subcomponents

---
 .../src/CalendarCell/CalendarCell.spec.tsx            | 11 +++++++++++
 .../src/CalendarCell/CalendarCell.styles.ts           |  4 ++++
 .../date-picker/src/CalendarCell/CalendarCell.tsx     |  9 +++++++++
 .../src/CalendarCell/CalendarCell.types.ts            |  1 +
 .../src/CalendarGrid/CalendarGrid.spec.tsx            | 11 +++++++++++
 .../src/CalendarGrid/CalendarGrid.styles.ts           |  4 ++++
 .../date-picker/src/CalendarGrid/CalendarGrid.tsx     |  9 +++++++++
 .../src/CalendarGrid/CalendarGrid.types.ts            |  1 +
 .../src/DateInputSegment/DateInputSegment.spec.tsx    | 11 +++++++++++
 .../src/DateInputSegment/DateInputSegment.styles.ts   |  4 ++++
 .../src/DateInputSegment/DateInputSegment.tsx         |  9 +++++++++
 .../src/DateInputSegment/DateInputSegment.types.ts    |  1 +
 .../src/InputWrapper/InputWrapper.spec.tsx            | 11 +++++++++++
 .../src/InputWrapper/InputWrapper.styles.ts           |  4 ++++
 .../date-picker/src/InputWrapper/InputWrapper.tsx     |  9 +++++++++
 .../src/InputWrapper/InputWrapper.types.ts            |  1 +
 16 files changed, 100 insertions(+)
 create mode 100644 packages/date-picker/src/CalendarCell/CalendarCell.spec.tsx
 create mode 100644 packages/date-picker/src/CalendarCell/CalendarCell.styles.ts
 create mode 100644 packages/date-picker/src/CalendarCell/CalendarCell.tsx
 create mode 100644 packages/date-picker/src/CalendarCell/CalendarCell.types.ts
 create mode 100644 packages/date-picker/src/CalendarGrid/CalendarGrid.spec.tsx
 create mode 100644 packages/date-picker/src/CalendarGrid/CalendarGrid.styles.ts
 create mode 100644 packages/date-picker/src/CalendarGrid/CalendarGrid.tsx
 create mode 100644 packages/date-picker/src/CalendarGrid/CalendarGrid.types.ts
 create mode 100644 packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
 create mode 100644 packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
 create mode 100644 packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
 create mode 100644 packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
 create mode 100644 packages/date-picker/src/InputWrapper/InputWrapper.spec.tsx
 create mode 100644 packages/date-picker/src/InputWrapper/InputWrapper.styles.ts
 create mode 100644 packages/date-picker/src/InputWrapper/InputWrapper.tsx
 create mode 100644 packages/date-picker/src/InputWrapper/InputWrapper.types.ts

diff --git a/packages/date-picker/src/CalendarCell/CalendarCell.spec.tsx b/packages/date-picker/src/CalendarCell/CalendarCell.spec.tsx
new file mode 100644
index 0000000000..50d0ee578c
--- /dev/null
+++ b/packages/date-picker/src/CalendarCell/CalendarCell.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { CalendarCell } from '.';
+
+describe('packages/calendar-cell', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/date-picker/src/CalendarCell/CalendarCell.styles.ts b/packages/date-picker/src/CalendarCell/CalendarCell.styles.ts
new file mode 100644
index 0000000000..928608f58d
--- /dev/null
+++ b/packages/date-picker/src/CalendarCell/CalendarCell.styles.ts
@@ -0,0 +1,4 @@
+
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseStyles = css``;
diff --git a/packages/date-picker/src/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/CalendarCell/CalendarCell.tsx
new file mode 100644
index 0000000000..d7bd66da7d
--- /dev/null
+++ b/packages/date-picker/src/CalendarCell/CalendarCell.tsx
@@ -0,0 +1,9 @@
+
+import React from 'react';
+
+// TODO: forwardRef
+export function CalendarCell({}) {
+  return <div>your content here</div>;
+}
+
+CalendarCell.displayName = 'CalendarCell';
diff --git a/packages/date-picker/src/CalendarCell/CalendarCell.types.ts b/packages/date-picker/src/CalendarCell/CalendarCell.types.ts
new file mode 100644
index 0000000000..e42a158eeb
--- /dev/null
+++ b/packages/date-picker/src/CalendarCell/CalendarCell.types.ts
@@ -0,0 +1 @@
+export interface CalendarCellProps {}
\ No newline at end of file
diff --git a/packages/date-picker/src/CalendarGrid/CalendarGrid.spec.tsx b/packages/date-picker/src/CalendarGrid/CalendarGrid.spec.tsx
new file mode 100644
index 0000000000..d6d9e85cd3
--- /dev/null
+++ b/packages/date-picker/src/CalendarGrid/CalendarGrid.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { CalendarGrid } from '.';
+
+describe('packages/calendar-grid', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/date-picker/src/CalendarGrid/CalendarGrid.styles.ts b/packages/date-picker/src/CalendarGrid/CalendarGrid.styles.ts
new file mode 100644
index 0000000000..928608f58d
--- /dev/null
+++ b/packages/date-picker/src/CalendarGrid/CalendarGrid.styles.ts
@@ -0,0 +1,4 @@
+
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseStyles = css``;
diff --git a/packages/date-picker/src/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/CalendarGrid/CalendarGrid.tsx
new file mode 100644
index 0000000000..df6f81b44e
--- /dev/null
+++ b/packages/date-picker/src/CalendarGrid/CalendarGrid.tsx
@@ -0,0 +1,9 @@
+
+import React from 'react';
+
+// TODO: forwardRef
+export function CalendarGrid({}) {
+  return <div>your content here</div>;
+}
+
+CalendarGrid.displayName = 'CalendarGrid';
diff --git a/packages/date-picker/src/CalendarGrid/CalendarGrid.types.ts b/packages/date-picker/src/CalendarGrid/CalendarGrid.types.ts
new file mode 100644
index 0000000000..64823de600
--- /dev/null
+++ b/packages/date-picker/src/CalendarGrid/CalendarGrid.types.ts
@@ -0,0 +1 @@
+export interface CalendarGridProps {}
\ No newline at end of file
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
new file mode 100644
index 0000000000..705a43d93a
--- /dev/null
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { DateInputSegment } from '.';
+
+describe('packages/date-input-segment', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts b/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
new file mode 100644
index 0000000000..928608f58d
--- /dev/null
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
@@ -0,0 +1,4 @@
+
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseStyles = css``;
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
new file mode 100644
index 0000000000..ed23ad3e0d
--- /dev/null
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
@@ -0,0 +1,9 @@
+
+import React from 'react';
+
+// TODO: forwardRef
+export function DateInputSegment({}) {
+  return <div>your content here</div>;
+}
+
+DateInputSegment.displayName = 'DateInputSegment';
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
new file mode 100644
index 0000000000..45c82f3cd6
--- /dev/null
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
@@ -0,0 +1 @@
+export interface DateInputSegmentProps {}
\ No newline at end of file
diff --git a/packages/date-picker/src/InputWrapper/InputWrapper.spec.tsx b/packages/date-picker/src/InputWrapper/InputWrapper.spec.tsx
new file mode 100644
index 0000000000..e0c5a7177c
--- /dev/null
+++ b/packages/date-picker/src/InputWrapper/InputWrapper.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { InputWrapper } from '.';
+
+describe('packages/input-wrapper', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/date-picker/src/InputWrapper/InputWrapper.styles.ts b/packages/date-picker/src/InputWrapper/InputWrapper.styles.ts
new file mode 100644
index 0000000000..928608f58d
--- /dev/null
+++ b/packages/date-picker/src/InputWrapper/InputWrapper.styles.ts
@@ -0,0 +1,4 @@
+
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseStyles = css``;
diff --git a/packages/date-picker/src/InputWrapper/InputWrapper.tsx b/packages/date-picker/src/InputWrapper/InputWrapper.tsx
new file mode 100644
index 0000000000..37b6b4256f
--- /dev/null
+++ b/packages/date-picker/src/InputWrapper/InputWrapper.tsx
@@ -0,0 +1,9 @@
+
+import React from 'react';
+
+// TODO: forwardRef
+export function InputWrapper({}) {
+  return <div>your content here</div>;
+}
+
+InputWrapper.displayName = 'InputWrapper';
diff --git a/packages/date-picker/src/InputWrapper/InputWrapper.types.ts b/packages/date-picker/src/InputWrapper/InputWrapper.types.ts
new file mode 100644
index 0000000000..42a702c855
--- /dev/null
+++ b/packages/date-picker/src/InputWrapper/InputWrapper.types.ts
@@ -0,0 +1 @@
+export interface InputWrapperProps {}
\ No newline at end of file

From b0a00efc7fc2674c839723aafcf6cb835b9e6d92 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 24 Aug 2023 12:48:15 -0400
Subject: [PATCH 016/351] Adds `Size` token

---
 .changeset/afraid-snails-trade.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/afraid-snails-trade.md

diff --git a/.changeset/afraid-snails-trade.md b/.changeset/afraid-snails-trade.md
new file mode 100644
index 0000000000..150da45e75
--- /dev/null
+++ b/.changeset/afraid-snails-trade.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/tokens': minor
+---
+
+Adds `Size` token

From f9ccdca0a6359815132361042f516feb0fda0f1c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 24 Aug 2023 12:49:20 -0400
Subject: [PATCH 017/351] Creates DateInputSegment subcomponent

---
 packages/date-picker/package.json             |  7 +-
 .../DateInputSegment.constants.ts             | 42 +++++++++
 .../DateInputSegment.stories.tsx              | 53 +++++++++++
 .../DateInputSegment.styles.ts                | 94 ++++++++++++++++++-
 .../src/DateInputSegment/DateInputSegment.tsx | 64 ++++++++++++-
 .../DateInputSegment.types.ts                 | 23 ++++-
 packages/date-picker/src/types.ts             | 10 +-
 packages/date-picker/tsconfig.json            |  9 ++
 yarn.lock                                     | 13 +--
 9 files changed, 291 insertions(+), 24 deletions(-)
 create mode 100644 packages/date-picker/src/DateInputSegment/DateInputSegment.constants.ts
 create mode 100644 packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 114bc9973b..5778731ecf 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -16,8 +16,11 @@
   },
   "dependencies": {
     "@leafygreen-ui/emotion": "^4.0.7",
-    "@leafygreen-ui/lib": "^10.4.3",
-    "@leafygreen-ui/tokens": "^2.1.4"
+    "@leafygreen-ui/hooks": "^7.7.8",
+    "@leafygreen-ui/lib": "^11.0.0",
+    "@leafygreen-ui/palette": "^4.0.7",
+    "@leafygreen-ui/tokens": "^2.1.4",
+    "@leafygreen-ui/typography": "^16.5.5"
   },
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": "^3.1.6"
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.constants.ts b/packages/date-picker/src/DateInputSegment/DateInputSegment.constants.ts
new file mode 100644
index 0000000000..c4f6e2af98
--- /dev/null
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.constants.ts
@@ -0,0 +1,42 @@
+/** The minimum number for each segment */
+export const defaultMin = {
+  day: 1,
+  month: 1,
+  year: 1970,
+} as const;
+
+/** The maximum number for each segment */
+export const defaultMax = {
+  day: 31,
+  month: 12,
+  year: 2038,
+} as const;
+
+/** The shorthand for each char */
+export const placeholderChar = {
+  day: 'D',
+  month: 'M',
+  year: 'Y',
+};
+
+export const charsPerSegment = {
+  day: 2,
+  month: 2,
+  year: 4,
+};
+
+const makePlaceholder = (n: number, s: string) => new Array(n).fill(s).join('');
+
+/** The default placeholders for each segment */
+export const defaultPlaceholder = {
+  day: makePlaceholder(charsPerSegment.day, placeholderChar.day),
+  month: makePlaceholder(charsPerSegment.month, placeholderChar.month),
+  year: makePlaceholder(charsPerSegment.year, placeholderChar.year),
+} as const;
+
+/** The percentage of 1ch these specific characters take up */
+export const characterWidth = {
+  D: 1.1875,
+  M: 1.375,
+  Y: 1.125,
+} as const;
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
new file mode 100644
index 0000000000..52b7985222
--- /dev/null
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+
+import { DateInputSegment } from './DateInputSegment';
+
+const meta: StoryMetaType<typeof DateInputSegment> = {
+  title: 'Components/DatePicker/DateInputSegment',
+  component: DateInputSegment,
+  parameters: {
+    default: null,
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        value: [undefined, 6, 2023],
+        segment: ['day', 'month', 'year'],
+      },
+      excludeCombinations: [
+        {
+          value: 6,
+          segment: 'year',
+        },
+        {
+          value: 2023,
+          segment: ['day', 'month'],
+        },
+      ],
+    },
+  },
+  args: {
+    segment: 'day',
+  },
+  argTypes: {
+    segment: {
+      control: 'select',
+      options: ['day', 'month', 'year'],
+    },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<typeof DateInputSegment> = props => (
+  <LeafyGreenProvider>
+    <DateInputSegment {...props} />
+  </LeafyGreenProvider>
+);
+
+export const Basic = Template.bind({});
+
+export const Generated = () => {};
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts b/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
index 928608f58d..bec4ac00ee 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
@@ -1,4 +1,94 @@
-
 import { css } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+import {
+  BaseFontSize,
+  fontFamilies,
+  Size,
+  typeScales,
+} from '@leafygreen-ui/tokens';
+
+import { characterWidth } from './DateInputSegment.constants';
+import { DateSegment } from './DateInputSegment.types';
+
+export const baseStyles = css`
+  font-family: ${fontFamilies.default};
+  font-size: ${BaseFontSize.Body1}px;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  -moz-appearance: textfield; /* Firefox */
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const segmentThemeStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    background-color: transparent;
+    color: ${palette.black};
+
+    &::placeholder {
+      color: ${palette.gray.light1};
+    }
+
+    &:focus {
+      background-color: ${palette.blue.light3};
+    }
+  `,
+  [Theme.Dark]: css`
+    background-color: transparent;
+    color: ${palette.gray.light2};
+
+    &::placeholder {
+      color: ${palette.gray.dark1};
+    }
+
+    &:focus {
+      background-color: ${palette.blue.dark3};
+    }
+  `,
+};
+
+export const fontSizeStyles: Record<BaseFontSize, string> = {
+  [BaseFontSize.Body1]: css`
+    --base-font-size: ${BaseFontSize.Body1}px;
+  `,
+  [BaseFontSize.Body2]: css`
+    --base-font-size: ${BaseFontSize.Body2}px;
+  `,
+};
+
+export const segmentSizeStyles: Record<Size, string> = {
+  [Size.XSmall]: css`
+    font-size: ${typeScales.body1.fontSize}px;
+  `,
+  [Size.Small]: css`
+    font-size: ${typeScales.body1.fontSize}px;
+  `,
+  [Size.Default]: css`
+    font-size: var(--base-font-size, ${typeScales.body1.fontSize}px);
+  `,
+  [Size.Large]: css`
+    font-size: ${18}px; // Intentionally off-token
+  `,
+};
 
-export const baseStyles = css``;
+export const segmentWidthStyles: Record<DateSegment, string> = {
+  day: css`
+    width: ${2 * characterWidth.D}ch;
+  `,
+  month: css`
+    width: ${2 * characterWidth.M}ch;
+  `,
+  year: css`
+    width: ${4 * characterWidth.Y}ch;
+  `,
+};
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
index ed23ad3e0d..f8612b47ce 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
@@ -1,9 +1,65 @@
-
 import React from 'react';
+import { padStart } from 'lodash';
+
+import { cx } from '@leafygreen-ui/emotion';
+import { useControlledValue } from '@leafygreen-ui/hooks';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { Size } from '@leafygreen-ui/tokens';
+import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
+
+import {
+  charsPerSegment,
+  defaultMax,
+  defaultMin,
+  defaultPlaceholder,
+} from './DateInputSegment.constants';
+import {
+  baseStyles,
+  fontSizeStyles,
+  segmentSizeStyles,
+  segmentThemeStyles,
+  segmentWidthStyles,
+} from './DateInputSegment.styles';
+import { DateInputSegmentProps } from './DateInputSegment.types';
+
+export function DateInputSegment({
+  segment,
+  value: controlledValue,
+  min: minProp,
+  max: maxProp,
+  onChange,
+  darkMode,
+}: DateInputSegmentProps) {
+  const min = minProp ?? defaultMin[segment];
+  const max = maxProp ?? defaultMax[segment];
+
+  const { value, handleChange } = useControlledValue(controlledValue, onChange);
+
+  const { theme } = useDarkMode(darkMode);
+  const baseFontSize = useUpdatedBaseFontSize();
+  // TODO: implement context
+  // const { size } = useDatePickerContext();
+  const size = Size.Default;
 
-// TODO: forwardRef
-export function DateInputSegment({}) {
-  return <div>your content here</div>;
+  return (
+    <input
+      type="number"
+      value={
+        value ? padStart(value?.toString(), charsPerSegment[segment], '0') : ''
+      }
+      min={min}
+      max={max}
+      placeholder={defaultPlaceholder[segment]}
+      onChange={handleChange}
+      className={cx(
+        baseStyles,
+        fontSizeStyles[baseFontSize],
+        segmentThemeStyles[theme],
+        // segmentSizeStyles[size],
+        segmentWidthStyles[segment],
+      )}
+    />
+  );
 }
 
 DateInputSegment.displayName = 'DateInputSegment';
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
index 45c82f3cd6..aebb8bd898 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
@@ -1 +1,22 @@
-export interface DateInputSegmentProps {}
\ No newline at end of file
+import { ChangeEventHandler } from 'react';
+
+import { DarkModeProps } from '@leafygreen-ui/lib';
+
+export type DateSegment = 'day' | 'month' | 'year';
+
+export interface DateInputSegmentProps extends DarkModeProps {
+  /** Which date segment this input represents. Determines the aria-label, and min/max values where relevant */
+  segment: DateSegment;
+
+  /** The value of the date segment */
+  value?: number;
+
+  /** Optional minimum value. Defaults to 0 for day/month segments, and 1970 for year segments */
+  min?: number;
+
+  /** Optional maximum value. Defaults to 31 for day, 12 for month, 2038 for year */
+  max?: number;
+
+  /** Callback fired when the value changes */
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+}
diff --git a/packages/date-picker/src/types.ts b/packages/date-picker/src/types.ts
index 8abb6a394f..73da0efe3c 100644
--- a/packages/date-picker/src/types.ts
+++ b/packages/date-picker/src/types.ts
@@ -1,13 +1,5 @@
 import { DarkModeProps } from '@leafygreen-ui/lib';
-import { BaseFontSize } from '@leafygreen-ui/tokens';
-
-const Size = {
-  xsmall: 'xsmall',
-  small: 'small',
-  default: 'default',
-  large: 'large',
-};
-type Size = typeof Size[keyof typeof Size];
+import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
 export interface BaseDatePickerProps extends DarkModeProps {
   /**
diff --git a/packages/date-picker/tsconfig.json b/packages/date-picker/tsconfig.json
index e07c9e1508..ea8877f322 100644
--- a/packages/date-picker/tsconfig.json
+++ b/packages/date-picker/tsconfig.json
@@ -18,14 +18,23 @@
     {
       "path": "../emotion"
     },
+    {
+      "path": "../hooks"
+    },
     {
       "path": "../leafygreen-provider"
     },
     {
       "path": "../lib"
     },
+    {
+      "path": "../palette"
+    },
     {
       "path": "../tokens"
+    },
+    {
+      "path": "../typography"
     }
   ]
 }
diff --git a/yarn.lock b/yarn.lock
index b26d0a3f5b..6e39cd5533 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4251,9 +4251,9 @@
     csstype "^3.0.2"
 
 "@types/react@^17.0.2":
-  version "17.0.62"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.62.tgz#2efe8ddf8533500ec44b1334dd1a97caa2f860e3"
-  integrity sha512-eANCyz9DG8p/Vdhr0ZKST8JV12PhH2ACCDYlFw6DIO+D+ca+uP4jtEDEpVqXZrh/uZdXQGwk7whJa3ah5DtyLw==
+  version "17.0.65"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.65.tgz#95f6a2ab61145ffb69129d07982d047f9e0870cd"
+  integrity sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -5523,9 +5523,9 @@ camelcase@^7.0.0:
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
 caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517:
-  version "1.0.30001519"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601"
-  integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==
+  version "1.0.30001522"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz#44b87a406c901269adcdb834713e23582dd71856"
+  integrity sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
@@ -13232,6 +13232,7 @@ wordwrap@^1.0.0:
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From a66dd00e789b3b910482b29880ce261ed912dbca Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 24 Aug 2023 13:05:33 -0400
Subject: [PATCH 018/351] creates date picker context

---
 .../DateInputSegment/DateInputSegment.stories.tsx  | 14 +++++++++++++-
 .../src/DateInputSegment/DateInputSegment.tsx      |  8 ++++----
 .../date-picker/src/DatePicker/DatePicker.types.ts |  2 +-
 .../DatePickerContext/DatePickerContext.spec.tsx   | 11 +++++++++++
 .../src/DatePickerContext/DatePickerContext.tsx    |  7 +++++++
 .../DatePickerContext/DatePickerContext.types.ts   |  3 +++
 .../date-picker/src/DatePickerContext/index.ts     |  6 ++++++
 7 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 packages/date-picker/src/DatePickerContext/DatePickerContext.spec.tsx
 create mode 100644 packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
 create mode 100644 packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
 create mode 100644 packages/date-picker/src/DatePickerContext/index.ts

diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
index 52b7985222..145e61d4e1 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
@@ -3,10 +3,16 @@ import { StoryFn } from '@storybook/react';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
+
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../DatePickerContext';
 
 import { DateInputSegment } from './DateInputSegment';
 
-const meta: StoryMetaType<typeof DateInputSegment> = {
+const meta: StoryMetaType<typeof DateInputSegment, DatePickerContextProps> = {
   title: 'Components/DatePicker/DateInputSegment',
   component: DateInputSegment,
   parameters: {
@@ -16,7 +22,13 @@ const meta: StoryMetaType<typeof DateInputSegment> = {
         darkMode: [false, true],
         value: [undefined, 6, 2023],
         segment: ['day', 'month', 'year'],
+        size: Object.values(Size),
       },
+      decorator: (Instance, ctx) => (
+        <DatePickerProvider value={{ size: ctx?.args.size }}>
+          <Instance />
+        </DatePickerProvider>
+      ),
       excludeCombinations: [
         {
           value: 6,
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
index f8612b47ce..ff80d65e25 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
@@ -7,6 +7,8 @@ import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
+import { useDatePickerContext } from '../DatePickerContext';
+
 import {
   charsPerSegment,
   defaultMax,
@@ -37,9 +39,7 @@ export function DateInputSegment({
 
   const { theme } = useDarkMode(darkMode);
   const baseFontSize = useUpdatedBaseFontSize();
-  // TODO: implement context
-  // const { size } = useDatePickerContext();
-  const size = Size.Default;
+  const { size } = useDatePickerContext();
 
   return (
     <input
@@ -55,7 +55,7 @@ export function DateInputSegment({
         baseStyles,
         fontSizeStyles[baseFontSize],
         segmentThemeStyles[theme],
-        // segmentSizeStyles[size],
+        segmentSizeStyles[size ?? Size.Default],
         segmentWidthStyles[segment],
       )}
     />
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index cbed00cf2e..920e432f1c 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -1,4 +1,4 @@
-import { BaseDatePickerProps } from 'src/types';
+import { BaseDatePickerProps } from '../types';
 
 export interface DatePickerProps extends BaseDatePickerProps {
   /** The initial selected date. Ignored if `value` is provided */
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.spec.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.spec.tsx
new file mode 100644
index 0000000000..2f07c0ca91
--- /dev/null
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { DatePickerContext } from '.';
+
+describe('packages/date-picker-context', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
new file mode 100644
index 0000000000..00fb321693
--- /dev/null
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+import { DatePickerContextProps } from './DatePickerContext.types';
+
+export const DatePickerContext = createContext<DatePickerContextProps>({});
+export const DatePickerProvider = DatePickerContext.Provider;
+export const useDatePickerContext = () => useContext(DatePickerContext);
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
new file mode 100644
index 0000000000..80b3d33629
--- /dev/null
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
@@ -0,0 +1,3 @@
+import { BaseDatePickerProps } from 'src/types';
+
+export interface DatePickerContextProps extends Partial<BaseDatePickerProps> {}
diff --git a/packages/date-picker/src/DatePickerContext/index.ts b/packages/date-picker/src/DatePickerContext/index.ts
new file mode 100644
index 0000000000..6d92208e93
--- /dev/null
+++ b/packages/date-picker/src/DatePickerContext/index.ts
@@ -0,0 +1,6 @@
+export {
+  DatePickerContext,
+  DatePickerProvider,
+  useDatePickerContext,
+} from './DatePickerContext';
+export { DatePickerContextProps } from './DatePickerContext.types';

From 7e5b4139ea35d20e20084b4ca0aadd38ab3f29b5 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 24 Aug 2023 13:42:41 -0400
Subject: [PATCH 019/351] adds tests for input segment

---
 .../DateInputSegment.spec.tsx                 | 37 ++++++++++++++++---
 .../DateInputSegment.stories.tsx              | 20 +++++++++-
 .../src/DateInputSegment/DateInputSegment.tsx |  2 +-
 .../date-picker/src/DateInputSegment/index.ts |  2 +
 packages/date-picker/src/DatePicker/index.ts  |  2 +-
 packages/date-picker/src/index.ts             |  2 +-
 6 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 packages/date-picker/src/DateInputSegment/index.ts

diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
index 705a43d93a..fb6a049c12 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
@@ -1,11 +1,36 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { DateInputSegment } from '.';
 
-describe('packages/date-input-segment', () => {
-  test('condition', () => {
-
-  })
-})
+describe('packages/date-picker/date-input-segment', () => {
+  describe('Typing', () => {
+    test('Typing a number sets the value', async () => {
+      const result = render(<DateInputSegment segment="day" />);
+      const input = result.getByRole('spinbutton');
+      await userEvent.type(input, '12');
+      expect(input).toHaveValue('12');
+    });
+    test('Typing letters does not the value', async () => {
+      const result = render(<DateInputSegment segment="day" />);
+      const input = result.getByRole('spinbutton');
+      await userEvent.type(input, 'abc');
+      expect(input).toHaveValue('');
+    });
+  });
+  describe('Arrow Keys', () => {
+    test('ArrowUp increments value', async () => {
+      const result = render(<DateInputSegment segment="day" />);
+      const input = result.getByRole('spinbutton');
+      await userEvent.type(input, '{arrowup}');
+      expect(input).toHaveValue('01');
+    });
+    test('ArrowDown decrements value', async () => {
+      const result = render(<DateInputSegment segment="day" />);
+      const input = result.getByRole('spinbutton');
+      await userEvent.type(input, '{arrowup}{arrowup}{arrowdown}');
+      expect(input).toHaveValue('01');
+    });
+  });
+});
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
index 145e61d4e1..6fb45cf74a 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { StoryFn } from '@storybook/react';
+import { StoryFn, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
@@ -62,4 +63,21 @@ const Template: StoryFn<typeof DateInputSegment> = props => (
 
 export const Basic = Template.bind({});
 
+export const Type: StoryObj<typeof DateInputSegment> = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole('spinbutton');
+    await userEvent.type(input, '12');
+  },
+};
+
+export const ArrowUp: StoryObj<typeof DateInputSegment> = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole('spinbutton');
+    input.focus();
+    await userEvent.type(input, '{arrowup}');
+  },
+};
+
 export const Generated = () => {};
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
index ff80d65e25..88b9ad051a 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
@@ -7,7 +7,7 @@ import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
-import { useDatePickerContext } from '../DatePickerContext';
+import { useDatePickerContext } from '../DatePickerContext/DatePickerContext';
 
 import {
   charsPerSegment,
diff --git a/packages/date-picker/src/DateInputSegment/index.ts b/packages/date-picker/src/DateInputSegment/index.ts
new file mode 100644
index 0000000000..be3744ecab
--- /dev/null
+++ b/packages/date-picker/src/DateInputSegment/index.ts
@@ -0,0 +1,2 @@
+export { DateInputSegment } from './DateInputSegment';
+export { DateInputSegmentProps } from './DateInputSegment.types';
diff --git a/packages/date-picker/src/DatePicker/index.ts b/packages/date-picker/src/DatePicker/index.ts
index a38c902e84..359dc98784 100644
--- a/packages/date-picker/src/DatePicker/index.ts
+++ b/packages/date-picker/src/DatePicker/index.ts
@@ -1,2 +1,2 @@
 export { DatePicker } from './DatePicker';
-export { DatePickerProps } from './DatePicker.types';
+export { type DatePickerProps } from './DatePicker.types';
diff --git a/packages/date-picker/src/index.ts b/packages/date-picker/src/index.ts
index 9775b18e9c..adee6daa2b 100644
--- a/packages/date-picker/src/index.ts
+++ b/packages/date-picker/src/index.ts
@@ -1 +1 @@
-export { DatePicker, DatePickerProps } from './DatePicker';
+export { DatePicker, type DatePickerProps } from './DatePicker';

From e822ae4d1c258ea35e081dd5296d4732ddebfc32 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Thu, 24 Aug 2023 11:15:38 -0400
Subject: [PATCH 020/351] [LG-3525] Fix create command (#1943)

* tools/create base dir off of scope

* update package & tsconfig templates

* Create giant-ears-dress.md
---
 .changeset/giant-ears-dress.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/giant-ears-dress.md

diff --git a/.changeset/giant-ears-dress.md b/.changeset/giant-ears-dress.md
new file mode 100644
index 0000000000..d6e04cdb36
--- /dev/null
+++ b/.changeset/giant-ears-dress.md
@@ -0,0 +1,6 @@
+---
+'@lg-tools/create': patch
+---
+
+Fixes broken package.json & tsconfig.json templates.
+Default `directory` is now based off `scope` parameter, if provided.
\ No newline at end of file

From cf8a0886be67db27d6cdc113812dab4004b735e9 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Thu, 24 Aug 2023 11:57:37 -0400
Subject: [PATCH 021/351] Dependency validation [LG-3501 LG-3488] (#1922)

* mv meow, xml2json, svgr to devDependencies

* Update validate script to ignore scripts

* Update validate pkg to ignore built stories

* Adds changesets

* typo

* Update package.json

---------

Co-authored-by: Brooke Scarlett Yalof <brooke.yalof@mongodb.com>
---
 .changeset/lucky-dingos-draw.md   | 5 +++++
 .changeset/purple-moose-suffer.md | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/lucky-dingos-draw.md
 create mode 100644 .changeset/purple-moose-suffer.md

diff --git a/.changeset/lucky-dingos-draw.md b/.changeset/lucky-dingos-draw.md
new file mode 100644
index 0000000000..a74b75e95e
--- /dev/null
+++ b/.changeset/lucky-dingos-draw.md
@@ -0,0 +1,5 @@
+---
+'@lg-tools/validate': patch
+---
+
+Ignores dependencies imported from a `/scripts` directory, or `*.stories.js` file.
diff --git a/.changeset/purple-moose-suffer.md b/.changeset/purple-moose-suffer.md
new file mode 100644
index 0000000000..90d95bb85d
--- /dev/null
+++ b/.changeset/purple-moose-suffer.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/icon': patch
+---
+
+Moves some `dependencies` to devDependencies (`@svgr/core`, `@types/meow`, `@types/xml2json`, `meow`)

From 8157024019c6ff316bd2ed334f70394b0b0d71fc Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Thu, 24 Aug 2023 13:09:05 -0400
Subject: [PATCH 022/351] LG-3510: export `SupportedColors` from index (#1946)

* export SupportedColors from index

* update color default

* lint

---------

Co-authored-by: Brooke Scarlett Yalof <brooke.yalof@mongodb.com>
---
 .changeset/polite-beds-hear.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/polite-beds-hear.md

diff --git a/.changeset/polite-beds-hear.md b/.changeset/polite-beds-hear.md
new file mode 100644
index 0000000000..f7813b3c86
--- /dev/null
+++ b/.changeset/polite-beds-hear.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/logo': patch
+---
+
+Export `SupportedColors` from index.ts

From 1675ffa2772a0ec5561ef390a64a11b500dc9e4a Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Thu, 24 Aug 2023 13:34:57 -0400
Subject: [PATCH 023/351] Mobile, NavCollapse, and NavExpand icons (#1949)

Co-authored-by: Brooke Scarlett Yalof <brooke.yalof@mongodb.com>
---
 .changeset/tough-boats-scream.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tough-boats-scream.md

diff --git a/.changeset/tough-boats-scream.md b/.changeset/tough-boats-scream.md
new file mode 100644
index 0000000000..88306d00ec
--- /dev/null
+++ b/.changeset/tough-boats-scream.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/icon': minor
+---
+
+Adds `Mobile` icon and updates `NavCollapse` and `NavExpand` icons.

From c5732f1b846cabd0889febd5d9e4f03b4586d066 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 25 Aug 2023 13:44:23 -0400
Subject: [PATCH 024/351] fwd ref & better value format

---
 .../DateInputSegment.styles.ts                |  2 +-
 .../src/DateInputSegment/DateInputSegment.tsx | 90 +++++++++++--------
 ...InputSegment.constants.ts => constants.ts} |  0
 3 files changed, 55 insertions(+), 37 deletions(-)
 rename packages/date-picker/src/DateInputSegment/{DateInputSegment.constants.ts => constants.ts} (100%)

diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts b/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
index bec4ac00ee..f3f5b5c46f 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
@@ -8,7 +8,7 @@ import {
   typeScales,
 } from '@leafygreen-ui/tokens';
 
-import { characterWidth } from './DateInputSegment.constants';
+import { characterWidth } from './constants';
 import { DateSegment } from './DateInputSegment.types';
 
 export const baseStyles = css`
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
index 88b9ad051a..a048a4d03f 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { padStart } from 'lodash';
 
 import { cx } from '@leafygreen-ui/emotion';
-import { useControlledValue } from '@leafygreen-ui/hooks';
+import { useControlledValue, useForwardedRef } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
@@ -14,7 +14,7 @@ import {
   defaultMax,
   defaultMin,
   defaultPlaceholder,
-} from './DateInputSegment.constants';
+} from './constants';
 import {
   baseStyles,
   fontSizeStyles,
@@ -24,42 +24,60 @@ import {
 } from './DateInputSegment.styles';
 import { DateInputSegmentProps } from './DateInputSegment.types';
 
-export function DateInputSegment({
-  segment,
-  value: controlledValue,
-  min: minProp,
-  max: maxProp,
-  onChange,
-  darkMode,
-}: DateInputSegmentProps) {
-  const min = minProp ?? defaultMin[segment];
-  const max = maxProp ?? defaultMax[segment];
+export const DateInputSegment = React.forwardRef<
+  HTMLInputElement,
+  DateInputSegmentProps
+>(
+  (
+    {
+      segment,
+      value: controlledValue,
+      min: minProp,
+      max: maxProp,
+      onChange,
+      darkMode,
+    }: DateInputSegmentProps,
+    fwdRef, //: ForwardedRef<HTMLInputElement>,
+  ) => {
+    const min = minProp ?? defaultMin[segment];
+    const max = maxProp ?? defaultMax[segment];
 
-  const { value, handleChange } = useControlledValue(controlledValue, onChange);
+    const inputRef = useForwardedRef(fwdRef, null);
 
-  const { theme } = useDarkMode(darkMode);
-  const baseFontSize = useUpdatedBaseFontSize();
-  const { size } = useDatePickerContext();
+    const { value, handleChange } = useControlledValue(
+      controlledValue?.toString(),
+      onChange,
+      '',
+    );
 
-  return (
-    <input
-      type="number"
-      value={
-        value ? padStart(value?.toString(), charsPerSegment[segment], '0') : ''
-      }
-      min={min}
-      max={max}
-      placeholder={defaultPlaceholder[segment]}
-      onChange={handleChange}
-      className={cx(
-        baseStyles,
-        fontSizeStyles[baseFontSize],
-        segmentThemeStyles[theme],
-        segmentSizeStyles[size ?? Size.Default],
-        segmentWidthStyles[segment],
-      )}
-    />
-  );
-}
+    const { theme } = useDarkMode(darkMode);
+    const baseFontSize = useUpdatedBaseFontSize();
+    const { size } = useDatePickerContext();
+
+    const formatValue = (val: string | undefined) =>
+      val && ['', '0', '00'].includes(val)
+        ? '' // If the value is any form of zero, we set it to an empty string
+        : padStart(val?.toString(), charsPerSegment[segment], '0'); // otherwise, pad the string with 0s
+
+    return (
+      <input
+        ref={inputRef}
+        type="number"
+        value={formatValue(value)}
+        min={min}
+        max={max}
+        placeholder={defaultPlaceholder[segment]}
+        onChange={handleChange}
+        className={cx(
+          baseStyles,
+          fontSizeStyles[baseFontSize],
+          segmentThemeStyles[theme],
+          segmentSizeStyles[size ?? Size.Default],
+          segmentWidthStyles[segment],
+        )}
+      />
+    );
+  },
+);
 
 DateInputSegment.displayName = 'DateInputSegment';
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.constants.ts b/packages/date-picker/src/DateInputSegment/constants.ts
similarity index 100%
rename from packages/date-picker/src/DateInputSegment/DateInputSegment.constants.ts
rename to packages/date-picker/src/DateInputSegment/constants.ts

From 19f2db97e3325eee52c23372f31e1e859c1c0207 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 25 Aug 2023 14:49:11 -0400
Subject: [PATCH 025/351] creates input wrapper

---
 packages/date-picker/package.json             |   1 +
 .../src/DateInputSegment/DateInputSegment.tsx |   2 +-
 .../DateInputWrapper.spec.tsx}                |   9 +-
 .../DateInputWrapper.stories.tsx              |  68 +++++
 .../DateInputWrapper.styles.ts                | 240 ++++++++++++++++++
 .../src/DateInputWrapper/DateInputWrapper.tsx |  70 +++++
 .../DateInputWrapper.types.ts                 |  16 ++
 .../src/InputWrapper/InputWrapper.styles.ts   |   4 -
 .../src/InputWrapper/InputWrapper.tsx         |   9 -
 .../src/InputWrapper/InputWrapper.types.ts    |   1 -
 packages/date-picker/tsconfig.json            |   3 +
 11 files changed, 402 insertions(+), 21 deletions(-)
 rename packages/date-picker/src/{InputWrapper/InputWrapper.spec.tsx => DateInputWrapper/DateInputWrapper.spec.tsx} (62%)
 create mode 100644 packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
 create mode 100644 packages/date-picker/src/DateInputWrapper/DateInputWrapper.styles.ts
 create mode 100644 packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx
 create mode 100644 packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts
 delete mode 100644 packages/date-picker/src/InputWrapper/InputWrapper.styles.ts
 delete mode 100644 packages/date-picker/src/InputWrapper/InputWrapper.tsx
 delete mode 100644 packages/date-picker/src/InputWrapper/InputWrapper.types.ts

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 5778731ecf..23ed1c24a6 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@leafygreen-ui/emotion": "^4.0.7",
     "@leafygreen-ui/hooks": "^7.7.8",
+    "@leafygreen-ui/icon": "^11.23.0",
     "@leafygreen-ui/lib": "^11.0.0",
     "@leafygreen-ui/palette": "^4.0.7",
     "@leafygreen-ui/tokens": "^2.1.4",
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
index a048a4d03f..a95932e4b1 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
@@ -55,7 +55,7 @@ export const DateInputSegment = React.forwardRef<
     const { size } = useDatePickerContext();
 
     const formatValue = (val: string | undefined) =>
-      val && ['', '0', '00'].includes(val)
+      !val || ['', '0', '00'].includes(val)
         ? '' // If the value is any form of zero, we set it to an empty string
         : padStart(val?.toString(), charsPerSegment[segment], '0'); // otherwise, pad the string with 0s
 
diff --git a/packages/date-picker/src/InputWrapper/InputWrapper.spec.tsx b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.spec.tsx
similarity index 62%
rename from packages/date-picker/src/InputWrapper/InputWrapper.spec.tsx
rename to packages/date-picker/src/DateInputWrapper/DateInputWrapper.spec.tsx
index e0c5a7177c..1a88f8a8ae 100644
--- a/packages/date-picker/src/InputWrapper/InputWrapper.spec.tsx
+++ b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.spec.tsx
@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { InputWrapper } from '.';
+import { DateInputWrapper } from '.';
 
 describe('packages/input-wrapper', () => {
-  test('condition', () => {
-
-  })
-})
+  test('condition', () => {});
+});
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
new file mode 100644
index 0000000000..184a708b10
--- /dev/null
+++ b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../DatePickerContext';
+
+import { DateInputWrapper } from './DateInputWrapper';
+
+const meta: StoryMetaType<typeof DateInputWrapper, DatePickerContextProps> = {
+  title: 'Components/DatePicker/DateInputWrapper',
+  component: DateInputWrapper,
+  parameters: {
+    default: null,
+    generate: {
+      combineArgs: {},
+      decorator: (Instance, ctx) => (
+        <DatePickerProvider value={{ size: ctx?.args.size }}>
+          <Instance />
+        </DatePickerProvider>
+      ),
+    },
+  },
+  args: {
+    label: 'Label',
+    description: 'locale',
+    state: 'unset',
+    errorMessage: 'This is an error message',
+    children: <span>children</span>,
+  },
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: StoryFn<typeof DateInputWrapper> = props => (
+  <LeafyGreenProvider>
+    <DateInputWrapper {...props}>
+      <input
+        style={{
+          border: 'none',
+          outline: '1px solid red',
+          padding: 0,
+          margin: 0,
+          width: '100px',
+        }}
+      />
+      {'/'}
+      <input
+        style={{
+          border: 'none',
+          outline: '1px solid red',
+          padding: 0,
+          margin: 0,
+          width: '100px',
+        }}
+      />
+    </DateInputWrapper>
+  </LeafyGreenProvider>
+);
+
+export const Basic = Template.bind({});
+
+export const Generated = () => {};
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.styles.ts b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.styles.ts
new file mode 100644
index 0000000000..20749aa8b0
--- /dev/null
+++ b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.styles.ts
@@ -0,0 +1,240 @@
+import { css } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+import {
+  focusRing,
+  fontFamilies,
+  fontWeights,
+  hoverRing,
+  Size,
+  spacing,
+  transitionDuration,
+} from '@leafygreen-ui/tokens';
+
+import { InputState } from './DateInputWrapper.types';
+
+export const baseStyles = css``;
+
+export const textContainerStyle = css`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${spacing[1]}px;
+`;
+
+const autofillShadowOverride = (color: string) => `0 0 0 100px ${color} inset`;
+
+export const inputBaseStyles = css`
+  display: flex;
+  align-items: center;
+  gap: ${spacing[1]}px;
+  font-size: inherit;
+  line-height: inherit;
+  font-family: ${fontFamilies.default};
+  width: 100%;
+  height: 36px;
+  font-weight: ${fontWeights.regular};
+  border: 1px solid;
+  z-index: 1;
+  outline: none;
+  border-radius: 6px;
+  transition: ${transitionDuration.default}ms ease-in-out;
+  transition-property: border-color, box-shadow;
+  z-index: 0;
+`;
+
+export const inputModeStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.black};
+    background: ${palette.white};
+    border: 1px solid ${palette.gray.base};
+
+    &:-webkit-autofill {
+      color: ${palette.black};
+      background: ${palette.white};
+      border: 1px solid ${palette.gray.base};
+      -webkit-text-fill-color: ${palette.black};
+      box-shadow: ${autofillShadowOverride(palette.white)};
+
+      &:not(:disabled):focus {
+        box-shadow: ${autofillShadowOverride(palette.white)},
+          ${focusRing.light.input};
+        border-color: ${palette.white};
+      }
+
+      &:not(:disabled):hover:not(:focus) {
+        box-shadow: ${autofillShadowOverride(palette.white)},
+          ${hoverRing.light.gray};
+      }
+    }
+
+    &::placeholder {
+      color: ${palette.gray.light1};
+      font-weight: ${fontWeights.regular};
+    }
+
+    &:hover,
+    &:active {
+      &:not(:disabled):not(:focus) {
+        box-shadow: ${hoverRing.light.gray};
+      }
+    }
+
+    &:disabled {
+      color: ${palette.gray.base};
+      background-color: ${palette.gray.light2};
+      border-color: ${palette.gray.light1};
+
+      &::placeholder {
+        color: inherit;
+      }
+
+      &:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+          appearance: none;
+          border: 1px solid ${palette.gray.base};
+          -webkit-text-fill-color: ${palette.gray.base};
+          box-shadow: ${autofillShadowOverride(palette.gray.light2)};
+        }
+      }
+    }
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.gray.light3};
+    background-color: ${palette.gray.dark4};
+    border: 1px solid ${palette.gray.base};
+
+    &:-webkit-autofill {
+      border: 1px solid ${palette.gray.base};
+      color: ${palette.gray.light3};
+      background: ${palette.gray.dark4};
+      -webkit-text-fill-color: ${palette.gray.light3};
+      box-shadow: ${autofillShadowOverride(palette.gray.dark4)};
+
+      &:not(:disabled):focus {
+        box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
+          ${focusRing.dark.input};
+        border-color: ${palette.blue.light1};
+      }
+
+      &:not(:disabled):hover:not(:focus) {
+        box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
+          ${hoverRing.dark.gray};
+      }
+    }
+
+    &:hover,
+    &:active {
+      &:not(:disabled):not(:focus) {
+        box-shadow: ${hoverRing.dark.gray};
+      }
+    }
+
+    &::placeholder {
+      color: ${palette.gray.dark1};
+      font-weight: ${fontWeights.regular};
+    }
+
+    &:disabled {
+      color: ${palette.gray.dark1};
+      background-color: ${palette.gray.dark3};
+      border-color: ${palette.gray.dark2};
+
+      &::placeholder {
+        color: inherit;
+      }
+
+      &:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+          appearance: none;
+          border: 1px solid ${palette.gray.dark1};
+          -webkit-text-fill-color: ${palette.gray.dark1};
+          box-shadow: ${autofillShadowOverride(palette.gray.dark2)};
+        }
+      }
+    }
+  `,
+};
+
+export const inputFocusStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    &:not(:disabled):focus-within {
+      box-shadow: ${focusRing.light.input};
+      border-color: ${palette.white};
+    }
+  `,
+  [Theme.Dark]: css`
+    &:not(:disabled):focus-within {
+      box-shadow: ${focusRing.dark.input};
+      border-color: ${palette.gray.dark4};
+    }
+  `,
+};
+
+export const inputSizeStyles: Record<Size, string> = {
+  [Size.XSmall]: css`
+    height: 22px;
+    padding-inline: 10px;
+  `,
+  [Size.Small]: css`
+    height: 28px;
+    padding-inline: 10px;
+  `,
+  [Size.Default]: css`
+    height: 36px;
+    padding-inline: 12px;
+  `,
+  [Size.Large]: css`
+    height: 48px;
+    padding-inline: 16px;
+  `,
+};
+
+export const inputStateStyles: Record<InputState, Record<Theme, string>> = {
+  [InputState.Error]: {
+    [Theme.Light]: css`
+      &:not(:disabled) {
+        border-color: ${palette.red.base};
+
+        &:hover,
+        &:active {
+          &:not(:disabled):not(:focus) {
+            box-shadow: ${hoverRing.light.red};
+          }
+        }
+      }
+    `,
+    [Theme.Dark]: css`
+      &:not(:disabled) {
+        border-color: ${palette.red.light1};
+
+        &:hover,
+        &:active {
+          &:not(:disabled):not(:focus) {
+            box-shadow: ${hoverRing.dark.red};
+          }
+        }
+      }
+    `,
+  },
+  [InputState.Unset]: {
+    [Theme.Light]: css``,
+    [Theme.Dark]: css``,
+  },
+};
+
+export const errorIconStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.red.base};
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.red.light1};
+  `,
+};
+
+export const iconStyles = css`
+  color: ${palette.gray.base};
+`;
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx
new file mode 100644
index 0000000000..eea8accf8f
--- /dev/null
+++ b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { cx } from '@leafygreen-ui/emotion';
+import Icon from '@leafygreen-ui/icon';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { Size } from '@leafygreen-ui/tokens';
+import { Description, Error, Label } from '@leafygreen-ui/typography';
+
+import { useDatePickerContext } from '../DatePickerContext';
+
+import {
+  baseStyles,
+  errorIconStyles,
+  iconStyles,
+  inputBaseStyles,
+  inputFocusStyles,
+  inputModeStyles,
+  inputSizeStyles,
+  inputStateStyles,
+  textContainerStyle,
+} from './DateInputWrapper.styles';
+import { DateInputWrapperProps, InputState } from './DateInputWrapper.types';
+
+export const DateInputWrapper = React.forwardRef<
+  HTMLDivElement,
+  DateInputWrapperProps
+>(
+  (
+    {
+      label,
+      description,
+      state,
+      errorMessage,
+      children,
+      inputId,
+      ...rest
+    }: DateInputWrapperProps,
+    fwdRef,
+  ) => {
+    const { theme } = useDarkMode();
+    const { size } = useDatePickerContext();
+
+    return (
+      <div className={cx(baseStyles)} ref={fwdRef} {...rest}>
+        <div className={textContainerStyle}>
+          <Label htmlFor={inputId}>{label}</Label>
+          <Description>{description}</Description>
+        </div>
+        <div
+          className={cx(
+            inputBaseStyles,
+            inputModeStyles[theme],
+            inputFocusStyles[theme],
+            inputSizeStyles[size ?? Size.Default],
+            inputStateStyles[state][theme],
+          )}
+        >
+          {children}
+          {state === InputState.Error && (
+            <Icon glyph="Warning" className={errorIconStyles[theme]} />
+          )}
+          <Icon glyph="Calendar" className={iconStyles} />
+        </div>
+        {state === InputState.Error && <Error>{errorMessage}</Error>}
+      </div>
+    );
+  },
+);
+
+DateInputWrapper.displayName = 'DateInputWrapper';
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts
new file mode 100644
index 0000000000..3b24384fc8
--- /dev/null
+++ b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts
@@ -0,0 +1,16 @@
+import { HTMLElementProps } from '@leafygreen-ui/lib';
+
+export const InputState = {
+  Unset: 'unset',
+  Error: 'error',
+} as const;
+
+export type InputState = (typeof InputState)[keyof typeof InputState];
+
+export interface DateInputWrapperProps extends HTMLElementProps<'div'> {
+  label: string;
+  description: string;
+  state: InputState;
+  errorMessage: string;
+  inputId: string;
+}
diff --git a/packages/date-picker/src/InputWrapper/InputWrapper.styles.ts b/packages/date-picker/src/InputWrapper/InputWrapper.styles.ts
deleted file mode 100644
index 928608f58d..0000000000
--- a/packages/date-picker/src/InputWrapper/InputWrapper.styles.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-
-import { css } from '@leafygreen-ui/emotion';
-
-export const baseStyles = css``;
diff --git a/packages/date-picker/src/InputWrapper/InputWrapper.tsx b/packages/date-picker/src/InputWrapper/InputWrapper.tsx
deleted file mode 100644
index 37b6b4256f..0000000000
--- a/packages/date-picker/src/InputWrapper/InputWrapper.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-
-import React from 'react';
-
-// TODO: forwardRef
-export function InputWrapper({}) {
-  return <div>your content here</div>;
-}
-
-InputWrapper.displayName = 'InputWrapper';
diff --git a/packages/date-picker/src/InputWrapper/InputWrapper.types.ts b/packages/date-picker/src/InputWrapper/InputWrapper.types.ts
deleted file mode 100644
index 42a702c855..0000000000
--- a/packages/date-picker/src/InputWrapper/InputWrapper.types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export interface InputWrapperProps {}
\ No newline at end of file
diff --git a/packages/date-picker/tsconfig.json b/packages/date-picker/tsconfig.json
index ea8877f322..47b5c95bab 100644
--- a/packages/date-picker/tsconfig.json
+++ b/packages/date-picker/tsconfig.json
@@ -21,6 +21,9 @@
     {
       "path": "../hooks"
     },
+    {
+      "path": "../icon"
+    },
     {
       "path": "../leafygreen-provider"
     },

From 92468ef5992d12dc0614d108ee67e1d9795f1136 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 25 Aug 2023 16:44:36 -0400
Subject: [PATCH 026/351] adds accessible ids to input wrapper

---
 .../DateInputWrapper.stories.tsx              | 104 +++++++++++++-----
 .../DateInputWrapper.styles.ts                |  19 +++-
 .../src/DateInputWrapper/DateInputWrapper.tsx |  34 ++++--
 .../DateInputWrapper.types.ts                 |  10 +-
 4 files changed, 125 insertions(+), 42 deletions(-)

diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
index 184a708b10..57b3c96ced 100644
--- a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
+++ b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
@@ -1,6 +1,8 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { StoryFn } from '@storybook/react';
 
+import { css } from '@leafygreen-ui/emotion';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
@@ -16,52 +18,96 @@ const meta: StoryMetaType<typeof DateInputWrapper, DatePickerContextProps> = {
   component: DateInputWrapper,
   parameters: {
     default: null,
+    controls: {
+      exclude: ['inputId', 'descriptionId', 'errorId'],
+    },
     generate: {
-      combineArgs: {},
+      combineArgs: {
+        label: [undefined, 'Label'],
+        description: [undefined, 'United States'],
+        state: ['unset', 'error'],
+      },
+      excludeCombinations: [
+        {
+          label: undefined,
+          description: 'United States',
+        },
+      ],
       decorator: (Instance, ctx) => (
         <DatePickerProvider value={{ size: ctx?.args.size }}>
           <Instance />
         </DatePickerProvider>
       ),
+      args: {
+        children: (
+          <input
+            className={css`
+              border: none;
+              padding: 0;
+              margin: 0;
+              font-family: inherit;
+              &::placeholder {
+              }
+            `}
+            placeholder="placeholder"
+          />
+        ),
+      },
     },
   },
   args: {
     label: 'Label',
-    description: 'locale',
+    description: 'United States',
     state: 'unset',
     errorMessage: 'This is an error message',
-    children: <span>children</span>,
   },
-  argTypes: {},
+  argTypes: {
+    inputId: { control: 'none' },
+    descriptionId: { control: 'none' },
+    errorId: { control: 'none' },
+  },
 };
 
 export default meta;
 
-const Template: StoryFn<typeof DateInputWrapper> = props => (
-  <LeafyGreenProvider>
-    <DateInputWrapper {...props}>
-      <input
-        style={{
-          border: 'none',
-          outline: '1px solid red',
-          padding: 0,
-          margin: 0,
-          width: '100px',
-        }}
-      />
-      {'/'}
-      <input
-        style={{
-          border: 'none',
-          outline: '1px solid red',
-          padding: 0,
-          margin: 0,
-          width: '100px',
-        }}
-      />
-    </DateInputWrapper>
-  </LeafyGreenProvider>
-);
+const Template: StoryFn<typeof DateInputWrapper> = ({
+  label,
+  description,
+  state,
+  errorMessage,
+}) => {
+  const inputId = 'input';
+  const descriptionId = 'descr';
+  const errorId = 'error';
+
+  return (
+    <LeafyGreenProvider>
+      <DateInputWrapper
+        label={label}
+        description={description}
+        state={state}
+        errorMessage={errorMessage}
+        inputId={inputId}
+        descriptionId={descriptionId}
+        errorId={errorId}
+      >
+        <input
+          id={inputId}
+          aria-describedby={descriptionId + ' ' + errorId}
+          style={{
+            border: 'none',
+            outline: '1px solid green',
+            padding: 0,
+            margin: 0,
+            width: '100px',
+            fontFamily: 'inherit',
+          }}
+          placeholder="<placeholder>"
+        />
+      </DateInputWrapper>
+    </LeafyGreenProvider>
+  );
+};
 
 export const Basic = Template.bind({});
 
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.styles.ts b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.styles.ts
index 20749aa8b0..f0dae94076 100644
--- a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.styles.ts
+++ b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.styles.ts
@@ -2,6 +2,7 @@ import { css } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 import {
+  BaseFontSize,
   focusRing,
   fontFamilies,
   fontWeights,
@@ -9,11 +10,23 @@ import {
   Size,
   spacing,
   transitionDuration,
+  typeScales,
 } from '@leafygreen-ui/tokens';
 
 import { InputState } from './DateInputWrapper.types';
 
-export const baseStyles = css``;
+export const baseWrapperStyles = css``;
+
+export const wrapperFontStyles: Record<BaseFontSize, string> = {
+  [BaseFontSize.Body1]: css`
+    font-size: ${typeScales.body1.fontSize}px;
+    line-height: ${typeScales.body1.lineHeight}px;
+  `,
+  [BaseFontSize.Body2]: css`
+    font-size: ${typeScales.body2.fontSize}px;
+    line-height: 20px; // Hardcoding because it does not match body2 lineHeight
+  `,
+};
 
 export const textContainerStyle = css`
   display: flex;
@@ -226,6 +239,10 @@ export const inputStateStyles: Record<InputState, Record<Theme, string>> = {
   },
 };
 
+export const childrenWrapperStyles = css`
+  width: 100%;
+`;
+
 export const errorIconStyles: Record<Theme, string> = {
   [Theme.Light]: css`
     color: ${palette.red.base};
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx
index eea8accf8f..d76beefd9d 100644
--- a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx
+++ b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx
@@ -4,12 +4,18 @@ import { cx } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
-import { Description, Error, Label } from '@leafygreen-ui/typography';
+import {
+  Description,
+  Error,
+  Label,
+  useUpdatedBaseFontSize,
+} from '@leafygreen-ui/typography';
 
 import { useDatePickerContext } from '../DatePickerContext';
 
 import {
-  baseStyles,
+  baseWrapperStyles,
+  childrenWrapperStyles,
   errorIconStyles,
   iconStyles,
   inputBaseStyles,
@@ -18,6 +24,7 @@ import {
   inputSizeStyles,
   inputStateStyles,
   textContainerStyle,
+  wrapperFontStyles,
 } from './DateInputWrapper.styles';
 import { DateInputWrapperProps, InputState } from './DateInputWrapper.types';
 
@@ -29,22 +36,31 @@ export const DateInputWrapper = React.forwardRef<
     {
       label,
       description,
-      state,
+      state = InputState.Unset,
       errorMessage,
       children,
       inputId,
+      descriptionId,
+      errorId,
       ...rest
     }: DateInputWrapperProps,
     fwdRef,
   ) => {
     const { theme } = useDarkMode();
     const { size } = useDatePickerContext();
+    const baseFontSize = useUpdatedBaseFontSize();
 
     return (
-      <div className={cx(baseStyles)} ref={fwdRef} {...rest}>
+      <div
+        className={cx(baseWrapperStyles, wrapperFontStyles[baseFontSize])}
+        ref={fwdRef}
+        {...rest}
+      >
         <div className={textContainerStyle}>
-          <Label htmlFor={inputId}>{label}</Label>
-          <Description>{description}</Description>
+          {label && <Label htmlFor={inputId}>{label}</Label>}
+          {description && (
+            <Description id={descriptionId}>{description}</Description>
+          )}
         </div>
         <div
           className={cx(
@@ -55,13 +71,15 @@ export const DateInputWrapper = React.forwardRef<
             inputStateStyles[state][theme],
           )}
         >
-          {children}
+          <div className={childrenWrapperStyles}>{children}</div>
           {state === InputState.Error && (
             <Icon glyph="Warning" className={errorIconStyles[theme]} />
           )}
           <Icon glyph="Calendar" className={iconStyles} />
         </div>
-        {state === InputState.Error && <Error>{errorMessage}</Error>}
+        {state === InputState.Error && (
+          <Error id={errorId}>{errorMessage}</Error>
+        )}
       </div>
     );
   },
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts
index 3b24384fc8..fa9e50ae10 100644
--- a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts
+++ b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts
@@ -8,9 +8,11 @@ export const InputState = {
 export type InputState = (typeof InputState)[keyof typeof InputState];
 
 export interface DateInputWrapperProps extends HTMLElementProps<'div'> {
-  label: string;
-  description: string;
-  state: InputState;
-  errorMessage: string;
+  label?: string;
+  description?: string;
+  state?: InputState;
+  errorMessage?: string;
   inputId: string;
+  descriptionId?: string;
+  errorId?: string;
 }

From eee595b3b5c29b82f0b25e635fdcdf90b738c4c7 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 28 Aug 2023 12:18:10 -0400
Subject: [PATCH 027/351] Updates input segment formatting

---
 .../DateInputSegment.spec.tsx                 | 158 +++++++++++++++---
 .../DateInputSegment.stories.tsx              |  27 +--
 .../src/DateInputSegment/DateInputSegment.tsx |  40 ++---
 .../DateInputSegment.types.ts                 |  12 +-
 .../date-picker/src/DateInputSegment/index.ts |   2 +-
 .../date-picker/src/DateInputSegment/utils.ts |  27 +++
 6 files changed, 192 insertions(+), 74 deletions(-)
 create mode 100644 packages/date-picker/src/DateInputSegment/utils.ts

diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
index fb6a049c12..20173fe90d 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
@@ -2,35 +2,147 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { DateSegment } from './DateInputSegment.types';
+import { getValueFormatter } from './utils';
 import { DateInputSegment } from '.';
 
+const handler = jest.fn();
+
 describe('packages/date-picker/date-input-segment', () => {
+  beforeEach(() => {
+    handler.mockClear();
+  });
+
+  describe('format value', () => {
+    describe.each(['day', 'month'] as Array<DateSegment>)('', segment => {
+      const formatter = getValueFormatter(segment);
+
+      test('formats 2 digit values', () => {
+        expect(formatter('12')).toEqual('12');
+      });
+
+      test('pads 1 digit value', () => {
+        expect(formatter('2')).toEqual('02');
+      });
+
+      test('truncates 3+ digit values', () => {
+        expect(formatter('123')).toEqual('23');
+      });
+
+      test('sets 0 to empty string', () => {
+        expect(formatter('0')).toEqual('');
+      });
+
+      test('sets undefined to empty string', () => {
+        expect(formatter(undefined)).toEqual('');
+      });
+    });
+
+    describe('year', () => {
+      const formatter = getValueFormatter('year');
+
+      test('formats 4 digit values', () => {
+        expect(formatter('2023')).toEqual('2023');
+      });
+
+      test('pads < 4 digit value', () => {
+        expect(formatter('123')).toEqual('0123');
+      });
+
+      test('truncates 5+ digit values', () => {
+        expect(formatter('12345')).toEqual('2345');
+      });
+
+      test('sets 0 to empty string', () => {
+        expect(formatter('0')).toEqual('');
+      });
+
+      test('sets undefined to empty string', () => {
+        expect(formatter(undefined)).toEqual('');
+      });
+    });
+  });
+
+  describe('rendering', () => {
+    test('Rendering with a value sets the input value', () => {
+      const result = render(
+        <DateInputSegment segment="day" data-testid="testid" value="12" />,
+      );
+      const input = result.getByTestId('testid');
+      expect((input as HTMLInputElement).value).toBe('12');
+    });
+
+    test('rerendering updates the value', () => {
+      const result = render(
+        <DateInputSegment segment="day" data-testid="testid" value="12" />,
+      );
+      const input = result.getByTestId('testid');
+      result.rerender(
+        <DateInputSegment segment="day" data-testid="testid" value="8" />,
+      );
+      expect((input as HTMLInputElement).value).toBe('08');
+    });
+  });
+
   describe('Typing', () => {
-    test('Typing a number sets the value', async () => {
-      const result = render(<DateInputSegment segment="day" />);
-      const input = result.getByRole('spinbutton');
-      await userEvent.type(input, '12');
-      expect(input).toHaveValue('12');
-    });
-    test('Typing letters does not the value', async () => {
-      const result = render(<DateInputSegment segment="day" />);
-      const input = result.getByRole('spinbutton');
-      await userEvent.type(input, 'abc');
-      expect(input).toHaveValue('');
+    test('Typing a number calls the change handler', () => {
+      const result = render(
+        <DateInputSegment
+          segment="day"
+          data-testid="testid"
+          onChange={handler}
+        />,
+      );
+      const input = result.getByTestId('testid');
+      userEvent.type(input, '12');
+      expect(handler).toHaveBeenCalledWith('12');
+    });
+
+    test('Typing letters does not call the handler', async () => {
+      const result = render(
+        <DateInputSegment
+          segment="day"
+          data-testid="testid"
+          onChange={handler}
+        />,
+      );
+      const input = result.getByTestId('testid');
+      userEvent.type(input, 'abc');
+      expect(handler).not.toHaveBeenCalled();
     });
   });
-  describe('Arrow Keys', () => {
-    test('ArrowUp increments value', async () => {
-      const result = render(<DateInputSegment segment="day" />);
-      const input = result.getByRole('spinbutton');
-      await userEvent.type(input, '{arrowup}');
-      expect(input).toHaveValue('01');
-    });
-    test('ArrowDown decrements value', async () => {
-      const result = render(<DateInputSegment segment="day" />);
-      const input = result.getByRole('spinbutton');
-      await userEvent.type(input, '{arrowup}{arrowup}{arrowdown}');
-      expect(input).toHaveValue('01');
+
+  // Skipping, since {arrowup}/{arrowdown} do not trigger
+  // a trigger event in userEvent
+  // https://github.com/testing-library/user-event/issues/1066
+  // eslint-disable-next-line jest/no-disabled-tests
+  describe.skip('Arrow Keys', () => {
+    test('ArrowUp calls handler with +1', () => {
+      const result = render(
+        <DateInputSegment
+          segment="day"
+          data-testid="testid"
+          onChange={handler}
+          value="8"
+        />,
+      );
+      const input = result.getByTestId('testid');
+      userEvent.type(input, '{arrowup}');
+      expect(handler).toHaveBeenCalledWith('09');
+    });
+
+    test('ArrowDown calls handler with -1', () => {
+      const result = render(
+        <DateInputSegment
+          segment="day"
+          data-testid="testid"
+          onChange={handler}
+          value="8"
+        />,
+      );
+      const input = result.getByTestId('testid');
+      userEvent.type(input, '{arrowdown}');
+      expect(handler).toHaveBeenCalledWith('07');
     });
   });
 });
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
index 6fb45cf74a..5dbe5f18e4 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { StoryFn, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { StoryFn } from '@storybook/react';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
@@ -21,8 +20,9 @@ const meta: StoryMetaType<typeof DateInputSegment, DatePickerContextProps> = {
     generate: {
       combineArgs: {
         darkMode: [false, true],
-        value: [undefined, 6, 2023],
+        value: [undefined, '6', '2023'],
         segment: ['day', 'month', 'year'],
+        // @ts-expect-error
         size: Object.values(Size),
       },
       decorator: (Instance, ctx) => (
@@ -32,11 +32,11 @@ const meta: StoryMetaType<typeof DateInputSegment, DatePickerContextProps> = {
       ),
       excludeCombinations: [
         {
-          value: 6,
+          value: '6',
           segment: 'year',
         },
         {
-          value: 2023,
+          value: '2023',
           segment: ['day', 'month'],
         },
       ],
@@ -63,21 +63,4 @@ const Template: StoryFn<typeof DateInputSegment> = props => (
 
 export const Basic = Template.bind({});
 
-export const Type: StoryObj<typeof DateInputSegment> = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByRole('spinbutton');
-    await userEvent.type(input, '12');
-  },
-};
-
-export const ArrowUp: StoryObj<typeof DateInputSegment> = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByRole('spinbutton');
-    input.focus();
-    await userEvent.type(input, '{arrowup}');
-  },
-};
-
 export const Generated = () => {};
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
index a95932e4b1..87bb04c6bf 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
@@ -1,20 +1,14 @@
-import React from 'react';
-import { padStart } from 'lodash';
+import React, { ChangeEventHandler } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
-import { useControlledValue, useForwardedRef } from '@leafygreen-ui/hooks';
+import { useForwardedRef } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
 import { useDatePickerContext } from '../DatePickerContext/DatePickerContext';
 
-import {
-  charsPerSegment,
-  defaultMax,
-  defaultMin,
-  defaultPlaceholder,
-} from './constants';
+import { defaultMax, defaultMin, defaultPlaceholder } from './constants';
 import {
   baseStyles,
   fontSizeStyles,
@@ -22,7 +16,12 @@ import {
   segmentThemeStyles,
   segmentWidthStyles,
 } from './DateInputSegment.styles';
-import { DateInputSegmentProps } from './DateInputSegment.types';
+import { DateInputSegmentProps, DateSegment } from './DateInputSegment.types';
+import { getValueFormatter } from './utils';
+
+export function isDateSegment(str: string): str is DateSegment {
+  return ['day', 'month', 'year'].includes(str);
+}
 
 export const DateInputSegment = React.forwardRef<
   HTMLInputElement,
@@ -31,11 +30,12 @@ export const DateInputSegment = React.forwardRef<
   (
     {
       segment,
-      value: controlledValue,
+      value,
       min: minProp,
       max: maxProp,
       onChange,
       darkMode,
+      ...rest
     }: DateInputSegmentProps,
     fwdRef, //: ForwardedRef<HTMLInputElement>,
   ) => {
@@ -44,30 +44,26 @@ export const DateInputSegment = React.forwardRef<
 
     const inputRef = useForwardedRef(fwdRef, null);
 
-    const { value, handleChange } = useControlledValue(
-      controlledValue?.toString(),
-      onChange,
-      '',
-    );
-
     const { theme } = useDarkMode(darkMode);
     const baseFontSize = useUpdatedBaseFontSize();
     const { size } = useDatePickerContext();
 
-    const formatValue = (val: string | undefined) =>
-      !val || ['', '0', '00'].includes(val)
-        ? '' // If the value is any form of zero, we set it to an empty string
-        : padStart(val?.toString(), charsPerSegment[segment], '0'); // otherwise, pad the string with 0s
+    const formatValue = getValueFormatter(segment);
+
+    const changeHandler: ChangeEventHandler<HTMLInputElement> = e => {
+      onChange?.(e.target.value);
+    };
 
     return (
       <input
+        {...rest}
         ref={inputRef}
         type="number"
         value={formatValue(value)}
         min={min}
         max={max}
         placeholder={defaultPlaceholder[segment]}
-        onChange={handleChange}
+        onChange={changeHandler}
         className={cx(
           baseStyles,
           fontSizeStyles[baseFontSize],
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
index aebb8bd898..64e41b494b 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
@@ -1,15 +1,15 @@
-import { ChangeEventHandler } from 'react';
-
-import { DarkModeProps } from '@leafygreen-ui/lib';
+import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
 export type DateSegment = 'day' | 'month' | 'year';
 
-export interface DateInputSegmentProps extends DarkModeProps {
+export interface DateInputSegmentProps
+  extends DarkModeProps,
+    Omit<HTMLElementProps<'input'>, 'onChange'> {
   /** Which date segment this input represents. Determines the aria-label, and min/max values where relevant */
   segment: DateSegment;
 
   /** The value of the date segment */
-  value?: number;
+  value?: string;
 
   /** Optional minimum value. Defaults to 0 for day/month segments, and 1970 for year segments */
   min?: number;
@@ -18,5 +18,5 @@ export interface DateInputSegmentProps extends DarkModeProps {
   max?: number;
 
   /** Callback fired when the value changes */
-  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onChange?: (val: string) => void;
 }
diff --git a/packages/date-picker/src/DateInputSegment/index.ts b/packages/date-picker/src/DateInputSegment/index.ts
index be3744ecab..49cefb3617 100644
--- a/packages/date-picker/src/DateInputSegment/index.ts
+++ b/packages/date-picker/src/DateInputSegment/index.ts
@@ -1,2 +1,2 @@
-export { DateInputSegment } from './DateInputSegment';
+export { DateInputSegment, isDateSegment } from './DateInputSegment';
 export { DateInputSegmentProps } from './DateInputSegment.types';
diff --git a/packages/date-picker/src/DateInputSegment/utils.ts b/packages/date-picker/src/DateInputSegment/utils.ts
new file mode 100644
index 0000000000..afe7e5456e
--- /dev/null
+++ b/packages/date-picker/src/DateInputSegment/utils.ts
@@ -0,0 +1,27 @@
+import { padStart } from 'lodash';
+
+import { charsPerSegment } from './constants';
+import { DateSegment } from './DateInputSegment.types';
+
+const isZeroLike = (val: any) =>
+  !val || isNaN(val) || ['', '0', '00'].includes(val);
+
+export const getValueFormatter =
+  (segment: DateSegment) => (val: string | undefined) => {
+    // If the value is any form of zero, we set it to an empty string
+    if (isZeroLike(val)) return '';
+
+    // otherwise, pad the string with 0s, or trim it to n chars
+
+    const padded = padStart(
+      Number(val).toString(),
+      charsPerSegment[segment],
+      '0',
+    );
+    const trimmed = padded.slice(
+      padded.length - charsPerSegment[segment],
+      padded.length,
+    );
+
+    return trimmed;
+  };

From 1a197c207687eb87a9b05f43060b025c63955b5d Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 28 Aug 2023 12:23:47 -0400
Subject: [PATCH 028/351] Update DateInputWrapper generated stories

---
 .../DateInputWrapper.stories.tsx              | 67 ++++++++++---------
 .../date-picker/src/DateInputWrapper/index.ts |  5 ++
 2 files changed, 41 insertions(+), 31 deletions(-)
 create mode 100644 packages/date-picker/src/DateInputWrapper/index.ts

diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
index 57b3c96ced..e122d4fe26 100644
--- a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
+++ b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
@@ -23,6 +23,7 @@ const meta: StoryMetaType<typeof DateInputWrapper, DatePickerContextProps> = {
     },
     generate: {
       combineArgs: {
+        darkMode: [false, true],
         label: [undefined, 'Label'],
         description: [undefined, 'United States'],
         state: ['unset', 'error'],
@@ -34,9 +35,14 @@ const meta: StoryMetaType<typeof DateInputWrapper, DatePickerContextProps> = {
         },
       ],
       decorator: (Instance, ctx) => (
-        <DatePickerProvider value={{ size: ctx?.args.size }}>
-          <Instance />
-        </DatePickerProvider>
+        <LeafyGreenProvider
+          darkMode={ctx?.args.darkMode}
+          baseFontSize={ctx?.args.baseFontSize}
+        >
+          <DatePickerProvider value={{ size: ctx?.args.size }}>
+            <Instance />
+          </DatePickerProvider>
+        </LeafyGreenProvider>
       ),
       args: {
         children: (
@@ -46,10 +52,10 @@ const meta: StoryMetaType<typeof DateInputWrapper, DatePickerContextProps> = {
               padding: 0;
               margin: 0;
               font-family: inherit;
-              &::placeholder {
-              }
+              background-color: inherit;
+              color: inherit;
             `}
-            placeholder="placeholder"
+            placeholder="<placeholder text>"
           />
         ),
       },
@@ -65,6 +71,7 @@ const meta: StoryMetaType<typeof DateInputWrapper, DatePickerContextProps> = {
     inputId: { control: 'none' },
     descriptionId: { control: 'none' },
     errorId: { control: 'none' },
+    darkMode: { control: 'boolean' },
   },
 };
 
@@ -81,31 +88,29 @@ const Template: StoryFn<typeof DateInputWrapper> = ({
   const errorId = 'error';
 
   return (
-    <LeafyGreenProvider>
-      <DateInputWrapper
-        label={label}
-        description={description}
-        state={state}
-        errorMessage={errorMessage}
-        inputId={inputId}
-        descriptionId={descriptionId}
-        errorId={errorId}
-      >
-        <input
-          id={inputId}
-          aria-describedby={descriptionId + ' ' + errorId}
-          style={{
-            border: 'none',
-            outline: '1px solid green',
-            padding: 0,
-            margin: 0,
-            width: '100px',
-            fontFamily: 'inherit',
-          }}
-          placeholder="<placeholder>"
-        />
-      </DateInputWrapper>
-    </LeafyGreenProvider>
+    <DateInputWrapper
+      label={label}
+      description={description}
+      state={state}
+      errorMessage={errorMessage}
+      inputId={inputId}
+      descriptionId={descriptionId}
+      errorId={errorId}
+    >
+      <input
+        id={inputId}
+        aria-describedby={descriptionId + ' ' + errorId}
+        style={{
+          border: 'none',
+          outline: '1px solid green',
+          padding: 0,
+          margin: 0,
+          width: '100px',
+          fontFamily: 'inherit',
+        }}
+        placeholder="<placeholder>"
+      />
+    </DateInputWrapper>
   );
 };
 
diff --git a/packages/date-picker/src/DateInputWrapper/index.ts b/packages/date-picker/src/DateInputWrapper/index.ts
new file mode 100644
index 0000000000..532e9360e8
--- /dev/null
+++ b/packages/date-picker/src/DateInputWrapper/index.ts
@@ -0,0 +1,5 @@
+export { DateInputWrapper } from './DateInputWrapper';
+export {
+  type DateInputWrapperProps,
+  type InputState,
+} from './DateInputWrapper.types';

From 3223fa391055aee4ad224fb4dea62557f083816a Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 29 Aug 2023 15:05:21 -0400
Subject: [PATCH 029/351] DateInputBox

---
 packages/date-picker/package.json             |  12 +-
 .../src/DateInputBox/DateInputBox.spec.tsx    |  11 ++
 .../src/DateInputBox/DateInputBox.stories.tsx |  62 ++++++++++
 .../src/DateInputBox/DateInputBox.styles.ts   |  11 ++
 .../src/DateInputBox/DateInputBox.tsx         | 109 ++++++++++++++++++
 .../src/DateInputBox/DateInputBox.types.ts    |  22 ++++
 .../date-picker/src/DateInputBox/index.ts     |   3 +
 .../src/DateInputBox/useDateSegments.ts       |  85 ++++++++++++++
 .../date-picker/src/DateInputBox/utils.ts     |  52 +++++++++
 .../DateInputSegment.spec.tsx                 |  15 ++-
 .../DateInputSegment.stories.tsx              |   2 +-
 .../DateInputSegment.types.ts                 |   2 +-
 .../date-picker/src/DateInputSegment/index.ts |   5 +-
 .../date-picker/src/DateInputSegment/utils.ts |   4 +-
 .../DateInputWrapper.stories.tsx              |   6 +-
 .../DatePickerContext/DatePickerContext.tsx   |  20 +++-
 .../DatePickerContext.types.ts                |   2 +-
 packages/date-picker/src/utils/isValidDate.ts |   4 +
 .../date-picker/src/utils/isValidLocale.ts    |  14 +++
 yarn.lock                                     |  34 ++++--
 20 files changed, 451 insertions(+), 24 deletions(-)
 create mode 100644 packages/date-picker/src/DateInputBox/DateInputBox.spec.tsx
 create mode 100644 packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx
 create mode 100644 packages/date-picker/src/DateInputBox/DateInputBox.styles.ts
 create mode 100644 packages/date-picker/src/DateInputBox/DateInputBox.tsx
 create mode 100644 packages/date-picker/src/DateInputBox/DateInputBox.types.ts
 create mode 100644 packages/date-picker/src/DateInputBox/index.ts
 create mode 100644 packages/date-picker/src/DateInputBox/useDateSegments.ts
 create mode 100644 packages/date-picker/src/DateInputBox/utils.ts
 create mode 100644 packages/date-picker/src/utils/isValidDate.ts
 create mode 100644 packages/date-picker/src/utils/isValidLocale.ts

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 23ed1c24a6..ad9b6b3cab 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -16,16 +16,22 @@
   },
   "dependencies": {
     "@leafygreen-ui/emotion": "^4.0.7",
-    "@leafygreen-ui/hooks": "^7.7.8",
+    "@leafygreen-ui/hooks": "^8.0.0",
     "@leafygreen-ui/icon": "^11.23.0",
     "@leafygreen-ui/lib": "^11.0.0",
     "@leafygreen-ui/palette": "^4.0.7",
-    "@leafygreen-ui/tokens": "^2.1.4",
-    "@leafygreen-ui/typography": "^16.5.5"
+    "@leafygreen-ui/tokens": "^2.2.0",
+    "@leafygreen-ui/typography": "^16.5.5",
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0"
   },
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": "^3.1.6"
   },
+  "resolutions": {
+    "date-fns/@babel/runtime": "7.22.10",
+    "date-fns-tz/@babel/runtime": "7.22.10"
+  },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/date-picker",
   "repository": {
     "type": "git",
diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInputBox/DateInputBox.spec.tsx
new file mode 100644
index 0000000000..d08fbce4e0
--- /dev/null
+++ b/packages/date-picker/src/DateInputBox/DateInputBox.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { DateInputBox } from '.';
+
+describe('packages/date-input-box', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx
new file mode 100644
index 0000000000..09cc1abed5
--- /dev/null
+++ b/packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx
@@ -0,0 +1,62 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect, useState } from 'react';
+import { StoryFn } from '@storybook/react';
+import { isValid } from 'date-fns';
+
+import { StoryMetaType } from '@leafygreen-ui/lib';
+
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../DatePickerContext';
+
+import { DateInputBox } from './DateInputBox';
+
+const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
+  title: 'Components/DatePicker/DateInputBox',
+  component: DateInputBox,
+  decorators: [
+    (Story, ctx) => (
+      // @ts-expect-error - decoratorFn context only has access to component props
+      <DatePickerProvider value={{ ...ctx.args }}>
+        <Story />
+      </DatePickerProvider>
+    ),
+  ],
+  parameters: {
+    default: null,
+    generate: {},
+  },
+  args: {
+    label: 'Label',
+    dateFormat: 'en-UK',
+    timeZone: 'Europe/London',
+  },
+  argTypes: {
+    value: { control: 'date' },
+  },
+};
+
+export default meta;
+
+export const Basic: StoryFn<typeof DateInputBox> = props => {
+  const [date, setDate] = useState<Date | null>(null);
+
+  useEffect(() => {
+    if (props.value && isValid(new Date(props.value))) {
+      setDate(new Date(props.value));
+    }
+  }, [props.value]);
+
+  const updateDate = (date: Date | null) => {
+    setDate(date);
+  };
+
+  return (
+    <>
+      <DateInputBox {...props} value={date} setValue={updateDate} />
+    </>
+  );
+};
+
+export const Generated = () => {};
diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.styles.ts b/packages/date-picker/src/DateInputBox/DateInputBox.styles.ts
new file mode 100644
index 0000000000..c59a850ee9
--- /dev/null
+++ b/packages/date-picker/src/DateInputBox/DateInputBox.styles.ts
@@ -0,0 +1,11 @@
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseStyles = css``;
+
+export const segmentPartsWrapperStyles = css`
+  display: flex;
+  gap: 2px;
+  width: 100%;
+`;
+
+export const separatorLiteralStyles = css``;
diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInputBox/DateInputBox.tsx
new file mode 100644
index 0000000000..a4296c944d
--- /dev/null
+++ b/packages/date-picker/src/DateInputBox/DateInputBox.tsx
@@ -0,0 +1,109 @@
+import React, { useMemo, useRef } from 'react';
+import { isSameDay } from 'date-fns';
+
+import { useIdAllocator } from '@leafygreen-ui/hooks';
+
+import { DateInputSegment, DateSegment } from '../DateInputSegment';
+import { isDateSegment } from '../DateInputSegment';
+import { DateInputWrapper } from '../DateInputWrapper';
+import { useDatePickerContext } from '../DatePickerContext';
+import { isValidDate } from '../utils/isValidDate';
+
+import {
+  segmentPartsWrapperStyles,
+  separatorLiteralStyles,
+} from './DateInputBox.styles';
+import { DateInputBoxProps, DateSegmentsState } from './DateInputBox.types';
+import { useDateSegments } from './useDateSegments';
+import { constructDateString, toClientTimeZone, useFormatter } from './utils';
+
+const now = new Date();
+
+/**
+ * @internal
+ *
+ * Must be controlled
+ */
+export function DateInputBox({ value, setValue }: DateInputBoxProps) {
+  const { label, dateFormat, timeZone } = useDatePickerContext();
+  const inputId = useIdAllocator({ prefix: 'date-input' });
+  const inputWrapperRef = useRef(null);
+
+  const formatter = useFormatter(dateFormat, timeZone);
+
+  // Only used to track the _order_ of segments, not the value itself
+  const formatOrder = useMemo(() => formatter?.formatToParts(now), [formatter]);
+
+  /**
+   * When a segment is updated, check if we should set the external value
+   */
+  const onSegmentsUpdate = (newSegments: DateSegmentsState) => {
+    const { day, month, year } = newSegments;
+    const sourceDateStr = constructDateString({ day, month, year });
+
+    // Only update the value iff all parts are set, and create a valid date.
+    if (isValidDate(sourceDateStr)) {
+      /** New date relative to client time zone */
+      const clientDate = toClientTimeZone(sourceDateStr, timeZone);
+
+      /** Whether we need to update the external value */
+      const shouldUpdate = !value || !isSameDay(clientDate, value);
+
+      if (shouldUpdate) {
+        setValue?.(clientDate);
+      }
+    } else if (!(day || month || year)) {
+      // if no segment exists, set the external value to null
+      setValue?.(null);
+    }
+  };
+
+  // Keep track of each date segment
+  const { segments, setSegment } = useDateSegments(value, {
+    formatter,
+    onUpdate: onSegmentsUpdate,
+  });
+
+  /**
+   * Curried function that creates a callback function for each segment.
+   * Sets the segment value
+   */
+  const handleSegmentChange = (segment: DateSegment) => (newValue: string) => {
+    setSegment(segment, newValue);
+  };
+
+  return (
+    <DateInputWrapper
+      label={label}
+      description={dateFormat + ' ' + timeZone}
+      inputId={inputId}
+    >
+      <div
+        id={inputId}
+        className={segmentPartsWrapperStyles}
+        ref={inputWrapperRef}
+      >
+        {formatOrder?.map((part, i) => {
+          if (part.type === 'literal') {
+            return (
+              <span className={separatorLiteralStyles} key={'literal-' + i}>
+                {part.value}
+              </span>
+            );
+          } else if (isDateSegment(part.type)) {
+            return (
+              <DateInputSegment
+                key={part.type}
+                segment={part.type}
+                value={segments[part.type]}
+                onChange={handleSegmentChange(part.type)}
+              />
+            );
+          }
+        })}
+      </div>
+    </DateInputWrapper>
+  );
+}
+
+DateInputBox.displayName = 'DateInputBox';
diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInputBox/DateInputBox.types.ts
new file mode 100644
index 0000000000..30f522ac2a
--- /dev/null
+++ b/packages/date-picker/src/DateInputBox/DateInputBox.types.ts
@@ -0,0 +1,22 @@
+import { HTMLElementProps } from '@leafygreen-ui/lib';
+
+export interface DateInputBoxProps
+  extends Omit<HTMLElementProps<'div'>, 'onChange'> {
+  /**
+   * Date value passed into the component.
+   * Date object is relative to the client's time zone
+   */
+  value: Date | null;
+
+  /**
+   * Value setter callback.
+   * Date object is relative to the client's time zone
+   */
+  setValue?: (date: Date | null) => void;
+}
+
+export interface DateSegmentsState {
+  day?: number;
+  month?: number;
+  year?: number;
+}
diff --git a/packages/date-picker/src/DateInputBox/index.ts b/packages/date-picker/src/DateInputBox/index.ts
new file mode 100644
index 0000000000..14aa8f63b0
--- /dev/null
+++ b/packages/date-picker/src/DateInputBox/index.ts
@@ -0,0 +1,3 @@
+
+export  { DateInputBox } from './DateInputBox';
+export { DateInputBoxProps } from './DateInputBox.types';
diff --git a/packages/date-picker/src/DateInputBox/useDateSegments.ts b/packages/date-picker/src/DateInputBox/useDateSegments.ts
new file mode 100644
index 0000000000..7f8e159d33
--- /dev/null
+++ b/packages/date-picker/src/DateInputBox/useDateSegments.ts
@@ -0,0 +1,85 @@
+import { useEffect, useReducer } from 'react';
+import { getDate, getMonth, getYear, isSameDay } from 'date-fns';
+
+import { usePrevious } from '@leafygreen-ui/hooks';
+
+import { DateSegment } from '../DateInputSegment';
+
+import { DateSegmentsState } from './DateInputBox.types';
+import { toTimeZone } from './utils';
+
+type OnUpdateCallback = (value: DateSegmentsState) => void;
+
+interface UseDateSegmentsOptions {
+  /** A formatter used to separate the date value into segments */
+  formatter?: Intl.DateTimeFormat;
+
+  /** A callback fired when the segment values change */
+  onUpdate?: OnUpdateCallback;
+}
+
+/** Merges old state & new state */
+const dateSegmentsReducer = (
+  currentState: DateSegmentsState,
+  newState: DateSegmentsState,
+) => {
+  const state = {
+    ...currentState,
+    ...newState,
+  };
+  return state;
+};
+
+/**
+ * Returns an object with all 3 date segments, and a setter function
+ *
+ * Returned segments are relative to the formatter time zone
+ */
+export const useDateSegments = (
+  /** Provided date is relative to the client's time zone */
+  date: Date | null,
+  { formatter, onUpdate }: UseDateSegmentsOptions,
+) => {
+  const [segments, dispatch] = useReducer(
+    dateSegmentsReducer,
+    date,
+    getSegmentsFromDate,
+  );
+  const prevDate = usePrevious(date);
+
+  // If `date` prop changes, update the segments
+  useEffect(() => {
+    if (formatter && date && !(prevDate && isSameDay(date, prevDate))) {
+      const tzDate = toTimeZone(date, formatter.resolvedOptions().timeZone);
+      const newSegments = getSegmentsFromDate(tzDate);
+      onUpdate?.(newSegments);
+      dispatch(newSegments);
+    }
+  }, [date, formatter, onUpdate, prevDate]);
+
+  /**
+   * Custom dispatch that triggers the provided side effects, and updates state
+   */
+  const setSegment = (segment: DateSegment, value: string) => {
+    // Calculate next state
+    // then, execute any side effects based on the new state
+    // finally, commit the new state
+    const nextState = dateSegmentsReducer(segments, { [segment]: value });
+    onUpdate?.(nextState);
+    dispatch({ [segment]: value });
+  };
+
+  return {
+    segments,
+    setSegment,
+  };
+};
+
+/** Returns a single object with day, month & year segments */
+const getSegmentsFromDate = (date: Date | null): DateSegmentsState => {
+  return {
+    day: date ? getDate(date) : undefined,
+    month: date ? getMonth(date) + 1 : undefined,
+    year: date ? getYear(date) : undefined,
+  };
+};
diff --git a/packages/date-picker/src/DateInputBox/utils.ts b/packages/date-picker/src/DateInputBox/utils.ts
new file mode 100644
index 0000000000..e9998b08f0
--- /dev/null
+++ b/packages/date-picker/src/DateInputBox/utils.ts
@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
+
+import { consoleOnce } from '@leafygreen-ui/lib';
+
+import { isValidLocale } from '../utils/isValidLocale';
+
+import { DateSegmentsState } from './DateInputBox.types';
+
+/**
+ * Hook that returns an Intl.DateTimeFormat object for the provided format string
+ */
+export const useFormatter = (format: string, timeZone?: string) => {
+  const [formatter, setFormatter] = useState<Intl.DateTimeFormat | undefined>(
+    isValidLocale(format) ? Intl.DateTimeFormat(format) : undefined,
+  );
+
+  useEffect(() => {
+    if (isValidLocale(format)) {
+      setFormatter(Intl.DateTimeFormat(format, { timeZone }));
+    } else {
+      consoleOnce.error('Invalid dateFormat', format);
+    }
+  }, [format, timeZone]);
+
+  return formatter;
+};
+
+/**
+ * Converts a date in the client's time zone to
+ */
+export const toTimeZone = (clientDate: Date | string, timeZone: string) => {
+  const clientTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const utc = zonedTimeToUtc(clientDate, clientTz);
+  const tz = utcToZonedTime(utc, timeZone);
+  return tz;
+};
+
+/** Converts a date from a given time zone to the client's time zone */
+export const toClientTimeZone = (
+  sourceDate: Date | string,
+  sourceTimeZone: string,
+) => {
+  const clientTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const utc = zonedTimeToUtc(sourceDate, sourceTimeZone);
+  const client = utcToZonedTime(utc, clientTz);
+  return client;
+};
+
+/** Constructs a date string from day, month, year segments */
+export const constructDateString = ({ day, month, year }: DateSegmentsState) =>
+  `${Number(year)}-${Number(month)}-${Number(day)}` + 'T00:00:00';
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
index 20173fe90d..bb2394de5c 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
@@ -13,7 +13,7 @@ describe('packages/date-picker/date-input-segment', () => {
     handler.mockClear();
   });
 
-  describe('format value', () => {
+  describe('utils/valueFormatter', () => {
     describe.each(['day', 'month'] as Array<DateSegment>)('', segment => {
       const formatter = getValueFormatter(segment);
 
@@ -110,6 +110,19 @@ describe('packages/date-picker/date-input-segment', () => {
       userEvent.type(input, 'abc');
       expect(handler).not.toHaveBeenCalled();
     });
+
+    test('typing 3+ characters truncates', () => {
+      const result = render(
+        <DateInputSegment
+          segment="day"
+          data-testid="testid"
+          onChange={handler}
+        />,
+      );
+      const input = result.getByTestId('testid');
+      userEvent.type(input, '123');
+      expect(handler).toHaveBeenCalledWith('23');
+    });
   });
 
   // Skipping, since {arrowup}/{arrowdown} do not trigger
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
index 5dbe5f18e4..3f6342f87d 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
@@ -22,10 +22,10 @@ const meta: StoryMetaType<typeof DateInputSegment, DatePickerContextProps> = {
         darkMode: [false, true],
         value: [undefined, '6', '2023'],
         segment: ['day', 'month', 'year'],
-        // @ts-expect-error
         size: Object.values(Size),
       },
       decorator: (Instance, ctx) => (
+        // @ts-expect-error - incomplete context value
         <DatePickerProvider value={{ size: ctx?.args.size }}>
           <Instance />
         </DatePickerProvider>
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
index 64e41b494b..cb6a619808 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
@@ -9,7 +9,7 @@ export interface DateInputSegmentProps
   segment: DateSegment;
 
   /** The value of the date segment */
-  value?: string;
+  value?: string | number;
 
   /** Optional minimum value. Defaults to 0 for day/month segments, and 1970 for year segments */
   min?: number;
diff --git a/packages/date-picker/src/DateInputSegment/index.ts b/packages/date-picker/src/DateInputSegment/index.ts
index 49cefb3617..8a43e53e73 100644
--- a/packages/date-picker/src/DateInputSegment/index.ts
+++ b/packages/date-picker/src/DateInputSegment/index.ts
@@ -1,2 +1,5 @@
 export { DateInputSegment, isDateSegment } from './DateInputSegment';
-export { DateInputSegmentProps } from './DateInputSegment.types';
+export type {
+  DateInputSegmentProps,
+  DateSegment,
+} from './DateInputSegment.types';
diff --git a/packages/date-picker/src/DateInputSegment/utils.ts b/packages/date-picker/src/DateInputSegment/utils.ts
index afe7e5456e..ea1c7739fe 100644
--- a/packages/date-picker/src/DateInputSegment/utils.ts
+++ b/packages/date-picker/src/DateInputSegment/utils.ts
@@ -4,10 +4,10 @@ import { charsPerSegment } from './constants';
 import { DateSegment } from './DateInputSegment.types';
 
 const isZeroLike = (val: any) =>
-  !val || isNaN(val) || ['', '0', '00'].includes(val);
+  !val || isNaN(val) || ['', '0', '00', 0].includes(val);
 
 export const getValueFormatter =
-  (segment: DateSegment) => (val: string | undefined) => {
+  (segment: DateSegment) => (val: string | number | undefined) => {
     // If the value is any form of zero, we set it to an empty string
     if (isZeroLike(val)) return '';
 
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
index e122d4fe26..294f0faa42 100644
--- a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
+++ b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
@@ -13,7 +13,10 @@ import {
 
 import { DateInputWrapper } from './DateInputWrapper';
 
-const meta: StoryMetaType<typeof DateInputWrapper, DatePickerContextProps> = {
+const meta: StoryMetaType<
+  typeof DateInputWrapper,
+  Partial<DatePickerContextProps>
+> = {
   title: 'Components/DatePicker/DateInputWrapper',
   component: DateInputWrapper,
   parameters: {
@@ -39,6 +42,7 @@ const meta: StoryMetaType<typeof DateInputWrapper, DatePickerContextProps> = {
           darkMode={ctx?.args.darkMode}
           baseFontSize={ctx?.args.baseFontSize}
         >
+          {/* @ts-expect-error - incomplete context value */}
           <DatePickerProvider value={{ size: ctx?.args.size }}>
             <Instance />
           </DatePickerProvider>
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index 00fb321693..cae89494c2 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -1,7 +1,25 @@
 import { createContext, useContext } from 'react';
 
+import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
+
 import { DatePickerContextProps } from './DatePickerContext.types';
 
-export const DatePickerContext = createContext<DatePickerContextProps>({});
+export const defaultDatePickerContext: DatePickerContextProps = {
+  label: '',
+  dateFormat: 'en-US',
+  timeZone: 'America/New_York',
+  min: new Date('12-31-1969'),
+  max: new Date('01-19-2038'),
+  disabled: false,
+  size: Size.Default,
+  state: 'unset',
+  errorMessage: '',
+  baseFontSize: BaseFontSize.Body1,
+  darkMode: false,
+};
+
+export const DatePickerContext = createContext<DatePickerContextProps>(
+  defaultDatePickerContext,
+);
 export const DatePickerProvider = DatePickerContext.Provider;
 export const useDatePickerContext = () => useContext(DatePickerContext);
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
index 80b3d33629..76f03eefb5 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
@@ -1,3 +1,3 @@
 import { BaseDatePickerProps } from 'src/types';
 
-export interface DatePickerContextProps extends Partial<BaseDatePickerProps> {}
+export interface DatePickerContextProps extends Required<BaseDatePickerProps> {}
diff --git a/packages/date-picker/src/utils/isValidDate.ts b/packages/date-picker/src/utils/isValidDate.ts
new file mode 100644
index 0000000000..bcb1003840
--- /dev/null
+++ b/packages/date-picker/src/utils/isValidDate.ts
@@ -0,0 +1,4 @@
+/** Returns whether the provided string is a valid date */
+export const isValidDate = (str: string) => {
+  return !isNaN(Date.parse(str));
+};
diff --git a/packages/date-picker/src/utils/isValidLocale.ts b/packages/date-picker/src/utils/isValidLocale.ts
new file mode 100644
index 0000000000..987e2a9294
--- /dev/null
+++ b/packages/date-picker/src/utils/isValidLocale.ts
@@ -0,0 +1,14 @@
+/**
+ * Returns whether the provided string is a valid Intl.Locale string
+ */
+export function isValidLocale(str?: string): boolean {
+  if (!str) return false;
+
+  try {
+    new Intl.Locale(str);
+  } catch (error) {
+    return false;
+  }
+
+  return true;
+}
diff --git a/yarn.lock b/yarn.lock
index 6e39cd5533..1675959d9c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1413,6 +1413,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.21.0":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4"
+  integrity sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.20.7", "@babel/template@^7.22.5", "@babel/template@^7.3.3":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -2258,15 +2265,6 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
-"@leafygreen-ui/lib@^10.4.3":
-  version "10.4.3"
-  resolved "https://registry.yarnpkg.com/@leafygreen-ui/lib/-/lib-10.4.3.tgz#f5ebdabc82922067adee8f37833237685bb1b1a8"
-  integrity sha512-p5BtXHeQsvLnnrN0eunPFZeaMtW9z7Mbvm2WOS9lvnAySj8xZp5Vn9Y3XjyYLbPhpGVBhhOAJFP3YMxbP9DKgg==
-  dependencies:
-    "@storybook/csf" "^0.1.0"
-    lodash "^4.17.21"
-    prop-types "^15.7.2"
-
 "@manypkg/find-root@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@manypkg/find-root/-/find-root-1.1.0.tgz#a62d8ed1cd7e7d4c11d9d52a8397460b5d4ad29f"
@@ -5523,9 +5521,9 @@ camelcase@^7.0.0:
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
 caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517:
-  version "1.0.30001522"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz#44b87a406c901269adcdb834713e23582dd71856"
-  integrity sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg==
+  version "1.0.30001524"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001524.tgz#1e14bce4f43c41a7deaeb5ebfe86664fe8dadb80"
+  integrity sha512-Jj917pJtYg9HSJBF95HVX3Cdr89JUyLT4IZ8SvM5aDRni95swKgYi3TgYLH5hnGfPE/U1dg6IfZ50UsIlLkwSA==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
@@ -6085,6 +6083,18 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
+date-fns-tz@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-2.0.0.tgz#1b14c386cb8bc16fc56fe333d4fc34ae1d1099d5"
+  integrity sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==
+
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 debug@2.6.9, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"

From 97f0a14b2ba57f64e80f5b45bf5edfa160d1ea6d Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 29 Aug 2023 16:42:37 -0400
Subject: [PATCH 030/351] Update yarn.lock

---
 yarn.lock | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 1675959d9c..3d984e7fde 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2265,6 +2265,18 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
+"@leafygreen-ui/typography@^16.5.5":
+  version "16.5.5"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/typography/-/typography-16.5.5.tgz#65cc0ce7e39f5b8f72f9b9a4dbea80868ac09694"
+  integrity sha512-mErhTYM0C1PZaeADTkp5v/MAS6aEhavWHZ3otHthBSo/zwI5uAYnkreheiYElc66B/0bcOxCikLVkP3zaFnX2A==
+  dependencies:
+    "@leafygreen-ui/emotion" "^4.0.7"
+    "@leafygreen-ui/icon" "^11.22.2"
+    "@leafygreen-ui/lib" "^11.0.0"
+    "@leafygreen-ui/palette" "^4.0.7"
+    "@leafygreen-ui/polymorphic" "^1.3.6"
+    "@leafygreen-ui/tokens" "^2.1.4"
+
 "@manypkg/find-root@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@manypkg/find-root/-/find-root-1.1.0.tgz#a62d8ed1cd7e7d4c11d9d52a8397460b5d4ad29f"
@@ -4249,9 +4261,9 @@
     csstype "^3.0.2"
 
 "@types/react@^17.0.2":
-  version "17.0.65"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.65.tgz#95f6a2ab61145ffb69129d07982d047f9e0870cd"
-  integrity sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==
+  version "17.0.62"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.62.tgz#2efe8ddf8533500ec44b1334dd1a97caa2f860e3"
+  integrity sha512-eANCyz9DG8p/Vdhr0ZKST8JV12PhH2ACCDYlFw6DIO+D+ca+uP4jtEDEpVqXZrh/uZdXQGwk7whJa3ah5DtyLw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -5521,9 +5533,9 @@ camelcase@^7.0.0:
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
 caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517:
-  version "1.0.30001524"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001524.tgz#1e14bce4f43c41a7deaeb5ebfe86664fe8dadb80"
-  integrity sha512-Jj917pJtYg9HSJBF95HVX3Cdr89JUyLT4IZ8SvM5aDRni95swKgYi3TgYLH5hnGfPE/U1dg6IfZ50UsIlLkwSA==
+  version "1.0.30001519"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601"
+  integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
@@ -13242,7 +13254,6 @@ wordwrap@^1.0.0:
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From 779d63a6959d5a872997852ef9f2156d24ba0503 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 29 Aug 2023 16:46:15 -0400
Subject: [PATCH 031/351] update sb decorator

---
 .changeset/old-numbers-serve.md                              | 5 +++++
 .../src/decorators/PropCombinations/utils/valStr.ts          | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/old-numbers-serve.md

diff --git a/.changeset/old-numbers-serve.md b/.changeset/old-numbers-serve.md
new file mode 100644
index 0000000000..c120c794a1
--- /dev/null
+++ b/.changeset/old-numbers-serve.md
@@ -0,0 +1,5 @@
+---
+'@lg-tools/storybook-decorators': patch
+---
+
+Adds Null check for args
diff --git a/tools/storybook-decorators/src/decorators/PropCombinations/utils/valStr.ts b/tools/storybook-decorators/src/decorators/PropCombinations/utils/valStr.ts
index e7a96f9c19..112cfd1d06 100644
--- a/tools/storybook-decorators/src/decorators/PropCombinations/utils/valStr.ts
+++ b/tools/storybook-decorators/src/decorators/PropCombinations/utils/valStr.ts
@@ -1,9 +1,14 @@
+import { isNull, isUndefined } from 'lodash';
+
 /**
  * @returns the provided value as a string
  */
 export function valStr(val: any): string {
   const MAX_STR_LEN = 24;
 
+  if (isNull(val)) return 'null';
+  if (isUndefined(val)) return 'undefined';
+
   if (typeof val === 'object') {
     if (val.type) {
       if (typeof val.type === 'string') return `<${val.type} />`;

From 03469d326127f3eba9c284aac6ff9025aef16255 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 29 Aug 2023 17:01:22 -0400
Subject: [PATCH 032/351] fixes callback argument in input segment component

---
 .../DateInputSegment.spec.tsx                 | 118 +++++++++++++++---
 .../src/DateInputSegment/DateInputSegment.tsx |   2 +-
 .../DateInputSegment.types.ts                 |   3 +-
 .../date-picker/src/DateInputSegment/index.ts |   1 +
 packages/date-picker/src/utils/isValidDate.ts |   6 +-
 5 files changed, 107 insertions(+), 23 deletions(-)

diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
index bb2394de5c..61b034091e 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
@@ -29,6 +29,10 @@ describe('packages/date-picker/date-input-segment', () => {
         expect(formatter('123')).toEqual('23');
       });
 
+      test('truncates 3+ digit padded values', () => {
+        expect(formatter('012')).toEqual('12');
+      });
+
       test('sets 0 to empty string', () => {
         expect(formatter('0')).toEqual('');
       });
@@ -53,6 +57,10 @@ describe('packages/date-picker/date-input-segment', () => {
         expect(formatter('12345')).toEqual('2345');
       });
 
+      test('truncates 5+ digit padded values', () => {
+        expect(formatter('02345')).toEqual('2345');
+      });
+
       test('sets 0 to empty string', () => {
         expect(formatter('0')).toEqual('');
       });
@@ -64,23 +72,82 @@ describe('packages/date-picker/date-input-segment', () => {
   });
 
   describe('rendering', () => {
-    test('Rendering with a value sets the input value', () => {
-      const result = render(
-        <DateInputSegment segment="day" data-testid="testid" value="12" />,
-      );
-      const input = result.getByTestId('testid');
-      expect((input as HTMLInputElement).value).toBe('12');
+    describe('day segment', () => {
+      test('Rendering with a value sets the input value', () => {
+        const result = render(
+          <DateInputSegment segment="day" data-testid="testid" value={12} />,
+        );
+        const input = result.getByTestId('testid');
+        expect((input as HTMLInputElement).value).toBe('12');
+      });
+
+      test('values get appropriately padded', () => {
+        const result = render(
+          <DateInputSegment segment="day" data-testid="testid" value={8} />,
+        );
+        const input = result.getByTestId('testid');
+        expect((input as HTMLInputElement).value).toBe('08');
+      });
+
+      test('values get appropriately truncated', () => {
+        const result = render(
+          <DateInputSegment segment="day" data-testid="testid" value={123} />,
+        );
+        const input = result.getByTestId('testid');
+        expect((input as HTMLInputElement).value).toBe('23');
+      });
+
+      test('rerendering updates the value', () => {
+        const result = render(
+          <DateInputSegment segment="day" data-testid="testid" value={12} />,
+        );
+        const input = result.getByTestId('testid');
+        result.rerender(
+          <DateInputSegment segment="day" data-testid="testid" value={8} />,
+        );
+        expect((input as HTMLInputElement).value).toBe('08');
+      });
     });
 
-    test('rerendering updates the value', () => {
-      const result = render(
-        <DateInputSegment segment="day" data-testid="testid" value="12" />,
-      );
-      const input = result.getByTestId('testid');
-      result.rerender(
-        <DateInputSegment segment="day" data-testid="testid" value="8" />,
-      );
-      expect((input as HTMLInputElement).value).toBe('08');
+    describe('year segment', () => {
+      test('Rendering with a value sets the input value', () => {
+        const result = render(
+          <DateInputSegment segment="year" data-testid="testid" value={2023} />,
+        );
+        const input = result.getByTestId('testid');
+        expect((input as HTMLInputElement).value).toBe('2023');
+      });
+
+      test('values get appropriately padded', () => {
+        const result = render(
+          <DateInputSegment segment="year" data-testid="testid" value={123} />,
+        );
+        const input = result.getByTestId('testid');
+        expect((input as HTMLInputElement).value).toBe('0123');
+      });
+
+      test('values get appropriately truncated', () => {
+        const result = render(
+          <DateInputSegment
+            segment="year"
+            data-testid="testid"
+            value={12031}
+          />,
+        );
+        const input = result.getByTestId('testid');
+        expect((input as HTMLInputElement).value).toBe('2031');
+      });
+
+      test('rerendering updates the value', () => {
+        const result = render(
+          <DateInputSegment segment="year" data-testid="testid" value={2023} />,
+        );
+        const input = result.getByTestId('testid');
+        result.rerender(
+          <DateInputSegment segment="year" data-testid="testid" value={1993} />,
+        );
+        expect((input as HTMLInputElement).value).toBe('1993');
+      });
     });
   });
 
@@ -111,7 +178,20 @@ describe('packages/date-picker/date-input-segment', () => {
       expect(handler).not.toHaveBeenCalled();
     });
 
-    test('typing 3+ characters truncates', () => {
+    test('Typing 1 digit pads value', () => {
+      const result = render(
+        <DateInputSegment
+          segment="day"
+          data-testid="testid"
+          onChange={handler}
+        />,
+      );
+      const input = result.getByTestId('testid');
+      userEvent.type(input, '1');
+      expect(handler).toHaveBeenCalledWith('01');
+    });
+
+    test('typing 3+ digits truncates value', () => {
       const result = render(
         <DateInputSegment
           segment="day"
@@ -126,7 +206,7 @@ describe('packages/date-picker/date-input-segment', () => {
   });
 
   // Skipping, since {arrowup}/{arrowdown} do not trigger
-  // a trigger event in userEvent
+  // a change event in userEvent
   // https://github.com/testing-library/user-event/issues/1066
   // eslint-disable-next-line jest/no-disabled-tests
   describe.skip('Arrow Keys', () => {
@@ -136,7 +216,7 @@ describe('packages/date-picker/date-input-segment', () => {
           segment="day"
           data-testid="testid"
           onChange={handler}
-          value="8"
+          value={8}
         />,
       );
       const input = result.getByTestId('testid');
@@ -150,7 +230,7 @@ describe('packages/date-picker/date-input-segment', () => {
           segment="day"
           data-testid="testid"
           onChange={handler}
-          value="8"
+          value={8}
         />,
       );
       const input = result.getByTestId('testid');
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
index 87bb04c6bf..4f774ddd61 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
@@ -51,7 +51,7 @@ export const DateInputSegment = React.forwardRef<
     const formatValue = getValueFormatter(segment);
 
     const changeHandler: ChangeEventHandler<HTMLInputElement> = e => {
-      onChange?.(e.target.value);
+      onChange?.(formatValue(e.target.value));
     };
 
     return (
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
index cb6a619808..191cf4e7bf 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
@@ -1,6 +1,7 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
 export type DateSegment = 'day' | 'month' | 'year';
+export type DateSegmentValue = number;
 
 export interface DateInputSegmentProps
   extends DarkModeProps,
@@ -9,7 +10,7 @@ export interface DateInputSegmentProps
   segment: DateSegment;
 
   /** The value of the date segment */
-  value?: string | number;
+  value?: DateSegmentValue;
 
   /** Optional minimum value. Defaults to 0 for day/month segments, and 1970 for year segments */
   min?: number;
diff --git a/packages/date-picker/src/DateInputSegment/index.ts b/packages/date-picker/src/DateInputSegment/index.ts
index 8a43e53e73..c47590075b 100644
--- a/packages/date-picker/src/DateInputSegment/index.ts
+++ b/packages/date-picker/src/DateInputSegment/index.ts
@@ -2,4 +2,5 @@ export { DateInputSegment, isDateSegment } from './DateInputSegment';
 export type {
   DateInputSegmentProps,
   DateSegment,
+  DateSegmentValue,
 } from './DateInputSegment.types';
diff --git a/packages/date-picker/src/utils/isValidDate.ts b/packages/date-picker/src/utils/isValidDate.ts
index bcb1003840..86ba31cea7 100644
--- a/packages/date-picker/src/utils/isValidDate.ts
+++ b/packages/date-picker/src/utils/isValidDate.ts
@@ -1,4 +1,6 @@
+import { isUndefined } from 'lodash';
+
 /** Returns whether the provided string is a valid date */
-export const isValidDate = (str: string) => {
-  return !isNaN(Date.parse(str));
+export const isValidDate = (str?: string): str is string => {
+  return !isUndefined(str) && !isNaN(Date.parse(str));
 };

From ca64c7cafc1d1102f6c869a5924b5e32737363e9 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 29 Aug 2023 17:42:29 -0400
Subject: [PATCH 033/351] add util tests

---
 .../date-picker/src/utils/isValidDate.spec.ts | 15 ++++++++++++
 .../src/utils/isValidLocale.spec.ts           | 23 +++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 packages/date-picker/src/utils/isValidDate.spec.ts
 create mode 100644 packages/date-picker/src/utils/isValidLocale.spec.ts

diff --git a/packages/date-picker/src/utils/isValidDate.spec.ts b/packages/date-picker/src/utils/isValidDate.spec.ts
new file mode 100644
index 0000000000..2d1595eec1
--- /dev/null
+++ b/packages/date-picker/src/utils/isValidDate.spec.ts
@@ -0,0 +1,15 @@
+import { isValidDate } from './isValidDate';
+
+describe('packages/date-picker/utils/isValidDate', () => {
+  test('us format is valid', () => {
+    expect(isValidDate('12/26/1993')).toBeTruthy();
+  });
+
+  test('iso format is valid', () => {
+    expect(isValidDate('1993-12-26')).toBeTruthy();
+  });
+
+  test('undefined format is not valid', () => {
+    expect(isValidDate(undefined)).toBeFalsy();
+  });
+});
diff --git a/packages/date-picker/src/utils/isValidLocale.spec.ts b/packages/date-picker/src/utils/isValidLocale.spec.ts
new file mode 100644
index 0000000000..303b789019
--- /dev/null
+++ b/packages/date-picker/src/utils/isValidLocale.spec.ts
@@ -0,0 +1,23 @@
+import { isValidLocale } from './isValidLocale';
+
+describe('packages/date-picker/utils/isValidLocale', () => {
+  test('en-US is valid', () => {
+    expect(isValidLocale('en-US')).toBeTruthy();
+  });
+
+  test('en-UK is valid', () => {
+    expect(isValidLocale('en-UK')).toBeTruthy();
+  });
+
+  test('de is valid', () => {
+    expect(isValidLocale('de')).toBeTruthy();
+  });
+
+  test('asdf is not valid', () => {
+    expect(isValidLocale('asdf')).toBeFalsy();
+  });
+
+  test('undefined is not valid', () => {
+    expect(isValidLocale(undefined)).toBeFalsy();
+  });
+});

From 833823a323b705e2bf423cf9e93a39340955ac4e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 29 Aug 2023 18:07:10 -0400
Subject: [PATCH 034/351] updates input box

---
 .../src/DateInputBox/DateInputBox.stories.tsx | 40 ++++++++++----
 .../src/DateInputBox/DateInputBox.tsx         | 28 +++++-----
 .../src/DateInputBox/DateInputBox.types.ts    | 14 +++--
 .../src/DateInputBox/useDateSegments.ts       | 18 +++----
 .../date-picker/src/DateInputBox/useFormat.ts | 50 +++++++++++++++++
 .../date-picker/src/DateInputBox/utils.ts     | 54 ++++++++++---------
 packages/date-picker/src/types.ts             |  2 +-
 7 files changed, 140 insertions(+), 66 deletions(-)
 create mode 100644 packages/date-picker/src/DateInputBox/useFormat.ts

diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx
index 09cc1abed5..6af66f024e 100644
--- a/packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { StoryFn } from '@storybook/react';
 import { isValid } from 'date-fns';
 
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
 import {
@@ -12,20 +13,39 @@ import {
 
 import { DateInputBox } from './DateInputBox';
 
+const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
+  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
+    <DatePickerProvider
+      value={{
+        ...ctx?.args,
+      }}
+    >
+      <Story />
+    </DatePickerProvider>
+  </LeafyGreenProvider>
+);
+
 const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
   title: 'Components/DatePicker/DateInputBox',
   component: DateInputBox,
-  decorators: [
-    (Story, ctx) => (
-      // @ts-expect-error - decoratorFn context only has access to component props
-      <DatePickerProvider value={{ ...ctx.args }}>
-        <Story />
-      </DatePickerProvider>
-    ),
-  ],
+  decorators: [ProviderWrapper],
   parameters: {
     default: null,
-    generate: {},
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
+        timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
+        value: [null, new Date('1993-12-26')],
+      },
+      excludeCombinations: [
+        {
+          timeZone: ['Europe/London', 'America/New_York', 'Asia/Seoul'],
+          value: null,
+        },
+      ],
+      decorator: ProviderWrapper,
+    },
   },
   args: {
     label: 'Label',
@@ -55,6 +75,8 @@ export const Basic: StoryFn<typeof DateInputBox> = props => {
   return (
     <>
       <DateInputBox {...props} value={date} setValue={updateDate} />
+      <b>Current date</b>
+      <span>{date?.toISOString()}</span>
     </>
   );
 };
diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInputBox/DateInputBox.tsx
index a4296c944d..4ff1d0d027 100644
--- a/packages/date-picker/src/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInputBox/DateInputBox.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useRef } from 'react';
 import { isSameDay } from 'date-fns';
 
 import { useIdAllocator } from '@leafygreen-ui/hooks';
@@ -7,7 +7,6 @@ import { DateInputSegment, DateSegment } from '../DateInputSegment';
 import { isDateSegment } from '../DateInputSegment';
 import { DateInputWrapper } from '../DateInputWrapper';
 import { useDatePickerContext } from '../DatePickerContext';
-import { isValidDate } from '../utils/isValidDate';
 
 import {
   segmentPartsWrapperStyles,
@@ -15,9 +14,8 @@ import {
 } from './DateInputBox.styles';
 import { DateInputBoxProps, DateSegmentsState } from './DateInputBox.types';
 import { useDateSegments } from './useDateSegments';
-import { constructDateString, toClientTimeZone, useFormatter } from './utils';
-
-const now = new Date();
+import { useFormatParts } from './useFormat';
+import { newDateFromSegments, toClientTimeZone } from './utils';
 
 /**
  * @internal
@@ -29,22 +27,20 @@ export function DateInputBox({ value, setValue }: DateInputBoxProps) {
   const inputId = useIdAllocator({ prefix: 'date-input' });
   const inputWrapperRef = useRef(null);
 
-  const formatter = useFormatter(dateFormat, timeZone);
-
-  // Only used to track the _order_ of segments, not the value itself
-  const formatOrder = useMemo(() => formatter?.formatToParts(now), [formatter]);
+  // // Only used to track the _order_ of segments, not the value itself
+  const formatParts = useFormatParts(dateFormat);
 
   /**
-   * When a segment is updated, check if we should set the external value
+   * When a segment is updated, update the external value
    */
   const onSegmentsUpdate = (newSegments: DateSegmentsState) => {
     const { day, month, year } = newSegments;
-    const sourceDateStr = constructDateString({ day, month, year });
+    const sourceDate = newDateFromSegments({ day, month, year });
 
     // Only update the value iff all parts are set, and create a valid date.
-    if (isValidDate(sourceDateStr)) {
+    if (sourceDate) {
       /** New date relative to client time zone */
-      const clientDate = toClientTimeZone(sourceDateStr, timeZone);
+      const clientDate = toClientTimeZone(sourceDate, timeZone);
 
       /** Whether we need to update the external value */
       const shouldUpdate = !value || !isSameDay(clientDate, value);
@@ -60,7 +56,7 @@ export function DateInputBox({ value, setValue }: DateInputBoxProps) {
 
   // Keep track of each date segment
   const { segments, setSegment } = useDateSegments(value, {
-    formatter,
+    timeZone,
     onUpdate: onSegmentsUpdate,
   });
 
@@ -69,7 +65,7 @@ export function DateInputBox({ value, setValue }: DateInputBoxProps) {
    * Sets the segment value
    */
   const handleSegmentChange = (segment: DateSegment) => (newValue: string) => {
-    setSegment(segment, newValue);
+    setSegment(segment, Number(newValue));
   };
 
   return (
@@ -83,7 +79,7 @@ export function DateInputBox({ value, setValue }: DateInputBoxProps) {
         className={segmentPartsWrapperStyles}
         ref={inputWrapperRef}
       >
-        {formatOrder?.map((part, i) => {
+        {formatParts?.map((part, i) => {
           if (part.type === 'literal') {
             return (
               <span className={separatorLiteralStyles} key={'literal-' + i}>
diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInputBox/DateInputBox.types.ts
index 30f522ac2a..c1d0025b5a 100644
--- a/packages/date-picker/src/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/DateInputBox/DateInputBox.types.ts
@@ -1,5 +1,7 @@
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
+import { DateSegment, DateSegmentValue } from '../DateInputSegment';
+
 export interface DateInputBoxProps
   extends Omit<HTMLElementProps<'div'>, 'onChange'> {
   /**
@@ -15,8 +17,10 @@ export interface DateInputBoxProps
   setValue?: (date: Date | null) => void;
 }
 
-export interface DateSegmentsState {
-  day?: number;
-  month?: number;
-  year?: number;
-}
+// export interface DateSegmentsState {
+//   day?: number;
+//   month?: number;
+//   year?: number;
+// }
+
+export type DateSegmentsState = Record<DateSegment, DateSegmentValue>;
diff --git a/packages/date-picker/src/DateInputBox/useDateSegments.ts b/packages/date-picker/src/DateInputBox/useDateSegments.ts
index 7f8e159d33..b13895bd3a 100644
--- a/packages/date-picker/src/DateInputBox/useDateSegments.ts
+++ b/packages/date-picker/src/DateInputBox/useDateSegments.ts
@@ -3,7 +3,7 @@ import { getDate, getMonth, getYear, isSameDay } from 'date-fns';
 
 import { usePrevious } from '@leafygreen-ui/hooks';
 
-import { DateSegment } from '../DateInputSegment';
+import type { DateSegment, DateSegmentValue } from '../DateInputSegment';
 
 import { DateSegmentsState } from './DateInputBox.types';
 import { toTimeZone } from './utils';
@@ -12,7 +12,7 @@ type OnUpdateCallback = (value: DateSegmentsState) => void;
 
 interface UseDateSegmentsOptions {
   /** A formatter used to separate the date value into segments */
-  formatter?: Intl.DateTimeFormat;
+  timeZone: string;
 
   /** A callback fired when the segment values change */
   onUpdate?: OnUpdateCallback;
@@ -21,7 +21,7 @@ interface UseDateSegmentsOptions {
 /** Merges old state & new state */
 const dateSegmentsReducer = (
   currentState: DateSegmentsState,
-  newState: DateSegmentsState,
+  newState: Partial<DateSegmentsState>,
 ) => {
   const state = {
     ...currentState,
@@ -38,7 +38,7 @@ const dateSegmentsReducer = (
 export const useDateSegments = (
   /** Provided date is relative to the client's time zone */
   date: Date | null,
-  { formatter, onUpdate }: UseDateSegmentsOptions,
+  { timeZone, onUpdate }: UseDateSegmentsOptions,
 ) => {
   const [segments, dispatch] = useReducer(
     dateSegmentsReducer,
@@ -49,18 +49,18 @@ export const useDateSegments = (
 
   // If `date` prop changes, update the segments
   useEffect(() => {
-    if (formatter && date && !(prevDate && isSameDay(date, prevDate))) {
-      const tzDate = toTimeZone(date, formatter.resolvedOptions().timeZone);
+    if (date && !(prevDate && isSameDay(date, prevDate))) {
+      const tzDate = toTimeZone(date, timeZone);
       const newSegments = getSegmentsFromDate(tzDate);
       onUpdate?.(newSegments);
       dispatch(newSegments);
     }
-  }, [date, formatter, onUpdate, prevDate]);
+  }, [date, onUpdate, prevDate, timeZone]);
 
   /**
    * Custom dispatch that triggers the provided side effects, and updates state
    */
-  const setSegment = (segment: DateSegment, value: string) => {
+  const setSegment = (segment: DateSegment, value: DateSegmentValue) => {
     // Calculate next state
     // then, execute any side effects based on the new state
     // finally, commit the new state
@@ -81,5 +81,5 @@ const getSegmentsFromDate = (date: Date | null): DateSegmentsState => {
     day: date ? getDate(date) : undefined,
     month: date ? getMonth(date) + 1 : undefined,
     year: date ? getYear(date) : undefined,
-  };
+  } as DateSegmentsState;
 };
diff --git a/packages/date-picker/src/DateInputBox/useFormat.ts b/packages/date-picker/src/DateInputBox/useFormat.ts
new file mode 100644
index 0000000000..2069a48d24
--- /dev/null
+++ b/packages/date-picker/src/DateInputBox/useFormat.ts
@@ -0,0 +1,50 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { consoleOnce } from '@leafygreen-ui/lib';
+
+import { isValidLocale } from '../utils/isValidLocale';
+
+const now = new Date();
+const ISO = 'iso8601';
+const IsoFormatParts: Array<Intl.DateTimeFormatPart> = [
+  { type: 'year', value: '' },
+  { type: 'literal', value: '-' },
+  { type: 'month', value: '' },
+  { type: 'literal', value: '-' },
+  { type: 'day', value: '' },
+];
+
+/**
+ * Hook that returns an Intl.DateTimeFormat object for the provided format string
+ */
+export const useFormatter = (format: string) => {
+  const [formatter, setFormatter] = useState<Intl.DateTimeFormat | undefined>(
+    isValidLocale(format) ? Intl.DateTimeFormat(format) : undefined,
+  );
+
+  useEffect(() => {
+    if (isValidLocale(format)) {
+      setFormatter(Intl.DateTimeFormat(format));
+    } else {
+      if (format !== ISO) {
+        consoleOnce.error('Invalid dateFormat', format);
+      }
+    }
+  }, [format]);
+
+  return formatter;
+};
+
+export const useFormatParts = (
+  format: string,
+): Array<Intl.DateTimeFormatPart> | undefined => {
+  const formatter = useFormatter(format);
+
+  const formatParts = useMemo(() => formatter?.formatToParts(now), [formatter]);
+
+  if (format === ISO) {
+    return IsoFormatParts;
+  }
+
+  return formatParts;
+};
diff --git a/packages/date-picker/src/DateInputBox/utils.ts b/packages/date-picker/src/DateInputBox/utils.ts
index e9998b08f0..275819bdbe 100644
--- a/packages/date-picker/src/DateInputBox/utils.ts
+++ b/packages/date-picker/src/DateInputBox/utils.ts
@@ -1,31 +1,10 @@
-import { useEffect, useState } from 'react';
 import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
+import { isUndefined } from 'lodash';
 
-import { consoleOnce } from '@leafygreen-ui/lib';
-
-import { isValidLocale } from '../utils/isValidLocale';
+import { DateSegmentValue } from '../DateInputSegment';
 
 import { DateSegmentsState } from './DateInputBox.types';
 
-/**
- * Hook that returns an Intl.DateTimeFormat object for the provided format string
- */
-export const useFormatter = (format: string, timeZone?: string) => {
-  const [formatter, setFormatter] = useState<Intl.DateTimeFormat | undefined>(
-    isValidLocale(format) ? Intl.DateTimeFormat(format) : undefined,
-  );
-
-  useEffect(() => {
-    if (isValidLocale(format)) {
-      setFormatter(Intl.DateTimeFormat(format, { timeZone }));
-    } else {
-      consoleOnce.error('Invalid dateFormat', format);
-    }
-  }, [format, timeZone]);
-
-  return formatter;
-};
-
 /**
  * Converts a date in the client's time zone to
  */
@@ -47,6 +26,29 @@ export const toClientTimeZone = (
   return client;
 };
 
-/** Constructs a date string from day, month, year segments */
-export const constructDateString = ({ day, month, year }: DateSegmentsState) =>
-  `${Number(year)}-${Number(month)}-${Number(day)}` + 'T00:00:00';
+/** Constructs a date object from day, month, year segments */
+export const newDateFromSegments = (
+  segments: DateSegmentsState,
+): Date | undefined => {
+  if (segments && Object.values(segments).every(isValidSegment)) {
+    const { day, month, year } = segments;
+    return new Date(year, month - 1, day, 0, 0, 0);
+  }
+};
+
+/**
+ * Constructs a date string from day, month, year segments
+ * @deprecated
+ * */
+export const constructDateString = (
+  segments: DateSegmentsState,
+): string | undefined => {
+  if (segments && Object.values(segments).every(isValidSegment)) {
+    const { day, month, year } = segments;
+
+    return `${year}-${month}-${day}` + 'T00:00:00';
+  }
+};
+
+export const isValidSegment = (segment?: DateSegmentValue) =>
+  !isUndefined(segment) && !isNaN(Number(segment));
diff --git a/packages/date-picker/src/types.ts b/packages/date-picker/src/types.ts
index 73da0efe3c..8ec42d8ef1 100644
--- a/packages/date-picker/src/types.ts
+++ b/packages/date-picker/src/types.ts
@@ -19,7 +19,7 @@ export interface BaseDatePickerProps extends DarkModeProps {
    *
    * @default 'iso8601'
    */
-  dateFormat?: string;
+  dateFormat?: 'en-US' | 'en-UK' | 'iso8601' | string;
 
   /**
    * A valid IANA timezone string, or UTC offset.

From c4094c169d73de6b562de6362f126758a715bb5d Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 30 Aug 2023 09:50:42 -0400
Subject: [PATCH 035/351] centered + tabular-nums in segment input

---
 .../src/DateInputSegment/DateInputSegment.styles.ts       | 8 ++++++++
 .../date-picker/src/DateInputSegment/DateInputSegment.tsx | 2 +-
 packages/date-picker/src/DateInputSegment/constants.ts    | 4 ++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts b/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
index f3f5b5c46f..a0958d7677 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
@@ -14,6 +14,8 @@ import { DateSegment } from './DateInputSegment.types';
 export const baseStyles = css`
   font-family: ${fontFamilies.default};
   font-size: ${BaseFontSize.Body1}px;
+  font-variant: tabular-nums;
+  text-align: center;
   border: none;
   border-radius: 0;
   padding: 0;
@@ -28,6 +30,12 @@ export const baseStyles = css`
   &:focus {
     outline: none;
   }
+
+  // TODO: Remove if not using small caps
+  /* &::placeholder {
+    font-variant: all-small-caps;
+    font-size: 1.25em;
+  } */
 `;
 
 export const segmentThemeStyles: Record<Theme, string> = {
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
index 4f774ddd61..02d11e86bc 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
@@ -37,7 +37,7 @@ export const DateInputSegment = React.forwardRef<
       darkMode,
       ...rest
     }: DateInputSegmentProps,
-    fwdRef, //: ForwardedRef<HTMLInputElement>,
+    fwdRef,
   ) => {
     const min = minProp ?? defaultMin[segment];
     const max = maxProp ?? defaultMax[segment];
diff --git a/packages/date-picker/src/DateInputSegment/constants.ts b/packages/date-picker/src/DateInputSegment/constants.ts
index c4f6e2af98..4a82a19372 100644
--- a/packages/date-picker/src/DateInputSegment/constants.ts
+++ b/packages/date-picker/src/DateInputSegment/constants.ts
@@ -39,4 +39,8 @@ export const characterWidth = {
   D: 1.1875,
   M: 1.375,
   Y: 1.125,
+  // TODO: Remove if not using small-caps placeholders
+  // D: 1.05,
+  // M: 1.25,
+  // Y: 0.975,
 } as const;

From acc807ce4c997f35a2ac151274f691f2c445ec29 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 30 Aug 2023 10:00:41 -0400
Subject: [PATCH 036/351] wip for monospace segments

---
 .../date-picker/src/DateInputBox/DateInputBox.stories.tsx  | 2 +-
 .../src/DateInputSegment/DateInputSegment.styles.ts        | 1 +
 packages/date-picker/src/DateInputSegment/constants.ts     | 7 ++++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx
index 6af66f024e..1f8fac8c8d 100644
--- a/packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx
@@ -34,9 +34,9 @@ const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
     generate: {
       combineArgs: {
         darkMode: [false, true],
+        value: [null, new Date('1993-12-26')],
         dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
         timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
-        value: [null, new Date('1993-12-26')],
       },
       excludeCombinations: [
         {
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts b/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
index a0958d7677..b3ebc0a13a 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
@@ -13,6 +13,7 @@ import { DateSegment } from './DateInputSegment.types';
 
 export const baseStyles = css`
   font-family: ${fontFamilies.default};
+  /* font-family: ${fontFamilies.code}; */
   font-size: ${BaseFontSize.Body1}px;
   font-variant: tabular-nums;
   text-align: center;
diff --git a/packages/date-picker/src/DateInputSegment/constants.ts b/packages/date-picker/src/DateInputSegment/constants.ts
index 4a82a19372..f83b99d1e9 100644
--- a/packages/date-picker/src/DateInputSegment/constants.ts
+++ b/packages/date-picker/src/DateInputSegment/constants.ts
@@ -36,11 +36,16 @@ export const defaultPlaceholder = {
 
 /** The percentage of 1ch these specific characters take up */
 export const characterWidth = {
+  // Standard font
   D: 1.1875,
   M: 1.375,
   Y: 1.125,
-  // TODO: Remove if not using small-caps placeholders
+  // TODO: for small-caps placeholders
   // D: 1.05,
   // M: 1.25,
   // Y: 0.975,
+  // TODO: for monospace
+  // D: 1.05,
+  // M: 1.05,
+  // Y: 1.05,
 } as const;

From 7efa01b1a91014ecd61ba92c7f9714fe40c3dc35 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 30 Aug 2023 12:08:25 -0400
Subject: [PATCH 037/351] adds aria-labels

---
 .../date-picker/src/DateInputBox/DateInputBox.tsx |  8 ++++++++
 .../src/DateInputBox/DateInputBox.types.ts        |  5 ++++-
 .../src/DateInputSegment/DateInputSegment.tsx     |  1 +
 .../src/DateInputWrapper/DateInputWrapper.tsx     |  7 ++++++-
 .../DateInputWrapper/DateInputWrapper.types.ts    |  1 +
 .../src/DatePickerContext/DatePickerContext.tsx   | 15 +++++++++++++--
 6 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInputBox/DateInputBox.tsx
index 4ff1d0d027..4e377d62a6 100644
--- a/packages/date-picker/src/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInputBox/DateInputBox.tsx
@@ -24,6 +24,9 @@ import { newDateFromSegments, toClientTimeZone } from './utils';
  */
 export function DateInputBox({ value, setValue }: DateInputBoxProps) {
   const { label, dateFormat, timeZone } = useDatePickerContext();
+  const labelId = useIdAllocator({ prefix: 'date-label' });
+  const descriptionId = useIdAllocator({ prefix: 'date-description' });
+  const errorId = useIdAllocator({ prefix: 'date-description' });
   const inputId = useIdAllocator({ prefix: 'date-input' });
   const inputWrapperRef = useRef(null);
 
@@ -73,6 +76,9 @@ export function DateInputBox({ value, setValue }: DateInputBoxProps) {
       label={label}
       description={dateFormat + ' ' + timeZone}
       inputId={inputId}
+      labelId={labelId}
+      descriptionId={descriptionId}
+      errorId={errorId}
     >
       <div
         id={inputId}
@@ -93,6 +99,8 @@ export function DateInputBox({ value, setValue }: DateInputBoxProps) {
                 segment={part.type}
                 value={segments[part.type]}
                 onChange={handleSegmentChange(part.type)}
+                aria-labelledby={labelId}
+                aria-describedby={descriptionId}
               />
             );
           }
diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInputBox/DateInputBox.types.ts
index c1d0025b5a..e5c4359ccf 100644
--- a/packages/date-picker/src/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/DateInputBox/DateInputBox.types.ts
@@ -23,4 +23,7 @@ export interface DateInputBoxProps
 //   year?: number;
 // }
 
-export type DateSegmentsState = Record<DateSegment, DateSegmentValue>;
+export type DateSegmentsState = Record<
+  DateSegment,
+  DateSegmentValue | undefined
+>;
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
index 02d11e86bc..4cfaaf907f 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
@@ -57,6 +57,7 @@ export const DateInputSegment = React.forwardRef<
     return (
       <input
         {...rest}
+        aria-label={segment}
         ref={inputRef}
         type="number"
         value={formatValue(value)}
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx
index d76beefd9d..6a31254ed1 100644
--- a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx
+++ b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx
@@ -40,6 +40,7 @@ export const DateInputWrapper = React.forwardRef<
       errorMessage,
       children,
       inputId,
+      labelId,
       descriptionId,
       errorId,
       ...rest
@@ -57,7 +58,11 @@ export const DateInputWrapper = React.forwardRef<
         {...rest}
       >
         <div className={textContainerStyle}>
-          {label && <Label htmlFor={inputId}>{label}</Label>}
+          {label && (
+            <Label htmlFor={inputId} id={labelId}>
+              {label}
+            </Label>
+          )}
           {description && (
             <Description id={descriptionId}>{description}</Description>
           )}
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts
index fa9e50ae10..615d72675e 100644
--- a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts
+++ b/packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts
@@ -13,6 +13,7 @@ export interface DateInputWrapperProps extends HTMLElementProps<'div'> {
   state?: InputState;
   errorMessage?: string;
   inputId: string;
+  labelId?: string;
   descriptionId?: string;
   errorId?: string;
 }
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index cae89494c2..53f7ecd80e 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -1,4 +1,5 @@
-import { createContext, useContext } from 'react';
+import React from 'react';
+import { createContext, PropsWithChildren, useContext } from 'react';
 
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
@@ -21,5 +22,15 @@ export const defaultDatePickerContext: DatePickerContextProps = {
 export const DatePickerContext = createContext<DatePickerContextProps>(
   defaultDatePickerContext,
 );
-export const DatePickerProvider = DatePickerContext.Provider;
+export const DatePickerProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{ value: DatePickerContextProps }>) => {
+  const providerValue = { ...defaultDatePickerContext, ...value };
+  return (
+    <DatePickerContext.Provider value={providerValue}>
+      {children}
+    </DatePickerContext.Provider>
+  );
+};
 export const useDatePickerContext = () => useContext(DatePickerContext);

From 6a87cb396500dc6ec06d455e7bab297b813aeaee Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 30 Aug 2023 12:08:32 -0400
Subject: [PATCH 038/351] adds tests

---
 .../src/DateInputBox/DateInputBox.spec.tsx    | 98 ++++++++++++++++++-
 .../DateInputSegment.spec.tsx                 | 24 +++++
 2 files changed, 117 insertions(+), 5 deletions(-)

diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInputBox/DateInputBox.spec.tsx
index d08fbce4e0..5372ae26ea 100644
--- a/packages/date-picker/src/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInputBox/DateInputBox.spec.tsx
@@ -1,11 +1,99 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { DateInputBox } from '.';
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../DatePickerContext';
+
+import { DateInputBox, type DateInputBoxProps } from '.';
+
+const renderDateInputBox = (
+  props?: DateInputBoxProps,
+  context?: DatePickerContextProps,
+) => {
+  const result = render(
+    <DatePickerProvider value={{ label: 'Label', ...context }}>
+      <DateInputBox {...props} value={props?.value ?? null} />
+    </DatePickerProvider>,
+  );
+
+  const dayInput = result.container.querySelector('input[aria-label="day"]');
+  const monthInput = result.container.querySelector(
+    'input[aria-label="month"]',
+  );
+  const yearInput = result.container.querySelector('input[aria-label="year"]');
+
+  return { ...result, dayInput, monthInput, yearInput };
+};
 
 describe('packages/date-input-box', () => {
-  test('condition', () => {
+  describe('rendering', () => {
+    describe.each(['day', 'month', 'year'])('%i', segment => {
+      test('renders the correct aria attributes', () => {
+        const result = renderDateInputBox();
+        const label = result.getByText('Label');
+        const input = result.getByLabelText(segment);
+
+        // each segment has appropriate aria label
+        expect(input).toHaveAttribute('aria-label', segment);
+
+        // each segment is labelled by the wrapper label
+        expect(input).toHaveAttribute('aria-labelledby', label.id);
+      });
+    });
+
+    describe('renders segments in the correct order', () => {
+      test('iso8601', () => {
+        const result = renderDateInputBox(undefined, { dateFormat: 'iso8601' });
+        const segments = result.getAllByRole('spinbutton');
+        expect(segments[0]).toHaveAttribute('aria-label', 'year');
+        expect(segments[1]).toHaveAttribute('aria-label', 'month');
+        expect(segments[2]).toHaveAttribute('aria-label', 'day');
+      });
+
+      test('en-US', () => {
+        const result = renderDateInputBox(undefined, { dateFormat: 'en-US' });
+        const segments = result.getAllByRole('spinbutton');
+        expect(segments[0]).toHaveAttribute('aria-label', 'month');
+        expect(segments[1]).toHaveAttribute('aria-label', 'day');
+        expect(segments[2]).toHaveAttribute('aria-label', 'year');
+      });
+
+      test('en-UK', () => {
+        const result = renderDateInputBox(undefined, { dateFormat: 'en-UK' });
+        const segments = result.getAllByRole('spinbutton');
+        expect(segments[0]).toHaveAttribute('aria-label', 'day');
+        expect(segments[1]).toHaveAttribute('aria-label', 'month');
+        expect(segments[2]).toHaveAttribute('aria-label', 'year');
+      });
+    });
+
+    test('renders an empty text box', () => {
+      const { dayInput, monthInput, yearInput } = renderDateInputBox(
+        undefined,
+        { dateFormat: 'iso8601' },
+      );
+      expect(dayInput).toHaveValue('');
+      expect(monthInput).toHaveValue('');
+      expect(yearInput).toHaveValue('');
+    });
+
+    test('renders a filled text box', () => {
+      const { dayInput, monthInput, yearInput } = renderDateInputBox(
+        { value: new Date('1993-12-26') },
+        { dateFormat: 'iso8601', timeZone: 'UTC' },
+      );
+
+      expect(dayInput).toHaveValue(26);
+      expect(monthInput).toHaveValue(12);
+      expect(yearInput).toHaveValue(1993);
+    });
+  });
+
+  describe('typing', () => {});
+
+  describe('mouse interaction', () => {});
 
-  })
-})
+  describe('keyboard interaction', () => {});
+});
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
index 61b034091e..fd4de01d87 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
+++ b/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
@@ -73,6 +73,18 @@ describe('packages/date-picker/date-input-segment', () => {
 
   describe('rendering', () => {
     describe('day segment', () => {
+      test('Rendering with undefined sets the value to empty string', () => {
+        const result = render(
+          <DateInputSegment
+            segment="day"
+            data-testid="testid"
+            value={undefined}
+          />,
+        );
+        const input = result.getByTestId('testid');
+        expect((input as HTMLInputElement).value).toBe('');
+      });
+
       test('Rendering with a value sets the input value', () => {
         const result = render(
           <DateInputSegment segment="day" data-testid="testid" value={12} />,
@@ -110,6 +122,18 @@ describe('packages/date-picker/date-input-segment', () => {
     });
 
     describe('year segment', () => {
+      test('Rendering with undefined sets the value to empty string', () => {
+        const result = render(
+          <DateInputSegment
+            segment="year"
+            data-testid="testid"
+            value={undefined}
+          />,
+        );
+        const input = result.getByTestId('testid');
+        expect((input as HTMLInputElement).value).toBe('');
+      });
+
       test('Rendering with a value sets the input value', () => {
         const result = render(
           <DateInputSegment segment="year" data-testid="testid" value={2023} />,

From 7048dcc4348ba73bc53c753aba5fd2f27442c0ef Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 30 Aug 2023 13:36:37 -0400
Subject: [PATCH 039/351] moves utils

---
 .../src/DateInputBox/DateInputBox.tsx         |  3 +-
 .../date-picker/src/DateInputBox/index.ts     |  8 +-
 .../src/DateInputBox/useDateSegments.ts       |  2 +-
 .../date-picker/src/DateInputBox/utils.ts     | 54 ------------
 .../DatePickerInput/DatePickerInput.spec.tsx  | 11 +++
 .../DatePickerInput.stories.tsx               | 84 +++++++++++++++++++
 .../DatePickerInput/DatePickerInput.styles.ts |  4 +
 .../DatePickerInput/DatePickerInput.tsx       |  9 ++
 .../DatePickerInput/DatePickerInput.types.ts  |  1 +
 .../src/DatePicker/DatePickerInput/index.ts   |  3 +
 .../{isValidDate.ts => isValidDate/index.ts}  |  0
 .../{ => isValidDate}/isValidDate.spec.ts     |  2 +-
 .../index.ts}                                 |  0
 .../{ => isValidLocale}/isValidLocale.spec.ts |  2 +-
 .../src/utils/isValidSegment/index.ts         |  9 ++
 .../date-picker/src/utils/isZeroLike/index.ts |  3 +
 .../src/utils/newDateFromSegments/index.ts    | 19 +++++
 .../date-picker/src/utils/toTimeZone/index.ts | 22 +++++
 18 files changed, 175 insertions(+), 61 deletions(-)
 delete mode 100644 packages/date-picker/src/DateInputBox/utils.ts
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.styles.ts
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerInput/index.ts
 rename packages/date-picker/src/utils/{isValidDate.ts => isValidDate/index.ts} (100%)
 rename packages/date-picker/src/utils/{ => isValidDate}/isValidDate.spec.ts (88%)
 rename packages/date-picker/src/utils/{isValidLocale.ts => isValidLocale/index.ts} (100%)
 rename packages/date-picker/src/utils/{ => isValidLocale}/isValidLocale.spec.ts (91%)
 create mode 100644 packages/date-picker/src/utils/isValidSegment/index.ts
 create mode 100644 packages/date-picker/src/utils/isZeroLike/index.ts
 create mode 100644 packages/date-picker/src/utils/newDateFromSegments/index.ts
 create mode 100644 packages/date-picker/src/utils/toTimeZone/index.ts

diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInputBox/DateInputBox.tsx
index 4e377d62a6..b5e4588098 100644
--- a/packages/date-picker/src/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInputBox/DateInputBox.tsx
@@ -7,6 +7,8 @@ import { DateInputSegment, DateSegment } from '../DateInputSegment';
 import { isDateSegment } from '../DateInputSegment';
 import { DateInputWrapper } from '../DateInputWrapper';
 import { useDatePickerContext } from '../DatePickerContext';
+import { newDateFromSegments } from '../utils/newDateFromSegments';
+import { toClientTimeZone } from '../utils/toTimeZone';
 
 import {
   segmentPartsWrapperStyles,
@@ -15,7 +17,6 @@ import {
 import { DateInputBoxProps, DateSegmentsState } from './DateInputBox.types';
 import { useDateSegments } from './useDateSegments';
 import { useFormatParts } from './useFormat';
-import { newDateFromSegments, toClientTimeZone } from './utils';
 
 /**
  * @internal
diff --git a/packages/date-picker/src/DateInputBox/index.ts b/packages/date-picker/src/DateInputBox/index.ts
index 14aa8f63b0..4fe01f82e3 100644
--- a/packages/date-picker/src/DateInputBox/index.ts
+++ b/packages/date-picker/src/DateInputBox/index.ts
@@ -1,3 +1,5 @@
-
-export  { DateInputBox } from './DateInputBox';
-export { DateInputBoxProps } from './DateInputBox.types';
+export { DateInputBox } from './DateInputBox';
+export type {
+  DateInputBoxProps,
+  DateSegmentsState,
+} from './DateInputBox.types';
diff --git a/packages/date-picker/src/DateInputBox/useDateSegments.ts b/packages/date-picker/src/DateInputBox/useDateSegments.ts
index b13895bd3a..31a5267cd1 100644
--- a/packages/date-picker/src/DateInputBox/useDateSegments.ts
+++ b/packages/date-picker/src/DateInputBox/useDateSegments.ts
@@ -4,9 +4,9 @@ import { getDate, getMonth, getYear, isSameDay } from 'date-fns';
 import { usePrevious } from '@leafygreen-ui/hooks';
 
 import type { DateSegment, DateSegmentValue } from '../DateInputSegment';
+import { toTimeZone } from '../utils/toTimeZone';
 
 import { DateSegmentsState } from './DateInputBox.types';
-import { toTimeZone } from './utils';
 
 type OnUpdateCallback = (value: DateSegmentsState) => void;
 
diff --git a/packages/date-picker/src/DateInputBox/utils.ts b/packages/date-picker/src/DateInputBox/utils.ts
deleted file mode 100644
index 275819bdbe..0000000000
--- a/packages/date-picker/src/DateInputBox/utils.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
-import { isUndefined } from 'lodash';
-
-import { DateSegmentValue } from '../DateInputSegment';
-
-import { DateSegmentsState } from './DateInputBox.types';
-
-/**
- * Converts a date in the client's time zone to
- */
-export const toTimeZone = (clientDate: Date | string, timeZone: string) => {
-  const clientTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const utc = zonedTimeToUtc(clientDate, clientTz);
-  const tz = utcToZonedTime(utc, timeZone);
-  return tz;
-};
-
-/** Converts a date from a given time zone to the client's time zone */
-export const toClientTimeZone = (
-  sourceDate: Date | string,
-  sourceTimeZone: string,
-) => {
-  const clientTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const utc = zonedTimeToUtc(sourceDate, sourceTimeZone);
-  const client = utcToZonedTime(utc, clientTz);
-  return client;
-};
-
-/** Constructs a date object from day, month, year segments */
-export const newDateFromSegments = (
-  segments: DateSegmentsState,
-): Date | undefined => {
-  if (segments && Object.values(segments).every(isValidSegment)) {
-    const { day, month, year } = segments;
-    return new Date(year, month - 1, day, 0, 0, 0);
-  }
-};
-
-/**
- * Constructs a date string from day, month, year segments
- * @deprecated
- * */
-export const constructDateString = (
-  segments: DateSegmentsState,
-): string | undefined => {
-  if (segments && Object.values(segments).every(isValidSegment)) {
-    const { day, month, year } = segments;
-
-    return `${year}-${month}-${day}` + 'T00:00:00';
-  }
-};
-
-export const isValidSegment = (segment?: DateSegmentValue) =>
-  !isUndefined(segment) && !isNaN(Number(segment));
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
new file mode 100644
index 0000000000..f7370a1a12
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { DatePickerInput } from '.';
+
+describe('packages/date-picker-input', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
new file mode 100644
index 0000000000..b375f3e330
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -0,0 +1,84 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect, useState } from 'react';
+import { StoryFn } from '@storybook/react';
+import { isValid } from 'date-fns';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../../DatePickerContext';
+
+import { DatePickerInput } from './DatePickerInput';
+
+const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
+  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
+    <DatePickerProvider
+      value={{
+        ...ctx?.args,
+      }}
+    >
+      <Story />
+    </DatePickerProvider>
+  </LeafyGreenProvider>
+);
+
+const meta: StoryMetaType<typeof DatePickerInput, DatePickerContextProps> = {
+  title: 'Components/DatePicker/DatePickerInput',
+  component: DatePickerInput,
+  decorators: [ProviderWrapper],
+  parameters: {
+    default: null,
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        value: [null, new Date('1993-12-26')],
+        dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
+        timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
+      },
+      excludeCombinations: [
+        {
+          timeZone: ['Europe/London', 'America/New_York', 'Asia/Seoul'],
+          value: null,
+        },
+      ],
+      decorator: ProviderWrapper,
+    },
+  },
+  args: {
+    label: 'Label',
+    dateFormat: 'en-UK',
+    timeZone: 'Europe/London',
+  },
+  argTypes: {
+    value: { control: 'date' },
+  },
+};
+
+export default meta;
+
+export const Basic: StoryFn<typeof DatePickerInput> = props => {
+  const [date, setDate] = useState<Date | null>(null);
+
+  useEffect(() => {
+    if (props.value && isValid(new Date(props.value))) {
+      setDate(new Date(props.value));
+    }
+  }, [props.value]);
+
+  const updateDate = (date: Date | null) => {
+    setDate(date);
+  };
+
+  return (
+    <>
+      <DatePickerInput {...props} value={date} setValue={updateDate} />
+      <b>Current date</b>
+      <span>{date?.toISOString()}</span>
+    </>
+  );
+};
+
+export const Generated = () => {};
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.styles.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.styles.ts
new file mode 100644
index 0000000000..928608f58d
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.styles.ts
@@ -0,0 +1,4 @@
+
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseStyles = css``;
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
new file mode 100644
index 0000000000..28ee3adbd8
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { DatePickerInputProps } from './DatePickerInput.types';
+
+// TODO: forwardRef
+export function DatePickerInput({}: DatePickerInputProps) {
+  return <div>your content here</div>;
+}
+
+DatePickerInput.displayName = 'DatePickerInput';
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
new file mode 100644
index 0000000000..ad4837ab51
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -0,0 +1 @@
+export interface DatePickerInputProps {}
\ No newline at end of file
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/index.ts b/packages/date-picker/src/DatePicker/DatePickerInput/index.ts
new file mode 100644
index 0000000000..c2f9bd7cc4
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/index.ts
@@ -0,0 +1,3 @@
+
+export  { DatePickerInput } from './DatePickerInput';
+export { DatePickerInputProps } from './DatePickerInput.types';
diff --git a/packages/date-picker/src/utils/isValidDate.ts b/packages/date-picker/src/utils/isValidDate/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isValidDate.ts
rename to packages/date-picker/src/utils/isValidDate/index.ts
diff --git a/packages/date-picker/src/utils/isValidDate.spec.ts b/packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts
similarity index 88%
rename from packages/date-picker/src/utils/isValidDate.spec.ts
rename to packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts
index 2d1595eec1..0c2d1687d2 100644
--- a/packages/date-picker/src/utils/isValidDate.spec.ts
+++ b/packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts
@@ -1,4 +1,4 @@
-import { isValidDate } from './isValidDate';
+import { isValidDate } from '.';
 
 describe('packages/date-picker/utils/isValidDate', () => {
   test('us format is valid', () => {
diff --git a/packages/date-picker/src/utils/isValidLocale.ts b/packages/date-picker/src/utils/isValidLocale/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isValidLocale.ts
rename to packages/date-picker/src/utils/isValidLocale/index.ts
diff --git a/packages/date-picker/src/utils/isValidLocale.spec.ts b/packages/date-picker/src/utils/isValidLocale/isValidLocale.spec.ts
similarity index 91%
rename from packages/date-picker/src/utils/isValidLocale.spec.ts
rename to packages/date-picker/src/utils/isValidLocale/isValidLocale.spec.ts
index 303b789019..785281f658 100644
--- a/packages/date-picker/src/utils/isValidLocale.spec.ts
+++ b/packages/date-picker/src/utils/isValidLocale/isValidLocale.spec.ts
@@ -1,4 +1,4 @@
-import { isValidLocale } from './isValidLocale';
+import { isValidLocale } from '.';
 
 describe('packages/date-picker/utils/isValidLocale', () => {
   test('en-US is valid', () => {
diff --git a/packages/date-picker/src/utils/isValidSegment/index.ts b/packages/date-picker/src/utils/isValidSegment/index.ts
new file mode 100644
index 0000000000..d696d7387d
--- /dev/null
+++ b/packages/date-picker/src/utils/isValidSegment/index.ts
@@ -0,0 +1,9 @@
+import { isUndefined } from 'lodash';
+
+import { DateSegmentValue } from '../../DateInputSegment';
+
+/**
+ * Returns whether a given value is a valid segment value
+ */
+export const isValidSegment = (segment?: DateSegmentValue): segment is number =>
+  !isUndefined(segment) && !isNaN(Number(segment));
diff --git a/packages/date-picker/src/utils/isZeroLike/index.ts b/packages/date-picker/src/utils/isZeroLike/index.ts
new file mode 100644
index 0000000000..18afdb61dd
--- /dev/null
+++ b/packages/date-picker/src/utils/isZeroLike/index.ts
@@ -0,0 +1,3 @@
+/** Returns whether the provided value is some form of zero value */
+export const isZeroLike = (val: any) =>
+  !val || isNaN(val) || ['', '0', '00', 0].includes(val);
diff --git a/packages/date-picker/src/utils/newDateFromSegments/index.ts b/packages/date-picker/src/utils/newDateFromSegments/index.ts
new file mode 100644
index 0000000000..1ace3b9ab1
--- /dev/null
+++ b/packages/date-picker/src/utils/newDateFromSegments/index.ts
@@ -0,0 +1,19 @@
+import { DateSegmentsState } from '../../DateInputBox';
+import { isValidSegment } from '../isValidSegment';
+
+/** Constructs a date object from day, month, year segments */
+export const newDateFromSegments = (
+  segments: DateSegmentsState,
+): Date | undefined => {
+  if (segments && Object.values(segments).every(isValidSegment)) {
+    const { day, month, year } = segments;
+    return new Date(
+      year as number,
+      (month as number) - 1,
+      day as number,
+      0,
+      0,
+      0,
+    );
+  }
+};
diff --git a/packages/date-picker/src/utils/toTimeZone/index.ts b/packages/date-picker/src/utils/toTimeZone/index.ts
new file mode 100644
index 0000000000..27bd9ff12e
--- /dev/null
+++ b/packages/date-picker/src/utils/toTimeZone/index.ts
@@ -0,0 +1,22 @@
+import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
+
+/**
+ * Converts a date in the client's time zone to
+ */
+export const toTimeZone = (clientDate: Date | string, timeZone: string) => {
+  const clientTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const utc = zonedTimeToUtc(clientDate, clientTz);
+  const tz = utcToZonedTime(utc, timeZone);
+  return tz;
+};
+
+/** Converts a date from a given time zone to the client's time zone */
+export const toClientTimeZone = (
+  sourceDate: Date | string,
+  sourceTimeZone: string,
+) => {
+  const clientTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const utc = zonedTimeToUtc(sourceDate, sourceTimeZone);
+  const client = utcToZonedTime(utc, clientTz);
+  return client;
+};

From b49a929635685097893b0893a38cd24a7f9512b2 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 30 Aug 2023 13:41:13 -0400
Subject: [PATCH 040/351] mv sub-components

---
 .../DateInputBox/DateInputBox.spec.tsx              |  2 +-
 .../DateInputBox/DateInputBox.stories.tsx           |  2 +-
 .../DateInputBox/DateInputBox.styles.ts             |  0
 .../{ => DateInput}/DateInputBox/DateInputBox.tsx   | 13 ++++++++-----
 .../DateInputBox/DateInputBox.types.ts              |  0
 .../src/{ => DateInput}/DateInputBox/index.ts       |  0
 .../{ => DateInput}/DateInputBox/useDateSegments.ts |  2 +-
 .../src/{ => DateInput}/DateInputBox/useFormat.ts   |  2 +-
 .../DateInputSegment/DateInputSegment.spec.tsx      |  0
 .../DateInputSegment/DateInputSegment.stories.tsx   |  2 +-
 .../DateInputSegment/DateInputSegment.styles.ts     |  0
 .../DateInputSegment/DateInputSegment.tsx           |  2 +-
 .../DateInputSegment/DateInputSegment.types.ts      |  0
 .../{ => DateInput}/DateInputSegment/constants.ts   |  0
 .../src/{ => DateInput}/DateInputSegment/index.ts   |  0
 .../src/{ => DateInput}/DateInputSegment/utils.ts   |  5 ++---
 .../DateInputWrapper/DateInputWrapper.spec.tsx      |  0
 .../DateInputWrapper/DateInputWrapper.stories.tsx   |  2 +-
 .../DateInputWrapper/DateInputWrapper.styles.ts     |  0
 .../DateInputWrapper/DateInputWrapper.tsx           |  2 +-
 .../DateInputWrapper/DateInputWrapper.types.ts      |  0
 .../src/{ => DateInput}/DateInputWrapper/index.ts   |  0
 22 files changed, 18 insertions(+), 16 deletions(-)
 rename packages/date-picker/src/{ => DateInput}/DateInputBox/DateInputBox.spec.tsx (99%)
 rename packages/date-picker/src/{ => DateInput}/DateInputBox/DateInputBox.stories.tsx (98%)
 rename packages/date-picker/src/{ => DateInput}/DateInputBox/DateInputBox.styles.ts (100%)
 rename packages/date-picker/src/{ => DateInput}/DateInputBox/DateInputBox.tsx (91%)
 rename packages/date-picker/src/{ => DateInput}/DateInputBox/DateInputBox.types.ts (100%)
 rename packages/date-picker/src/{ => DateInput}/DateInputBox/index.ts (100%)
 rename packages/date-picker/src/{ => DateInput}/DateInputBox/useDateSegments.ts (97%)
 rename packages/date-picker/src/{ => DateInput}/DateInputBox/useFormat.ts (95%)
 rename packages/date-picker/src/{ => DateInput}/DateInputSegment/DateInputSegment.spec.tsx (100%)
 rename packages/date-picker/src/{ => DateInput}/DateInputSegment/DateInputSegment.stories.tsx (97%)
 rename packages/date-picker/src/{ => DateInput}/DateInputSegment/DateInputSegment.styles.ts (100%)
 rename packages/date-picker/src/{ => DateInput}/DateInputSegment/DateInputSegment.tsx (96%)
 rename packages/date-picker/src/{ => DateInput}/DateInputSegment/DateInputSegment.types.ts (100%)
 rename packages/date-picker/src/{ => DateInput}/DateInputSegment/constants.ts (100%)
 rename packages/date-picker/src/{ => DateInput}/DateInputSegment/index.ts (100%)
 rename packages/date-picker/src/{ => DateInput}/DateInputSegment/utils.ts (87%)
 rename packages/date-picker/src/{ => DateInput}/DateInputWrapper/DateInputWrapper.spec.tsx (100%)
 rename packages/date-picker/src/{ => DateInput}/DateInputWrapper/DateInputWrapper.stories.tsx (98%)
 rename packages/date-picker/src/{ => DateInput}/DateInputWrapper/DateInputWrapper.styles.ts (100%)
 rename packages/date-picker/src/{ => DateInput}/DateInputWrapper/DateInputWrapper.tsx (97%)
 rename packages/date-picker/src/{ => DateInput}/DateInputWrapper/DateInputWrapper.types.ts (100%)
 rename packages/date-picker/src/{ => DateInput}/DateInputWrapper/index.ts (100%)

diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
similarity index 99%
rename from packages/date-picker/src/DateInputBox/DateInputBox.spec.tsx
rename to packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
index 5372ae26ea..6ad0e397c2 100644
--- a/packages/date-picker/src/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -4,7 +4,7 @@ import { render } from '@testing-library/react';
 import {
   DatePickerContextProps,
   DatePickerProvider,
-} from '../DatePickerContext';
+} from '../../DatePickerContext';
 
 import { DateInputBox, type DateInputBoxProps } from '.';
 
diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
similarity index 98%
rename from packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx
rename to packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
index 1f8fac8c8d..3bec4d7bf0 100644
--- a/packages/date-picker/src/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -9,7 +9,7 @@ import { StoryMetaType } from '@leafygreen-ui/lib';
 import {
   DatePickerContextProps,
   DatePickerProvider,
-} from '../DatePickerContext';
+} from '../../DatePickerContext';
 
 import { DateInputBox } from './DateInputBox';
 
diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.styles.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
similarity index 100%
rename from packages/date-picker/src/DateInputBox/DateInputBox.styles.ts
rename to packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
similarity index 91%
rename from packages/date-picker/src/DateInputBox/DateInputBox.tsx
rename to packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index b5e4588098..49fe835e29 100644
--- a/packages/date-picker/src/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -3,12 +3,15 @@ import { isSameDay } from 'date-fns';
 
 import { useIdAllocator } from '@leafygreen-ui/hooks';
 
-import { DateInputSegment, DateSegment } from '../DateInputSegment';
-import { isDateSegment } from '../DateInputSegment';
+import { useDatePickerContext } from '../../DatePickerContext';
+import { newDateFromSegments } from '../../utils/newDateFromSegments';
+import { toClientTimeZone } from '../../utils/toTimeZone';
+import {
+  DateInputSegment,
+  DateSegment,
+  isDateSegment,
+} from '../DateInputSegment';
 import { DateInputWrapper } from '../DateInputWrapper';
-import { useDatePickerContext } from '../DatePickerContext';
-import { newDateFromSegments } from '../utils/newDateFromSegments';
-import { toClientTimeZone } from '../utils/toTimeZone';
 
 import {
   segmentPartsWrapperStyles,
diff --git a/packages/date-picker/src/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
similarity index 100%
rename from packages/date-picker/src/DateInputBox/DateInputBox.types.ts
rename to packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
diff --git a/packages/date-picker/src/DateInputBox/index.ts b/packages/date-picker/src/DateInput/DateInputBox/index.ts
similarity index 100%
rename from packages/date-picker/src/DateInputBox/index.ts
rename to packages/date-picker/src/DateInput/DateInputBox/index.ts
diff --git a/packages/date-picker/src/DateInputBox/useDateSegments.ts b/packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts
similarity index 97%
rename from packages/date-picker/src/DateInputBox/useDateSegments.ts
rename to packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts
index 31a5267cd1..343e453ab1 100644
--- a/packages/date-picker/src/DateInputBox/useDateSegments.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts
@@ -3,8 +3,8 @@ import { getDate, getMonth, getYear, isSameDay } from 'date-fns';
 
 import { usePrevious } from '@leafygreen-ui/hooks';
 
+import { toTimeZone } from '../../utils/toTimeZone';
 import type { DateSegment, DateSegmentValue } from '../DateInputSegment';
-import { toTimeZone } from '../utils/toTimeZone';
 
 import { DateSegmentsState } from './DateInputBox.types';
 
diff --git a/packages/date-picker/src/DateInputBox/useFormat.ts b/packages/date-picker/src/DateInput/DateInputBox/useFormat.ts
similarity index 95%
rename from packages/date-picker/src/DateInputBox/useFormat.ts
rename to packages/date-picker/src/DateInput/DateInputBox/useFormat.ts
index 2069a48d24..42c08fdf7d 100644
--- a/packages/date-picker/src/DateInputBox/useFormat.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/useFormat.ts
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 
 import { consoleOnce } from '@leafygreen-ui/lib';
 
-import { isValidLocale } from '../utils/isValidLocale';
+import { isValidLocale } from '../../utils/isValidLocale';
 
 const now = new Date();
 const ISO = 'iso8601';
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
similarity index 100%
rename from packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx
rename to packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.stories.tsx
similarity index 97%
rename from packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
rename to packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.stories.tsx
index 3f6342f87d..871d685f2d 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.stories.tsx
@@ -8,7 +8,7 @@ import { Size } from '@leafygreen-ui/tokens';
 import {
   DatePickerContextProps,
   DatePickerProvider,
-} from '../DatePickerContext';
+} from '../../DatePickerContext';
 
 import { DateInputSegment } from './DateInputSegment';
 
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts
similarity index 100%
rename from packages/date-picker/src/DateInputSegment/DateInputSegment.styles.ts
rename to packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
similarity index 96%
rename from packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
rename to packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index 4cfaaf907f..533ee7fe42 100644
--- a/packages/date-picker/src/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -6,7 +6,7 @@ import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
-import { useDatePickerContext } from '../DatePickerContext/DatePickerContext';
+import { useDatePickerContext } from '../../DatePickerContext';
 
 import { defaultMax, defaultMin, defaultPlaceholder } from './constants';
 import {
diff --git a/packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
similarity index 100%
rename from packages/date-picker/src/DateInputSegment/DateInputSegment.types.ts
rename to packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
diff --git a/packages/date-picker/src/DateInputSegment/constants.ts b/packages/date-picker/src/DateInput/DateInputSegment/constants.ts
similarity index 100%
rename from packages/date-picker/src/DateInputSegment/constants.ts
rename to packages/date-picker/src/DateInput/DateInputSegment/constants.ts
diff --git a/packages/date-picker/src/DateInputSegment/index.ts b/packages/date-picker/src/DateInput/DateInputSegment/index.ts
similarity index 100%
rename from packages/date-picker/src/DateInputSegment/index.ts
rename to packages/date-picker/src/DateInput/DateInputSegment/index.ts
diff --git a/packages/date-picker/src/DateInputSegment/utils.ts b/packages/date-picker/src/DateInput/DateInputSegment/utils.ts
similarity index 87%
rename from packages/date-picker/src/DateInputSegment/utils.ts
rename to packages/date-picker/src/DateInput/DateInputSegment/utils.ts
index ea1c7739fe..746608095b 100644
--- a/packages/date-picker/src/DateInputSegment/utils.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/utils.ts
@@ -1,11 +1,10 @@
 import { padStart } from 'lodash';
 
+import { isZeroLike } from '../../utils/isZeroLike';
+
 import { charsPerSegment } from './constants';
 import { DateSegment } from './DateInputSegment.types';
 
-const isZeroLike = (val: any) =>
-  !val || isNaN(val) || ['', '0', '00', 0].includes(val);
-
 export const getValueFormatter =
   (segment: DateSegment) => (val: string | number | undefined) => {
     // If the value is any form of zero, we set it to an empty string
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.spec.tsx b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.spec.tsx
similarity index 100%
rename from packages/date-picker/src/DateInputWrapper/DateInputWrapper.spec.tsx
rename to packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.spec.tsx
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.stories.tsx
similarity index 98%
rename from packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
rename to packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.stories.tsx
index 294f0faa42..ebe3671c75 100644
--- a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.stories.tsx
@@ -9,7 +9,7 @@ import { StoryMetaType } from '@leafygreen-ui/lib';
 import {
   DatePickerContextProps,
   DatePickerProvider,
-} from '../DatePickerContext';
+} from '../../DatePickerContext';
 
 import { DateInputWrapper } from './DateInputWrapper';
 
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.styles.ts b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.styles.ts
similarity index 100%
rename from packages/date-picker/src/DateInputWrapper/DateInputWrapper.styles.ts
rename to packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.styles.ts
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx
similarity index 97%
rename from packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx
rename to packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx
index 6a31254ed1..3db469bdb2 100644
--- a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.tsx
+++ b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx
@@ -11,7 +11,7 @@ import {
   useUpdatedBaseFontSize,
 } from '@leafygreen-ui/typography';
 
-import { useDatePickerContext } from '../DatePickerContext';
+import { useDatePickerContext } from '../../DatePickerContext';
 
 import {
   baseWrapperStyles,
diff --git a/packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.types.ts
similarity index 100%
rename from packages/date-picker/src/DateInputWrapper/DateInputWrapper.types.ts
rename to packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.types.ts
diff --git a/packages/date-picker/src/DateInputWrapper/index.ts b/packages/date-picker/src/DateInput/DateInputWrapper/index.ts
similarity index 100%
rename from packages/date-picker/src/DateInputWrapper/index.ts
rename to packages/date-picker/src/DateInput/DateInputWrapper/index.ts

From 6832e4de4719f8edc3b020537bbe8b2e92e70687 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 30 Aug 2023 14:06:07 -0400
Subject: [PATCH 041/351] updates stories

---
 .../DateInputBox/DateInputBox.stories.tsx     | 56 ++++++++++----
 .../DateInputBox/DateInputBox.styles.ts       |  2 +-
 .../DateInput/DateInputBox/DateInputBox.tsx   | 75 ++++++++-----------
 .../DateInputBox/DateInputBox.types.ts        |  5 ++
 .../DateInputWrapper.stories.tsx              |  8 +-
 packages/date-picker/src/DateInput/index.ts   |  9 +++
 .../DatePickerInput/DatePickerInput.tsx       | 33 +++++++-
 .../DatePickerInput/DatePickerInput.types.ts  |  5 +-
 8 files changed, 129 insertions(+), 64 deletions(-)
 create mode 100644 packages/date-picker/src/DateInput/index.ts

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
index 3bec4d7bf0..eb0a280a8a 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -4,7 +4,8 @@ import { StoryFn } from '@storybook/react';
 import { isValid } from 'date-fns';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
-import { StoryMetaType } from '@leafygreen-ui/lib';
+import { StoryMetaType, StoryType } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
 
 import {
   DatePickerContextProps,
@@ -13,6 +14,8 @@ import {
 
 import { DateInputBox } from './DateInputBox';
 
+const testDate = new Date('1993-12-26');
+
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
   <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
     <DatePickerProvider
@@ -32,18 +35,12 @@ const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
   parameters: {
     default: null,
     generate: {
+      storyNames: ['Formats', 'TimeZones'],
       combineArgs: {
         darkMode: [false, true],
-        value: [null, new Date('1993-12-26')],
-        dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
-        timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
+        size: Object.values(Size),
+        value: [null, testDate],
       },
-      excludeCombinations: [
-        {
-          timeZone: ['Europe/London', 'America/New_York', 'Asia/Seoul'],
-          value: null,
-        },
-      ],
       decorator: ProviderWrapper,
     },
   },
@@ -75,10 +72,43 @@ export const Basic: StoryFn<typeof DateInputBox> = props => {
   return (
     <>
       <DateInputBox {...props} value={date} setValue={updateDate} />
-      <b>Current date</b>
-      <span>{date?.toISOString()}</span>
     </>
   );
 };
 
-export const Generated = () => {};
+export const Formats: StoryType<
+  typeof DateInputBox,
+  DatePickerContextProps
+> = () => <></>;
+Formats.parameters = {
+  generate: {
+    combineArgs: {
+      dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
+    },
+  },
+};
+
+export const TimeZones: StoryType<
+  typeof DateInputBox,
+  DatePickerContextProps
+> = () => <></>;
+TimeZones.parameters = {
+  generate: {
+    args: {
+      dateFormat: 'iso8601',
+      size: Size.Default,
+    },
+    combineArgs: {
+      timeZone: [
+        'Pacific/Honolulu',
+        'America/Los_Angeles',
+        'America/New_York',
+        'Europe/London',
+        'Asia/Istanbul',
+        'Asia/Seoul',
+        'Pacific/Auckland',
+      ],
+    },
+    excludeCombinations: [{ value: null }, {}],
+  },
+};
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
index c59a850ee9..3707588e68 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
@@ -4,8 +4,8 @@ export const baseStyles = css``;
 
 export const segmentPartsWrapperStyles = css`
   display: flex;
+  align-items: center;
   gap: 2px;
-  width: 100%;
 `;
 
 export const separatorLiteralStyles = css``;
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index 49fe835e29..476a09cbd6 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { isSameDay } from 'date-fns';
 
-import { useIdAllocator } from '@leafygreen-ui/hooks';
+import { cx } from '@leafygreen-ui/emotion';
 
 import { useDatePickerContext } from '../../DatePickerContext';
 import { newDateFromSegments } from '../../utils/newDateFromSegments';
@@ -11,7 +11,6 @@ import {
   DateSegment,
   isDateSegment,
 } from '../DateInputSegment';
-import { DateInputWrapper } from '../DateInputWrapper';
 
 import {
   segmentPartsWrapperStyles,
@@ -26,12 +25,14 @@ import { useFormatParts } from './useFormat';
  *
  * Must be controlled
  */
-export function DateInputBox({ value, setValue }: DateInputBoxProps) {
-  const { label, dateFormat, timeZone } = useDatePickerContext();
-  const labelId = useIdAllocator({ prefix: 'date-label' });
-  const descriptionId = useIdAllocator({ prefix: 'date-description' });
-  const errorId = useIdAllocator({ prefix: 'date-description' });
-  const inputId = useIdAllocator({ prefix: 'date-input' });
+export function DateInputBox({
+  value,
+  setValue,
+  className,
+  labelledBy,
+  ...rest
+}: DateInputBoxProps) {
+  const { dateFormat, timeZone } = useDatePickerContext();
   const inputWrapperRef = useRef(null);
 
   // // Only used to track the _order_ of segments, not the value itself
@@ -76,41 +77,31 @@ export function DateInputBox({ value, setValue }: DateInputBoxProps) {
   };
 
   return (
-    <DateInputWrapper
-      label={label}
-      description={dateFormat + ' ' + timeZone}
-      inputId={inputId}
-      labelId={labelId}
-      descriptionId={descriptionId}
-      errorId={errorId}
+    <div
+      className={cx(segmentPartsWrapperStyles, className)}
+      ref={inputWrapperRef}
+      {...rest}
     >
-      <div
-        id={inputId}
-        className={segmentPartsWrapperStyles}
-        ref={inputWrapperRef}
-      >
-        {formatParts?.map((part, i) => {
-          if (part.type === 'literal') {
-            return (
-              <span className={separatorLiteralStyles} key={'literal-' + i}>
-                {part.value}
-              </span>
-            );
-          } else if (isDateSegment(part.type)) {
-            return (
-              <DateInputSegment
-                key={part.type}
-                segment={part.type}
-                value={segments[part.type]}
-                onChange={handleSegmentChange(part.type)}
-                aria-labelledby={labelId}
-                aria-describedby={descriptionId}
-              />
-            );
-          }
-        })}
-      </div>
-    </DateInputWrapper>
+      {formatParts?.map((part, i) => {
+        if (part.type === 'literal') {
+          return (
+            <span className={separatorLiteralStyles} key={'literal-' + i}>
+              {part.value}
+            </span>
+          );
+        } else if (isDateSegment(part.type)) {
+          return (
+            <DateInputSegment
+              key={part.type}
+              segment={part.type}
+              value={segments[part.type]}
+              onChange={handleSegmentChange(part.type)}
+              aria-labelledby={labelledBy}
+            />
+          );
+        }
+      })}
+    </div>
   );
 }
 
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
index e5c4359ccf..7905b4dafa 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
@@ -15,6 +15,11 @@ export interface DateInputBoxProps
    * Date object is relative to the client's time zone
    */
   setValue?: (date: Date | null) => void;
+
+  /**
+   * id of the labelling element
+   */
+  labelledBy?: string;
 }
 
 // export interface DateSegmentsState {
diff --git a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.stories.tsx b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.stories.tsx
index ebe3671c75..f74dd67c25 100644
--- a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.stories.tsx
@@ -28,13 +28,13 @@ const meta: StoryMetaType<
       combineArgs: {
         darkMode: [false, true],
         label: [undefined, 'Label'],
-        description: [undefined, 'United States'],
+        description: [undefined, 'Description'],
         state: ['unset', 'error'],
       },
       excludeCombinations: [
         {
           label: undefined,
-          description: 'United States',
+          description: 'Description',
         },
       ],
       decorator: (Instance, ctx) => (
@@ -67,8 +67,8 @@ const meta: StoryMetaType<
   },
   args: {
     label: 'Label',
-    description: 'United States',
-    state: 'unset',
+    description: 'Description',
+    state: 'error',
     errorMessage: 'This is an error message',
   },
   argTypes: {
diff --git a/packages/date-picker/src/DateInput/index.ts b/packages/date-picker/src/DateInput/index.ts
new file mode 100644
index 0000000000..5cf82c95c1
--- /dev/null
+++ b/packages/date-picker/src/DateInput/index.ts
@@ -0,0 +1,9 @@
+export {
+  DateInputBox,
+  type DateInputBoxProps,
+  type DateSegmentsState,
+} from './DateInputBox';
+export {
+  DateInputWrapper,
+  type DateInputWrapperProps,
+} from './DateInputWrapper';
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 28ee3adbd8..cdc32bf964 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -1,9 +1,36 @@
 import React from 'react';
+
+import { useIdAllocator } from '@leafygreen-ui/hooks';
+
+import { DateInputBox, DateInputWrapper } from '../../DateInput';
+import { useDatePickerContext } from '../../DatePickerContext';
+
 import { DatePickerInputProps } from './DatePickerInput.types';
 
-// TODO: forwardRef
-export function DatePickerInput({}: DatePickerInputProps) {
-  return <div>your content here</div>;
+export function DatePickerInput({ value, setValue }: DatePickerInputProps) {
+  const { label, dateFormat, timeZone } = useDatePickerContext();
+  const labelId = useIdAllocator({ prefix: 'date-label' });
+  const descriptionId = useIdAllocator({ prefix: 'date-description' });
+  const errorId = useIdAllocator({ prefix: 'date-description' });
+  const inputId = useIdAllocator({ prefix: 'date-input' });
+
+  return (
+    <DateInputWrapper
+      label={label}
+      description={dateFormat + ' ' + timeZone}
+      inputId={inputId}
+      labelId={labelId}
+      descriptionId={descriptionId}
+      errorId={errorId}
+    >
+      <DateInputBox
+        value={value}
+        setValue={setValue}
+        id={inputId}
+        labelledBy={labelId}
+      />
+    </DateInputWrapper>
+  );
 }
 
 DatePickerInput.displayName = 'DatePickerInput';
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index ad4837ab51..02b1d3266a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -1 +1,4 @@
-export interface DatePickerInputProps {}
\ No newline at end of file
+import { DateInputBoxProps } from '../../DateInput';
+
+export interface DatePickerInputProps
+  extends Pick<DateInputBoxProps, 'value' | 'setValue'> {}

From 6b2bb34bc6992b16cfa6dec2e9621814b4c4dffa Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 30 Aug 2023 14:18:09 -0400
Subject: [PATCH 042/351] reworks tests

---
 .../DateInputBox/DateInputBox.spec.tsx        |  10 +-
 .../DateInputSegment.spec.tsx                 | 164 +++++-------------
 .../DateInputSegment/DateInputSegment.tsx     |   2 +-
 .../src/DateInput/DateInputSegment/utils.ts   |  26 ---
 .../utils/valueFormatter.spec.ts              |  61 +++++++
 .../DateInputSegment/utils/valueFormatter.ts  |  25 +++
 6 files changed, 129 insertions(+), 159 deletions(-)
 create mode 100644 packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.spec.ts
 create mode 100644 packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.ts

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
index 6ad0e397c2..24ea11fad8 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -32,14 +32,10 @@ describe('packages/date-input-box', () => {
     describe.each(['day', 'month', 'year'])('%i', segment => {
       test('renders the correct aria attributes', () => {
         const result = renderDateInputBox();
-        const label = result.getByText('Label');
         const input = result.getByLabelText(segment);
 
         // each segment has appropriate aria label
         expect(input).toHaveAttribute('aria-label', segment);
-
-        // each segment is labelled by the wrapper label
-        expect(input).toHaveAttribute('aria-labelledby', label.id);
       });
     });
 
@@ -74,9 +70,9 @@ describe('packages/date-input-box', () => {
         undefined,
         { dateFormat: 'iso8601' },
       );
-      expect(dayInput).toHaveValue('');
-      expect(monthInput).toHaveValue('');
-      expect(yearInput).toHaveValue('');
+      expect(dayInput).toHaveValue(null);
+      expect(monthInput).toHaveValue(null);
+      expect(yearInput).toHaveValue(null);
     });
 
     test('renders a filled text box', () => {
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
index fd4de01d87..7868155ce3 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
@@ -2,175 +2,89 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { DateSegment } from './DateInputSegment.types';
-import { getValueFormatter } from './utils';
-import { DateInputSegment } from '.';
+import { DateInputSegment, type DateInputSegmentProps } from '.';
 
 const handler = jest.fn();
 
+const renderSegment = (props: DateInputSegmentProps) => {
+  const result = render(<DateInputSegment data-testid="testid" {...props} />);
+  const input = result.getByTestId('testid');
+  return {
+    ...result,
+    input: input as HTMLInputElement,
+  };
+};
+
 describe('packages/date-picker/date-input-segment', () => {
   beforeEach(() => {
     handler.mockClear();
   });
 
-  describe('utils/valueFormatter', () => {
-    describe.each(['day', 'month'] as Array<DateSegment>)('', segment => {
-      const formatter = getValueFormatter(segment);
-
-      test('formats 2 digit values', () => {
-        expect(formatter('12')).toEqual('12');
-      });
-
-      test('pads 1 digit value', () => {
-        expect(formatter('2')).toEqual('02');
-      });
-
-      test('truncates 3+ digit values', () => {
-        expect(formatter('123')).toEqual('23');
-      });
-
-      test('truncates 3+ digit padded values', () => {
-        expect(formatter('012')).toEqual('12');
-      });
-
-      test('sets 0 to empty string', () => {
-        expect(formatter('0')).toEqual('');
-      });
-
-      test('sets undefined to empty string', () => {
-        expect(formatter(undefined)).toEqual('');
-      });
-    });
-
-    describe('year', () => {
-      const formatter = getValueFormatter('year');
-
-      test('formats 4 digit values', () => {
-        expect(formatter('2023')).toEqual('2023');
-      });
-
-      test('pads < 4 digit value', () => {
-        expect(formatter('123')).toEqual('0123');
-      });
-
-      test('truncates 5+ digit values', () => {
-        expect(formatter('12345')).toEqual('2345');
-      });
-
-      test('truncates 5+ digit padded values', () => {
-        expect(formatter('02345')).toEqual('2345');
-      });
-
-      test('sets 0 to empty string', () => {
-        expect(formatter('0')).toEqual('');
-      });
-
-      test('sets undefined to empty string', () => {
-        expect(formatter(undefined)).toEqual('');
-      });
-    });
-  });
-
   describe('rendering', () => {
     describe('day segment', () => {
       test('Rendering with undefined sets the value to empty string', () => {
-        const result = render(
-          <DateInputSegment
-            segment="day"
-            data-testid="testid"
-            value={undefined}
-          />,
-        );
-        const input = result.getByTestId('testid');
-        expect((input as HTMLInputElement).value).toBe('');
+        const { input } = renderSegment({ segment: 'day' });
+        expect(input.value).toBe('');
       });
 
       test('Rendering with a value sets the input value', () => {
-        const result = render(
-          <DateInputSegment segment="day" data-testid="testid" value={12} />,
-        );
-        const input = result.getByTestId('testid');
-        expect((input as HTMLInputElement).value).toBe('12');
+        const { input } = renderSegment({ segment: 'day', value: 12 });
+        expect(input.value).toBe('12');
       });
 
       test('values get appropriately padded', () => {
-        const result = render(
-          <DateInputSegment segment="day" data-testid="testid" value={8} />,
-        );
-        const input = result.getByTestId('testid');
-        expect((input as HTMLInputElement).value).toBe('08');
+        const { input } = renderSegment({ segment: 'day', value: 8 });
+        expect(input.value).toBe('08');
       });
 
       test('values get appropriately truncated', () => {
-        const result = render(
-          <DateInputSegment segment="day" data-testid="testid" value={123} />,
-        );
-        const input = result.getByTestId('testid');
-        expect((input as HTMLInputElement).value).toBe('23');
+        const { input } = renderSegment({ segment: 'day', value: 123 });
+        expect(input.value).toBe('23');
       });
 
       test('rerendering updates the value', () => {
-        const result = render(
-          <DateInputSegment segment="day" data-testid="testid" value={12} />,
-        );
-        const input = result.getByTestId('testid');
-        result.rerender(
+        const { input, rerender } = renderSegment({
+          segment: 'day',
+          value: 12,
+        });
+
+        rerender(
           <DateInputSegment segment="day" data-testid="testid" value={8} />,
         );
-        expect((input as HTMLInputElement).value).toBe('08');
+        expect(input.value).toBe('08');
       });
     });
 
     describe('year segment', () => {
       test('Rendering with undefined sets the value to empty string', () => {
-        const result = render(
-          <DateInputSegment
-            segment="year"
-            data-testid="testid"
-            value={undefined}
-          />,
-        );
-        const input = result.getByTestId('testid');
-        expect((input as HTMLInputElement).value).toBe('');
+        const { input } = renderSegment({ segment: 'year' });
+        expect(input.value).toBe('');
       });
 
       test('Rendering with a value sets the input value', () => {
-        const result = render(
-          <DateInputSegment segment="year" data-testid="testid" value={2023} />,
-        );
-        const input = result.getByTestId('testid');
-        expect((input as HTMLInputElement).value).toBe('2023');
+        const { input } = renderSegment({ segment: 'year', value: 2023 });
+        expect(input.value).toBe('2023');
       });
 
       test('values get appropriately padded', () => {
-        const result = render(
-          <DateInputSegment segment="year" data-testid="testid" value={123} />,
-        );
-        const input = result.getByTestId('testid');
-        expect((input as HTMLInputElement).value).toBe('0123');
+        const { input } = renderSegment({ segment: 'year', value: 123 });
+        expect(input.value).toBe('0123');
       });
 
       test('values get appropriately truncated', () => {
-        const result = render(
-          <DateInputSegment
-            segment="year"
-            data-testid="testid"
-            value={12031}
-          />,
-        );
-        const input = result.getByTestId('testid');
-        expect((input as HTMLInputElement).value).toBe('2031');
+        const { input } = renderSegment({ segment: 'year', value: 12031 });
+        expect(input.value).toBe('2031');
       });
 
       test('rerendering updates the value', () => {
-        const result = render(
-          <DateInputSegment segment="year" data-testid="testid" value={2023} />,
-        );
-        const input = result.getByTestId('testid');
-        result.rerender(
+        const { input, rerender } = renderSegment({
+          segment: 'year',
+          value: 2023,
+        });
+        rerender(
           <DateInputSegment segment="year" data-testid="testid" value={1993} />,
         );
-        expect((input as HTMLInputElement).value).toBe('1993');
+        expect(input.value).toBe('1993');
       });
     });
   });
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index 533ee7fe42..4f3b03fb09 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -8,6 +8,7 @@ import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
 import { useDatePickerContext } from '../../DatePickerContext';
 
+import { getValueFormatter } from './utils/valueFormatter';
 import { defaultMax, defaultMin, defaultPlaceholder } from './constants';
 import {
   baseStyles,
@@ -17,7 +18,6 @@ import {
   segmentWidthStyles,
 } from './DateInputSegment.styles';
 import { DateInputSegmentProps, DateSegment } from './DateInputSegment.types';
-import { getValueFormatter } from './utils';
 
 export function isDateSegment(str: string): str is DateSegment {
   return ['day', 'month', 'year'].includes(str);
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/utils.ts b/packages/date-picker/src/DateInput/DateInputSegment/utils.ts
index 746608095b..e69de29bb2 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/utils.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/utils.ts
@@ -1,26 +0,0 @@
-import { padStart } from 'lodash';
-
-import { isZeroLike } from '../../utils/isZeroLike';
-
-import { charsPerSegment } from './constants';
-import { DateSegment } from './DateInputSegment.types';
-
-export const getValueFormatter =
-  (segment: DateSegment) => (val: string | number | undefined) => {
-    // If the value is any form of zero, we set it to an empty string
-    if (isZeroLike(val)) return '';
-
-    // otherwise, pad the string with 0s, or trim it to n chars
-
-    const padded = padStart(
-      Number(val).toString(),
-      charsPerSegment[segment],
-      '0',
-    );
-    const trimmed = padded.slice(
-      padded.length - charsPerSegment[segment],
-      padded.length,
-    );
-
-    return trimmed;
-  };
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.spec.ts b/packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.spec.ts
new file mode 100644
index 0000000000..bb1a3e727b
--- /dev/null
+++ b/packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.spec.ts
@@ -0,0 +1,61 @@
+import { DateSegment } from '../DateInputSegment.types';
+
+import { getValueFormatter } from './valueFormatter';
+
+describe('utils/valueFormatter', () => {
+  describe.each(['day', 'month'] as Array<DateSegment>)('', segment => {
+    const formatter = getValueFormatter(segment);
+
+    test('formats 2 digit values', () => {
+      expect(formatter('12')).toEqual('12');
+    });
+
+    test('pads 1 digit value', () => {
+      expect(formatter('2')).toEqual('02');
+    });
+
+    test('truncates 3+ digit values', () => {
+      expect(formatter('123')).toEqual('23');
+    });
+
+    test('truncates 3+ digit padded values', () => {
+      expect(formatter('012')).toEqual('12');
+    });
+
+    test('sets 0 to empty string', () => {
+      expect(formatter('0')).toEqual('');
+    });
+
+    test('sets undefined to empty string', () => {
+      expect(formatter(undefined)).toEqual('');
+    });
+  });
+
+  describe('year', () => {
+    const formatter = getValueFormatter('year');
+
+    test('formats 4 digit values', () => {
+      expect(formatter('2023')).toEqual('2023');
+    });
+
+    test('pads < 4 digit value', () => {
+      expect(formatter('123')).toEqual('0123');
+    });
+
+    test('truncates 5+ digit values', () => {
+      expect(formatter('12345')).toEqual('2345');
+    });
+
+    test('truncates 5+ digit padded values', () => {
+      expect(formatter('02345')).toEqual('2345');
+    });
+
+    test('sets 0 to empty string', () => {
+      expect(formatter('0')).toEqual('');
+    });
+
+    test('sets undefined to empty string', () => {
+      expect(formatter(undefined)).toEqual('');
+    });
+  });
+});
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.ts b/packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.ts
new file mode 100644
index 0000000000..658ab5622a
--- /dev/null
+++ b/packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.ts
@@ -0,0 +1,25 @@
+import { padStart } from 'lodash';
+
+import { isZeroLike } from '../../../utils/isZeroLike';
+import { charsPerSegment } from '../constants';
+import { DateSegment } from '../DateInputSegment.types';
+
+export const getValueFormatter =
+  (segment: DateSegment) => (val: string | number | undefined) => {
+    // If the value is any form of zero, we set it to an empty string
+    if (isZeroLike(val)) return '';
+
+    // otherwise, pad the string with 0s, or trim it to n chars
+
+    const padded = padStart(
+      Number(val).toString(),
+      charsPerSegment[segment],
+      '0',
+    );
+    const trimmed = padded.slice(
+      padded.length - charsPerSegment[segment],
+      padded.length,
+    );
+
+    return trimmed;
+  };

From b75e0646ba5f6faa79bdef036954b770f2926090 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 30 Aug 2023 15:58:21 -0400
Subject: [PATCH 043/351] Adds arrowkey focus behavior

---
 .../DateInputBox/DateInputBox.spec.tsx        | 123 +++++++++-
 .../DateInput/DateInputBox/DateInputBox.tsx   | 215 +++++++++++-------
 .../DateInputBox/DateInputBox.utils.ts        |  28 +++
 .../DateInputSegment/DateInputSegment.tsx     |   1 +
 .../DateInputSegment.types.ts                 |   8 +-
 .../src/DateInput/DateInputSegment/index.ts   |   6 +-
 .../src/DateInput/DateInputSegment/utils.ts   |   0
 .../src/utils/isValidSegment/index.ts         |  12 +-
 8 files changed, 305 insertions(+), 88 deletions(-)
 create mode 100644 packages/date-picker/src/DateInput/DateInputBox/DateInputBox.utils.ts
 delete mode 100644 packages/date-picker/src/DateInput/DateInputSegment/utils.ts

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
index 24ea11fad8..0e35dc8da9 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import {
   DatePickerContextProps,
@@ -24,6 +25,10 @@ const renderDateInputBox = (
   );
   const yearInput = result.container.querySelector('input[aria-label="year"]');
 
+  if (!(dayInput && monthInput && yearInput)) {
+    throw new Error('Some or all input segments are missing');
+  }
+
   return { ...result, dayInput, monthInput, yearInput };
 };
 
@@ -87,9 +92,121 @@ describe('packages/date-input-box', () => {
     });
   });
 
-  describe('typing', () => {});
+  describe('typing', () => {
+    test('typing into a segment updates the segment', () => {
+      const { dayInput } = renderDateInputBox(undefined, {
+        dateFormat: 'iso8601',
+        timeZone: 'UTC',
+      });
+
+      userEvent.type(dayInput, '26');
+      expect(dayInput).toHaveValue(26);
+    });
+
+    test('typing into a segment does not fire the change handler ', () => {
+      const handler = jest.fn();
+      const { dayInput } = renderDateInputBox(
+        {
+          value: null,
+          setValue: handler,
+        },
+        {
+          dateFormat: 'iso8601',
+          timeZone: 'UTC',
+        },
+      );
+
+      userEvent.type(dayInput, '26');
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    test('typing a complete date fires the change handler', () => {
+      const handler = jest.fn();
+      const { dayInput, monthInput, yearInput } = renderDateInputBox(
+        {
+          value: null,
+          setValue: handler,
+        },
+        {
+          dateFormat: 'iso8601',
+          timeZone: 'UTC',
+        },
+      );
+      userEvent.type(yearInput, '1993');
+      userEvent.type(monthInput, '12');
+      userEvent.type(dayInput, '26');
+
+      expect(handler).toHaveBeenCalled();
+    });
+
+    test.todo(
+      'typing a complete segment value focuses the next segment',
+      // () => {
+      //   const { yearInput, monthInput } = renderDateInputBox(undefined, {
+      //     dateFormat: 'iso8601',
+      //     timeZone: 'UTC',
+      //   });
+      //   userEvent.type(yearInput, '1993');
+      //   expect(monthInput).toHaveFocus();
+      // },
+    );
+
+    test.todo(
+      'typing an incomplete segment does not focus the next segment',
+      // () => {
+      //   const { yearInput } = renderDateInputBox(undefined, {
+      //     dateFormat: 'iso8601',
+      //     timeZone: 'UTC',
+      //   });
+      //   userEvent.type(yearInput, '200');
+      //   expect(yearInput).toHaveFocus();
+      // },
+    );
+  });
+
+  describe('mouse interaction', () => {
+    test('click on segment focuses it', () => {
+      const { dayInput } = renderDateInputBox(undefined, {
+        dateFormat: 'iso8601',
+      });
+      userEvent.click(dayInput);
+      expect(dayInput).toHaveFocus();
+    });
+  });
+
+  describe('keyboard interaction', () => {
+    test('Tab moves focus', () => {
+      const { dayInput, monthInput, yearInput } = renderDateInputBox(
+        undefined,
+        { dateFormat: 'iso8601' },
+      );
+      userEvent.click(yearInput);
+      userEvent.tab();
+      expect(monthInput).toHaveFocus();
+      userEvent.tab();
+      expect(dayInput).toHaveFocus();
+    });
+
+    describe('Arrow Keys', () => {
+      test('ArrowRight moves focus right', () => {
+        const { monthInput, yearInput } = renderDateInputBox(undefined, {
+          dateFormat: 'iso8601',
+        });
+
+        userEvent.click(yearInput);
+        userEvent.type(yearInput, '{arrowright}');
+        expect(monthInput).toHaveFocus();
+      });
 
-  describe('mouse interaction', () => {});
+      test('ArrowLeft moves focus left', () => {
+        const { dayInput, monthInput } = renderDateInputBox(undefined, {
+          dateFormat: 'iso8601',
+        });
 
-  describe('keyboard interaction', () => {});
+        userEvent.click(dayInput);
+        userEvent.type(dayInput, '{arrowleft}');
+        expect(monthInput).toHaveFocus();
+      });
+    });
+  });
 });
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index 476a09cbd6..fede9497ec 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -1,9 +1,12 @@
-import React, { useRef } from 'react';
+import React, { KeyboardEventHandler } from 'react';
 import { isSameDay } from 'date-fns';
 
 import { cx } from '@leafygreen-ui/emotion';
+import { useDynamicRefs, useForwardedRef } from '@leafygreen-ui/hooks';
+import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../DatePickerContext';
+import { isValidSegmentName } from '../../utils/isValidSegment';
 import { newDateFromSegments } from '../../utils/newDateFromSegments';
 import { toClientTimeZone } from '../../utils/toTimeZone';
 import {
@@ -17,92 +20,144 @@ import {
   separatorLiteralStyles,
 } from './DateInputBox.styles';
 import { DateInputBoxProps, DateSegmentsState } from './DateInputBox.types';
+import { getRemainingParts } from './DateInputBox.utils';
 import { useDateSegments } from './useDateSegments';
 import { useFormatParts } from './useFormat';
 
 /**
- * @internal
+ * Renders a styled date input with appropriate segment order & separator characters.
  *
- * Must be controlled
+ * Uses vars value & dateFormat with `Intl.DateTimeFormat.prototype.formatToParts()`
+ * to determine the segment order and separator characters.
+ * @internal
  */
-export function DateInputBox({
-  value,
-  setValue,
-  className,
-  labelledBy,
-  ...rest
-}: DateInputBoxProps) {
-  const { dateFormat, timeZone } = useDatePickerContext();
-  const inputWrapperRef = useRef(null);
-
-  // // Only used to track the _order_ of segments, not the value itself
-  const formatParts = useFormatParts(dateFormat);
-
-  /**
-   * When a segment is updated, update the external value
-   */
-  const onSegmentsUpdate = (newSegments: DateSegmentsState) => {
-    const { day, month, year } = newSegments;
-    const sourceDate = newDateFromSegments({ day, month, year });
-
-    // Only update the value iff all parts are set, and create a valid date.
-    if (sourceDate) {
-      /** New date relative to client time zone */
-      const clientDate = toClientTimeZone(sourceDate, timeZone);
-
-      /** Whether we need to update the external value */
-      const shouldUpdate = !value || !isSameDay(clientDate, value);
-
-      if (shouldUpdate) {
-        setValue?.(clientDate);
+export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
+  (
+    { value, setValue, className, labelledBy, ...rest }: DateInputBoxProps,
+    fwdRef,
+  ) => {
+    const { dateFormat, timeZone } = useDatePickerContext();
+    const containerRef = useForwardedRef(fwdRef, null);
+    const segmentRefs = useDynamicRefs<HTMLInputElement>({ prefix: 'segment' });
+
+    // Only used to track the _order_ of segments, not the value itself
+    const formatParts = useFormatParts(dateFormat);
+
+    /**
+     * When a segment is updated, update the external value
+     */
+    const onSegmentsUpdate = (newSegments: DateSegmentsState) => {
+      const { day, month, year } = newSegments;
+      const sourceDate = newDateFromSegments({ day, month, year });
+
+      // Only update the value iff all parts are set, and create a valid date.
+      if (sourceDate) {
+        /** New date relative to client time zone */
+        const clientDate = toClientTimeZone(sourceDate, timeZone);
+
+        /** Whether we need to update the external value */
+        const shouldUpdate = !value || !isSameDay(clientDate, value);
+
+        if (shouldUpdate) {
+          setValue?.(clientDate);
+        }
+      } else if (!(day || month || year)) {
+        // if no segment exists, set the external value to null
+        setValue?.(null);
       }
-    } else if (!(day || month || year)) {
-      // if no segment exists, set the external value to null
-      setValue?.(null);
-    }
-  };
-
-  // Keep track of each date segment
-  const { segments, setSegment } = useDateSegments(value, {
-    timeZone,
-    onUpdate: onSegmentsUpdate,
-  });
-
-  /**
-   * Curried function that creates a callback function for each segment.
-   * Sets the segment value
-   */
-  const handleSegmentChange = (segment: DateSegment) => (newValue: string) => {
-    setSegment(segment, Number(newValue));
-  };
-
-  return (
-    <div
-      className={cx(segmentPartsWrapperStyles, className)}
-      ref={inputWrapperRef}
-      {...rest}
-    >
-      {formatParts?.map((part, i) => {
-        if (part.type === 'literal') {
-          return (
-            <span className={separatorLiteralStyles} key={'literal-' + i}>
-              {part.value}
-            </span>
-          );
-        } else if (isDateSegment(part.type)) {
-          return (
-            <DateInputSegment
-              key={part.type}
-              segment={part.type}
-              value={segments[part.type]}
-              onChange={handleSegmentChange(part.type)}
-              aria-labelledby={labelledBy}
-            />
-          );
+    };
+
+    // Keep track of each date segment
+    const { segments, setSegment } = useDateSegments(value, {
+      timeZone,
+      onUpdate: onSegmentsUpdate,
+    });
+
+    /**
+     * Curried function that creates a callback function for each segment.
+     * Sets the segment value
+     */
+    const handleSegmentChange =
+      (segment: DateSegment) => (newValue: string) => {
+        setSegment(segment, Number(newValue));
+      };
+
+    const handleKeyDown: KeyboardEventHandler = ({ keyCode }) => {
+      /** moves the focused segment left or right */
+      const moveFocus = (dir: 'left' | 'right') => {
+        // get the currently focused element
+        const focus = document.activeElement;
+        const activeSegment = focus?.id;
+        const segmentIndex = formatParts?.findIndex(
+          part => part.type === activeSegment,
+        );
+
+        // get the format parts before/after the current index
+        const remainingParts = getRemainingParts(
+          dir,
+          segmentIndex,
+          formatParts,
+        );
+
+        // get the next part that represents a value
+        const nextIndex = remainingParts?.find(part =>
+          isValidSegmentName(part.type),
+        );
+
+        // focus the element with that segment id
+        const nextRef = nextIndex ? segmentRefs(nextIndex.type) : null;
+
+        if (nextRef) {
+          nextRef.current?.focus();
+        }
+      };
+
+      switch (keyCode) {
+        case keyMap.ArrowRight: {
+          moveFocus('right');
+          break;
+        }
+
+        case keyMap.ArrowLeft:
+          moveFocus('left');
+          break;
+        default: {
+          break;
         }
-      })}
-    </div>
-  );
-}
+      }
+    };
+
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div
+        className={cx(segmentPartsWrapperStyles, className)}
+        ref={containerRef}
+        onKeyDown={handleKeyDown}
+        {...rest}
+      >
+        {formatParts?.map((part, i) => {
+          if (part.type === 'literal') {
+            return (
+              <span className={separatorLiteralStyles} key={'literal-' + i}>
+                {part.value}
+              </span>
+            );
+          } else if (isDateSegment(part.type)) {
+            return (
+              <DateInputSegment
+                key={part.type}
+                ref={segmentRefs(part.type)}
+                segment={part.type}
+                value={segments[part.type]}
+                onChange={handleSegmentChange(part.type)}
+                aria-labelledby={labelledBy}
+              />
+            );
+          }
+        })}
+      </div>
+    );
+  },
+);
 
 DateInputBox.displayName = 'DateInputBox';
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.utils.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.utils.ts
new file mode 100644
index 0000000000..84fdea9ada
--- /dev/null
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.utils.ts
@@ -0,0 +1,28 @@
+import { isUndefined } from 'lodash';
+
+const cloneReverse = <T extends any>(arr?: Array<T>): Array<T> | undefined => {
+  if (!arr) return;
+
+  const clone = [...arr];
+  clone.reverse();
+  return clone;
+};
+
+/** Returns the ordered parts to the left or right of the provided index
+ * e.g:
+ *
+ * `getRemainingParts(right, 2, [a,b,c,d,e]) => [d,e]`
+ *
+ * `getRemainingParts(left, 2, [a,b,c,d,e]) => [b,a]`
+ */
+export const getRemainingParts = <T extends any>(
+  dir: 'right' | 'left',
+  index?: number,
+  parts?: Array<T>,
+) => {
+  if (isUndefined(index)) return;
+
+  return dir === 'left'
+    ? cloneReverse(parts?.slice(0, index))
+    : parts?.slice(index + 1);
+};
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index 4f3b03fb09..9a3c3b3ca0 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -58,6 +58,7 @@ export const DateInputSegment = React.forwardRef<
       <input
         {...rest}
         aria-label={segment}
+        id={segment}
         ref={inputRef}
         type="number"
         value={formatValue(value)}
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
index 191cf4e7bf..8b797cfbcd 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
@@ -1,6 +1,12 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
-export type DateSegment = 'day' | 'month' | 'year';
+export const DateSegment = {
+  Day: 'day',
+  Month: 'month',
+  Year: 'year',
+} as const;
+export type DateSegment = (typeof DateSegment)[keyof typeof DateSegment];
+
 export type DateSegmentValue = number;
 
 export interface DateInputSegmentProps
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/index.ts b/packages/date-picker/src/DateInput/DateInputSegment/index.ts
index c47590075b..f280f2822d 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/index.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/index.ts
@@ -1,6 +1,6 @@
 export { DateInputSegment, isDateSegment } from './DateInputSegment';
-export type {
-  DateInputSegmentProps,
+export {
+  type DateInputSegmentProps,
   DateSegment,
-  DateSegmentValue,
+  type DateSegmentValue,
 } from './DateInputSegment.types';
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/utils.ts b/packages/date-picker/src/DateInput/DateInputSegment/utils.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/date-picker/src/utils/isValidSegment/index.ts b/packages/date-picker/src/utils/isValidSegment/index.ts
index d696d7387d..a478363e68 100644
--- a/packages/date-picker/src/utils/isValidSegment/index.ts
+++ b/packages/date-picker/src/utils/isValidSegment/index.ts
@@ -1,9 +1,19 @@
 import { isUndefined } from 'lodash';
 
-import { DateSegmentValue } from '../../DateInputSegment';
+import {
+  DateSegment,
+  DateSegmentValue,
+} from '../../DateInput/DateInputSegment';
 
 /**
  * Returns whether a given value is a valid segment value
  */
 export const isValidSegment = (segment?: DateSegmentValue): segment is number =>
   !isUndefined(segment) && !isNaN(Number(segment));
+
+export const isValidSegmentName = (name?: string): name is DateSegment => {
+  return (
+    !isUndefined(name) &&
+    Object.values(DateSegment).includes(name as DateSegment)
+  );
+};

From 4b95af61e0fdb4931603052c2d5429dddc28aa30 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 30 Aug 2023 15:58:42 -0400
Subject: [PATCH 044/351] lint fix

---
 .../date-picker/src/CalendarCell/CalendarCell.spec.tsx     | 7 ++-----
 .../date-picker/src/CalendarCell/CalendarCell.styles.ts    | 1 -
 packages/date-picker/src/CalendarCell/CalendarCell.tsx     | 1 -
 .../date-picker/src/CalendarCell/CalendarCell.types.ts     | 2 +-
 .../date-picker/src/CalendarGrid/CalendarGrid.spec.tsx     | 7 ++-----
 .../date-picker/src/CalendarGrid/CalendarGrid.styles.ts    | 1 -
 packages/date-picker/src/CalendarGrid/CalendarGrid.tsx     | 1 -
 .../date-picker/src/CalendarGrid/CalendarGrid.types.ts     | 2 +-
 .../DatePicker/DatePickerInput/DatePickerInput.spec.tsx    | 7 ++-----
 .../DatePicker/DatePickerInput/DatePickerInput.styles.ts   | 1 -
 .../date-picker/src/DatePicker/DatePickerInput/index.ts    | 3 +--
 .../src/DatePickerContext/DatePickerContext.spec.tsx       | 7 ++-----
 12 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/packages/date-picker/src/CalendarCell/CalendarCell.spec.tsx b/packages/date-picker/src/CalendarCell/CalendarCell.spec.tsx
index 50d0ee578c..93ad08a980 100644
--- a/packages/date-picker/src/CalendarCell/CalendarCell.spec.tsx
+++ b/packages/date-picker/src/CalendarCell/CalendarCell.spec.tsx
@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { CalendarCell } from '.';
 
 describe('packages/calendar-cell', () => {
-  test('condition', () => {
-
-  })
-})
+  test('condition', () => {});
+});
diff --git a/packages/date-picker/src/CalendarCell/CalendarCell.styles.ts b/packages/date-picker/src/CalendarCell/CalendarCell.styles.ts
index 928608f58d..356c065c34 100644
--- a/packages/date-picker/src/CalendarCell/CalendarCell.styles.ts
+++ b/packages/date-picker/src/CalendarCell/CalendarCell.styles.ts
@@ -1,4 +1,3 @@
-
 import { css } from '@leafygreen-ui/emotion';
 
 export const baseStyles = css``;
diff --git a/packages/date-picker/src/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/CalendarCell/CalendarCell.tsx
index d7bd66da7d..6767feb872 100644
--- a/packages/date-picker/src/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/CalendarCell/CalendarCell.tsx
@@ -1,4 +1,3 @@
-
 import React from 'react';
 
 // TODO: forwardRef
diff --git a/packages/date-picker/src/CalendarCell/CalendarCell.types.ts b/packages/date-picker/src/CalendarCell/CalendarCell.types.ts
index e42a158eeb..c24ab046e9 100644
--- a/packages/date-picker/src/CalendarCell/CalendarCell.types.ts
+++ b/packages/date-picker/src/CalendarCell/CalendarCell.types.ts
@@ -1 +1 @@
-export interface CalendarCellProps {}
\ No newline at end of file
+export interface CalendarCellProps {}
diff --git a/packages/date-picker/src/CalendarGrid/CalendarGrid.spec.tsx b/packages/date-picker/src/CalendarGrid/CalendarGrid.spec.tsx
index d6d9e85cd3..199f27cbbc 100644
--- a/packages/date-picker/src/CalendarGrid/CalendarGrid.spec.tsx
+++ b/packages/date-picker/src/CalendarGrid/CalendarGrid.spec.tsx
@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { CalendarGrid } from '.';
 
 describe('packages/calendar-grid', () => {
-  test('condition', () => {
-
-  })
-})
+  test('condition', () => {});
+});
diff --git a/packages/date-picker/src/CalendarGrid/CalendarGrid.styles.ts b/packages/date-picker/src/CalendarGrid/CalendarGrid.styles.ts
index 928608f58d..356c065c34 100644
--- a/packages/date-picker/src/CalendarGrid/CalendarGrid.styles.ts
+++ b/packages/date-picker/src/CalendarGrid/CalendarGrid.styles.ts
@@ -1,4 +1,3 @@
-
 import { css } from '@leafygreen-ui/emotion';
 
 export const baseStyles = css``;
diff --git a/packages/date-picker/src/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/CalendarGrid/CalendarGrid.tsx
index df6f81b44e..21713d53d5 100644
--- a/packages/date-picker/src/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/CalendarGrid/CalendarGrid.tsx
@@ -1,4 +1,3 @@
-
 import React from 'react';
 
 // TODO: forwardRef
diff --git a/packages/date-picker/src/CalendarGrid/CalendarGrid.types.ts b/packages/date-picker/src/CalendarGrid/CalendarGrid.types.ts
index 64823de600..29fbe0c40d 100644
--- a/packages/date-picker/src/CalendarGrid/CalendarGrid.types.ts
+++ b/packages/date-picker/src/CalendarGrid/CalendarGrid.types.ts
@@ -1 +1 @@
-export interface CalendarGridProps {}
\ No newline at end of file
+export interface CalendarGridProps {}
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index f7370a1a12..139932950e 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { DatePickerInput } from '.';
 
 describe('packages/date-picker-input', () => {
-  test('condition', () => {
-
-  })
-})
+  test('condition', () => {});
+});
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.styles.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.styles.ts
index 928608f58d..356c065c34 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.styles.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.styles.ts
@@ -1,4 +1,3 @@
-
 import { css } from '@leafygreen-ui/emotion';
 
 export const baseStyles = css``;
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/index.ts b/packages/date-picker/src/DatePicker/DatePickerInput/index.ts
index c2f9bd7cc4..a0dc419422 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/index.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/index.ts
@@ -1,3 +1,2 @@
-
-export  { DatePickerInput } from './DatePickerInput';
+export { DatePickerInput } from './DatePickerInput';
 export { DatePickerInputProps } from './DatePickerInput.types';
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.spec.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.spec.tsx
index 2f07c0ca91..ca0ab789f9 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.spec.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.spec.tsx
@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { DatePickerContext } from '.';
 
 describe('packages/date-picker-context', () => {
-  test('condition', () => {
-
-  })
-})
+  test('condition', () => {});
+});

From 5115e42cec90873298ab227cdfaeeac73928d841 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 30 Aug 2023 17:33:01 -0400
Subject: [PATCH 045/351] revert to centered inputs

---
 .../DateInputBox/DateInputBox.stories.tsx     |  1 -
 .../DateInputBox/DateInputBox.styles.ts       |  2 +-
 .../DateInputSegment.styles.ts                | 15 +++------
 .../DateInputSegment/DateInputSegment.tsx     |  3 ++
 .../DateInput/DateInputSegment/constants.ts   | 31 +++++++++++--------
 .../DatePickerInput.stories.tsx               |  4 +--
 6 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
index eb0a280a8a..eb2637c999 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -38,7 +38,6 @@ const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
       storyNames: ['Formats', 'TimeZones'],
       combineArgs: {
         darkMode: [false, true],
-        size: Object.values(Size),
         value: [null, testDate],
       },
       decorator: ProviderWrapper,
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
index 3707588e68..757df13026 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
@@ -5,7 +5,7 @@ export const baseStyles = css``;
 export const segmentPartsWrapperStyles = css`
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 1px;
 `;
 
 export const separatorLiteralStyles = css``;
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts
index b3ebc0a13a..d4f8b7a57c 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts
@@ -8,12 +8,11 @@ import {
   typeScales,
 } from '@leafygreen-ui/tokens';
 
-import { characterWidth } from './constants';
+import { characterWidth, charsPerSegment } from './constants';
 import { DateSegment } from './DateInputSegment.types';
 
 export const baseStyles = css`
   font-family: ${fontFamilies.default};
-  /* font-family: ${fontFamilies.code}; */
   font-size: ${BaseFontSize.Body1}px;
   font-variant: tabular-nums;
   text-align: center;
@@ -31,12 +30,6 @@ export const baseStyles = css`
   &:focus {
     outline: none;
   }
-
-  // TODO: Remove if not using small caps
-  /* &::placeholder {
-    font-variant: all-small-caps;
-    font-size: 1.25em;
-  } */
 `;
 
 export const segmentThemeStyles: Record<Theme, string> = {
@@ -92,12 +85,12 @@ export const segmentSizeStyles: Record<Size, string> = {
 
 export const segmentWidthStyles: Record<DateSegment, string> = {
   day: css`
-    width: ${2 * characterWidth.D}ch;
+    width: ${charsPerSegment.day * characterWidth.D}ch;
   `,
   month: css`
-    width: ${2 * characterWidth.M}ch;
+    width: ${charsPerSegment.month * characterWidth.M}ch;
   `,
   year: css`
-    width: ${4 * characterWidth.Y}ch;
+    width: ${charsPerSegment.year * characterWidth.Y}ch;
   `,
 };
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index 9a3c3b3ca0..e11f319632 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -54,6 +54,9 @@ export const DateInputSegment = React.forwardRef<
       onChange?.(formatValue(e.target.value));
     };
 
+    // TODO:
+    // Use a text input with pattern attribute due to Firefox stripping leading zeros on number inputs. (╯°□°)╯︵ ┻━┻
+    // Thanks @matt-d-rat
     return (
       <input
         {...rest}
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/constants.ts b/packages/date-picker/src/DateInput/DateInputSegment/constants.ts
index f83b99d1e9..8264637fa5 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/constants.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/constants.ts
@@ -25,7 +25,8 @@ export const charsPerSegment = {
   year: 4,
 };
 
-const makePlaceholder = (n: number, s: string) => new Array(n).fill(s).join('');
+const makePlaceholder = (n: number, s: string) =>
+  new Array(n).fill(s).join('\u200B');
 
 /** The default placeholders for each segment */
 export const defaultPlaceholder = {
@@ -36,16 +37,20 @@ export const defaultPlaceholder = {
 
 /** The percentage of 1ch these specific characters take up */
 export const characterWidth = {
-  // Standard font
-  D: 1.1875,
-  M: 1.375,
-  Y: 1.125,
-  // TODO: for small-caps placeholders
-  // D: 1.05,
-  // M: 1.25,
-  // Y: 0.975,
-  // TODO: for monospace
-  // D: 1.05,
-  // M: 1.05,
-  // Y: 1.05,
+  // // Standard font
+  D: 46 / 40,
+  M: 55 / 40,
+  Y: 50 / 40,
+  // TODO: rm. for 1.25 small-caps placeholders
+  // D: 41 / 40,
+  // M: 49 / 40,
+  // Y: 44 / 40,
+  // TODO: rm. for small-caps placeholders
+  // D: 32 / 40,
+  // M: 37 / 40,
+  // Y: 35 / 40,
+  // TODO: rm. for monospace
+  // D: 1,
+  // M: 1,
+  // Y: 1,
 } as const;
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index b375f3e330..56bae4997a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -5,6 +5,7 @@ import { isValid } from 'date-fns';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
 
 import {
   DatePickerContextProps,
@@ -35,6 +36,7 @@ const meta: StoryMetaType<typeof DatePickerInput, DatePickerContextProps> = {
       combineArgs: {
         darkMode: [false, true],
         value: [null, new Date('1993-12-26')],
+        size: Object.values(Size),
         dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
         timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
       },
@@ -75,8 +77,6 @@ export const Basic: StoryFn<typeof DatePickerInput> = props => {
   return (
     <>
       <DatePickerInput {...props} value={date} setValue={updateDate} />
-      <b>Current date</b>
-      <span>{date?.toISOString()}</span>
     </>
   );
 };

From 304056adcff2862f266ba4ec6b42071e46af53ed Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 31 Aug 2023 14:30:15 -0400
Subject: [PATCH 046/351] Calendar cell

---
 .../CalendarCell/CalendarCell.spec.tsx        |   0
 .../CalendarCell/CalendarCell.stories.tsx     |  51 +++
 .../CalendarCell/CalendarCell.styles.ts       | 297 ++++++++++++++++++
 .../Calendar/CalendarCell/CalendarCell.tsx    |  65 ++++
 .../CalendarCell/CalendarCell.types.ts        |  26 ++
 .../CalendarGrid/CalendarGrid.spec.tsx        |   0
 .../CalendarGrid/CalendarGrid.styles.ts       |   0
 .../CalendarGrid/CalendarGrid.tsx             |   0
 .../CalendarGrid/CalendarGrid.types.ts        |   0
 .../src/CalendarCell/CalendarCell.styles.ts   |   3 -
 .../src/CalendarCell/CalendarCell.tsx         |   8 -
 .../src/CalendarCell/CalendarCell.types.ts    |   1 -
 .../DateInput/DateInputBox/DateInputBox.tsx   |   2 +
 .../DatePickerInput.stories.tsx               |   2 +-
 14 files changed, 442 insertions(+), 13 deletions(-)
 rename packages/date-picker/src/{ => Calendar}/CalendarCell/CalendarCell.spec.tsx (100%)
 create mode 100644 packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
 create mode 100644 packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
 create mode 100644 packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
 create mode 100644 packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
 rename packages/date-picker/src/{ => Calendar}/CalendarGrid/CalendarGrid.spec.tsx (100%)
 rename packages/date-picker/src/{ => Calendar}/CalendarGrid/CalendarGrid.styles.ts (100%)
 rename packages/date-picker/src/{ => Calendar}/CalendarGrid/CalendarGrid.tsx (100%)
 rename packages/date-picker/src/{ => Calendar}/CalendarGrid/CalendarGrid.types.ts (100%)
 delete mode 100644 packages/date-picker/src/CalendarCell/CalendarCell.styles.ts
 delete mode 100644 packages/date-picker/src/CalendarCell/CalendarCell.tsx
 delete mode 100644 packages/date-picker/src/CalendarCell/CalendarCell.types.ts

diff --git a/packages/date-picker/src/CalendarCell/CalendarCell.spec.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
similarity index 100%
rename from packages/date-picker/src/CalendarCell/CalendarCell.spec.tsx
rename to packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
new file mode 100644
index 0000000000..9f28c57d54
--- /dev/null
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../../DatePickerContext';
+
+import { CalendarCell } from './CalendarCell';
+import { CalendarCellState } from './CalendarCell.types';
+
+const meta: StoryMetaType<typeof CalendarCell, DatePickerContextProps> = {
+  title: 'Components/DatePicker/CalendarCell',
+  component: CalendarCell,
+  parameters: {
+    default: null,
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        state: Object.values(CalendarCellState),
+        isCurrent: [false, true],
+        isHighlighted: [false, true],
+      },
+      decorator: (Instance, ctx) => (
+        <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
+          {/* @ts-expect-error - incomplete context value */}
+          <DatePickerProvider value={{ size: ctx?.args.size }}>
+            <Instance />
+          </DatePickerProvider>
+        </LeafyGreenProvider>
+      ),
+    },
+  },
+  args: { children: '26' },
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: StoryFn<typeof CalendarCell> = props => (
+  <LeafyGreenProvider>
+    <CalendarCell {...props} />
+  </LeafyGreenProvider>
+);
+
+export const Basic = Template.bind({});
+
+export const Generated = () => {};
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
new file mode 100644
index 0000000000..7750be7fa2
--- /dev/null
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
@@ -0,0 +1,297 @@
+import { css, cx } from '@leafygreen-ui/emotion';
+import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+import {
+  fontFamilies,
+  fontWeights,
+  spacing,
+  typeScales,
+} from '@leafygreen-ui/tokens';
+
+import { CalendarCellState } from './CalendarCell.types';
+
+const CELL_SIZE = 28;
+export const indicatorClassName = createUniqueClassName('lg-calendar-cell');
+
+export const calendarCellStyles = css`
+  position: relative;
+  font-family: ${fontFamilies.default};
+  font-size: ${typeScales.body1.fontSize}px;
+  font-variant: tabular-nums;
+  height: ${CELL_SIZE}px;
+  width: ${CELL_SIZE}px;
+  cursor: pointer;
+  text-align: center;
+  padding: 0;
+  z-index: 0;
+`;
+
+type ThemedStateStyles = Record<Theme, Record<CalendarCellState, string>>;
+
+const _baseActiveCellStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.white};
+
+    & > .${indicatorClassName} {
+      background-color: ${palette.blue.dark1};
+    }
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.black};
+
+    & > .${indicatorClassName} {
+      background-color: ${palette.blue.light1};
+    }
+  `,
+};
+
+const _baseRangeStartStyles = css`
+  &:before {
+    content: '';
+    position: absolute;
+    width: 50%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 0;
+  }
+`;
+
+const _baseRangeEndStyles = css`
+  &:after {
+    content: '';
+    position: absolute;
+    width: 50%;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 0;
+  }
+`;
+
+/** Base styles for each state */
+export const calendarCellStateStyles: ThemedStateStyles = {
+  [Theme.Light]: {
+    [CalendarCellState.Default]: css`
+      color: ${palette.black};
+    `,
+    [CalendarCellState.Disabled]: css`
+      color: ${palette.gray.light1};
+      cursor: not-allowed;
+    `,
+    [CalendarCellState.Active]: _baseActiveCellStyles[Theme.Light],
+    [CalendarCellState.Start]: cx(
+      _baseActiveCellStyles[Theme.Light],
+      _baseRangeStartStyles,
+      css`
+        &:before {
+          background-color: ${palette.blue.light3};
+        }
+      `,
+    ),
+    [CalendarCellState.End]: cx(
+      _baseActiveCellStyles[Theme.Light],
+      _baseRangeEndStyles,
+      css`
+        &:after {
+          background-color: ${palette.blue.light3};
+        }
+      `,
+    ),
+    [CalendarCellState.Range]: cx(
+      _baseRangeStartStyles,
+      _baseRangeEndStyles,
+      css`
+        &:before,
+        &:after {
+          background-color: ${palette.blue.light3};
+        }
+      `,
+    ),
+  },
+  [Theme.Dark]: {
+    [CalendarCellState.Default]: css`
+      color: ${palette.gray.light2};
+    `,
+    [CalendarCellState.Disabled]: css`
+      color: ${palette.gray.dark1};
+      cursor: not-allowed;
+    `,
+    [CalendarCellState.Active]: _baseActiveCellStyles[Theme.Dark],
+    [CalendarCellState.Start]: cx(
+      _baseActiveCellStyles[Theme.Dark],
+      _baseRangeStartStyles,
+      css`
+        &:before {
+          background-color: ${palette.blue.dark3};
+        }
+      `,
+    ),
+    [CalendarCellState.End]: cx(
+      _baseActiveCellStyles[Theme.Dark],
+      _baseRangeEndStyles,
+      css`
+        &:after {
+          background-color: ${palette.blue.dark3};
+        }
+      `,
+    ),
+    [CalendarCellState.Range]: cx(
+      _baseRangeStartStyles,
+      _baseRangeEndStyles,
+      css`
+        &:before,
+        &:after {
+          background-color: ${palette.blue.dark3};
+        }
+      `,
+    ),
+  },
+};
+
+/** Styles for the current date */
+export const calendarCellCurrentStyles: ThemedStateStyles = {
+  [Theme.Light]: {
+    [CalendarCellState.Default]: css`
+      color: ${palette.blue.base};
+    `,
+    [CalendarCellState.Active]: css`
+      color: ${palette.white};
+    `,
+    [CalendarCellState.Start]: css`
+      color: ${palette.white};
+    `,
+    [CalendarCellState.End]: css`
+      color: ${palette.white};
+    `,
+    [CalendarCellState.Range]: css`
+      color: ${palette.blue.dark1};
+    `,
+    [CalendarCellState.Disabled]: css``, // No additional styles
+  },
+  [Theme.Dark]: {
+    [CalendarCellState.Default]: css`
+      color: ${palette.blue.light1};
+    `,
+    [CalendarCellState.Active]: css`
+      color: ${palette.black};
+    `,
+    [CalendarCellState.Start]: css`
+      color: ${palette.black};
+    `,
+    [CalendarCellState.End]: css`
+      color: ${palette.black};
+    `,
+    [CalendarCellState.Range]: css`
+      color: ${palette.blue.light1};
+    `,
+    [CalendarCellState.Disabled]: css``, // No additional styles
+  },
+};
+
+const _activeHoverStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.black};
+
+    & > .${indicatorClassName} {
+      background-color: ${palette.white};
+      outline: 1px solid ${palette.blue.dark1};
+    }
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.white};
+
+    & > .${indicatorClassName} {
+      background-color: ${palette.gray.dark3};
+      outline: 1px solid ${palette.blue.light1};
+    }
+  `,
+};
+
+/** Styles for a hovered date */
+export const calendarCellHighlightStyles: ThemedStateStyles = {
+  [Theme.Light]: {
+    [CalendarCellState.Default]: css`
+      color: ${palette.black};
+
+      & > .${indicatorClassName} {
+        background-color: ${palette.gray.light2};
+      }
+    `,
+    [CalendarCellState.Active]: _activeHoverStyles[Theme.Light],
+    [CalendarCellState.Start]: _activeHoverStyles[Theme.Light],
+    [CalendarCellState.End]: _activeHoverStyles[Theme.Light],
+    [CalendarCellState.Range]: cx(
+      _activeHoverStyles[Theme.Light],
+      css`
+        & > .${indicatorClassName} {
+          background-color: ${palette.blue.light3};
+        }
+      `,
+    ),
+    [CalendarCellState.Disabled]: css``, // No change
+  },
+  [Theme.Dark]: {
+    [CalendarCellState.Default]: css`
+      color: ${palette.gray.light2};
+
+      & > .${indicatorClassName} {
+        background-color: ${palette.gray.dark2};
+      }
+    `,
+    [CalendarCellState.Active]: _activeHoverStyles[Theme.Dark],
+    [CalendarCellState.Start]: _activeHoverStyles[Theme.Dark],
+    [CalendarCellState.End]: _activeHoverStyles[Theme.Dark],
+    [CalendarCellState.Range]: cx(
+      _activeHoverStyles[Theme.Dark],
+      css`
+        & > .${indicatorClassName} {
+          background-color: ${palette.blue.dark3};
+        }
+      `,
+    ),
+    [CalendarCellState.Disabled]: css``, // No change
+  },
+};
+
+export const currentStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.blue.base};
+    font-weight: ${fontWeights.bold};
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.blue.light1};
+    font-weight: ${fontWeights.bold};
+  `,
+};
+
+export const indicatorBaseStyles = css`
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  border-radius: 100%;
+  outline-offset: -1px;
+`;
+
+export const cellTextStyles = css`
+  position: relative;
+  z-index: 1;
+`;
+export const cellTextCurrentStyles = css`
+  font-weight: ${fontWeights.medium};
+
+  &:after {
+    position: absolute;
+    content: '';
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%);
+    height: 1px;
+    width: ${spacing[2]}px;
+    background-color: currentColor;
+    border-radius: 1px;
+  }
+`;
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
new file mode 100644
index 0000000000..2ec8ab8280
--- /dev/null
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { cx } from '@leafygreen-ui/emotion';
+import { useForwardedRef } from '@leafygreen-ui/hooks';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+
+import {
+  calendarCellCurrentStyles,
+  calendarCellHighlightStyles,
+  calendarCellStateStyles,
+  calendarCellStyles,
+  cellTextCurrentStyles,
+  cellTextStyles,
+  indicatorBaseStyles,
+  indicatorClassName,
+} from './CalendarCell.styles';
+import { CalendarCellProps, CalendarCellState } from './CalendarCell.types';
+
+export const CalendarCell = React.forwardRef<
+  HTMLTableCellElement,
+  CalendarCellProps
+>(
+  (
+    {
+      children,
+      state = CalendarCellState.Default,
+      isCurrent,
+      isHighlighted,
+      className,
+      ...rest
+    }: CalendarCellProps,
+    fwdRef,
+  ) => {
+    const ref = useForwardedRef(fwdRef, null);
+    const { theme } = useDarkMode();
+
+    return (
+      <td
+        ref={ref}
+        className={cx(
+          calendarCellStyles,
+
+          calendarCellStateStyles[theme][state],
+          {
+            [calendarCellCurrentStyles[theme][state]]: isCurrent,
+            [calendarCellHighlightStyles[theme][state]]: isHighlighted,
+          },
+          className,
+        )}
+        {...rest}
+      >
+        <div className={cx(indicatorBaseStyles, indicatorClassName)}></div>
+        <span
+          className={cx(cellTextStyles, {
+            [cellTextCurrentStyles]: isCurrent,
+          })}
+        >
+          {children}
+        </span>
+      </td>
+    );
+  },
+);
+
+CalendarCell.displayName = 'CalendarCell';
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
new file mode 100644
index 0000000000..26acc21e40
--- /dev/null
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
@@ -0,0 +1,26 @@
+export const CalendarCellState = {
+  Default: 'default',
+  Active: 'active',
+  Start: 'start',
+  End: 'end',
+  Range: 'range',
+  Disabled: 'disabled',
+} as const;
+
+export type CalendarCellState =
+  (typeof CalendarCellState)[keyof typeof CalendarCellState];
+
+export interface CalendarCellProps
+  extends React.HTMLProps<HTMLTableCellElement> {
+  /** The current state of the cell */
+  state: CalendarCellState;
+
+  /** Whether the cell represents the current date */
+  isCurrent?: boolean;
+
+  /**
+   * Whether the cell should display hovered/highlighted styles.
+   * This is used to programmatically set highlight when using keyboard navigation
+   */
+  isHighlighted?: boolean;
+}
diff --git a/packages/date-picker/src/CalendarGrid/CalendarGrid.spec.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.spec.tsx
similarity index 100%
rename from packages/date-picker/src/CalendarGrid/CalendarGrid.spec.tsx
rename to packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.spec.tsx
diff --git a/packages/date-picker/src/CalendarGrid/CalendarGrid.styles.ts b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts
similarity index 100%
rename from packages/date-picker/src/CalendarGrid/CalendarGrid.styles.ts
rename to packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts
diff --git a/packages/date-picker/src/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
similarity index 100%
rename from packages/date-picker/src/CalendarGrid/CalendarGrid.tsx
rename to packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
diff --git a/packages/date-picker/src/CalendarGrid/CalendarGrid.types.ts b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts
similarity index 100%
rename from packages/date-picker/src/CalendarGrid/CalendarGrid.types.ts
rename to packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts
diff --git a/packages/date-picker/src/CalendarCell/CalendarCell.styles.ts b/packages/date-picker/src/CalendarCell/CalendarCell.styles.ts
deleted file mode 100644
index 356c065c34..0000000000
--- a/packages/date-picker/src/CalendarCell/CalendarCell.styles.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { css } from '@leafygreen-ui/emotion';
-
-export const baseStyles = css``;
diff --git a/packages/date-picker/src/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/CalendarCell/CalendarCell.tsx
deleted file mode 100644
index 6767feb872..0000000000
--- a/packages/date-picker/src/CalendarCell/CalendarCell.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-
-// TODO: forwardRef
-export function CalendarCell({}) {
-  return <div>your content here</div>;
-}
-
-CalendarCell.displayName = 'CalendarCell';
diff --git a/packages/date-picker/src/CalendarCell/CalendarCell.types.ts b/packages/date-picker/src/CalendarCell/CalendarCell.types.ts
deleted file mode 100644
index c24ab046e9..0000000000
--- a/packages/date-picker/src/CalendarCell/CalendarCell.types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export interface CalendarCellProps {}
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index fede9497ec..a941e42c85 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -85,6 +85,8 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     const handleKeyDown: KeyboardEventHandler = ({ keyCode }) => {
       /** moves the focused segment left or right */
       const moveFocus = (dir: 'left' | 'right') => {
+        // TODO: check the position of the cursor before updating focus (see combobox)
+
         // get the currently focused element
         const focus = document.activeElement;
         const activeSegment = focus?.id;
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index 56bae4997a..018297bf52 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -36,9 +36,9 @@ const meta: StoryMetaType<typeof DatePickerInput, DatePickerContextProps> = {
       combineArgs: {
         darkMode: [false, true],
         value: [null, new Date('1993-12-26')],
-        size: Object.values(Size),
         dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
         timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
+        size: Object.values(Size),
       },
       excludeCombinations: [
         {

From b488edaa6692416268bbf5f06ff8389a69ef9950 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 1 Sep 2023 10:24:05 -0400
Subject: [PATCH 047/351] calendar grid

---
 packages/date-picker/package.json             |  3 +-
 .../Calendar/CalendarCell/CalendarCell.tsx    |  9 ++
 .../CalendarCell/CalendarCell.types.ts        |  2 +-
 .../CalendarGrid/CalendarGrid.stories.tsx     | 84 +++++++++++++++++++
 .../CalendarGrid/CalendarGrid.styles.ts       |  6 ++
 .../Calendar/CalendarGrid/CalendarGrid.tsx    | 53 +++++++++++-
 .../CalendarGrid/CalendarGrid.types.ts        | 26 +++++-
 .../src/Calendar/CalendarGrid/utils.ts        | 34 ++++++++
 yarn.lock                                     | 18 ++--
 9 files changed, 223 insertions(+), 12 deletions(-)
 create mode 100644 packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
 create mode 100644 packages/date-picker/src/Calendar/CalendarGrid/utils.ts

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index ad9b6b3cab..e60f61ff84 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -23,7 +23,8 @@
     "@leafygreen-ui/tokens": "^2.2.0",
     "@leafygreen-ui/typography": "^16.5.5",
     "date-fns": "^2.30.0",
-    "date-fns-tz": "^2.0.0"
+    "date-fns-tz": "^2.0.0",
+    "weekstart": "^2.0.0"
   },
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": "^3.1.6"
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
index 2ec8ab8280..384fb16502 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -34,6 +34,14 @@ export const CalendarCell = React.forwardRef<
     const ref = useForwardedRef(fwdRef, null);
     const { theme } = useDarkMode();
 
+    const isActive = (
+      [
+        CalendarCellState.Active,
+        CalendarCellState.Start,
+        CalendarCellState.End,
+      ] as Array<CalendarCellState>
+    ).includes(state);
+
     return (
       <td
         ref={ref}
@@ -47,6 +55,7 @@ export const CalendarCell = React.forwardRef<
           },
           className,
         )}
+        aria-selected={isActive}
         {...rest}
       >
         <div className={cx(indicatorBaseStyles, indicatorClassName)}></div>
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
index 26acc21e40..6d65d7b5ff 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
@@ -13,7 +13,7 @@ export type CalendarCellState =
 export interface CalendarCellProps
   extends React.HTMLProps<HTMLTableCellElement> {
   /** The current state of the cell */
-  state: CalendarCellState;
+  state?: CalendarCellState;
 
   /** Whether the cell represents the current date */
   isCurrent?: boolean;
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
new file mode 100644
index 0000000000..2d4750e1f9
--- /dev/null
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { StoryFn } from '@storybook/react';
+import { isToday } from 'date-fns';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../../DatePickerContext';
+import { CalendarCell } from '../CalendarCell/CalendarCell';
+
+import { CalendarGrid } from './CalendarGrid';
+
+const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
+  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
+    <DatePickerProvider
+      value={{
+        ...ctx?.args,
+      }}
+    >
+      <Story />
+    </DatePickerProvider>
+  </LeafyGreenProvider>
+);
+
+const meta: StoryMetaType<typeof CalendarGrid, DatePickerContextProps> = {
+  title: 'Components/DatePicker/CalendarGrid',
+  component: CalendarGrid,
+  parameters: {
+    default: 'Demo',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        dateFormat: ['en-us', 'iso8601', 'en-UK', 'de', 'fa-AF'],
+      },
+      decorator: ProviderWrapper,
+    },
+  },
+  decorators: [ProviderWrapper],
+  args: {},
+  argTypes: {
+    darkMode: { control: 'boolean' },
+    dateFormat: {
+      control: 'select',
+      options: ['en-us', 'iso8601', 'en-UK', 'de', 'fa-AF', 'en-MV'],
+    },
+  },
+};
+
+export default meta;
+
+export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
+  const month = new Date('2023-09-02');
+
+  const [hovered, setHovered] = useState<string | undefined>();
+
+  const handleHover = (id?: string) => () => {
+    setHovered(id);
+  };
+
+  return (
+    <CalendarGrid
+      {...props}
+      month={month}
+      onMouseLeave={handleHover(undefined)}
+    >
+      {(day, i) => (
+        <CalendarCell
+          key={i}
+          isCurrent={!!(day && isToday(day))}
+          isHighlighted={hovered ? hovered === day?.toISOString() : false}
+          onMouseEnter={handleHover(day?.toISOString())}
+          data-iso={day?.toISOString()}
+        >
+          {day?.getDate()}
+        </CalendarCell>
+      )}
+    </CalendarGrid>
+  );
+};
+
+export const Generated = () => {};
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts
index 356c065c34..ac75fd189a 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts
@@ -1,3 +1,9 @@
 import { css } from '@leafygreen-ui/emotion';
+import { fontWeights } from '@leafygreen-ui/tokens';
 
 export const baseStyles = css``;
+
+export const calendarHeaderCellStyles = css`
+  font-weight: ${fontWeights.regular};
+  text-transform: capitalize;
+`;
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index 21713d53d5..84eafe887c 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -1,8 +1,55 @@
 import React from 'react';
+import { range } from 'lodash';
+import { getWeekStartByLocale } from 'weekstart';
 
-// TODO: forwardRef
-export function CalendarGrid({}) {
-  return <div>your content here</div>;
+import { Disclaimer } from '@leafygreen-ui/typography';
+
+import { useDatePickerContext } from '../../DatePickerContext';
+
+import { calendarHeaderCellStyles } from './CalendarGrid.styles';
+import {
+  CalendarGridProps,
+  DaysOfWeek,
+  daysPerWeek,
+} from './CalendarGrid.types';
+import { getWeeksArray } from './utils';
+
+/**
+ * A simple table that renders the `CalendarCell` components passed as children
+ */
+export function CalendarGrid({
+  month = new Date(),
+  children,
+  ...rest
+}: CalendarGridProps) {
+  const { dateFormat } = useDatePickerContext();
+  const weekStartsOn = getWeekStartByLocale(dateFormat);
+  const weeks = getWeeksArray(month, dateFormat);
+
+  return (
+    <table {...rest}>
+      <thead>
+        <tr>
+          {range(daysPerWeek).map(i => {
+            const dayIndex = (i + weekStartsOn) % daysPerWeek;
+            const d = DaysOfWeek[dayIndex];
+            return (
+              <th key={d.short} abbr={d.long}>
+                <Disclaimer className={calendarHeaderCellStyles}>
+                  {d.short}
+                </Disclaimer>
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {weeks.map((week, w) => (
+          <tr key={w}>{week.map(children)}</tr>
+        ))}
+      </tbody>
+    </table>
+  );
 }
 
 CalendarGrid.displayName = 'CalendarGrid';
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts
index 29fbe0c40d..56a0b31a98 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts
@@ -1 +1,25 @@
-export interface CalendarGridProps {}
+export const daysPerWeek = 7 as const;
+// Note: no lightweight library (date-fns, day.js, @internationalized)
+// includes a similar enum
+export const DaysOfWeek = [
+  { long: 'Sunday', short: 'su' },
+  { long: 'Monday', short: 'mo' },
+  { long: 'Tuesday', short: 'tu' },
+  { long: 'Wednesday', short: 'we' },
+  { long: 'Thursday', short: 'th' },
+  { long: 'Friday', short: 'fr' },
+  { long: 'Saturday', short: 'sa' },
+] as const;
+
+export type DaysOfWeek = (typeof DaysOfWeek)[number];
+
+export interface CalendarGridProps
+  extends Omit<React.HTMLProps<HTMLTableElement>, 'children'> {
+  /**
+   * The month to display in the calendar grid
+   * @default {current month}
+   */
+  month: Date;
+
+  children: (day: Date | null, index: number) => React.ReactNode;
+}
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/utils.ts b/packages/date-picker/src/Calendar/CalendarGrid/utils.ts
new file mode 100644
index 0000000000..b1f917fa22
--- /dev/null
+++ b/packages/date-picker/src/Calendar/CalendarGrid/utils.ts
@@ -0,0 +1,34 @@
+import { getDay, getDaysInMonth, isFirstDayOfMonth, setDate } from 'date-fns';
+import { chunk, fill, range } from 'lodash';
+import { getWeekStartByLocale } from 'weekstart';
+
+import { daysPerWeek } from './CalendarGrid.types';
+
+export const getWeeksArray = (
+  month: Date,
+  locale: string,
+): Array<Array<Date | null>> => {
+  // If the provided date isn't the first, shift it
+  const firstOfMonth = isFirstDayOfMonth(month) ? month : setDate(month, 1);
+  // What day of the week do weeks start on for this locale? (Sun = 0)
+  const weekStartsOn = getWeekStartByLocale(locale);
+  // What day of the week does this month start on? (Sun = 0)
+  const startDayOfWeek = getDay(firstOfMonth);
+  // How many days in the month
+  const daysInMonth = getDaysInMonth(firstOfMonth);
+  // Shift the start column based on locale (weekStartsOn)
+  const startColumn =
+    (daysPerWeek + (startDayOfWeek - weekStartsOn)) % daysPerWeek;
+
+  // Create an array from 1 -> daysInMonth
+  const allDays: Array<Date | null> = range(daysInMonth).map(i =>
+    setDate(new Date(firstOfMonth), i + 1),
+  );
+  // splice in enough empty elements so that the first is in the right column
+  allDays.splice(0, 0, ...fill(range(startColumn), null));
+
+  // Break the array into chunks of 7
+  const weeks = chunk(allDays, daysPerWeek);
+
+  return weeks;
+};
diff --git a/yarn.lock b/yarn.lock
index 3d984e7fde..68160b23bc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4261,9 +4261,9 @@
     csstype "^3.0.2"
 
 "@types/react@^17.0.2":
-  version "17.0.62"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.62.tgz#2efe8ddf8533500ec44b1334dd1a97caa2f860e3"
-  integrity sha512-eANCyz9DG8p/Vdhr0ZKST8JV12PhH2ACCDYlFw6DIO+D+ca+uP4jtEDEpVqXZrh/uZdXQGwk7whJa3ah5DtyLw==
+  version "17.0.65"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.65.tgz#95f6a2ab61145ffb69129d07982d047f9e0870cd"
+  integrity sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -5533,9 +5533,9 @@ camelcase@^7.0.0:
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
 caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517:
-  version "1.0.30001519"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601"
-  integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==
+  version "1.0.30001525"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001525.tgz#d2e8fdec6116ffa36284ca2c33ef6d53612fe1c8"
+  integrity sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
@@ -13161,6 +13161,11 @@ webpack@5.88.0:
     watchpack "^2.4.0"
     webpack-sources "^3.2.3"
 
+weekstart@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/weekstart/-/weekstart-2.0.0.tgz#3925b0626b311b353097d81638bd0403a53d81f7"
+  integrity sha512-HjYc14IQUwDcnGICuc8tVtqAd6EFpoAQMqgrqcNtWWZB+F1b7iTq44GzwM1qvnH4upFgbhJsaNHuK93NOFheSg==
+
 whatwg-encoding@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz#e7635f597fd87020858626805a2729fa7698ac53"
@@ -13254,6 +13259,7 @@ wordwrap@^1.0.0:
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From b8d13c298cd0117b8a89d5ed12830b863cee1a8e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 1 Sep 2023 11:10:08 -0400
Subject: [PATCH 048/351] scaffold menu

---
 packages/date-picker/package.json             |  1 +
 .../Calendar/MenuWrapper/MenuWrapper.spec.tsx | 11 +++
 .../MenuWrapper/MenuWrapper.styles.ts         | 29 ++++++++
 .../src/Calendar/MenuWrapper/MenuWrapper.tsx  | 22 ++++++
 .../src/Calendar/MenuWrapper/index.ts         |  1 +
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 11 +++
 .../DatePickerMenu/DatePickerMenu.stories.tsx | 71 +++++++++++++++++++
 .../DatePickerMenu/DatePickerMenu.styles.ts   |  5 ++
 .../DatePickerMenu/DatePickerMenu.tsx         | 22 ++++++
 .../DatePickerMenu/DatePickerMenu.types.ts    | 24 +++++++
 .../src/DatePicker/DatePickerMenu/index.ts    |  3 +
 packages/date-picker/tsconfig.json            |  3 +
 yarn.lock                                     | 13 +---
 13 files changed, 205 insertions(+), 11 deletions(-)
 create mode 100644 packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx
 create mode 100644 packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.styles.ts
 create mode 100644 packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
 create mode 100644 packages/date-picker/src/Calendar/MenuWrapper/index.ts
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/index.ts

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index e60f61ff84..89504c2123 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -20,6 +20,7 @@
     "@leafygreen-ui/icon": "^11.23.0",
     "@leafygreen-ui/lib": "^11.0.0",
     "@leafygreen-ui/palette": "^4.0.7",
+    "@leafygreen-ui/popover": "^11.0.17",
     "@leafygreen-ui/tokens": "^2.2.0",
     "@leafygreen-ui/typography": "^16.5.5",
     "date-fns": "^2.30.0",
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx
new file mode 100644
index 0000000000..668d1123af
--- /dev/null
+++ b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { MenuWrapper } from '.';
+
+describe('packages/menu-wrapper', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.styles.ts b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.styles.ts
new file mode 100644
index 0000000000..a8d5e8ff51
--- /dev/null
+++ b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.styles.ts
@@ -0,0 +1,29 @@
+import { css, cx } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+import { spacing } from '@leafygreen-ui/tokens';
+
+const baseStyles = css`
+  padding: ${spacing[3]}px;
+  padding-top: ${spacing[4]}px;
+  border-radius: ${spacing[2] + spacing[1]}px;
+  outline: 1px solid;
+  outline-offset: -1px;
+`;
+
+export const menuStyles: Record<Theme, string> = {
+  [Theme.Light]: cx(
+    baseStyles,
+    css`
+      background-color: ${palette.white};
+      outline-color: ${palette.gray.light2};
+    `,
+  ),
+  [Theme.Dark]: cx(
+    baseStyles,
+    css`
+      background-color: ${palette.gray.dark3};
+      outline-color: ${palette.gray.dark2};
+    `,
+  ),
+};
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
new file mode 100644
index 0000000000..3c17df6ce1
--- /dev/null
+++ b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { cx } from '@leafygreen-ui/emotion';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import Popover, { PopoverProps } from '@leafygreen-ui/popover';
+
+import { menuStyles } from './MenuWrapper.styles';
+
+/**
+ * A styled popover
+ */
+export function MenuWrapper({ className, children, ...props }: PopoverProps) {
+  const { theme } = useDarkMode();
+
+  return (
+    <Popover className={cx(menuStyles[theme], className)} {...props}>
+      {children}
+    </Popover>
+  );
+}
+
+MenuWrapper.displayName = 'MenuWrapper';
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/index.ts b/packages/date-picker/src/Calendar/MenuWrapper/index.ts
new file mode 100644
index 0000000000..018de6fce3
--- /dev/null
+++ b/packages/date-picker/src/Calendar/MenuWrapper/index.ts
@@ -0,0 +1 @@
+export { MenuWrapper } from './MenuWrapper';
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
new file mode 100644
index 0000000000..e93ba90d1d
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { DatePickerMenu } from '.';
+
+describe('packages/date-picker-menu', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
new file mode 100644
index 0000000000..6a36a11b4c
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -0,0 +1,71 @@
+/* eslint-disable react/prop-types */
+import React, { useRef } from 'react';
+import { StoryFn } from '@storybook/react';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../../DatePickerContext';
+
+import { DatePickerMenu } from './DatePickerMenu';
+
+const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
+  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
+    <DatePickerProvider
+      value={{
+        ...ctx?.args,
+      }}
+    >
+      <Story />
+    </DatePickerProvider>
+  </LeafyGreenProvider>
+);
+
+const meta: StoryMetaType<typeof DatePickerMenu, DatePickerContextProps> = {
+  title: 'Components/DatePicker/DatePickerMenu',
+  component: DatePickerMenu,
+  decorators: [ProviderWrapper],
+  parameters: {
+    default: null,
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        value: [null, new Date('1993-12-26')],
+        dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
+        timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
+      },
+      excludeCombinations: [
+        {
+          timeZone: ['Europe/London', 'America/New_York', 'Asia/Seoul'],
+          value: null,
+        },
+      ],
+      decorator: ProviderWrapper,
+    },
+  },
+  args: {
+    dateFormat: 'en-UK',
+    timeZone: 'Europe/London',
+    isOpen: true,
+  },
+  argTypes: {
+    value: { control: 'date' },
+  },
+};
+
+export default meta;
+
+export const Basic: StoryFn<typeof DatePickerMenu> = props => {
+  const refEl = useRef<HTMLDivElement>(null);
+  return (
+    <>
+      <div ref={refEl}>refEl</div>
+      <DatePickerMenu refEl={refEl} {...props} />
+    </>
+  );
+};
+
+export const Generated = () => {};
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
new file mode 100644
index 0000000000..d287910fdf
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
@@ -0,0 +1,5 @@
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseMenuStyles = css`
+  position: relative;
+`;
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
new file mode 100644
index 0000000000..3bd305077f
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { MenuWrapper } from '../../Calendar/MenuWrapper';
+
+import { DatePickerMenuProps } from './DatePickerMenu.types';
+
+export function DatePickerMenu({
+  isOpen,
+  value,
+  month,
+  onMonthChange,
+  onCellClick,
+  ...rest
+}: DatePickerMenuProps) {
+  return (
+    <MenuWrapper active={isOpen} {...rest}>
+      content
+    </MenuWrapper>
+  );
+}
+
+DatePickerMenu.displayName = 'DatePickerMenu';
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
new file mode 100644
index 0000000000..968d1b546e
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
@@ -0,0 +1,24 @@
+import { PopoverProps } from '@leafygreen-ui/popover';
+import { PortalControlProps } from '@leafygreen-ui/popover';
+
+export type DatePickerMenuProps = PortalControlProps &
+  Pick<PopoverProps, 'refEl'> & {
+    /** Whether the calendar menu popover is open */
+    isOpen: boolean;
+
+    /** The value of the component */
+    value: Date | null;
+
+    /** The month to display in the calendar grid */
+    month: Date;
+    // highlight: ;
+
+    /**
+     * Callback fired when the date carets are clicked,
+     * or when the month/year dropdowns are modified
+     */
+    onMonthChange: (newMonth: Date) => void;
+
+    /** Callback fired when a cell is clicked */
+    onCellClick: (cellDate: Date) => void;
+  };
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/index.ts
new file mode 100644
index 0000000000..8170764b23
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/index.ts
@@ -0,0 +1,3 @@
+
+export  { DatePickerMenu } from './DatePickerMenu';
+export { DatePickerMenuProps } from './DatePickerMenu.types';
diff --git a/packages/date-picker/tsconfig.json b/packages/date-picker/tsconfig.json
index 47b5c95bab..26c3634cb4 100644
--- a/packages/date-picker/tsconfig.json
+++ b/packages/date-picker/tsconfig.json
@@ -33,6 +33,9 @@
     {
       "path": "../palette"
     },
+    {
+      "path": "../popover"
+    },
     {
       "path": "../tokens"
     },
diff --git a/yarn.lock b/yarn.lock
index 68160b23bc..c3020f2d8f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1406,7 +1406,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.1", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@7.22.10", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.1", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.22.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
   integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==
@@ -4260,15 +4260,6 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^17.0.2":
-  version "17.0.65"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.65.tgz#95f6a2ab61145ffb69129d07982d047f9e0870cd"
-  integrity sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
 "@types/resolve@1.20.2":
   version "1.20.2"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
@@ -5532,7 +5523,7 @@ camelcase@^7.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-7.0.1.tgz#f02e50af9fd7782bc8b88a3558c32fd3a388f048"
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
-caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517:
+caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517:
   version "1.0.30001525"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001525.tgz#d2e8fdec6116ffa36284ca2c33ef6d53612fe1c8"
   integrity sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==

From 60b84d4bfaf6905d5f58fa3a07b80c11a96a1092 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 1 Sep 2023 13:11:43 -0400
Subject: [PATCH 049/351] add contentClassName to popover

---
 packages/popover/src/Popover.tsx | 5 ++++-
 packages/popover/src/types.ts    | 7 ++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/popover/src/Popover.tsx b/packages/popover/src/Popover.tsx
index b0383e72d3..304c4f1488 100644
--- a/packages/popover/src/Popover.tsx
+++ b/packages/popover/src/Popover.tsx
@@ -74,6 +74,7 @@ function Popover({
   adjustOnMutation = false,
   children,
   className,
+  contentClassName,
   popoverZIndex,
   refEl,
   usePortal = true,
@@ -310,7 +311,9 @@ function Popover({
                   We create this inner node with a ref because placing it on its parent
                   creates an infinite loop in some cases when dynamic styles are applied.
                 */}
-              <div ref={setContentNode}>{renderedChildren}</div>
+              <div ref={setContentNode} className={contentClassName}>
+                {renderedChildren}
+              </div>
             </div>
           </Root>
         </>
diff --git a/packages/popover/src/types.ts b/packages/popover/src/types.ts
index fe84df63da..5783171235 100644
--- a/packages/popover/src/types.ts
+++ b/packages/popover/src/types.ts
@@ -121,10 +121,15 @@ export type PopoverProps = {
   active?: boolean;
 
   /**
-   * Class name applied to popover content container.
+   * Class name applied to popover container.
    */
   className?: string;
 
+  /**
+   * Class name applied to the popover content container
+   */
+  contentClassName?: string;
+
   /**
    * Determines the alignment of the popover content relative to the trigger element
    *

From 230cc2f1e68ccbfeda26e61f4aa5adca589024b6 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 1 Sep 2023 13:12:29 -0400
Subject: [PATCH 050/351] add contentClassName to popover

---
 packages/popover/src/Popover.tsx | 5 ++++-
 packages/popover/src/types.ts    | 7 ++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/popover/src/Popover.tsx b/packages/popover/src/Popover.tsx
index b0383e72d3..304c4f1488 100644
--- a/packages/popover/src/Popover.tsx
+++ b/packages/popover/src/Popover.tsx
@@ -74,6 +74,7 @@ function Popover({
   adjustOnMutation = false,
   children,
   className,
+  contentClassName,
   popoverZIndex,
   refEl,
   usePortal = true,
@@ -310,7 +311,9 @@ function Popover({
                   We create this inner node with a ref because placing it on its parent
                   creates an infinite loop in some cases when dynamic styles are applied.
                 */}
-              <div ref={setContentNode}>{renderedChildren}</div>
+              <div ref={setContentNode} className={contentClassName}>
+                {renderedChildren}
+              </div>
             </div>
           </Root>
         </>
diff --git a/packages/popover/src/types.ts b/packages/popover/src/types.ts
index fe84df63da..5783171235 100644
--- a/packages/popover/src/types.ts
+++ b/packages/popover/src/types.ts
@@ -121,10 +121,15 @@ export type PopoverProps = {
   active?: boolean;
 
   /**
-   * Class name applied to popover content container.
+   * Class name applied to popover container.
    */
   className?: string;
 
+  /**
+   * Class name applied to the popover content container
+   */
+  contentClassName?: string;
+
   /**
    * Determines the alignment of the popover content relative to the trigger element
    *

From 49d98ad3b555769965768c3174b449a591ff7a77 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 1 Sep 2023 13:13:20 -0400
Subject: [PATCH 051/351] Create funny-rivers-look.md

---
 .changeset/funny-rivers-look.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/funny-rivers-look.md

diff --git a/.changeset/funny-rivers-look.md b/.changeset/funny-rivers-look.md
new file mode 100644
index 0000000000..fc22c42a18
--- /dev/null
+++ b/.changeset/funny-rivers-look.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/popover': minor
+---
+
+Adds contentClassName to Popover to enable styling of Popover inner content wrapper

From d1ecaa9ccfd276ab0423cb4c6a2b0f86e4fd6aa6 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 1 Sep 2023 13:53:08 -0400
Subject: [PATCH 052/351] use createUniqueClassName

---
 packages/popover/src/Popover.tsx | 5 +++--
 packages/popover/src/types.ts    | 5 -----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/popover/src/Popover.tsx b/packages/popover/src/Popover.tsx
index 304c4f1488..9ce04f9640 100644
--- a/packages/popover/src/Popover.tsx
+++ b/packages/popover/src/Popover.tsx
@@ -14,7 +14,7 @@ import {
   usePopoverContext,
   usePopoverPortalContainer,
 } from '@leafygreen-ui/leafygreen-provider';
-import { consoleOnce } from '@leafygreen-ui/lib';
+import { consoleOnce, createUniqueClassName } from '@leafygreen-ui/lib';
 import Portal from '@leafygreen-ui/portal';
 import { transitionDuration } from '@leafygreen-ui/tokens';
 
@@ -43,6 +43,8 @@ const mutationOptions = {
   subtree: true,
 };
 
+export const contentClassName = createUniqueClassName('popover-content');
+
 /**
  *
  * React Component that handles positioning of content relative to another element.
@@ -74,7 +76,6 @@ function Popover({
   adjustOnMutation = false,
   children,
   className,
-  contentClassName,
   popoverZIndex,
   refEl,
   usePortal = true,
diff --git a/packages/popover/src/types.ts b/packages/popover/src/types.ts
index 5783171235..e46d0693b1 100644
--- a/packages/popover/src/types.ts
+++ b/packages/popover/src/types.ts
@@ -125,11 +125,6 @@ export type PopoverProps = {
    */
   className?: string;
 
-  /**
-   * Class name applied to the popover content container
-   */
-  contentClassName?: string;
-
   /**
    * Determines the alignment of the popover content relative to the trigger element
    *

From b627f40d0bad6ac669e00a698a1b8703d2011ecc Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Fri, 1 Sep 2023 13:54:53 -0400
Subject: [PATCH 053/351] Update funny-rivers-look.md

---
 .changeset/funny-rivers-look.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/funny-rivers-look.md b/.changeset/funny-rivers-look.md
index fc22c42a18..e29c13e2d6 100644
--- a/.changeset/funny-rivers-look.md
+++ b/.changeset/funny-rivers-look.md
@@ -2,4 +2,4 @@
 '@leafygreen-ui/popover': minor
 ---
 
-Adds contentClassName to Popover to enable styling of Popover inner content wrapper
+Exports a unique `contentClassName` from Popover to enable styling of Popover inner content wrapper

From 6d56e16ec361a2ef3e8800a33ac1807e05a3d6fc Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 1 Sep 2023 13:56:48 -0400
Subject: [PATCH 054/351] export from index

---
 packages/popover/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/popover/src/index.ts b/packages/popover/src/index.ts
index ac645ef7ef..e9773678b4 100644
--- a/packages/popover/src/index.ts
+++ b/packages/popover/src/index.ts
@@ -1,5 +1,5 @@
 import { getAlign, getJustify } from './Popover.testutils';
-export { default } from './Popover';
+export { contentClassName, default } from './Popover';
 export type { PortalControlProps } from './types';
 export type { ElementPosition, PopoverProps } from './types';
 export { Align, Justify } from './types';

From fa12d78a5c7b7462bcb8b948c16ba0f15649fefd Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 1 Sep 2023 14:46:19 -0400
Subject: [PATCH 055/351] Builds calendar menu

---
 packages/date-picker/package.json             |   3 +
 .../src/Calendar/CalendarCell/index.ts        |   5 +
 .../Calendar/CalendarGrid/CalendarGrid.tsx    |   6 +-
 .../CalendarGrid/CalendarGrid.types.ts        |   3 +-
 .../src/Calendar/CalendarGrid/index.ts        |   1 +
 .../MenuWrapper/MenuWrapper.styles.ts         |   3 +
 .../DatePickerMenu/DatePickerMenu.stories.tsx |  14 +-
 .../DatePickerMenu/DatePickerMenu.styles.ts   |  30 +++-
 .../DatePickerMenu/DatePickerMenu.tsx         | 138 +++++++++++++++++-
 .../DatePickerContext.types.ts                |   8 +-
 packages/date-picker/src/constants.ts         |   9 ++
 .../utils/getMonthName/getMonthName.spec.ts   |  40 +++++
 .../src/utils/getMonthName/index.ts           |  13 ++
 .../src/utils/isCurrentDay/index.ts           |   5 +
 packages/date-picker/tsconfig.json            |   6 +
 packages/popover/src/Popover.tsx              |   1 -
 yarn.lock                                     |  13 +-
 17 files changed, 285 insertions(+), 13 deletions(-)
 create mode 100644 packages/date-picker/src/Calendar/CalendarCell/index.ts
 create mode 100644 packages/date-picker/src/Calendar/CalendarGrid/index.ts
 create mode 100644 packages/date-picker/src/constants.ts
 create mode 100644 packages/date-picker/src/utils/getMonthName/getMonthName.spec.ts
 create mode 100644 packages/date-picker/src/utils/getMonthName/index.ts
 create mode 100644 packages/date-picker/src/utils/isCurrentDay/index.ts

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 89504c2123..31de31ac43 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -18,13 +18,16 @@
     "@leafygreen-ui/emotion": "^4.0.7",
     "@leafygreen-ui/hooks": "^8.0.0",
     "@leafygreen-ui/icon": "^11.23.0",
+    "@leafygreen-ui/icon-button": "^15.0.17",
     "@leafygreen-ui/lib": "^11.0.0",
     "@leafygreen-ui/palette": "^4.0.7",
     "@leafygreen-ui/popover": "^11.0.17",
+    "@leafygreen-ui/select": "^10.3.15",
     "@leafygreen-ui/tokens": "^2.2.0",
     "@leafygreen-ui/typography": "^16.5.5",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
+    "polished": "^4.2.2",
     "weekstart": "^2.0.0"
   },
   "peerDependencies": {
diff --git a/packages/date-picker/src/Calendar/CalendarCell/index.ts b/packages/date-picker/src/Calendar/CalendarCell/index.ts
new file mode 100644
index 0000000000..901e7b4b2b
--- /dev/null
+++ b/packages/date-picker/src/Calendar/CalendarCell/index.ts
@@ -0,0 +1,5 @@
+export { CalendarCell } from './CalendarCell';
+export {
+  type CalendarCellProps,
+  CalendarCellState,
+} from './CalendarCell.types';
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index 84eafe887c..7e3f3d58f8 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -45,7 +45,11 @@ export function CalendarGrid({
       </thead>
       <tbody>
         {weeks.map((week, w) => (
-          <tr key={w}>{week.map(children)}</tr>
+          <tr key={w}>
+            {week.map((day, d) => {
+              return day ? children(day, w * daysPerWeek + d) : <td></td>;
+            })}
+          </tr>
         ))}
       </tbody>
     </table>
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts
index 56a0b31a98..acd9bf2e8d 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts
@@ -1,4 +1,5 @@
 export const daysPerWeek = 7 as const;
+
 // Note: no lightweight library (date-fns, day.js, @internationalized)
 // includes a similar enum
 export const DaysOfWeek = [
@@ -21,5 +22,5 @@ export interface CalendarGridProps
    */
   month: Date;
 
-  children: (day: Date | null, index: number) => React.ReactNode;
+  children: (day: Date, index: number) => React.ReactNode;
 }
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/index.ts b/packages/date-picker/src/Calendar/CalendarGrid/index.ts
new file mode 100644
index 0000000000..5ce25f839c
--- /dev/null
+++ b/packages/date-picker/src/Calendar/CalendarGrid/index.ts
@@ -0,0 +1 @@
+export { CalendarGrid } from './CalendarGrid';
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.styles.ts b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.styles.ts
index a8d5e8ff51..8ae6e041d5 100644
--- a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.styles.ts
+++ b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.styles.ts
@@ -1,3 +1,5 @@
+import { transparentize } from 'polished';
+
 import { css, cx } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
@@ -9,6 +11,7 @@ const baseStyles = css`
   border-radius: ${spacing[2] + spacing[1]}px;
   outline: 1px solid;
   outline-offset: -1px;
+  box-shadow: 0 4px 7px ${transparentize(0.85, palette.black)};
 `;
 
 export const menuStyles: Record<Theme, string> = {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 6a36a11b4c..23e80f3ef7 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { StoryFn } from '@storybook/react';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
@@ -59,11 +59,21 @@ const meta: StoryMetaType<typeof DatePickerMenu, DatePickerContextProps> = {
 export default meta;
 
 export const Basic: StoryFn<typeof DatePickerMenu> = props => {
+  const [value, setValue] = useState<Date | null>(new Date('2023-09-11'));
+  const [month, setMonth] = useState<Date>(new Date('2023-09-11'));
+
   const refEl = useRef<HTMLDivElement>(null);
   return (
     <>
       <div ref={refEl}>refEl</div>
-      <DatePickerMenu refEl={refEl} {...props} />
+      <DatePickerMenu
+        refEl={refEl}
+        {...props}
+        value={value}
+        month={month}
+        onCellClick={setValue}
+        onMonthChange={newMonth => setMonth(newMonth)}
+      />
     </>
   );
 };
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
index d287910fdf..a4ba0f5a67 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
@@ -1,5 +1,31 @@
 import { css } from '@leafygreen-ui/emotion';
+import { contentClassName } from '@leafygreen-ui/popover';
+import { spacing } from '@leafygreen-ui/tokens';
 
-export const baseMenuStyles = css`
-  position: relative;
+export const menuWrapperStyles = css`
+  min-width: 265px; // width of "September" select trigger
+
+  & > .${contentClassName} {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+`;
+
+export const menuHeaderStyles = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-bottom: ${spacing[3]}px;
+`;
+
+export const menuHeaderSelectContainerStyles = css`
+  display: flex;
+  align-items: center;
+  gap: ${spacing[1]}px;
+`;
+
+export const menuCalendarGridStyles = css`
+  margin: auto;
 `;
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 3bd305077f..2c9e5cad13 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -1,9 +1,36 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {
+  getMonth,
+  getYear,
+  isSameDay,
+  isToday,
+  isWithinInterval,
+  setMonth,
+  setYear,
+} from 'date-fns';
+import { range } from 'lodash';
 
+import Icon from '@leafygreen-ui/icon';
+import IconButton from '@leafygreen-ui/icon-button';
+import { DropdownWidthBasis, Option, Select } from '@leafygreen-ui/select';
+
+import { CalendarCell, CalendarCellState } from '../../Calendar/CalendarCell';
+import { CalendarGrid } from '../../Calendar/CalendarGrid';
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
+import { Months } from '../../constants';
+import { useDatePickerContext } from '../../DatePickerContext';
 
+import {
+  menuCalendarGridStyles,
+  menuHeaderSelectContainerStyles,
+  menuHeaderStyles,
+  menuWrapperStyles,
+} from './DatePickerMenu.styles';
 import { DatePickerMenuProps } from './DatePickerMenu.types';
 
+const nullIsSameDay = (d1?: Date | null, d2?: Date | null) =>
+  !!(d1 && d2 && isSameDay(d1, d2));
+
 export function DatePickerMenu({
   isOpen,
   value,
@@ -12,9 +39,114 @@ export function DatePickerMenu({
   onCellClick,
   ...rest
 }: DatePickerMenuProps) {
+  const { min, max } = useDatePickerContext();
+  const [highlight, setHighlight] = useState<Date | null>(null);
+
+  const yearOptions = range(getYear(min), getYear(max));
+
+  const getCellState = (cellDay: Date | null) => {
+    if (
+      cellDay &&
+      isWithinInterval(cellDay, {
+        start: new Date(min) || cellDay,
+        end: new Date(max) || cellDay,
+      })
+    ) {
+      if (nullIsSameDay(cellDay, value)) {
+        return CalendarCellState.Active;
+      }
+
+      return CalendarCellState.Default;
+    }
+
+    return CalendarCellState.Disabled;
+  };
+
   return (
-    <MenuWrapper active={isOpen} {...rest}>
-      content
+    <MenuWrapper active={isOpen} className={menuWrapperStyles} {...rest}>
+      {/* TODO: component-ize this */}
+      <div className={menuHeaderStyles}>
+        <IconButton
+          aria-label="Previous month"
+          onClick={() => {
+            onMonthChange(setMonth(month, getMonth(month) - 1));
+          }}
+        >
+          <Icon glyph="ChevronLeft" />
+        </IconButton>
+        <div className={menuHeaderSelectContainerStyles}>
+          <Select
+            size="xsmall"
+            aria-label="Select month"
+            allowDeselect={false}
+            value={month.getMonth().toString()}
+            dropdownWidthBasis={DropdownWidthBasis.Option}
+            onChange={m => {
+              onMonthChange(setMonth(month, Number(m)));
+            }}
+          >
+            {Months.map((m, i) => (
+              <Option value={i.toString()} key={m.short}>
+                {m.long}
+              </Option>
+            ))}
+          </Select>
+          <Select
+            size="xsmall"
+            aria-label="Select year"
+            allowDeselect={false}
+            value={month.getFullYear().toString()}
+            dropdownWidthBasis={DropdownWidthBasis.Option}
+            onChange={y => {
+              onMonthChange(setYear(month, Number(y)));
+            }}
+          >
+            {yearOptions.map(y => (
+              <Option value={y.toString()} key={y}>
+                {y}
+              </Option>
+            ))}
+          </Select>
+        </div>
+        <IconButton
+          aria-label="Next month"
+          onClick={() => {
+            onMonthChange(setMonth(month, getMonth(month) + 1));
+          }}
+        >
+          <Icon glyph="ChevronRight" />
+        </IconButton>
+      </div>
+
+      <CalendarGrid
+        month={month}
+        className={menuCalendarGridStyles}
+        onMouseLeave={() => setHighlight(null)}
+      >
+        {day => (
+          <CalendarCell
+            isHighlighted={nullIsSameDay(day, highlight)}
+            isCurrent={isToday(day)}
+            state={getCellState(day)}
+            onMouseEnter={() => setHighlight(day)}
+            onClick={() => onCellClick(day)}
+          >
+            {day?.getDate()}
+          </CalendarCell>
+        )}
+      </CalendarGrid>
+
+      {/* DEBUG */}
+      {/* <div>
+        <small>Month: </small>
+        <code>
+          {getMonth(month) + 1}/{getYear(month)}
+        </code>
+      </div>
+      <div>
+        <small>Selected: </small>
+        <code>{value?.toDateString()}</code>
+      </div> */}
     </MenuWrapper>
   );
 }
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
index 76f03eefb5..3ff57c5587 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
@@ -1,3 +1,9 @@
 import { BaseDatePickerProps } from 'src/types';
 
-export interface DatePickerContextProps extends Required<BaseDatePickerProps> {}
+export interface DatePickerContextProps extends Required<BaseDatePickerProps> {
+  /** The earliest date accepted */
+  min: Date;
+
+  /** The latest date accepted */
+  max: Date;
+}
diff --git a/packages/date-picker/src/constants.ts b/packages/date-picker/src/constants.ts
new file mode 100644
index 0000000000..088976c92a
--- /dev/null
+++ b/packages/date-picker/src/constants.ts
@@ -0,0 +1,9 @@
+import { range } from 'lodash';
+
+import { getMonthName } from './utils/getMonthName';
+
+// Compute the long & short form of each month
+export const Months: Array<{
+  long: string;
+  short: string;
+}> = range(12).map(m => getMonthName(m));
diff --git a/packages/date-picker/src/utils/getMonthName/getMonthName.spec.ts b/packages/date-picker/src/utils/getMonthName/getMonthName.spec.ts
new file mode 100644
index 0000000000..6844f0e386
--- /dev/null
+++ b/packages/date-picker/src/utils/getMonthName/getMonthName.spec.ts
@@ -0,0 +1,40 @@
+import { getMonthName } from '.';
+
+describe('packages/date-picker/utils/getMonthName', () => {
+  test('Jan', () => {
+    expect(getMonthName(0)).toEqual('January');
+  });
+  test('Feb', () => {
+    expect(getMonthName(0)).toEqual('February');
+  });
+  test('Mar', () => {
+    expect(getMonthName(0)).toEqual('March');
+  });
+  test('Apr', () => {
+    expect(getMonthName(0)).toEqual('April');
+  });
+  test('May', () => {
+    expect(getMonthName(0)).toEqual('May');
+  });
+  test('Jun', () => {
+    expect(getMonthName(0)).toEqual('June');
+  });
+  test('Jul', () => {
+    expect(getMonthName(0)).toEqual('July');
+  });
+  test('Aug', () => {
+    expect(getMonthName(0)).toEqual('August');
+  });
+  test('Sep', () => {
+    expect(getMonthName(0)).toEqual('September');
+  });
+  test('Oct', () => {
+    expect(getMonthName(0)).toEqual('October');
+  });
+  test('Nov', () => {
+    expect(getMonthName(0)).toEqual('November');
+  });
+  test('Dec', () => {
+    expect(getMonthName(0)).toEqual('December');
+  });
+});
diff --git a/packages/date-picker/src/utils/getMonthName/index.ts b/packages/date-picker/src/utils/getMonthName/index.ts
new file mode 100644
index 0000000000..338ce2d6cb
--- /dev/null
+++ b/packages/date-picker/src/utils/getMonthName/index.ts
@@ -0,0 +1,13 @@
+import { padStart } from 'lodash';
+
+/**
+ * Returns the month name from a given index and optional locale
+ */
+export const getMonthName = (monthIndex: number, locale = 'default') => {
+  const str = `2023-${padStart((monthIndex + 1).toString(), 2, '0')}-15`;
+  const month = new Date(str);
+  return {
+    long: month.toLocaleString(locale, { month: 'long' }),
+    short: month.toLocaleString(locale, { month: 'short' }),
+  };
+};
diff --git a/packages/date-picker/src/utils/isCurrentDay/index.ts b/packages/date-picker/src/utils/isCurrentDay/index.ts
new file mode 100644
index 0000000000..1ef766cc16
--- /dev/null
+++ b/packages/date-picker/src/utils/isCurrentDay/index.ts
@@ -0,0 +1,5 @@
+import { isToday } from 'date-fns';
+
+export const isCurrentDay = (day?: Date | null): day is Date => {
+  return !!(day && isToday(day));
+};
diff --git a/packages/date-picker/tsconfig.json b/packages/date-picker/tsconfig.json
index 26c3634cb4..84a6d55723 100644
--- a/packages/date-picker/tsconfig.json
+++ b/packages/date-picker/tsconfig.json
@@ -24,6 +24,9 @@
     {
       "path": "../icon"
     },
+    {
+      "path": "../icon-button"
+    },
     {
       "path": "../leafygreen-provider"
     },
@@ -36,6 +39,9 @@
     {
       "path": "../popover"
     },
+    {
+      "path": "../select"
+    },
     {
       "path": "../tokens"
     },
diff --git a/packages/popover/src/Popover.tsx b/packages/popover/src/Popover.tsx
index f7111b9863..9ce04f9640 100644
--- a/packages/popover/src/Popover.tsx
+++ b/packages/popover/src/Popover.tsx
@@ -76,7 +76,6 @@ function Popover({
   adjustOnMutation = false,
   children,
   className,
-  contentClassName,
   popoverZIndex,
   refEl,
   usePortal = true,
diff --git a/yarn.lock b/yarn.lock
index c3020f2d8f..68160b23bc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1406,7 +1406,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@7.22.10", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.1", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.1", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.22.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
   integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==
@@ -4260,6 +4260,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^17.0.2":
+  version "17.0.65"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.65.tgz#95f6a2ab61145ffb69129d07982d047f9e0870cd"
+  integrity sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.20.2":
   version "1.20.2"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
@@ -5523,7 +5532,7 @@ camelcase@^7.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-7.0.1.tgz#f02e50af9fd7782bc8b88a3558c32fd3a388f048"
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
-caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517:
+caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517:
   version "1.0.30001525"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001525.tgz#d2e8fdec6116ffa36284ca2c33ef6d53612fe1c8"
   integrity sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==

From bde9020d2041ad046180309295bad10c514b4e48 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 1 Sep 2023 15:49:09 -0400
Subject: [PATCH 056/351] creates datePickerMenuHeader

---
 .../DatePickerMenu/DatePickerMenu.stories.tsx |   2 +
 .../DatePickerMenu/DatePickerMenu.tsx         |  98 +---------------
 .../DatePickerMenuHeader/index.tsx            | 111 ++++++++++++++++++
 .../DatePickerContext/DatePickerContext.tsx   |  23 +++-
 .../DatePickerContext.types.ts                |   2 +
 5 files changed, 141 insertions(+), 95 deletions(-)
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 23e80f3ef7..24a3dfc271 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -50,6 +50,8 @@ const meta: StoryMetaType<typeof DatePickerMenu, DatePickerContextProps> = {
     dateFormat: 'en-UK',
     timeZone: 'Europe/London',
     isOpen: true,
+    min: new Date('1996-10-14'),
+    max: new Date('2026-10-14'),
   },
   argTypes: {
     value: { control: 'date' },
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 2c9e5cad13..c64e51b8f5 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -1,32 +1,17 @@
 import React, { useState } from 'react';
-import {
-  getMonth,
-  getYear,
-  isSameDay,
-  isToday,
-  isWithinInterval,
-  setMonth,
-  setYear,
-} from 'date-fns';
-import { range } from 'lodash';
-
-import Icon from '@leafygreen-ui/icon';
-import IconButton from '@leafygreen-ui/icon-button';
-import { DropdownWidthBasis, Option, Select } from '@leafygreen-ui/select';
+import { isSameDay, isToday } from 'date-fns';
 
 import { CalendarCell, CalendarCellState } from '../../Calendar/CalendarCell';
 import { CalendarGrid } from '../../Calendar/CalendarGrid';
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
-import { Months } from '../../constants';
 import { useDatePickerContext } from '../../DatePickerContext';
 
 import {
   menuCalendarGridStyles,
-  menuHeaderSelectContainerStyles,
-  menuHeaderStyles,
   menuWrapperStyles,
 } from './DatePickerMenu.styles';
 import { DatePickerMenuProps } from './DatePickerMenu.types';
+import { DatePickerMenuHeader } from './DatePickerMenuHeader';
 
 const nullIsSameDay = (d1?: Date | null, d2?: Date | null) =>
   !!(d1 && d2 && isSameDay(d1, d2));
@@ -39,19 +24,11 @@ export function DatePickerMenu({
   onCellClick,
   ...rest
 }: DatePickerMenuProps) {
-  const { min, max } = useDatePickerContext();
+  const { isInRange } = useDatePickerContext();
   const [highlight, setHighlight] = useState<Date | null>(null);
 
-  const yearOptions = range(getYear(min), getYear(max));
-
   const getCellState = (cellDay: Date | null) => {
-    if (
-      cellDay &&
-      isWithinInterval(cellDay, {
-        start: new Date(min) || cellDay,
-        end: new Date(max) || cellDay,
-      })
-    ) {
+    if (isInRange(cellDay)) {
       if (nullIsSameDay(cellDay, value)) {
         return CalendarCellState.Active;
       }
@@ -64,60 +41,7 @@ export function DatePickerMenu({
 
   return (
     <MenuWrapper active={isOpen} className={menuWrapperStyles} {...rest}>
-      {/* TODO: component-ize this */}
-      <div className={menuHeaderStyles}>
-        <IconButton
-          aria-label="Previous month"
-          onClick={() => {
-            onMonthChange(setMonth(month, getMonth(month) - 1));
-          }}
-        >
-          <Icon glyph="ChevronLeft" />
-        </IconButton>
-        <div className={menuHeaderSelectContainerStyles}>
-          <Select
-            size="xsmall"
-            aria-label="Select month"
-            allowDeselect={false}
-            value={month.getMonth().toString()}
-            dropdownWidthBasis={DropdownWidthBasis.Option}
-            onChange={m => {
-              onMonthChange(setMonth(month, Number(m)));
-            }}
-          >
-            {Months.map((m, i) => (
-              <Option value={i.toString()} key={m.short}>
-                {m.long}
-              </Option>
-            ))}
-          </Select>
-          <Select
-            size="xsmall"
-            aria-label="Select year"
-            allowDeselect={false}
-            value={month.getFullYear().toString()}
-            dropdownWidthBasis={DropdownWidthBasis.Option}
-            onChange={y => {
-              onMonthChange(setYear(month, Number(y)));
-            }}
-          >
-            {yearOptions.map(y => (
-              <Option value={y.toString()} key={y}>
-                {y}
-              </Option>
-            ))}
-          </Select>
-        </div>
-        <IconButton
-          aria-label="Next month"
-          onClick={() => {
-            onMonthChange(setMonth(month, getMonth(month) + 1));
-          }}
-        >
-          <Icon glyph="ChevronRight" />
-        </IconButton>
-      </div>
-
+      <DatePickerMenuHeader month={month} onMonthChange={onMonthChange} />
       <CalendarGrid
         month={month}
         className={menuCalendarGridStyles}
@@ -135,18 +59,6 @@ export function DatePickerMenu({
           </CalendarCell>
         )}
       </CalendarGrid>
-
-      {/* DEBUG */}
-      {/* <div>
-        <small>Month: </small>
-        <code>
-          {getMonth(month) + 1}/{getYear(month)}
-        </code>
-      </div>
-      <div>
-        <small>Selected: </small>
-        <code>{value?.toDateString()}</code>
-      </div> */}
     </MenuWrapper>
   );
 }
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
new file mode 100644
index 0000000000..9f1504080d
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import {
+  getMonth,
+  getYear,
+  isBefore,
+  isSameMonth,
+  setMonth,
+  setYear,
+} from 'date-fns';
+import { range } from 'lodash';
+
+import Icon from '@leafygreen-ui/icon';
+import IconButton from '@leafygreen-ui/icon-button';
+import { DropdownWidthBasis, Option, Select } from '@leafygreen-ui/select';
+
+import { Months } from '../../../constants';
+import { useDatePickerContext } from '../../../DatePickerContext';
+import {
+  menuHeaderSelectContainerStyles,
+  menuHeaderStyles,
+} from '../DatePickerMenu.styles';
+import { DatePickerMenuProps } from '../DatePickerMenu.types';
+
+type DatePickerMenuHeaderProps = Pick<
+  DatePickerMenuProps,
+  'month' | 'onMonthChange'
+>;
+
+export const DatePickerMenuHeader = ({
+  month,
+  onMonthChange,
+}: DatePickerMenuHeaderProps) => {
+  const { min, max, isInRange } = useDatePickerContext();
+
+  const yearOptions = range(getYear(min), getYear(max) + 1);
+
+  const updateMonth = (newMonth: Date) => {
+    // TODO: may need to update this function to check if the months are in range
+    // (could cause errors when the min date is near the end of the month)
+    if (isInRange(newMonth)) {
+      onMonthChange(newMonth);
+    } else if (isBefore(newMonth, min)) {
+      // if the selected month is not in range,
+      // set the month to the first or last possible month
+      onMonthChange(min);
+    } else {
+      onMonthChange(max);
+    }
+  };
+
+  return (
+    <div className={menuHeaderStyles}>
+      <IconButton
+        aria-label="Previous month"
+        disabled={isSameMonth(month, min)}
+        onClick={() => {
+          const newMonth = setMonth(month, getMonth(month) - 1);
+          updateMonth(newMonth);
+        }}
+      >
+        <Icon glyph="ChevronLeft" />
+      </IconButton>
+      <div className={menuHeaderSelectContainerStyles}>
+        <Select
+          size="xsmall"
+          aria-label="Select month"
+          allowDeselect={false}
+          value={month.getMonth().toString()}
+          dropdownWidthBasis={DropdownWidthBasis.Option}
+          onChange={m => {
+            const newMonth = setMonth(month, Number(m));
+            updateMonth(newMonth);
+          }}
+        >
+          {Months.map((m, i) => (
+            <Option value={i.toString()} key={m.short}>
+              {m.long}
+            </Option>
+          ))}
+        </Select>
+        <Select
+          size="xsmall"
+          aria-label="Select year"
+          allowDeselect={false}
+          value={month.getFullYear().toString()}
+          dropdownWidthBasis={DropdownWidthBasis.Option}
+          onChange={y => {
+            const newMonth = setYear(month, Number(y));
+            updateMonth(newMonth);
+          }}
+        >
+          {yearOptions.map(y => (
+            <Option value={y.toString()} key={y}>
+              {y}
+            </Option>
+          ))}
+        </Select>
+      </div>
+      <IconButton
+        aria-label="Next month"
+        disabled={isSameMonth(month, max)}
+        onClick={() => {
+          const newMonth = setMonth(month, getMonth(month) + 1);
+          updateMonth(newMonth);
+        }}
+      >
+        <Icon glyph="ChevronRight" />
+      </IconButton>
+    </div>
+  );
+};
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index 53f7ecd80e..55171855c8 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { createContext, PropsWithChildren, useContext } from 'react';
+import { isDate, isWithinInterval } from 'date-fns';
 
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
@@ -11,6 +12,7 @@ export const defaultDatePickerContext: DatePickerContextProps = {
   timeZone: 'America/New_York',
   min: new Date('12-31-1969'),
   max: new Date('01-19-2038'),
+  isInRange: () => true,
   disabled: false,
   size: Size.Default,
   state: 'unset',
@@ -26,9 +28,26 @@ export const DatePickerProvider = ({
   children,
   value,
 }: PropsWithChildren<{ value: DatePickerContextProps }>) => {
-  const providerValue = { ...defaultDatePickerContext, ...value };
+  const providerValue = {
+    ...defaultDatePickerContext,
+    ...value,
+  };
+
+  const isInRange = (d?: Date | null): boolean =>
+    !!(
+      d &&
+      isWithinInterval(d, {
+        start: isDate(providerValue.min)
+          ? providerValue.min
+          : new Date(providerValue.min),
+        end: isDate(providerValue.max)
+          ? providerValue.max
+          : new Date(providerValue.max),
+      })
+    );
+
   return (
-    <DatePickerContext.Provider value={providerValue}>
+    <DatePickerContext.Provider value={{ ...providerValue, isInRange }}>
       {children}
     </DatePickerContext.Provider>
   );
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
index 3ff57c5587..905f09616f 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
@@ -6,4 +6,6 @@ export interface DatePickerContextProps extends Required<BaseDatePickerProps> {
 
   /** The latest date accepted */
   max: Date;
+
+  isInRange: (d?: Date | null) => boolean;
 }

From cac81d19c972d690cf7b81449169d5085f77c21d Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 1 Sep 2023 18:15:27 -0400
Subject: [PATCH 057/351] Date Picker main component

---
 .../src/Calendar/MenuWrapper/MenuWrapper.tsx  | 20 ++--
 .../DateInput/DateInputBox/DateInputBox.tsx   | 14 +--
 .../DateInputBox/DateInputBox.types.ts        | 11 +--
 .../DateInput/DateInputBox/useDateSegments.ts |  1 +
 .../DateInputWrapper/DateInputWrapper.tsx     |  3 +
 .../DateInputWrapper.types.ts                 |  4 +
 .../date-picker/src/DatePicker.stories.tsx    | 13 ---
 .../src/DatePicker/DatePicker.stories.tsx     | 65 ++++++++++++
 .../date-picker/src/DatePicker/DatePicker.tsx | 99 ++++++++++++++++++-
 .../src/DatePicker/DatePicker.types.ts        | 16 +--
 .../DatePickerInput/DatePickerInput.tsx       | 58 ++++++-----
 .../DatePickerInput/DatePickerInput.types.ts  |  6 +-
 .../DatePickerMenu/DatePickerMenu.stories.tsx |  2 +-
 .../DatePickerMenu/DatePickerMenu.styles.ts   | 14 ++-
 .../DatePickerMenu/DatePickerMenu.tsx         | 98 ++++++++++--------
 .../DatePickerMenuHeader/index.tsx            |  3 +
 .../DatePickerContext/DatePickerContext.tsx   | 24 +++--
 .../DatePickerContext.types.ts                |  9 ++
 .../src/utils/newDateFromSegments/index.ts    |  2 +-
 .../newDateFromSegments.spec.ts               | 23 +++++
 packages/date-picker/src/utils/toDate.ts      | 12 +++
 21 files changed, 364 insertions(+), 133 deletions(-)
 delete mode 100644 packages/date-picker/src/DatePicker.stories.tsx
 create mode 100644 packages/date-picker/src/DatePicker/DatePicker.stories.tsx
 create mode 100644 packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts
 create mode 100644 packages/date-picker/src/utils/toDate.ts

diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
index 3c17df6ce1..1443a7b35d 100644
--- a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
+++ b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
@@ -9,14 +9,16 @@ import { menuStyles } from './MenuWrapper.styles';
 /**
  * A styled popover
  */
-export function MenuWrapper({ className, children, ...props }: PopoverProps) {
-  const { theme } = useDarkMode();
+export const MenuWrapper = forwardRef(
+  ({ className, children, ...props }: PopoverProps) => {
+    const { theme } = useDarkMode();
 
-  return (
-    <Popover className={cx(menuStyles[theme], className)} {...props}>
-      {children}
-    </Popover>
-  );
-}
+    return (
+      <Popover className={cx(menuStyles[theme], className)} {...props}>
+        {children}
+      </Popover>
+    );
+  },
+);
 
 MenuWrapper.displayName = 'MenuWrapper';
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index a941e42c85..c2d212b203 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -1,5 +1,6 @@
 import React, { KeyboardEventHandler } from 'react';
 import { isSameDay } from 'date-fns';
+import { zonedTimeToUtc } from 'date-fns-tz';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useDynamicRefs, useForwardedRef } from '@leafygreen-ui/hooks';
@@ -8,7 +9,6 @@ import { keyMap } from '@leafygreen-ui/lib';
 import { useDatePickerContext } from '../../DatePickerContext';
 import { isValidSegmentName } from '../../utils/isValidSegment';
 import { newDateFromSegments } from '../../utils/newDateFromSegments';
-import { toClientTimeZone } from '../../utils/toTimeZone';
 import {
   DateInputSegment,
   DateSegment,
@@ -48,18 +48,18 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
      */
     const onSegmentsUpdate = (newSegments: DateSegmentsState) => {
       const { day, month, year } = newSegments;
-      const sourceDate = newDateFromSegments({ day, month, year });
+      const zonedDate = newDateFromSegments({ day, month, year });
 
       // Only update the value iff all parts are set, and create a valid date.
-      if (sourceDate) {
-        /** New date relative to client time zone */
-        const clientDate = toClientTimeZone(sourceDate, timeZone);
+      if (zonedDate) {
+        /** New date in UTC */
+        const utcDate = zonedTimeToUtc(zonedDate, timeZone);
 
         /** Whether we need to update the external value */
-        const shouldUpdate = !value || !isSameDay(clientDate, value);
+        const shouldUpdate = !value || !isSameDay(utcDate, value);
 
         if (shouldUpdate) {
-          setValue?.(clientDate);
+          setValue?.(utcDate);
         }
       } else if (!(day || month || year)) {
         // if no segment exists, set the external value to null
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
index 7905b4dafa..7f2aede7a9 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
@@ -5,14 +5,13 @@ import { DateSegment, DateSegmentValue } from '../DateInputSegment';
 export interface DateInputBoxProps
   extends Omit<HTMLElementProps<'div'>, 'onChange'> {
   /**
-   * Date value passed into the component.
-   * Date object is relative to the client's time zone
+   * Date value passed into the component, in UTC time
    */
   value: Date | null;
 
   /**
    * Value setter callback.
-   * Date object is relative to the client's time zone
+   * Date object is in UTC time
    */
   setValue?: (date: Date | null) => void;
 
@@ -22,12 +21,6 @@ export interface DateInputBoxProps
   labelledBy?: string;
 }
 
-// export interface DateSegmentsState {
-//   day?: number;
-//   month?: number;
-//   year?: number;
-// }
-
 export type DateSegmentsState = Record<
   DateSegment,
   DateSegmentValue | undefined
diff --git a/packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts b/packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts
index 343e453ab1..baca9044ef 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts
@@ -50,6 +50,7 @@ export const useDateSegments = (
   // If `date` prop changes, update the segments
   useEffect(() => {
     if (date && !(prevDate && isSameDay(date, prevDate))) {
+      console.log('useDateSegments. Date Updated', { date, prevDate });
       const tzDate = toTimeZone(date, timeZone);
       const newSegments = getSegmentsFromDate(tzDate);
       onUpdate?.(newSegments);
diff --git a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx
index 3db469bdb2..31f8d9034e 100644
--- a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx
+++ b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx
@@ -43,6 +43,7 @@ export const DateInputWrapper = React.forwardRef<
       labelId,
       descriptionId,
       errorId,
+      onInputClick,
       ...rest
     }: DateInputWrapperProps,
     fwdRef,
@@ -67,7 +68,9 @@ export const DateInputWrapper = React.forwardRef<
             <Description id={descriptionId}>{description}</Description>
           )}
         </div>
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div
+          onClick={onInputClick}
           className={cx(
             inputBaseStyles,
             inputModeStyles[theme],
diff --git a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.types.ts b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.types.ts
index 615d72675e..4d8c2eb32a 100644
--- a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.types.ts
@@ -1,3 +1,5 @@
+import { MouseEventHandler } from 'react';
+
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 export const InputState = {
@@ -16,4 +18,6 @@ export interface DateInputWrapperProps extends HTMLElementProps<'div'> {
   labelId?: string;
   descriptionId?: string;
   errorId?: string;
+  /** Fired when the input wrapper is clicked (not any surrounding text) */
+  onInputClick?: MouseEventHandler;
 }
diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
deleted file mode 100644
index 244db0d24a..0000000000
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { StoryFn } from '@storybook/react';
-
-import { DatePicker } from '.';
-
-export default {
-  title: 'Components/DatePicker',
-  component: DatePicker,
-};
-
-const Template: StoryFn<typeof DatePicker> = props => <DatePicker {...props} />;
-
-export const Basic = Template.bind({});
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
new file mode 100644
index 0000000000..b92319c460
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -0,0 +1,65 @@
+/* eslint-disable react/prop-types */
+import React, { useState } from 'react';
+import { StoryFn } from '@storybook/react';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../DatePickerContext';
+
+import { DatePicker } from './DatePicker';
+
+const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
+  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
+    <DatePickerProvider
+      value={{
+        ...ctx?.args,
+      }}
+    >
+      <Story />
+    </DatePickerProvider>
+  </LeafyGreenProvider>
+);
+
+const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+  decorators: [ProviderWrapper],
+  parameters: {
+    default: null,
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        value: [new Date('1993-12-26')],
+        dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
+        timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
+      },
+      decorator: ProviderWrapper,
+    },
+  },
+  args: {
+    label: 'Pick a date',
+    dateFormat: 'iso8601',
+    timeZone: 'Europe/London',
+    min: new Date('1996-10-14'),
+    max: new Date('2026-10-14'),
+  },
+  argTypes: {
+    value: { control: 'date' },
+  },
+};
+
+export default meta;
+
+export const Basic: StoryFn<typeof DatePicker> = props => {
+  const [value, setValue] = useState<Date | null | undefined>(
+    new Date('2023-09-10T00:00:00.000Z'),
+  );
+
+  return <DatePicker {...props} value={value} onChange={setValue} />;
+};
+
+export const Generated = () => {};
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 451f40fcb3..f33fd16998 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -1,10 +1,99 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo, useRef, useState } from 'react';
+import { utcToZonedTime } from 'date-fns-tz';
+
+import { useBackdropClick } from '@leafygreen-ui/hooks';
+
+import { DatePickerProvider } from '../DatePickerContext';
+import { toDate } from '../utils/toDate';
+import { toClientTimeZone, toTimeZone } from '../utils/toTimeZone';
 
 import { DatePickerProps } from './DatePicker.types';
+import { DatePickerInput } from './DatePickerInput';
+import { DatePickerMenu } from './DatePickerMenu';
+
+export const DatePicker = forwardRef(
+  ({
+    value,
+    initialValue,
+    onChange,
+    handleValidation,
+    ...rest
+  }: DatePickerProps) => {
+    const inputRef = useRef<HTMLDivElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const [isOpen, setOpen] = useState(false);
+    const [month, setMonth] = useState<Date>(new Date('2023-09-11'));
+
+    const timeZonedValue = useMemo(() => {
+      const utcDate = toDate(value) as Date;
+      return utcDate
+        ? utcToZonedTime(utcDate, rest.timeZone ?? 'default')
+        : utcDate;
+    }, [rest.timeZone, value]);
+
+    console.log('Source', {
+      type: typeof value,
+      value,
+      iso: value ? new Date(value).toISOString() : '',
+      utc: value ? new Date(value).toUTCString() : '',
+      dateString: value ? new Date(value).toDateString() : '',
+      timeZonedValue,
+    });
+
+    const updateValue = (newVal: Date | null) => {
+      const tzDate = newVal
+        ? toClientTimeZone(newVal, rest.timeZone ?? 'default')
+        : newVal;
+      onChange?.(tzDate);
+    };
+
+    useBackdropClick(
+      () => {
+        setOpen(false);
+      },
+      [inputRef, menuRef],
+      isOpen,
+    );
+
+    const handleInputChange = (inputVal: Date | null) => {
+      console.log('InputChange', { inputVal });
+      updateValue(inputVal);
+      debugger;
+    };
+
+    const handleCellClick = (cellValue: Date) => {
+      updateValue(cellValue);
+      setOpen(false);
+    };
+
+    const handleMonthChange = (newMonth: Date) => {
+      setMonth(newMonth);
+    };
 
-// eslint-disable-next-line no-empty-pattern
-export const DatePicker = forwardRef(({}: DatePickerProps) => {
-  return <div>your content here</div>;
-});
+    return (
+      <DatePickerProvider value={rest}>
+        <DatePickerInput
+          ref={inputRef}
+          value={toDate(value)}
+          setValue={handleInputChange}
+          onClick={() => {
+            // TODO: Set focus to appropriate segment
+            setOpen(true);
+          }}
+        />
+        <DatePickerMenu
+          refEl={inputRef}
+          ref={menuRef}
+          value={timeZonedValue}
+          isOpen={isOpen}
+          month={month}
+          onCellClick={handleCellClick}
+          onMonthChange={handleMonthChange}
+          usePortal={true}
+        />
+      </DatePickerProvider>
+    );
+  },
+);
 
 DatePicker.displayName = 'DatePicker';
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index 920e432f1c..8c4626079a 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -1,11 +1,10 @@
 import { BaseDatePickerProps } from '../types';
 
 export interface DatePickerProps extends BaseDatePickerProps {
-  /** The initial selected date. Ignored if `value` is provided */
-  initialValue: string | Date;
-
-  /** The selected date */
-  value: string | Date;
+  /**
+   * The selected date, given in UTC time
+   */
+  value?: string | Date | null;
 
   /**
    * A Callback fired when the user makes a value change.
@@ -13,7 +12,10 @@ export interface DatePickerProps extends BaseDatePickerProps {
    *
    * Callback date argument will be a Date object in ISO-8601 format, and in UTC time.
    */
-  onChange: (value: Date) => void;
+  onChange: (value: Date | null) => void;
+
+  /** The initial selected date. Ignored if `value` is provided */
+  initialValue?: string | Date;
 
   /**
    * A callback fired when validation should run, based on our [form validation guidelines](https://www.mongodb.design/foundation/forms/#form-validation-error-handling).
@@ -21,5 +23,5 @@ export interface DatePickerProps extends BaseDatePickerProps {
    *
    * Callback date argument will be a Date object in ISO 8601 format, and in UTC time.
    */
-  handleValidation: (value: Date) => void;
+  handleValidation?: (value: Date) => void;
 }
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index cdc32bf964..4f9ce60d9e 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -1,36 +1,42 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
-import { useIdAllocator } from '@leafygreen-ui/hooks';
+import { useForwardedRef, useIdAllocator } from '@leafygreen-ui/hooks';
 
 import { DateInputBox, DateInputWrapper } from '../../DateInput';
 import { useDatePickerContext } from '../../DatePickerContext';
 
 import { DatePickerInputProps } from './DatePickerInput.types';
 
-export function DatePickerInput({ value, setValue }: DatePickerInputProps) {
-  const { label, dateFormat, timeZone } = useDatePickerContext();
-  const labelId = useIdAllocator({ prefix: 'date-label' });
-  const descriptionId = useIdAllocator({ prefix: 'date-description' });
-  const errorId = useIdAllocator({ prefix: 'date-description' });
-  const inputId = useIdAllocator({ prefix: 'date-input' });
+export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
+  ({ value, setValue, onClick, ...rest }: DatePickerInputProps, fwdRef) => {
+    const { label, dateFormat, timeZone } = useDatePickerContext();
+    const labelId = useIdAllocator({ prefix: 'date-label' });
+    const descriptionId = useIdAllocator({ prefix: 'date-description' });
+    const errorId = useIdAllocator({ prefix: 'date-description' });
+    const inputId = useIdAllocator({ prefix: 'date-input' });
+    const ref = useForwardedRef(fwdRef, null);
 
-  return (
-    <DateInputWrapper
-      label={label}
-      description={dateFormat + ' ' + timeZone}
-      inputId={inputId}
-      labelId={labelId}
-      descriptionId={descriptionId}
-      errorId={errorId}
-    >
-      <DateInputBox
-        value={value}
-        setValue={setValue}
-        id={inputId}
-        labelledBy={labelId}
-      />
-    </DateInputWrapper>
-  );
-}
+    return (
+      <DateInputWrapper
+        label={label}
+        description={dateFormat + ' ' + timeZone}
+        inputId={inputId}
+        labelId={labelId}
+        descriptionId={descriptionId}
+        errorId={errorId}
+        ref={ref}
+        onInputClick={onClick}
+        {...rest}
+      >
+        <DateInputBox
+          value={value}
+          setValue={setValue}
+          id={inputId}
+          labelledBy={labelId}
+        />
+      </DateInputWrapper>
+    );
+  },
+);
 
 DatePickerInput.displayName = 'DatePickerInput';
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index 02b1d3266a..209765cc6d 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -1,4 +1,8 @@
+import { MouseEventHandler } from 'react';
+
 import { DateInputBoxProps } from '../../DateInput';
 
 export interface DatePickerInputProps
-  extends Pick<DateInputBoxProps, 'value' | 'setValue'> {}
+  extends Pick<DateInputBoxProps, 'value' | 'setValue'> {
+  onClick?: MouseEventHandler;
+}
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 24a3dfc271..02220b696e 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -69,8 +69,8 @@ export const Basic: StoryFn<typeof DatePickerMenu> = props => {
     <>
       <div ref={refEl}>refEl</div>
       <DatePickerMenu
-        refEl={refEl}
         {...props}
+        refEl={refEl}
         value={value}
         month={month}
         onCellClick={setValue}
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
index a4ba0f5a67..d736056c79 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
@@ -3,21 +3,27 @@ import { contentClassName } from '@leafygreen-ui/popover';
 import { spacing } from '@leafygreen-ui/tokens';
 
 export const menuWrapperStyles = css`
-  min-width: 265px; // width of "September" select trigger
+  width: 266px; // width of "September" select trigger
 
   & > .${contentClassName} {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    width: 100%;
   }
 `;
 
+export const menuContentStyles = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 export const menuHeaderStyles = css`
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding-bottom: ${spacing[3]}px;
+  z-index: 1;
 `;
 
 export const menuHeaderSelectContainerStyles = css`
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index c64e51b8f5..cbbeb8ef13 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -1,6 +1,9 @@
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { isSameDay, isToday } from 'date-fns';
 
+import { useForwardedRef } from '@leafygreen-ui/select/src/utils';
+import { spacing } from '@leafygreen-ui/tokens';
+
 import { CalendarCell, CalendarCellState } from '../../Calendar/CalendarCell';
 import { CalendarGrid } from '../../Calendar/CalendarGrid';
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
@@ -8,6 +11,7 @@ import { useDatePickerContext } from '../../DatePickerContext';
 
 import {
   menuCalendarGridStyles,
+  menuContentStyles,
   menuWrapperStyles,
 } from './DatePickerMenu.styles';
 import { DatePickerMenuProps } from './DatePickerMenu.types';
@@ -16,51 +20,65 @@ import { DatePickerMenuHeader } from './DatePickerMenuHeader';
 const nullIsSameDay = (d1?: Date | null, d2?: Date | null) =>
   !!(d1 && d2 && isSameDay(d1, d2));
 
-export function DatePickerMenu({
-  isOpen,
-  value,
-  month,
-  onMonthChange,
-  onCellClick,
-  ...rest
-}: DatePickerMenuProps) {
-  const { isInRange } = useDatePickerContext();
-  const [highlight, setHighlight] = useState<Date | null>(null);
+export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
+  (
+    {
+      isOpen,
+      value,
+      month,
+      onMonthChange,
+      onCellClick,
+      ...rest
+    }: DatePickerMenuProps,
+    fwdRef,
+  ) => {
+    const { isInRange } = useDatePickerContext();
+    const [highlight, setHighlight] = useState<Date | null>(null);
+
+    const getCellState = (cellDay: Date | null) => {
+      if (isInRange(cellDay)) {
+        if (nullIsSameDay(cellDay, value)) {
+          return CalendarCellState.Active;
+        }
 
-  const getCellState = (cellDay: Date | null) => {
-    if (isInRange(cellDay)) {
-      if (nullIsSameDay(cellDay, value)) {
-        return CalendarCellState.Active;
+        return CalendarCellState.Default;
       }
 
-      return CalendarCellState.Default;
-    }
+      return CalendarCellState.Disabled;
+    };
 
-    return CalendarCellState.Disabled;
-  };
+    const ref = useForwardedRef(fwdRef, null);
 
-  return (
-    <MenuWrapper active={isOpen} className={menuWrapperStyles} {...rest}>
-      <DatePickerMenuHeader month={month} onMonthChange={onMonthChange} />
-      <CalendarGrid
-        month={month}
-        className={menuCalendarGridStyles}
-        onMouseLeave={() => setHighlight(null)}
+    return (
+      <MenuWrapper
+        active={isOpen}
+        spacing={spacing[1]}
+        className={menuWrapperStyles}
+        {...rest}
       >
-        {day => (
-          <CalendarCell
-            isHighlighted={nullIsSameDay(day, highlight)}
-            isCurrent={isToday(day)}
-            state={getCellState(day)}
-            onMouseEnter={() => setHighlight(day)}
-            onClick={() => onCellClick(day)}
+        <div ref={ref} className={menuContentStyles}>
+          <DatePickerMenuHeader month={month} onMonthChange={onMonthChange} />
+          <CalendarGrid
+            month={month}
+            className={menuCalendarGridStyles}
+            onMouseLeave={() => setHighlight(null)}
           >
-            {day?.getDate()}
-          </CalendarCell>
-        )}
-      </CalendarGrid>
-    </MenuWrapper>
-  );
-}
+            {day => (
+              <CalendarCell
+                isHighlighted={nullIsSameDay(day, highlight)}
+                isCurrent={isToday(day)}
+                state={getCellState(day)}
+                onMouseEnter={() => setHighlight(day)}
+                onClick={() => onCellClick(day)}
+              >
+                {day?.getDate()}
+              </CalendarCell>
+            )}
+          </CalendarGrid>
+        </div>
+      </MenuWrapper>
+    );
+  },
+);
 
 DatePickerMenu.displayName = 'DatePickerMenu';
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index 9f1504080d..6780d872cb 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -71,6 +71,7 @@ export const DatePickerMenuHeader = ({
             const newMonth = setMonth(month, Number(m));
             updateMonth(newMonth);
           }}
+          usePortal={false}
         >
           {Months.map((m, i) => (
             <Option value={i.toString()} key={m.short}>
@@ -88,6 +89,8 @@ export const DatePickerMenuHeader = ({
             const newMonth = setYear(month, Number(y));
             updateMonth(newMonth);
           }}
+          usePortal={false}
+          popoverZIndex={2}
         >
           {yearOptions.map(y => (
             <Option value={y.toString()} key={y}>
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index 55171855c8..36c24cadb6 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -1,10 +1,15 @@
 import React from 'react';
 import { createContext, PropsWithChildren, useContext } from 'react';
-import { isDate, isWithinInterval } from 'date-fns';
+import { isWithinInterval } from 'date-fns';
 
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
-import { DatePickerContextProps } from './DatePickerContext.types';
+import { toDate } from '../utils/toDate';
+
+import {
+  DatePickerContextProps,
+  DatePickerProviderProps,
+} from './DatePickerContext.types';
 
 export const defaultDatePickerContext: DatePickerContextProps = {
   label: '',
@@ -24,25 +29,24 @@ export const defaultDatePickerContext: DatePickerContextProps = {
 export const DatePickerContext = createContext<DatePickerContextProps>(
   defaultDatePickerContext,
 );
+
 export const DatePickerProvider = ({
   children,
   value,
-}: PropsWithChildren<{ value: DatePickerContextProps }>) => {
-  const providerValue = {
+}: PropsWithChildren<{ value: DatePickerProviderProps }>) => {
+  const providerValue: DatePickerContextProps = {
     ...defaultDatePickerContext,
     ...value,
+    min: value.min ? toDate(value.min) : defaultDatePickerContext.min,
+    max: value.max ? toDate(value.max) : defaultDatePickerContext.max,
   };
 
   const isInRange = (d?: Date | null): boolean =>
     !!(
       d &&
       isWithinInterval(d, {
-        start: isDate(providerValue.min)
-          ? providerValue.min
-          : new Date(providerValue.min),
-        end: isDate(providerValue.max)
-          ? providerValue.max
-          : new Date(providerValue.max),
+        start: providerValue.min,
+        end: providerValue.max,
       })
     );
 
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
index 905f09616f..fd9dc98eeb 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
@@ -1,5 +1,8 @@
 import { BaseDatePickerProps } from 'src/types';
 
+/**
+ * The values in context
+ */
 export interface DatePickerContextProps extends Required<BaseDatePickerProps> {
   /** The earliest date accepted */
   min: Date;
@@ -7,5 +10,11 @@ export interface DatePickerContextProps extends Required<BaseDatePickerProps> {
   /** The latest date accepted */
   max: Date;
 
+  /**
+   * Returns whether the given date is within the component's min/max dates
+   */
   isInRange: (d?: Date | null) => boolean;
 }
+
+/** The props expected by the provider */
+export interface DatePickerProviderProps extends BaseDatePickerProps {}
diff --git a/packages/date-picker/src/utils/newDateFromSegments/index.ts b/packages/date-picker/src/utils/newDateFromSegments/index.ts
index 1ace3b9ab1..2d04f6096a 100644
--- a/packages/date-picker/src/utils/newDateFromSegments/index.ts
+++ b/packages/date-picker/src/utils/newDateFromSegments/index.ts
@@ -1,4 +1,4 @@
-import { DateSegmentsState } from '../../DateInputBox';
+import { DateSegmentsState } from '../../DateInput';
 import { isValidSegment } from '../isValidSegment';
 
 /** Constructs a date object from day, month, year segments */
diff --git a/packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts b/packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts
new file mode 100644
index 0000000000..216ee5be45
--- /dev/null
+++ b/packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts
@@ -0,0 +1,23 @@
+import { newDateFromSegments } from '.';
+
+describe('packages/date=picker/utils/newDateFromSegments', () => {
+  test('iso value', () => {
+    const newDate = newDateFromSegments({
+      day: 1,
+      month: 1,
+      year: 2023,
+    });
+
+    expect(newDate?.toISOString()).toEqual('2023-01-01T00:00:00.000Z');
+  });
+
+  test('undefined', () => {
+    const newDate = newDateFromSegments({
+      day: undefined,
+      month: 1,
+      year: 2023,
+    });
+
+    expect(newDate).toBeUndefined();
+  });
+});
diff --git a/packages/date-picker/src/utils/toDate.ts b/packages/date-picker/src/utils/toDate.ts
new file mode 100644
index 0000000000..d3ccfa942e
--- /dev/null
+++ b/packages/date-picker/src/utils/toDate.ts
@@ -0,0 +1,12 @@
+import { isDate, isValid, toDate as _toDate } from 'date-fns';
+
+/** A wrapper around `date-fns.toDate` that also accepts strings */
+export const toDate = (
+  dateLike?: string | number | Date | null,
+): Date | null => {
+  if (!dateLike) return null;
+  if (isDate(dateLike)) return dateLike as Date;
+  if (typeof dateLike === 'number') return _toDate(dateLike);
+  const newDate = new Date(dateLike);
+  return isValid(newDate) ? newDate : null;
+};

From 1cfb6380afb557c1fa1960b45f3aaecdb58435b2 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 1 Sep 2023 18:19:18 -0400
Subject: [PATCH 058/351] fix yarn lock

---
 yarn.lock | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 68160b23bc..c52e5c6e4e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4261,9 +4261,9 @@
     csstype "^3.0.2"
 
 "@types/react@^17.0.2":
-  version "17.0.65"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.65.tgz#95f6a2ab61145ffb69129d07982d047f9e0870cd"
-  integrity sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==
+  version "17.0.62"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.62.tgz#2efe8ddf8533500ec44b1334dd1a97caa2f860e3"
+  integrity sha512-eANCyz9DG8p/Vdhr0ZKST8JV12PhH2ACCDYlFw6DIO+D+ca+uP4jtEDEpVqXZrh/uZdXQGwk7whJa3ah5DtyLw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -5533,9 +5533,9 @@ camelcase@^7.0.0:
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
 caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517:
-  version "1.0.30001525"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001525.tgz#d2e8fdec6116ffa36284ca2c33ef6d53612fe1c8"
-  integrity sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==
+  version "1.0.30001519"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601"
+  integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
@@ -13259,7 +13259,6 @@ wordwrap@^1.0.0:
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From d10446e7e7c474727e106f8819b04b3fc808b817 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 5 Sep 2023 11:01:30 -0400
Subject: [PATCH 059/351] Update getMonthName.spec.ts

---
 .../utils/getMonthName/getMonthName.spec.ts   | 48 ++++++++++++++-----
 .../newDateFromSegments.spec.ts               |  2 +-
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/date-picker/src/utils/getMonthName/getMonthName.spec.ts b/packages/date-picker/src/utils/getMonthName/getMonthName.spec.ts
index 6844f0e386..65a12944d5 100644
--- a/packages/date-picker/src/utils/getMonthName/getMonthName.spec.ts
+++ b/packages/date-picker/src/utils/getMonthName/getMonthName.spec.ts
@@ -2,39 +2,63 @@ import { getMonthName } from '.';
 
 describe('packages/date-picker/utils/getMonthName', () => {
   test('Jan', () => {
-    expect(getMonthName(0)).toEqual('January');
+    expect(getMonthName(0)).toEqual(
+      expect.objectContaining({ long: 'January', short: 'Jan' }),
+    );
   });
   test('Feb', () => {
-    expect(getMonthName(0)).toEqual('February');
+    expect(getMonthName(1)).toEqual(
+      expect.objectContaining({ long: 'February', short: 'Feb' }),
+    );
   });
   test('Mar', () => {
-    expect(getMonthName(0)).toEqual('March');
+    expect(getMonthName(2)).toEqual(
+      expect.objectContaining({ long: 'March', short: 'Mar' }),
+    );
   });
   test('Apr', () => {
-    expect(getMonthName(0)).toEqual('April');
+    expect(getMonthName(3)).toEqual(
+      expect.objectContaining({ long: 'April', short: 'Apr' }),
+    );
   });
   test('May', () => {
-    expect(getMonthName(0)).toEqual('May');
+    expect(getMonthName(4)).toEqual(
+      expect.objectContaining({ long: 'May', short: 'May' }),
+    );
   });
   test('Jun', () => {
-    expect(getMonthName(0)).toEqual('June');
+    expect(getMonthName(5)).toEqual(
+      expect.objectContaining({ long: 'June', short: 'Jun' }),
+    );
   });
   test('Jul', () => {
-    expect(getMonthName(0)).toEqual('July');
+    expect(getMonthName(6)).toEqual(
+      expect.objectContaining({ long: 'July', short: 'Jul' }),
+    );
   });
   test('Aug', () => {
-    expect(getMonthName(0)).toEqual('August');
+    expect(getMonthName(7)).toEqual(
+      expect.objectContaining({ long: 'August', short: 'Aug' }),
+    );
   });
   test('Sep', () => {
-    expect(getMonthName(0)).toEqual('September');
+    expect(getMonthName(8)).toEqual(
+      expect.objectContaining({ long: 'September', short: 'Sep' }),
+    );
   });
   test('Oct', () => {
-    expect(getMonthName(0)).toEqual('October');
+    expect(getMonthName(9)).toEqual(
+      expect.objectContaining({ long: 'October', short: 'Oct' }),
+    );
   });
   test('Nov', () => {
-    expect(getMonthName(0)).toEqual('November');
+    expect(getMonthName(10)).toEqual(
+      expect.objectContaining({ long: 'November', short: 'Nov' }),
+    );
   });
   test('Dec', () => {
-    expect(getMonthName(0)).toEqual('December');
+    expect(getMonthName(11)).toEqual(
+      expect.objectContaining({ long: 'December', short: 'Dec' }),
+    );
   });
 });
diff --git a/packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts b/packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts
index 216ee5be45..3c1c297de0 100644
--- a/packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts
+++ b/packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts
@@ -7,7 +7,7 @@ describe('packages/date=picker/utils/newDateFromSegments', () => {
       month: 1,
       year: 2023,
     });
-
+    // TODO:  FIXME:
     expect(newDate?.toISOString()).toEqual('2023-01-01T00:00:00.000Z');
   });
 

From ee89e0871aae8182d99decaed3657fb0705999dc Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 6 Sep 2023 09:32:53 -0400
Subject: [PATCH 060/351] clean stories, add tests, fix time zones in input

---
 .../CalendarGrid/CalendarGrid.stories.tsx     |  57 +++++----
 .../Calendar/CalendarGrid/CalendarGrid.tsx    |  26 ++---
 .../CalendarGrid/CalendarGrid.types.ts        |  16 ---
 .../src/Calendar/CalendarGrid/utils.ts        |  34 ------
 .../utils/getWeeksArray/getWeeksArray.spec.ts | 109 ++++++++++++++++++
 .../src/Calendar/utils/getWeeksArray/index.ts |  63 ++++++++++
 .../DateInputBox/DateInputBox.spec.tsx        |  15 ++-
 .../DateInput/DateInputBox/DateInputBox.tsx   |  14 +--
 .../DateInput/DateInputBox/useDateSegments.ts |   1 -
 .../getRemainingParts.spec.ts                 |  18 +++
 .../getRemainingParts/index.ts}               |   0
 .../date-picker/src/DatePicker.testUtils.ts   |  20 ++++
 .../src/DatePicker/DatePicker.stories.tsx     |   5 +
 .../date-picker/src/DatePicker/DatePicker.tsx |  45 +++-----
 .../DatePickerMenu/DatePickerMenu.tsx         |   3 +-
 .../DatePickerMenu/DatePickerMenu.types.ts    |   2 +-
 .../src/DatePickerContext/index.ts            |   5 +-
 packages/date-picker/src/constants.ts         |  32 ++++-
 .../src/utils/isValidSegment/index.ts         |   5 +-
 .../isValidSegment/isValidSegment.spec.ts     |  64 ++++++++++
 .../src/utils/newDateFromSegments/index.ts    |   9 +-
 .../newDateFromSegments.spec.ts               |   5 +-
 .../src/utils/setToUTCMidnight/index.ts       |  18 +++
 .../setToUTCMidnight/setToUTCMidnight.spec.ts |  12 ++
 .../src/utils/{toDate.ts => toDate/index.ts}  |   0
 .../src/utils/toDate/toDate.spec.ts           |   4 +
 .../src/utils/toTimeZone/toTimeZone.spec.ts   |  19 +++
 27 files changed, 462 insertions(+), 139 deletions(-)
 delete mode 100644 packages/date-picker/src/Calendar/CalendarGrid/utils.ts
 create mode 100644 packages/date-picker/src/Calendar/utils/getWeeksArray/getWeeksArray.spec.ts
 create mode 100644 packages/date-picker/src/Calendar/utils/getWeeksArray/index.ts
 create mode 100644 packages/date-picker/src/DateInput/utils/getRemainingParts/getRemainingParts.spec.ts
 rename packages/date-picker/src/DateInput/{DateInputBox/DateInputBox.utils.ts => utils/getRemainingParts/index.ts} (100%)
 create mode 100644 packages/date-picker/src/DatePicker.testUtils.ts
 create mode 100644 packages/date-picker/src/utils/isValidSegment/isValidSegment.spec.ts
 create mode 100644 packages/date-picker/src/utils/setToUTCMidnight/index.ts
 create mode 100644 packages/date-picker/src/utils/setToUTCMidnight/setToUTCMidnight.spec.ts
 rename packages/date-picker/src/utils/{toDate.ts => toDate/index.ts} (100%)
 create mode 100644 packages/date-picker/src/utils/toDate/toDate.spec.ts
 create mode 100644 packages/date-picker/src/utils/toTimeZone/toTimeZone.spec.ts

diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index 2d4750e1f9..3e48ecec68 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -4,7 +4,10 @@ import { isToday } from 'date-fns';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
+import { InlineCode } from '@leafygreen-ui/typography';
 
+import { Month, Months } from '../../constants';
+import { Locales, TimeZones } from '../../DatePicker.testUtils';
 import {
   DatePickerContextProps,
   DatePickerProvider,
@@ -39,12 +42,21 @@ const meta: StoryMetaType<typeof CalendarGrid, DatePickerContextProps> = {
     },
   },
   decorators: [ProviderWrapper],
-  args: {},
+  args: {
+    dateFormat: 'en-US',
+    // timeZone: 'America/Los_Angeles',
+    // timeZone: 'Europe/London',
+    timeZone: 'UTC',
+  },
   argTypes: {
     darkMode: { control: 'boolean' },
     dateFormat: {
       control: 'select',
-      options: ['en-us', 'iso8601', 'en-UK', 'de', 'fa-AF', 'en-MV'],
+      options: Locales,
+    },
+    timeZone: {
+      control: 'select',
+      options: TimeZones,
     },
   },
 };
@@ -52,7 +64,7 @@ const meta: StoryMetaType<typeof CalendarGrid, DatePickerContextProps> = {
 export default meta;
 
 export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
-  const month = new Date('2023-09-02');
+  const [month] = useState(new Date(Date.UTC(2023, Month.August, 5)));
 
   const [hovered, setHovered] = useState<string | undefined>();
 
@@ -61,23 +73,28 @@ export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
   };
 
   return (
-    <CalendarGrid
-      {...props}
-      month={month}
-      onMouseLeave={handleHover(undefined)}
-    >
-      {(day, i) => (
-        <CalendarCell
-          key={i}
-          isCurrent={!!(day && isToday(day))}
-          isHighlighted={hovered ? hovered === day?.toISOString() : false}
-          onMouseEnter={handleHover(day?.toISOString())}
-          data-iso={day?.toISOString()}
-        >
-          {day?.getDate()}
-        </CalendarCell>
-      )}
-    </CalendarGrid>
+    <div>
+      <InlineCode>
+        <b>{Months[month.getMonth()].long}</b> <b>{month.toISOString()}</b>
+      </InlineCode>
+      <CalendarGrid
+        {...props}
+        month={month}
+        onMouseLeave={handleHover(undefined)}
+      >
+        {(day, i) => (
+          <CalendarCell
+            key={i}
+            isCurrent={!!(day && isToday(day))}
+            isHighlighted={hovered ? hovered === day?.toISOString() : false}
+            onMouseEnter={handleHover(day?.toISOString())}
+            data-iso={day?.toISOString()}
+          >
+            {day?.getUTCDate()}
+          </CalendarCell>
+        )}
+      </CalendarGrid>
+    </div>
   );
 };
 
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index 7e3f3d58f8..bebfa40415 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -1,30 +1,28 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { range } from 'lodash';
 import { getWeekStartByLocale } from 'weekstart';
 
 import { Disclaimer } from '@leafygreen-ui/typography';
 
+import { DaysOfWeek, daysPerWeek } from '../../constants';
 import { useDatePickerContext } from '../../DatePickerContext';
+import { getWeeksArray } from '../utils/getWeeksArray';
 
 import { calendarHeaderCellStyles } from './CalendarGrid.styles';
-import {
-  CalendarGridProps,
-  DaysOfWeek,
-  daysPerWeek,
-} from './CalendarGrid.types';
-import { getWeeksArray } from './utils';
+import { CalendarGridProps } from './CalendarGrid.types';
 
 /**
  * A simple table that renders the `CalendarCell` components passed as children
  */
-export function CalendarGrid({
-  month = new Date(),
-  children,
-  ...rest
-}: CalendarGridProps) {
-  const { dateFormat } = useDatePickerContext();
+export function CalendarGrid({ month, children, ...rest }: CalendarGridProps) {
+  const { dateFormat, timeZone } = useDatePickerContext();
   const weekStartsOn = getWeekStartByLocale(dateFormat);
-  const weeks = getWeeksArray(month, dateFormat);
+  const weeks = useMemo(
+    () => getWeeksArray(month, { dateFormat, timeZone }),
+    [dateFormat, month, timeZone],
+  );
+
+  console.log(weeks.flatMap(week => week.map(d => d?.toISOString())));
 
   return (
     <table {...rest}>
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts
index acd9bf2e8d..0fd3d3ff3c 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts
@@ -1,19 +1,3 @@
-export const daysPerWeek = 7 as const;
-
-// Note: no lightweight library (date-fns, day.js, @internationalized)
-// includes a similar enum
-export const DaysOfWeek = [
-  { long: 'Sunday', short: 'su' },
-  { long: 'Monday', short: 'mo' },
-  { long: 'Tuesday', short: 'tu' },
-  { long: 'Wednesday', short: 'we' },
-  { long: 'Thursday', short: 'th' },
-  { long: 'Friday', short: 'fr' },
-  { long: 'Saturday', short: 'sa' },
-] as const;
-
-export type DaysOfWeek = (typeof DaysOfWeek)[number];
-
 export interface CalendarGridProps
   extends Omit<React.HTMLProps<HTMLTableElement>, 'children'> {
   /**
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/utils.ts b/packages/date-picker/src/Calendar/CalendarGrid/utils.ts
deleted file mode 100644
index b1f917fa22..0000000000
--- a/packages/date-picker/src/Calendar/CalendarGrid/utils.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { getDay, getDaysInMonth, isFirstDayOfMonth, setDate } from 'date-fns';
-import { chunk, fill, range } from 'lodash';
-import { getWeekStartByLocale } from 'weekstart';
-
-import { daysPerWeek } from './CalendarGrid.types';
-
-export const getWeeksArray = (
-  month: Date,
-  locale: string,
-): Array<Array<Date | null>> => {
-  // If the provided date isn't the first, shift it
-  const firstOfMonth = isFirstDayOfMonth(month) ? month : setDate(month, 1);
-  // What day of the week do weeks start on for this locale? (Sun = 0)
-  const weekStartsOn = getWeekStartByLocale(locale);
-  // What day of the week does this month start on? (Sun = 0)
-  const startDayOfWeek = getDay(firstOfMonth);
-  // How many days in the month
-  const daysInMonth = getDaysInMonth(firstOfMonth);
-  // Shift the start column based on locale (weekStartsOn)
-  const startColumn =
-    (daysPerWeek + (startDayOfWeek - weekStartsOn)) % daysPerWeek;
-
-  // Create an array from 1 -> daysInMonth
-  const allDays: Array<Date | null> = range(daysInMonth).map(i =>
-    setDate(new Date(firstOfMonth), i + 1),
-  );
-  // splice in enough empty elements so that the first is in the right column
-  allDays.splice(0, 0, ...fill(range(startColumn), null));
-
-  // Break the array into chunks of 7
-  const weeks = chunk(allDays, daysPerWeek);
-
-  return weeks;
-};
diff --git a/packages/date-picker/src/Calendar/utils/getWeeksArray/getWeeksArray.spec.ts b/packages/date-picker/src/Calendar/utils/getWeeksArray/getWeeksArray.spec.ts
new file mode 100644
index 0000000000..46c5269619
--- /dev/null
+++ b/packages/date-picker/src/Calendar/utils/getWeeksArray/getWeeksArray.spec.ts
@@ -0,0 +1,109 @@
+import { utcToZonedTime } from 'date-fns-tz';
+import { isUndefined, padStart, range } from 'lodash';
+
+import { Month } from '../../../constants';
+
+import { getWeeksArray } from '.';
+
+describe.skip('utcToZonedTime', () => {
+  const date = new Date(Date.UTC(2023, 8 /* Sept */, 1));
+
+  test('date is in UTC', () => {
+    expect(date.toISOString()).toEqual('2023-09-01T00:00:00.000Z');
+  });
+
+  test('converting to UTC has no effect', () => {
+    const utc = utcToZonedTime(date, 'UTC');
+    expect(utc.toISOString()).toEqual(date.toISOString());
+  });
+
+  test('converting to America/New_York rolls back -4 for EDT', () => {
+    const nyc = utcToZonedTime(date, 'America/New_York');
+    expect(nyc.toISOString()).toEqual('2023-08-31T20:00:00.000Z');
+  });
+});
+
+describe.skip('packages/date-picker/calendar/utils/getWeeksArray', () => {
+  test('returned array has the correct number of elements', () => {
+    const month = new Date(Date.UTC(2023, Month.August, 1));
+    const arr = getWeeksArray(month, {
+      timeZone: 'UTC',
+      dateFormat: 'iso8601',
+    });
+    const daysInAugust = 31;
+    const padDaysForFormat = 1;
+    expect(arr.flat()).toHaveLength(daysInAugust + padDaysForFormat);
+  });
+
+  test('returns values in UTC', () => {
+    const month = new Date(Date.UTC(2023, Month.August, 1));
+    const arr = getWeeksArray(month, {
+      timeZone: 'UTC',
+      dateFormat: 'iso8601',
+    });
+    const isoFlat = arr
+      .flatMap(week => week.map(day => day?.toISOString()))
+      .filter(day => !isUndefined(day));
+    expect(isoFlat.every(day => day?.endsWith('T00:00:00.000Z'))).toBeTruthy();
+  });
+
+  test('pads beginning of month with empty values', () => {
+    const month = new Date(Date.UTC(2023, Month.August, 1));
+    const arr = getWeeksArray(month, {
+      timeZone: 'UTC',
+      dateFormat: 'iso8601',
+    });
+    expect(arr[0][0]).toBeNull(); // Mon
+    expect(arr[0][1]).not.toBeNull(); // Tues
+  });
+
+  test('starts the week on the correct day for the locale', () => {
+    const month = new Date(Date.UTC(2023, Month.August, 1));
+    const arr = getWeeksArray(month, { timeZone: 'UTC', dateFormat: 'en-US' });
+    expect(arr[0][0]).toBeNull(); // Sun
+    expect(arr[0][1]).toBeNull(); // Mon
+    expect(arr[0][2]).not.toBeNull(); // Tues
+  });
+
+  test('returned array has chunks of length 7', () => {
+    const month = new Date(Date.UTC(2023, Month.August, 1));
+    const arr = getWeeksArray(month, {
+      timeZone: 'UTC',
+      dateFormat: 'iso8601',
+    });
+    expect(arr[0]).toHaveLength(7);
+    expect(arr[1]).toHaveLength(7);
+    expect(arr[2]).toHaveLength(7);
+    expect(arr[3]).toHaveLength(7);
+  });
+
+  test('returns values in UTC regardless of source', () => {
+    const month = new Date('2023-08-01T00:00:00.000');
+    const arr = getWeeksArray(month, {
+      timeZone: 'UTC',
+      dateFormat: 'iso8601',
+    });
+    const isoFlat = arr
+      .flatMap(week => week.map(day => day?.toISOString()))
+      .filter(day => !isUndefined(day));
+    expect(isoFlat.every(day => day?.endsWith('T00:00:00.000Z'))).toBeTruthy();
+  });
+
+  test('returned array includes a Date for every day of the month', () => {
+    const month = new Date(Date.UTC(2023, Month.August, 1));
+    const arr = getWeeksArray(month, {
+      timeZone: 'UTC',
+      dateFormat: 'iso8601',
+    });
+    const isoFlat = arr.flatMap(week => week.map(day => day?.toISOString()));
+
+    expect(isoFlat).toEqual(
+      expect.arrayContaining([
+        undefined,
+        ...range(31).map(
+          d => `2023-08-${padStart((d + 1).toString(), 2, '0')}T00:00:00.000Z`,
+        ),
+      ]),
+    );
+  });
+});
diff --git a/packages/date-picker/src/Calendar/utils/getWeeksArray/index.ts b/packages/date-picker/src/Calendar/utils/getWeeksArray/index.ts
new file mode 100644
index 0000000000..ac7cc78597
--- /dev/null
+++ b/packages/date-picker/src/Calendar/utils/getWeeksArray/index.ts
@@ -0,0 +1,63 @@
+import { getDay, getDaysInMonth, setDate } from 'date-fns';
+import { utcToZonedTime } from 'date-fns-tz';
+import { chunk, fill, range } from 'lodash';
+import { getWeekStartByLocale } from 'weekstart';
+
+import { daysPerWeek } from '../../../constants';
+import { BaseDatePickerProps } from '../../../types';
+import {
+  setToMidnight,
+  setToUTCMidnight,
+} from '../../../utils/setToUTCMidnight';
+
+interface GetWeeksArrayOptions
+  extends Required<Pick<BaseDatePickerProps, 'dateFormat' | 'timeZone'>> {}
+
+/**
+ * Returns a 7x5 (or 7x6) 2D array of Dates for the given month
+ */
+export const getWeeksArray = (
+  /**
+   * Month, given in UTC
+   */
+  month: Date,
+
+  { dateFormat, timeZone }: GetWeeksArrayOptions,
+): Array<Array<Date | null>> => {
+  // What day of the week do weeks start on for this locale? (Sun = 0)
+  const weekStartsOn = getWeekStartByLocale(dateFormat);
+
+  // Convert the given month to the provided timeZone
+  const tzMonth = utcToZonedTime(month, timeZone);
+
+  // The first day of the month
+  const firstOfMonth = setDate(tzMonth, 1);
+
+  // What day of the week does this month start on? (Sun = 0)
+  const startDayOfWeek = getDay(firstOfMonth);
+
+  // How many days in the month?
+  const daysInMonth = getDaysInMonth(firstOfMonth);
+
+  // Shift the start column based on locale (weekStartsOn)
+  const startColumn =
+    (daysPerWeek + (startDayOfWeek - weekStartsOn)) % daysPerWeek;
+
+  // Create an array from 1 -> daysInMonth
+  const allDays: Array<Date | null> = range(daysInMonth).map(i => {
+    return setDate(firstOfMonth, i + 1);
+  });
+  // splice in enough empty elements so that the first is in the right column
+  allDays.splice(0, 0, ...fill(range(startColumn), null));
+
+  console.log({
+    timeZone,
+    mo: month.toISOString(),
+    tz: tzMonth.toISOString(),
+  });
+
+  // Break the array into chunks of 7
+  const weeks = chunk(allDays, daysPerWeek);
+
+  return weeks;
+};
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
index 0e35dc8da9..e6a17709ce 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -3,15 +3,15 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import {
-  DatePickerContextProps,
   DatePickerProvider,
+  DatePickerProviderProps,
 } from '../../DatePickerContext';
 
 import { DateInputBox, type DateInputBoxProps } from '.';
 
 const renderDateInputBox = (
   props?: DateInputBoxProps,
-  context?: DatePickerContextProps,
+  context?: DatePickerProviderProps,
 ) => {
   const result = render(
     <DatePickerProvider value={{ label: 'Label', ...context }}>
@@ -90,6 +90,17 @@ describe('packages/date-input-box', () => {
       expect(monthInput).toHaveValue(12);
       expect(yearInput).toHaveValue(1993);
     });
+
+    test('renders in the correct time zone', () => {
+      const { dayInput, monthInput, yearInput } = renderDateInputBox(
+        { value: new Date('1993-12-26') },
+        { dateFormat: 'iso8601', timeZone: 'America/Los_Angeles' },
+      );
+
+      expect(dayInput).toHaveValue(25);
+      expect(monthInput).toHaveValue(12);
+      expect(yearInput).toHaveValue(1993);
+    });
   });
 
   describe('typing', () => {
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index c2d212b203..8c06652474 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -1,6 +1,5 @@
 import React, { KeyboardEventHandler } from 'react';
 import { isSameDay } from 'date-fns';
-import { zonedTimeToUtc } from 'date-fns-tz';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useDynamicRefs, useForwardedRef } from '@leafygreen-ui/hooks';
@@ -14,13 +13,13 @@ import {
   DateSegment,
   isDateSegment,
 } from '../DateInputSegment';
+import { getRemainingParts } from '../utils/getRemainingParts';
 
 import {
   segmentPartsWrapperStyles,
   separatorLiteralStyles,
 } from './DateInputBox.styles';
 import { DateInputBoxProps, DateSegmentsState } from './DateInputBox.types';
-import { getRemainingParts } from './DateInputBox.utils';
 import { useDateSegments } from './useDateSegments';
 import { useFormatParts } from './useFormat';
 
@@ -29,6 +28,9 @@ import { useFormatParts } from './useFormat';
  *
  * Uses vars value & dateFormat with `Intl.DateTimeFormat.prototype.formatToParts()`
  * to determine the segment order and separator characters.
+ *
+ * Provided value is assumed to be UTC.
+ * Argument passed into `setValue` callback is also in UTC
  * @internal
  */
 export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
@@ -48,13 +50,11 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
      */
     const onSegmentsUpdate = (newSegments: DateSegmentsState) => {
       const { day, month, year } = newSegments;
-      const zonedDate = newDateFromSegments({ day, month, year });
+      /** New date in UTC */
+      const utcDate = newDateFromSegments({ day, month, year });
 
       // Only update the value iff all parts are set, and create a valid date.
-      if (zonedDate) {
-        /** New date in UTC */
-        const utcDate = zonedTimeToUtc(zonedDate, timeZone);
-
+      if (utcDate) {
         /** Whether we need to update the external value */
         const shouldUpdate = !value || !isSameDay(utcDate, value);
 
diff --git a/packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts b/packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts
index baca9044ef..343e453ab1 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts
@@ -50,7 +50,6 @@ export const useDateSegments = (
   // If `date` prop changes, update the segments
   useEffect(() => {
     if (date && !(prevDate && isSameDay(date, prevDate))) {
-      console.log('useDateSegments. Date Updated', { date, prevDate });
       const tzDate = toTimeZone(date, timeZone);
       const newSegments = getSegmentsFromDate(tzDate);
       onUpdate?.(newSegments);
diff --git a/packages/date-picker/src/DateInput/utils/getRemainingParts/getRemainingParts.spec.ts b/packages/date-picker/src/DateInput/utils/getRemainingParts/getRemainingParts.spec.ts
new file mode 100644
index 0000000000..97cec56b11
--- /dev/null
+++ b/packages/date-picker/src/DateInput/utils/getRemainingParts/getRemainingParts.spec.ts
@@ -0,0 +1,18 @@
+import { getRemainingParts } from '.';
+
+describe('packages/date-picker/date-input/utils/getRemainingParts', () => {
+  // * `getRemainingParts(right, 2, [a,b,c,d,e]) => [d,e]`
+  // *
+  // * `getRemainingParts(left, 2, [a,b,c,d,e]) => [b,a]`
+  test('right', () => {
+    const parts = getRemainingParts('right', 2, ['a', 'b', 'c', 'd', 'e']);
+    expect(parts).toHaveLength(2);
+    expect(parts).toEqual(expect.arrayContaining(['d', 'e']));
+  });
+
+  test('left', () => {
+    const parts = getRemainingParts('left', 2, ['a', 'b', 'c', 'd', 'e']);
+    expect(parts).toHaveLength(2);
+    expect(parts).toEqual(expect.arrayContaining(['b', 'a']));
+  });
+});
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.utils.ts b/packages/date-picker/src/DateInput/utils/getRemainingParts/index.ts
similarity index 100%
rename from packages/date-picker/src/DateInput/DateInputBox/DateInputBox.utils.ts
rename to packages/date-picker/src/DateInput/utils/getRemainingParts/index.ts
diff --git a/packages/date-picker/src/DatePicker.testUtils.ts b/packages/date-picker/src/DatePicker.testUtils.ts
new file mode 100644
index 0000000000..af534c9b43
--- /dev/null
+++ b/packages/date-picker/src/DatePicker.testUtils.ts
@@ -0,0 +1,20 @@
+/** Time zones used to test with */
+export const TimeZones = [
+  'Pacific/Honolulu',
+  'America/Los_Angeles',
+  'America/New_York',
+  'Europe/London',
+  'Asia/Istanbul',
+  'Asia/Seoul',
+  'Pacific/Auckland',
+];
+
+/** Locales (date formats) to test with:
+ *
+ * English-US
+ * English-UK
+ * German (Germany) (uses `.` char separator)
+ * Farsi-Afghanistan (week starts on Sat)
+ * English-Maldives (week starts on Fri.)
+ */
+export const Locales = ['iso8601', 'en-US', 'en-UK', 'de-DE', 'fa-AF', 'en-MV'];
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index b92319c460..230ed7f939 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -5,6 +5,7 @@ import { StoryFn } from '@storybook/react';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
+import { Locales, TimeZones } from '../DatePicker.testUtils';
 import {
   DatePickerContextProps,
   DatePickerProvider,
@@ -49,6 +50,10 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
   },
   argTypes: {
     value: { control: 'date' },
+    dateFormat: { control: 'select', options: Locales },
+    timeZone: { control: 'select', options: TimeZones },
+    min: { control: 'date' },
+    max: { control: 'date' },
   },
 };
 
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index f33fd16998..e2f460287d 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -1,11 +1,10 @@
 import React, { forwardRef, useMemo, useRef, useState } from 'react';
-import { utcToZonedTime } from 'date-fns-tz';
+import { isSameMonth, setMonth } from 'date-fns';
 
 import { useBackdropClick } from '@leafygreen-ui/hooks';
 
 import { DatePickerProvider } from '../DatePickerContext';
 import { toDate } from '../utils/toDate';
-import { toClientTimeZone, toTimeZone } from '../utils/toTimeZone';
 
 import { DatePickerProps } from './DatePicker.types';
 import { DatePickerInput } from './DatePickerInput';
@@ -13,7 +12,7 @@ import { DatePickerMenu } from './DatePickerMenu';
 
 export const DatePicker = forwardRef(
   ({
-    value,
+    value: valueProp,
     initialValue,
     onChange,
     handleValidation,
@@ -22,29 +21,17 @@ export const DatePicker = forwardRef(
     const inputRef = useRef<HTMLDivElement>(null);
     const menuRef = useRef<HTMLDivElement>(null);
     const [isOpen, setOpen] = useState(false);
-    const [month, setMonth] = useState<Date>(new Date('2023-09-11'));
+    const [displayMonth, setDisplayMonth] = useState<Date>(new Date());
 
-    const timeZonedValue = useMemo(() => {
-      const utcDate = toDate(value) as Date;
-      return utcDate
-        ? utcToZonedTime(utcDate, rest.timeZone ?? 'default')
-        : utcDate;
-    }, [rest.timeZone, value]);
-
-    console.log('Source', {
-      type: typeof value,
-      value,
-      iso: value ? new Date(value).toISOString() : '',
-      utc: value ? new Date(value).toUTCString() : '',
-      dateString: value ? new Date(value).toDateString() : '',
-      timeZonedValue,
-    });
+    const utcValue = useMemo(() => toDate(valueProp), [valueProp]);
 
     const updateValue = (newVal: Date | null) => {
-      const tzDate = newVal
-        ? toClientTimeZone(newVal, rest.timeZone ?? 'default')
-        : newVal;
-      onChange?.(tzDate);
+      // if the new value is not the current month, update the month
+      if (newVal && !isSameMonth(newVal, displayMonth)) {
+        setDisplayMonth(setMonth(displayMonth, newVal.getMonth()));
+      }
+
+      onChange?.(newVal);
     };
 
     useBackdropClick(
@@ -56,9 +43,7 @@ export const DatePicker = forwardRef(
     );
 
     const handleInputChange = (inputVal: Date | null) => {
-      console.log('InputChange', { inputVal });
-      updateValue(inputVal);
-      debugger;
+      if (inputVal !== utcValue) updateValue(inputVal);
     };
 
     const handleCellClick = (cellValue: Date) => {
@@ -67,14 +52,14 @@ export const DatePicker = forwardRef(
     };
 
     const handleMonthChange = (newMonth: Date) => {
-      setMonth(newMonth);
+      setDisplayMonth(newMonth);
     };
 
     return (
       <DatePickerProvider value={rest}>
         <DatePickerInput
           ref={inputRef}
-          value={toDate(value)}
+          value={utcValue}
           setValue={handleInputChange}
           onClick={() => {
             // TODO: Set focus to appropriate segment
@@ -84,9 +69,9 @@ export const DatePicker = forwardRef(
         <DatePickerMenu
           refEl={inputRef}
           ref={menuRef}
-          value={timeZonedValue}
+          value={utcValue}
           isOpen={isOpen}
-          month={month}
+          month={displayMonth}
           onCellClick={handleCellClick}
           onMonthChange={handleMonthChange}
           usePortal={true}
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index cbbeb8ef13..e24ffc4dbd 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -70,8 +70,9 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
                 state={getCellState(day)}
                 onMouseEnter={() => setHighlight(day)}
                 onClick={() => onCellClick(day)}
+                date-iso={day.toISOString()}
               >
-                {day?.getDate()}
+                {day.getDate()}
               </CalendarCell>
             )}
           </CalendarGrid>
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
index 968d1b546e..8156f84548 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
@@ -6,7 +6,7 @@ export type DatePickerMenuProps = PortalControlProps &
     /** Whether the calendar menu popover is open */
     isOpen: boolean;
 
-    /** The value of the component */
+    /** The value of the component, provided in UTC time */
     value: Date | null;
 
     /** The month to display in the calendar grid */
diff --git a/packages/date-picker/src/DatePickerContext/index.ts b/packages/date-picker/src/DatePickerContext/index.ts
index 6d92208e93..6c52124f34 100644
--- a/packages/date-picker/src/DatePickerContext/index.ts
+++ b/packages/date-picker/src/DatePickerContext/index.ts
@@ -3,4 +3,7 @@ export {
   DatePickerProvider,
   useDatePickerContext,
 } from './DatePickerContext';
-export { DatePickerContextProps } from './DatePickerContext.types';
+export {
+  DatePickerContextProps,
+  DatePickerProviderProps,
+} from './DatePickerContext.types';
diff --git a/packages/date-picker/src/constants.ts b/packages/date-picker/src/constants.ts
index 088976c92a..1335801288 100644
--- a/packages/date-picker/src/constants.ts
+++ b/packages/date-picker/src/constants.ts
@@ -2,8 +2,38 @@ import { range } from 'lodash';
 
 import { getMonthName } from './utils/getMonthName';
 
-// Compute the long & short form of each month
+// Compute the long & short form of each month index
 export const Months: Array<{
   long: string;
   short: string;
 }> = range(12).map(m => getMonthName(m));
+
+/** Maps the month name to its index */
+export enum Month {
+  January,
+  February,
+  March,
+  April,
+  May,
+  June,
+  July,
+  August,
+  September,
+  October,
+  November,
+  December,
+}
+
+export const daysPerWeek = 7 as const;
+
+export const DaysOfWeek = [
+  { long: 'Sunday', short: 'su' },
+  { long: 'Monday', short: 'mo' },
+  { long: 'Tuesday', short: 'tu' },
+  { long: 'Wednesday', short: 'we' },
+  { long: 'Thursday', short: 'th' },
+  { long: 'Friday', short: 'fr' },
+  { long: 'Saturday', short: 'sa' },
+] as const;
+
+export type DaysOfWeek = (typeof DaysOfWeek)[number];
diff --git a/packages/date-picker/src/utils/isValidSegment/index.ts b/packages/date-picker/src/utils/isValidSegment/index.ts
index a478363e68..3e57a0670a 100644
--- a/packages/date-picker/src/utils/isValidSegment/index.ts
+++ b/packages/date-picker/src/utils/isValidSegment/index.ts
@@ -9,8 +9,11 @@ import {
  * Returns whether a given value is a valid segment value
  */
 export const isValidSegment = (segment?: DateSegmentValue): segment is number =>
-  !isUndefined(segment) && !isNaN(Number(segment));
+  !isUndefined(segment) && !isNaN(Number(segment)) && Number(segment) > 0;
 
+/**
+ * Returns whether a given string is a valid segment name (day, month, year)
+ */
 export const isValidSegmentName = (name?: string): name is DateSegment => {
   return (
     !isUndefined(name) &&
diff --git a/packages/date-picker/src/utils/isValidSegment/isValidSegment.spec.ts b/packages/date-picker/src/utils/isValidSegment/isValidSegment.spec.ts
new file mode 100644
index 0000000000..4dad662d5c
--- /dev/null
+++ b/packages/date-picker/src/utils/isValidSegment/isValidSegment.spec.ts
@@ -0,0 +1,64 @@
+import { isValidSegment, isValidSegmentName } from '.';
+
+describe('packages/date-picker/utils/isValidSegment', () => {
+  describe('isValidSegment', () => {
+    test('undefined returns false', () => {
+      expect(isValidSegment()).toBeFalsy();
+    });
+
+    test('a string returns false', () => {
+      // @ts-expect-error
+      expect(isValidSegment('')).toBeFalsy();
+    });
+
+    test('NaN returns false', () => {
+      expect(isValidSegment(NaN)).toBeFalsy();
+    });
+
+    test('0 returns false', () => {
+      expect(isValidSegment(0)).toBeFalsy();
+    });
+
+    test('negative returns false', () => {
+      expect(isValidSegment(-1)).toBeFalsy();
+    });
+
+    test('1970 returns true', () => {
+      expect(isValidSegment(1970)).toBeTruthy();
+    });
+
+    test('1 returns true', () => {
+      expect(isValidSegment(1)).toBeTruthy();
+    });
+
+    test('2038 returns true', () => {
+      expect(isValidSegment(2038)).toBeTruthy();
+    });
+  });
+
+  describe('isValidSegmentName', () => {
+    test('undefined returns false', () => {
+      expect(isValidSegmentName()).toBeFalsy();
+    });
+
+    test('random string returns false', () => {
+      expect(isValidSegmentName('123')).toBeFalsy();
+    });
+
+    test('empty string returns false', () => {
+      expect(isValidSegmentName('')).toBeFalsy();
+    });
+
+    test('day string returns true', () => {
+      expect(isValidSegmentName('day')).toBeTruthy();
+    });
+
+    test('month string returns true', () => {
+      expect(isValidSegmentName('month')).toBeTruthy();
+    });
+
+    test('year string returns true', () => {
+      expect(isValidSegmentName('year')).toBeTruthy();
+    });
+  });
+});
diff --git a/packages/date-picker/src/utils/newDateFromSegments/index.ts b/packages/date-picker/src/utils/newDateFromSegments/index.ts
index 2d04f6096a..269c41ef5d 100644
--- a/packages/date-picker/src/utils/newDateFromSegments/index.ts
+++ b/packages/date-picker/src/utils/newDateFromSegments/index.ts
@@ -1,19 +1,14 @@
 import { DateSegmentsState } from '../../DateInput';
 import { isValidSegment } from '../isValidSegment';
 
-/** Constructs a date object from day, month, year segments */
+/** Constructs a date object in UTC from day, month, year segments */
 export const newDateFromSegments = (
   segments: DateSegmentsState,
 ): Date | undefined => {
   if (segments && Object.values(segments).every(isValidSegment)) {
     const { day, month, year } = segments;
     return new Date(
-      year as number,
-      (month as number) - 1,
-      day as number,
-      0,
-      0,
-      0,
+      Date.UTC(year as number, (month as number) - 1, day as number),
     );
   }
 };
diff --git a/packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts b/packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts
index 3c1c297de0..c3f5c475f7 100644
--- a/packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts
+++ b/packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts
@@ -1,17 +1,16 @@
 import { newDateFromSegments } from '.';
 
 describe('packages/date=picker/utils/newDateFromSegments', () => {
-  test('iso value', () => {
+  test('returns the date in UTC', () => {
     const newDate = newDateFromSegments({
       day: 1,
       month: 1,
       year: 2023,
     });
-    // TODO:  FIXME:
     expect(newDate?.toISOString()).toEqual('2023-01-01T00:00:00.000Z');
   });
 
-  test('undefined', () => {
+  test('returns undefined if any segment is undefined', () => {
     const newDate = newDateFromSegments({
       day: undefined,
       month: 1,
diff --git a/packages/date-picker/src/utils/setToUTCMidnight/index.ts b/packages/date-picker/src/utils/setToUTCMidnight/index.ts
new file mode 100644
index 0000000000..23a97e719a
--- /dev/null
+++ b/packages/date-picker/src/utils/setToUTCMidnight/index.ts
@@ -0,0 +1,18 @@
+/** Returns a new date set to midnight */
+export const setToUTCMidnight = (date: Date): Date => {
+  const midnight = new Date(date);
+  midnight.setUTCHours(0);
+  midnight.setUTCMinutes(0);
+  midnight.setUTCSeconds(0);
+  midnight.setUTCMilliseconds(0);
+  return midnight;
+};
+
+export const setToMidnight = (date: Date): Date => {
+  const midnight = new Date(date);
+  midnight.setHours(0);
+  midnight.setMinutes(0);
+  midnight.setSeconds(0);
+  midnight.setMilliseconds(0);
+  return midnight;
+};
diff --git a/packages/date-picker/src/utils/setToUTCMidnight/setToUTCMidnight.spec.ts b/packages/date-picker/src/utils/setToUTCMidnight/setToUTCMidnight.spec.ts
new file mode 100644
index 0000000000..854b340a34
--- /dev/null
+++ b/packages/date-picker/src/utils/setToUTCMidnight/setToUTCMidnight.spec.ts
@@ -0,0 +1,12 @@
+import { setToUTCMidnight } from '.';
+
+describe('packages/date-picker/utils/setToUTCMidnight', () => {
+  test('sets a date to UTC midnight', () => {
+    const date = new Date();
+    const midnight = setToUTCMidnight(date);
+    expect(midnight.getUTCHours()).toBe(0);
+    expect(midnight.getUTCMinutes()).toBe(0);
+    expect(midnight.getUTCSeconds()).toBe(0);
+    expect(midnight.getUTCMilliseconds()).toBe(0);
+  });
+});
diff --git a/packages/date-picker/src/utils/toDate.ts b/packages/date-picker/src/utils/toDate/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/toDate.ts
rename to packages/date-picker/src/utils/toDate/index.ts
diff --git a/packages/date-picker/src/utils/toDate/toDate.spec.ts b/packages/date-picker/src/utils/toDate/toDate.spec.ts
new file mode 100644
index 0000000000..2f425b55fd
--- /dev/null
+++ b/packages/date-picker/src/utils/toDate/toDate.spec.ts
@@ -0,0 +1,4 @@
+describe('packages/date-picker/utils/toDate', () => {
+  // TODO:
+  test.todo('');
+});
diff --git a/packages/date-picker/src/utils/toTimeZone/toTimeZone.spec.ts b/packages/date-picker/src/utils/toTimeZone/toTimeZone.spec.ts
new file mode 100644
index 0000000000..ec9f565b4c
--- /dev/null
+++ b/packages/date-picker/src/utils/toTimeZone/toTimeZone.spec.ts
@@ -0,0 +1,19 @@
+import { toTimeZone } from '.';
+
+describe('packages/date-picker/utils/toTimeZone', () => {
+  const clientMidnight = new Date('2023-09-01T00:00:00.000');
+
+  test('ISO string', () => {
+    expect(clientMidnight.toISOString()).toEqual('2023-09-01T04:00:00.000Z');
+  });
+
+  test('converting to America/New_York does nothing', () => {
+    const nyc = toTimeZone(clientMidnight, 'America/New_York');
+    expect(nyc.toISOString()).toEqual(clientMidnight.toISOString());
+  });
+
+  test('converts client midnight to 4:00 UTC', () => {
+    const utc = toTimeZone(clientMidnight, 'UTC');
+    expect(utc.toISOString()).toEqual('2023-09-01T04:00:00.000Z');
+  });
+});

From 8127f3f98cfc0edf7960f0fc28f110eb5eb5b5c9 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 6 Sep 2023 12:20:36 -0400
Subject: [PATCH 061/351] rm tz conversion from input box. move some utils

---
 .../Calendar/MenuWrapper/MenuWrapper.spec.tsx |  7 +---
 .../src/DateInput/DateInput.types.ts          | 17 +++++++++
 .../DateInputBox/DateInputBox.stories.tsx     |  2 +-
 .../DateInput/DateInputBox/DateInputBox.tsx   | 14 +++----
 .../DateInputBox/DateInputBox.types.ts        |  7 ----
 .../src/DateInput/DateInputBox/index.ts       |  5 +--
 .../DateInputSegment.styles.ts                |  3 +-
 .../DateInputSegment/DateInputSegment.tsx     |  8 +---
 .../DateInputSegment.types.ts                 |  9 +----
 .../src/DateInput/DateInputSegment/index.ts   |  8 +---
 .../utils/getSegmentsFromDate/index.ts        | 10 +++++
 .../useDateSegments/index.ts}                 | 37 +++++++++----------
 .../useFormat.ts => utils/useFormat/index.ts} |  2 +-
 .../valueFormatter/index.ts}                  |  4 +-
 .../valueFormatter}/valueFormatter.spec.ts    |  4 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    |  7 +---
 .../src/DatePicker/DatePickerMenu/index.ts    |  3 +-
 .../src/utils/isValidSegment/index.ts         |  5 +--
 .../date-picker/src/utils/toTimeZone/index.ts |  6 ++-
 .../src/utils/toTimeZone/toTimeZone.spec.ts   |  2 +-
 20 files changed, 77 insertions(+), 83 deletions(-)
 create mode 100644 packages/date-picker/src/DateInput/DateInput.types.ts
 create mode 100644 packages/date-picker/src/DateInput/utils/getSegmentsFromDate/index.ts
 rename packages/date-picker/src/DateInput/{DateInputBox/useDateSegments.ts => utils/useDateSegments/index.ts} (67%)
 rename packages/date-picker/src/DateInput/{DateInputBox/useFormat.ts => utils/useFormat/index.ts} (95%)
 rename packages/date-picker/src/DateInput/{DateInputSegment/utils/valueFormatter.ts => utils/valueFormatter/index.ts} (83%)
 rename packages/date-picker/src/DateInput/{DateInputSegment/utils => utils/valueFormatter}/valueFormatter.spec.ts (93%)

diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx
index 668d1123af..940ffe2aba 100644
--- a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx
+++ b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx
@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { MenuWrapper } from '.';
 
 describe('packages/menu-wrapper', () => {
-  test('condition', () => {
-
-  })
-})
+  test('condition', () => {});
+});
diff --git a/packages/date-picker/src/DateInput/DateInput.types.ts b/packages/date-picker/src/DateInput/DateInput.types.ts
new file mode 100644
index 0000000000..5730942ac5
--- /dev/null
+++ b/packages/date-picker/src/DateInput/DateInput.types.ts
@@ -0,0 +1,17 @@
+export const DateSegment = {
+  Day: 'day',
+  Month: 'month',
+  Year: 'year',
+} as const;
+export type DateSegment = (typeof DateSegment)[keyof typeof DateSegment];
+
+export type DateSegmentValue = number;
+
+export type DateSegmentsState = Record<
+  DateSegment,
+  DateSegmentValue | undefined
+>;
+
+export function isDateSegment(str: string): str is DateSegment {
+  return ['day', 'month', 'year'].includes(str);
+}
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
index eb2637c999..c2f753c232 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -14,7 +14,7 @@ import {
 
 import { DateInputBox } from './DateInputBox';
 
-const testDate = new Date('1993-12-26');
+const testDate = new Date(Date.UTC(1993, 12, 26));
 
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
   <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index 8c06652474..a547c21413 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -9,19 +9,20 @@ import { useDatePickerContext } from '../../DatePickerContext';
 import { isValidSegmentName } from '../../utils/isValidSegment';
 import { newDateFromSegments } from '../../utils/newDateFromSegments';
 import {
-  DateInputSegment,
   DateSegment,
+  DateSegmentsState,
   isDateSegment,
-} from '../DateInputSegment';
+} from '../DateInput.types';
+import { DateInputSegment } from '../DateInputSegment';
 import { getRemainingParts } from '../utils/getRemainingParts';
+import { useDateSegments } from '../utils/useDateSegments';
+import { useFormatParts } from '../utils/useFormat';
 
 import {
   segmentPartsWrapperStyles,
   separatorLiteralStyles,
 } from './DateInputBox.styles';
-import { DateInputBoxProps, DateSegmentsState } from './DateInputBox.types';
-import { useDateSegments } from './useDateSegments';
-import { useFormatParts } from './useFormat';
+import { DateInputBoxProps } from './DateInputBox.types';
 
 /**
  * Renders a styled date input with appropriate segment order & separator characters.
@@ -38,7 +39,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     { value, setValue, className, labelledBy, ...rest }: DateInputBoxProps,
     fwdRef,
   ) => {
-    const { dateFormat, timeZone } = useDatePickerContext();
+    const { dateFormat } = useDatePickerContext();
     const containerRef = useForwardedRef(fwdRef, null);
     const segmentRefs = useDynamicRefs<HTMLInputElement>({ prefix: 'segment' });
 
@@ -69,7 +70,6 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
 
     // Keep track of each date segment
     const { segments, setSegment } = useDateSegments(value, {
-      timeZone,
       onUpdate: onSegmentsUpdate,
     });
 
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
index 7f2aede7a9..7915633983 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
@@ -1,7 +1,5 @@
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
-import { DateSegment, DateSegmentValue } from '../DateInputSegment';
-
 export interface DateInputBoxProps
   extends Omit<HTMLElementProps<'div'>, 'onChange'> {
   /**
@@ -20,8 +18,3 @@ export interface DateInputBoxProps
    */
   labelledBy?: string;
 }
-
-export type DateSegmentsState = Record<
-  DateSegment,
-  DateSegmentValue | undefined
->;
diff --git a/packages/date-picker/src/DateInput/DateInputBox/index.ts b/packages/date-picker/src/DateInput/DateInputBox/index.ts
index 4fe01f82e3..6334727ac3 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/index.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/index.ts
@@ -1,5 +1,2 @@
 export { DateInputBox } from './DateInputBox';
-export type {
-  DateInputBoxProps,
-  DateSegmentsState,
-} from './DateInputBox.types';
+export type { DateInputBoxProps } from './DateInputBox.types';
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts
index d4f8b7a57c..b2231ce31c 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts
@@ -8,8 +8,9 @@ import {
   typeScales,
 } from '@leafygreen-ui/tokens';
 
+import { DateSegment } from '../DateInput.types';
+
 import { characterWidth, charsPerSegment } from './constants';
-import { DateSegment } from './DateInputSegment.types';
 
 export const baseStyles = css`
   font-family: ${fontFamilies.default};
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index e11f319632..4d1ba1c542 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -7,8 +7,8 @@ import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
 import { useDatePickerContext } from '../../DatePickerContext';
+import { getValueFormatter } from '../utils/valueFormatter';
 
-import { getValueFormatter } from './utils/valueFormatter';
 import { defaultMax, defaultMin, defaultPlaceholder } from './constants';
 import {
   baseStyles,
@@ -17,11 +17,7 @@ import {
   segmentThemeStyles,
   segmentWidthStyles,
 } from './DateInputSegment.styles';
-import { DateInputSegmentProps, DateSegment } from './DateInputSegment.types';
-
-export function isDateSegment(str: string): str is DateSegment {
-  return ['day', 'month', 'year'].includes(str);
-}
+import { DateInputSegmentProps } from './DateInputSegment.types';
 
 export const DateInputSegment = React.forwardRef<
   HTMLInputElement,
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
index 8b797cfbcd..4c287255bb 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
@@ -1,13 +1,6 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
-export const DateSegment = {
-  Day: 'day',
-  Month: 'month',
-  Year: 'year',
-} as const;
-export type DateSegment = (typeof DateSegment)[keyof typeof DateSegment];
-
-export type DateSegmentValue = number;
+import { DateSegment, DateSegmentValue } from '../DateInput.types';
 
 export interface DateInputSegmentProps
   extends DarkModeProps,
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/index.ts b/packages/date-picker/src/DateInput/DateInputSegment/index.ts
index f280f2822d..ca415a1130 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/index.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/index.ts
@@ -1,6 +1,2 @@
-export { DateInputSegment, isDateSegment } from './DateInputSegment';
-export {
-  type DateInputSegmentProps,
-  DateSegment,
-  type DateSegmentValue,
-} from './DateInputSegment.types';
+export { DateInputSegment } from './DateInputSegment';
+export { type DateInputSegmentProps } from './DateInputSegment.types';
diff --git a/packages/date-picker/src/DateInput/utils/getSegmentsFromDate/index.ts b/packages/date-picker/src/DateInput/utils/getSegmentsFromDate/index.ts
new file mode 100644
index 0000000000..57ba2ed6c2
--- /dev/null
+++ b/packages/date-picker/src/DateInput/utils/getSegmentsFromDate/index.ts
@@ -0,0 +1,10 @@
+import { DateSegmentsState } from 'src/DateInput/DateInput.types';
+
+/** Returns a single object with day, month & year segments */
+export const getSegmentsFromDate = (date: Date | null): DateSegmentsState => {
+  return {
+    day: date ? date.getUTCDate() : undefined,
+    month: date ? date.getUTCMonth() + 1 : undefined,
+    year: date ? date.getUTCFullYear() : undefined,
+  } as DateSegmentsState;
+};
diff --git a/packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts b/packages/date-picker/src/DateInput/utils/useDateSegments/index.ts
similarity index 67%
rename from packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts
rename to packages/date-picker/src/DateInput/utils/useDateSegments/index.ts
index 343e453ab1..7c65924753 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/useDateSegments.ts
+++ b/packages/date-picker/src/DateInput/utils/useDateSegments/index.ts
@@ -1,23 +1,30 @@
 import { useEffect, useReducer } from 'react';
-import { getDate, getMonth, getYear, isSameDay } from 'date-fns';
+import { isSameDay } from 'date-fns';
 
 import { usePrevious } from '@leafygreen-ui/hooks';
 
-import { toTimeZone } from '../../utils/toTimeZone';
-import type { DateSegment, DateSegmentValue } from '../DateInputSegment';
-
-import { DateSegmentsState } from './DateInputBox.types';
+import {
+  DateSegment,
+  DateSegmentsState,
+  DateSegmentValue,
+} from '../../DateInput.types';
+import { getSegmentsFromDate } from '../getSegmentsFromDate';
 
 type OnUpdateCallback = (value: DateSegmentsState) => void;
 
 interface UseDateSegmentsOptions {
   /** A formatter used to separate the date value into segments */
-  timeZone: string;
+  // timeZone: string;
 
   /** A callback fired when the segment values change */
   onUpdate?: OnUpdateCallback;
 }
 
+interface UseDateSegmentsReturnValue {
+  segments: DateSegmentsState;
+  setSegment: (segment: DateSegment, value: DateSegmentValue) => void;
+}
+
 /** Merges old state & new state */
 const dateSegmentsReducer = (
   currentState: DateSegmentsState,
@@ -38,8 +45,8 @@ const dateSegmentsReducer = (
 export const useDateSegments = (
   /** Provided date is relative to the client's time zone */
   date: Date | null,
-  { timeZone, onUpdate }: UseDateSegmentsOptions,
-) => {
+  { onUpdate }: UseDateSegmentsOptions,
+): UseDateSegmentsReturnValue => {
   const [segments, dispatch] = useReducer(
     dateSegmentsReducer,
     date,
@@ -50,12 +57,11 @@ export const useDateSegments = (
   // If `date` prop changes, update the segments
   useEffect(() => {
     if (date && !(prevDate && isSameDay(date, prevDate))) {
-      const tzDate = toTimeZone(date, timeZone);
-      const newSegments = getSegmentsFromDate(tzDate);
+      const newSegments = getSegmentsFromDate(date);
       onUpdate?.(newSegments);
       dispatch(newSegments);
     }
-  }, [date, onUpdate, prevDate, timeZone]);
+  }, [date, onUpdate, prevDate]);
 
   /**
    * Custom dispatch that triggers the provided side effects, and updates state
@@ -74,12 +80,3 @@ export const useDateSegments = (
     setSegment,
   };
 };
-
-/** Returns a single object with day, month & year segments */
-const getSegmentsFromDate = (date: Date | null): DateSegmentsState => {
-  return {
-    day: date ? getDate(date) : undefined,
-    month: date ? getMonth(date) + 1 : undefined,
-    year: date ? getYear(date) : undefined,
-  } as DateSegmentsState;
-};
diff --git a/packages/date-picker/src/DateInput/DateInputBox/useFormat.ts b/packages/date-picker/src/DateInput/utils/useFormat/index.ts
similarity index 95%
rename from packages/date-picker/src/DateInput/DateInputBox/useFormat.ts
rename to packages/date-picker/src/DateInput/utils/useFormat/index.ts
index 42c08fdf7d..f7a2fbb4ac 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/useFormat.ts
+++ b/packages/date-picker/src/DateInput/utils/useFormat/index.ts
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 
 import { consoleOnce } from '@leafygreen-ui/lib';
 
-import { isValidLocale } from '../../utils/isValidLocale';
+import { isValidLocale } from '../../../utils/isValidLocale';
 
 const now = new Date();
 const ISO = 'iso8601';
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.ts b/packages/date-picker/src/DateInput/utils/valueFormatter/index.ts
similarity index 83%
rename from packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.ts
rename to packages/date-picker/src/DateInput/utils/valueFormatter/index.ts
index 658ab5622a..79fcfa7b47 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.ts
+++ b/packages/date-picker/src/DateInput/utils/valueFormatter/index.ts
@@ -1,8 +1,8 @@
 import { padStart } from 'lodash';
 
 import { isZeroLike } from '../../../utils/isZeroLike';
-import { charsPerSegment } from '../constants';
-import { DateSegment } from '../DateInputSegment.types';
+import { DateSegment } from '../../DateInput.types';
+import { charsPerSegment } from '../../DateInputSegment/constants';
 
 export const getValueFormatter =
   (segment: DateSegment) => (val: string | number | undefined) => {
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.spec.ts b/packages/date-picker/src/DateInput/utils/valueFormatter/valueFormatter.spec.ts
similarity index 93%
rename from packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.spec.ts
rename to packages/date-picker/src/DateInput/utils/valueFormatter/valueFormatter.spec.ts
index bb1a3e727b..f2a47445cb 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/utils/valueFormatter.spec.ts
+++ b/packages/date-picker/src/DateInput/utils/valueFormatter/valueFormatter.spec.ts
@@ -1,6 +1,6 @@
-import { DateSegment } from '../DateInputSegment.types';
+import { DateSegment } from '../../DateInput.types';
 
-import { getValueFormatter } from './valueFormatter';
+import { getValueFormatter } from '.';
 
 describe('utils/valueFormatter', () => {
   describe.each(['day', 'month'] as Array<DateSegment>)('', segment => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index e93ba90d1d..e11f199e5d 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { DatePickerMenu } from '.';
 
 describe('packages/date-picker-menu', () => {
-  test('condition', () => {
-
-  })
-})
+  test('condition', () => {});
+});
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/index.ts
index 8170764b23..e5aad2fee0 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/index.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/index.ts
@@ -1,3 +1,2 @@
-
-export  { DatePickerMenu } from './DatePickerMenu';
+export { DatePickerMenu } from './DatePickerMenu';
 export { DatePickerMenuProps } from './DatePickerMenu.types';
diff --git a/packages/date-picker/src/utils/isValidSegment/index.ts b/packages/date-picker/src/utils/isValidSegment/index.ts
index 3e57a0670a..0a7b4af61e 100644
--- a/packages/date-picker/src/utils/isValidSegment/index.ts
+++ b/packages/date-picker/src/utils/isValidSegment/index.ts
@@ -1,9 +1,6 @@
 import { isUndefined } from 'lodash';
 
-import {
-  DateSegment,
-  DateSegmentValue,
-} from '../../DateInput/DateInputSegment';
+import { DateSegment, DateSegmentValue } from '../../DateInput/DateInput.types';
 
 /**
  * Returns whether a given value is a valid segment value
diff --git a/packages/date-picker/src/utils/toTimeZone/index.ts b/packages/date-picker/src/utils/toTimeZone/index.ts
index 27bd9ff12e..53382996cb 100644
--- a/packages/date-picker/src/utils/toTimeZone/index.ts
+++ b/packages/date-picker/src/utils/toTimeZone/index.ts
@@ -2,6 +2,7 @@ import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
 
 /**
  * Converts a date in the client's time zone to
+ * @deprecated
  */
 export const toTimeZone = (clientDate: Date | string, timeZone: string) => {
   const clientTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -10,7 +11,10 @@ export const toTimeZone = (clientDate: Date | string, timeZone: string) => {
   return tz;
 };
 
-/** Converts a date from a given time zone to the client's time zone */
+/**
+ * Converts a date from a given time zone to the client's time zone
+ * @deprecated
+ */
 export const toClientTimeZone = (
   sourceDate: Date | string,
   sourceTimeZone: string,
diff --git a/packages/date-picker/src/utils/toTimeZone/toTimeZone.spec.ts b/packages/date-picker/src/utils/toTimeZone/toTimeZone.spec.ts
index ec9f565b4c..4b24ab5f6b 100644
--- a/packages/date-picker/src/utils/toTimeZone/toTimeZone.spec.ts
+++ b/packages/date-picker/src/utils/toTimeZone/toTimeZone.spec.ts
@@ -1,6 +1,6 @@
 import { toTimeZone } from '.';
 
-describe('packages/date-picker/utils/toTimeZone', () => {
+describe.skip('packages/date-picker/utils/toTimeZone', () => {
   const clientMidnight = new Date('2023-09-01T00:00:00.000');
 
   test('ISO string', () => {

From 9e3057a652a3448978e7c654e964d93bb44b2f9d Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 6 Sep 2023 13:00:22 -0400
Subject: [PATCH 062/351] moves all utils to single dir

---
 .../Calendar/CalendarGrid/CalendarGrid.tsx    |  2 +-
 .../DateInput/DateInputBox/DateInputBox.tsx   |  6 ++---
 .../DateInputSegment/DateInputSegment.tsx     |  2 +-
 .../utils => hooks}/useDateSegments/index.ts  |  4 ++--
 .../utils => hooks}/useFormat/index.ts        |  2 +-
 .../getRemainingParts.spec.ts                 |  7 +++---
 .../utils/getRemainingParts/index.ts          |  0
 .../getSegmentsFromDate.spec.ts               |  0
 .../utils/getSegmentsFromDate/index.ts        |  0
 .../utils/getWeeksArray/getWeeksArray.spec.ts | 23 ++-----------------
 .../utils/getWeeksArray/index.ts              | 14 ++---------
 .../src/utils/setToUTCMidnight/index.ts       |  6 ++++-
 .../utils/valueFormatter/index.ts             |  6 ++---
 .../valueFormatter/valueFormatter.spec.ts     |  4 ++--
 14 files changed, 25 insertions(+), 51 deletions(-)
 rename packages/date-picker/src/{DateInput/utils => hooks}/useDateSegments/index.ts (94%)
 rename packages/date-picker/src/{DateInput/utils => hooks}/useFormat/index.ts (95%)
 rename packages/date-picker/src/{DateInput => }/utils/getRemainingParts/getRemainingParts.spec.ts (69%)
 rename packages/date-picker/src/{DateInput => }/utils/getRemainingParts/index.ts (100%)
 create mode 100644 packages/date-picker/src/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
 rename packages/date-picker/src/{DateInput => }/utils/getSegmentsFromDate/index.ts (100%)
 rename packages/date-picker/src/{Calendar => }/utils/getWeeksArray/getWeeksArray.spec.ts (79%)
 rename packages/date-picker/src/{Calendar => }/utils/getWeeksArray/index.ts (84%)
 rename packages/date-picker/src/{DateInput => }/utils/valueFormatter/index.ts (75%)
 rename packages/date-picker/src/{DateInput => }/utils/valueFormatter/valueFormatter.spec.ts (92%)

diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index bebfa40415..968d5803ca 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -6,7 +6,7 @@ import { Disclaimer } from '@leafygreen-ui/typography';
 
 import { DaysOfWeek, daysPerWeek } from '../../constants';
 import { useDatePickerContext } from '../../DatePickerContext';
-import { getWeeksArray } from '../utils/getWeeksArray';
+import { getWeeksArray } from '../../utils/getWeeksArray';
 
 import { calendarHeaderCellStyles } from './CalendarGrid.styles';
 import { CalendarGridProps } from './CalendarGrid.types';
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index a547c21413..e3e9b081c2 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -6,6 +6,9 @@ import { useDynamicRefs, useForwardedRef } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../DatePickerContext';
+import { useDateSegments } from '../../hooks/useDateSegments';
+import { useFormatParts } from '../../hooks/useFormat';
+import { getRemainingParts } from '../../utils/getRemainingParts';
 import { isValidSegmentName } from '../../utils/isValidSegment';
 import { newDateFromSegments } from '../../utils/newDateFromSegments';
 import {
@@ -14,9 +17,6 @@ import {
   isDateSegment,
 } from '../DateInput.types';
 import { DateInputSegment } from '../DateInputSegment';
-import { getRemainingParts } from '../utils/getRemainingParts';
-import { useDateSegments } from '../utils/useDateSegments';
-import { useFormatParts } from '../utils/useFormat';
 
 import {
   segmentPartsWrapperStyles,
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index 4d1ba1c542..1f956fcfcf 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -7,7 +7,7 @@ import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
 import { useDatePickerContext } from '../../DatePickerContext';
-import { getValueFormatter } from '../utils/valueFormatter';
+import { getValueFormatter } from '../../utils/valueFormatter';
 
 import { defaultMax, defaultMin, defaultPlaceholder } from './constants';
 import {
diff --git a/packages/date-picker/src/DateInput/utils/useDateSegments/index.ts b/packages/date-picker/src/hooks/useDateSegments/index.ts
similarity index 94%
rename from packages/date-picker/src/DateInput/utils/useDateSegments/index.ts
rename to packages/date-picker/src/hooks/useDateSegments/index.ts
index 7c65924753..39947ffbfa 100644
--- a/packages/date-picker/src/DateInput/utils/useDateSegments/index.ts
+++ b/packages/date-picker/src/hooks/useDateSegments/index.ts
@@ -7,8 +7,8 @@ import {
   DateSegment,
   DateSegmentsState,
   DateSegmentValue,
-} from '../../DateInput.types';
-import { getSegmentsFromDate } from '../getSegmentsFromDate';
+} from '../../DateInput/DateInput.types';
+import { getSegmentsFromDate } from '../../utils/getSegmentsFromDate';
 
 type OnUpdateCallback = (value: DateSegmentsState) => void;
 
diff --git a/packages/date-picker/src/DateInput/utils/useFormat/index.ts b/packages/date-picker/src/hooks/useFormat/index.ts
similarity index 95%
rename from packages/date-picker/src/DateInput/utils/useFormat/index.ts
rename to packages/date-picker/src/hooks/useFormat/index.ts
index f7a2fbb4ac..42c08fdf7d 100644
--- a/packages/date-picker/src/DateInput/utils/useFormat/index.ts
+++ b/packages/date-picker/src/hooks/useFormat/index.ts
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 
 import { consoleOnce } from '@leafygreen-ui/lib';
 
-import { isValidLocale } from '../../../utils/isValidLocale';
+import { isValidLocale } from '../../utils/isValidLocale';
 
 const now = new Date();
 const ISO = 'iso8601';
diff --git a/packages/date-picker/src/DateInput/utils/getRemainingParts/getRemainingParts.spec.ts b/packages/date-picker/src/utils/getRemainingParts/getRemainingParts.spec.ts
similarity index 69%
rename from packages/date-picker/src/DateInput/utils/getRemainingParts/getRemainingParts.spec.ts
rename to packages/date-picker/src/utils/getRemainingParts/getRemainingParts.spec.ts
index 97cec56b11..44f65262d4 100644
--- a/packages/date-picker/src/DateInput/utils/getRemainingParts/getRemainingParts.spec.ts
+++ b/packages/date-picker/src/utils/getRemainingParts/getRemainingParts.spec.ts
@@ -1,15 +1,14 @@
 import { getRemainingParts } from '.';
 
-describe('packages/date-picker/date-input/utils/getRemainingParts', () => {
-  // * `getRemainingParts(right, 2, [a,b,c,d,e]) => [d,e]`
-  // *
-  // * `getRemainingParts(left, 2, [a,b,c,d,e]) => [b,a]`
+describe('packages/date-picker/utils/getRemainingParts', () => {
+  // `getRemainingParts(right, 2, [a,b,c,d,e]) => [d,e]`
   test('right', () => {
     const parts = getRemainingParts('right', 2, ['a', 'b', 'c', 'd', 'e']);
     expect(parts).toHaveLength(2);
     expect(parts).toEqual(expect.arrayContaining(['d', 'e']));
   });
 
+  // `getRemainingParts(left, 2, [a,b,c,d,e]) => [b,a]`
   test('left', () => {
     const parts = getRemainingParts('left', 2, ['a', 'b', 'c', 'd', 'e']);
     expect(parts).toHaveLength(2);
diff --git a/packages/date-picker/src/DateInput/utils/getRemainingParts/index.ts b/packages/date-picker/src/utils/getRemainingParts/index.ts
similarity index 100%
rename from packages/date-picker/src/DateInput/utils/getRemainingParts/index.ts
rename to packages/date-picker/src/utils/getRemainingParts/index.ts
diff --git a/packages/date-picker/src/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts b/packages/date-picker/src/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/date-picker/src/DateInput/utils/getSegmentsFromDate/index.ts b/packages/date-picker/src/utils/getSegmentsFromDate/index.ts
similarity index 100%
rename from packages/date-picker/src/DateInput/utils/getSegmentsFromDate/index.ts
rename to packages/date-picker/src/utils/getSegmentsFromDate/index.ts
diff --git a/packages/date-picker/src/Calendar/utils/getWeeksArray/getWeeksArray.spec.ts b/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts
similarity index 79%
rename from packages/date-picker/src/Calendar/utils/getWeeksArray/getWeeksArray.spec.ts
rename to packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts
index 46c5269619..1eacd79fb1 100644
--- a/packages/date-picker/src/Calendar/utils/getWeeksArray/getWeeksArray.spec.ts
+++ b/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts
@@ -1,29 +1,10 @@
-import { utcToZonedTime } from 'date-fns-tz';
 import { isUndefined, padStart, range } from 'lodash';
 
-import { Month } from '../../../constants';
+import { Month } from '../../constants';
 
 import { getWeeksArray } from '.';
 
-describe.skip('utcToZonedTime', () => {
-  const date = new Date(Date.UTC(2023, 8 /* Sept */, 1));
-
-  test('date is in UTC', () => {
-    expect(date.toISOString()).toEqual('2023-09-01T00:00:00.000Z');
-  });
-
-  test('converting to UTC has no effect', () => {
-    const utc = utcToZonedTime(date, 'UTC');
-    expect(utc.toISOString()).toEqual(date.toISOString());
-  });
-
-  test('converting to America/New_York rolls back -4 for EDT', () => {
-    const nyc = utcToZonedTime(date, 'America/New_York');
-    expect(nyc.toISOString()).toEqual('2023-08-31T20:00:00.000Z');
-  });
-});
-
-describe.skip('packages/date-picker/calendar/utils/getWeeksArray', () => {
+describe('packages/date-picker/utils/getWeeksArray', () => {
   test('returned array has the correct number of elements', () => {
     const month = new Date(Date.UTC(2023, Month.August, 1));
     const arr = getWeeksArray(month, {
diff --git a/packages/date-picker/src/Calendar/utils/getWeeksArray/index.ts b/packages/date-picker/src/utils/getWeeksArray/index.ts
similarity index 84%
rename from packages/date-picker/src/Calendar/utils/getWeeksArray/index.ts
rename to packages/date-picker/src/utils/getWeeksArray/index.ts
index ac7cc78597..790a7bc0cf 100644
--- a/packages/date-picker/src/Calendar/utils/getWeeksArray/index.ts
+++ b/packages/date-picker/src/utils/getWeeksArray/index.ts
@@ -3,12 +3,8 @@ import { utcToZonedTime } from 'date-fns-tz';
 import { chunk, fill, range } from 'lodash';
 import { getWeekStartByLocale } from 'weekstart';
 
-import { daysPerWeek } from '../../../constants';
-import { BaseDatePickerProps } from '../../../types';
-import {
-  setToMidnight,
-  setToUTCMidnight,
-} from '../../../utils/setToUTCMidnight';
+import { daysPerWeek } from '../../constants';
+import { BaseDatePickerProps } from '../../types';
 
 interface GetWeeksArrayOptions
   extends Required<Pick<BaseDatePickerProps, 'dateFormat' | 'timeZone'>> {}
@@ -50,12 +46,6 @@ export const getWeeksArray = (
   // splice in enough empty elements so that the first is in the right column
   allDays.splice(0, 0, ...fill(range(startColumn), null));
 
-  console.log({
-    timeZone,
-    mo: month.toISOString(),
-    tz: tzMonth.toISOString(),
-  });
-
   // Break the array into chunks of 7
   const weeks = chunk(allDays, daysPerWeek);
 
diff --git a/packages/date-picker/src/utils/setToUTCMidnight/index.ts b/packages/date-picker/src/utils/setToUTCMidnight/index.ts
index 23a97e719a..4a9d937a28 100644
--- a/packages/date-picker/src/utils/setToUTCMidnight/index.ts
+++ b/packages/date-picker/src/utils/setToUTCMidnight/index.ts
@@ -1,4 +1,7 @@
-/** Returns a new date set to midnight */
+/**
+ * Returns a new date set to midnight
+ * @deprecated
+ */
 export const setToUTCMidnight = (date: Date): Date => {
   const midnight = new Date(date);
   midnight.setUTCHours(0);
@@ -8,6 +11,7 @@ export const setToUTCMidnight = (date: Date): Date => {
   return midnight;
 };
 
+/** @deprecated */
 export const setToMidnight = (date: Date): Date => {
   const midnight = new Date(date);
   midnight.setHours(0);
diff --git a/packages/date-picker/src/DateInput/utils/valueFormatter/index.ts b/packages/date-picker/src/utils/valueFormatter/index.ts
similarity index 75%
rename from packages/date-picker/src/DateInput/utils/valueFormatter/index.ts
rename to packages/date-picker/src/utils/valueFormatter/index.ts
index 79fcfa7b47..1af15a1f7c 100644
--- a/packages/date-picker/src/DateInput/utils/valueFormatter/index.ts
+++ b/packages/date-picker/src/utils/valueFormatter/index.ts
@@ -1,8 +1,8 @@
 import { padStart } from 'lodash';
 
-import { isZeroLike } from '../../../utils/isZeroLike';
-import { DateSegment } from '../../DateInput.types';
-import { charsPerSegment } from '../../DateInputSegment/constants';
+import { DateSegment } from '../../DateInput/DateInput.types';
+import { charsPerSegment } from '../../DateInput/DateInputSegment/constants';
+import { isZeroLike } from '../isZeroLike';
 
 export const getValueFormatter =
   (segment: DateSegment) => (val: string | number | undefined) => {
diff --git a/packages/date-picker/src/DateInput/utils/valueFormatter/valueFormatter.spec.ts b/packages/date-picker/src/utils/valueFormatter/valueFormatter.spec.ts
similarity index 92%
rename from packages/date-picker/src/DateInput/utils/valueFormatter/valueFormatter.spec.ts
rename to packages/date-picker/src/utils/valueFormatter/valueFormatter.spec.ts
index f2a47445cb..959e583d2f 100644
--- a/packages/date-picker/src/DateInput/utils/valueFormatter/valueFormatter.spec.ts
+++ b/packages/date-picker/src/utils/valueFormatter/valueFormatter.spec.ts
@@ -1,8 +1,8 @@
-import { DateSegment } from '../../DateInput.types';
+import { DateSegment } from '../../DateInput/DateInput.types';
 
 import { getValueFormatter } from '.';
 
-describe('utils/valueFormatter', () => {
+describe('packages/date-picker/utils/valueFormatter', () => {
   describe.each(['day', 'month'] as Array<DateSegment>)('', segment => {
     const formatter = getValueFormatter(segment);
 

From 9561e79b11fbb65de11a0f8ee4be75c030ac5b35 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 6 Sep 2023 13:19:17 -0400
Subject: [PATCH 063/351] fix getWeeksArray tests

---
 .../DateInputBox/DateInputBox.spec.tsx        | 11 --------
 .../getSegmentsFromDate.spec.ts               | 12 +++++++++
 .../utils/getWeeksArray/getWeeksArray.spec.ts | 27 ++++---------------
 .../src/utils/getWeeksArray/index.ts          | 19 +++++++------
 4 files changed, 26 insertions(+), 43 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
index e6a17709ce..d59d114676 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -90,17 +90,6 @@ describe('packages/date-input-box', () => {
       expect(monthInput).toHaveValue(12);
       expect(yearInput).toHaveValue(1993);
     });
-
-    test('renders in the correct time zone', () => {
-      const { dayInput, monthInput, yearInput } = renderDateInputBox(
-        { value: new Date('1993-12-26') },
-        { dateFormat: 'iso8601', timeZone: 'America/Los_Angeles' },
-      );
-
-      expect(dayInput).toHaveValue(25);
-      expect(monthInput).toHaveValue(12);
-      expect(yearInput).toHaveValue(1993);
-    });
   });
 
   describe('typing', () => {
diff --git a/packages/date-picker/src/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts b/packages/date-picker/src/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
index e69de29bb2..2ae021fe60 100644
--- a/packages/date-picker/src/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
+++ b/packages/date-picker/src/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
@@ -0,0 +1,12 @@
+import { getSegmentsFromDate } from '.';
+
+describe('packages/date-picker/utils/getSegmentsFromDate', () => {
+  test('returns UTC d/m/y values', () => {
+    const utc = new Date(Date.UTC(2023, 8, 1));
+    const segments = getSegmentsFromDate(utc);
+    expect(segments).toBeDefined();
+    expect(segments.day).toBe(1);
+    expect(segments.month).toBe(9);
+    expect(segments.year).toBe(2023);
+  });
+});
diff --git a/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts b/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts
index 1eacd79fb1..1e773972af 100644
--- a/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts
+++ b/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts
@@ -6,20 +6,18 @@ import { getWeeksArray } from '.';
 
 describe('packages/date-picker/utils/getWeeksArray', () => {
   test('returned array has the correct number of elements', () => {
-    const month = new Date(Date.UTC(2023, Month.August, 1));
+    const month = new Date(Date.UTC(2023, Month.September, 1));
     const arr = getWeeksArray(month, {
-      timeZone: 'UTC',
       dateFormat: 'iso8601',
     });
-    const daysInAugust = 31;
-    const padDaysForFormat = 1;
-    expect(arr.flat()).toHaveLength(daysInAugust + padDaysForFormat);
+    const daysInSeptember = 30;
+    const septStartsOn = 5; // sept 2023 starts on Friday, which is day 5 for iso format
+    expect(arr.flat()).toHaveLength(daysInSeptember + septStartsOn);
   });
 
   test('returns values in UTC', () => {
     const month = new Date(Date.UTC(2023, Month.August, 1));
     const arr = getWeeksArray(month, {
-      timeZone: 'UTC',
       dateFormat: 'iso8601',
     });
     const isoFlat = arr
@@ -31,7 +29,6 @@ describe('packages/date-picker/utils/getWeeksArray', () => {
   test('pads beginning of month with empty values', () => {
     const month = new Date(Date.UTC(2023, Month.August, 1));
     const arr = getWeeksArray(month, {
-      timeZone: 'UTC',
       dateFormat: 'iso8601',
     });
     expect(arr[0][0]).toBeNull(); // Mon
@@ -40,7 +37,7 @@ describe('packages/date-picker/utils/getWeeksArray', () => {
 
   test('starts the week on the correct day for the locale', () => {
     const month = new Date(Date.UTC(2023, Month.August, 1));
-    const arr = getWeeksArray(month, { timeZone: 'UTC', dateFormat: 'en-US' });
+    const arr = getWeeksArray(month, { dateFormat: 'en-US' });
     expect(arr[0][0]).toBeNull(); // Sun
     expect(arr[0][1]).toBeNull(); // Mon
     expect(arr[0][2]).not.toBeNull(); // Tues
@@ -49,7 +46,6 @@ describe('packages/date-picker/utils/getWeeksArray', () => {
   test('returned array has chunks of length 7', () => {
     const month = new Date(Date.UTC(2023, Month.August, 1));
     const arr = getWeeksArray(month, {
-      timeZone: 'UTC',
       dateFormat: 'iso8601',
     });
     expect(arr[0]).toHaveLength(7);
@@ -58,22 +54,9 @@ describe('packages/date-picker/utils/getWeeksArray', () => {
     expect(arr[3]).toHaveLength(7);
   });
 
-  test('returns values in UTC regardless of source', () => {
-    const month = new Date('2023-08-01T00:00:00.000');
-    const arr = getWeeksArray(month, {
-      timeZone: 'UTC',
-      dateFormat: 'iso8601',
-    });
-    const isoFlat = arr
-      .flatMap(week => week.map(day => day?.toISOString()))
-      .filter(day => !isUndefined(day));
-    expect(isoFlat.every(day => day?.endsWith('T00:00:00.000Z'))).toBeTruthy();
-  });
-
   test('returned array includes a Date for every day of the month', () => {
     const month = new Date(Date.UTC(2023, Month.August, 1));
     const arr = getWeeksArray(month, {
-      timeZone: 'UTC',
       dateFormat: 'iso8601',
     });
     const isoFlat = arr.flatMap(week => week.map(day => day?.toISOString()));
diff --git a/packages/date-picker/src/utils/getWeeksArray/index.ts b/packages/date-picker/src/utils/getWeeksArray/index.ts
index 790a7bc0cf..d6e3fd748b 100644
--- a/packages/date-picker/src/utils/getWeeksArray/index.ts
+++ b/packages/date-picker/src/utils/getWeeksArray/index.ts
@@ -1,5 +1,4 @@
-import { getDay, getDaysInMonth, setDate } from 'date-fns';
-import { utcToZonedTime } from 'date-fns-tz';
+import { getDaysInMonth } from 'date-fns';
 import { chunk, fill, range } from 'lodash';
 import { getWeekStartByLocale } from 'weekstart';
 
@@ -7,7 +6,7 @@ import { daysPerWeek } from '../../constants';
 import { BaseDatePickerProps } from '../../types';
 
 interface GetWeeksArrayOptions
-  extends Required<Pick<BaseDatePickerProps, 'dateFormat' | 'timeZone'>> {}
+  extends Required<Pick<BaseDatePickerProps, 'dateFormat'>> {}
 
 /**
  * Returns a 7x5 (or 7x6) 2D array of Dates for the given month
@@ -18,19 +17,17 @@ export const getWeeksArray = (
    */
   month: Date,
 
-  { dateFormat, timeZone }: GetWeeksArrayOptions,
+  { dateFormat }: GetWeeksArrayOptions,
 ): Array<Array<Date | null>> => {
   // What day of the week do weeks start on for this locale? (Sun = 0)
   const weekStartsOn = getWeekStartByLocale(dateFormat);
 
-  // Convert the given month to the provided timeZone
-  const tzMonth = utcToZonedTime(month, timeZone);
-
   // The first day of the month
-  const firstOfMonth = setDate(tzMonth, 1);
+  const firstOfMonth = new Date(month);
+  firstOfMonth.setUTCDate(1);
 
   // What day of the week does this month start on? (Sun = 0)
-  const startDayOfWeek = getDay(firstOfMonth);
+  const startDayOfWeek = firstOfMonth.getUTCDay();
 
   // How many days in the month?
   const daysInMonth = getDaysInMonth(firstOfMonth);
@@ -41,7 +38,9 @@ export const getWeeksArray = (
 
   // Create an array from 1 -> daysInMonth
   const allDays: Array<Date | null> = range(daysInMonth).map(i => {
-    return setDate(firstOfMonth, i + 1);
+    const newDay = new Date(firstOfMonth);
+    newDay.setUTCDate(i + 1);
+    return newDay;
   });
   // splice in enough empty elements so that the first is in the right column
   allDays.splice(0, 0, ...fill(range(startColumn), null));

From b7e2fd3e617990355601d1855a74685afb338b75 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 6 Sep 2023 13:25:30 -0400
Subject: [PATCH 064/351] fix date input sample data

---
 .../DateInputBox/DateInputBox.stories.tsx     | 39 ++++++-------------
 .../getSegmentsFromDate.spec.ts               |  8 ++++
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
index c2f753c232..330f8da4eb 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -5,8 +5,8 @@ import { isValid } from 'date-fns';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType, StoryType } from '@leafygreen-ui/lib';
-import { Size } from '@leafygreen-ui/tokens';
 
+import { Month } from '../../constants';
 import {
   DatePickerContextProps,
   DatePickerProvider,
@@ -14,7 +14,7 @@ import {
 
 import { DateInputBox } from './DateInputBox';
 
-const testDate = new Date(Date.UTC(1993, 12, 26));
+const testDate = new Date(Date.UTC(1993, Month.December, 26));
 
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
   <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
@@ -35,7 +35,7 @@ const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
   parameters: {
     default: null,
     generate: {
-      storyNames: ['Formats', 'TimeZones'],
+      storyNames: ['Formats'],
       combineArgs: {
         darkMode: [false, true],
         value: [null, testDate],
@@ -75,6 +75,14 @@ export const Basic: StoryFn<typeof DateInputBox> = props => {
   );
 };
 
+export const Static: StoryFn<typeof DateInputBox> = props => {
+  return (
+    <>
+      <DateInputBox {...props} value={testDate} />
+    </>
+  );
+};
+
 export const Formats: StoryType<
   typeof DateInputBox,
   DatePickerContextProps
@@ -86,28 +94,3 @@ Formats.parameters = {
     },
   },
 };
-
-export const TimeZones: StoryType<
-  typeof DateInputBox,
-  DatePickerContextProps
-> = () => <></>;
-TimeZones.parameters = {
-  generate: {
-    args: {
-      dateFormat: 'iso8601',
-      size: Size.Default,
-    },
-    combineArgs: {
-      timeZone: [
-        'Pacific/Honolulu',
-        'America/Los_Angeles',
-        'America/New_York',
-        'Europe/London',
-        'Asia/Istanbul',
-        'Asia/Seoul',
-        'Pacific/Auckland',
-      ],
-    },
-    excludeCombinations: [{ value: null }, {}],
-  },
-};
diff --git a/packages/date-picker/src/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts b/packages/date-picker/src/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
index 2ae021fe60..1b6b18f10e 100644
--- a/packages/date-picker/src/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
+++ b/packages/date-picker/src/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
@@ -9,4 +9,12 @@ describe('packages/date-picker/utils/getSegmentsFromDate', () => {
     expect(segments.month).toBe(9);
     expect(segments.year).toBe(2023);
   });
+
+  test('returns undefined for each segment when date is null', () => {
+    const segments = getSegmentsFromDate(null);
+    expect(segments).toBeDefined();
+    expect(segments.day).toBeUndefined();
+    expect(segments.month).toBeUndefined();
+    expect(segments.year).toBeUndefined();
+  });
 });

From ad62255be6931fb7ab372b6c3fed58dfc1b23efb Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 6 Sep 2023 20:31:15 -0400
Subject: [PATCH 065/351] isSameUTCDay tests

---
 .../CalendarGrid/CalendarGrid.stories.tsx     |  46 +--
 .../Calendar/CalendarGrid/CalendarGrid.tsx    |  14 +-
 .../DatePickerMenu/DatePickerMenu.tsx         |  16 +-
 .../utils/getWeeksArray/getWeeksArray.spec.ts | 346 +++++++++++++++---
 .../src/utils/getWeeksArray/index.ts          |   4 +-
 .../src/utils/isCurrentDay/index.ts           |   5 -
 .../src/utils/isCurrentUTCDay/index.ts        |  11 +
 .../src/utils/isSameUTCDay/index.ts           |  17 +
 .../utils/isSameUTCDay/isSameUTCDay.spec.ts   |  45 +++
 .../src/utils/setToUTCMidnight/index.ts       |   1 -
 10 files changed, 403 insertions(+), 102 deletions(-)
 delete mode 100644 packages/date-picker/src/utils/isCurrentDay/index.ts
 create mode 100644 packages/date-picker/src/utils/isCurrentUTCDay/index.ts
 create mode 100644 packages/date-picker/src/utils/isSameUTCDay/index.ts
 create mode 100644 packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts

diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index 3e48ecec68..de96a3697e 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -4,9 +4,8 @@ import { isToday } from 'date-fns';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
-import { InlineCode } from '@leafygreen-ui/typography';
 
-import { Month, Months } from '../../constants';
+import { Month } from '../../constants';
 import { Locales, TimeZones } from '../../DatePicker.testUtils';
 import {
   DatePickerContextProps,
@@ -44,8 +43,6 @@ const meta: StoryMetaType<typeof CalendarGrid, DatePickerContextProps> = {
   decorators: [ProviderWrapper],
   args: {
     dateFormat: 'en-US',
-    // timeZone: 'America/Los_Angeles',
-    // timeZone: 'Europe/London',
     timeZone: 'UTC',
   },
   argTypes: {
@@ -64,7 +61,7 @@ const meta: StoryMetaType<typeof CalendarGrid, DatePickerContextProps> = {
 export default meta;
 
 export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
-  const [month] = useState(new Date(Date.UTC(2023, Month.August, 5)));
+  const [month] = useState(new Date(Date.UTC(2023, Month.August, 1)));
 
   const [hovered, setHovered] = useState<string | undefined>();
 
@@ -73,28 +70,23 @@ export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
   };
 
   return (
-    <div>
-      <InlineCode>
-        <b>{Months[month.getMonth()].long}</b> <b>{month.toISOString()}</b>
-      </InlineCode>
-      <CalendarGrid
-        {...props}
-        month={month}
-        onMouseLeave={handleHover(undefined)}
-      >
-        {(day, i) => (
-          <CalendarCell
-            key={i}
-            isCurrent={!!(day && isToday(day))}
-            isHighlighted={hovered ? hovered === day?.toISOString() : false}
-            onMouseEnter={handleHover(day?.toISOString())}
-            data-iso={day?.toISOString()}
-          >
-            {day?.getUTCDate()}
-          </CalendarCell>
-        )}
-      </CalendarGrid>
-    </div>
+    <CalendarGrid
+      {...props}
+      month={month}
+      onMouseLeave={handleHover(undefined)}
+    >
+      {(day, i) => (
+        <CalendarCell
+          key={i}
+          isCurrent={!!(day && isToday(day))}
+          isHighlighted={hovered ? hovered === day?.toISOString() : false}
+          onMouseEnter={handleHover(day?.toISOString())}
+          data-iso={day?.toISOString()}
+        >
+          {day?.getUTCDate()}
+        </CalendarCell>
+      )}
+    </CalendarGrid>
   );
 };
 
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index 968d5803ca..03bb938db3 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -15,15 +15,13 @@ import { CalendarGridProps } from './CalendarGrid.types';
  * A simple table that renders the `CalendarCell` components passed as children
  */
 export function CalendarGrid({ month, children, ...rest }: CalendarGridProps) {
-  const { dateFormat, timeZone } = useDatePickerContext();
+  const { dateFormat } = useDatePickerContext();
   const weekStartsOn = getWeekStartByLocale(dateFormat);
   const weeks = useMemo(
-    () => getWeeksArray(month, { dateFormat, timeZone }),
-    [dateFormat, month, timeZone],
+    () => getWeeksArray(month, { dateFormat }),
+    [dateFormat, month],
   );
 
-  console.log(weeks.flatMap(week => week.map(d => d?.toISOString())));
-
   return (
     <table {...rest}>
       <thead>
@@ -45,7 +43,11 @@ export function CalendarGrid({ month, children, ...rest }: CalendarGridProps) {
         {weeks.map((week, w) => (
           <tr key={w}>
             {week.map((day, d) => {
-              return day ? children(day, w * daysPerWeek + d) : <td></td>;
+              return day ? (
+                children(day, w * daysPerWeek + d)
+              ) : (
+                <td key=""></td>
+              );
             })}
           </tr>
         ))}
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index e24ffc4dbd..ead3ffa002 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -1,5 +1,4 @@
 import React, { forwardRef, useState } from 'react';
-import { isSameDay, isToday } from 'date-fns';
 
 import { useForwardedRef } from '@leafygreen-ui/select/src/utils';
 import { spacing } from '@leafygreen-ui/tokens';
@@ -8,6 +7,8 @@ import { CalendarCell, CalendarCellState } from '../../Calendar/CalendarCell';
 import { CalendarGrid } from '../../Calendar/CalendarGrid';
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
 import { useDatePickerContext } from '../../DatePickerContext';
+import { isCurrentUTCDay } from '../../utils/isCurrentUTCDay';
+import { isSameUTCDay } from '../../utils/isSameUTCDay';
 
 import {
   menuCalendarGridStyles,
@@ -17,9 +18,6 @@ import {
 import { DatePickerMenuProps } from './DatePickerMenu.types';
 import { DatePickerMenuHeader } from './DatePickerMenuHeader';
 
-const nullIsSameDay = (d1?: Date | null, d2?: Date | null) =>
-  !!(d1 && d2 && isSameDay(d1, d2));
-
 export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
   (
     {
@@ -37,7 +35,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
 
     const getCellState = (cellDay: Date | null) => {
       if (isInRange(cellDay)) {
-        if (nullIsSameDay(cellDay, value)) {
+        if (isSameUTCDay(cellDay, value)) {
           return CalendarCellState.Active;
         }
 
@@ -65,14 +63,14 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
           >
             {day => (
               <CalendarCell
-                isHighlighted={nullIsSameDay(day, highlight)}
-                isCurrent={isToday(day)}
+                isHighlighted={isSameUTCDay(day, highlight)}
+                isCurrent={isCurrentUTCDay(day)}
                 state={getCellState(day)}
                 onMouseEnter={() => setHighlight(day)}
                 onClick={() => onCellClick(day)}
-                date-iso={day.toISOString()}
+                data-iso={day.toISOString()}
               >
-                {day.getDate()}
+                {day.getUTCDate()}
               </CalendarCell>
             )}
           </CalendarGrid>
diff --git a/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts b/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts
index 1e773972af..3a710614de 100644
--- a/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts
+++ b/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts
@@ -1,73 +1,313 @@
-import { isUndefined, padStart, range } from 'lodash';
+import { isNull } from 'lodash';
 
 import { Month } from '../../constants';
 
 import { getWeeksArray } from '.';
 
 describe('packages/date-picker/utils/getWeeksArray', () => {
-  test('returned array has the correct number of elements', () => {
-    const month = new Date(Date.UTC(2023, Month.September, 1));
-    const arr = getWeeksArray(month, {
-      dateFormat: 'iso8601',
-    });
-    const daysInSeptember = 30;
-    const septStartsOn = 5; // sept 2023 starts on Friday, which is day 5 for iso format
-    expect(arr.flat()).toHaveLength(daysInSeptember + septStartsOn);
+  test('starts the week on the correct day for the locale', () => {
+    const month = new Date(Date.UTC(2023, Month.August, 1));
+    const arr = getWeeksArray(month, { dateFormat: 'en-US' });
+    expect(arr[0][0]).toBeNull(); // Sun
+    expect(arr[0][1]).toBeNull(); // Mon
+    expect(arr[0][2]).not.toBeNull(); // Tues
   });
 
-  test('returns values in UTC', () => {
-    const month = new Date(Date.UTC(2023, Month.August, 1));
-    const arr = getWeeksArray(month, {
-      dateFormat: 'iso8601',
+  describe('August 2023', () => {
+    const aug23 = new Date(Date.UTC(2023, Month.August, 1));
+    const arr = getWeeksArray(aug23, { dateFormat: 'iso-8601' });
+
+    test('returned array has the correct number of elements', () => {
+      const daysInAugust = 31;
+      const augStartsOn = 1;
+      expect(arr.flat()).toHaveLength(daysInAugust + augStartsOn);
+      expect(arr.flat().filter(_ => !isNull(_))).toHaveLength(daysInAugust);
     });
-    const isoFlat = arr
-      .flatMap(week => week.map(day => day?.toISOString()))
-      .filter(day => !isUndefined(day));
-    expect(isoFlat.every(day => day?.endsWith('T00:00:00.000Z'))).toBeTruthy();
-  });
 
-  test('pads beginning of month with empty values', () => {
-    const month = new Date(Date.UTC(2023, Month.August, 1));
-    const arr = getWeeksArray(month, {
-      dateFormat: 'iso8601',
+    test('returned array has chunks of length 7', () => {
+      expect(arr[0]).toHaveLength(7);
+      expect(arr[1]).toHaveLength(7);
+      expect(arr[2]).toHaveLength(7);
+      expect(arr[3]).toHaveLength(7);
+    });
+
+    test('pads beginning of month with empty values', () => {
+      expect(arr[0][0]).toBeNull(); // Mon
+      expect(arr[0][1]).not.toBeNull(); // Tues
+    });
+
+    test('data is returned as expected', () => {
+      expect(arr).toEqual(
+        expect.arrayContaining([
+          expect.arrayContaining([
+            null, // Mo
+            new Date(Date.UTC(2023, 7, 1)), // Tu
+            new Date(Date.UTC(2023, 7, 2)), // We
+            new Date(Date.UTC(2023, 7, 3)), // Th
+            new Date(Date.UTC(2023, 7, 4)), // Fr
+            new Date(Date.UTC(2023, 7, 5)), // Sa
+            new Date(Date.UTC(2023, 7, 6)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 7, 7)), // Mo
+            new Date(Date.UTC(2023, 7, 8)), // Tu
+            new Date(Date.UTC(2023, 7, 9)), // We
+            new Date(Date.UTC(2023, 7, 10)), // Th
+            new Date(Date.UTC(2023, 7, 11)), // Fr
+            new Date(Date.UTC(2023, 7, 12)), // Sa
+            new Date(Date.UTC(2023, 7, 13)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 7, 14)), // Mo
+            new Date(Date.UTC(2023, 7, 15)), // Tu
+            new Date(Date.UTC(2023, 7, 16)), // We
+            new Date(Date.UTC(2023, 7, 17)), // Th
+            new Date(Date.UTC(2023, 7, 18)), // Fr
+            new Date(Date.UTC(2023, 7, 19)), // Sa
+            new Date(Date.UTC(2023, 7, 20)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 7, 21)), // Mo
+            new Date(Date.UTC(2023, 7, 22)), // Tu
+            new Date(Date.UTC(2023, 7, 23)), // We
+            new Date(Date.UTC(2023, 7, 24)), // Th
+            new Date(Date.UTC(2023, 7, 25)), // Fr
+            new Date(Date.UTC(2023, 7, 26)), // Sa
+            new Date(Date.UTC(2023, 7, 27)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 7, 28)), // Mo
+            new Date(Date.UTC(2023, 7, 29)), // Tu
+            new Date(Date.UTC(2023, 7, 30)), // We
+            new Date(Date.UTC(2023, 7, 31)), // Th
+          ]),
+        ]),
+      );
     });
-    expect(arr[0][0]).toBeNull(); // Mon
-    expect(arr[0][1]).not.toBeNull(); // Tues
   });
 
-  test('starts the week on the correct day for the locale', () => {
-    const month = new Date(Date.UTC(2023, Month.August, 1));
-    const arr = getWeeksArray(month, { dateFormat: 'en-US' });
-    expect(arr[0][0]).toBeNull(); // Sun
-    expect(arr[0][1]).toBeNull(); // Mon
-    expect(arr[0][2]).not.toBeNull(); // Tues
+  describe('September 2023', () => {
+    const sept23 = new Date(Date.UTC(2023, Month.September, 1));
+    const arr = getWeeksArray(sept23, { dateFormat: 'iso8601' });
+
+    test('returned array has the correct number of elements', () => {
+      const daysInSept = 30;
+      const septStartsOn = 4;
+      expect(arr.flat()).toHaveLength(daysInSept + septStartsOn);
+      expect(arr.flat().filter(_ => !isNull(_))).toHaveLength(daysInSept);
+    });
+
+    test('returned array has chunks of length 7', () => {
+      expect(arr[0]).toHaveLength(7);
+      expect(arr[1]).toHaveLength(7);
+      expect(arr[2]).toHaveLength(7);
+      expect(arr[3]).toHaveLength(7);
+    });
+
+    test('pads beginning of month with empty values', () => {
+      expect(arr[0][0]).toBeNull(); // M
+      expect(arr[0][1]).toBeNull(); // T
+      expect(arr[0][2]).toBeNull(); // W
+      expect(arr[0][3]).toBeNull(); // Th
+      expect(arr[0][4]).not.toBeNull(); // F
+    });
+
+    test('data is returned as expected', () => {
+      expect(arr).toEqual(
+        expect.arrayContaining([
+          expect.arrayContaining([
+            null, // Mo
+            null, // Tu
+            null, // We
+            null, // Th
+            new Date(Date.UTC(2023, 8, 1)), // Fr
+            new Date(Date.UTC(2023, 8, 2)), // Sa
+            new Date(Date.UTC(2023, 8, 3)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 8, 4)), // Mo
+            new Date(Date.UTC(2023, 8, 5)), // Tu
+            new Date(Date.UTC(2023, 8, 6)), // We
+            new Date(Date.UTC(2023, 8, 7)), // Th
+            new Date(Date.UTC(2023, 8, 8)), // Fr
+            new Date(Date.UTC(2023, 8, 9)), // Sa
+            new Date(Date.UTC(2023, 8, 10)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 8, 11)), // Mo
+            new Date(Date.UTC(2023, 8, 12)), // Tu
+            new Date(Date.UTC(2023, 8, 13)), // We
+            new Date(Date.UTC(2023, 8, 14)), // Th
+            new Date(Date.UTC(2023, 8, 15)), // Fr
+            new Date(Date.UTC(2023, 8, 16)), // Sa
+            new Date(Date.UTC(2023, 8, 17)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 8, 18)), // Mo
+            new Date(Date.UTC(2023, 8, 19)), // Tu
+            new Date(Date.UTC(2023, 8, 20)), // We
+            new Date(Date.UTC(2023, 8, 21)), // Th
+            new Date(Date.UTC(2023, 8, 22)), // Fr
+            new Date(Date.UTC(2023, 8, 23)), // Sa
+            new Date(Date.UTC(2023, 8, 24)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 8, 25)), // Mo
+            new Date(Date.UTC(2023, 8, 26)), // Tu
+            new Date(Date.UTC(2023, 8, 27)), // We
+            new Date(Date.UTC(2023, 8, 28)), // Th
+            new Date(Date.UTC(2023, 8, 29)), // Fr
+            new Date(Date.UTC(2023, 8, 30)), // Sa
+          ]),
+        ]),
+      );
+    });
   });
 
-  test('returned array has chunks of length 7', () => {
-    const month = new Date(Date.UTC(2023, Month.August, 1));
-    const arr = getWeeksArray(month, {
-      dateFormat: 'iso8601',
+  describe('February 2023', () => {
+    const feb23 = new Date(Date.UTC(2023, Month.February, 1));
+    const arr = getWeeksArray(feb23, { dateFormat: 'iso8601' });
+
+    test('returned array has the correct number of elements', () => {
+      const daysInFeb23 = 28;
+      const feb23StartsOn = 2;
+      expect(arr.flat()).toHaveLength(daysInFeb23 + feb23StartsOn);
+      expect(arr.flat().filter(_ => !isNull(_))).toHaveLength(daysInFeb23);
+    });
+
+    test('returned array has chunks of length 7', () => {
+      expect(arr[0]).toHaveLength(7);
+      expect(arr[1]).toHaveLength(7);
+      expect(arr[2]).toHaveLength(7);
+      expect(arr[3]).toHaveLength(7);
+    });
+
+    test('pads beginning of month with empty values', () => {
+      expect(arr[0][0]).toBeNull(); // M
+      expect(arr[0][1]).toBeNull(); // T
+      expect(arr[0][2]).not.toBeNull(); // W
+    });
+
+    test('data is returned as expected', () => {
+      expect(arr).toEqual(
+        expect.arrayContaining([
+          expect.arrayContaining([
+            null, // Mo
+            null, // Tu
+            new Date(Date.UTC(2023, 2, 1)), // We
+            new Date(Date.UTC(2023, 2, 2)), // Th
+            new Date(Date.UTC(2023, 2, 3)), // Fr
+            new Date(Date.UTC(2023, 2, 4)), // Sa
+            new Date(Date.UTC(2023, 2, 5)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 2, 6)), // Mo
+            new Date(Date.UTC(2023, 2, 7)), // Tu
+            new Date(Date.UTC(2023, 2, 8)), // We
+            new Date(Date.UTC(2023, 2, 9)), // Th
+            new Date(Date.UTC(2023, 2, 10)), // Fr
+            new Date(Date.UTC(2023, 2, 11)), // Sa
+            new Date(Date.UTC(2023, 2, 12)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 2, 13)), // Mo
+            new Date(Date.UTC(2023, 2, 14)), // Tu
+            new Date(Date.UTC(2023, 2, 15)), // We
+            new Date(Date.UTC(2023, 2, 16)), // Th
+            new Date(Date.UTC(2023, 2, 17)), // Fr
+            new Date(Date.UTC(2023, 2, 18)), // Sa
+            new Date(Date.UTC(2023, 2, 19)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 2, 20)), // Mo
+            new Date(Date.UTC(2023, 2, 21)), // Tu
+            new Date(Date.UTC(2023, 2, 22)), // We
+            new Date(Date.UTC(2023, 2, 23)), // Th
+            new Date(Date.UTC(2023, 2, 24)), // Fr
+            new Date(Date.UTC(2023, 2, 25)), // Sa
+            new Date(Date.UTC(2023, 2, 26)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 2, 27)), // Mo
+            new Date(Date.UTC(2023, 2, 28)), // Tu
+          ]),
+        ]),
+      );
     });
-    expect(arr[0]).toHaveLength(7);
-    expect(arr[1]).toHaveLength(7);
-    expect(arr[2]).toHaveLength(7);
-    expect(arr[3]).toHaveLength(7);
   });
 
-  test('returned array includes a Date for every day of the month', () => {
-    const month = new Date(Date.UTC(2023, Month.August, 1));
-    const arr = getWeeksArray(month, {
-      dateFormat: 'iso8601',
-    });
-    const isoFlat = arr.flatMap(week => week.map(day => day?.toISOString()));
-
-    expect(isoFlat).toEqual(
-      expect.arrayContaining([
-        undefined,
-        ...range(31).map(
-          d => `2023-08-${padStart((d + 1).toString(), 2, '0')}T00:00:00.000Z`,
-        ),
-      ]),
-    );
+  describe('February 2024 (leap-year)', () => {
+    const feb23 = new Date(Date.UTC(2024, Month.February, 1));
+    const arr = getWeeksArray(feb23, { dateFormat: 'iso8601' });
+
+    test('returned array has the correct number of elements', () => {
+      const daysInFeb24 = 29;
+      const feb24StartsOn = 3;
+      expect(arr.flat()).toHaveLength(daysInFeb24 + feb24StartsOn);
+      expect(arr.flat().filter(_ => !isNull(_))).toHaveLength(daysInFeb24);
+    });
+
+    test('returned array has chunks of length 7', () => {
+      expect(arr[0]).toHaveLength(7);
+      expect(arr[1]).toHaveLength(7);
+      expect(arr[2]).toHaveLength(7);
+      expect(arr[3]).toHaveLength(7);
+    });
+
+    test('pads beginning of month with empty values', () => {
+      expect(arr[0][0]).toBeNull(); // M
+      expect(arr[0][1]).toBeNull(); // T
+      expect(arr[0][2]).toBeNull(); // W
+      expect(arr[0][3]).not.toBeNull(); // Th
+    });
+
+    test('data is returned as expected', () => {
+      expect(arr).toEqual(
+        expect.arrayContaining([
+          expect.arrayContaining([
+            null, // Mo
+            null, // Tu
+            null, // We
+            new Date(Date.UTC(2023, 2, 1)), // Th
+            new Date(Date.UTC(2023, 2, 2)), // Fr
+            new Date(Date.UTC(2023, 2, 3)), // Sa
+            new Date(Date.UTC(2023, 2, 4)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 2, 5)), // Mo
+            new Date(Date.UTC(2023, 2, 6)), // Tu
+            new Date(Date.UTC(2023, 2, 7)), // We
+            new Date(Date.UTC(2023, 2, 8)), // Th
+            new Date(Date.UTC(2023, 2, 9)), // Fr
+            new Date(Date.UTC(2023, 2, 10)), // Sa
+            new Date(Date.UTC(2023, 2, 11)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 2, 12)), // Mo
+            new Date(Date.UTC(2023, 2, 13)), // Tu
+            new Date(Date.UTC(2023, 2, 14)), // We
+            new Date(Date.UTC(2023, 2, 15)), // Th
+            new Date(Date.UTC(2023, 2, 16)), // Fr
+            new Date(Date.UTC(2023, 2, 17)), // Sa
+            new Date(Date.UTC(2023, 2, 18)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 2, 19)), // Mo
+            new Date(Date.UTC(2023, 2, 20)), // Tu
+            new Date(Date.UTC(2023, 2, 21)), // We
+            new Date(Date.UTC(2023, 2, 22)), // Th
+            new Date(Date.UTC(2023, 2, 23)), // Fr
+            new Date(Date.UTC(2023, 2, 24)), // Sa
+            new Date(Date.UTC(2023, 2, 25)), // Su
+          ]),
+          expect.arrayContaining([
+            new Date(Date.UTC(2023, 2, 26)), // Mo
+            new Date(Date.UTC(2023, 2, 27)), // Tu
+            new Date(Date.UTC(2023, 2, 28)), // We
+            new Date(Date.UTC(2023, 2, 29)), // Th
+          ]),
+        ]),
+      );
+    });
   });
 });
diff --git a/packages/date-picker/src/utils/getWeeksArray/index.ts b/packages/date-picker/src/utils/getWeeksArray/index.ts
index d6e3fd748b..7ee9d635aa 100644
--- a/packages/date-picker/src/utils/getWeeksArray/index.ts
+++ b/packages/date-picker/src/utils/getWeeksArray/index.ts
@@ -4,6 +4,7 @@ import { getWeekStartByLocale } from 'weekstart';
 
 import { daysPerWeek } from '../../constants';
 import { BaseDatePickerProps } from '../../types';
+import { setToUTCMidnight } from '../setToUTCMidnight';
 
 interface GetWeeksArrayOptions
   extends Required<Pick<BaseDatePickerProps, 'dateFormat'>> {}
@@ -23,13 +24,14 @@ export const getWeeksArray = (
   const weekStartsOn = getWeekStartByLocale(dateFormat);
 
   // The first day of the month
-  const firstOfMonth = new Date(month);
+  const firstOfMonth = setToUTCMidnight(month);
   firstOfMonth.setUTCDate(1);
 
   // What day of the week does this month start on? (Sun = 0)
   const startDayOfWeek = firstOfMonth.getUTCDay();
 
   // How many days in the month?
+  // TODO: need to rewrite getDaysInUTCMonth
   const daysInMonth = getDaysInMonth(firstOfMonth);
 
   // Shift the start column based on locale (weekStartsOn)
diff --git a/packages/date-picker/src/utils/isCurrentDay/index.ts b/packages/date-picker/src/utils/isCurrentDay/index.ts
deleted file mode 100644
index 1ef766cc16..0000000000
--- a/packages/date-picker/src/utils/isCurrentDay/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { isToday } from 'date-fns';
-
-export const isCurrentDay = (day?: Date | null): day is Date => {
-  return !!(day && isToday(day));
-};
diff --git a/packages/date-picker/src/utils/isCurrentUTCDay/index.ts b/packages/date-picker/src/utils/isCurrentUTCDay/index.ts
new file mode 100644
index 0000000000..130f91de57
--- /dev/null
+++ b/packages/date-picker/src/utils/isCurrentUTCDay/index.ts
@@ -0,0 +1,11 @@
+import { isSameUTCDay } from '../isSameUTCDay';
+
+/**
+ * Returns whether a given day is today, in UTC
+ *
+ * Compare to `date-fns.isToday`, which compares using local time
+ */
+export const isCurrentUTCDay = (day?: Date | null): day is Date => {
+  const today = new Date(Date.now());
+  return isSameUTCDay(day, today);
+};
diff --git a/packages/date-picker/src/utils/isSameUTCDay/index.ts b/packages/date-picker/src/utils/isSameUTCDay/index.ts
new file mode 100644
index 0000000000..015b1ea4a3
--- /dev/null
+++ b/packages/date-picker/src/utils/isSameUTCDay/index.ts
@@ -0,0 +1,17 @@
+/**
+ * Returns whether 2 Dates are the same day in UTC.
+ *
+ * Compare to `date-fns.isSameDay`, which uses local time
+ */
+export const isSameUTCDay = (
+  day1?: Date | null,
+  day2?: Date | null,
+): boolean => {
+  if (!day1 || !day2) return false;
+
+  return (
+    day1.getUTCDate() === day2.getUTCDate() &&
+    day1.getUTCMonth() === day2.getUTCMonth() &&
+    day1.getUTCFullYear() === day2.getUTCFullYear()
+  );
+};
diff --git a/packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts b/packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts
new file mode 100644
index 0000000000..023ef8bf73
--- /dev/null
+++ b/packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts
@@ -0,0 +1,45 @@
+import { isSameUTCDay } from '.';
+
+describe('packages/date-picker/utils/isSameUTCDay', () => {
+  test('true: when both dates are defined in UTC', () => {
+    const utc1 = new Date(Date.UTC(2023, 8, 1));
+    const utc2 = new Date(Date.UTC(2023, 8, 1, 21, 0, 0));
+    expect(isSameUTCDay(utc1, utc2)).toBe(true);
+  });
+
+  test('false: when both dates are defined in UTC', () => {
+    const utc1 = new Date(Date.UTC(2023, 8, 1));
+    const utc2 = new Date(Date.UTC(2023, 8, 2));
+    expect(isSameUTCDay(utc1, utc2)).toBe(false);
+  });
+
+  test('true: when one date is defined locally', () => {
+    const utc = new Date(Date.UTC(2023, 8, 10));
+    const local = new Date('2023-09-09T21:00');
+    expect(isSameUTCDay(utc, local)).toBe(true);
+  });
+
+  test('false: when one date is defined locally', () => {
+    const utc = new Date(Date.UTC(2023, 8, 10));
+    const local = new Date('2023-09-09T12:00');
+    expect(isSameUTCDay(utc, local)).toBe(false);
+  });
+
+  test('true: when both dates are defined locally', () => {
+    const local1 = new Date('2023-09-09T00:00');
+    const local2 = new Date('2023-09-09T19:00');
+    expect(isSameUTCDay(local1, local2)).toBe(true);
+  });
+
+  test('false: when both dates are defined locally', () => {
+    const local1 = new Date('2023-09-09T00:00');
+    const local2 = new Date('2023-09-09T20:00');
+    expect(isSameUTCDay(local1, local2)).toBe(false);
+  });
+
+  test('false: when one or both dates is null', () => {
+    expect(isSameUTCDay(new Date(), null)).toBe(false);
+    expect(isSameUTCDay(null, new Date())).toBe(false);
+    expect(isSameUTCDay(null, null)).toBe(false);
+  });
+});
diff --git a/packages/date-picker/src/utils/setToUTCMidnight/index.ts b/packages/date-picker/src/utils/setToUTCMidnight/index.ts
index 4a9d937a28..63667fdcd6 100644
--- a/packages/date-picker/src/utils/setToUTCMidnight/index.ts
+++ b/packages/date-picker/src/utils/setToUTCMidnight/index.ts
@@ -1,6 +1,5 @@
 /**
  * Returns a new date set to midnight
- * @deprecated
  */
 export const setToUTCMidnight = (date: Date): Date => {
   const midnight = new Date(date);

From 6bc8115325ff4ca20d5bd9e3a861caba5edf5268 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 12 Sep 2023 11:22:41 -0400
Subject: [PATCH 066/351] mv clone reverse

---
 .../utils/cloneReverse/cloneReverse.spec.ts    | 18 ++++++++++++++++++
 .../src/utils/cloneReverse/index.ts            |  9 +++++++++
 .../src/utils/getRemainingParts/index.ts       |  8 +-------
 3 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 packages/date-picker/src/utils/cloneReverse/cloneReverse.spec.ts
 create mode 100644 packages/date-picker/src/utils/cloneReverse/index.ts

diff --git a/packages/date-picker/src/utils/cloneReverse/cloneReverse.spec.ts b/packages/date-picker/src/utils/cloneReverse/cloneReverse.spec.ts
new file mode 100644
index 0000000000..8af1672c79
--- /dev/null
+++ b/packages/date-picker/src/utils/cloneReverse/cloneReverse.spec.ts
@@ -0,0 +1,18 @@
+import { cloneReverse } from '.';
+
+describe('packages/date-picker/utils/cloneReverse', () => {
+  test('reverses the array', () => {
+    const arr = ['a', 'b', 'c', 'd'];
+    expect(cloneReverse(arr)).toEqual(['d', 'c', 'b', 'a']);
+  });
+
+  test('does not affect the original array', () => {
+    const arr = ['a', 'b', 'c', 'd'];
+    const _ = cloneReverse(arr);
+    expect(arr).toEqual(['a', 'b', 'c', 'd']);
+  });
+
+  test('returns undefined for invalid input', () => {
+    expect(cloneReverse()).toBeUndefined();
+  });
+});
diff --git a/packages/date-picker/src/utils/cloneReverse/index.ts b/packages/date-picker/src/utils/cloneReverse/index.ts
new file mode 100644
index 0000000000..e5ea562323
--- /dev/null
+++ b/packages/date-picker/src/utils/cloneReverse/index.ts
@@ -0,0 +1,9 @@
+export const cloneReverse = <T extends any>(
+  arr?: Array<T>,
+): Array<T> | undefined => {
+  if (!(arr && Array.isArray(arr))) return;
+
+  const clone = [...arr];
+  clone.reverse();
+  return clone;
+};
diff --git a/packages/date-picker/src/utils/getRemainingParts/index.ts b/packages/date-picker/src/utils/getRemainingParts/index.ts
index 84fdea9ada..c8a0e0548d 100644
--- a/packages/date-picker/src/utils/getRemainingParts/index.ts
+++ b/packages/date-picker/src/utils/getRemainingParts/index.ts
@@ -1,12 +1,6 @@
 import { isUndefined } from 'lodash';
 
-const cloneReverse = <T extends any>(arr?: Array<T>): Array<T> | undefined => {
-  if (!arr) return;
-
-  const clone = [...arr];
-  clone.reverse();
-  return clone;
-};
+import { cloneReverse } from '../cloneReverse';
 
 /** Returns the ordered parts to the left or right of the provided index
  * e.g:

From c436ef622678356c2f24e5a8dd56f1b0071c5f77 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 12 Sep 2023 11:42:20 -0400
Subject: [PATCH 067/351] Adds getDaysInUTCMonth. Update getWeeksArray tests

---
 .../getDaysInUTCMonth.spec.ts                 |  36 +++
 .../src/utils/getDaysInUTCMonth/index.ts      |  11 +
 .../utils/getWeeksArray/getWeeksArray.spec.ts | 236 +++++++++---------
 .../src/utils/getWeeksArray/index.ts          |   5 +-
 4 files changed, 167 insertions(+), 121 deletions(-)
 create mode 100644 packages/date-picker/src/utils/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts
 create mode 100644 packages/date-picker/src/utils/getDaysInUTCMonth/index.ts

diff --git a/packages/date-picker/src/utils/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts b/packages/date-picker/src/utils/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts
new file mode 100644
index 0000000000..7b66d21992
--- /dev/null
+++ b/packages/date-picker/src/utils/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts
@@ -0,0 +1,36 @@
+import { getDaysInUTCMonth } from '.';
+
+describe('getDaysInUTCMonth', () => {
+  test('returns the number of days in the month', () => {
+    const result = getDaysInUTCMonth(new Date(2100, 1 /* Feb */, 11));
+    expect(result).toEqual(28);
+  });
+
+  test('when given the 1st of the month', () => {
+    const result = getDaysInUTCMonth(new Date(2100, 1 /* Feb */, 1));
+    expect(result).toEqual(28);
+  });
+
+  test('when given the last of the month', () => {
+    const result = getDaysInUTCMonth(new Date(2100, 1 /* Feb */, 28));
+    expect(result).toEqual(28);
+  });
+
+  test('when given February of a leap year', () => {
+    const result = getDaysInUTCMonth(new Date(2000, 1 /* Feb */, 1));
+    expect(result).toEqual(29);
+  });
+
+  test('handles dates before 100 AD', () => {
+    const date = new Date(0);
+    date.setFullYear(0, 1 /* Feb */, 15);
+    date.setHours(0, 0, 0, 0);
+    const result = getDaysInUTCMonth(date);
+    expect(result).toEqual(29);
+  });
+
+  test('returns NaN if the given date is invalid', () => {
+    const result = getDaysInUTCMonth(new Date(NaN));
+    expect(result).toBeNaN();
+  });
+});
diff --git a/packages/date-picker/src/utils/getDaysInUTCMonth/index.ts b/packages/date-picker/src/utils/getDaysInUTCMonth/index.ts
new file mode 100644
index 0000000000..308a7c1492
--- /dev/null
+++ b/packages/date-picker/src/utils/getDaysInUTCMonth/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Returns the number of days in a given UTC month
+ */
+export const getDaysInUTCMonth = (date: Date): number => {
+  const year = date.getUTCFullYear();
+  const monthIndex = date.getUTCMonth();
+  const lastDayOfMonth = new Date(date);
+  lastDayOfMonth.setUTCFullYear(year, monthIndex + 1, 0);
+  lastDayOfMonth.setUTCHours(0, 0, 0, 0);
+  return lastDayOfMonth.getUTCDate();
+};
diff --git a/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts b/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts
index 3a710614de..8ddb766a50 100644
--- a/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts
+++ b/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts
@@ -41,45 +41,45 @@ describe('packages/date-picker/utils/getWeeksArray', () => {
         expect.arrayContaining([
           expect.arrayContaining([
             null, // Mo
-            new Date(Date.UTC(2023, 7, 1)), // Tu
-            new Date(Date.UTC(2023, 7, 2)), // We
-            new Date(Date.UTC(2023, 7, 3)), // Th
-            new Date(Date.UTC(2023, 7, 4)), // Fr
-            new Date(Date.UTC(2023, 7, 5)), // Sa
-            new Date(Date.UTC(2023, 7, 6)), // Su
+            new Date(Date.UTC(2023, Month.August, 1)), // Tu
+            new Date(Date.UTC(2023, Month.August, 2)), // We
+            new Date(Date.UTC(2023, Month.August, 3)), // Th
+            new Date(Date.UTC(2023, Month.August, 4)), // Fr
+            new Date(Date.UTC(2023, Month.August, 5)), // Sa
+            new Date(Date.UTC(2023, Month.August, 6)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 7, 7)), // Mo
-            new Date(Date.UTC(2023, 7, 8)), // Tu
-            new Date(Date.UTC(2023, 7, 9)), // We
-            new Date(Date.UTC(2023, 7, 10)), // Th
-            new Date(Date.UTC(2023, 7, 11)), // Fr
-            new Date(Date.UTC(2023, 7, 12)), // Sa
-            new Date(Date.UTC(2023, 7, 13)), // Su
+            new Date(Date.UTC(2023, Month.August, 7)), // Mo
+            new Date(Date.UTC(2023, Month.August, 8)), // Tu
+            new Date(Date.UTC(2023, Month.August, 9)), // We
+            new Date(Date.UTC(2023, Month.August, 10)), // Th
+            new Date(Date.UTC(2023, Month.August, 11)), // Fr
+            new Date(Date.UTC(2023, Month.August, 12)), // Sa
+            new Date(Date.UTC(2023, Month.August, 13)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 7, 14)), // Mo
-            new Date(Date.UTC(2023, 7, 15)), // Tu
-            new Date(Date.UTC(2023, 7, 16)), // We
-            new Date(Date.UTC(2023, 7, 17)), // Th
-            new Date(Date.UTC(2023, 7, 18)), // Fr
-            new Date(Date.UTC(2023, 7, 19)), // Sa
-            new Date(Date.UTC(2023, 7, 20)), // Su
+            new Date(Date.UTC(2023, Month.August, 14)), // Mo
+            new Date(Date.UTC(2023, Month.August, 15)), // Tu
+            new Date(Date.UTC(2023, Month.August, 16)), // We
+            new Date(Date.UTC(2023, Month.August, 17)), // Th
+            new Date(Date.UTC(2023, Month.August, 18)), // Fr
+            new Date(Date.UTC(2023, Month.August, 19)), // Sa
+            new Date(Date.UTC(2023, Month.August, 20)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 7, 21)), // Mo
-            new Date(Date.UTC(2023, 7, 22)), // Tu
-            new Date(Date.UTC(2023, 7, 23)), // We
-            new Date(Date.UTC(2023, 7, 24)), // Th
-            new Date(Date.UTC(2023, 7, 25)), // Fr
-            new Date(Date.UTC(2023, 7, 26)), // Sa
-            new Date(Date.UTC(2023, 7, 27)), // Su
+            new Date(Date.UTC(2023, Month.August, 21)), // Mo
+            new Date(Date.UTC(2023, Month.August, 22)), // Tu
+            new Date(Date.UTC(2023, Month.August, 23)), // We
+            new Date(Date.UTC(2023, Month.August, 24)), // Th
+            new Date(Date.UTC(2023, Month.August, 25)), // Fr
+            new Date(Date.UTC(2023, Month.August, 26)), // Sa
+            new Date(Date.UTC(2023, Month.August, 27)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 7, 28)), // Mo
-            new Date(Date.UTC(2023, 7, 29)), // Tu
-            new Date(Date.UTC(2023, 7, 30)), // We
-            new Date(Date.UTC(2023, 7, 31)), // Th
+            new Date(Date.UTC(2023, Month.August, 28)), // Mo
+            new Date(Date.UTC(2023, Month.August, 29)), // Tu
+            new Date(Date.UTC(2023, Month.August, 30)), // We
+            new Date(Date.UTC(2023, Month.August, 31)), // Th
           ]),
         ]),
       );
@@ -120,44 +120,44 @@ describe('packages/date-picker/utils/getWeeksArray', () => {
             null, // Tu
             null, // We
             null, // Th
-            new Date(Date.UTC(2023, 8, 1)), // Fr
-            new Date(Date.UTC(2023, 8, 2)), // Sa
-            new Date(Date.UTC(2023, 8, 3)), // Su
+            new Date(Date.UTC(2023, Month.September, 1)), // Fr
+            new Date(Date.UTC(2023, Month.September, 2)), // Sa
+            new Date(Date.UTC(2023, Month.September, 3)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 8, 4)), // Mo
-            new Date(Date.UTC(2023, 8, 5)), // Tu
-            new Date(Date.UTC(2023, 8, 6)), // We
-            new Date(Date.UTC(2023, 8, 7)), // Th
-            new Date(Date.UTC(2023, 8, 8)), // Fr
-            new Date(Date.UTC(2023, 8, 9)), // Sa
-            new Date(Date.UTC(2023, 8, 10)), // Su
+            new Date(Date.UTC(2023, Month.September, 4)), // Mo
+            new Date(Date.UTC(2023, Month.September, 5)), // Tu
+            new Date(Date.UTC(2023, Month.September, 6)), // We
+            new Date(Date.UTC(2023, Month.September, 7)), // Th
+            new Date(Date.UTC(2023, Month.September, 8)), // Fr
+            new Date(Date.UTC(2023, Month.September, 9)), // Sa
+            new Date(Date.UTC(2023, Month.September, 10)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 8, 11)), // Mo
-            new Date(Date.UTC(2023, 8, 12)), // Tu
-            new Date(Date.UTC(2023, 8, 13)), // We
-            new Date(Date.UTC(2023, 8, 14)), // Th
-            new Date(Date.UTC(2023, 8, 15)), // Fr
-            new Date(Date.UTC(2023, 8, 16)), // Sa
-            new Date(Date.UTC(2023, 8, 17)), // Su
+            new Date(Date.UTC(2023, Month.September, 11)), // Mo
+            new Date(Date.UTC(2023, Month.September, 12)), // Tu
+            new Date(Date.UTC(2023, Month.September, 13)), // We
+            new Date(Date.UTC(2023, Month.September, 14)), // Th
+            new Date(Date.UTC(2023, Month.September, 15)), // Fr
+            new Date(Date.UTC(2023, Month.September, 16)), // Sa
+            new Date(Date.UTC(2023, Month.September, 17)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 8, 18)), // Mo
-            new Date(Date.UTC(2023, 8, 19)), // Tu
-            new Date(Date.UTC(2023, 8, 20)), // We
-            new Date(Date.UTC(2023, 8, 21)), // Th
-            new Date(Date.UTC(2023, 8, 22)), // Fr
-            new Date(Date.UTC(2023, 8, 23)), // Sa
-            new Date(Date.UTC(2023, 8, 24)), // Su
+            new Date(Date.UTC(2023, Month.September, 18)), // Mo
+            new Date(Date.UTC(2023, Month.September, 19)), // Tu
+            new Date(Date.UTC(2023, Month.September, 20)), // We
+            new Date(Date.UTC(2023, Month.September, 21)), // Th
+            new Date(Date.UTC(2023, Month.September, 22)), // Fr
+            new Date(Date.UTC(2023, Month.September, 23)), // Sa
+            new Date(Date.UTC(2023, Month.September, 24)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 8, 25)), // Mo
-            new Date(Date.UTC(2023, 8, 26)), // Tu
-            new Date(Date.UTC(2023, 8, 27)), // We
-            new Date(Date.UTC(2023, 8, 28)), // Th
-            new Date(Date.UTC(2023, 8, 29)), // Fr
-            new Date(Date.UTC(2023, 8, 30)), // Sa
+            new Date(Date.UTC(2023, Month.September, 25)), // Mo
+            new Date(Date.UTC(2023, Month.September, 26)), // Tu
+            new Date(Date.UTC(2023, Month.September, 27)), // We
+            new Date(Date.UTC(2023, Month.September, 28)), // Th
+            new Date(Date.UTC(2023, Month.September, 29)), // Fr
+            new Date(Date.UTC(2023, Month.September, 30)), // Sa
           ]),
         ]),
       );
@@ -194,42 +194,42 @@ describe('packages/date-picker/utils/getWeeksArray', () => {
           expect.arrayContaining([
             null, // Mo
             null, // Tu
-            new Date(Date.UTC(2023, 2, 1)), // We
-            new Date(Date.UTC(2023, 2, 2)), // Th
-            new Date(Date.UTC(2023, 2, 3)), // Fr
-            new Date(Date.UTC(2023, 2, 4)), // Sa
-            new Date(Date.UTC(2023, 2, 5)), // Su
+            new Date(Date.UTC(2023, Month.February, 1)), // We
+            new Date(Date.UTC(2023, Month.February, 2)), // Th
+            new Date(Date.UTC(2023, Month.February, 3)), // Fr
+            new Date(Date.UTC(2023, Month.February, 4)), // Sa
+            new Date(Date.UTC(2023, Month.February, 5)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 2, 6)), // Mo
-            new Date(Date.UTC(2023, 2, 7)), // Tu
-            new Date(Date.UTC(2023, 2, 8)), // We
-            new Date(Date.UTC(2023, 2, 9)), // Th
-            new Date(Date.UTC(2023, 2, 10)), // Fr
-            new Date(Date.UTC(2023, 2, 11)), // Sa
-            new Date(Date.UTC(2023, 2, 12)), // Su
+            new Date(Date.UTC(2023, Month.February, 6)), // Mo
+            new Date(Date.UTC(2023, Month.February, 7)), // Tu
+            new Date(Date.UTC(2023, Month.February, 8)), // We
+            new Date(Date.UTC(2023, Month.February, 9)), // Th
+            new Date(Date.UTC(2023, Month.February, 10)), // Fr
+            new Date(Date.UTC(2023, Month.February, 11)), // Sa
+            new Date(Date.UTC(2023, Month.February, 12)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 2, 13)), // Mo
-            new Date(Date.UTC(2023, 2, 14)), // Tu
-            new Date(Date.UTC(2023, 2, 15)), // We
-            new Date(Date.UTC(2023, 2, 16)), // Th
-            new Date(Date.UTC(2023, 2, 17)), // Fr
-            new Date(Date.UTC(2023, 2, 18)), // Sa
-            new Date(Date.UTC(2023, 2, 19)), // Su
+            new Date(Date.UTC(2023, Month.February, 13)), // Mo
+            new Date(Date.UTC(2023, Month.February, 14)), // Tu
+            new Date(Date.UTC(2023, Month.February, 15)), // We
+            new Date(Date.UTC(2023, Month.February, 16)), // Th
+            new Date(Date.UTC(2023, Month.February, 17)), // Fr
+            new Date(Date.UTC(2023, Month.February, 18)), // Sa
+            new Date(Date.UTC(2023, Month.February, 19)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 2, 20)), // Mo
-            new Date(Date.UTC(2023, 2, 21)), // Tu
-            new Date(Date.UTC(2023, 2, 22)), // We
-            new Date(Date.UTC(2023, 2, 23)), // Th
-            new Date(Date.UTC(2023, 2, 24)), // Fr
-            new Date(Date.UTC(2023, 2, 25)), // Sa
-            new Date(Date.UTC(2023, 2, 26)), // Su
+            new Date(Date.UTC(2023, Month.February, 20)), // Mo
+            new Date(Date.UTC(2023, Month.February, 21)), // Tu
+            new Date(Date.UTC(2023, Month.February, 22)), // We
+            new Date(Date.UTC(2023, Month.February, 23)), // Th
+            new Date(Date.UTC(2023, Month.February, 24)), // Fr
+            new Date(Date.UTC(2023, Month.February, 25)), // Sa
+            new Date(Date.UTC(2023, Month.February, 26)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 2, 27)), // Mo
-            new Date(Date.UTC(2023, 2, 28)), // Tu
+            new Date(Date.UTC(2023, Month.February, 27)), // Mo
+            new Date(Date.UTC(2023, Month.February, 28)), // Tu
           ]),
         ]),
       );
@@ -268,43 +268,43 @@ describe('packages/date-picker/utils/getWeeksArray', () => {
             null, // Mo
             null, // Tu
             null, // We
-            new Date(Date.UTC(2023, 2, 1)), // Th
-            new Date(Date.UTC(2023, 2, 2)), // Fr
-            new Date(Date.UTC(2023, 2, 3)), // Sa
-            new Date(Date.UTC(2023, 2, 4)), // Su
+            new Date(Date.UTC(2024, Month.February, 1)), // Th
+            new Date(Date.UTC(2024, Month.February, 2)), // Fr
+            new Date(Date.UTC(2024, Month.February, 3)), // Sa
+            new Date(Date.UTC(2024, Month.February, 4)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 2, 5)), // Mo
-            new Date(Date.UTC(2023, 2, 6)), // Tu
-            new Date(Date.UTC(2023, 2, 7)), // We
-            new Date(Date.UTC(2023, 2, 8)), // Th
-            new Date(Date.UTC(2023, 2, 9)), // Fr
-            new Date(Date.UTC(2023, 2, 10)), // Sa
-            new Date(Date.UTC(2023, 2, 11)), // Su
+            new Date(Date.UTC(2024, Month.February, 5)), // Mo
+            new Date(Date.UTC(2024, Month.February, 6)), // Tu
+            new Date(Date.UTC(2024, Month.February, 7)), // We
+            new Date(Date.UTC(2024, Month.February, 8)), // Th
+            new Date(Date.UTC(2024, Month.February, 9)), // Fr
+            new Date(Date.UTC(2024, Month.February, 10)), // Sa
+            new Date(Date.UTC(2024, Month.February, 11)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 2, 12)), // Mo
-            new Date(Date.UTC(2023, 2, 13)), // Tu
-            new Date(Date.UTC(2023, 2, 14)), // We
-            new Date(Date.UTC(2023, 2, 15)), // Th
-            new Date(Date.UTC(2023, 2, 16)), // Fr
-            new Date(Date.UTC(2023, 2, 17)), // Sa
-            new Date(Date.UTC(2023, 2, 18)), // Su
+            new Date(Date.UTC(2024, Month.February, 12)), // Mo
+            new Date(Date.UTC(2024, Month.February, 13)), // Tu
+            new Date(Date.UTC(2024, Month.February, 14)), // We
+            new Date(Date.UTC(2024, Month.February, 15)), // Th
+            new Date(Date.UTC(2024, Month.February, 16)), // Fr
+            new Date(Date.UTC(2024, Month.February, 17)), // Sa
+            new Date(Date.UTC(2024, Month.February, 18)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 2, 19)), // Mo
-            new Date(Date.UTC(2023, 2, 20)), // Tu
-            new Date(Date.UTC(2023, 2, 21)), // We
-            new Date(Date.UTC(2023, 2, 22)), // Th
-            new Date(Date.UTC(2023, 2, 23)), // Fr
-            new Date(Date.UTC(2023, 2, 24)), // Sa
-            new Date(Date.UTC(2023, 2, 25)), // Su
+            new Date(Date.UTC(2024, Month.February, 19)), // Mo
+            new Date(Date.UTC(2024, Month.February, 20)), // Tu
+            new Date(Date.UTC(2024, Month.February, 21)), // We
+            new Date(Date.UTC(2024, Month.February, 22)), // Th
+            new Date(Date.UTC(2024, Month.February, 23)), // Fr
+            new Date(Date.UTC(2024, Month.February, 24)), // Sa
+            new Date(Date.UTC(2024, Month.February, 25)), // Su
           ]),
           expect.arrayContaining([
-            new Date(Date.UTC(2023, 2, 26)), // Mo
-            new Date(Date.UTC(2023, 2, 27)), // Tu
-            new Date(Date.UTC(2023, 2, 28)), // We
-            new Date(Date.UTC(2023, 2, 29)), // Th
+            new Date(Date.UTC(2024, Month.February, 26)), // Mo
+            new Date(Date.UTC(2024, Month.February, 27)), // Tu
+            new Date(Date.UTC(2024, Month.February, 28)), // We
+            new Date(Date.UTC(2024, Month.February, 29)), // Th
           ]),
         ]),
       );
diff --git a/packages/date-picker/src/utils/getWeeksArray/index.ts b/packages/date-picker/src/utils/getWeeksArray/index.ts
index 7ee9d635aa..c1bd9d9e0d 100644
--- a/packages/date-picker/src/utils/getWeeksArray/index.ts
+++ b/packages/date-picker/src/utils/getWeeksArray/index.ts
@@ -1,9 +1,9 @@
-import { getDaysInMonth } from 'date-fns';
 import { chunk, fill, range } from 'lodash';
 import { getWeekStartByLocale } from 'weekstart';
 
 import { daysPerWeek } from '../../constants';
 import { BaseDatePickerProps } from '../../types';
+import { getDaysInUTCMonth } from '../getDaysInUTCMonth';
 import { setToUTCMidnight } from '../setToUTCMidnight';
 
 interface GetWeeksArrayOptions
@@ -31,8 +31,7 @@ export const getWeeksArray = (
   const startDayOfWeek = firstOfMonth.getUTCDay();
 
   // How many days in the month?
-  // TODO: need to rewrite getDaysInUTCMonth
-  const daysInMonth = getDaysInMonth(firstOfMonth);
+  const daysInMonth = getDaysInUTCMonth(firstOfMonth);
 
   // Shift the start column based on locale (weekStartsOn)
   const startColumn =

From 90892bcad5d17e739fcb981e71a64895ccaa587b Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 13 Sep 2023 16:14:36 -0400
Subject: [PATCH 068/351] adds isSameTZDay, isTodayTZ

---
 .../CalendarGrid/CalendarGrid.stories.tsx     |  23 +++-
 .../Calendar/CalendarGrid/CalendarGrid.tsx    |  13 +-
 .../DatePickerInput/DatePickerInput.tsx       |   2 +-
 .../src/utils/isSameTZDay/index.ts            |  45 +++++++
 .../src/utils/isSameTZDay/isSameTZDay.spec.ts |  96 ++++++++++++++
 .../utils/isSameUTCDay/isSameUTCDay.spec.ts   |  12 +-
 .../date-picker/src/utils/isTodayTZ/index.ts  |  20 +++
 .../src/utils/isTodayTZ/isTodayTZ.spec.ts     | 122 ++++++++++++++++++
 8 files changed, 314 insertions(+), 19 deletions(-)
 create mode 100644 packages/date-picker/src/utils/isSameTZDay/index.ts
 create mode 100644 packages/date-picker/src/utils/isSameTZDay/isSameTZDay.spec.ts
 create mode 100644 packages/date-picker/src/utils/isTodayTZ/index.ts
 create mode 100644 packages/date-picker/src/utils/isTodayTZ/isTodayTZ.spec.ts

diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index de96a3697e..101514f62d 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -1,6 +1,6 @@
+/* eslint-disable react/prop-types */
 import React, { useState } from 'react';
 import { StoryFn } from '@storybook/react';
-import { isToday } from 'date-fns';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
@@ -10,7 +10,9 @@ import { Locales, TimeZones } from '../../DatePicker.testUtils';
 import {
   DatePickerContextProps,
   DatePickerProvider,
+  useDatePickerContext,
 } from '../../DatePickerContext';
+import { isTodayTZ } from '../../utils/isTodayTZ';
 import { CalendarCell } from '../CalendarCell/CalendarCell';
 
 import { CalendarGrid } from './CalendarGrid';
@@ -35,7 +37,7 @@ const meta: StoryMetaType<typeof CalendarGrid, DatePickerContextProps> = {
     generate: {
       combineArgs: {
         darkMode: [false, true],
-        dateFormat: ['en-us', 'iso8601', 'en-UK', 'de', 'fa-AF'],
+        dateFormat: Locales,
       },
       decorator: ProviderWrapper,
     },
@@ -61,6 +63,7 @@ const meta: StoryMetaType<typeof CalendarGrid, DatePickerContextProps> = {
 export default meta;
 
 export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
+  const { timeZone } = useDatePickerContext();
   const [month] = useState(new Date(Date.UTC(2023, Month.August, 1)));
 
   const [hovered, setHovered] = useState<string | undefined>();
@@ -78,7 +81,7 @@ export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
       {(day, i) => (
         <CalendarCell
           key={i}
-          isCurrent={!!(day && isToday(day))}
+          isCurrent={isTodayTZ(day, timeZone)}
           isHighlighted={hovered ? hovered === day?.toISOString() : false}
           onMouseEnter={handleHover(day?.toISOString())}
           data-iso={day?.toISOString()}
@@ -90,4 +93,16 @@ export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
   );
 };
 
-export const Generated = () => {};
+export const Generated: StoryFn<typeof CalendarGrid> = () => <></>;
+Generated.parameters = {
+  generate: {
+    args: {
+      month: new Date(Date.UTC(2023, Month.August, 1)),
+      children: (day: Date, i: number) => (
+        <CalendarCell key={i} isCurrent={false} isHighlighted={false}>
+          {day?.getUTCDate()}
+        </CalendarCell>
+      ),
+    },
+  },
+};
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index 03bb938db3..9cca3eaf0b 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -28,11 +28,11 @@ export function CalendarGrid({ month, children, ...rest }: CalendarGridProps) {
         <tr>
           {range(daysPerWeek).map(i => {
             const dayIndex = (i + weekStartsOn) % daysPerWeek;
-            const d = DaysOfWeek[dayIndex];
+            const day = DaysOfWeek[dayIndex];
             return (
-              <th key={d.short} abbr={d.long}>
+              <th key={day.short} abbr={day.long}>
                 <Disclaimer className={calendarHeaderCellStyles}>
-                  {d.short}
+                  {day.short}
                 </Disclaimer>
               </th>
             );
@@ -43,11 +43,8 @@ export function CalendarGrid({ month, children, ...rest }: CalendarGridProps) {
         {weeks.map((week, w) => (
           <tr key={w}>
             {week.map((day, d) => {
-              return day ? (
-                children(day, w * daysPerWeek + d)
-              ) : (
-                <td key=""></td>
-              );
+              const index: number = w * daysPerWeek + d;
+              return day ? children(day, index) : <td key={index}></td>;
             })}
           </tr>
         ))}
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 4f9ce60d9e..bf04467497 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -19,7 +19,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     return (
       <DateInputWrapper
         label={label}
-        description={dateFormat + ' ' + timeZone}
+        description={'Current time: ' + new Date(Date.now()).toLocaleString()}
         inputId={inputId}
         labelId={labelId}
         descriptionId={descriptionId}
diff --git a/packages/date-picker/src/utils/isSameTZDay/index.ts b/packages/date-picker/src/utils/isSameTZDay/index.ts
new file mode 100644
index 0000000000..31e05b8482
--- /dev/null
+++ b/packages/date-picker/src/utils/isSameTZDay/index.ts
@@ -0,0 +1,45 @@
+import { addMilliseconds } from 'date-fns';
+import { getTimezoneOffset } from 'date-fns-tz';
+
+import { isSameUTCDay } from '../isSameUTCDay';
+
+/**
+ *
+ * Returns whether the `zonedTime`, in a given `timeZone`,
+ * has the same date as the provided UTC date
+ *
+ * e.g.
+ * ```js
+ * isSameTZDay(
+ *  Date("2023-12-26T01:00Z"), // 11:00 on Dec. 25 in NYC
+ *  Date("2023-12-25T00:00Z"), // 00:00 on Dec. 25 2023 in UTC
+ *  "America/New_York"
+ * )
+ * // Returns true
+ * ```
+ *
+ * @param zoned A Date object presumed to be in `timeZone`
+ * @param utc A UTC Date objects
+ * @param timeZone An IANA timeZone string
+ */
+export const isSameTZDay = (
+  zoned: Date,
+  utc: Date,
+  timeZone: string,
+): boolean => {
+  // Milliseconds offset between the given time zone & UTC
+  const offsetMs = getTimezoneOffset(timeZone, zoned);
+  if (isNaN(offsetMs)) return false;
+
+  // a date object that, when printed in ISO format,
+  // _looks like_ the local time for the given time zone.
+  // e.g. given zoned = "2023-12-26T01:00Z" and timeZone = "America/New_York",
+  // we get the date "2023-12-25T20:00Z" which _looks like_ the NYC local time (even though the date object technically incorrect)
+  const zonedInUtc = addMilliseconds(zoned, offsetMs);
+
+  // We then use this date object to check if it's the same day as the provided utc date
+  // e.g. is "2023-12-25T20:00Z" the same day as "2023-12-25T00:00Z"?
+  const isSameDay = isSameUTCDay(utc, zonedInUtc);
+
+  return isSameDay;
+};
diff --git a/packages/date-picker/src/utils/isSameTZDay/isSameTZDay.spec.ts b/packages/date-picker/src/utils/isSameTZDay/isSameTZDay.spec.ts
new file mode 100644
index 0000000000..38ba902462
--- /dev/null
+++ b/packages/date-picker/src/utils/isSameTZDay/isSameTZDay.spec.ts
@@ -0,0 +1,96 @@
+import { Month } from '../../constants';
+
+import { isSameTZDay } from './index';
+
+describe('packages/date-picker/utils/isSameTZDay', () => {
+  const utc24 = new Date(Date.UTC(2023, Month.December, 24, 0, 0, 0));
+  const utc25 = new Date(Date.UTC(2023, Month.December, 25, 0, 0, 0));
+  const utc26 = new Date(Date.UTC(2023, Month.December, 26, 0, 0, 0));
+
+  /** New York */
+  describe('America/New_York', () => {
+    // 20:00-23:59pm on Dec. 25 in New York (-5),
+    // is 00:00-05:59 on Dec. 26 in UTC
+
+    test('Before midnight local', () => {
+      const nyc25 = new Date(Date.UTC(2023, Month.December, 25, 16, 0, 0)); // 11:00 on Dec. 25 in NYC
+      expect(isSameTZDay(nyc25, utc25, 'America/New_York')).toBe(true);
+      expect(isSameTZDay(nyc25, utc26, 'America/New_York')).toBe(false);
+    });
+
+    test('Before midnight local, different UTC day', () => {
+      const nyc25 = new Date(Date.UTC(2023, Month.December, 26, 1, 0, 0)); // 20:00 on Dec. 25 in NYC
+      expect(isSameTZDay(nyc25, utc25, 'America/New_York')).toBe(true);
+      expect(isSameTZDay(nyc25, utc26, 'America/New_York')).toBe(false);
+    });
+
+    test('After midnight local', () => {
+      const nyc26 = new Date(Date.UTC(2023, Month.December, 26, 5, 0, 0)); // 00:00 on Dec. 26 in NYC
+      expect(isSameTZDay(nyc26, utc25, 'America/New_York')).toBe(false);
+      expect(isSameTZDay(nyc26, utc26, 'America/New_York')).toBe(true);
+    });
+  });
+
+  /** Honolulu */
+  describe('Pacific/Honolulu', () => {
+    // 14:00-23:59pm on Dec. 25 in Honolulu (-10),
+    // is 00:00-05:59 on Dec. 26 in UTC
+    test('Before midnight local', () => {
+      const hnl25 = new Date(Date.UTC(2023, Month.December, 25, 16, 0, 0)); // 06:00 on Dec. 25 in HNL
+      expect(isSameTZDay(hnl25, utc25, 'Pacific/Honolulu')).toBe(true);
+      expect(isSameTZDay(hnl25, utc26, 'Pacific/Honolulu')).toBe(false);
+    });
+
+    test('Before midnight local, different UTC day', () => {
+      const hnl25 = new Date(Date.UTC(2023, Month.December, 26, 1, 0, 0)); // 14:00 on Dec. 25 in HNL
+      expect(isSameTZDay(hnl25, utc25, 'Pacific/Honolulu')).toBe(true);
+      expect(isSameTZDay(hnl25, utc26, 'Pacific/Honolulu')).toBe(false);
+    });
+
+    test('After midnight local', () => {
+      const hnl26 = new Date(Date.UTC(2023, Month.December, 26, 10, 0, 0)); // 00:00 on Dec. 26 in HNL
+      expect(isSameTZDay(hnl26, utc26, 'Pacific/Honolulu')).toBe(true);
+      expect(isSameTZDay(hnl26, utc25, 'Pacific/Honolulu')).toBe(false);
+    });
+  });
+
+  /** London */
+  describe('Europe/London', () => {
+    // 00:00-23:59pm on Dec. 25 in London (+0),
+    // is 00:00-23:59 on Dec. 26 in UTC (no change)
+    test('Before midnight local', () => {
+      const ldn25 = new Date(Date.UTC(2023, Month.December, 25, 23, 0, 0)); // 06:00 on Dec. 25 in HNL
+      expect(isSameTZDay(ldn25, utc25, 'Europe/London')).toBe(true);
+      expect(isSameTZDay(ldn25, utc26, 'Europe/London')).toBe(false);
+    });
+
+    test('After midnight local', () => {
+      const ldn25 = new Date(Date.UTC(2023, Month.December, 25, 1, 0, 0)); // 06:00 on Dec. 25 in HNL
+      expect(isSameTZDay(ldn25, utc25, 'Europe/London')).toBe(true);
+      expect(isSameTZDay(ldn25, utc26, 'Europe/London')).toBe(false);
+    });
+  });
+
+  describe('Pacific/Auckland', () => {
+    // 00:00 - 11:59 on Dec. 26 in Auckland (+12)
+    // is 12:00 - 23:59 on Dec. 25 in UTC
+
+    test('Before midnight local', () => {
+      const akl24 = new Date(Date.UTC(2023, Month.December, 24, 10, 0, 0)); // 23:00 on Dec. 24 in AKL
+      expect(isSameTZDay(akl24, utc24, 'Pacific/Auckland')).toBe(true);
+      expect(isSameTZDay(akl24, utc25, 'Pacific/Auckland')).toBe(false);
+    });
+
+    test('After midnight local, different UTC day', () => {
+      const akl25 = new Date(Date.UTC(2023, Month.December, 24, 12, 0, 0)); // 00:00 on Dec. 25 in AKL
+      expect(isSameTZDay(akl25, utc24, 'Pacific/Auckland')).toBe(false);
+      expect(isSameTZDay(akl25, utc25, 'Pacific/Auckland')).toBe(true);
+    });
+
+    test('After midnight local, same UTC day', () => {
+      const akl25 = new Date(Date.UTC(2023, Month.December, 25, 0, 0, 0)); // 12:00 on Dec. 25 in AKL
+      expect(isSameTZDay(akl25, utc24, 'Pacific/Auckland')).toBe(false);
+      expect(isSameTZDay(akl25, utc25, 'Pacific/Auckland')).toBe(true);
+    });
+  });
+});
diff --git a/packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts b/packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts
index 023ef8bf73..8bd6e0ce75 100644
--- a/packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts
+++ b/packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts
@@ -2,26 +2,26 @@ import { isSameUTCDay } from '.';
 
 describe('packages/date-picker/utils/isSameUTCDay', () => {
   test('true: when both dates are defined in UTC', () => {
-    const utc1 = new Date(Date.UTC(2023, 8, 1));
+    const utc1 = new Date(Date.UTC(2023, 8, 1, 0, 0, 0));
     const utc2 = new Date(Date.UTC(2023, 8, 1, 21, 0, 0));
     expect(isSameUTCDay(utc1, utc2)).toBe(true);
   });
 
   test('false: when both dates are defined in UTC', () => {
-    const utc1 = new Date(Date.UTC(2023, 8, 1));
-    const utc2 = new Date(Date.UTC(2023, 8, 2));
+    const utc1 = new Date(Date.UTC(2023, 8, 1, 0, 0, 0));
+    const utc2 = new Date(Date.UTC(2023, 8, 2, 0, 0, 0));
     expect(isSameUTCDay(utc1, utc2)).toBe(false);
   });
 
   test('true: when one date is defined locally', () => {
-    const utc = new Date(Date.UTC(2023, 8, 10));
-    const local = new Date('2023-09-09T21:00');
+    const utc = new Date(Date.UTC(2023, 8, 10, 0, 0, 0));
+    const local = new Date('2023-09-09T21:00:00'); //2023-09-10T01:00:00Z
     expect(isSameUTCDay(utc, local)).toBe(true);
   });
 
   test('false: when one date is defined locally', () => {
     const utc = new Date(Date.UTC(2023, 8, 10));
-    const local = new Date('2023-09-09T12:00');
+    const local = new Date('2023-09-09T12:00'); //2023-09-09T16:00:00Z
     expect(isSameUTCDay(utc, local)).toBe(false);
   });
 
diff --git a/packages/date-picker/src/utils/isTodayTZ/index.ts b/packages/date-picker/src/utils/isTodayTZ/index.ts
new file mode 100644
index 0000000000..570cef32ff
--- /dev/null
+++ b/packages/date-picker/src/utils/isTodayTZ/index.ts
@@ -0,0 +1,20 @@
+import { isSameTZDay } from '../isSameTZDay';
+
+/**
+ * Returns whether a given date object is the same as today in a given time zone
+ *
+ * E.g.
+ * The client is in NYC;
+ * It's 10pm on Dec. 25th, 2023 (`"2023-12-26T00:00Z"`)
+ *
+ * ```js
+ * isTodayTz("2023-12-25", "America/New_York") //true
+ * isTodayTz("2023-12-25", "Pacific/Honolulu") //true
+ * isTodayTz("2023-12-25", "Europe/London") // false
+ * isTodayTz("2023-12-25", "Pacific/Auckland") // false
+ * ```
+ */
+export const isTodayTZ = (utcDay: Date, timeZone: string) => {
+  const clientNow = new Date(Date.now());
+  return isSameTZDay(clientNow, utcDay, timeZone);
+};
diff --git a/packages/date-picker/src/utils/isTodayTZ/isTodayTZ.spec.ts b/packages/date-picker/src/utils/isTodayTZ/isTodayTZ.spec.ts
new file mode 100644
index 0000000000..b627b827bb
--- /dev/null
+++ b/packages/date-picker/src/utils/isTodayTZ/isTodayTZ.spec.ts
@@ -0,0 +1,122 @@
+import { Month } from '../../constants';
+
+import { isTodayTZ } from '.';
+
+describe('packages/date-picker/utils/isTodayTZ', () => {
+  const utc25 = new Date(Date.UTC(2023, Month.December, 25, 0, 0, 0));
+
+  describe('NYC Client', () => {
+    beforeEach(() => {
+      jest.useFakeTimers().setSystemTime(
+        // 23:00 on Dec. 25 in NYC
+        new Date(Date.UTC(2023, Month.December, 26, 4, 0, 0)),
+      );
+    });
+
+    test('Pacific/Honolulu', () => {
+      const isToday = isTodayTZ(utc25, 'Pacific/Honolulu');
+      expect(isToday).toBe(true);
+    });
+
+    test('America/New_York', () => {
+      const isToday = isTodayTZ(utc25, 'America/New_York');
+      expect(isToday).toBe(true);
+    });
+
+    test('Europe/London', () => {
+      const isToday = isTodayTZ(utc25, 'Europe/London');
+      expect(isToday).toBe(false);
+    });
+
+    test('Pacific/Auckland', () => {
+      const isToday = isTodayTZ(utc25, 'Pacific/Auckland');
+      expect(isToday).toBe(false);
+    });
+  });
+
+  describe('Honolulu Client', () => {
+    beforeEach(() => {
+      jest.useFakeTimers().setSystemTime(
+        // 23:00 on Dec. 25 in HNL
+        new Date(Date.UTC(2023, Month.December, 26, 9, 0, 0)),
+      );
+    });
+    test('Pacific/Honolulu', () => {
+      const isToday = isTodayTZ(utc25, 'Pacific/Honolulu');
+      expect(isToday).toBe(true);
+    });
+
+    test('America/New_York', () => {
+      const isToday = isTodayTZ(utc25, 'America/New_York');
+      expect(isToday).toBe(false);
+    });
+
+    test('Europe/London', () => {
+      const isToday = isTodayTZ(utc25, 'Europe/London');
+      expect(isToday).toBe(false);
+    });
+
+    test('Pacific/Auckland', () => {
+      const isToday = isTodayTZ(utc25, 'Pacific/Auckland');
+      expect(isToday).toBe(false);
+    });
+  });
+
+  describe('London Client', () => {
+    beforeEach(() => {
+      jest.useFakeTimers().setSystemTime(
+        // 23:00 on Dec. 25 in LDN
+        new Date(Date.UTC(2023, Month.December, 25, 23, 0, 0)),
+      );
+    });
+
+    test('America/New_York', () => {
+      const isToday = isTodayTZ(utc25, 'America/New_York');
+      expect(isToday).toBe(true);
+    });
+
+    test('Pacific/Honolulu', () => {
+      const isToday = isTodayTZ(utc25, 'Pacific/Honolulu');
+      expect(isToday).toBe(true);
+    });
+
+    test('Europe/London', () => {
+      const isToday = isTodayTZ(utc25, 'Europe/London');
+      expect(isToday).toBe(true);
+    });
+
+    test('Pacific/Auckland', () => {
+      const isToday = isTodayTZ(utc25, 'Pacific/Auckland');
+      expect(isToday).toBe(false);
+    });
+  });
+
+  describe('Auckland Client', () => {
+    beforeEach(() => {
+      jest.useFakeTimers().setSystemTime(
+        // 00:00 on Dec. 25 in AKL
+        new Date(Date.UTC(2023, Month.December, 24, 12, 0, 0)),
+      );
+    });
+
+    test('America/New_York', () => {
+      const isToday = isTodayTZ(utc25, 'America/New_York');
+      expect(isToday).toBe(false);
+    });
+
+    test('Pacific/Honolulu', () => {
+      const isToday = isTodayTZ(utc25, 'Pacific/Honolulu');
+      expect(isToday).toBe(false);
+    });
+
+    test('Europe/London', () => {
+      const isToday = isTodayTZ(utc25, 'Europe/London');
+      expect(isToday).toBe(false);
+    });
+
+    test('Pacific/Auckland', () => {
+      const isToday = isTodayTZ(utc25, 'Pacific/Auckland');
+      expect(isToday).toBe(true);
+    });
+  });
+});

From c96300c93d2c18b3e8974fefc78c1147b140e8e2 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 13 Sep 2023 17:23:26 -0400
Subject: [PATCH 069/351] fix toDate function. Set default timeZone

---
 .../src/DatePicker/DatePicker.stories.tsx     |  6 ++--
 .../DatePickerInput/DatePickerInput.tsx       |  4 +--
 .../DatePickerContext/DatePickerContext.tsx   | 10 +++---
 .../src/utils/isValidDate/index.ts            | 30 ++++++++++++++--
 .../src/utils/isValidDate/isValidDate.spec.ts | 10 +++---
 .../date-picker/src/utils/toDate/index.ts     | 15 ++++----
 .../src/utils/toDate/toDate.spec.ts           | 34 +++++++++++++++++--
 7 files changed, 82 insertions(+), 27 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index 230ed7f939..ece9c245b6 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -44,7 +44,7 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
   args: {
     label: 'Pick a date',
     dateFormat: 'iso8601',
-    timeZone: 'Europe/London',
+    // timeZone: 'Europe/London',
     min: new Date('1996-10-14'),
     max: new Date('2026-10-14'),
   },
@@ -60,9 +60,7 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
 export default meta;
 
 export const Basic: StoryFn<typeof DatePicker> = props => {
-  const [value, setValue] = useState<Date | null | undefined>(
-    new Date('2023-09-10T00:00:00.000Z'),
-  );
+  const [value, setValue] = useState<Date | null | undefined>();
 
   return <DatePicker {...props} value={value} onChange={setValue} />;
 };
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index bf04467497..fa539222af 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -9,7 +9,7 @@ import { DatePickerInputProps } from './DatePickerInput.types';
 
 export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
   ({ value, setValue, onClick, ...rest }: DatePickerInputProps, fwdRef) => {
-    const { label, dateFormat, timeZone } = useDatePickerContext();
+    const { label, timeZone } = useDatePickerContext();
     const labelId = useIdAllocator({ prefix: 'date-label' });
     const descriptionId = useIdAllocator({ prefix: 'date-description' });
     const errorId = useIdAllocator({ prefix: 'date-description' });
@@ -19,7 +19,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     return (
       <DateInputWrapper
         label={label}
-        description={'Current time: ' + new Date(Date.now()).toLocaleString()}
+        description={timeZone}
         inputId={inputId}
         labelId={labelId}
         descriptionId={descriptionId}
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index 36c24cadb6..dafb3a0442 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -4,6 +4,7 @@ import { isWithinInterval } from 'date-fns';
 
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
+import { isValidDate } from '../utils/isValidDate';
 import { toDate } from '../utils/toDate';
 
 import {
@@ -14,7 +15,7 @@ import {
 export const defaultDatePickerContext: DatePickerContextProps = {
   label: '',
   dateFormat: 'en-US',
-  timeZone: 'America/New_York',
+  timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   min: new Date('12-31-1969'),
   max: new Date('01-19-2038'),
   isInRange: () => true,
@@ -34,11 +35,12 @@ export const DatePickerProvider = ({
   children,
   value,
 }: PropsWithChildren<{ value: DatePickerProviderProps }>) => {
+  const { min, max, ...rest } = value;
   const providerValue: DatePickerContextProps = {
     ...defaultDatePickerContext,
-    ...value,
-    min: value.min ? toDate(value.min) : defaultDatePickerContext.min,
-    max: value.max ? toDate(value.max) : defaultDatePickerContext.max,
+    ...rest,
+    min: isValidDate(min) ? toDate(min)! : defaultDatePickerContext.min,
+    max: isValidDate(max) ? toDate(max)! : defaultDatePickerContext.max,
   };
 
   const isInRange = (d?: Date | null): boolean =>
diff --git a/packages/date-picker/src/utils/isValidDate/index.ts b/packages/date-picker/src/utils/isValidDate/index.ts
index 86ba31cea7..320a19b979 100644
--- a/packages/date-picker/src/utils/isValidDate/index.ts
+++ b/packages/date-picker/src/utils/isValidDate/index.ts
@@ -1,6 +1,30 @@
-import { isUndefined } from 'lodash';
+import { has, isNull, isUndefined } from 'lodash';
+
+export const isValidDate = (
+  maybeDate?: Date | string | null,
+): maybeDate is Date | string => {
+  if (isUndefined(maybeDate) || isNull(maybeDate)) return false;
+
+  if (typeof maybeDate === 'string') {
+    return isValidDateString(maybeDate);
+  }
+
+  if (typeof maybeDate === 'object') {
+    return isValidDateObject(maybeDate);
+  }
+
+  return false;
+};
+
+export const isValidDateObject = (date?: any): date is Date => {
+  return (
+    !isUndefined(date) && typeof date === 'object' && has(date, 'getISOString')
+  );
+};
 
 /** Returns whether the provided string is a valid date */
-export const isValidDate = (str?: string): str is string => {
-  return !isUndefined(str) && !isNaN(Date.parse(str));
+export const isValidDateString = (str?: any): str is string => {
+  return (
+    !isUndefined(str) && typeof str === 'string' && !isNaN(Date.parse(str))
+  );
 };
diff --git a/packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts b/packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts
index 0c2d1687d2..85fdf365c6 100644
--- a/packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts
+++ b/packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts
@@ -1,15 +1,15 @@
-import { isValidDate } from '.';
+import { isValidDateString } from '.';
 
-describe('packages/date-picker/utils/isValidDate', () => {
+describe('packages/date-picker/utils/isValidDateString', () => {
   test('us format is valid', () => {
-    expect(isValidDate('12/26/1993')).toBeTruthy();
+    expect(isValidDateString('12/26/1993')).toBeTruthy();
   });
 
   test('iso format is valid', () => {
-    expect(isValidDate('1993-12-26')).toBeTruthy();
+    expect(isValidDateString('1993-12-26')).toBeTruthy();
   });
 
   test('undefined format is not valid', () => {
-    expect(isValidDate(undefined)).toBeFalsy();
+    expect(isValidDateString(undefined)).toBeFalsy();
   });
 });
diff --git a/packages/date-picker/src/utils/toDate/index.ts b/packages/date-picker/src/utils/toDate/index.ts
index d3ccfa942e..75b507306f 100644
--- a/packages/date-picker/src/utils/toDate/index.ts
+++ b/packages/date-picker/src/utils/toDate/index.ts
@@ -1,12 +1,13 @@
-import { isDate, isValid, toDate as _toDate } from 'date-fns';
+import { isValid, toDate as _toDate } from 'date-fns';
+import { isNull, isUndefined } from 'lodash';
+
+import { isValidDateObject } from '../isValidDate';
 
 /** A wrapper around `date-fns.toDate` that also accepts strings */
-export const toDate = (
-  dateLike?: string | number | Date | null,
-): Date | null => {
-  if (!dateLike) return null;
-  if (isDate(dateLike)) return dateLike as Date;
+export function toDate(dateLike?: string | number | Date | null): Date | null {
+  if (isUndefined(dateLike) || isNull(dateLike)) return null;
+  if (isValidDateObject(dateLike)) return new Date(dateLike);
   if (typeof dateLike === 'number') return _toDate(dateLike);
   const newDate = new Date(dateLike);
   return isValid(newDate) ? newDate : null;
-};
+}
diff --git a/packages/date-picker/src/utils/toDate/toDate.spec.ts b/packages/date-picker/src/utils/toDate/toDate.spec.ts
index 2f425b55fd..6e7dff4f81 100644
--- a/packages/date-picker/src/utils/toDate/toDate.spec.ts
+++ b/packages/date-picker/src/utils/toDate/toDate.spec.ts
@@ -1,4 +1,34 @@
+import { toDate } from '.';
+
 describe('packages/date-picker/utils/toDate', () => {
-  // TODO:
-  test.todo('');
+  test('Date', () => {
+    const d1 = new Date();
+    const d2 = toDate(d1);
+    expect(d2).toEqual(d1);
+  });
+  test('timestamp', () => {
+    const ts = Date.now();
+    const d = toDate(ts);
+    expect(d).toEqual(new Date(ts));
+  });
+  test('number', () => {
+    const d = toDate(0);
+    expect(d).toEqual(new Date(0));
+  });
+  test('ISO string', () => {
+    const d = toDate('2023-02-14');
+    expect(d).toEqual(new Date('2023-02-14'));
+  });
+  test('invalid string', () => {
+    const d = toDate('Tomorrow');
+    expect(d).toBeNull();
+  });
+  test('null', () => {
+    const d = toDate(null);
+    expect(d).toBeNull();
+  });
+  test('undefined', () => {
+    const d = toDate(undefined);
+    expect(d).toBeNull();
+  });
 });

From c80c104e18cfc504c7b70aeed87e1a41c22aa298 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 13 Sep 2023 18:07:45 -0400
Subject: [PATCH 070/351] scaffolds interaction tests

---
 .../src/DatePicker/DatePicker.spec.tsx        | 117 +++++++++++++++++-
 .../date-picker/src/DatePicker/DatePicker.tsx |  33 +++--
 2 files changed, 134 insertions(+), 16 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 298770a7c5..b09d8897b2 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1,8 +1,115 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+describe('packages/date-picker', () => {
+  describe('Mouse interaction', () => {
+    describe('Clicking the input', () => {
+      test.todo('focuses the first empty segment');
+      test.todo('opens the menu');
+    });
 
-import { DatePicker } from '.';
+    describe('Clicking a Calendar cell', () => {
+      test.todo('fires a change handler');
+      test.todo('does nothing if the cell is out-of-range');
+    });
 
-describe('packages/date-picker', () => {
-  test('condition', () => {});
+    describe('Clicking a Chevron', () => {
+      test.todo('Left updates the displayed month to the previous');
+      test.todo('Right updates the displayed month to the next');
+      test.todo('Left is disabled if prev. month is entirely out of range');
+      test.todo('Right is disabled if next month is entirely out of range');
+    });
+
+    describe('Clicking the month select menu', () => {
+      test.todo('does not close calendar menu');
+      test.todo('opens over the calendar menu');
+      test.todo('selecting the month updates the calendar');
+    });
+
+    describe('Clicking the year select menu', () => {
+      test.todo('does not close calendar menu');
+      test.todo('opens over the calendar menu');
+      test.todo('selecting the year updates the calendar');
+    });
+
+    describe('Clicking backdrop', () => {
+      test.todo('does not fire a change handler');
+      test.todo('closes the menu');
+    });
+  });
+
+  describe('Typing', () => {
+    describe('Typing into the input', () => {
+      test.todo('fires a change handler when the value is a valid date');
+      test.todo('does not fire a change handler when the value is incomplete');
+      test.todo('focuses the next segment if the segment value is valid');
+      test.todo('fires a validation handler if the value is updated');
+    });
+
+    describe('Delete key', () => {
+      test.todo('deletes any value in the input');
+      test.todo('deletes the whole value on multiple presses');
+      test.todo('focuses the previous segment if current segment is empty');
+    });
+  });
+
+  describe('Keyboard navigation', () => {
+    describe('Tab', () => {
+      describe('when the menu is open', () => {
+        test.todo('tab 1: Input'); // TODO: Should tab focus each segment separately?
+        test.todo('tab 2: Left Chevron');
+        test.todo('tab 3: Month menu');
+        test.todo('tab 4: Year menu');
+        test.todo('tab 5: Right Chevron');
+        test.todo('tab 6: Calendar grid (selected date)');
+        test.todo('tab 7: Returns to Input');
+      });
+      describe('when menu is closed', () => {
+        test.todo('tab 1: Input'); // TODO: Should tab focus each segment separately?
+        test.todo('tab 2: next element in tab order');
+      });
+    });
+
+    describe('Up/Down Arrow', () => {
+      describe('when the input is focused', () => {
+        test.todo('up arrow increments the segments value');
+        test.todo('down arrow decrements the segments value');
+      });
+      describe('when any menu element is focused', () => {});
+    });
+
+    describe('Left/Right Arrow', () => {
+      describe('when the input is focused', () => {
+        describe('when the segment is empty', () => {
+          test.todo('left arrow focuses the prev. segment');
+          test.todo('right arrow focuses the next segment');
+        });
+
+        describe('when the segment has a value', () => {
+          test.todo('left arrow moves the cursor');
+          test.todo('right moves the cursor');
+        });
+      });
+      describe('when any menu element is focused', () => {
+        test.todo('up arrow decrements the week by 1');
+        test.todo('down arrow decrements the week by 1');
+        test.todo('left arrow decrements the day by 1');
+        test.todo('right arrow increments the day by 1');
+        test.todo('up arrow changes the displayed month if necessary');
+        test.todo('down arrow changes the displayed month if necessary');
+        test.todo('left arrow changes the displayed month if necessary');
+        test.todo('right arrow changes the displayed month if necessary');
+      });
+    });
+
+    describe('Enter key', () => {
+      test.todo('fires a change handler');
+      test.todo('closes the menu');
+      test.todo('if month/year select is open, updates the displayed month');
+      test.todo('if menu is closed, opens the menu');
+    });
+
+    describe('Escape key', () => {
+      test.todo('closes the menu');
+      test.todo('does not fire a change handler');
+      test.todo('focus remains on the input element');
+    });
+  });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index e2f460287d..b531a87fd4 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -1,4 +1,10 @@
-import React, { forwardRef, useMemo, useRef, useState } from 'react';
+import React, {
+  forwardRef,
+  MouseEventHandler,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { isSameMonth, setMonth } from 'date-fns';
 
 import { useBackdropClick } from '@leafygreen-ui/hooks';
@@ -7,8 +13,8 @@ import { DatePickerProvider } from '../DatePickerContext';
 import { toDate } from '../utils/toDate';
 
 import { DatePickerProps } from './DatePicker.types';
-import { DatePickerInput } from './DatePickerInput';
-import { DatePickerMenu } from './DatePickerMenu';
+import { DatePickerInput, DatePickerInputProps } from './DatePickerInput';
+import { DatePickerMenu, DatePickerMenuProps } from './DatePickerMenu';
 
 export const DatePicker = forwardRef(
   ({
@@ -42,17 +48,25 @@ export const DatePicker = forwardRef(
       isOpen,
     );
 
-    const handleInputChange = (inputVal: Date | null) => {
+    const handleInputChange: DatePickerInputProps['setValue'] = (
+      inputVal: Date | null,
+    ) => {
       if (inputVal !== utcValue) updateValue(inputVal);
     };
 
-    const handleCellClick = (cellValue: Date) => {
+    const handleCellClick: DatePickerMenuProps['onCellClick'] = cellValue => {
       updateValue(cellValue);
       setOpen(false);
     };
 
-    const handleMonthChange = (newMonth: Date) => {
-      setDisplayMonth(newMonth);
+    const handleMonthChange: DatePickerMenuProps['onMonthChange'] =
+      newMonth => {
+        setDisplayMonth(newMonth);
+      };
+
+    const handleInputClick: MouseEventHandler = e => {
+      // TODO: Set focus to appropriate segment
+      setOpen(true);
     };
 
     return (
@@ -61,10 +75,7 @@ export const DatePicker = forwardRef(
           ref={inputRef}
           value={utcValue}
           setValue={handleInputChange}
-          onClick={() => {
-            // TODO: Set focus to appropriate segment
-            setOpen(true);
-          }}
+          onClick={handleInputClick}
         />
         <DatePickerMenu
           refEl={inputRef}

From 731ae570b19faa351e45dcd98554736ef94e1a8d Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 15 Sep 2023 11:42:28 -0400
Subject: [PATCH 071/351] misc writing tests

---
 .changeset/seven-stingrays-bake.md            |  5 +
 .../CalendarGrid/CalendarGrid.stories.tsx     |  2 +-
 .../Calendar/CalendarGrid/CalendarGrid.tsx    |  8 +-
 .../src/Calendar/MenuWrapper/MenuWrapper.tsx  |  7 +-
 .../DateInputWrapper/DateInputWrapper.tsx     |  6 +-
 .../src/DatePicker/DatePicker.spec.tsx        | 98 ++++++++++++++++++-
 .../src/DatePicker/DatePicker.stories.tsx     |  4 +-
 .../date-picker/src/DatePicker/DatePicker.tsx | 57 ++++++++---
 .../src/DatePicker/DatePicker.types.ts        |  2 +-
 .../DatePickerInput/DatePickerInput.tsx       |  8 +-
 .../DatePickerMenu/DatePickerMenu.tsx         |  7 +-
 .../DatePickerMenu/DatePickerMenu.types.ts    |  4 +-
 .../DatePickerContext/DatePickerContext.tsx   |  8 +-
 .../DatePickerContext.types.ts                | 13 ++-
 .../{DatePicker.testUtils.ts => testUtils.ts} |  0
 .../src/utils/pickAndOmit/index.ts            | 22 +++++
 packages/popover/src/index.ts                 |  6 +-
 packages/popover/src/types.ts                 |  2 +-
 18 files changed, 219 insertions(+), 40 deletions(-)
 create mode 100644 .changeset/seven-stingrays-bake.md
 rename packages/date-picker/src/{DatePicker.testUtils.ts => testUtils.ts} (100%)
 create mode 100644 packages/date-picker/src/utils/pickAndOmit/index.ts

diff --git a/.changeset/seven-stingrays-bake.md b/.changeset/seven-stingrays-bake.md
new file mode 100644
index 0000000000..82c4abea30
--- /dev/null
+++ b/.changeset/seven-stingrays-bake.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/popover': patch
+---
+
+Exports `ChildrenFunctionParameters` type
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index 101514f62d..030f3de991 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -6,7 +6,7 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
 import { Month } from '../../constants';
-import { Locales, TimeZones } from '../../DatePicker.testUtils';
+import { Locales, TimeZones } from '../../testUtils';
 import {
   DatePickerContextProps,
   DatePickerProvider,
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index 9cca3eaf0b..5a6c5c782e 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -41,10 +41,14 @@ export function CalendarGrid({ month, children, ...rest }: CalendarGridProps) {
       </thead>
       <tbody>
         {weeks.map((week, w) => (
-          <tr key={w}>
+          <tr key={`week-${w}`}>
             {week.map((day, d) => {
               const index: number = w * daysPerWeek + d;
-              return day ? children(day, index) : <td key={index}></td>;
+              return day ? (
+                children(day, index)
+              ) : (
+                <td key={`null-${index}`}></td>
+              );
             })}
           </tr>
         ))}
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
index 1443a7b35d..81d20b9bf7 100644
--- a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
+++ b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { HTMLElementProps } from '@leafygreen-ui/lib';
 import Popover, { PopoverProps } from '@leafygreen-ui/popover';
 
 import { menuStyles } from './MenuWrapper.styles';
@@ -10,7 +11,11 @@ import { menuStyles } from './MenuWrapper.styles';
  * A styled popover
  */
 export const MenuWrapper = forwardRef(
-  ({ className, children, ...props }: PopoverProps) => {
+  ({
+    className,
+    children,
+    ...props
+  }: PopoverProps & HTMLElementProps<'div'>) => {
     const { theme } = useDarkMode();
 
     return (
diff --git a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx
index 31f8d9034e..5629d041af 100644
--- a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx
+++ b/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx
@@ -49,7 +49,7 @@ export const DateInputWrapper = React.forwardRef<
     fwdRef,
   ) => {
     const { theme } = useDarkMode();
-    const { size } = useDatePickerContext();
+    const { size, isOpen, menuId } = useDatePickerContext();
     const baseFontSize = useUpdatedBaseFontSize();
 
     return (
@@ -70,6 +70,10 @@ export const DateInputWrapper = React.forwardRef<
         </div>
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div
+          role="combobox"
+          aria-expanded={isOpen}
+          aria-controls={menuId}
+          tabIndex={-1}
           onClick={onInputClick}
           className={cx(
             inputBaseStyles,
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index b09d8897b2..532344ac5d 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1,8 +1,102 @@
+import React from 'react';
+import {
+  getByRole as globalGetByRole,
+  render,
+  waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { DatePickerProps } from './DatePicker.types';
+import { DatePicker } from '.';
+
+const renderDatePicker = (props?: DatePickerProps) => {
+  const result = render(
+    <DatePicker label="" data-testid="lg-date-picker" {...props} />,
+  );
+
+  const formFieldWrapper = result.getByTestId('lg-date-picker');
+  const inputContainer = result.getByRole('combobox');
+  const dayInput = result.container.querySelector('input[aria-label="day"]');
+  const monthInput = result.container.querySelector(
+    'input[aria-label="month"]',
+  );
+  const yearInput = result.container.querySelector('input[aria-label="year"]');
+
+  /**
+   * Returns relevant menu elements.
+   * Call this after the menu has been opened
+   */
+  function getMenuElements() {
+    const menuContainerEl = result.queryByRole('listbox');
+
+    return {
+      menuContainerEl,
+    };
+  }
+
+  return {
+    ...result,
+    formFieldWrapper,
+    inputContainer,
+    dayInput,
+    monthInput,
+    yearInput,
+    getMenuElements,
+  };
+};
+
 describe('packages/date-picker', () => {
+  describe('Rendering', () => {
+    /// Note: Most rendering tests handled by Chromatic
+    test('spreads rest to formFieldWrapper', () => {
+      const { getByTestId } = render(
+        <DatePicker label="Label" data-testid="lg-date-picker" />,
+      );
+      const wrapper = getByTestId('lg-date-picker');
+      expect(wrapper).toBeInTheDocument();
+    });
+
+    test('wrapper contains label', () => {
+      const { getByTestId } = render(
+        <DatePicker label="Label" data-testid="lg-date-picker" />,
+      );
+      const wrapper = getByTestId('lg-date-picker');
+      expect(wrapper.querySelector('label')).toBeInTheDocument();
+      expect(wrapper.querySelector('label')).toHaveTextContent('Label');
+    });
+
+    test('renders 3 inputs', () => {
+      const { dayInput, monthInput, yearInput } = renderDatePicker();
+      expect(dayInput).toBeInTheDocument();
+      expect(monthInput).toBeInTheDocument();
+      expect(yearInput).toBeInTheDocument();
+    });
+
+    test('menu is initially closed', () => {
+      const { getMenuElements } = renderDatePicker();
+      const { menuContainerEl } = getMenuElements();
+      expect(menuContainerEl).not.toBeInTheDocument();
+    });
+  });
+
   describe('Mouse interaction', () => {
     describe('Clicking the input', () => {
-      test.todo('focuses the first empty segment');
-      test.todo('opens the menu');
+      test('opens the menu', async () => {
+        const { inputContainer, getMenuElements } = renderDatePicker();
+        userEvent.click(inputContainer);
+        await waitFor(() => {
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).toBeInTheDocument();
+        });
+      });
+
+      test('focuses the first empty segment', async () => {
+        const { inputContainer, yearInput } = renderDatePicker();
+        userEvent.click(inputContainer);
+        await waitFor(() => {
+          expect(yearInput).toHaveFocus();
+        });
+      });
     });
 
     describe('Clicking a Calendar cell', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index ece9c245b6..4f674ee56d 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -5,11 +5,11 @@ import { StoryFn } from '@storybook/react';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
-import { Locales, TimeZones } from '../DatePicker.testUtils';
 import {
   DatePickerContextProps,
   DatePickerProvider,
 } from '../DatePickerContext';
+import { Locales, TimeZones } from '../testUtils';
 
 import { DatePicker } from './DatePicker';
 
@@ -43,8 +43,6 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
   },
   args: {
     label: 'Pick a date',
-    dateFormat: 'iso8601',
-    // timeZone: 'Europe/London',
     min: new Date('1996-10-14'),
     max: new Date('2026-10-14'),
   },
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index b531a87fd4..ac0e536305 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -7,27 +7,54 @@ import React, {
 } from 'react';
 import { isSameMonth, setMonth } from 'date-fns';
 
-import { useBackdropClick } from '@leafygreen-ui/hooks';
+import { useBackdropClick, useIdAllocator } from '@leafygreen-ui/hooks';
 
-import { DatePickerProvider } from '../DatePickerContext';
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+  DatePickerProviderProps,
+} from '../DatePickerContext';
+import { pickAndOmit } from '../utils/pickAndOmit';
 import { toDate } from '../utils/toDate';
 
 import { DatePickerProps } from './DatePicker.types';
 import { DatePickerInput, DatePickerInputProps } from './DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from './DatePickerMenu';
 
+/** Prop names that are in both DatePickerProps and DatePickerProviderProps */
+const contextPropNames: Array<
+  keyof Omit<DatePickerProviderProps, 'isOpen' | 'menuId'>
+> = [
+  'label',
+  'dateFormat',
+  'timeZone',
+  'min',
+  'max',
+  'baseFontSize',
+  'disabled',
+  'size',
+  'state',
+  'errorMessage',
+];
+
+/**
+ * LeafyGreen Date Picker component
+ */
 export const DatePicker = forwardRef(
   ({
     value: valueProp,
     initialValue,
     onChange,
     handleValidation,
-    ...rest
+    ...props
   }: DatePickerProps) => {
+    const [contextProps, restProps] = pickAndOmit(props, contextPropNames);
+    const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
     const inputRef = useRef<HTMLDivElement>(null);
     const menuRef = useRef<HTMLDivElement>(null);
-    const [isOpen, setOpen] = useState(false);
     const [displayMonth, setDisplayMonth] = useState<Date>(new Date());
+    const [isOpen, setOpen] = useState(false);
+    const closeMenu = () => setOpen(false);
 
     const utcValue = useMemo(() => toDate(valueProp), [valueProp]);
 
@@ -40,13 +67,7 @@ export const DatePicker = forwardRef(
       onChange?.(newVal);
     };
 
-    useBackdropClick(
-      () => {
-        setOpen(false);
-      },
-      [inputRef, menuRef],
-      isOpen,
-    );
+    useBackdropClick(closeMenu, [inputRef, menuRef], isOpen);
 
     const handleInputChange: DatePickerInputProps['setValue'] = (
       inputVal: Date | null,
@@ -55,6 +76,7 @@ export const DatePicker = forwardRef(
     };
 
     const handleCellClick: DatePickerMenuProps['onCellClick'] = cellValue => {
+      console.log('onCellClick', cellValue);
       updateValue(cellValue);
       setOpen(false);
     };
@@ -65,21 +87,30 @@ export const DatePicker = forwardRef(
       };
 
     const handleInputClick: MouseEventHandler = e => {
+      console.log('handleInputClick');
       // TODO: Set focus to appropriate segment
       setOpen(true);
     };
 
     return (
-      <DatePickerProvider value={rest}>
+      <DatePickerProvider
+        value={{
+          ...contextProps,
+          isOpen,
+          menuId,
+        }}
+      >
         <DatePickerInput
           ref={inputRef}
           value={utcValue}
           setValue={handleInputChange}
           onClick={handleInputClick}
+          {...restProps}
         />
         <DatePickerMenu
-          refEl={inputRef}
           ref={menuRef}
+          id={menuId}
+          refEl={inputRef}
           value={utcValue}
           isOpen={isOpen}
           month={displayMonth}
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index 8c4626079a..eb23c9178d 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -12,7 +12,7 @@ export interface DatePickerProps extends BaseDatePickerProps {
    *
    * Callback date argument will be a Date object in ISO-8601 format, and in UTC time.
    */
-  onChange: (value: Date | null) => void;
+  onChange?: (value: Date | null) => void;
 
   /** The initial selected date. Ignored if `value` is provided */
   initialValue?: string | Date;
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index fa539222af..0e2990e16c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -10,10 +10,10 @@ import { DatePickerInputProps } from './DatePickerInput.types';
 export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
   ({ value, setValue, onClick, ...rest }: DatePickerInputProps, fwdRef) => {
     const { label, timeZone } = useDatePickerContext();
-    const labelId = useIdAllocator({ prefix: 'date-label' });
-    const descriptionId = useIdAllocator({ prefix: 'date-description' });
-    const errorId = useIdAllocator({ prefix: 'date-description' });
-    const inputId = useIdAllocator({ prefix: 'date-input' });
+    const labelId = useIdAllocator({ prefix: 'lg-date-label' });
+    const descriptionId = useIdAllocator({ prefix: 'lg-date-description' });
+    const errorId = useIdAllocator({ prefix: 'lg-date-description' });
+    const inputId = useIdAllocator({ prefix: 'lg-date-input' });
     const ref = useForwardedRef(fwdRef, null);
 
     return (
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index ead3ffa002..391a697fad 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -52,17 +52,20 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
         active={isOpen}
         spacing={spacing[1]}
         className={menuWrapperStyles}
+        ref={ref}
+        role="listbox"
         {...rest}
       >
-        <div ref={ref} className={menuContentStyles}>
+        <div className={menuContentStyles}>
           <DatePickerMenuHeader month={month} onMonthChange={onMonthChange} />
           <CalendarGrid
             month={month}
             className={menuCalendarGridStyles}
             onMouseLeave={() => setHighlight(null)}
           >
-            {day => (
+            {(day, i) => (
               <CalendarCell
+                key={i}
                 isHighlighted={isSameUTCDay(day, highlight)}
                 isCurrent={isCurrentUTCDay(day)}
                 state={getCellState(day)}
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
index 8156f84548..dbd4805e49 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
@@ -1,8 +1,10 @@
+import { HTMLElementProps } from '@leafygreen-ui/lib';
 import { PopoverProps } from '@leafygreen-ui/popover';
 import { PortalControlProps } from '@leafygreen-ui/popover';
 
 export type DatePickerMenuProps = PortalControlProps &
-  Pick<PopoverProps, 'refEl'> & {
+  Pick<PopoverProps, 'refEl'> &
+  HTMLElementProps<'div'> & {
     /** Whether the calendar menu popover is open */
     isOpen: boolean;
 
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index dafb3a0442..2aed9490e1 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { createContext, PropsWithChildren, useContext } from 'react';
 import { isWithinInterval } from 'date-fns';
+import { defaults } from 'lodash';
 
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
@@ -14,10 +15,11 @@ import {
 
 export const defaultDatePickerContext: DatePickerContextProps = {
   label: '',
-  dateFormat: 'en-US',
+  dateFormat: 'iso8601',
   timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   min: new Date('12-31-1969'),
   max: new Date('01-19-2038'),
+  isOpen: false,
   isInRange: () => true,
   disabled: false,
   size: Size.Default,
@@ -25,6 +27,7 @@ export const defaultDatePickerContext: DatePickerContextProps = {
   errorMessage: '',
   baseFontSize: BaseFontSize.Body1,
   darkMode: false,
+  menuId: '',
 };
 
 export const DatePickerContext = createContext<DatePickerContextProps>(
@@ -37,8 +40,7 @@ export const DatePickerProvider = ({
 }: PropsWithChildren<{ value: DatePickerProviderProps }>) => {
   const { min, max, ...rest } = value;
   const providerValue: DatePickerContextProps = {
-    ...defaultDatePickerContext,
-    ...rest,
+    ...defaults(rest, defaultDatePickerContext),
     min: isValidDate(min) ? toDate(min)! : defaultDatePickerContext.min,
     max: isValidDate(max) ? toDate(max)! : defaultDatePickerContext.max,
   };
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
index fd9dc98eeb..a2bc0f4b97 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
@@ -1,9 +1,17 @@
 import { BaseDatePickerProps } from 'src/types';
 
+/** The props expected by the provider */
+export interface DatePickerProviderProps extends BaseDatePickerProps {
+  /** Whether the calendar menu is open */
+  isOpen: boolean;
+  menuId: string;
+}
+
 /**
  * The values in context
  */
-export interface DatePickerContextProps extends Required<BaseDatePickerProps> {
+export interface DatePickerContextProps
+  extends Required<DatePickerProviderProps> {
   /** The earliest date accepted */
   min: Date;
 
@@ -15,6 +23,3 @@ export interface DatePickerContextProps extends Required<BaseDatePickerProps> {
    */
   isInRange: (d?: Date | null) => boolean;
 }
-
-/** The props expected by the provider */
-export interface DatePickerProviderProps extends BaseDatePickerProps {}
diff --git a/packages/date-picker/src/DatePicker.testUtils.ts b/packages/date-picker/src/testUtils.ts
similarity index 100%
rename from packages/date-picker/src/DatePicker.testUtils.ts
rename to packages/date-picker/src/testUtils.ts
diff --git a/packages/date-picker/src/utils/pickAndOmit/index.ts b/packages/date-picker/src/utils/pickAndOmit/index.ts
new file mode 100644
index 0000000000..66fe3868c6
--- /dev/null
+++ b/packages/date-picker/src/utils/pickAndOmit/index.ts
@@ -0,0 +1,22 @@
+import { omit, pick } from 'lodash';
+
+/**
+ * Returns an array of 2 objects,
+ * first, the result of calling `_.pick`,
+ * second, the result of calling `_.omit`
+ *
+ * e.g.
+ * ```js
+ * const obj = { a: 'A', b: 'B', c: 'C', d: 'D' }
+ * pickAndOmit(obj, ['a', 'b']) // [{a: "A", b: "B"}, {c: "C", d: "D"}]
+ * ```
+ */
+export const pickAndOmit = <T extends object, K extends keyof T>(
+  object: T,
+  keys: Array<K>,
+): [Pick<T, K>, Omit<T, K>] => {
+  const picked = pick(object, keys);
+  const omitted = omit(object, keys);
+
+  return [picked, omitted];
+};
diff --git a/packages/popover/src/index.ts b/packages/popover/src/index.ts
index e9773678b4..912632542e 100644
--- a/packages/popover/src/index.ts
+++ b/packages/popover/src/index.ts
@@ -1,7 +1,11 @@
 import { getAlign, getJustify } from './Popover.testutils';
 export { contentClassName, default } from './Popover';
 export type { PortalControlProps } from './types';
-export type { ElementPosition, PopoverProps } from './types';
+export type {
+  ChildrenFunctionParameters,
+  ElementPosition,
+  PopoverProps,
+} from './types';
 export { Align, Justify } from './types';
 
 export const TestUtils = {
diff --git a/packages/popover/src/types.ts b/packages/popover/src/types.ts
index 5783171235..fb4835a3b8 100644
--- a/packages/popover/src/types.ts
+++ b/packages/popover/src/types.ts
@@ -49,7 +49,7 @@ export interface ElementPosition {
   width: number;
 }
 
-interface ChildrenFunctionParameters {
+export interface ChildrenFunctionParameters {
   align: Align;
   justify: Justify;
   referenceElPos: ElementPosition;

From f4c9233737df9d46081b142b3d14710772b12afe Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 15 Sep 2023 11:46:34 -0400
Subject: [PATCH 072/351] DateInputWrapper -> DateFormField

---
 .../DateFormField.spec.tsx}                        |  2 +-
 .../DateFormField.stories.tsx}                     | 14 +++++++-------
 .../DateFormField.styles.ts}                       |  2 +-
 .../DateFormField.tsx}                             | 12 ++++++------
 .../DateFormField.types.ts}                        |  2 +-
 .../src/DateInput/DateFormField/index.ts           |  5 +++++
 .../src/DateInput/DateInputWrapper/index.ts        |  5 -----
 packages/date-picker/src/DateInput/index.ts        | 11 ++---------
 .../DatePicker/DatePickerInput/DatePickerInput.tsx |  6 +++---
 9 files changed, 26 insertions(+), 33 deletions(-)
 rename packages/date-picker/src/DateInput/{DateInputWrapper/DateInputWrapper.spec.tsx => DateFormField/DateFormField.spec.tsx} (80%)
 rename packages/date-picker/src/DateInput/{DateInputWrapper/DateInputWrapper.stories.tsx => DateFormField/DateFormField.stories.tsx} (91%)
 rename packages/date-picker/src/DateInput/{DateInputWrapper/DateInputWrapper.styles.ts => DateFormField/DateFormField.styles.ts} (99%)
 rename packages/date-picker/src/DateInput/{DateInputWrapper/DateInputWrapper.tsx => DateFormField/DateFormField.tsx} (89%)
 rename packages/date-picker/src/DateInput/{DateInputWrapper/DateInputWrapper.types.ts => DateFormField/DateFormField.types.ts} (88%)
 create mode 100644 packages/date-picker/src/DateInput/DateFormField/index.ts
 delete mode 100644 packages/date-picker/src/DateInput/DateInputWrapper/index.ts

diff --git a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.spec.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.spec.tsx
similarity index 80%
rename from packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.spec.tsx
rename to packages/date-picker/src/DateInput/DateFormField/DateFormField.spec.tsx
index 1a88f8a8ae..0ca061db3e 100644
--- a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { DateInputWrapper } from '.';
+import { DateFormField } from '.';
 
 describe('packages/input-wrapper', () => {
   test('condition', () => {});
diff --git a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.stories.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
similarity index 91%
rename from packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.stories.tsx
rename to packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
index f74dd67c25..a8ff091da1 100644
--- a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
@@ -11,14 +11,14 @@ import {
   DatePickerProvider,
 } from '../../DatePickerContext';
 
-import { DateInputWrapper } from './DateInputWrapper';
+import { DateFormField } from './DateFormField';
 
 const meta: StoryMetaType<
-  typeof DateInputWrapper,
+  typeof DateFormField,
   Partial<DatePickerContextProps>
 > = {
-  title: 'Components/DatePicker/DateInputWrapper',
-  component: DateInputWrapper,
+  title: 'Components/DatePicker/DateFormField',
+  component: DateFormField,
   parameters: {
     default: null,
     controls: {
@@ -81,7 +81,7 @@ const meta: StoryMetaType<
 
 export default meta;
 
-const Template: StoryFn<typeof DateInputWrapper> = ({
+const Template: StoryFn<typeof DateFormField> = ({
   label,
   description,
   state,
@@ -92,7 +92,7 @@ const Template: StoryFn<typeof DateInputWrapper> = ({
   const errorId = 'error';
 
   return (
-    <DateInputWrapper
+    <DateFormField
       label={label}
       description={description}
       state={state}
@@ -114,7 +114,7 @@ const Template: StoryFn<typeof DateInputWrapper> = ({
         }}
         placeholder="<placeholder>"
       />
-    </DateInputWrapper>
+    </DateFormField>
   );
 };
 
diff --git a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.styles.ts b/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts
similarity index 99%
rename from packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.styles.ts
rename to packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts
index f0dae94076..063608c0b6 100644
--- a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.styles.ts
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts
@@ -13,7 +13,7 @@ import {
   typeScales,
 } from '@leafygreen-ui/tokens';
 
-import { InputState } from './DateInputWrapper.types';
+import { InputState } from './DateFormField.types';
 
 export const baseWrapperStyles = css``;
 
diff --git a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
similarity index 89%
rename from packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx
rename to packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
index 5629d041af..5532b96f91 100644
--- a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
@@ -25,12 +25,12 @@ import {
   inputStateStyles,
   textContainerStyle,
   wrapperFontStyles,
-} from './DateInputWrapper.styles';
-import { DateInputWrapperProps, InputState } from './DateInputWrapper.types';
+} from './DateFormField.styles';
+import { DateFormFieldProps, InputState } from './DateFormField.types';
 
-export const DateInputWrapper = React.forwardRef<
+export const DateFormField = React.forwardRef<
   HTMLDivElement,
-  DateInputWrapperProps
+  DateFormFieldProps
 >(
   (
     {
@@ -45,7 +45,7 @@ export const DateInputWrapper = React.forwardRef<
       errorId,
       onInputClick,
       ...rest
-    }: DateInputWrapperProps,
+    }: DateFormFieldProps,
     fwdRef,
   ) => {
     const { theme } = useDarkMode();
@@ -97,4 +97,4 @@ export const DateInputWrapper = React.forwardRef<
   },
 );
 
-DateInputWrapper.displayName = 'DateInputWrapper';
+DateFormField.displayName = 'DateFormField';
diff --git a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.types.ts b/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
similarity index 88%
rename from packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.types.ts
rename to packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
index 4d8c2eb32a..928b88397e 100644
--- a/packages/date-picker/src/DateInput/DateInputWrapper/DateInputWrapper.types.ts
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
@@ -9,7 +9,7 @@ export const InputState = {
 
 export type InputState = (typeof InputState)[keyof typeof InputState];
 
-export interface DateInputWrapperProps extends HTMLElementProps<'div'> {
+export interface DateFormFieldProps extends HTMLElementProps<'div'> {
   label?: string;
   description?: string;
   state?: InputState;
diff --git a/packages/date-picker/src/DateInput/DateFormField/index.ts b/packages/date-picker/src/DateInput/DateFormField/index.ts
new file mode 100644
index 0000000000..b5d07bcf35
--- /dev/null
+++ b/packages/date-picker/src/DateInput/DateFormField/index.ts
@@ -0,0 +1,5 @@
+export { DateFormField } from './DateFormField';
+export {
+  type DateFormFieldProps,
+  type InputState,
+} from './DateFormField.types';
diff --git a/packages/date-picker/src/DateInput/DateInputWrapper/index.ts b/packages/date-picker/src/DateInput/DateInputWrapper/index.ts
deleted file mode 100644
index 532e9360e8..0000000000
--- a/packages/date-picker/src/DateInput/DateInputWrapper/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { DateInputWrapper } from './DateInputWrapper';
-export {
-  type DateInputWrapperProps,
-  type InputState,
-} from './DateInputWrapper.types';
diff --git a/packages/date-picker/src/DateInput/index.ts b/packages/date-picker/src/DateInput/index.ts
index 5cf82c95c1..0af14bdff2 100644
--- a/packages/date-picker/src/DateInput/index.ts
+++ b/packages/date-picker/src/DateInput/index.ts
@@ -1,9 +1,2 @@
-export {
-  DateInputBox,
-  type DateInputBoxProps,
-  type DateSegmentsState,
-} from './DateInputBox';
-export {
-  DateInputWrapper,
-  type DateInputWrapperProps,
-} from './DateInputWrapper';
+export { DateFormField, type DateFormFieldProps } from './DateFormField';
+export { DateInputBox, type DateInputBoxProps } from './DateInputBox';
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 0e2990e16c..2e224586c1 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { useForwardedRef, useIdAllocator } from '@leafygreen-ui/hooks';
 
-import { DateInputBox, DateInputWrapper } from '../../DateInput';
+import { DateInputBox, DateFormField } from '../../DateInput';
 import { useDatePickerContext } from '../../DatePickerContext';
 
 import { DatePickerInputProps } from './DatePickerInput.types';
@@ -17,7 +17,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     const ref = useForwardedRef(fwdRef, null);
 
     return (
-      <DateInputWrapper
+      <DateFormField
         label={label}
         description={timeZone}
         inputId={inputId}
@@ -34,7 +34,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           id={inputId}
           labelledBy={labelId}
         />
-      </DateInputWrapper>
+      </DateFormField>
     );
   },
 );

From f76a2a8af9ac213496487084e85d9109f69ce839 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 15 Sep 2023 14:56:33 -0400
Subject: [PATCH 073/351] more tests

---
 .../CalendarCell/CalendarCell.spec.tsx        |  21 +-
 .../Calendar/CalendarCell/CalendarCell.tsx    |   3 +-
 .../CalendarGrid/CalendarGrid.spec.tsx        |  27 +-
 .../Calendar/CalendarGrid/CalendarGrid.tsx    |  11 +-
 .../src/Calendar/MenuWrapper/MenuWrapper.tsx  |  15 +-
 .../DateFormField/DateFormField.spec.tsx      |   4 +-
 .../DateFormField/DateFormField.types.ts      |   4 +-
 .../DateInputSegment.spec.tsx                 |  19 ++
 .../DateInputSegment/DateInputSegment.tsx     |   1 +
 .../src/DatePicker/DatePicker.spec.tsx        | 273 +++++++++++++-----
 .../src/DatePicker/DatePicker.testutils.tsx   |  86 ++++++
 .../date-picker/src/DatePicker/DatePicker.tsx |  39 ++-
 .../DatePickerInput/DatePickerInput.tsx       |   6 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    |  48 ++-
 .../DatePickerMenu/DatePickerMenu.tsx         |  11 +-
 .../DatePickerMenuHeader/index.tsx            |   2 +-
 packages/date-picker/src/types.ts             |   9 +-
 17 files changed, 465 insertions(+), 114 deletions(-)
 create mode 100644 packages/date-picker/src/DatePicker/DatePicker.testutils.tsx

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
index 93ad08a980..5a776ed807 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
@@ -1,8 +1,25 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { CalendarCell } from '.';
 
-describe('packages/calendar-cell', () => {
-  test('condition', () => {});
+describe('packages/date-picker/calendar-cell', () => {
+  test('has `gridcell` role', () => {
+    const { container, queryByRole } = render(<CalendarCell />);
+    const gridcell = queryByRole('gridcell');
+    expect(gridcell).toBeInTheDocument();
+    expect(container.firstChild).toEqual(gridcell);
+  });
+
+  // TODO: need to pass in the Date object to the cell
+  test.todo('has appropriate `aria-label`');
+
+  test('receives click handlers', () => {
+    const clickHandler = jest.fn();
+    const { queryByRole } = render(<CalendarCell onClick={clickHandler} />);
+    const gridcell = queryByRole('gridcell');
+    userEvent.click(gridcell!);
+    expect(clickHandler).toHaveBeenCalled();
+  });
 });
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
index 384fb16502..00c00f3c03 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -45,6 +45,8 @@ export const CalendarCell = React.forwardRef<
     return (
       <td
         ref={ref}
+        role="gridcell"
+        aria-selected={isActive}
         className={cx(
           calendarCellStyles,
 
@@ -55,7 +57,6 @@ export const CalendarCell = React.forwardRef<
           },
           className,
         )}
-        aria-selected={isActive}
         {...rest}
       >
         <div className={cx(indicatorBaseStyles, indicatorClassName)}></div>
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.spec.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.spec.tsx
index 199f27cbbc..f5e446bffe 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.spec.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.spec.tsx
@@ -4,5 +4,30 @@ import { render } from '@testing-library/react';
 import { CalendarGrid } from '.';
 
 describe('packages/calendar-grid', () => {
-  test('condition', () => {});
+  test('has `grid` role', () => {
+    const { container, queryByRole } = render(
+      <CalendarGrid month={new Date()}>{() => <></>}</CalendarGrid>,
+    );
+    const grid = queryByRole('grid');
+    expect(grid).toBeInTheDocument();
+    expect(container.firstChild).toEqual(grid);
+  });
+
+  test('day name headers have `columnheader` role', () => {
+    const { queryAllByRole } = render(
+      <CalendarGrid month={new Date()}>{() => <></>}</CalendarGrid>,
+    );
+    const headerCells = queryAllByRole('columnheader');
+    expect(headerCells).toHaveLength(7);
+  });
+
+  test('day name headers have `abbr` attribute', () => {
+    const { queryAllByRole } = render(
+      <CalendarGrid month={new Date()}>{() => <></>}</CalendarGrid>,
+    );
+    const headerCells = queryAllByRole('columnheader');
+    headerCells.forEach(cell => {
+      expect(cell).toHaveAttribute('abbr');
+    });
+  });
 });
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index 5a6c5c782e..6a0b612982 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -23,14 +23,14 @@ export function CalendarGrid({ month, children, ...rest }: CalendarGridProps) {
   );
 
   return (
-    <table {...rest}>
+    <table {...rest} role="grid">
       <thead>
-        <tr>
+        <tr role="row">
           {range(daysPerWeek).map(i => {
             const dayIndex = (i + weekStartsOn) % daysPerWeek;
             const day = DaysOfWeek[dayIndex];
             return (
-              <th key={day.short} abbr={day.long}>
+              <th role="columnheader" key={day.short} abbr={day.long}>
                 <Disclaimer className={calendarHeaderCellStyles}>
                   {day.short}
                 </Disclaimer>
@@ -41,13 +41,14 @@ export function CalendarGrid({ month, children, ...rest }: CalendarGridProps) {
       </thead>
       <tbody>
         {weeks.map((week, w) => (
-          <tr key={`week-${w}`}>
+          <tr key={`week-${w}`} role="row">
             {week.map((day, d) => {
               const index: number = w * daysPerWeek + d;
               return day ? (
                 children(day, index)
               ) : (
-                <td key={`null-${index}`}></td>
+                // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+                <td key={`null-${index}`} role="none"></td>
               );
             })}
           </tr>
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
index 81d20b9bf7..0080d1e940 100644
--- a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
+++ b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
@@ -11,15 +11,18 @@ import { menuStyles } from './MenuWrapper.styles';
  * A styled popover
  */
 export const MenuWrapper = forwardRef(
-  ({
-    className,
-    children,
-    ...props
-  }: PopoverProps & HTMLElementProps<'div'>) => {
+  (
+    { className, children, ...props }: PopoverProps & HTMLElementProps<'div'>,
+    fwdRef,
+  ) => {
     const { theme } = useDarkMode();
 
     return (
-      <Popover className={cx(menuStyles[theme], className)} {...props}>
+      <Popover
+        ref={fwdRef}
+        className={cx(menuStyles[theme], className)}
+        {...props}
+      >
         {children}
       </Popover>
     );
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.spec.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.spec.tsx
index 0ca061db3e..c25d849bed 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.spec.tsx
@@ -3,6 +3,6 @@ import { render } from '@testing-library/react';
 
 import { DateFormField } from '.';
 
-describe('packages/input-wrapper', () => {
-  test('condition', () => {});
+describe('packages/date-picker/date-form-field', () => {
+  test('renders', () => {});
 });
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts b/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
index 928b88397e..3991732cbc 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
@@ -10,8 +10,8 @@ export const InputState = {
 export type InputState = (typeof InputState)[keyof typeof InputState];
 
 export interface DateFormFieldProps extends HTMLElementProps<'div'> {
-  label?: string;
-  description?: string;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
   state?: InputState;
   errorMessage?: string;
   inputId: string;
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
index 7868155ce3..6f53b95873 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
@@ -21,6 +21,25 @@ describe('packages/date-picker/date-input-segment', () => {
   });
 
   describe('rendering', () => {
+    describe('aria attributes', () => {
+      test('has `spinbutton` role', () => {
+        const { input } = renderSegment({ segment: 'day' });
+        expect(input).toHaveAttribute('role', 'spinbutton');
+      });
+      test('day segment has aria-label', () => {
+        const { input } = renderSegment({ segment: 'day' });
+        expect(input).toHaveAttribute('aria-label', 'day');
+      });
+      test('month segment has aria-label', () => {
+        const { input } = renderSegment({ segment: 'month' });
+        expect(input).toHaveAttribute('aria-label', 'month');
+      });
+      test('year segment has aria-label', () => {
+        const { input } = renderSegment({ segment: 'year' });
+        expect(input).toHaveAttribute('aria-label', 'year');
+      });
+    });
+
     describe('day segment', () => {
       test('Rendering with undefined sets the value to empty string', () => {
         const { input } = renderSegment({ segment: 'day' });
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index 1f956fcfcf..e80fb01c30 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -60,6 +60,7 @@ export const DateInputSegment = React.forwardRef<
         id={segment}
         ref={inputRef}
         type="number"
+        role="spinbutton"
         value={formatValue(value)}
         min={min}
         max={max}
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 532344ac5d..02e9e12f84 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1,68 +1,38 @@
+/* eslint-disable jest/no-disabled-tests */
 import React from 'react';
 import {
-  getByRole as globalGetByRole,
   render,
   waitFor,
+  waitForElementToBeRemoved,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { DatePickerProps } from './DatePicker.types';
-import { DatePicker } from '.';
+import { Month } from '../constants';
 
-const renderDatePicker = (props?: DatePickerProps) => {
-  const result = render(
-    <DatePicker label="" data-testid="lg-date-picker" {...props} />,
-  );
-
-  const formFieldWrapper = result.getByTestId('lg-date-picker');
-  const inputContainer = result.getByRole('combobox');
-  const dayInput = result.container.querySelector('input[aria-label="day"]');
-  const monthInput = result.container.querySelector(
-    'input[aria-label="month"]',
-  );
-  const yearInput = result.container.querySelector('input[aria-label="year"]');
-
-  /**
-   * Returns relevant menu elements.
-   * Call this after the menu has been opened
-   */
-  function getMenuElements() {
-    const menuContainerEl = result.queryByRole('listbox');
-
-    return {
-      menuContainerEl,
-    };
-  }
-
-  return {
-    ...result,
-    formFieldWrapper,
-    inputContainer,
-    dayInput,
-    monthInput,
-    yearInput,
-    getMenuElements,
-  };
-};
+import { renderDatePicker } from './DatePicker.testutils';
+import { DatePicker } from '.';
 
 describe('packages/date-picker', () => {
   describe('Rendering', () => {
     /// Note: Most rendering tests handled by Chromatic
-    test('spreads rest to formFieldWrapper', () => {
+
+    test('spreads rest to formField', () => {
       const { getByTestId } = render(
         <DatePicker label="Label" data-testid="lg-date-picker" />,
       );
-      const wrapper = getByTestId('lg-date-picker');
-      expect(wrapper).toBeInTheDocument();
+      const formField = getByTestId('lg-date-picker');
+      expect(formField).toBeInTheDocument();
     });
 
-    test('wrapper contains label', () => {
-      const { getByTestId } = render(
+    test('formField contains label & input elements', () => {
+      const { getByTestId, getByRole } = render(
         <DatePicker label="Label" data-testid="lg-date-picker" />,
       );
-      const wrapper = getByTestId('lg-date-picker');
-      expect(wrapper.querySelector('label')).toBeInTheDocument();
-      expect(wrapper.querySelector('label')).toHaveTextContent('Label');
+      const formField = getByTestId('lg-date-picker');
+      const inputContainer = getByRole('combobox');
+      expect(formField.querySelector('label')).toBeInTheDocument();
+      expect(formField.querySelector('label')).toHaveTextContent('Label');
+      expect(inputContainer).toBeInTheDocument();
     });
 
     test('renders 3 inputs', () => {
@@ -72,25 +42,57 @@ describe('packages/date-picker', () => {
       expect(yearInput).toBeInTheDocument();
     });
 
-    test('menu is initially closed', () => {
-      const { getMenuElements } = renderDatePicker();
-      const { menuContainerEl } = getMenuElements();
-      expect(menuContainerEl).not.toBeInTheDocument();
+    describe('Menu', () => {
+      test('menu is initially closed', () => {
+        const { getMenuElements } = renderDatePicker();
+        const { menuContainerEl } = getMenuElements();
+        expect(menuContainerEl).not.toBeInTheDocument();
+      });
+
+      test('if no value is set, menu opens to current month', () => {
+        jest
+          .useFakeTimers()
+          .setSystemTime(new Date(Date.UTC(2023, Month.December, 26, 0, 0, 0)));
+        const { openMenu } = renderDatePicker();
+        const { calendarGrid, monthSelect, yearSelect } = openMenu();
+        expect(calendarGrid).toHaveAttribute('aria-label', 'December 2023');
+        expect(monthSelect).toHaveValue(Month.December.toString());
+        expect(yearSelect).toHaveValue('2023');
+      });
+
+      test('if a value is set, menu opens to the month of that value', () => {
+        jest
+          .useFakeTimers()
+          .setSystemTime(new Date(Date.UTC(2023, Month.December, 26, 0, 0, 0)));
+        const { openMenu } = renderDatePicker({
+          value: new Date(Date.UTC(2023, Month.March, 10)),
+        });
+        const { calendarGrid, monthSelect, yearSelect } = openMenu();
+        expect(calendarGrid).toHaveAttribute('aria-label', 'March 2023');
+        expect(monthSelect).toHaveValue(Month.March.toString());
+        expect(yearSelect).toHaveValue('2023');
+      });
+
+      test('renders the appropriate number of cells', () => {
+        const { openMenu } = renderDatePicker({
+          value: new Date(Date.UTC(2024, Month.February, 14)),
+        });
+        const { calendarCells } = openMenu();
+        expect(calendarCells).toHaveLength(29);
+      });
     });
   });
 
   describe('Mouse interaction', () => {
     describe('Clicking the input', () => {
-      test('opens the menu', async () => {
+      test('opens the menu', () => {
         const { inputContainer, getMenuElements } = renderDatePicker();
         userEvent.click(inputContainer);
-        await waitFor(() => {
-          const { menuContainerEl } = getMenuElements();
-          expect(menuContainerEl).toBeInTheDocument();
-        });
+        const { menuContainerEl } = getMenuElements();
+        expect(menuContainerEl).toBeInTheDocument();
       });
 
-      test('focuses the first empty segment', async () => {
+      test.skip('focuses the first empty segment', async () => {
         const { inputContainer, yearInput } = renderDatePicker();
         userEvent.click(inputContainer);
         await waitFor(() => {
@@ -99,33 +101,162 @@ describe('packages/date-picker', () => {
       });
     });
 
-    describe('Clicking a Calendar cell', () => {
-      test.todo('fires a change handler');
-      test.todo('does nothing if the cell is out-of-range');
+    describe.only('Clicking a Calendar cell', () => {
+      test('fires a change handler', () => {
+        const onChange = jest.fn();
+        const { openMenu } = renderDatePicker({
+          onChange,
+        });
+        const { calendarCells } = openMenu();
+        const cell1 = calendarCells?.[0];
+        userEvent.click(cell1);
+        expect(onChange).toHaveBeenCalled();
+      });
+
+      test('does nothing if the cell is out-of-range', () => {
+        const onChange = jest.fn();
+        const { openMenu } = renderDatePicker({
+          onChange,
+          value: new Date(Date.UTC(2023, Month.September, 15)),
+          min: new Date(Date.UTC(2023, Month.September, 10)),
+        });
+        const { calendarCells } = openMenu();
+        const cell1 = calendarCells?.[0];
+        userEvent.click(cell1);
+        expect(onChange).not.toHaveBeenCalled();
+      });
     });
 
     describe('Clicking a Chevron', () => {
-      test.todo('Left updates the displayed month to the previous');
-      test.todo('Right updates the displayed month to the next');
-      test.todo('Left is disabled if prev. month is entirely out of range');
-      test.todo('Right is disabled if next month is entirely out of range');
+      beforeEach(() => {
+        jest
+          .useFakeTimers()
+          .setSystemTime(new Date(Date.UTC(2023, Month.December, 26)));
+      });
+
+      test('Left does not close the menu', async () => {
+        const { openMenu } = renderDatePicker();
+        const { leftChevron, menuContainerEl } = openMenu();
+        userEvent.click(leftChevron!);
+        await waitFor(() => {
+          expect(menuContainerEl).toBeInTheDocument();
+        });
+      });
+
+      test('Right does not close the menu', async () => {
+        const { openMenu } = renderDatePicker();
+        const { rightChevron, menuContainerEl } = openMenu();
+        userEvent.click(rightChevron!);
+        await waitFor(() => {
+          expect(menuContainerEl).toBeInTheDocument();
+        });
+      });
+
+      test('Left updates the displayed month to the previous', async () => {
+        const { openMenu } = renderDatePicker();
+        const { leftChevron, monthSelect, yearSelect, calendarGrid } =
+          openMenu();
+        userEvent.click(leftChevron!);
+        await waitFor(() => {
+          expect(calendarGrid).toHaveAttribute('aria-label', 'November 2023');
+          expect(monthSelect).toHaveValue(Month.November);
+          expect(yearSelect).toHaveValue((2023).toString());
+        });
+      });
+
+      test('Right updates the displayed month to the next', async () => {
+        const { openMenu } = renderDatePicker();
+        const { rightChevron, monthSelect, yearSelect, calendarGrid } =
+          openMenu();
+        userEvent.click(rightChevron!);
+        await waitFor(() => {
+          expect(calendarGrid).toHaveAttribute('aria-label', 'January 2024');
+          expect(monthSelect).toHaveValue(Month.January);
+          expect(yearSelect).toHaveValue((2024).toString());
+        });
+      });
+
+      test('Left is disabled if prev. month is entirely out of range', () => {
+        const { openMenu } = renderDatePicker({
+          min: new Date(Date.UTC(2023, Month.December, 1)),
+        });
+        const { leftChevron } = openMenu();
+        expect(leftChevron).toHaveAttribute('aria-disabled', 'true');
+      });
+
+      test('Right is disabled if next month is entirely out of range', () => {
+        const { openMenu } = renderDatePicker({
+          max: new Date(Date.UTC(2023, Month.December, 31)),
+        });
+        const { rightChevron } = openMenu();
+        expect(rightChevron).toHaveAttribute('aria-disabled', 'true');
+      });
+
+      test.todo('changing the month is announced in an aria-live region');
     });
 
     describe('Clicking the month select menu', () => {
-      test.todo('does not close calendar menu');
-      test.todo('opens over the calendar menu');
-      test.todo('selecting the month updates the calendar');
+      test('menu opens over the calendar menu', async () => {
+        const { openMenu, queryAllByRole } = renderDatePicker();
+        const { monthSelect, menuContainerEl } = openMenu();
+        userEvent.click(monthSelect!);
+        await waitFor(() => {
+          expect(menuContainerEl).toBeInTheDocument();
+          const listBoxes = queryAllByRole('listbox');
+          expect(listBoxes).toHaveLength(2);
+        });
+      });
+
+      test('selecting the month updates the calendar', () => {
+        const { openMenu, queryAllByRole } = renderDatePicker({
+          value: new Date(Date.UTC(2023, Month.December, 26)),
+        });
+        const { monthSelect, calendarGrid } = openMenu();
+        userEvent.click(monthSelect!);
+        const options = queryAllByRole('option');
+        userEvent.click(options[0]);
+        expect(calendarGrid).toHaveAttribute('aria-label', 'January 2023');
+      });
     });
 
     describe('Clicking the year select menu', () => {
-      test.todo('does not close calendar menu');
-      test.todo('opens over the calendar menu');
-      test.todo('selecting the year updates the calendar');
+      test('menu opens over the calendar menu', async () => {
+        const { openMenu, queryAllByRole } = renderDatePicker();
+        const { yearSelect, menuContainerEl } = openMenu();
+        userEvent.click(yearSelect!);
+        await waitFor(() => {
+          expect(menuContainerEl).toBeInTheDocument();
+          const listBoxes = queryAllByRole('listbox');
+          expect(listBoxes).toHaveLength(2);
+        });
+      });
+      test('selecting the year updates the calendar', () => {
+        const { openMenu, queryAllByRole } = renderDatePicker({
+          value: new Date(Date.UTC(2023, Month.December, 26)),
+        });
+        const { monthSelect, calendarGrid } = openMenu();
+        userEvent.click(monthSelect!);
+        const options = queryAllByRole('option');
+        userEvent.click(options[0]);
+        expect(calendarGrid).toHaveAttribute('aria-label', 'January 1970');
+      });
     });
 
     describe('Clicking backdrop', () => {
-      test.todo('does not fire a change handler');
-      test.todo('closes the menu');
+      test('closes the menu', async () => {
+        const { openMenu, container } = renderDatePicker();
+        const { menuContainerEl } = openMenu();
+        userEvent.click(container.parentElement!);
+        await waitForElementToBeRemoved(menuContainerEl);
+      });
+
+      test('does not fire a change handler', () => {
+        const onChange = jest.fn();
+        const { openMenu, container } = renderDatePicker({ onChange });
+        openMenu();
+        userEvent.click(container.parentElement!);
+        expect(onChange).not.toHaveBeenCalled();
+      });
     });
   });
 
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
new file mode 100644
index 0000000000..eb812de992
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { render, RenderResult } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { DatePickerProps } from './DatePicker.types';
+import { DatePicker } from '.';
+
+interface RenderDatePickerResult extends RenderResult {
+  formField: HTMLElement;
+  inputContainer: HTMLElement;
+  dayInput: HTMLElement;
+  monthInput: HTMLElement;
+  yearInput: HTMLElement;
+  getMenuElements: () => RenderMenuResult;
+  openMenu: () => RenderMenuResult;
+}
+
+interface RenderMenuResult {
+  menuContainerEl: HTMLElement | null;
+  leftChevron: HTMLElement | null;
+  rightChevron: HTMLElement | null;
+  monthSelect: HTMLElement | null;
+  yearSelect: HTMLElement | null;
+  calendarGrid: HTMLElement | null;
+  calendarCells: Array<HTMLElement>;
+}
+
+/**
+ * Renders a date picker for jest environments
+ */
+export const renderDatePicker = (
+  props?: Partial<DatePickerProps>,
+): RenderDatePickerResult => {
+  const defaultProps = { label: '' };
+  const result = render(
+    <DatePicker data-testid="lg-date-picker" {...defaultProps} {...props} />,
+  );
+
+  const formField = result.getByTestId('lg-date-picker');
+  const inputContainer = result.getByRole('combobox');
+  const dayInput = result.getByLabelText('day');
+  const monthInput = result.getByLabelText('month');
+  const yearInput = result.getByLabelText('year');
+
+  /**
+   * Returns relevant menu elements.
+   * Call this after the menu has been opened
+   */
+  function getMenuElements(): RenderMenuResult {
+    const menuContainerEl = result.queryByRole('listbox');
+    const calendarGrid = result.queryByRole('grid');
+    const calendarCells = result.queryAllByRole('gridcell');
+
+    // label text is tested in DatePickerMenu.spec
+    const leftChevron = result.queryByLabelText('Previous month');
+    const rightChevron = result.queryByLabelText('Next month');
+    const monthSelect = result.queryByLabelText('Select month');
+    const yearSelect = result.queryByLabelText('Select year');
+
+    return {
+      menuContainerEl,
+      calendarGrid,
+      calendarCells,
+      leftChevron,
+      rightChevron,
+      monthSelect,
+      yearSelect,
+    };
+  }
+
+  function openMenu(): RenderMenuResult {
+    userEvent.click(inputContainer);
+    return getMenuElements();
+  }
+
+  return {
+    ...result,
+    formField,
+    inputContainer,
+    dayInput,
+    monthInput,
+    yearInput,
+    getMenuElements,
+    openMenu,
+  };
+};
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index ac0e536305..6c77b8cc94 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -7,7 +7,11 @@ import React, {
 } from 'react';
 import { isSameMonth, setMonth } from 'date-fns';
 
-import { useBackdropClick, useIdAllocator } from '@leafygreen-ui/hooks';
+import {
+  useBackdropClick,
+  useForwardedRef,
+  useIdAllocator,
+} from '@leafygreen-ui/hooks';
 
 import {
   DatePickerContextProps,
@@ -40,24 +44,28 @@ const contextPropNames: Array<
 /**
  * LeafyGreen Date Picker component
  */
-export const DatePicker = forwardRef(
-  ({
-    value: valueProp,
-    initialValue,
-    onChange,
-    handleValidation,
-    ...props
-  }: DatePickerProps) => {
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
+  (
+    {
+      value: valueProp,
+      initialValue,
+      onChange,
+      handleValidation,
+      ...props
+    }: DatePickerProps,
+    fwdRef,
+  ) => {
     const [contextProps, restProps] = pickAndOmit(props, contextPropNames);
     const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
-    const inputRef = useRef<HTMLDivElement>(null);
+    const inputRef = useForwardedRef(fwdRef, null);
     const menuRef = useRef<HTMLDivElement>(null);
-    const [displayMonth, setDisplayMonth] = useState<Date>(new Date());
+    const utcValue = useMemo(() => toDate(valueProp), [valueProp]);
+    const [displayMonth, setDisplayMonth] = useState<Date>(
+      utcValue ?? new Date(),
+    );
     const [isOpen, setOpen] = useState(false);
     const closeMenu = () => setOpen(false);
 
-    const utcValue = useMemo(() => toDate(valueProp), [valueProp]);
-
     const updateValue = (newVal: Date | null) => {
       // if the new value is not the current month, update the month
       if (newVal && !isSameMonth(newVal, displayMonth)) {
@@ -86,10 +94,9 @@ export const DatePicker = forwardRef(
         setDisplayMonth(newMonth);
       };
 
-    const handleInputClick: MouseEventHandler = e => {
-      console.log('handleInputClick');
-      // TODO: Set focus to appropriate segment
+    const handleInputClick: MouseEventHandler = () => {
       setOpen(true);
+      // TODO: Set focus to appropriate segment
     };
 
     return (
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 2e224586c1..44855cbd16 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { useForwardedRef, useIdAllocator } from '@leafygreen-ui/hooks';
 
-import { DateInputBox, DateFormField } from '../../DateInput';
+import { DateFormField, DateInputBox } from '../../DateInput';
 import { useDatePickerContext } from '../../DatePickerContext';
 
 import { DatePickerInputProps } from './DatePickerInput.types';
@@ -16,6 +16,8 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     const inputId = useIdAllocator({ prefix: 'lg-date-input' });
     const ref = useForwardedRef(fwdRef, null);
 
+    const handleInputClick = onClick;
+
     return (
       <DateFormField
         label={label}
@@ -25,7 +27,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         descriptionId={descriptionId}
         errorId={errorId}
         ref={ref}
-        onInputClick={onClick}
+        onInputClick={handleInputClick}
         {...rest}
       >
         <DateInputBox
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index e11f199e5d..03d45c1178 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -1,8 +1,52 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
+import { Month } from '../../constants';
+
 import { DatePickerMenu } from '.';
 
-describe('packages/date-picker-menu', () => {
-  test('condition', () => {});
+const renderDatePickerMenu = () => {
+  return render(
+    <DatePickerMenu
+      usePortal
+      isOpen
+      value={null}
+      month={new Date(Date.UTC(2023, Month.September, 1))}
+      onMonthChange={() => {}}
+      onCellClick={() => {}}
+    />,
+  );
+};
+
+describe('packages/date-picker/date-picker-menu', () => {
+  test('renders calendar grid', () => {
+    const result = renderDatePickerMenu();
+    expect(result.getByRole('grid')).toBeInTheDocument();
+  });
+  test('grid is labelled as the current month', () => {
+    const result = renderDatePickerMenu();
+    const grid = result.getByRole('grid');
+    expect(grid).toHaveAttribute('aria-label', 'September 2023');
+  });
+  test('chevrons have aria labels', () => {
+    const result = renderDatePickerMenu();
+    const leftChevron = result.getByLabelText('Previous month');
+    const rightChevron = result.getByLabelText('Next month');
+    expect(leftChevron).toBeInTheDocument();
+    expect(rightChevron).toBeInTheDocument();
+  });
+  test('select menu triggers have aria labels', () => {
+    const result = renderDatePickerMenu();
+    const monthSelect = result.getByLabelText('Select month');
+    const yearSelect = result.getByLabelText('Select year');
+    expect(monthSelect).toBeInTheDocument();
+    expect(yearSelect).toBeInTheDocument();
+  });
+  test('select menus have appropriate values', () => {
+    const result = renderDatePickerMenu();
+    const monthSelect = result.getByLabelText('Select month');
+    const yearSelect = result.getByLabelText('Select year');
+    expect(monthSelect).toHaveValue(Month.September.toString());
+    expect(yearSelect).toHaveValue('2023');
+  });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 391a697fad..66e4b8fabc 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -6,6 +6,7 @@ import { spacing } from '@leafygreen-ui/tokens';
 import { CalendarCell, CalendarCellState } from '../../Calendar/CalendarCell';
 import { CalendarGrid } from '../../Calendar/CalendarGrid';
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
+import { Months } from '../../constants';
 import { useDatePickerContext } from '../../DatePickerContext';
 import { isCurrentUTCDay } from '../../utils/isCurrentUTCDay';
 import { isSameUTCDay } from '../../utils/isSameUTCDay';
@@ -46,7 +47,12 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     };
 
     const ref = useForwardedRef(fwdRef, null);
+    const monthLabel =
+      Months[month.getUTCMonth()].long + ' ' + month.getUTCFullYear();
 
+    const makeCellHoverHandler = (day: Date) => () => setHighlight(day);
+
+    const makeCellClickHandler = (day: Date) => () => onCellClick(day);
     return (
       <MenuWrapper
         active={isOpen}
@@ -62,6 +68,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
             month={month}
             className={menuCalendarGridStyles}
             onMouseLeave={() => setHighlight(null)}
+            aria-label={monthLabel}
           >
             {(day, i) => (
               <CalendarCell
@@ -69,8 +76,8 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
                 isHighlighted={isSameUTCDay(day, highlight)}
                 isCurrent={isCurrentUTCDay(day)}
                 state={getCellState(day)}
-                onMouseEnter={() => setHighlight(day)}
-                onClick={() => onCellClick(day)}
+                onMouseEnter={makeCellHoverHandler(day)}
+                onClick={makeCellClickHandler(day)}
                 data-iso={day.toISOString()}
               >
                 {day.getUTCDate()}
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index 6780d872cb..9626f6c651 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -65,7 +65,7 @@ export const DatePickerMenuHeader = ({
           size="xsmall"
           aria-label="Select month"
           allowDeselect={false}
-          value={month.getMonth().toString()}
+          value={month.getUTCMonth().toString()}
           dropdownWidthBasis={DropdownWidthBasis.Option}
           onChange={m => {
             const newMonth = setMonth(month, Number(m));
diff --git a/packages/date-picker/src/types.ts b/packages/date-picker/src/types.ts
index 8ec42d8ef1..90bf6c20d5 100644
--- a/packages/date-picker/src/types.ts
+++ b/packages/date-picker/src/types.ts
@@ -5,7 +5,14 @@ export interface BaseDatePickerProps extends DarkModeProps {
   /**
    * A label for the input
    */
-  label: string;
+  label: React.ReactNode;
+
+  /**
+   * A description for the date picker.
+   *
+   * It's recommended to set a meaningful time zone representation as the description (e.g. "Coordinated Universal Time")
+   */
+  description?: React.ReactNode;
 
   /**
    * Sets the _presentation format_ for the displayed date.

From 73cbde4d88aacc8f3ce2c828f25494c045bfbcab Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 15 Sep 2023 15:10:32 -0400
Subject: [PATCH 074/351] adds fwd ref to popover

---
 packages/popover/src/Popover.spec.tsx |  14 +-
 packages/popover/src/Popover.tsx      | 492 +++++++++++++-------------
 2 files changed, 264 insertions(+), 242 deletions(-)

diff --git a/packages/popover/src/Popover.spec.tsx b/packages/popover/src/Popover.spec.tsx
index ab1cd74469..8190c69f05 100644
--- a/packages/popover/src/Popover.spec.tsx
+++ b/packages/popover/src/Popover.spec.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { act, fireEvent, render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
@@ -33,6 +33,18 @@ describe('packages/popover', () => {
       expect(newResults).toHaveNoViolations();
     });
   });
+
+  test('accepts a ref', () => {
+    const ref = createRef();
+    render(
+      <Popover ref={ref} data-testid="popover-test-id">
+        Popover Content
+      </Popover>,
+    );
+
+    expect(ref.current).toBeDefined();
+  });
+
   test('displays popover when the "active" prop is set', () => {
     const { getByTestId } = renderPopover({ active: true });
     expect(getByTestId('popover-test-id')).toBeInTheDocument();
diff --git a/packages/popover/src/Popover.tsx b/packages/popover/src/Popover.tsx
index b0383e72d3..f88ab922b5 100644
--- a/packages/popover/src/Popover.tsx
+++ b/packages/popover/src/Popover.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo, useState } from 'react';
+import React, { forwardRef, Fragment, useMemo, useState } from 'react';
 import { Transition } from 'react-transition-group';
 import PropTypes from 'prop-types';
 
@@ -66,258 +66,265 @@ const mutationOptions = {
  * @param props.portalContainer HTML element that the popover is portaled within.
  * @param props.scrollContainer HTML ancestor element that's scrollable to position the popover accurately within scrolling containers.
  */
-function Popover({
-  active = false,
-  spacing = 10,
-  align = Align.Bottom,
-  justify = Justify.Start,
-  adjustOnMutation = false,
-  children,
-  className,
-  popoverZIndex,
-  refEl,
-  usePortal = true,
-  portalClassName,
-  portalContainer: portalContainerProp,
-  scrollContainer: scrollContainerProp,
-  ...rest
-}: PopoverProps) {
-  const [placeholderNode, setPlaceholderNode] = useState<HTMLElement | null>(
-    null,
-  );
-  const [contentNode, setContentNode] = useState<HTMLElement | null>(null);
-  const [forceUpdateCounter, setForceUpdateCounter] = useState(0);
-
-  const { setIsPopoverOpen } = usePopoverContext();
-
-  let { portalContainer, scrollContainer } = usePopoverPortalContainer();
-
-  portalContainer = portalContainerProp || portalContainer;
-  scrollContainer = scrollContainerProp || scrollContainer;
-
-  // When usePortal is true and a scrollContainer is passed in
-  // show a warning if the portalContainer is not inside of the scrollContainer.
-  // Note: If no portalContainer is passed the portalContainer will be undefined and this warning will show up.
-  // By default if no portalContainer is passed the <Portal> component will create a div and append it to the body.
-  if (usePortal && scrollContainer) {
-    if (!scrollContainer.contains(portalContainer as HTMLElement)) {
-      consoleOnce.warn(
-        'To ensure correct positioning make sure that the portalContainer element is inside of the scrollContainer',
-      );
+const Popover = forwardRef<any, PopoverProps>(
+  (
+    {
+      active = false,
+      spacing = 10,
+      align = Align.Bottom,
+      justify = Justify.Start,
+      adjustOnMutation = false,
+      children,
+      className,
+      popoverZIndex,
+      refEl,
+      usePortal = true,
+      portalClassName,
+      portalContainer: portalContainerProp,
+      scrollContainer: scrollContainerProp,
+      ...rest
+    }: PopoverProps,
+    fwdRef,
+  ) => {
+    const [placeholderNode, setPlaceholderNode] = useState<HTMLElement | null>(
+      null,
+    );
+    const [contentNode, setContentNode] = useState<HTMLElement | null>(null);
+    const [forceUpdateCounter, setForceUpdateCounter] = useState(0);
+
+    const { setIsPopoverOpen } = usePopoverContext();
+
+    let { portalContainer, scrollContainer } = usePopoverPortalContainer();
+
+    portalContainer = portalContainerProp || portalContainer;
+    scrollContainer = scrollContainerProp || scrollContainer;
+
+    // When usePortal is true and a scrollContainer is passed in
+    // show a warning if the portalContainer is not inside of the scrollContainer.
+    // Note: If no portalContainer is passed the portalContainer will be undefined and this warning will show up.
+    // By default if no portalContainer is passed the <Portal> component will create a div and append it to the body.
+    if (usePortal && scrollContainer) {
+      if (!scrollContainer.contains(portalContainer as HTMLElement)) {
+        consoleOnce.warn(
+          'To ensure correct positioning make sure that the portalContainer element is inside of the scrollContainer',
+        );
+      }
     }
-  }
 
-  // To remove StrictMode warnings produced by react-transition-group we need
-  // to pass in a useRef object to the <Transition> component.
-  // To do so we're shadowing the contentNode onto this nodeRef as
-  // <Transition> only accepts useRef objects.
-  const contentNodeRef = React.useRef(contentNode);
-  contentNodeRef.current = contentNode;
+    // To remove StrictMode warnings produced by react-transition-group we need
+    // to pass in a useRef object to the <Transition> component.
+    // To do so we're shadowing the contentNode onto this nodeRef as
+    // <Transition> only accepts useRef objects.
+    const contentNodeRef = React.useRef(contentNode);
+    contentNodeRef.current = contentNode;
 
-  let referenceElement: HTMLElement | null = null;
+    let referenceElement: HTMLElement | null = null;
 
-  if (refEl && refEl.current) {
-    referenceElement = refEl.current;
-  } else if (placeholderNode) {
-    const parent = placeholderNode.parentNode;
+    if (refEl && refEl.current) {
+      referenceElement = refEl.current;
+    } else if (placeholderNode) {
+      const parent = placeholderNode.parentNode;
 
-    if (parent && parent instanceof HTMLElement) {
-      referenceElement = parent;
+      if (parent && parent instanceof HTMLElement) {
+        referenceElement = parent;
+      }
     }
-  }
-
-  const viewportSize = useViewportSize();
-
-  // We calculate the position of the popover when it becomes active,
-  // so it's safe for us to only enable the mutation observers once the popover is active.
-  const observeMutations = adjustOnMutation && active;
-
-  const lastTimeRefElMutated = useMutationObserver(
-    referenceElement,
-    mutationOptions,
-    Date.now,
-    observeMutations,
-  );
-
-  const lastTimeContentElMutated = useMutationObserver(
-    contentNode?.parentNode as HTMLElement,
-    mutationOptions,
-    Date.now,
-    observeMutations,
-  );
-
-  // We don't memoize these values as they're reliant on scroll positioning
-  const referenceElViewportPos = useObjectDependency(
-    getElementViewportPosition(referenceElement, scrollContainer, true),
-  );
-
-  // We use contentNode.parentNode since the parentNode has a transition applied to it and we want to be able to get the width of this element before it is transformed. Also as noted below, the parentNode cannot have a ref on it.
-  // Previously the contentNode was passed in but since it is a child of transformed element it was not possible to get an untransformed width.
-  const contentElViewportPos = useObjectDependency(
-    getElementViewportPosition(
+
+    const viewportSize = useViewportSize();
+
+    // We calculate the position of the popover when it becomes active,
+    // so it's safe for us to only enable the mutation observers once the popover is active.
+    const observeMutations = adjustOnMutation && active;
+
+    const lastTimeRefElMutated = useMutationObserver(
+      referenceElement,
+      mutationOptions,
+      Date.now,
+      observeMutations,
+    );
+
+    const lastTimeContentElMutated = useMutationObserver(
       contentNode?.parentNode as HTMLElement,
-      scrollContainer,
-    ),
-  );
-
-  const referenceElDocumentPos = useObjectDependency(
-    useMemo(
-      () => getElementDocumentPosition(referenceElement, scrollContainer, true),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [
-        referenceElement,
+      mutationOptions,
+      Date.now,
+      observeMutations,
+    );
+
+    // We don't memoize these values as they're reliant on scroll positioning
+    const referenceElViewportPos = useObjectDependency(
+      getElementViewportPosition(referenceElement, scrollContainer, true),
+    );
+
+    // We use contentNode.parentNode since the parentNode has a transition applied to it and we want to be able to get the width of this element before it is transformed. Also as noted below, the parentNode cannot have a ref on it.
+    // Previously the contentNode was passed in but since it is a child of transformed element it was not possible to get an untransformed width.
+    const contentElViewportPos = useObjectDependency(
+      getElementViewportPosition(
+        contentNode?.parentNode as HTMLElement,
         scrollContainer,
-        viewportSize,
-        lastTimeRefElMutated,
-        active,
-        align,
-        justify,
-        forceUpdateCounter,
-      ],
-    ),
-  );
-
-  const contentElDocumentPos = useObjectDependency(
-    useMemo(
-      () => getElementDocumentPosition(contentNode),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [
-        contentNode?.parentNode,
-        viewportSize,
-        lastTimeContentElMutated,
-        active,
-        align,
-        justify,
-        forceUpdateCounter,
-      ],
-    ),
-  );
-
-  const prevJustify = usePrevious<Justify>(justify);
-  const prevAlign = usePrevious<Align>(align);
-
-  const layoutMightHaveChanged =
-    (prevJustify !== justify &&
-      (justify === Justify.Fit || prevJustify === Justify.Fit)) ||
-    (prevAlign !== align && justify === Justify.Fit);
-
-  useIsomorphicLayoutEffect(() => {
-    // justify={Justify.Fit} can cause the content's height/width to change
-    // If we're switching to/from Fit, force an extra pass to make sure the popover is positioned correctly.
-    // Also if we're switching between alignments and have Justify.Fit, it may switch between setting the width and
-    // setting the height, so force an update in that case as well.
-    if (layoutMightHaveChanged) {
-      setForceUpdateCounter(n => n + 1);
+      ),
+    );
+
+    const referenceElDocumentPos = useObjectDependency(
+      useMemo(
+        () =>
+          getElementDocumentPosition(referenceElement, scrollContainer, true),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
+          referenceElement,
+          scrollContainer,
+          viewportSize,
+          lastTimeRefElMutated,
+          active,
+          align,
+          justify,
+          forceUpdateCounter,
+        ],
+      ),
+    );
+
+    const contentElDocumentPos = useObjectDependency(
+      useMemo(
+        () => getElementDocumentPosition(contentNode),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
+          contentNode?.parentNode,
+          viewportSize,
+          lastTimeContentElMutated,
+          active,
+          align,
+          justify,
+          forceUpdateCounter,
+        ],
+      ),
+    );
+
+    const prevJustify = usePrevious<Justify>(justify);
+    const prevAlign = usePrevious<Align>(align);
+
+    const layoutMightHaveChanged =
+      (prevJustify !== justify &&
+        (justify === Justify.Fit || prevJustify === Justify.Fit)) ||
+      (prevAlign !== align && justify === Justify.Fit);
+
+    useIsomorphicLayoutEffect(() => {
+      // justify={Justify.Fit} can cause the content's height/width to change
+      // If we're switching to/from Fit, force an extra pass to make sure the popover is positioned correctly.
+      // Also if we're switching between alignments and have Justify.Fit, it may switch between setting the width and
+      // setting the height, so force an update in that case as well.
+      if (layoutMightHaveChanged) {
+        setForceUpdateCounter(n => n + 1);
+      }
+    }, [layoutMightHaveChanged]);
+
+    // Don't render the popover initially since computing the position depends on
+    // the window which isn't available if the component is rendered on server side.
+    const [shouldRender, setShouldRender] = useState(false);
+
+    useIsomorphicLayoutEffect(() => setShouldRender(true), []);
+
+    if (!shouldRender) {
+      return null;
     }
-  }, [layoutMightHaveChanged]);
-
-  // Don't render the popover initially since computing the position depends on
-  // the window which isn't available if the component is rendered on server side.
-  const [shouldRender, setShouldRender] = useState(false);
-
-  useIsomorphicLayoutEffect(() => setShouldRender(true), []);
-
-  if (!shouldRender) {
-    return null;
-  }
-
-  const {
-    align: windowSafeAlign,
-    justify: windowSafeJustify,
-    positionCSS: { transform, ...positionCSS },
-  } = calculatePosition({
-    useRelativePositioning: !usePortal,
-    spacing,
-    align,
-    justify,
-    referenceElViewportPos,
-    referenceElDocumentPos,
-    contentElViewportPos,
-    contentElDocumentPos,
-    scrollContainer,
-  });
-
-  const activeStyle = css`
-    opacity: 1;
-    position: ${usePortal ? '' : 'absolute'};
-    pointer-events: initial;
-  `;
-
-  const Root = usePortal ? Portal : Fragment;
-  const rootProps = usePortal
-    ? portalContainer
-      ? { container: portalContainer }
-      : { className: portalClassName ?? undefined }
-    : {};
-
-  let renderedChildren: null | React.ReactNode;
-
-  if (children == null) {
-    renderedChildren = null;
-  } else if (typeof children === 'function') {
-    renderedChildren = children({
+
+    const {
       align: windowSafeAlign,
       justify: windowSafeJustify,
-      referenceElPos: referenceElDocumentPos,
+      positionCSS: { transform, ...positionCSS },
+    } = calculatePosition({
+      useRelativePositioning: !usePortal,
+      spacing,
+      align,
+      justify,
+      referenceElViewportPos,
+      referenceElDocumentPos,
+      contentElViewportPos,
+      contentElDocumentPos,
+      scrollContainer,
     });
-  } else {
-    renderedChildren = children;
-  }
-
-  return (
-    <Transition
-      nodeRef={contentNodeRef}
-      in={active}
-      timeout={150}
-      mountOnEnter
-      unmountOnExit
-      appear
-      onEntered={() => setIsPopoverOpen(true)}
-      onExit={() => setIsPopoverOpen(false)}
-    >
-      {state => (
-        <>
-          {/* Using <span> to prevent validateDOMNesting warnings. Warnings will still show up if `usePortal` is false */}
-          <span
-            ref={setPlaceholderNode}
-            className={css`
-              display: none;
-            `}
-          />
-          <Root {...rootProps}>
-            <div
-              {...rest}
-              className={cx(
-                rootPopoverStyle,
-                css(positionCSS),
-                {
-                  [css({ transform })]:
-                    state === 'entering' || state === 'exiting',
-                  [activeStyle]: state === 'entered',
-                  [css`
-                    z-index: ${popoverZIndex};
-                  `]: typeof popoverZIndex === 'number',
-                },
-                className,
-                {
-                  [css`
-                    transition-delay: 0ms;
-                  `]: state === 'exiting',
-                },
-              )}
-            >
-              {/*
-                  We create this inner node with a ref because placing it on its parent
-                  creates an infinite loop in some cases when dynamic styles are applied.
-                */}
-              <div ref={setContentNode}>{renderedChildren}</div>
-            </div>
-          </Root>
-        </>
-      )}
-    </Transition>
-  );
-}
+
+    const activeStyle = css`
+      opacity: 1;
+      position: ${usePortal ? '' : 'absolute'};
+      pointer-events: initial;
+    `;
+
+    const Root = usePortal ? Portal : Fragment;
+    const rootProps = usePortal
+      ? portalContainer
+        ? { container: portalContainer }
+        : { className: portalClassName ?? undefined }
+      : {};
+
+    let renderedChildren: null | React.ReactNode;
+
+    if (children == null) {
+      renderedChildren = null;
+    } else if (typeof children === 'function') {
+      renderedChildren = children({
+        align: windowSafeAlign,
+        justify: windowSafeJustify,
+        referenceElPos: referenceElDocumentPos,
+      });
+    } else {
+      renderedChildren = children;
+    }
+
+    return (
+      <Transition
+        nodeRef={contentNodeRef}
+        in={active}
+        timeout={150}
+        mountOnEnter
+        unmountOnExit
+        appear
+        onEntered={() => setIsPopoverOpen(true)}
+        onExit={() => setIsPopoverOpen(false)}
+      >
+        {state => (
+          <>
+            {/* Using <span> to prevent validateDOMNesting warnings. Warnings will still show up if `usePortal` is false */}
+            <span
+              ref={setPlaceholderNode}
+              className={css`
+                display: none;
+              `}
+            />
+            <Root {...rootProps}>
+              <div
+                {...rest}
+                ref={fwdRef}
+                className={cx(
+                  rootPopoverStyle,
+                  css(positionCSS),
+                  {
+                    [css({ transform })]:
+                      state === 'entering' || state === 'exiting',
+                    [activeStyle]: state === 'entered',
+                    [css`
+                      z-index: ${popoverZIndex};
+                    `]: typeof popoverZIndex === 'number',
+                  },
+                  className,
+                  {
+                    [css`
+                      transition-delay: 0ms;
+                    `]: state === 'exiting',
+                  },
+                )}
+              >
+                {/*
+                    We create this inner node with a ref because placing it on its parent
+                    creates an infinite loop in some cases when dynamic styles are applied.
+                  */}
+                <div ref={setContentNode}>{renderedChildren}</div>
+              </div>
+            </Root>
+          </>
+        )}
+      </Transition>
+    );
+  },
+);
 
 Popover.displayName = 'Popover';
 
@@ -327,13 +334,16 @@ Popover.propTypes = {
   className: PropTypes.string,
   align: PropTypes.oneOf(Object.values(Align)),
   justify: PropTypes.oneOf(Object.values(Justify)),
+  /// @ts-expect-error Types of property '[nominalTypeHack]' are incompatible.
   refEl: PropTypes.shape({
     current:
       typeof window !== 'undefined'
         ? PropTypes.instanceOf(Element)
         : PropTypes.any,
   }),
+  /// @ts-expect-error Types of property '[nominalTypeHack]' are incompatible.
   usePortal: PropTypes.bool,
+  /// @ts-expect-error Types of property '[nominalTypeHack]' are incompatible.
   portalClassName: PropTypes.string,
   spacing: PropTypes.number,
   adjustOnMutation: PropTypes.bool,

From b90ae0014f4ba6edcbcc4ab3bae26d33f0e46a38 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 15 Sep 2023 15:11:39 -0400
Subject: [PATCH 075/351] Create witty-crabs-begin.md

---
 .changeset/witty-crabs-begin.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/witty-crabs-begin.md

diff --git a/.changeset/witty-crabs-begin.md b/.changeset/witty-crabs-begin.md
new file mode 100644
index 0000000000..614b544d37
--- /dev/null
+++ b/.changeset/witty-crabs-begin.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/popover': minor
+---
+
+Allows Popover to accept a `ref`

From 50151fc92bf605af8f855ef7fb465a665be2d762 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 15 Sep 2023 15:13:27 -0400
Subject: [PATCH 076/351] types ref

---
 packages/popover/src/Popover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/popover/src/Popover.tsx b/packages/popover/src/Popover.tsx
index f88ab922b5..d563758721 100644
--- a/packages/popover/src/Popover.tsx
+++ b/packages/popover/src/Popover.tsx
@@ -66,7 +66,7 @@ const mutationOptions = {
  * @param props.portalContainer HTML element that the popover is portaled within.
  * @param props.scrollContainer HTML ancestor element that's scrollable to position the popover accurately within scrolling containers.
  */
-const Popover = forwardRef<any, PopoverProps>(
+const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   (
     {
       active = false,

From 6f8253ca18fb3105427de2124b7080489d0ad51d Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 15 Sep 2023 15:59:09 -0400
Subject: [PATCH 077/351] fix some cell tests

---
 .../CalendarCell/CalendarCell.spec.tsx        | 35 ++++++++++++++++--
 .../Calendar/CalendarCell/CalendarCell.tsx    | 11 +++++-
 .../CalendarCell/CalendarCell.types.ts        |  3 ++
 .../src/DatePicker/DatePicker.spec.tsx        |  1 +
 .../date-picker/src/DatePicker/DatePicker.tsx |  4 +-
 .../DatePickerMenu/DatePickerMenu.tsx         | 10 ++++-
 .../DatePickerContext/DatePickerContext.tsx   |  1 +
 .../src/utils/isValidDate/index.ts            | 23 +++++++-----
 .../src/utils/isValidDate/isValidDate.spec.ts | 37 +++++++++++++++----
 9 files changed, 98 insertions(+), 27 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
index 5a776ed807..82a9c4016f 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { CalendarCell } from '.';
+import { CalendarCell, CalendarCellState } from '.';
 
 describe('packages/date-picker/calendar-cell', () => {
   test('has `gridcell` role', () => {
-    const { container, queryByRole } = render(<CalendarCell />);
+    const { container, queryByRole } = render(<CalendarCell aria-label="" />);
     const gridcell = queryByRole('gridcell');
     expect(gridcell).toBeInTheDocument();
     expect(container.firstChild).toEqual(gridcell);
@@ -15,11 +15,40 @@ describe('packages/date-picker/calendar-cell', () => {
   // TODO: need to pass in the Date object to the cell
   test.todo('has appropriate `aria-label`');
 
+  test('renders as aria-disabled', () => {
+    const clickHandler = jest.fn();
+    const { queryByRole } = render(
+      <CalendarCell
+        aria-label=""
+        onClick={clickHandler}
+        state={CalendarCellState.Disabled}
+      />,
+    );
+    const gridcell = queryByRole('gridcell');
+    expect(gridcell).toHaveAttribute('aria-disabled', 'true');
+  });
+
   test('receives click handlers', () => {
     const clickHandler = jest.fn();
-    const { queryByRole } = render(<CalendarCell onClick={clickHandler} />);
+    const { queryByRole } = render(
+      <CalendarCell aria-label="" onClick={clickHandler} />,
+    );
     const gridcell = queryByRole('gridcell');
     userEvent.click(gridcell!);
     expect(clickHandler).toHaveBeenCalled();
   });
+
+  test('Does not fire click handler when disabled', () => {
+    const clickHandler = jest.fn();
+    const { queryByRole } = render(
+      <CalendarCell
+        aria-label=""
+        onClick={clickHandler}
+        state={CalendarCellState.Disabled}
+      />,
+    );
+    const gridcell = queryByRole('gridcell');
+    userEvent.click(gridcell!);
+    expect(clickHandler).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
index 00c00f3c03..ebf3f650b6 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
@@ -27,6 +27,7 @@ export const CalendarCell = React.forwardRef<
       isCurrent,
       isHighlighted,
       className,
+      onClick,
       ...rest
     }: CalendarCellProps,
     fwdRef,
@@ -42,11 +43,18 @@ export const CalendarCell = React.forwardRef<
       ] as Array<CalendarCellState>
     ).includes(state);
 
+    const handleClick: MouseEventHandler<HTMLTableCellElement> = e => {
+      if (state !== CalendarCellState.Disabled) {
+        onClick?.(e);
+      }
+    };
+
     return (
       <td
         ref={ref}
         role="gridcell"
         aria-selected={isActive}
+        aria-disabled={state === CalendarCellState.Disabled}
         className={cx(
           calendarCellStyles,
 
@@ -57,6 +65,7 @@ export const CalendarCell = React.forwardRef<
           },
           className,
         )}
+        onClick={handleClick}
         {...rest}
       >
         <div className={cx(indicatorBaseStyles, indicatorClassName)}></div>
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
index 6d65d7b5ff..ecc5e121e4 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
@@ -12,6 +12,9 @@ export type CalendarCellState =
 
 export interface CalendarCellProps
   extends React.HTMLProps<HTMLTableCellElement> {
+  /** The label for the calendar cell */
+  ['aria-label']: string;
+
   /** The current state of the cell */
   state?: CalendarCellState;
 
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 02e9e12f84..35f5f561f7 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -123,6 +123,7 @@ describe('packages/date-picker', () => {
         const { calendarCells } = openMenu();
         const cell1 = calendarCells?.[0];
         userEvent.click(cell1);
+        expect(cell1).toHaveAttribute('aria-disabled', 'true');
         expect(onChange).not.toHaveBeenCalled();
       });
     });
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 6c77b8cc94..40b7fffe4e 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -14,7 +14,6 @@ import {
 } from '@leafygreen-ui/hooks';
 
 import {
-  DatePickerContextProps,
   DatePickerProvider,
   DatePickerProviderProps,
 } from '../DatePickerContext';
@@ -75,7 +74,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       onChange?.(newVal);
     };
 
-    useBackdropClick(closeMenu, [inputRef, menuRef], isOpen);
+    // useBackdropClick(closeMenu, [inputRef, menuRef], isOpen);
 
     const handleInputChange: DatePickerInputProps['setValue'] = (
       inputVal: Date | null,
@@ -84,7 +83,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     };
 
     const handleCellClick: DatePickerMenuProps['onCellClick'] = cellValue => {
-      console.log('onCellClick', cellValue);
       updateValue(cellValue);
       setOpen(false);
     };
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 66e4b8fabc..f9fbcba750 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -31,7 +31,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     }: DatePickerMenuProps,
     fwdRef,
   ) => {
-    const { isInRange } = useDatePickerContext();
+    const { isInRange, min, max } = useDatePickerContext();
     const [highlight, setHighlight] = useState<Date | null>(null);
 
     const getCellState = (cellDay: Date | null) => {
@@ -52,7 +52,12 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
 
     const makeCellHoverHandler = (day: Date) => () => setHighlight(day);
 
-    const makeCellClickHandler = (day: Date) => () => onCellClick(day);
+    const makeCellClickHandler = (day: Date) => () => {
+      if (isInRange(day)) {
+        onCellClick(day);
+      }
+    };
+
     return (
       <MenuWrapper
         active={isOpen}
@@ -73,6 +78,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
             {(day, i) => (
               <CalendarCell
                 key={i}
+                aria-label={day.toDateString()}
                 isHighlighted={isSameUTCDay(day, highlight)}
                 isCurrent={isCurrentUTCDay(day)}
                 state={getCellState(day)}
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index 2aed9490e1..d612775740 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -15,6 +15,7 @@ import {
 
 export const defaultDatePickerContext: DatePickerContextProps = {
   label: '',
+  description: '',
   dateFormat: 'iso8601',
   timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   min: new Date('12-31-1969'),
diff --git a/packages/date-picker/src/utils/isValidDate/index.ts b/packages/date-picker/src/utils/isValidDate/index.ts
index 320a19b979..70976f8228 100644
--- a/packages/date-picker/src/utils/isValidDate/index.ts
+++ b/packages/date-picker/src/utils/isValidDate/index.ts
@@ -1,24 +1,27 @@
-import { has, isNull, isUndefined } from 'lodash';
+import { isValid } from 'date-fns';
+import { isNull, isUndefined } from 'lodash';
 
 export const isValidDate = (
-  maybeDate?: Date | string | null,
+  maybeDate?: Date | string | number | null,
 ): maybeDate is Date | string => {
   if (isUndefined(maybeDate) || isNull(maybeDate)) return false;
 
-  if (typeof maybeDate === 'string') {
-    return isValidDateString(maybeDate);
-  }
+  switch (typeof maybeDate) {
+    case 'string':
+      return isValidDateString(maybeDate);
+    case 'number':
+      return isValid(maybeDate);
 
-  if (typeof maybeDate === 'object') {
-    return isValidDateObject(maybeDate);
+    default:
+      return isValidDateObject(maybeDate);
   }
-
-  return false;
 };
 
 export const isValidDateObject = (date?: any): date is Date => {
   return (
-    !isUndefined(date) && typeof date === 'object' && has(date, 'getISOString')
+    !isUndefined(date) &&
+    typeof date === 'object' &&
+    date.constructor.name === 'Date'
   );
 };
 
diff --git a/packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts b/packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts
index 85fdf365c6..97873594e8 100644
--- a/packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts
+++ b/packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts
@@ -1,15 +1,36 @@
-import { isValidDateString } from '.';
+import { isValidDate, isValidDateString } from '.';
 
-describe('packages/date-picker/utils/isValidDateString', () => {
-  test('us format is valid', () => {
-    expect(isValidDateString('12/26/1993')).toBeTruthy();
+describe('packages/date-picker/utils/isValidDate', () => {
+  test('accepts Date objects', () => {
+    expect(isValidDate(new Date())).toBe(true);
+    expect(isValidDate(new Date(Date.UTC(2023, 1, 1)))).toBe(true);
   });
 
-  test('iso format is valid', () => {
-    expect(isValidDateString('1993-12-26')).toBeTruthy();
+  test('accepts numbers', () => {
+    expect(isValidDate(Date.now())).toBe(true);
+    expect(isValidDate(0)).toBe(true);
   });
 
-  test('undefined format is not valid', () => {
-    expect(isValidDateString(undefined)).toBeFalsy();
+  test('accepts strings', () => {
+    expect(isValidDate('1993-12-26')).toBe(true);
+    expect(isValidDate('not a date')).toBe(false);
+  });
+
+  test('accepts null', () => {
+    expect(isValidDate(null)).toBe(false);
+  });
+
+  describe('isValidDateString', () => {
+    test('us format is valid', () => {
+      expect(isValidDateString('12/26/1993')).toBeTruthy();
+    });
+
+    test('iso format is valid', () => {
+      expect(isValidDateString('1993-12-26')).toBeTruthy();
+    });
+
+    test('undefined format is not valid', () => {
+      expect(isValidDateString(undefined)).toBeFalsy();
+    });
   });
 });

From cafae8a590eec8822633d809722278b9ea8c895e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 15 Sep 2023 16:59:27 -0400
Subject: [PATCH 078/351] adds UTCMonth utils

---
 packages/date-picker/package.json             |  3 +
 .../src/DatePicker/DatePicker.spec.tsx        | 66 ++++++++++++-------
 .../date-picker/src/DatePicker/DatePicker.tsx |  2 +-
 .../DatePickerMenu/DatePickerMenu.tsx         |  2 +-
 .../DatePickerMenuHeader/index.tsx            | 24 ++++---
 .../utils/isSameUTCDay/isSameUTCDay.spec.ts   | 14 ++++
 .../src/utils/isSameUTCMonth/index.ts         | 16 +++++
 .../isSameUTCMonth/isSameUTCMonth.spec.ts     | 59 +++++++++++++++++
 .../src/utils/setUTCMonth/index.ts            |  8 +++
 .../src/utils/setUTCMonth/setUTCMonth.spec.ts | 47 +++++++++++++
 yarn.lock                                     | 27 ++++++--
 11 files changed, 225 insertions(+), 43 deletions(-)
 create mode 100644 packages/date-picker/src/utils/isSameUTCMonth/index.ts
 create mode 100644 packages/date-picker/src/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
 create mode 100644 packages/date-picker/src/utils/setUTCMonth/index.ts
 create mode 100644 packages/date-picker/src/utils/setUTCMonth/setUTCMonth.spec.ts

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 31de31ac43..a3aa3e553d 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -44,5 +44,8 @@
   },
   "bugs": {
     "url": "https://jira.mongodb.org/projects/PD/summary"
+  },
+  "devDependencies": {
+    "timezone-mock": "^1.3.6"
   }
 }
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 35f5f561f7..e9fecf4929 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -80,6 +80,45 @@ describe('packages/date-picker', () => {
         const { calendarCells } = openMenu();
         expect(calendarCells).toHaveLength(29);
       });
+
+      describe('Chevrons', () => {
+        beforeEach(() => {
+          jest
+            .useFakeTimers()
+            .setSystemTime(new Date(Date.UTC(2023, Month.December, 26)));
+        });
+        test('Left is disabled if prev. month is entirely out of range', () => {
+          const { openMenu } = renderDatePicker({
+            min: new Date(Date.UTC(2023, Month.December, 1)),
+          });
+          const { leftChevron } = openMenu();
+          expect(leftChevron).toHaveAttribute('aria-disabled', 'true');
+        });
+
+        test('Right is disabled if next month is entirely out of range', () => {
+          const { openMenu } = renderDatePicker({
+            max: new Date(Date.UTC(2023, Month.December, 31)),
+          });
+          const { rightChevron } = openMenu();
+          expect(rightChevron).toHaveAttribute('aria-disabled', 'true');
+        });
+
+        test('Left is not disabled if part of prev. month is in range', () => {
+          const { openMenu } = renderDatePicker({
+            min: new Date(Date.UTC(2023, Month.November, 29)),
+          });
+          const { leftChevron } = openMenu();
+          expect(leftChevron).toHaveAttribute('aria-disabled', 'false');
+        });
+
+        test('Right is not disabled if part of next month is in of range', () => {
+          const { openMenu } = renderDatePicker({
+            max: new Date(Date.UTC(2024, Month.January, 2)),
+          });
+          const { rightChevron } = openMenu();
+          expect(rightChevron).toHaveAttribute('aria-disabled', 'false');
+        });
+      });
     });
   });
 
@@ -101,7 +140,7 @@ describe('packages/date-picker', () => {
       });
     });
 
-    describe.only('Clicking a Calendar cell', () => {
+    describe('Clicking a Calendar cell', () => {
       test('fires a change handler', () => {
         const onChange = jest.fn();
         const { openMenu } = renderDatePicker({
@@ -134,7 +173,6 @@ describe('packages/date-picker', () => {
           .useFakeTimers()
           .setSystemTime(new Date(Date.UTC(2023, Month.December, 26)));
       });
-
       test('Left does not close the menu', async () => {
         const { openMenu } = renderDatePicker();
         const { leftChevron, menuContainerEl } = openMenu();
@@ -160,8 +198,8 @@ describe('packages/date-picker', () => {
         userEvent.click(leftChevron!);
         await waitFor(() => {
           expect(calendarGrid).toHaveAttribute('aria-label', 'November 2023');
-          expect(monthSelect).toHaveValue(Month.November);
-          expect(yearSelect).toHaveValue((2023).toString());
+          expect(monthSelect).toHaveValue(Month.November.toString());
+          expect(yearSelect).toHaveValue('2023');
         });
       });
 
@@ -172,25 +210,9 @@ describe('packages/date-picker', () => {
         userEvent.click(rightChevron!);
         await waitFor(() => {
           expect(calendarGrid).toHaveAttribute('aria-label', 'January 2024');
-          expect(monthSelect).toHaveValue(Month.January);
-          expect(yearSelect).toHaveValue((2024).toString());
-        });
-      });
-
-      test('Left is disabled if prev. month is entirely out of range', () => {
-        const { openMenu } = renderDatePicker({
-          min: new Date(Date.UTC(2023, Month.December, 1)),
-        });
-        const { leftChevron } = openMenu();
-        expect(leftChevron).toHaveAttribute('aria-disabled', 'true');
-      });
-
-      test('Right is disabled if next month is entirely out of range', () => {
-        const { openMenu } = renderDatePicker({
-          max: new Date(Date.UTC(2023, Month.December, 31)),
+          expect(monthSelect).toHaveValue(Month.January.toString());
+          expect(yearSelect).toHaveValue('2024');
         });
-        const { rightChevron } = openMenu();
-        expect(rightChevron).toHaveAttribute('aria-disabled', 'true');
       });
 
       test.todo('changing the month is announced in an aria-live region');
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 40b7fffe4e..fef1ad73e7 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -74,7 +74,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       onChange?.(newVal);
     };
 
-    // useBackdropClick(closeMenu, [inputRef, menuRef], isOpen);
+    useBackdropClick(closeMenu, [inputRef, menuRef], isOpen);
 
     const handleInputChange: DatePickerInputProps['setValue'] = (
       inputVal: Date | null,
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index f9fbcba750..56210eb709 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -31,7 +31,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     }: DatePickerMenuProps,
     fwdRef,
   ) => {
-    const { isInRange, min, max } = useDatePickerContext();
+    const { isInRange } = useDatePickerContext();
     const [highlight, setHighlight] = useState<Date | null>(null);
 
     const getCellState = (cellDay: Date | null) => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index 9626f6c651..9d3b5ffad3 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  getMonth,
-  getYear,
-  isBefore,
-  isSameMonth,
-  setMonth,
-  setYear,
-} from 'date-fns';
+import { getYear, isBefore, setYear } from 'date-fns';
 import { range } from 'lodash';
 
 import Icon from '@leafygreen-ui/icon';
@@ -15,6 +8,8 @@ import { DropdownWidthBasis, Option, Select } from '@leafygreen-ui/select';
 
 import { Months } from '../../../constants';
 import { useDatePickerContext } from '../../../DatePickerContext';
+import { isSameUTCMonth } from '../../../utils/isSameUTCMonth';
+import { setUTCMonth } from '../../../utils/setUTCMonth';
 import {
   menuHeaderSelectContainerStyles,
   menuHeaderStyles,
@@ -48,13 +43,16 @@ export const DatePickerMenuHeader = ({
     }
   };
 
+  const prevMonth = month.getUTCMonth() - 1;
+  const nextMonth = month.getUTCMonth() + 1;
+
   return (
     <div className={menuHeaderStyles}>
       <IconButton
         aria-label="Previous month"
-        disabled={isSameMonth(month, min)}
+        disabled={isSameUTCMonth(month, min)}
         onClick={() => {
-          const newMonth = setMonth(month, getMonth(month) - 1);
+          const newMonth = setUTCMonth(month, prevMonth);
           updateMonth(newMonth);
         }}
       >
@@ -68,7 +66,7 @@ export const DatePickerMenuHeader = ({
           value={month.getUTCMonth().toString()}
           dropdownWidthBasis={DropdownWidthBasis.Option}
           onChange={m => {
-            const newMonth = setMonth(month, Number(m));
+            const newMonth = setUTCMonth(month, Number(m));
             updateMonth(newMonth);
           }}
           usePortal={false}
@@ -101,9 +99,9 @@ export const DatePickerMenuHeader = ({
       </div>
       <IconButton
         aria-label="Next month"
-        disabled={isSameMonth(month, max)}
+        disabled={isSameUTCMonth(month, max)}
         onClick={() => {
-          const newMonth = setMonth(month, getMonth(month) + 1);
+          const newMonth = setUTCMonth(month, nextMonth);
           updateMonth(newMonth);
         }}
       >
diff --git a/packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts b/packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts
index 8bd6e0ce75..97c2e33de9 100644
--- a/packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts
+++ b/packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts
@@ -1,6 +1,20 @@
+import tzMock from 'timezone-mock';
+
+import { Month } from '../../constants';
+
 import { isSameUTCDay } from '.';
 
 describe('packages/date-picker/utils/isSameUTCDay', () => {
+  beforeAll(() => {
+    tzMock.register('US/Eastern');
+  });
+
+  beforeEach(() => {
+    jest
+      .useFakeTimers()
+      .setSystemTime(new Date(Date.UTC(2023, Month.September, 1, 0, 0, 0)));
+  });
+
   test('true: when both dates are defined in UTC', () => {
     const utc1 = new Date(Date.UTC(2023, 8, 1, 0, 0, 0));
     const utc2 = new Date(Date.UTC(2023, 8, 1, 21, 0, 0));
diff --git a/packages/date-picker/src/utils/isSameUTCMonth/index.ts b/packages/date-picker/src/utils/isSameUTCMonth/index.ts
new file mode 100644
index 0000000000..ac937a09ff
--- /dev/null
+++ b/packages/date-picker/src/utils/isSameUTCMonth/index.ts
@@ -0,0 +1,16 @@
+/**
+ * Returns whether 2 Dates are the same Month in UTC.
+ *
+ * Compare to `date-fns.isSameDay`, which uses local time
+ */
+export const isSameUTCMonth = (
+  day1?: Date | null,
+  day2?: Date | null,
+): boolean => {
+  if (!day1 || !day2) return false;
+
+  return (
+    day1.getUTCMonth() === day2.getUTCMonth() &&
+    day1.getUTCFullYear() === day2.getUTCFullYear()
+  );
+};
diff --git a/packages/date-picker/src/utils/isSameUTCMonth/isSameUTCMonth.spec.ts b/packages/date-picker/src/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
new file mode 100644
index 0000000000..a8d2248c54
--- /dev/null
+++ b/packages/date-picker/src/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
@@ -0,0 +1,59 @@
+import tzMock from 'timezone-mock';
+
+import { Month } from '../../constants';
+
+import { isSameUTCMonth } from '.';
+
+describe('packages/date-picker/utils/isSameUTCMonth', () => {
+  beforeAll(() => {
+    tzMock.register('US/Eastern');
+  });
+
+  beforeEach(() => {
+    jest
+      .useFakeTimers()
+      .setSystemTime(new Date(Date.UTC(2023, Month.September, 1, 0, 0, 0)));
+  });
+
+  test('true, when both defined in UTC', () => {
+    const utc1 = new Date(Date.UTC(2023, Month.September, 1));
+    const utc2 = new Date(Date.UTC(2023, Month.September, 10));
+    expect(isSameUTCMonth(utc1, utc2)).toBe(true);
+  });
+
+  test('false: when both dates are defined in UTC', () => {
+    const utc1 = new Date(Date.UTC(2023, Month.September, 1));
+    const utc2 = new Date(Date.UTC(2023, Month.August, 31));
+    expect(isSameUTCMonth(utc1, utc2)).toBe(false);
+  });
+
+  test('true: when one date is defined locally', () => {
+    const utc = new Date(Date.UTC(2023, Month.September, 10));
+    const local = new Date('2023-08-31T21:00:00');
+    expect(isSameUTCMonth(utc, local)).toBe(true);
+  });
+
+  test('false: when one date is defined locally', () => {
+    const utc = new Date(Date.UTC(2023, Month.September, 10));
+    const local = new Date('2023-08-31T12:00');
+    expect(isSameUTCMonth(utc, local)).toBe(false);
+  });
+
+  test('true: when both dates are defined locally', () => {
+    const local1 = new Date('2023-09-01T00:00');
+    const local2 = new Date('2023-09-30T19:00');
+    expect(isSameUTCMonth(local1, local2)).toBe(true);
+  });
+
+  test('false: when both dates are defined locally', () => {
+    const local1 = new Date('2023-09-01T00:00');
+    const local2 = new Date('2023-09-30T20:00');
+    expect(isSameUTCMonth(local1, local2)).toBe(false);
+  });
+
+  test('false: when one or both dates is null', () => {
+    expect(isSameUTCMonth(new Date(), null)).toBe(false);
+    expect(isSameUTCMonth(null, new Date())).toBe(false);
+    expect(isSameUTCMonth(null, null)).toBe(false);
+  });
+});
diff --git a/packages/date-picker/src/utils/setUTCMonth/index.ts b/packages/date-picker/src/utils/setUTCMonth/index.ts
new file mode 100644
index 0000000000..0c518f7d28
--- /dev/null
+++ b/packages/date-picker/src/utils/setUTCMonth/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Equivalent to `date-fns.setMonth`, but strictly for UTC
+ */
+export const setUTCMonth = (date: Date, month: number): Date => {
+  const newDate = new Date(date);
+  newDate.setUTCMonth(month);
+  return newDate;
+};
diff --git a/packages/date-picker/src/utils/setUTCMonth/setUTCMonth.spec.ts b/packages/date-picker/src/utils/setUTCMonth/setUTCMonth.spec.ts
new file mode 100644
index 0000000000..2b511d7b28
--- /dev/null
+++ b/packages/date-picker/src/utils/setUTCMonth/setUTCMonth.spec.ts
@@ -0,0 +1,47 @@
+import { setMonth } from 'date-fns';
+import tzMock from 'timezone-mock';
+
+import { Month } from '../../constants';
+
+import { setUTCMonth } from '.';
+
+describe('packages/date-picker/utils/setUTCMonth', () => {
+  test('sets the month', () => {
+    const d = new Date(Date.UTC(2023, Month.September, 10));
+    const d2 = setUTCMonth(d, Month.March);
+    expect(d2.getUTCMonth()).toEqual(Month.March);
+  });
+
+  test('returns a new object', () => {
+    const d = new Date(Date.UTC(2023, Month.September, 10));
+    const d2 = setUTCMonth(d, Month.September);
+    expect(d).toStrictEqual(d2);
+    expect(d).not.toBe(d2);
+  });
+
+  test('overflows for months >= 12', () => {
+    const d = new Date(Date.UTC(2023, Month.September, 10));
+    const d2 = setUTCMonth(d, 12);
+    expect(d2.getUTCMonth()).toEqual(Month.January);
+  });
+
+  test('under-flows for months < 0', () => {
+    const d = new Date(Date.UTC(2023, Month.September, 10));
+    const d2 = setUTCMonth(d, -1);
+    expect(d2.getUTCMonth()).toEqual(Month.December);
+  });
+
+  test('does not care about time-zone', () => {
+    tzMock.register('US/Pacific');
+    jest
+      .useFakeTimers()
+      .setSystemTime(new Date(Date.UTC(2023, Month.September, 1, 0, 0, 0)));
+    const d = new Date(Date.UTC(2023, Month.September, 1, 0, 0, 0));
+    const d_utc = setUTCMonth(d, Month.August);
+    expect(d_utc.getUTCMonth()).toEqual(Month.August);
+
+    // For comparison:
+    const d_tz = setMonth(d, Month.August);
+    expect(d_tz.getUTCMonth()).toEqual(Month.September);
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index c52e5c6e4e..eacb754022 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2265,6 +2265,15 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
+"@leafygreen-ui/lib@^11.0.0":
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/lib/-/lib-11.0.0.tgz#dde085e103adc8650699785407650cef61cedd40"
+  integrity sha512-sHkY/MOwRQDc9qAR1awreW0dP+6ELueJJd4JCJmi6XYbdL0wDotFwsWfCwkL+N6cFbE1e+xBQtFLB6T1+58+iQ==
+  dependencies:
+    "@storybook/csf" "^0.1.0"
+    lodash "^4.17.21"
+    prop-types "^15.7.2"
+
 "@leafygreen-ui/typography@^16.5.5":
   version "16.5.5"
   resolved "https://registry.yarnpkg.com/@leafygreen-ui/typography/-/typography-16.5.5.tgz#65cc0ce7e39f5b8f72f9b9a4dbea80868ac09694"
@@ -4261,9 +4270,9 @@
     csstype "^3.0.2"
 
 "@types/react@^17.0.2":
-  version "17.0.62"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.62.tgz#2efe8ddf8533500ec44b1334dd1a97caa2f860e3"
-  integrity sha512-eANCyz9DG8p/Vdhr0ZKST8JV12PhH2ACCDYlFw6DIO+D+ca+uP4jtEDEpVqXZrh/uZdXQGwk7whJa3ah5DtyLw==
+  version "17.0.65"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.65.tgz#95f6a2ab61145ffb69129d07982d047f9e0870cd"
+  integrity sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -5533,9 +5542,9 @@ camelcase@^7.0.0:
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
 caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517:
-  version "1.0.30001519"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601"
-  integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==
+  version "1.0.30001534"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz#f24a9b2a6d39630bac5c132b5dff89b39a12e7dd"
+  integrity sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
@@ -12430,6 +12439,11 @@ through@^2.3.8:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
+timezone-mock@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/timezone-mock/-/timezone-mock-1.3.6.tgz#44e4c5aeb57e6c07ae630a05c528fc4d9aab86f4"
+  integrity sha512-YcloWmZfLD9Li5m2VcobkCDNVaLMx8ohAb/97l/wYS3m+0TIEK5PFNMZZfRcusc6sFjIfxu8qcJT0CNnOdpqmg==
+
 tiny-emitter@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
@@ -13259,6 +13273,7 @@ wordwrap@^1.0.0:
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From 257d0aa19659c3da81855102c97850966a69f19d Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 15 Sep 2023 17:46:37 -0400
Subject: [PATCH 079/351] fake timers on all tests. fix html nesting

---
 .../CalendarCell/CalendarCell.spec.tsx        | 46 ++++++++++-----
 .../src/DatePicker/DatePicker.spec.tsx        | 59 +++++++++----------
 .../DatePickerMenuHeader/index.tsx            |  4 +-
 yarn.lock                                     |  1 -
 4 files changed, 63 insertions(+), 47 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
index 82a9c4016f..2360e4c414 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
@@ -1,15 +1,27 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { CalendarCell, CalendarCellState } from '.';
 
+const TestCellWrapper = ({ children }: PropsWithChildren) => (
+  <table>
+    <tbody>
+      <tr data-testid="tr">{children}</tr>
+    </tbody>
+  </table>
+);
+
 describe('packages/date-picker/calendar-cell', () => {
   test('has `gridcell` role', () => {
-    const { container, queryByRole } = render(<CalendarCell aria-label="" />);
+    const { queryByRole, getByTestId } = render(
+      <TestCellWrapper>
+        <CalendarCell aria-label="" />
+      </TestCellWrapper>,
+    );
     const gridcell = queryByRole('gridcell');
     expect(gridcell).toBeInTheDocument();
-    expect(container.firstChild).toEqual(gridcell);
+    expect(getByTestId('tr').firstChild).toEqual(gridcell);
   });
 
   // TODO: need to pass in the Date object to the cell
@@ -18,11 +30,13 @@ describe('packages/date-picker/calendar-cell', () => {
   test('renders as aria-disabled', () => {
     const clickHandler = jest.fn();
     const { queryByRole } = render(
-      <CalendarCell
-        aria-label=""
-        onClick={clickHandler}
-        state={CalendarCellState.Disabled}
-      />,
+      <TestCellWrapper>
+        <CalendarCell
+          aria-label=""
+          onClick={clickHandler}
+          state={CalendarCellState.Disabled}
+        />
+      </TestCellWrapper>,
     );
     const gridcell = queryByRole('gridcell');
     expect(gridcell).toHaveAttribute('aria-disabled', 'true');
@@ -31,7 +45,9 @@ describe('packages/date-picker/calendar-cell', () => {
   test('receives click handlers', () => {
     const clickHandler = jest.fn();
     const { queryByRole } = render(
-      <CalendarCell aria-label="" onClick={clickHandler} />,
+      <TestCellWrapper>
+        <CalendarCell aria-label="" onClick={clickHandler} />
+      </TestCellWrapper>,
     );
     const gridcell = queryByRole('gridcell');
     userEvent.click(gridcell!);
@@ -41,11 +57,13 @@ describe('packages/date-picker/calendar-cell', () => {
   test('Does not fire click handler when disabled', () => {
     const clickHandler = jest.fn();
     const { queryByRole } = render(
-      <CalendarCell
-        aria-label=""
-        onClick={clickHandler}
-        state={CalendarCellState.Disabled}
-      />,
+      <TestCellWrapper>
+        <CalendarCell
+          aria-label=""
+          onClick={clickHandler}
+          state={CalendarCellState.Disabled}
+        />
+      </TestCellWrapper>,
     );
     const gridcell = queryByRole('gridcell');
     userEvent.click(gridcell!);
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index e9fecf4929..4946499718 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -13,6 +13,13 @@ import { renderDatePicker } from './DatePicker.testutils';
 import { DatePicker } from '.';
 
 describe('packages/date-picker', () => {
+  beforeEach(() => {
+    // Set the current time to midnight UTC on 2023-12-26
+    jest
+      .useFakeTimers()
+      .setSystemTime(new Date(Date.UTC(2023, Month.December, 26)));
+  });
+
   describe('Rendering', () => {
     /// Note: Most rendering tests handled by Chromatic
 
@@ -50,9 +57,6 @@ describe('packages/date-picker', () => {
       });
 
       test('if no value is set, menu opens to current month', () => {
-        jest
-          .useFakeTimers()
-          .setSystemTime(new Date(Date.UTC(2023, Month.December, 26, 0, 0, 0)));
         const { openMenu } = renderDatePicker();
         const { calendarGrid, monthSelect, yearSelect } = openMenu();
         expect(calendarGrid).toHaveAttribute('aria-label', 'December 2023');
@@ -61,9 +65,6 @@ describe('packages/date-picker', () => {
       });
 
       test('if a value is set, menu opens to the month of that value', () => {
-        jest
-          .useFakeTimers()
-          .setSystemTime(new Date(Date.UTC(2023, Month.December, 26, 0, 0, 0)));
         const { openMenu } = renderDatePicker({
           value: new Date(Date.UTC(2023, Month.March, 10)),
         });
@@ -82,11 +83,6 @@ describe('packages/date-picker', () => {
       });
 
       describe('Chevrons', () => {
-        beforeEach(() => {
-          jest
-            .useFakeTimers()
-            .setSystemTime(new Date(Date.UTC(2023, Month.December, 26)));
-        });
         test('Left is disabled if prev. month is entirely out of range', () => {
           const { openMenu } = renderDatePicker({
             min: new Date(Date.UTC(2023, Month.December, 1)),
@@ -168,11 +164,6 @@ describe('packages/date-picker', () => {
     });
 
     describe('Clicking a Chevron', () => {
-      beforeEach(() => {
-        jest
-          .useFakeTimers()
-          .setSystemTime(new Date(Date.UTC(2023, Month.December, 26)));
-      });
       test('Left does not close the menu', async () => {
         const { openMenu } = renderDatePicker();
         const { leftChevron, menuContainerEl } = openMenu();
@@ -218,7 +209,7 @@ describe('packages/date-picker', () => {
       test.todo('changing the month is announced in an aria-live region');
     });
 
-    describe('Clicking the month select menu', () => {
+    describe.only('Clicking the month select menu', () => {
       test('menu opens over the calendar menu', async () => {
         const { openMenu, queryAllByRole } = renderDatePicker();
         const { monthSelect, menuContainerEl } = openMenu();
@@ -230,19 +221,23 @@ describe('packages/date-picker', () => {
         });
       });
 
-      test('selecting the month updates the calendar', () => {
-        const { openMenu, queryAllByRole } = renderDatePicker({
+      test('selecting the month updates the calendar', async () => {
+        const { openMenu, findAllByRole } = renderDatePicker({
           value: new Date(Date.UTC(2023, Month.December, 26)),
         });
         const { monthSelect, calendarGrid } = openMenu();
         userEvent.click(monthSelect!);
-        const options = queryAllByRole('option');
-        userEvent.click(options[0]);
-        expect(calendarGrid).toHaveAttribute('aria-label', 'January 2023');
+        const options = await findAllByRole('option');
+        const Jan = options[0];
+
+        userEvent.click(Jan);
+        await waitFor(() => {
+          expect(calendarGrid).toHaveAttribute('aria-label', 'January 2023');
+        });
       });
     });
 
-    describe('Clicking the year select menu', () => {
+    describe.only('Clicking the year select menu', () => {
       test('menu opens over the calendar menu', async () => {
         const { openMenu, queryAllByRole } = renderDatePicker();
         const { yearSelect, menuContainerEl } = openMenu();
@@ -253,15 +248,19 @@ describe('packages/date-picker', () => {
           expect(listBoxes).toHaveLength(2);
         });
       });
-      test('selecting the year updates the calendar', () => {
-        const { openMenu, queryAllByRole } = renderDatePicker({
+      test('selecting the year updates the calendar', async () => {
+        const { openMenu, findAllByRole } = renderDatePicker({
           value: new Date(Date.UTC(2023, Month.December, 26)),
         });
-        const { monthSelect, calendarGrid } = openMenu();
-        userEvent.click(monthSelect!);
-        const options = queryAllByRole('option');
-        userEvent.click(options[0]);
-        expect(calendarGrid).toHaveAttribute('aria-label', 'January 1970');
+        const { yearSelect, calendarGrid } = openMenu();
+        userEvent.click(yearSelect!);
+        const options = await findAllByRole('option');
+        const _1970 = options[1];
+
+        userEvent.click(_1970);
+        await waitFor(() => {
+          expect(calendarGrid).toHaveAttribute('aria-label', 'December 1970');
+        });
       });
     });
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index 9d3b5ffad3..70a8026665 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { getYear, isBefore, setYear } from 'date-fns';
+import { isBefore, setYear } from 'date-fns';
 import { range } from 'lodash';
 
 import Icon from '@leafygreen-ui/icon';
@@ -27,7 +27,7 @@ export const DatePickerMenuHeader = ({
 }: DatePickerMenuHeaderProps) => {
   const { min, max, isInRange } = useDatePickerContext();
 
-  const yearOptions = range(getYear(min), getYear(max) + 1);
+  const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
 
   const updateMonth = (newMonth: Date) => {
     // TODO: may need to update this function to check if the months are in range
diff --git a/yarn.lock b/yarn.lock
index eacb754022..a59edd1710 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13273,7 +13273,6 @@ wordwrap@^1.0.0:
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From 9f0639d891e036429e874d5e5c70d25b4b4e8ee7 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 15 Sep 2023 17:56:32 -0400
Subject: [PATCH 080/351] Update Select.spec.tsx

---
 packages/select/src/Select.spec.tsx | 47 +++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/packages/select/src/Select.spec.tsx b/packages/select/src/Select.spec.tsx
index 2823a07744..42f07f8aca 100644
--- a/packages/select/src/Select.spec.tsx
+++ b/packages/select/src/Select.spec.tsx
@@ -919,4 +919,51 @@ describe('packages/select', () => {
       });
     });
   });
+
+  describe('without Portal (usePortal="false")', () => {
+    test('menu opens', async () => {
+      const { getByRole, findByRole } = render(
+        <Select {...defaultProps} usePortal={false}>
+          <Option data-testid="option-apple">Apple</Option>
+          <Option data-testid="option-banana">Banana</Option>
+        </Select>,
+      );
+      const button = getByRole('button');
+      userEvent.click(button);
+
+      const listbox = await findByRole('listbox');
+
+      expect(listbox).toBeInTheDocument();
+    });
+
+    test('menu renders as a child of button', async () => {
+      const { getByRole, findByRole } = render(
+        <Select {...defaultProps} usePortal={false}>
+          <Option data-testid="option-apple">Apple</Option>
+          <Option data-testid="option-banana">Banana</Option>
+        </Select>,
+      );
+      const button = getByRole('button');
+      userEvent.click(button);
+      const listbox = await findByRole('listbox');
+
+      expect(button).toContainElement(listbox);
+    });
+
+    test('clicking an option fires onChange', async () => {
+      const onChange = jest.fn();
+      const { getByRole, findAllByRole } = render(
+        <Select {...defaultProps} usePortal={false} onChange={onChange}>
+          <Option data-testid="option-apple">Apple</Option>
+          <Option data-testid="option-banana">Banana</Option>
+        </Select>,
+      );
+      const button = getByRole('button');
+      userEvent.click(button);
+      const options = await findAllByRole('option');
+      const apple = options[0];
+      userEvent.click(apple);
+      expect(onChange).toHaveBeenCalled();
+    });
+  });
 });

From 843c27294d26f35c70dbfcce2f012932deb12236 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 18 Sep 2023 11:10:31 -0400
Subject: [PATCH 081/351] wip

---
 .../DateInputBox/DateInputBox.types.ts        |  6 +-
 .../src/DatePicker/DatePicker.spec.tsx        | 79 ++++++++++++++++++-
 .../src/DatePicker/DatePicker.stories.tsx     |  4 +
 .../date-picker/src/DatePicker/DatePicker.tsx | 47 ++++++++---
 .../src/DatePicker/DatePicker.types.ts        |  9 ++-
 .../DatePickerMenu/DatePickerMenu.types.ts    |  4 +-
 6 files changed, 128 insertions(+), 21 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
index 7915633983..75836b1526 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
@@ -1,17 +1,19 @@
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
+import { DateType } from '../../DatePicker/DatePicker.types';
+
 export interface DateInputBoxProps
   extends Omit<HTMLElementProps<'div'>, 'onChange'> {
   /**
    * Date value passed into the component, in UTC time
    */
-  value: Date | null;
+  value?: DateType;
 
   /**
    * Value setter callback.
    * Date object is in UTC time
    */
-  setValue?: (date: Date | null) => void;
+  setValue?: (date: DateType) => void;
 
   /**
    * id of the labelling element
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 4946499718..3cca6d0e6c 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -49,6 +49,24 @@ describe('packages/date-picker', () => {
       expect(yearInput).toBeInTheDocument();
     });
 
+    test('renders `value` prop', () => {
+      const { dayInput, monthInput, yearInput } = renderDatePicker({
+        value: new Date(),
+      });
+      expect(dayInput).toHaveValue('26');
+      expect(monthInput).toHaveValue('12');
+      expect(yearInput).toHaveValue('2023');
+    });
+
+    test('renders `initialValue` prop', () => {
+      const { dayInput, monthInput, yearInput } = renderDatePicker({
+        initialValue: new Date(),
+      });
+      expect(dayInput).toHaveValue('26');
+      expect(monthInput).toHaveValue('12');
+      expect(yearInput).toHaveValue('2023');
+    });
+
     describe('Menu', () => {
       test('menu is initially closed', () => {
         const { getMenuElements } = renderDatePicker();
@@ -209,7 +227,7 @@ describe('packages/date-picker', () => {
       test.todo('changing the month is announced in an aria-live region');
     });
 
-    describe.only('Clicking the month select menu', () => {
+    describe.skip('Clicking the month select menu', () => {
       test('menu opens over the calendar menu', async () => {
         const { openMenu, queryAllByRole } = renderDatePicker();
         const { monthSelect, menuContainerEl } = openMenu();
@@ -237,7 +255,7 @@ describe('packages/date-picker', () => {
       });
     });
 
-    describe.only('Clicking the year select menu', () => {
+    describe.skip('Clicking the year select menu', () => {
       test('menu opens over the calendar menu', async () => {
         const { openMenu, queryAllByRole } = renderDatePicker();
         const { yearSelect, menuContainerEl } = openMenu();
@@ -359,4 +377,61 @@ describe('packages/date-picker', () => {
       test.todo('focus remains on the input element');
     });
   });
+
+  describe('Controlled vs Uncontrolled', () => {
+    test('(Controlled) fires a change handler if `value` is provided', async () => {
+      const onChange = jest.fn();
+      const { openMenu } = renderDatePicker({
+        value: new Date(),
+        onChange,
+      });
+      const { calendarCells } = openMenu();
+      const cell1 = calendarCells?.[0];
+      userEvent.click(cell1);
+      await waitFor(() => expect(onChange).toHaveBeenCalled());
+    });
+
+    test('(Controlled) does not change the value if `value` is provided', async () => {
+      const onChange = jest.fn();
+      const { openMenu, dayInput, monthInput, yearInput } = renderDatePicker({
+        value: new Date(),
+        onChange,
+      });
+      const { calendarCells } = openMenu();
+      const cell1 = calendarCells?.[0];
+      userEvent.click(cell1);
+      await waitFor(() => {
+        expect(dayInput).toHaveValue('26');
+        expect(monthInput).toHaveValue('12');
+        expect(yearInput).toHaveValue('2023');
+      });
+    });
+
+    test('(Uncontrolled) fires a change handler', async () => {
+      const onChange = jest.fn();
+      const { openMenu } = renderDatePicker({
+        onChange,
+      });
+      const { calendarCells } = openMenu();
+      const cell1 = calendarCells?.[0];
+      userEvent.click(cell1);
+      await waitFor(() => expect(onChange).toHaveBeenCalled());
+    });
+
+    test('(Uncontrolled) changes the input value if `value` is not provided', async () => {
+      const onChange = jest.fn();
+      const { openMenu, dayInput, monthInput, yearInput } = renderDatePicker({
+        onChange,
+        initialValue: new Date(),
+      });
+      const { calendarCells } = openMenu();
+      const cell1 = calendarCells?.[0];
+      userEvent.click(cell1);
+      await waitFor(() => {
+        expect(dayInput).toHaveValue('01');
+        expect(monthInput).toHaveValue('12');
+        expect(yearInput).toHaveValue('2023');
+      });
+    });
+  });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index 4f674ee56d..ccb1b2bf96 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -63,4 +63,8 @@ export const Basic: StoryFn<typeof DatePicker> = props => {
   return <DatePicker {...props} value={value} onChange={setValue} />;
 };
 
+export const Uncontrolled: StoryFn<typeof DatePicker> = props => {
+  return <DatePicker {...props} />;
+};
+
 export const Generated = () => {};
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index fef1ad73e7..2542292f35 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -6,11 +6,14 @@ import React, {
   useState,
 } from 'react';
 import { isSameMonth, setMonth } from 'date-fns';
+import { isUndefined } from 'lodash';
 
 import {
   useBackdropClick,
+  useControlledValue,
   useForwardedRef,
   useIdAllocator,
+  usePrevious,
 } from '@leafygreen-ui/hooks';
 
 import {
@@ -20,7 +23,7 @@ import {
 import { pickAndOmit } from '../utils/pickAndOmit';
 import { toDate } from '../utils/toDate';
 
-import { DatePickerProps } from './DatePicker.types';
+import { DatePickerProps, DateType } from './DatePicker.types';
 import { DatePickerInput, DatePickerInputProps } from './DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from './DatePickerMenu';
 
@@ -47,8 +50,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
   (
     {
       value: valueProp,
-      initialValue,
-      onChange,
+      initialValue: initialProp,
+      onChange: onChangeProp,
       handleValidation,
       ...props
     }: DatePickerProps,
@@ -58,20 +61,38 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
     const inputRef = useForwardedRef(fwdRef, null);
     const menuRef = useRef<HTMLDivElement>(null);
-    const utcValue = useMemo(() => toDate(valueProp), [valueProp]);
-    const [displayMonth, setDisplayMonth] = useState<Date>(
-      utcValue ?? new Date(),
-    );
+
+    // Initially set to the existence of `valueProp`
+    // If value prop is initially undefined is initially false
+    // If the value prop then changes, then isControlled is set to true,
+    // and will remain true for the life of the component
+    const isControlled: boolean = useMemo(() => {
+      return isControlled ?? isUndefined(valueProp);
+    }, [valueProp]);
+
+    // We set the initial value to either the `value` or the temporary `initialValue`
+    const initialValue = isControlled ? valueProp : initialProp;
+    const [value, setInternalValue] = useState(initialValue);
+
+    const updateValue = (newValue: DateType) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+
+      onChangeProp?.(newValue);
+    };
+
+    const [displayMonth, setDisplayMonth] = useState<Date>(value ?? new Date());
     const [isOpen, setOpen] = useState(false);
     const closeMenu = () => setOpen(false);
 
-    const updateValue = (newVal: Date | null) => {
+    const changeValue = (newVal: Date | null) => {
       // if the new value is not the current month, update the month
       if (newVal && !isSameMonth(newVal, displayMonth)) {
         setDisplayMonth(setMonth(displayMonth, newVal.getMonth()));
       }
 
-      onChange?.(newVal);
+      updateValue(newVal);
     };
 
     useBackdropClick(closeMenu, [inputRef, menuRef], isOpen);
@@ -79,11 +100,11 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const handleInputChange: DatePickerInputProps['setValue'] = (
       inputVal: Date | null,
     ) => {
-      if (inputVal !== utcValue) updateValue(inputVal);
+      if (inputVal !== value) changeValue(inputVal);
     };
 
     const handleCellClick: DatePickerMenuProps['onCellClick'] = cellValue => {
-      updateValue(cellValue);
+      changeValue(cellValue);
       setOpen(false);
     };
 
@@ -107,7 +128,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       >
         <DatePickerInput
           ref={inputRef}
-          value={utcValue}
+          value={value}
           setValue={handleInputChange}
           onClick={handleInputClick}
           {...restProps}
@@ -116,7 +137,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           ref={menuRef}
           id={menuId}
           refEl={inputRef}
-          value={utcValue}
+          value={value}
           isOpen={isOpen}
           month={displayMonth}
           onCellClick={handleCellClick}
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index eb23c9178d..9c8a569488 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -1,10 +1,13 @@
 import { BaseDatePickerProps } from '../types';
 
+export type DateType = Date | null;
+
 export interface DatePickerProps extends BaseDatePickerProps {
   /**
    * The selected date, given in UTC time
+   *
    */
-  value?: string | Date | null;
+  value?: DateType;
 
   /**
    * A Callback fired when the user makes a value change.
@@ -12,10 +15,10 @@ export interface DatePickerProps extends BaseDatePickerProps {
    *
    * Callback date argument will be a Date object in ISO-8601 format, and in UTC time.
    */
-  onChange?: (value: Date | null) => void;
+  onChange?: (value: DateType) => void;
 
   /** The initial selected date. Ignored if `value` is provided */
-  initialValue?: string | Date;
+  initialValue?: Date;
 
   /**
    * A callback fired when validation should run, based on our [form validation guidelines](https://www.mongodb.design/foundation/forms/#form-validation-error-handling).
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
index dbd4805e49..6a584b978f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
@@ -2,6 +2,8 @@ import { HTMLElementProps } from '@leafygreen-ui/lib';
 import { PopoverProps } from '@leafygreen-ui/popover';
 import { PortalControlProps } from '@leafygreen-ui/popover';
 
+import { DateType } from '../DatePicker.types';
+
 export type DatePickerMenuProps = PortalControlProps &
   Pick<PopoverProps, 'refEl'> &
   HTMLElementProps<'div'> & {
@@ -9,7 +11,7 @@ export type DatePickerMenuProps = PortalControlProps &
     isOpen: boolean;
 
     /** The value of the component, provided in UTC time */
-    value: Date | null;
+    value?: DateType;
 
     /** The month to display in the calendar grid */
     month: Date;

From 59503a2ffddc12f79499df7c73252399ffa3730f Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 18 Sep 2023 11:13:52 -0400
Subject: [PATCH 082/351] treeshake lodash

---
 .../date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx   | 2 +-
 packages/date-picker/src/DatePicker/DatePicker.tsx           | 5 +----
 .../DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx | 2 +-
 .../date-picker/src/DatePickerContext/DatePickerContext.tsx  | 2 +-
 packages/date-picker/src/constants.ts                        | 2 +-
 packages/date-picker/src/utils/getMonthName/index.ts         | 2 +-
 packages/date-picker/src/utils/getRemainingParts/index.ts    | 2 +-
 packages/date-picker/src/utils/getWeeksArray/index.ts        | 4 +++-
 packages/date-picker/src/utils/isValidDate/index.ts          | 3 ++-
 packages/date-picker/src/utils/isValidSegment/index.ts       | 2 +-
 packages/date-picker/src/utils/pickAndOmit/index.ts          | 3 ++-
 packages/date-picker/src/utils/toDate/index.ts               | 3 ++-
 packages/date-picker/src/utils/valueFormatter/index.ts       | 2 +-
 13 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index 6a0b612982..323f6dcdaf 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { range } from 'lodash';
+import range from 'lodash/range';
 import { getWeekStartByLocale } from 'weekstart';
 
 import { Disclaimer } from '@leafygreen-ui/typography';
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 2542292f35..4070699f9b 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -6,14 +6,12 @@ import React, {
   useState,
 } from 'react';
 import { isSameMonth, setMonth } from 'date-fns';
-import { isUndefined } from 'lodash';
+import isUndefined from 'lodash/isUndefined';
 
 import {
   useBackdropClick,
-  useControlledValue,
   useForwardedRef,
   useIdAllocator,
-  usePrevious,
 } from '@leafygreen-ui/hooks';
 
 import {
@@ -21,7 +19,6 @@ import {
   DatePickerProviderProps,
 } from '../DatePickerContext';
 import { pickAndOmit } from '../utils/pickAndOmit';
-import { toDate } from '../utils/toDate';
 
 import { DatePickerProps, DateType } from './DatePicker.types';
 import { DatePickerInput, DatePickerInputProps } from './DatePickerInput';
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index 70a8026665..57111719b5 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { isBefore, setYear } from 'date-fns';
-import { range } from 'lodash';
+import range from 'lodash/range';
 
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index d612775740..cdb525a569 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { createContext, PropsWithChildren, useContext } from 'react';
 import { isWithinInterval } from 'date-fns';
-import { defaults } from 'lodash';
+import defaults from 'lodash/defaults';
 
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
diff --git a/packages/date-picker/src/constants.ts b/packages/date-picker/src/constants.ts
index 1335801288..263f7e3814 100644
--- a/packages/date-picker/src/constants.ts
+++ b/packages/date-picker/src/constants.ts
@@ -1,4 +1,4 @@
-import { range } from 'lodash';
+import range from 'lodash/range';
 
 import { getMonthName } from './utils/getMonthName';
 
diff --git a/packages/date-picker/src/utils/getMonthName/index.ts b/packages/date-picker/src/utils/getMonthName/index.ts
index 338ce2d6cb..e786b70212 100644
--- a/packages/date-picker/src/utils/getMonthName/index.ts
+++ b/packages/date-picker/src/utils/getMonthName/index.ts
@@ -1,4 +1,4 @@
-import { padStart } from 'lodash';
+import padStart from 'lodash/padStart';
 
 /**
  * Returns the month name from a given index and optional locale
diff --git a/packages/date-picker/src/utils/getRemainingParts/index.ts b/packages/date-picker/src/utils/getRemainingParts/index.ts
index c8a0e0548d..f1abc48b2c 100644
--- a/packages/date-picker/src/utils/getRemainingParts/index.ts
+++ b/packages/date-picker/src/utils/getRemainingParts/index.ts
@@ -1,4 +1,4 @@
-import { isUndefined } from 'lodash';
+import isUndefined from 'lodash/isUndefined';
 
 import { cloneReverse } from '../cloneReverse';
 
diff --git a/packages/date-picker/src/utils/getWeeksArray/index.ts b/packages/date-picker/src/utils/getWeeksArray/index.ts
index c1bd9d9e0d..92f1e9f38e 100644
--- a/packages/date-picker/src/utils/getWeeksArray/index.ts
+++ b/packages/date-picker/src/utils/getWeeksArray/index.ts
@@ -1,4 +1,6 @@
-import { chunk, fill, range } from 'lodash';
+import chunk from 'lodash/chunk';
+import fill from 'lodash/fill';
+import range from 'lodash/range';
 import { getWeekStartByLocale } from 'weekstart';
 
 import { daysPerWeek } from '../../constants';
diff --git a/packages/date-picker/src/utils/isValidDate/index.ts b/packages/date-picker/src/utils/isValidDate/index.ts
index 70976f8228..2eba483799 100644
--- a/packages/date-picker/src/utils/isValidDate/index.ts
+++ b/packages/date-picker/src/utils/isValidDate/index.ts
@@ -1,5 +1,6 @@
 import { isValid } from 'date-fns';
-import { isNull, isUndefined } from 'lodash';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 
 export const isValidDate = (
   maybeDate?: Date | string | number | null,
diff --git a/packages/date-picker/src/utils/isValidSegment/index.ts b/packages/date-picker/src/utils/isValidSegment/index.ts
index 0a7b4af61e..a075558c45 100644
--- a/packages/date-picker/src/utils/isValidSegment/index.ts
+++ b/packages/date-picker/src/utils/isValidSegment/index.ts
@@ -1,4 +1,4 @@
-import { isUndefined } from 'lodash';
+import isUndefined from 'lodash/isUndefined';
 
 import { DateSegment, DateSegmentValue } from '../../DateInput/DateInput.types';
 
diff --git a/packages/date-picker/src/utils/pickAndOmit/index.ts b/packages/date-picker/src/utils/pickAndOmit/index.ts
index 66fe3868c6..62f9f35dfc 100644
--- a/packages/date-picker/src/utils/pickAndOmit/index.ts
+++ b/packages/date-picker/src/utils/pickAndOmit/index.ts
@@ -1,4 +1,5 @@
-import { omit, pick } from 'lodash';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
 
 /**
  * Returns an array of 2 objects,
diff --git a/packages/date-picker/src/utils/toDate/index.ts b/packages/date-picker/src/utils/toDate/index.ts
index 75b507306f..00fc82df73 100644
--- a/packages/date-picker/src/utils/toDate/index.ts
+++ b/packages/date-picker/src/utils/toDate/index.ts
@@ -1,5 +1,6 @@
 import { isValid, toDate as _toDate } from 'date-fns';
-import { isNull, isUndefined } from 'lodash';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 
 import { isValidDateObject } from '../isValidDate';
 
diff --git a/packages/date-picker/src/utils/valueFormatter/index.ts b/packages/date-picker/src/utils/valueFormatter/index.ts
index 1af15a1f7c..321f61f8fe 100644
--- a/packages/date-picker/src/utils/valueFormatter/index.ts
+++ b/packages/date-picker/src/utils/valueFormatter/index.ts
@@ -1,4 +1,4 @@
-import { padStart } from 'lodash';
+import padStart from 'lodash/padStart';
 
 import { DateSegment } from '../../DateInput/DateInput.types';
 import { charsPerSegment } from '../../DateInput/DateInputSegment/constants';

From 23e45660fff897cc584a037709e5fe123fdefdd7 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 18 Sep 2023 11:17:47 -0400
Subject: [PATCH 083/351] ts

---
 packages/date-picker/src/utils/newDateFromSegments/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/src/utils/newDateFromSegments/index.ts b/packages/date-picker/src/utils/newDateFromSegments/index.ts
index 269c41ef5d..3e83da1c2a 100644
--- a/packages/date-picker/src/utils/newDateFromSegments/index.ts
+++ b/packages/date-picker/src/utils/newDateFromSegments/index.ts
@@ -1,4 +1,4 @@
-import { DateSegmentsState } from '../../DateInput';
+import { DateSegmentsState } from '../../DateInput/DateInput.types';
 import { isValidSegment } from '../isValidSegment';
 
 /** Constructs a date object in UTC from day, month, year segments */

From 4fdba9d210a4bbdccb358966d62ab8dd44f5ce77 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 18 Sep 2023 11:30:47 -0400
Subject: [PATCH 084/351] rm pointer-events: none

---
 packages/button/src/ButtonContent/ButtonContent.styles.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/button/src/ButtonContent/ButtonContent.styles.ts b/packages/button/src/ButtonContent/ButtonContent.styles.ts
index 5b4a84976f..12a79b6341 100644
--- a/packages/button/src/ButtonContent/ButtonContent.styles.ts
+++ b/packages/button/src/ButtonContent/ButtonContent.styles.ts
@@ -49,7 +49,6 @@ export const buttonContentStyle = css`
   align-items: center;
   height: 100%;
   width: 100%;
-  pointer-events: none;
   position: relative;
   z-index: 0;
   transition: all ${transitionDuration.default} ease-in-out;

From 5a3498908f7f897efbd34e6bdf5bf79cd9a03586 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 18 Sep 2023 11:34:27 -0400
Subject: [PATCH 085/351] Create giant-seas-impress.md

---
 .changeset/giant-seas-impress.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/giant-seas-impress.md

diff --git a/.changeset/giant-seas-impress.md b/.changeset/giant-seas-impress.md
new file mode 100644
index 0000000000..0824a9cf83
--- /dev/null
+++ b/.changeset/giant-seas-impress.md
@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/button': patch
+'@leafygreen-ui/select': patch
+---
+
+Updates Button to remove `pointer-events: none` styles from it's inner container. This allows the Select component to work as intended when using `usePortal = false`.

From cae574d41ccc34bca39a0003d5a06f2978cc652e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 18 Sep 2023 12:23:06 -0400
Subject: [PATCH 086/351] add user-select: none;

---
 packages/button/src/ButtonContent/ButtonContent.styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/button/src/ButtonContent/ButtonContent.styles.ts b/packages/button/src/ButtonContent/ButtonContent.styles.ts
index 12a79b6341..6b8c37a3b8 100644
--- a/packages/button/src/ButtonContent/ButtonContent.styles.ts
+++ b/packages/button/src/ButtonContent/ButtonContent.styles.ts
@@ -50,6 +50,7 @@ export const buttonContentStyle = css`
   height: 100%;
   width: 100%;
   position: relative;
+  user-select: none;
   z-index: 0;
   transition: all ${transitionDuration.default} ease-in-out;
 `;

From 535325ef6813546c6f690e274657d3a405941012 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 18 Sep 2023 13:44:03 -0400
Subject: [PATCH 087/351] add comments to usePortal: false

---
 .../DatePickerMenuHeader/index.tsx            | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index 57111719b5..48be52781b 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -21,6 +21,15 @@ type DatePickerMenuHeaderProps = Pick<
   'month' | 'onMonthChange'
 >;
 
+const selectElementProps = {
+  size: 'xsmall',
+  allowDeselect: false,
+  dropdownWidthBasis: DropdownWidthBasis.Option,
+  // using no portal so the select menus are included in the backdrop "foreground"
+  // there is currently no way to pass a ref into the Select portal to use inf backdrop "foreground"
+  usePortal: false,
+} as const;
+
 export const DatePickerMenuHeader = ({
   month,
   onMonthChange,
@@ -60,16 +69,13 @@ export const DatePickerMenuHeader = ({
       </IconButton>
       <div className={menuHeaderSelectContainerStyles}>
         <Select
-          size="xsmall"
+          {...selectElementProps}
           aria-label="Select month"
-          allowDeselect={false}
           value={month.getUTCMonth().toString()}
-          dropdownWidthBasis={DropdownWidthBasis.Option}
           onChange={m => {
             const newMonth = setUTCMonth(month, Number(m));
             updateMonth(newMonth);
           }}
-          usePortal={false}
         >
           {Months.map((m, i) => (
             <Option value={i.toString()} key={m.short}>
@@ -78,17 +84,13 @@ export const DatePickerMenuHeader = ({
           ))}
         </Select>
         <Select
-          size="xsmall"
+          {...selectElementProps}
           aria-label="Select year"
-          allowDeselect={false}
           value={month.getFullYear().toString()}
-          dropdownWidthBasis={DropdownWidthBasis.Option}
           onChange={y => {
             const newMonth = setYear(month, Number(y));
             updateMonth(newMonth);
           }}
-          usePortal={false}
-          popoverZIndex={2}
         >
           {yearOptions.map(y => (
             <Option value={y.toString()} key={y}>

From 201ab7ace01a59afd161bb8a90a6cb81dc36d308 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 18 Sep 2023 17:29:09 -0400
Subject: [PATCH 088/351] update tests

---
 .../src/DatePicker/DatePicker.spec.tsx        | 30 ++++----
 .../src/DatePicker/DatePicker.testutils.tsx   | 46 +++++++-----
 .../date-picker/src/DatePicker/DatePicker.tsx | 73 +++++++++++--------
 .../src/DatePicker/DatePicker.types.ts        |  2 +-
 4 files changed, 88 insertions(+), 63 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 3cca6d0e6c..126d8e6fe4 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -20,7 +20,7 @@ describe('packages/date-picker', () => {
       .setSystemTime(new Date(Date.UTC(2023, Month.December, 26)));
   });
 
-  describe('Rendering', () => {
+  describe.only('Rendering', () => {
     /// Note: Most rendering tests handled by Chromatic
 
     test('spreads rest to formField', () => {
@@ -51,20 +51,20 @@ describe('packages/date-picker', () => {
 
     test('renders `value` prop', () => {
       const { dayInput, monthInput, yearInput } = renderDatePicker({
-        value: new Date(),
+        value: new Date(Date.now()),
       });
-      expect(dayInput).toHaveValue('26');
-      expect(monthInput).toHaveValue('12');
-      expect(yearInput).toHaveValue('2023');
+      expect(dayInput.value).toEqual('26');
+      expect(monthInput.value).toEqual('12');
+      expect(yearInput.value).toEqual('2023');
     });
 
     test('renders `initialValue` prop', () => {
       const { dayInput, monthInput, yearInput } = renderDatePicker({
-        initialValue: new Date(),
+        initialValue: new Date(Date.now()),
       });
-      expect(dayInput).toHaveValue('26');
-      expect(monthInput).toHaveValue('12');
-      expect(yearInput).toHaveValue('2023');
+      expect(dayInput.value).toEqual('26');
+      expect(monthInput.value).toEqual('12');
+      expect(yearInput.value).toEqual('2023');
     });
 
     describe('Menu', () => {
@@ -401,9 +401,9 @@ describe('packages/date-picker', () => {
       const cell1 = calendarCells?.[0];
       userEvent.click(cell1);
       await waitFor(() => {
-        expect(dayInput).toHaveValue('26');
-        expect(monthInput).toHaveValue('12');
-        expect(yearInput).toHaveValue('2023');
+        expect(dayInput.value).toEqual('26');
+        expect(monthInput.value).toEqual('12');
+        expect(yearInput.value).toEqual('2023');
       });
     });
 
@@ -428,9 +428,9 @@ describe('packages/date-picker', () => {
       const cell1 = calendarCells?.[0];
       userEvent.click(cell1);
       await waitFor(() => {
-        expect(dayInput).toHaveValue('01');
-        expect(monthInput).toHaveValue('12');
-        expect(yearInput).toHaveValue('2023');
+        expect(dayInput.value).toEqual('01');
+        expect(monthInput.value).toEqual('12');
+        expect(yearInput.value).toEqual('2023');
       });
     });
   });
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index eb812de992..a36ed50814 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -8,21 +8,21 @@ import { DatePicker } from '.';
 interface RenderDatePickerResult extends RenderResult {
   formField: HTMLElement;
   inputContainer: HTMLElement;
-  dayInput: HTMLElement;
-  monthInput: HTMLElement;
-  yearInput: HTMLElement;
+  dayInput: HTMLInputElement;
+  monthInput: HTMLInputElement;
+  yearInput: HTMLInputElement;
   getMenuElements: () => RenderMenuResult;
   openMenu: () => RenderMenuResult;
 }
 
 interface RenderMenuResult {
   menuContainerEl: HTMLElement | null;
-  leftChevron: HTMLElement | null;
-  rightChevron: HTMLElement | null;
-  monthSelect: HTMLElement | null;
-  yearSelect: HTMLElement | null;
-  calendarGrid: HTMLElement | null;
-  calendarCells: Array<HTMLElement>;
+  leftChevron: HTMLButtonElement | null;
+  rightChevron: HTMLButtonElement | null;
+  monthSelect: HTMLButtonElement | null;
+  yearSelect: HTMLButtonElement | null;
+  calendarGrid: HTMLTableElement | null;
+  calendarCells: Array<HTMLTableCellElement>;
 }
 
 /**
@@ -38,9 +38,9 @@ export const renderDatePicker = (
 
   const formField = result.getByTestId('lg-date-picker');
   const inputContainer = result.getByRole('combobox');
-  const dayInput = result.getByLabelText('day');
-  const monthInput = result.getByLabelText('month');
-  const yearInput = result.getByLabelText('year');
+  const dayInput = result.getByLabelText('day') as HTMLInputElement;
+  const monthInput = result.getByLabelText('month') as HTMLInputElement;
+  const yearInput = result.getByLabelText('year') as HTMLInputElement;
 
   /**
    * Returns relevant menu elements.
@@ -48,14 +48,24 @@ export const renderDatePicker = (
    */
   function getMenuElements(): RenderMenuResult {
     const menuContainerEl = result.queryByRole('listbox');
-    const calendarGrid = result.queryByRole('grid');
-    const calendarCells = result.queryAllByRole('gridcell');
+    const calendarGrid = result.queryByRole('grid') as HTMLTableElement;
+    const calendarCells = result.queryAllByRole(
+      'gridcell',
+    ) as Array<HTMLTableCellElement>;
 
     // label text is tested in DatePickerMenu.spec
-    const leftChevron = result.queryByLabelText('Previous month');
-    const rightChevron = result.queryByLabelText('Next month');
-    const monthSelect = result.queryByLabelText('Select month');
-    const yearSelect = result.queryByLabelText('Select year');
+    const leftChevron = result.queryByLabelText(
+      'Previous month',
+    ) as HTMLButtonElement;
+    const rightChevron = result.queryByLabelText(
+      'Next month',
+    ) as HTMLButtonElement;
+    const monthSelect = result.queryByLabelText(
+      'Select month',
+    ) as HTMLButtonElement;
+    const yearSelect = result.queryByLabelText(
+      'Select year',
+    ) as HTMLButtonElement;
 
     return {
       menuContainerEl,
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 4070699f9b..2d7ed138d5 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -1,15 +1,9 @@
-import React, {
-  forwardRef,
-  MouseEventHandler,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { forwardRef, MouseEventHandler, useRef, useState } from 'react';
 import { isSameMonth, setMonth } from 'date-fns';
-import isUndefined from 'lodash/isUndefined';
 
 import {
   useBackdropClick,
+  useControlledValue,
   useForwardedRef,
   useIdAllocator,
 } from '@leafygreen-ui/hooks';
@@ -20,7 +14,7 @@ import {
 } from '../DatePickerContext';
 import { pickAndOmit } from '../utils/pickAndOmit';
 
-import { DatePickerProps, DateType } from './DatePicker.types';
+import { DatePickerProps } from './DatePicker.types';
 import { DatePickerInput, DatePickerInputProps } from './DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from './DatePickerMenu';
 
@@ -59,27 +53,48 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const inputRef = useForwardedRef(fwdRef, null);
     const menuRef = useRef<HTMLDivElement>(null);
 
-    // Initially set to the existence of `valueProp`
-    // If value prop is initially undefined is initially false
-    // If the value prop then changes, then isControlled is set to true,
-    // and will remain true for the life of the component
-    const isControlled: boolean = useMemo(() => {
-      return isControlled ?? isUndefined(valueProp);
-    }, [valueProp]);
-
-    // We set the initial value to either the `value` or the temporary `initialValue`
-    const initialValue = isControlled ? valueProp : initialProp;
-    const [value, setInternalValue] = useState(initialValue);
-
-    const updateValue = (newValue: DateType) => {
-      if (!isControlled) {
-        setInternalValue(newValue);
-      }
-
-      onChangeProp?.(newValue);
-    };
+    const { value, updateValue } = useControlledValue(
+      valueProp,
+      onChangeProp,
+      initialProp,
+    );
 
-    const [displayMonth, setDisplayMonth] = useState<Date>(value ?? new Date());
+    // // Initially set to the existence of `valueProp`
+    // // If value prop is initially undefined, it's initially uncontrolled
+    // // If the value prop then changes, then isControlled is set to true,
+    // // and will remain true for the life of the component
+    // const isControlled: boolean = useMemo(() => {
+    //   return isControlled || !isUndefined(valueProp);
+    // }, [valueProp]);
+
+    // // We set the initial value to either the `value` or the temporary `initialValue`
+    // const initialValue = useMemo(
+    //   () => (isControlled ? valueProp : initialProp),
+    //   [initialProp, isControlled, valueProp],
+    // );
+    // const [internalValue, setInternalValue] = useState(initialValue);
+
+    // // if valueProp changes, update the internal value
+    // // useEffect(() => {
+    // //   if (!wasControlled && !isUndefined(valueProp)) {
+    // //     setInternalValue;
+    // //   }
+    // // }, [valueProp, wasControlled]);
+
+    // const updateValue = useCallback(
+    //   (newValue: DateType) => {
+    //     if (!isControlled) {
+    //       setInternalValue(newValue);
+    //     }
+
+    //     onChangeProp?.(newValue);
+    //   },
+    //   [isControlled, onChangeProp],
+    // );
+
+    // const value = isControlled ? valueProp : internalValue;
+
+    const [displayMonth, setDisplayMonth] = useState<Date>(new Date());
     const [isOpen, setOpen] = useState(false);
     const closeMenu = () => setOpen(false);
 
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index 9c8a569488..85956e1d9a 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -15,7 +15,7 @@ export interface DatePickerProps extends BaseDatePickerProps {
    *
    * Callback date argument will be a Date object in ISO-8601 format, and in UTC time.
    */
-  onChange?: (value: DateType) => void;
+  onChange?: (value?: DateType) => void;
 
   /** The initial selected date. Ignored if `value` is provided */
   initialValue?: Date;

From 00f0007fb598545586a38b52f01923eaf36a74be Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 18 Sep 2023 17:30:32 -0400
Subject: [PATCH 089/351] Creates internal useControlledValue

---
 .../date-picker/src/DatePicker/DatePicker.tsx |  37 +--
 .../src/hooks/useControlledValue/index.ts     |   1 +
 .../useControlledValue.spec.tsx               | 264 ++++++++++++++++++
 .../useControlledValue/useControlledValue.ts  |  92 ++++++
 4 files changed, 358 insertions(+), 36 deletions(-)
 create mode 100644 packages/date-picker/src/hooks/useControlledValue/index.ts
 create mode 100644 packages/date-picker/src/hooks/useControlledValue/useControlledValue.spec.tsx
 create mode 100644 packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 2d7ed138d5..4f89d1e3ce 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -3,7 +3,6 @@ import { isSameMonth, setMonth } from 'date-fns';
 
 import {
   useBackdropClick,
-  useControlledValue,
   useForwardedRef,
   useIdAllocator,
 } from '@leafygreen-ui/hooks';
@@ -12,6 +11,7 @@ import {
   DatePickerProvider,
   DatePickerProviderProps,
 } from '../DatePickerContext';
+import { useControlledValue } from '../hooks/useControlledValue';
 import { pickAndOmit } from '../utils/pickAndOmit';
 
 import { DatePickerProps } from './DatePicker.types';
@@ -59,41 +59,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       initialProp,
     );
 
-    // // Initially set to the existence of `valueProp`
-    // // If value prop is initially undefined, it's initially uncontrolled
-    // // If the value prop then changes, then isControlled is set to true,
-    // // and will remain true for the life of the component
-    // const isControlled: boolean = useMemo(() => {
-    //   return isControlled || !isUndefined(valueProp);
-    // }, [valueProp]);
-
-    // // We set the initial value to either the `value` or the temporary `initialValue`
-    // const initialValue = useMemo(
-    //   () => (isControlled ? valueProp : initialProp),
-    //   [initialProp, isControlled, valueProp],
-    // );
-    // const [internalValue, setInternalValue] = useState(initialValue);
-
-    // // if valueProp changes, update the internal value
-    // // useEffect(() => {
-    // //   if (!wasControlled && !isUndefined(valueProp)) {
-    // //     setInternalValue;
-    // //   }
-    // // }, [valueProp, wasControlled]);
-
-    // const updateValue = useCallback(
-    //   (newValue: DateType) => {
-    //     if (!isControlled) {
-    //       setInternalValue(newValue);
-    //     }
-
-    //     onChangeProp?.(newValue);
-    //   },
-    //   [isControlled, onChangeProp],
-    // );
-
-    // const value = isControlled ? valueProp : internalValue;
-
     const [displayMonth, setDisplayMonth] = useState<Date>(new Date());
     const [isOpen, setOpen] = useState(false);
     const closeMenu = () => setOpen(false);
diff --git a/packages/date-picker/src/hooks/useControlledValue/index.ts b/packages/date-picker/src/hooks/useControlledValue/index.ts
new file mode 100644
index 0000000000..b515757d26
--- /dev/null
+++ b/packages/date-picker/src/hooks/useControlledValue/index.ts
@@ -0,0 +1 @@
+export { useControlledValue } from './useControlledValue';
diff --git a/packages/date-picker/src/hooks/useControlledValue/useControlledValue.spec.tsx b/packages/date-picker/src/hooks/useControlledValue/useControlledValue.spec.tsx
new file mode 100644
index 0000000000..7f3ad040d2
--- /dev/null
+++ b/packages/date-picker/src/hooks/useControlledValue/useControlledValue.spec.tsx
@@ -0,0 +1,264 @@
+import React from 'react';
+import { ChangeEventHandler } from 'react';
+import { render } from '@testing-library/react';
+import { renderHook, RenderHookResult } from '@testing-library/react-hooks';
+import userEvent from '@testing-library/user-event';
+
+import { useControlledValue } from './useControlledValue';
+
+const errorSpy = jest.spyOn(console, 'error');
+
+const renderUseControlledValueHook = <T extends any>(
+  ...[valueProp, callback, initial]: Parameters<typeof useControlledValue<T>>
+): RenderHookResult<T, ReturnType<typeof useControlledValue<T>>> => {
+  const result = renderHook(v => useControlledValue(v, callback, initial), {
+    initialProps: valueProp,
+  });
+
+  return { ...result };
+};
+
+describe('packages/hooks/useControlledValue', () => {
+  beforeEach(() => {
+    errorSpy.mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    errorSpy.mockReset();
+  });
+
+  test('rendering without any arguments sets hook to uncontrolled', () => {
+    const { result } = renderUseControlledValueHook();
+    expect(result.current.isControlled).toEqual(false);
+  });
+
+  describe('accepts various value types', () => {
+    test('accepts number values', () => {
+      const { result } = renderUseControlledValueHook(5);
+      expect(result.current.value).toBe(5);
+    });
+
+    test('accepts boolean values', () => {
+      const { result } = renderUseControlledValueHook(false);
+      expect(result.current.value).toBe(false);
+    });
+
+    test('accepts array values', () => {
+      const arr = ['foo', 'bar'];
+      const { result } = renderUseControlledValueHook(arr);
+      expect(result.current.value).toBe(arr);
+    });
+
+    test('accepts object values', () => {
+      const obj = { foo: 'foo', bar: 'bar' };
+      const { result } = renderUseControlledValueHook(obj);
+      expect(result.current.value).toBe(obj);
+    });
+
+    test('accepts date values', () => {
+      const date = new Date('2023-08-23');
+      const { result } = renderUseControlledValueHook(date);
+      expect(result.current.value).toBe(date);
+    });
+
+    test('accepts multiple/union types', () => {
+      const { result, rerender } = renderUseControlledValueHook<
+        string | number
+      >(5);
+      expect(result.current.value).toBe(5);
+      rerender('foo');
+      expect(result.current.value).toBe('foo');
+    });
+  });
+
+  describe('Controlled', () => {
+    test('rendering with a value sets value and isControlled', () => {
+      const { result } = renderUseControlledValueHook('apple');
+      expect(result.current.isControlled).toBe(true);
+      expect(result.current.value).toBe('apple');
+    });
+
+    test('rerendering from initial undefined sets value and isControlled', async () => {
+      const { rerender, result } = renderUseControlledValueHook();
+      rerender('apple');
+      expect(result.current.isControlled).toBe(true);
+      expect(result.current.value).toEqual('apple');
+    });
+
+    test('rerendering with a new value changes the value', () => {
+      const { rerender, result } = renderUseControlledValueHook('apple');
+      expect(result.current.value).toBe('apple');
+      rerender('banana');
+      expect(result.current.value).toBe('banana');
+    });
+
+    test('provided handler is called within `updateValue`', () => {
+      const handler = jest.fn();
+      const { result } = renderUseControlledValueHook<string>('apple', handler);
+      result.current.updateValue('banana');
+      expect(handler).toHaveBeenCalledWith('banana');
+    });
+
+    test('hook value does not change when `updateValue` is called', () => {
+      const { result } = renderUseControlledValueHook<string>('apple');
+      result.current.updateValue('banana');
+      // value doesn't change unless we explicitly change it
+      expect(result.current.value).toBe('apple');
+    });
+
+    test('setting value to undefined should keep the component controlled', () => {
+      const { rerender, result } = renderUseControlledValueHook('apple');
+      expect(result.current.isControlled).toBe(true);
+      rerender(undefined);
+      expect(result.current.isControlled).toBe(true);
+    });
+
+    test('initial value is ignored when controlled', () => {
+      const { result } = renderUseControlledValueHook<string>(
+        'apple',
+        () => {},
+        'banana',
+      );
+      expect(result.current.value).toBe('apple');
+    });
+  });
+
+  describe('Uncontrolled', () => {
+    test('calling without a value sets value to `initialValue`', () => {
+      const {
+        result: { current },
+      } = renderUseControlledValueHook(undefined, () => {}, 'apple');
+
+      expect(current.isControlled).toBe(false);
+      expect(current.value).toBe('apple');
+    });
+
+    test('provided handler is called within `updateValue`', () => {
+      const handler = jest.fn();
+      const {
+        result: { current },
+      } = renderUseControlledValueHook(undefined, handler);
+
+      current.updateValue('apple');
+      expect(handler).toHaveBeenCalledWith('apple');
+    });
+
+    test('updateValue updates the value', () => {
+      const { result } = renderUseControlledValueHook<string>(undefined);
+      result.current.updateValue('banana');
+      expect(result.current.value).toBe('banana');
+    });
+  });
+
+  describe('Within test component', () => {
+    const TestComponent = ({
+      valueProp,
+      handlerProp,
+    }: {
+      valueProp?: string;
+      handlerProp?: (val?: string) => void;
+    }) => {
+      const initialVal = '';
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const { value, updateValue } = useControlledValue(
+        valueProp,
+        handlerProp,
+        initialVal,
+      );
+
+      const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
+        updateValue(e.target.value);
+      };
+
+      return (
+        <>
+          <input
+            data-testid="test-input"
+            value={value}
+            onChange={handleChange}
+          />
+          <button
+            data-testid="test-button"
+            onClick={() => updateValue('carrot')}
+          />
+        </>
+      );
+    };
+
+    describe('Controlled', () => {
+      test('initially renders with a value', () => {
+        const result = render(<TestComponent valueProp="apple" />);
+        const input = result.getByTestId('test-input');
+        expect(input).toHaveValue('apple');
+      });
+
+      test('responds to value changes', () => {
+        const result = render(<TestComponent valueProp="apple" />);
+        const input = result.getByTestId('test-input');
+        result.rerender(<TestComponent valueProp="banana" />);
+        expect(input).toHaveValue('banana');
+      });
+
+      test('user interaction triggers handler', () => {
+        const handler = jest.fn();
+        const result = render(
+          <TestComponent valueProp="apple" handlerProp={handler} />,
+        );
+        const input = result.getByTestId('test-input');
+        userEvent.type(input, 'b');
+        expect(handler).toHaveBeenCalledWith(expect.stringContaining('b'));
+      });
+
+      test('user interaction does not change the element value', () => {
+        const result = render(<TestComponent valueProp="apple" />);
+        const input = result.getByTestId('test-input');
+        userEvent.type(input, 'b');
+        expect(input).toHaveValue('apple');
+      });
+
+      // eslint-disable-next-line jest/no-disabled-tests
+      test.skip('user interaction does not change the element value when initially undefined', () => {
+        const handler = jest.fn();
+        const result = render(
+          <TestComponent valueProp={undefined} handlerProp={handler} />,
+        );
+        const input = result.getByTestId('test-input');
+        userEvent.type(input, 'b');
+        expect(input).toHaveValue('apple');
+      });
+    });
+
+    describe('Uncontrolled', () => {
+      test('initially renders without a value', () => {
+        const result = render(<TestComponent />);
+        const input = result.getByTestId('test-input');
+        expect(input).toHaveValue('');
+        expect(errorSpy).not.toHaveBeenCalled();
+      });
+
+      test('user interaction triggers handler', () => {
+        const handler = jest.fn();
+        const result = render(<TestComponent handlerProp={handler} />);
+        const input = result.getByTestId('test-input');
+        userEvent.type(input, 'b');
+        expect(handler).toHaveBeenCalled();
+      });
+
+      test('user interaction does not change the element value', () => {
+        const handler = jest.fn();
+        const result = render(<TestComponent handlerProp={handler} />);
+        const input = result.getByTestId('test-input');
+        userEvent.type(input, 'banana');
+        expect(input).toHaveValue('banana');
+      });
+
+      test('clicking the button updates the value', () => {
+        const result = render(<TestComponent />);
+        const input = result.getByTestId('test-input');
+        const button = result.getByTestId('test-button');
+        userEvent.click(button);
+        expect(input).toHaveValue('carrot');
+      });
+    });
+  });
+});
diff --git a/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts b/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts
new file mode 100644
index 0000000000..e55d570c17
--- /dev/null
+++ b/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts
@@ -0,0 +1,92 @@
+import { useEffect, useMemo, useState } from 'react';
+import isUndefined from 'lodash/isUndefined';
+
+import { consoleOnce } from '@leafygreen-ui/lib';
+
+import usePrevious from '../usePrevious';
+
+interface ControlledValueReturnObject<T extends any> {
+  /** Whether the value is controlled */
+  isControlled: boolean;
+
+  /** The controlled or uncontrolled value */
+  value: T;
+
+  /**
+   * Either updates the uncontrolled value,
+   * or calls the provided `onChange` callback
+   */
+  updateValue: (newVal?: T, ...args: Array<any>) => void;
+}
+
+/**
+ * A hook that enables a component to be both controlled or uncontrolled.
+ *
+ * Returns a {@link ControlledValueReturnObject}
+ */
+export const useControlledValue = <T extends any>(
+  valueProp?: T,
+  onChange?: (val?: T, ...args: Array<any>) => void,
+  initialProp?: T,
+): ControlledValueReturnObject<T | undefined> => {
+  // Initially set isControlled to the existence of `valueProp`.
+  // If the value prop changes from undefined to something defined,
+  // then isControlled is set to true,
+  // and will remain true for the life of the component
+  const isControlled: boolean = useMemo(() => {
+    return isControlled || !isUndefined(valueProp);
+  }, [valueProp]);
+  const wasControlled = usePrevious(isControlled);
+
+  useEffect(() => {
+    if (isUndefined(isControlled) || isUndefined(wasControlled)) return;
+
+    if (isControlled !== wasControlled) {
+      const err = `WARN: A component changed from ${
+        wasControlled ? 'controlled' : 'uncontrolled'
+      } to ${
+        isControlled ? 'controlled' : 'uncontrolled'
+      }. This can cause issues with React states. ${
+        isControlled
+          ? 'To control a component but have an initially empty input, consider setting the `value` prop to `null`.'
+          : ''
+      }`;
+
+      consoleOnce.warn(err);
+    }
+  }, [isControlled, wasControlled]);
+
+  // We set the initial value to either the `value`
+  // or the temporary `initialValue` prop
+  const initialValue = useMemo(
+    () => (isControlled ? valueProp : initialProp),
+    [initialProp, isControlled, valueProp],
+  );
+
+  // Keep track of the internal value state
+  const [uncontrolledValue, setUncontrolledValue] = useState<T | undefined>(
+    initialValue,
+  );
+
+  // The returned value is wither the provided value prop
+  // or the uncontrolled value
+  const value = useMemo(
+    () => (isControlled ? valueProp : uncontrolledValue),
+    [isControlled, uncontrolledValue, valueProp],
+  );
+
+  // A wrapper around `handleChange` that fires a simulated event
+  const updateValue = (newVal: T | undefined) => {
+    if (!isControlled) {
+      setUncontrolledValue(newVal);
+    }
+
+    onChange?.(newVal);
+  };
+
+  return {
+    isControlled,
+    value,
+    updateValue,
+  };
+};

From 2f1d105a110cb69b2d71e9901cca985b924e0553 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 18 Sep 2023 17:32:05 -0400
Subject: [PATCH 090/351] add todo

---
 .../src/hooks/useControlledValue/useControlledValue.ts      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts b/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts
index e55d570c17..2d26b1ae72 100644
--- a/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts
+++ b/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts
@@ -1,9 +1,13 @@
 import { useEffect, useMemo, useState } from 'react';
 import isUndefined from 'lodash/isUndefined';
 
+import { usePrevious } from '@leafygreen-ui/hooks';
 import { consoleOnce } from '@leafygreen-ui/lib';
 
-import usePrevious from '../usePrevious';
+/**
+ * TODO: move this to `packages/hooks`
+ * https://jira.mongodb.org/browse/LG-3608
+ */
 
 interface ControlledValueReturnObject<T extends any> {
   /** Whether the value is controlled */

From 1ddcea2b9c47e992b6a64c9011755761329e3cdb Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 18 Sep 2023 17:49:44 -0400
Subject: [PATCH 091/351] revert default month

---
 packages/date-picker/src/DatePicker/DatePicker.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 4f89d1e3ce..d3a2b51fcb 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -59,7 +59,9 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       initialProp,
     );
 
-    const [displayMonth, setDisplayMonth] = useState<Date>(new Date());
+    const [displayMonth, setDisplayMonth] = useState<Date>(
+      valueProp ?? new Date(),
+    );
     const [isOpen, setOpen] = useState(false);
     const closeMenu = () => setOpen(false);
 

From 0fae2b95b1b4a8c21f9eb2716bfa87ea3077c12a Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 18 Sep 2023 18:05:57 -0400
Subject: [PATCH 092/351] fix ts

---
 .../src/Calendar/CalendarGrid/CalendarGrid.stories.tsx | 10 ++++++++--
 .../src/Calendar/MenuWrapper/MenuWrapper.tsx           |  5 ++++-
 .../src/DateInput/DateInputBox/DateInputBox.tsx        |  6 +++---
 .../src/DateInput/DateInputBox/DateInputBox.types.ts   |  2 +-
 .../date-picker/src/DatePicker/DatePicker.types.ts     |  4 +---
 .../DatePicker/DatePickerMenu/DatePickerMenu.types.ts  |  2 +-
 .../date-picker/src/hooks/useDateSegments/index.ts     |  4 +++-
 packages/date-picker/src/types.ts                      |  2 ++
 8 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index 030f3de991..22857a3994 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -6,12 +6,12 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
 import { Month } from '../../constants';
-import { Locales, TimeZones } from '../../testUtils';
 import {
   DatePickerContextProps,
   DatePickerProvider,
   useDatePickerContext,
 } from '../../DatePickerContext';
+import { Locales, TimeZones } from '../../testUtils';
 import { isTodayTZ } from '../../utils/isTodayTZ';
 import { CalendarCell } from '../CalendarCell/CalendarCell';
 
@@ -80,6 +80,7 @@ export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
     >
       {(day, i) => (
         <CalendarCell
+          aria-label="test"
           key={i}
           isCurrent={isTodayTZ(day, timeZone)}
           isHighlighted={hovered ? hovered === day?.toISOString() : false}
@@ -99,7 +100,12 @@ Generated.parameters = {
     args: {
       month: new Date(Date.UTC(2023, Month.August, 1)),
       children: (day: Date, i: number) => (
-        <CalendarCell key={i} isCurrent={false} isHighlighted={false}>
+        <CalendarCell
+          key={i}
+          aria-label="test"
+          isCurrent={false}
+          isHighlighted={false}
+        >
           {day?.getUTCDate()}
         </CalendarCell>
       ),
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
index 0080d1e940..330d65001a 100644
--- a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
+++ b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
@@ -10,7 +10,10 @@ import { menuStyles } from './MenuWrapper.styles';
 /**
  * A styled popover
  */
-export const MenuWrapper = forwardRef(
+export const MenuWrapper = forwardRef<
+  HTMLDivElement,
+  PopoverProps & HTMLElementProps<'div'>
+>(
   (
     { className, children, ...props }: PopoverProps & HTMLElementProps<'div'>,
     fwdRef,
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index e3e9b081c2..c4877e9bf6 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -69,7 +69,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     };
 
     // Keep track of each date segment
-    const { segments, setSegment } = useDateSegments(value, {
+    const { segments, setSegment } = useDateSegments(value ?? null, {
       onUpdate: onSegmentsUpdate,
     });
 
@@ -82,7 +82,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
         setSegment(segment, Number(newValue));
       };
 
-    const handleKeyDown: KeyboardEventHandler = ({ keyCode }) => {
+    const handleKeyDown: KeyboardEventHandler = ({ key }) => {
       /** moves the focused segment left or right */
       const moveFocus = (dir: 'left' | 'right') => {
         // TODO: check the position of the cursor before updating focus (see combobox)
@@ -114,7 +114,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
         }
       };
 
-      switch (keyCode) {
+      switch (key) {
         case keyMap.ArrowRight: {
           moveFocus('right');
           break;
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
index 75836b1526..b649a6b465 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
@@ -1,6 +1,6 @@
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
-import { DateType } from '../../DatePicker/DatePicker.types';
+import { DateType } from '../../types';
 
 export interface DateInputBoxProps
   extends Omit<HTMLElementProps<'div'>, 'onChange'> {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index 85956e1d9a..f82404d473 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -1,6 +1,4 @@
-import { BaseDatePickerProps } from '../types';
-
-export type DateType = Date | null;
+import { BaseDatePickerProps, DateType } from '../types';
 
 export interface DatePickerProps extends BaseDatePickerProps {
   /**
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
index 6a584b978f..d5de0982f2 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
@@ -2,7 +2,7 @@ import { HTMLElementProps } from '@leafygreen-ui/lib';
 import { PopoverProps } from '@leafygreen-ui/popover';
 import { PortalControlProps } from '@leafygreen-ui/popover';
 
-import { DateType } from '../DatePicker.types';
+import { DateType } from '../../types';
 
 export type DatePickerMenuProps = PortalControlProps &
   Pick<PopoverProps, 'refEl'> &
diff --git a/packages/date-picker/src/hooks/useDateSegments/index.ts b/packages/date-picker/src/hooks/useDateSegments/index.ts
index 39947ffbfa..12745c738f 100644
--- a/packages/date-picker/src/hooks/useDateSegments/index.ts
+++ b/packages/date-picker/src/hooks/useDateSegments/index.ts
@@ -8,6 +8,7 @@ import {
   DateSegmentsState,
   DateSegmentValue,
 } from '../../DateInput/DateInput.types';
+import { DateType } from '../../types';
 import { getSegmentsFromDate } from '../../utils/getSegmentsFromDate';
 
 type OnUpdateCallback = (value: DateSegmentsState) => void;
@@ -44,9 +45,10 @@ const dateSegmentsReducer = (
  */
 export const useDateSegments = (
   /** Provided date is relative to the client's time zone */
-  date: Date | null,
+  date: DateType,
   { onUpdate }: UseDateSegmentsOptions,
 ): UseDateSegmentsReturnValue => {
+  //
   const [segments, dispatch] = useReducer(
     dateSegmentsReducer,
     date,
diff --git a/packages/date-picker/src/types.ts b/packages/date-picker/src/types.ts
index 90bf6c20d5..5e900deffa 100644
--- a/packages/date-picker/src/types.ts
+++ b/packages/date-picker/src/types.ts
@@ -1,6 +1,8 @@
 import { DarkModeProps } from '@leafygreen-ui/lib';
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
+export type DateType = Date | null;
+
 export interface BaseDatePickerProps extends DarkModeProps {
   /**
    * A label for the input

From d23cd4c3017f7ae35a201c91d19e4bc386038ab7 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 19 Sep 2023 11:09:57 -0400
Subject: [PATCH 093/351] rename useControlledValue.setValue

---
 .../date-picker/src/DatePicker/DatePicker.tsx | 16 ++++++++------
 .../useControlledValue.spec.tsx               | 22 +++++++++----------
 .../useControlledValue/useControlledValue.ts  |  6 ++---
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index d3a2b51fcb..1ce4beda4b 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -52,8 +52,10 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
     const inputRef = useForwardedRef(fwdRef, null);
     const menuRef = useRef<HTMLDivElement>(null);
+    const [isOpen, setOpen] = useState(false);
+    const closeMenu = () => setOpen(false);
 
-    const { value, updateValue } = useControlledValue(
+    const { value, setValue } = useControlledValue(
       valueProp,
       onChangeProp,
       initialProp,
@@ -62,16 +64,14 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const [displayMonth, setDisplayMonth] = useState<Date>(
       valueProp ?? new Date(),
     );
-    const [isOpen, setOpen] = useState(false);
-    const closeMenu = () => setOpen(false);
 
-    const changeValue = (newVal: Date | null) => {
+    const updateValue = (newVal: Date | null) => {
       // if the new value is not the current month, update the month
       if (newVal && !isSameMonth(newVal, displayMonth)) {
         setDisplayMonth(setMonth(displayMonth, newVal.getMonth()));
       }
 
-      updateValue(newVal);
+      setValue(newVal);
     };
 
     useBackdropClick(closeMenu, [inputRef, menuRef], isOpen);
@@ -79,11 +79,13 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const handleInputChange: DatePickerInputProps['setValue'] = (
       inputVal: Date | null,
     ) => {
-      if (inputVal !== value) changeValue(inputVal);
+      if (inputVal !== value) {
+        updateValue(inputVal);
+      }
     };
 
     const handleCellClick: DatePickerMenuProps['onCellClick'] = cellValue => {
-      changeValue(cellValue);
+      updateValue(cellValue);
       setOpen(false);
     };
 
diff --git a/packages/date-picker/src/hooks/useControlledValue/useControlledValue.spec.tsx b/packages/date-picker/src/hooks/useControlledValue/useControlledValue.spec.tsx
index 7f3ad040d2..a1cec55d7e 100644
--- a/packages/date-picker/src/hooks/useControlledValue/useControlledValue.spec.tsx
+++ b/packages/date-picker/src/hooks/useControlledValue/useControlledValue.spec.tsx
@@ -92,16 +92,16 @@ describe('packages/hooks/useControlledValue', () => {
       expect(result.current.value).toBe('banana');
     });
 
-    test('provided handler is called within `updateValue`', () => {
+    test('provided handler is called within `setValue`', () => {
       const handler = jest.fn();
       const { result } = renderUseControlledValueHook<string>('apple', handler);
-      result.current.updateValue('banana');
+      result.current.setValue('banana');
       expect(handler).toHaveBeenCalledWith('banana');
     });
 
-    test('hook value does not change when `updateValue` is called', () => {
+    test('hook value does not change when `setValue` is called', () => {
       const { result } = renderUseControlledValueHook<string>('apple');
-      result.current.updateValue('banana');
+      result.current.setValue('banana');
       // value doesn't change unless we explicitly change it
       expect(result.current.value).toBe('apple');
     });
@@ -133,19 +133,19 @@ describe('packages/hooks/useControlledValue', () => {
       expect(current.value).toBe('apple');
     });
 
-    test('provided handler is called within `updateValue`', () => {
+    test('provided handler is called within `setValue`', () => {
       const handler = jest.fn();
       const {
         result: { current },
       } = renderUseControlledValueHook(undefined, handler);
 
-      current.updateValue('apple');
+      current.setValue('apple');
       expect(handler).toHaveBeenCalledWith('apple');
     });
 
-    test('updateValue updates the value', () => {
+    test('setValue updates the value', () => {
       const { result } = renderUseControlledValueHook<string>(undefined);
-      result.current.updateValue('banana');
+      result.current.setValue('banana');
       expect(result.current.value).toBe('banana');
     });
   });
@@ -160,14 +160,14 @@ describe('packages/hooks/useControlledValue', () => {
     }) => {
       const initialVal = '';
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      const { value, updateValue } = useControlledValue(
+      const { value, setValue } = useControlledValue(
         valueProp,
         handlerProp,
         initialVal,
       );
 
       const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
-        updateValue(e.target.value);
+        setValue(e.target.value);
       };
 
       return (
@@ -179,7 +179,7 @@ describe('packages/hooks/useControlledValue', () => {
           />
           <button
             data-testid="test-button"
-            onClick={() => updateValue('carrot')}
+            onClick={() => setValue('carrot')}
           />
         </>
       );
diff --git a/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts b/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts
index 2d26b1ae72..5b150e254c 100644
--- a/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts
+++ b/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts
@@ -20,7 +20,7 @@ interface ControlledValueReturnObject<T extends any> {
    * Either updates the uncontrolled value,
    * or calls the provided `onChange` callback
    */
-  updateValue: (newVal?: T, ...args: Array<any>) => void;
+  setValue: (newVal?: T, ...args: Array<any>) => void;
 }
 
 /**
@@ -80,7 +80,7 @@ export const useControlledValue = <T extends any>(
   );
 
   // A wrapper around `handleChange` that fires a simulated event
-  const updateValue = (newVal: T | undefined) => {
+  const setValue = (newVal: T | undefined) => {
     if (!isControlled) {
       setUncontrolledValue(newVal);
     }
@@ -91,6 +91,6 @@ export const useControlledValue = <T extends any>(
   return {
     isControlled,
     value,
-    updateValue,
+    setValue,
   };
 };

From c3bce6b4f9bd5af3d53d958f411c00fd932ab32b Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 19 Sep 2023 11:52:45 -0400
Subject: [PATCH 094/351] Adds segmentRefs to context

---
 .../DateInput/DateInputBox/DateInputBox.tsx   |  6 +-
 .../date-picker/src/DatePicker/DatePicker.tsx | 21 ++++--
 .../DatePickerInput/DatePickerInput.tsx       |  5 +-
 .../DatePickerInput/DatePickerInput.types.ts  |  3 +
 .../DatePickerContext/DatePickerContext.tsx   | 47 ++-----------
 .../DatePickerContext.types.ts                |  5 +-
 .../DatePickerContext.utils.ts                | 68 +++++++++++++++++++
 7 files changed, 101 insertions(+), 54 deletions(-)
 create mode 100644 packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index c4877e9bf6..d1dbccb5e1 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -2,7 +2,7 @@ import React, { KeyboardEventHandler } from 'react';
 import { isSameDay } from 'date-fns';
 
 import { cx } from '@leafygreen-ui/emotion';
-import { useDynamicRefs, useForwardedRef } from '@leafygreen-ui/hooks';
+import { useForwardedRef } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../DatePickerContext';
@@ -39,9 +39,9 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     { value, setValue, className, labelledBy, ...rest }: DateInputBoxProps,
     fwdRef,
   ) => {
-    const { dateFormat } = useDatePickerContext();
+    const { dateFormat, segmentRefs } = useDatePickerContext();
+
     const containerRef = useForwardedRef(fwdRef, null);
-    const segmentRefs = useDynamicRefs<HTMLInputElement>({ prefix: 'segment' });
 
     // Only used to track the _order_ of segments, not the value itself
     const formatParts = useFormatParts(dateFormat);
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 1ce4beda4b..336c665a7e 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -3,6 +3,7 @@ import { isSameMonth, setMonth } from 'date-fns';
 
 import {
   useBackdropClick,
+  useDynamicRefs,
   useForwardedRef,
   useIdAllocator,
 } from '@leafygreen-ui/hooks';
@@ -20,7 +21,7 @@ import { DatePickerMenu, DatePickerMenuProps } from './DatePickerMenu';
 
 /** Prop names that are in both DatePickerProps and DatePickerProviderProps */
 const contextPropNames: Array<
-  keyof Omit<DatePickerProviderProps, 'isOpen' | 'menuId'>
+  keyof DatePickerProviderProps & keyof DatePickerProps
 > = [
   'label',
   'dateFormat',
@@ -50,7 +51,12 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
   ) => {
     const [contextProps, restProps] = pickAndOmit(props, contextPropNames);
     const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
-    const inputRef = useForwardedRef(fwdRef, null);
+
+    const formFieldRef = useForwardedRef(fwdRef, null);
+    const inputBoxRef = useRef<HTMLDivElement>(null);
+    const segmentRefs = useDynamicRefs<HTMLInputElement>({ prefix: 'segment' });
+    console.assert(segmentRefs);
+
     const menuRef = useRef<HTMLDivElement>(null);
     const [isOpen, setOpen] = useState(false);
     const closeMenu = () => setOpen(false);
@@ -74,7 +80,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       setValue(newVal);
     };
 
-    useBackdropClick(closeMenu, [inputRef, menuRef], isOpen);
+    useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
 
     const handleInputChange: DatePickerInputProps['setValue'] = (
       inputVal: Date | null,
@@ -97,6 +103,10 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const handleInputClick: MouseEventHandler = () => {
       setOpen(true);
       // TODO: Set focus to appropriate segment
+      // if we clicked a specific segment, focus on that segment
+      // otherwise, check which segments are filled,
+      // if all are filled, focus the last one,
+      // if 1+ are empty, focus the first empty one
     };
 
     return (
@@ -105,10 +115,11 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           ...contextProps,
           isOpen,
           menuId,
+          segmentRefs,
         }}
       >
         <DatePickerInput
-          ref={inputRef}
+          ref={formFieldRef}
           value={value}
           setValue={handleInputChange}
           onClick={handleInputClick}
@@ -117,7 +128,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
         <DatePickerMenu
           ref={menuRef}
           id={menuId}
-          refEl={inputRef}
+          refEl={formFieldRef}
           value={value}
           isOpen={isOpen}
           month={displayMonth}
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 44855cbd16..1f62360e6c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { useForwardedRef, useIdAllocator } from '@leafygreen-ui/hooks';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 
 import { DateFormField, DateInputBox } from '../../DateInput';
 import { useDatePickerContext } from '../../DatePickerContext';
@@ -14,7 +14,6 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     const descriptionId = useIdAllocator({ prefix: 'lg-date-description' });
     const errorId = useIdAllocator({ prefix: 'lg-date-description' });
     const inputId = useIdAllocator({ prefix: 'lg-date-input' });
-    const ref = useForwardedRef(fwdRef, null);
 
     const handleInputClick = onClick;
 
@@ -26,7 +25,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         labelId={labelId}
         descriptionId={descriptionId}
         errorId={errorId}
-        ref={ref}
+        ref={fwdRef}
         onInputClick={handleInputClick}
         {...rest}
       >
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index 209765cc6d..e4ee2afa7a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -4,5 +4,8 @@ import { DateInputBoxProps } from '../../DateInput';
 
 export interface DatePickerInputProps
   extends Pick<DateInputBoxProps, 'value' | 'setValue'> {
+  /**
+   * Click handler
+   */
   onClick?: MouseEventHandler;
 }
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index cdb525a569..36079cc5ed 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -1,35 +1,14 @@
 import React from 'react';
 import { createContext, PropsWithChildren, useContext } from 'react';
-import { isWithinInterval } from 'date-fns';
-import defaults from 'lodash/defaults';
-
-import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
-
-import { isValidDate } from '../utils/isValidDate';
-import { toDate } from '../utils/toDate';
 
 import {
   DatePickerContextProps,
   DatePickerProviderProps,
 } from './DatePickerContext.types';
-
-export const defaultDatePickerContext: DatePickerContextProps = {
-  label: '',
-  description: '',
-  dateFormat: 'iso8601',
-  timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-  min: new Date('12-31-1969'),
-  max: new Date('01-19-2038'),
-  isOpen: false,
-  isInRange: () => true,
-  disabled: false,
-  size: Size.Default,
-  state: 'unset',
-  errorMessage: '',
-  baseFontSize: BaseFontSize.Body1,
-  darkMode: false,
-  menuId: '',
-};
+import {
+  defaultDatePickerContext,
+  getContextProps,
+} from './DatePickerContext.utils';
 
 export const DatePickerContext = createContext<DatePickerContextProps>(
   defaultDatePickerContext,
@@ -39,24 +18,8 @@ export const DatePickerProvider = ({
   children,
   value,
 }: PropsWithChildren<{ value: DatePickerProviderProps }>) => {
-  const { min, max, ...rest } = value;
-  const providerValue: DatePickerContextProps = {
-    ...defaults(rest, defaultDatePickerContext),
-    min: isValidDate(min) ? toDate(min)! : defaultDatePickerContext.min,
-    max: isValidDate(max) ? toDate(max)! : defaultDatePickerContext.max,
-  };
-
-  const isInRange = (d?: Date | null): boolean =>
-    !!(
-      d &&
-      isWithinInterval(d, {
-        start: providerValue.min,
-        end: providerValue.max,
-      })
-    );
-
   return (
-    <DatePickerContext.Provider value={{ ...providerValue, isInRange }}>
+    <DatePickerContext.Provider value={getContextProps(value)}>
       {children}
     </DatePickerContext.Provider>
   );
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
index a2bc0f4b97..855c1f34f3 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
@@ -1,10 +1,13 @@
-import { BaseDatePickerProps } from 'src/types';
+import { useDynamicRefs } from '@leafygreen-ui/hooks';
+
+import { BaseDatePickerProps } from '../types';
 
 /** The props expected by the provider */
 export interface DatePickerProviderProps extends BaseDatePickerProps {
   /** Whether the calendar menu is open */
   isOpen: boolean;
   menuId: string;
+  segmentRefs: ReturnType<typeof useDynamicRefs<HTMLInputElement>>;
 }
 
 /**
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
new file mode 100644
index 0000000000..192a270d30
--- /dev/null
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
@@ -0,0 +1,68 @@
+import { isWithinInterval } from 'date-fns';
+import { defaults, defaultTo } from 'lodash';
+
+import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
+
+import { toDate } from '../utils/toDate';
+
+import {
+  DatePickerContextProps,
+  DatePickerProviderProps,
+} from './DatePickerContext.types';
+
+export const MIN_DATE = new Date('12-31-1969');
+export const MAX_DATE = new Date('01-19-2038');
+export const TZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+/** The default context value */
+export const defaultDatePickerContext: DatePickerContextProps = {
+  label: '',
+  description: '',
+  dateFormat: 'iso8601',
+  timeZone: TZ,
+  min: MIN_DATE,
+  max: MAX_DATE,
+  isOpen: false,
+  isInRange: () => true,
+  disabled: false,
+  size: Size.Default,
+  state: 'unset',
+  errorMessage: '',
+  baseFontSize: BaseFontSize.Body1,
+  darkMode: false,
+  menuId: '',
+  segmentRefs: () => undefined,
+};
+
+/**
+ * Returns an `isInRange` function,
+ * with `min` and `max` values in the closure
+ */
+export const getIsInRange =
+  (min: Date, max: Date) =>
+  (d?: Date | null): boolean =>
+    !!(
+      d &&
+      isWithinInterval(d, {
+        start: min,
+        end: max,
+      })
+    );
+
+/**
+ * Returns a valid `Context` value given optional provider props
+ */
+export const getContextProps = (
+  value: DatePickerProviderProps,
+): DatePickerContextProps => {
+  const { min, max, ...rest } = value;
+  const providerValue: DatePickerContextProps = {
+    ...defaults(rest, defaultDatePickerContext),
+    min: defaultTo(toDate(min), defaultDatePickerContext.min),
+    max: defaultTo(toDate(max), defaultDatePickerContext.max),
+  };
+
+  const isInRange = getIsInRange(providerValue.min, providerValue.max);
+
+  return { ...providerValue, isInRange };
+};

From 4a92152f800d8ce176f8fb1f5bdf010c75777f47 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 19 Sep 2023 14:20:58 -0400
Subject: [PATCH 095/351] updates useDynamicRefs internally. Adds tests

---
 packages/hooks/src/index.ts                   |  2 +-
 packages/hooks/src/useDynamicRefs.tsx         | 44 -------------
 packages/hooks/src/useDynamicRefs/index.ts    | 59 +++++++++++++++++
 .../useDynamicRefs/useDynamicRefs.spec.tsx    | 65 +++++++++++++++++++
 packages/hooks/tsconfig.json                  |  4 +-
 5 files changed, 128 insertions(+), 46 deletions(-)
 delete mode 100644 packages/hooks/src/useDynamicRefs.tsx
 create mode 100644 packages/hooks/src/useDynamicRefs/index.ts
 create mode 100644 packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx

diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index cf91339260..6a75da1e8f 100644
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -2,7 +2,7 @@ export { useAutoScroll } from './useAutoScroll';
 export { default as useAvailableSpace } from './useAvailableSpace';
 export { useBackdropClick } from './useBackdropClick';
 export { useControlledValue } from './useControlledValue';
-export { default as useDynamicRefs } from './useDynamicRefs';
+export { useDynamicRefs } from './useDynamicRefs';
 export { default as useEscapeKey } from './useEscapeKey';
 export { default as useEventListener } from './useEventListener';
 export { useForceRerender } from './useForceRerender';
diff --git a/packages/hooks/src/useDynamicRefs.tsx b/packages/hooks/src/useDynamicRefs.tsx
deleted file mode 100644
index a8f1e99c48..0000000000
--- a/packages/hooks/src/useDynamicRefs.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * From https://github.com/fitzmode/use-dynamic-refs/blob/master/src/index.tsx
- *
- * There's a bug in the original package
- *
- * Consider moving this to `/hooks`
- */
-
-import * as React from 'react';
-
-const map = new Map<string, React.RefObject<unknown>>();
-
-function getGetRef<T>(prefix = '') {
-  function getRef(): undefined;
-  function getRef(key: string): React.RefObject<T>;
-  function getRef(key?: string): React.RefObject<T> | undefined {
-    if (!key) {
-      console.error(`useDynamicRefs: Cannot get ref without key`);
-      return;
-    }
-
-    const fullKey = prefix + '-' + key;
-
-    if (map.get(fullKey)) {
-      return map.get(fullKey) as React.RefObject<T>;
-    }
-
-    const ref = React.createRef<T>();
-    map.set(fullKey, ref);
-    return ref;
-  }
-
-  return getRef;
-}
-
-function useDynamicRefs<T>({
-  prefix,
-}: {
-  prefix: string;
-}): (key?: string) => undefined | React.RefObject<T> {
-  return getGetRef<T>(prefix);
-}
-
-export default useDynamicRefs;
diff --git a/packages/hooks/src/useDynamicRefs/index.ts b/packages/hooks/src/useDynamicRefs/index.ts
new file mode 100644
index 0000000000..8331b9ee16
--- /dev/null
+++ b/packages/hooks/src/useDynamicRefs/index.ts
@@ -0,0 +1,59 @@
+/**
+ * Based on https://github.com/fitzmode/use-dynamic-refs/blob/master/src/index.tsx
+ */
+
+import * as React from 'react';
+
+import { consoleOnce } from '@leafygreen-ui/lib';
+
+export interface UseDynamicRefsArgs {
+  prefix: string;
+}
+
+export type RefMap<T> = Map<string, React.RefObject<T>>;
+
+export type DynamicRefGetter<T> = (
+  key?: string,
+) => undefined | React.RefObject<T>;
+
+// Create an object to track unique namespaced ref maps
+const refNameSpaces: Record<string, RefMap<any>> = {};
+
+/** Returns the namespace map for the given string */
+function getNamespace<T>(namespace: string): RefMap<T> {
+  if (refNameSpaces[namespace]) return refNameSpaces[namespace];
+  refNameSpaces[namespace] = new Map<string, React.RefObject<T>>();
+  return refNameSpaces[namespace];
+}
+
+/**
+ * @internal
+ */
+export function getGetRef<T>(namespace = ''): DynamicRefGetter<T> {
+  function getRef(): undefined;
+  function getRef(key: string): React.RefObject<T>;
+  function getRef(key?: string): React.RefObject<T> | undefined {
+    if (!key) {
+      consoleOnce.error(`useDynamicRefs: Cannot get ref without key`);
+      return;
+    }
+
+    const namespaceMap = getNamespace<T>(namespace);
+
+    if (namespaceMap.get(key)) {
+      return namespaceMap.get(key) as React.RefObject<T>;
+    }
+
+    const ref = React.createRef<T>();
+    namespaceMap.set(key, ref);
+    return ref;
+  }
+
+  return getRef;
+}
+
+export function useDynamicRefs<T>({
+  prefix,
+}: UseDynamicRefsArgs): DynamicRefGetter<T> {
+  return React.useMemo(() => getGetRef<T>(prefix), [prefix]);
+}
diff --git a/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx b/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
new file mode 100644
index 0000000000..66f4999fe2
--- /dev/null
+++ b/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
@@ -0,0 +1,65 @@
+import { renderHook } from '@testing-library/react';
+
+import { consoleOnce } from '@leafygreen-ui/lib';
+
+import { useDynamicRefs } from '.';
+
+describe('packages/hooks/useDynamicRefs', () => {
+  test('returns a ref getter function', () => {
+    const { result } = renderHook(() => useDynamicRefs({ prefix: '' }));
+    expect(typeof result.current).toBe('function');
+  });
+
+  test('returns identical ref getter when rerendered ', () => {
+    const { result, rerender } = renderHook(() =>
+      useDynamicRefs({ prefix: '' }),
+    );
+    const getter1 = result.current;
+    rerender({ prefix: '' });
+    expect(result.current).toBe(getter1);
+  });
+
+  test('returns unique getters when called multiple times', () => {
+    const { result: A } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
+    const { result: B } = renderHook(() => useDynamicRefs({ prefix: 'B' }));
+    expect(A.current).not.toBe(B.current);
+  });
+
+  describe('ref getter function', () => {
+    test('returns a ref when called with a key', async () => {
+      const { result } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
+      const ref = result.current('key');
+      expect(ref).toHaveProperty('current');
+    });
+
+    test('returns `undefined` when called without a key', () => {
+      const { result } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
+      const ref = result.current();
+      expect(ref).toBeUndefined();
+    });
+
+    test('logs an error when called without a key', () => {
+      const error = jest
+        .spyOn(consoleOnce, 'error')
+        .mockImplementation(() => {});
+      const { result } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
+      result.current();
+      expect(error).toHaveBeenCalled();
+    });
+
+    test('returns identical refs when called with the same key', async () => {
+      const { result } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
+      const ref1 = result.current('key');
+      const ref2 = result.current('key');
+      expect(ref1).toBe(ref2);
+    });
+
+    test('returns unique refs when unique getters are called with the same key', () => {
+      const { result: A } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
+      const { result: B } = renderHook(() => useDynamicRefs({ prefix: 'B' }));
+      const refA = A.current('key');
+      const refB = B.current('key');
+      expect(refA).not.toBe(refB);
+    });
+  });
+});
diff --git a/packages/hooks/tsconfig.json b/packages/hooks/tsconfig.json
index 9f2d965a63..2577812574 100644
--- a/packages/hooks/tsconfig.json
+++ b/packages/hooks/tsconfig.json
@@ -14,5 +14,7 @@
     "src/**/*"
   ],
   "exclude": ["**/*.spec.*", "**/*.story.*"],
-  "references": []
+  "references": [{
+    "path": "../lib"
+  }]
 }

From 3bac547de2b389433b121712183e24fb00beed8b Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 19 Sep 2023 16:08:17 -0400
Subject: [PATCH 096/351] Adds tests for uniqueness

---
 packages/hooks/src/useDynamicRefs/index.ts    | 40 ++++++++++++---
 .../useDynamicRefs/useDynamicRefs.spec.tsx    | 49 ++++++++++++++++---
 2 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/packages/hooks/src/useDynamicRefs/index.ts b/packages/hooks/src/useDynamicRefs/index.ts
index 8331b9ee16..8b772e1584 100644
--- a/packages/hooks/src/useDynamicRefs/index.ts
+++ b/packages/hooks/src/useDynamicRefs/index.ts
@@ -10,16 +10,19 @@ export interface UseDynamicRefsArgs {
   prefix: string;
 }
 
+/** The Map type for a given ref object  */
 export type RefMap<T> = Map<string, React.RefObject<T>>;
 
-export type DynamicRefGetter<T> = (
-  key?: string,
-) => undefined | React.RefObject<T>;
+export type DynamicRefNamespace<T> = Record<string, RefMap<T>>;
 
 // Create an object to track unique namespaced ref maps
-const refNameSpaces: Record<string, RefMap<any>> = {};
+const refNameSpaces: DynamicRefNamespace<any> = {};
 
-/** Returns the namespace map for the given string */
+/**
+ * Returns the namespace map for the given string
+ *
+ * @internal
+ */
 function getNamespace<T>(namespace: string): RefMap<T> {
   if (refNameSpaces[namespace]) return refNameSpaces[namespace];
   refNameSpaces[namespace] = new Map<string, React.RefObject<T>>();
@@ -29,7 +32,10 @@ function getNamespace<T>(namespace: string): RefMap<T> {
 /**
  * @internal
  */
-export function getGetRef<T>(namespace = ''): DynamicRefGetter<T> {
+export function getGetRef<T>(prefix: string) {
+  /**
+   * Returns a ref (or creates a new one) for the provided key
+   */
   function getRef(): undefined;
   function getRef(key: string): React.RefObject<T>;
   function getRef(key?: string): React.RefObject<T> | undefined {
@@ -38,7 +44,7 @@ export function getGetRef<T>(namespace = ''): DynamicRefGetter<T> {
       return;
     }
 
-    const namespaceMap = getNamespace<T>(namespace);
+    const namespaceMap = getNamespace<T>(prefix);
 
     if (namespaceMap.get(key)) {
       return namespaceMap.get(key) as React.RefObject<T>;
@@ -52,8 +58,26 @@ export function getGetRef<T>(namespace = ''): DynamicRefGetter<T> {
   return getRef;
 }
 
+/** The function signature for the function returned by `useDynamicRefs` */
+export type DynamicRefGetter<T> = ReturnType<typeof getGetRef<T>>;
+
+/** Maintain a map of all getters to ensure uniqueness */
+const getterMap = new Map<string, DynamicRefGetter<unknown>>();
+
+/**
+ * Returns a ref "getter" function for the specified namespace (prefix).
+ *
+ * Calling the ref "getter" with a key will return a ref for the given namespace and key
+ */
 export function useDynamicRefs<T>({
   prefix,
 }: UseDynamicRefsArgs): DynamicRefGetter<T> {
-  return React.useMemo(() => getGetRef<T>(prefix), [prefix]);
+  if (getterMap.get(prefix)) {
+    const getter = getterMap.get(prefix);
+    return getter as DynamicRefGetter<T>;
+  }
+
+  const getter = getGetRef<T>(prefix);
+  getterMap.set(prefix, getter);
+  return getter;
 }
diff --git a/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx b/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
index 66f4999fe2..f59801fcee 100644
--- a/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
+++ b/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
@@ -2,24 +2,30 @@ import { renderHook } from '@testing-library/react';
 
 import { consoleOnce } from '@leafygreen-ui/lib';
 
-import { useDynamicRefs } from '.';
+import { DynamicRefGetter, useDynamicRefs } from '.';
 
 describe('packages/hooks/useDynamicRefs', () => {
   test('returns a ref getter function', () => {
-    const { result } = renderHook(() => useDynamicRefs({ prefix: '' }));
+    const { result } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
     expect(typeof result.current).toBe('function');
   });
 
   test('returns identical ref getter when rerendered ', () => {
     const { result, rerender } = renderHook(() =>
-      useDynamicRefs({ prefix: '' }),
+      useDynamicRefs({ prefix: 'A' }),
     );
     const getter1 = result.current;
-    rerender({ prefix: '' });
+    rerender();
     expect(result.current).toBe(getter1);
   });
 
-  test('returns unique getters when called multiple times', () => {
+  test('returns identical getters when called with the same prefix', () => {
+    const { result: A } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
+    const { result: B } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
+    expect(A.current).toBe(B.current);
+  });
+
+  test('returns unique getters when called with different prefixes', () => {
     const { result: A } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
     const { result: B } = renderHook(() => useDynamicRefs({ prefix: 'B' }));
     expect(A.current).not.toBe(B.current);
@@ -34,7 +40,8 @@ describe('packages/hooks/useDynamicRefs', () => {
 
     test('returns `undefined` when called without a key', () => {
       const { result } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
-      const ref = result.current();
+      const getter: DynamicRefGetter<unknown> = result.current;
+      const ref = getter();
       expect(ref).toBeUndefined();
     });
 
@@ -54,6 +61,14 @@ describe('packages/hooks/useDynamicRefs', () => {
       expect(ref1).toBe(ref2);
     });
 
+    test('returns identical refs when the hook is called twice with the same prefix', async () => {
+      const { result: A } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
+      const { result: A2 } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
+      const ref1 = A.current('key');
+      const ref2 = A2.current('key');
+      expect(ref1).toBe(ref2);
+    });
+
     test('returns unique refs when unique getters are called with the same key', () => {
       const { result: A } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
       const { result: B } = renderHook(() => useDynamicRefs({ prefix: 'B' }));
@@ -62,4 +77,26 @@ describe('packages/hooks/useDynamicRefs', () => {
       expect(refA).not.toBe(refB);
     });
   });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  test.skip('TypeScript Error when called with different types', () => {
+    type Mutable<T> = {
+      -readonly [K in keyof T]: T[K];
+    };
+
+    const { result: A } = renderHook(() =>
+      useDynamicRefs<HTMLButtonElement>({ prefix: 'A' }),
+    );
+    const { result: B } = renderHook(() =>
+      useDynamicRefs<HTMLAnchorElement>({ prefix: 'A' }),
+    );
+    const refA = A.current('key');
+    const refB = B.current('key');
+
+    const newButton = document.createElement('button');
+    const newLink = document.createElement('a');
+
+    (refA.current as Mutable<typeof refA.current>) = newButton;
+    (refB.current as Mutable<typeof refB.current>) = newLink;
+  });
 });

From df76e6bafefb6d0010d3b6c264a0f5b9aac8bfd6 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 19 Sep 2023 16:14:25 -0400
Subject: [PATCH 097/351] Create quiet-jokes-explain.md

---
 .changeset/quiet-jokes-explain.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/quiet-jokes-explain.md

diff --git a/.changeset/quiet-jokes-explain.md b/.changeset/quiet-jokes-explain.md
new file mode 100644
index 0000000000..dc1d4286c8
--- /dev/null
+++ b/.changeset/quiet-jokes-explain.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/hooks': patch
+---
+
+Improves inner workings and adds tests to `useDynamicRefs`

From 309b23e5cc7b79828b222672c8b056fdb8df41c4 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 19 Sep 2023 17:05:08 -0400
Subject: [PATCH 098/351] improves uniqueness checks

---
 packages/hooks/src/useDynamicRefs/index.ts    | 65 ++++++++--------
 .../useDynamicRefs/useDynamicRefs.spec.tsx    | 76 ++++++++++---------
 2 files changed, 72 insertions(+), 69 deletions(-)

diff --git a/packages/hooks/src/useDynamicRefs/index.ts b/packages/hooks/src/useDynamicRefs/index.ts
index 8b772e1584..75f3566b9c 100644
--- a/packages/hooks/src/useDynamicRefs/index.ts
+++ b/packages/hooks/src/useDynamicRefs/index.ts
@@ -13,26 +13,26 @@ export interface UseDynamicRefsArgs {
 /** The Map type for a given ref object  */
 export type RefMap<T> = Map<string, React.RefObject<T>>;
 
-export type DynamicRefNamespace<T> = Record<string, RefMap<T>>;
-
-// Create an object to track unique namespaced ref maps
-const refNameSpaces: DynamicRefNamespace<any> = {};
+// export type DynamicRefNamespace<T> = Record<string, RefMap<T>>;
+
+// // Create an object to track unique namespaced ref maps
+// const refNameSpaces: DynamicRefNamespace<any> = {};
+
+// /**
+//  * Returns the namespace map for the given string
+//  *
+//  * @internal
+//  */
+// function getNamespace<T>(namespace: string): RefMap<T> {
+//   if (refNameSpaces[namespace]) return refNameSpaces[namespace];
+//   refNameSpaces[namespace] = new Map<string, React.RefObject<T>>();
+//   return refNameSpaces[namespace];
+// }
 
 /**
- * Returns the namespace map for the given string
- *
  * @internal
  */
-function getNamespace<T>(namespace: string): RefMap<T> {
-  if (refNameSpaces[namespace]) return refNameSpaces[namespace];
-  refNameSpaces[namespace] = new Map<string, React.RefObject<T>>();
-  return refNameSpaces[namespace];
-}
-
-/**
- * @internal
- */
-export function getGetRef<T>(prefix: string) {
+export function getGetRef<T>(refMap: RefMap<T>) {
   /**
    * Returns a ref (or creates a new one) for the provided key
    */
@@ -44,14 +44,12 @@ export function getGetRef<T>(prefix: string) {
       return;
     }
 
-    const namespaceMap = getNamespace<T>(prefix);
-
-    if (namespaceMap.get(key)) {
-      return namespaceMap.get(key) as React.RefObject<T>;
+    if (refMap.get(key)) {
+      return refMap.get(key) as React.RefObject<T>;
     }
 
     const ref = React.createRef<T>();
-    namespaceMap.set(key, ref);
+    refMap.set(key, ref);
     return ref;
   }
 
@@ -61,23 +59,22 @@ export function getGetRef<T>(prefix: string) {
 /** The function signature for the function returned by `useDynamicRefs` */
 export type DynamicRefGetter<T> = ReturnType<typeof getGetRef<T>>;
 
-/** Maintain a map of all getters to ensure uniqueness */
-const getterMap = new Map<string, DynamicRefGetter<unknown>>();
-
 /**
  * Returns a ref "getter" function for the specified namespace (prefix).
  *
  * Calling the ref "getter" with a key will return a ref for the given namespace and key
  */
-export function useDynamicRefs<T>({
-  prefix,
-}: UseDynamicRefsArgs): DynamicRefGetter<T> {
-  if (getterMap.get(prefix)) {
-    const getter = getterMap.get(prefix);
-    return getter as DynamicRefGetter<T>;
-  }
+export function useDynamicRefs<T>(
+  args?: UseDynamicRefsArgs,
+): DynamicRefGetter<T> {
+  const prefix = args?.prefix;
+
+  const getRef = React.useMemo(() => {
+    const refMap: RefMap<T> = new Map<string, React.RefObject<T>>();
+    const getter = getGetRef<T>(refMap);
+    return getter;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [prefix]);
 
-  const getter = getGetRef<T>(prefix);
-  getterMap.set(prefix, getter);
-  return getter;
+  return getRef;
 }
diff --git a/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx b/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
index f59801fcee..9270d59487 100644
--- a/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
+++ b/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 
 import { consoleOnce } from '@leafygreen-ui/lib';
 
@@ -10,19 +10,18 @@ describe('packages/hooks/useDynamicRefs', () => {
     expect(typeof result.current).toBe('function');
   });
 
-  test('returns identical ref getter when rerendered ', () => {
-    const { result, rerender } = renderHook(() =>
-      useDynamicRefs({ prefix: 'A' }),
-    );
-    const getter1 = result.current;
+  test('returns identical getter when rerendered ', () => {
+    const { result, rerender } = renderHook(v => useDynamicRefs(v), {
+      initialProps: { prefix: 'A' },
+    });
     rerender();
-    expect(result.current).toBe(getter1);
+    expect(result.all[0]).toBe(result.all[1]);
   });
 
-  test('returns identical getters when called with the same prefix', () => {
+  test('returns unique getters when called with the same prefix', () => {
     const { result: A } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
     const { result: B } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
-    expect(A.current).toBe(B.current);
+    expect(A.current).not.toBe(B.current);
   });
 
   test('returns unique getters when called with different prefixes', () => {
@@ -31,6 +30,14 @@ describe('packages/hooks/useDynamicRefs', () => {
     expect(A.current).not.toBe(B.current);
   });
 
+  test('returns unique getters when rerendered with a different prefix', () => {
+    const { result, rerender } = renderHook(v => useDynamicRefs(v), {
+      initialProps: { prefix: 'A' },
+    });
+    rerender({ prefix: 'B' });
+    expect(result.all[0]).not.toBe(result.all[1]);
+  });
+
   describe('ref getter function', () => {
     test('returns a ref when called with a key', async () => {
       const { result } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
@@ -54,19 +61,30 @@ describe('packages/hooks/useDynamicRefs', () => {
       expect(error).toHaveBeenCalled();
     });
 
-    test('returns identical refs when called with the same key', async () => {
+    test('returns identical refs when called with the same key', () => {
       const { result } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
       const ref1 = result.current('key');
       const ref2 = result.current('key');
       expect(ref1).toBe(ref2);
     });
 
-    test('returns identical refs when the hook is called twice with the same prefix', async () => {
-      const { result: A } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
+    test('returns identical refs when rerendered', () => {
+      const { result, rerender } = renderHook(v => useDynamicRefs(v), {
+        initialProps: { prefix: 'A' },
+      });
+      const ref1 = result.current('key');
+      rerender();
+      const ref2 = result.current('key');
+      expect(ref1).toBe(ref2);
+    });
+
+    test('returns unique refs when the hook is called twice with the same prefix', () => {
+      // This avoids collisions
+      const { result: A1 } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
       const { result: A2 } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
-      const ref1 = A.current('key');
+      const ref1 = A1.current('key');
       const ref2 = A2.current('key');
-      expect(ref1).toBe(ref2);
+      expect(ref1).not.toBe(ref2);
     });
 
     test('returns unique refs when unique getters are called with the same key', () => {
@@ -76,27 +94,15 @@ describe('packages/hooks/useDynamicRefs', () => {
       const refB = B.current('key');
       expect(refA).not.toBe(refB);
     });
-  });
-
-  // eslint-disable-next-line jest/no-disabled-tests
-  test.skip('TypeScript Error when called with different types', () => {
-    type Mutable<T> = {
-      -readonly [K in keyof T]: T[K];
-    };
-
-    const { result: A } = renderHook(() =>
-      useDynamicRefs<HTMLButtonElement>({ prefix: 'A' }),
-    );
-    const { result: B } = renderHook(() =>
-      useDynamicRefs<HTMLAnchorElement>({ prefix: 'A' }),
-    );
-    const refA = A.current('key');
-    const refB = B.current('key');
 
-    const newButton = document.createElement('button');
-    const newLink = document.createElement('a');
-
-    (refA.current as Mutable<typeof refA.current>) = newButton;
-    (refB.current as Mutable<typeof refB.current>) = newLink;
+    test('returns unique refs when rerendered with a different prefix', () => {
+      const { result, rerender } = renderHook(v => useDynamicRefs(v), {
+        initialProps: { prefix: 'A' },
+      });
+      const ref1 = result.current('key');
+      rerender({ prefix: 'B' });
+      const ref2 = result.current('key');
+      expect(ref1).not.toBe(ref2);
+    });
   });
 });

From 77568e832fed3c2fbb4d7ba1e057f7fbfa5188bb Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 19 Sep 2023 17:09:49 -0400
Subject: [PATCH 099/351] adds comments. Updates changeset

---
 .changeset/quiet-jokes-explain.md                        | 3 ++-
 packages/hooks/src/useDynamicRefs/index.ts               | 2 +-
 .../hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx     | 9 +++++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/.changeset/quiet-jokes-explain.md b/.changeset/quiet-jokes-explain.md
index dc1d4286c8..1a4b64a82b 100644
--- a/.changeset/quiet-jokes-explain.md
+++ b/.changeset/quiet-jokes-explain.md
@@ -2,4 +2,5 @@
 '@leafygreen-ui/hooks': patch
 ---
 
-Improves inner workings and adds tests to `useDynamicRefs`
+- Makes `useDynamicRefs` `prefix` argument optional 
+  - Adds tests to `useDynamicRefs`
diff --git a/packages/hooks/src/useDynamicRefs/index.ts b/packages/hooks/src/useDynamicRefs/index.ts
index 75f3566b9c..684a18b3e4 100644
--- a/packages/hooks/src/useDynamicRefs/index.ts
+++ b/packages/hooks/src/useDynamicRefs/index.ts
@@ -40,7 +40,7 @@ export function getGetRef<T>(refMap: RefMap<T>) {
   function getRef(key: string): React.RefObject<T>;
   function getRef(key?: string): React.RefObject<T> | undefined {
     if (!key) {
-      consoleOnce.error(`useDynamicRefs: Cannot get ref without key`);
+      consoleOnce.error('`useDynamicRefs`: Cannot get ref without key');
       return;
     }
 
diff --git a/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx b/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
index 9270d59487..19c22a3b65 100644
--- a/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
+++ b/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
@@ -19,6 +19,7 @@ describe('packages/hooks/useDynamicRefs', () => {
   });
 
   test('returns unique getters when called with the same prefix', () => {
+    // to prevent collisions
     const { result: A } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
     const { result: B } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
     expect(A.current).not.toBe(B.current);
@@ -30,7 +31,8 @@ describe('packages/hooks/useDynamicRefs', () => {
     expect(A.current).not.toBe(B.current);
   });
 
-  test('returns unique getters when rerendered with a different prefix', () => {
+  test('returns unique getters when re-rendered with a different prefix', () => {
+    // This is an edge-case, but this is the behavior we want if it happens
     const { result, rerender } = renderHook(v => useDynamicRefs(v), {
       initialProps: { prefix: 'A' },
     });
@@ -58,7 +60,9 @@ describe('packages/hooks/useDynamicRefs', () => {
         .mockImplementation(() => {});
       const { result } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
       result.current();
-      expect(error).toHaveBeenCalled();
+      expect(error).toHaveBeenCalledWith(
+        expect.stringContaining('Cannot get ref without key'),
+      );
     });
 
     test('returns identical refs when called with the same key', () => {
@@ -96,6 +100,7 @@ describe('packages/hooks/useDynamicRefs', () => {
     });
 
     test('returns unique refs when rerendered with a different prefix', () => {
+      // edge-case
       const { result, rerender } = renderHook(v => useDynamicRefs(v), {
         initialProps: { prefix: 'A' },
       });

From 3e21aaebe50ee8d16ad71efd5649d93498695e5f Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 19 Sep 2023 17:10:27 -0400
Subject: [PATCH 100/351] rm dead code

---
 packages/hooks/src/useDynamicRefs/index.ts | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/packages/hooks/src/useDynamicRefs/index.ts b/packages/hooks/src/useDynamicRefs/index.ts
index 684a18b3e4..e249f1da74 100644
--- a/packages/hooks/src/useDynamicRefs/index.ts
+++ b/packages/hooks/src/useDynamicRefs/index.ts
@@ -13,22 +13,6 @@ export interface UseDynamicRefsArgs {
 /** The Map type for a given ref object  */
 export type RefMap<T> = Map<string, React.RefObject<T>>;
 
-// export type DynamicRefNamespace<T> = Record<string, RefMap<T>>;
-
-// // Create an object to track unique namespaced ref maps
-// const refNameSpaces: DynamicRefNamespace<any> = {};
-
-// /**
-//  * Returns the namespace map for the given string
-//  *
-//  * @internal
-//  */
-// function getNamespace<T>(namespace: string): RefMap<T> {
-//   if (refNameSpaces[namespace]) return refNameSpaces[namespace];
-//   refNameSpaces[namespace] = new Map<string, React.RefObject<T>>();
-//   return refNameSpaces[namespace];
-// }
-
 /**
  * @internal
  */

From e90b3c386c66d8e5e63a17c9ebc6ce23ac7267d0 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 19 Sep 2023 18:59:20 -0400
Subject: [PATCH 101/351] Wraps DatePickerContents in context

---
 .../DateInput/DateInputBox/DateInputBox.tsx   |  21 ++--
 .../DateInputBox/DateInputBox.types.ts        |   8 ++
 .../src/DatePicker/DatePicker.spec.tsx        |   2 +-
 .../date-picker/src/DatePicker/DatePicker.tsx | 106 ++---------------
 .../DatePickerComponent.styles.ts}            |   1 +
 .../DatePickerContents/DatePickerContents.tsx | 112 ++++++++++++++++++
 .../DatePickerContents.types.ts               |   9 ++
 .../DatePicker/DatePickerContents/index.ts    |   1 +
 .../DatePickerInput/DatePickerInput.tsx       |   6 +-
 .../DatePickerInput/DatePickerInput.types.ts  |   8 ++
 .../DatePickerContext/DatePickerContext.tsx   |   4 +-
 .../DatePickerContext.types.ts                |   6 +-
 .../DatePickerContext.utils.ts                |  28 ++++-
 .../date-picker/src/hooks/useFormat/index.ts  |   4 +
 .../src/utils/getFormatParts/index.ts         |  38 ++++++
 .../src/utils/getSegmentsFromDate/index.ts    |   2 +-
 16 files changed, 241 insertions(+), 115 deletions(-)
 rename packages/date-picker/src/DatePicker/{DatePickerInput/DatePickerInput.styles.ts => DatePickerContents/DatePickerComponent.styles.ts} (98%)
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.types.ts
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerContents/index.ts
 create mode 100644 packages/date-picker/src/utils/getFormatParts/index.ts

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index d1dbccb5e1..5ccc9b8993 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -7,7 +7,6 @@ import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../DatePickerContext';
 import { useDateSegments } from '../../hooks/useDateSegments';
-import { useFormatParts } from '../../hooks/useFormat';
 import { getRemainingParts } from '../../utils/getRemainingParts';
 import { isValidSegmentName } from '../../utils/isValidSegment';
 import { newDateFromSegments } from '../../utils/newDateFromSegments';
@@ -36,16 +35,20 @@ import { DateInputBoxProps } from './DateInputBox.types';
  */
 export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
   (
-    { value, setValue, className, labelledBy, ...rest }: DateInputBoxProps,
+    {
+      value,
+      setValue,
+      className,
+      labelledBy,
+      segmentRefs,
+      ...rest
+    }: DateInputBoxProps,
     fwdRef,
   ) => {
-    const { dateFormat, segmentRefs } = useDatePickerContext();
+    const { formatParts } = useDatePickerContext();
 
     const containerRef = useForwardedRef(fwdRef, null);
 
-    // Only used to track the _order_ of segments, not the value itself
-    const formatParts = useFormatParts(dateFormat);
-
     /**
      * When a segment is updated, update the external value
      */
@@ -107,7 +110,9 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
         );
 
         // focus the element with that segment id
-        const nextRef = nextIndex ? segmentRefs(nextIndex.type) : null;
+        const nextRef = nextIndex
+          ? segmentRefs[nextIndex.type as DateSegment]
+          : null;
 
         if (nextRef) {
           nextRef.current?.focus();
@@ -148,7 +153,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
             return (
               <DateInputSegment
                 key={part.type}
-                ref={segmentRefs(part.type)}
+                ref={segmentRefs[part.type]}
                 segment={part.type}
                 value={segments[part.type]}
                 onChange={handleSegmentChange(part.type)}
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
index b649a6b465..6224f7baec 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
@@ -1,6 +1,8 @@
+import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 import { DateType } from '../../types';
+import { DateSegment } from '../DateInput.types';
 
 export interface DateInputBoxProps
   extends Omit<HTMLElementProps<'div'>, 'onChange'> {
@@ -19,4 +21,10 @@ export interface DateInputBoxProps
    * id of the labelling element
    */
   labelledBy?: string;
+
+  /** Refs  */
+  segmentRefs: Record<
+    DateSegment,
+    ReturnType<DynamicRefGetter<HTMLInputElement>>
+  >;
 }
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 126d8e6fe4..3ddc0a2062 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -20,7 +20,7 @@ describe('packages/date-picker', () => {
       .setSystemTime(new Date(Date.UTC(2023, Month.December, 26)));
   });
 
-  describe.only('Rendering', () => {
+  describe('Rendering', () => {
     /// Note: Most rendering tests handled by Chromatic
 
     test('spreads rest to formField', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 336c665a7e..5f13dc69a6 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -1,39 +1,14 @@
-import React, { forwardRef, MouseEventHandler, useRef, useState } from 'react';
-import { isSameMonth, setMonth } from 'date-fns';
+import React, { forwardRef, useState } from 'react';
 
-import {
-  useBackdropClick,
-  useDynamicRefs,
-  useForwardedRef,
-  useIdAllocator,
-} from '@leafygreen-ui/hooks';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 
-import {
-  DatePickerProvider,
-  DatePickerProviderProps,
-} from '../DatePickerContext';
+import { DatePickerProvider } from '../DatePickerContext';
+import { contextPropNames } from '../DatePickerContext/DatePickerContext.utils';
 import { useControlledValue } from '../hooks/useControlledValue';
 import { pickAndOmit } from '../utils/pickAndOmit';
 
 import { DatePickerProps } from './DatePicker.types';
-import { DatePickerInput, DatePickerInputProps } from './DatePickerInput';
-import { DatePickerMenu, DatePickerMenuProps } from './DatePickerMenu';
-
-/** Prop names that are in both DatePickerProps and DatePickerProviderProps */
-const contextPropNames: Array<
-  keyof DatePickerProviderProps & keyof DatePickerProps
-> = [
-  'label',
-  'dateFormat',
-  'timeZone',
-  'min',
-  'max',
-  'baseFontSize',
-  'disabled',
-  'size',
-  'state',
-  'errorMessage',
-];
+import { DatePickerContents } from './DatePickerContents';
 
 /**
  * LeafyGreen Date Picker component
@@ -51,91 +26,28 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
   ) => {
     const [contextProps, restProps] = pickAndOmit(props, contextPropNames);
     const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
-
-    const formFieldRef = useForwardedRef(fwdRef, null);
-    const inputBoxRef = useRef<HTMLDivElement>(null);
-    const segmentRefs = useDynamicRefs<HTMLInputElement>({ prefix: 'segment' });
-    console.assert(segmentRefs);
-
-    const menuRef = useRef<HTMLDivElement>(null);
     const [isOpen, setOpen] = useState(false);
-    const closeMenu = () => setOpen(false);
 
     const { value, setValue } = useControlledValue(
       valueProp,
       onChangeProp,
       initialProp,
     );
-
-    const [displayMonth, setDisplayMonth] = useState<Date>(
-      valueProp ?? new Date(),
-    );
-
-    const updateValue = (newVal: Date | null) => {
-      // if the new value is not the current month, update the month
-      if (newVal && !isSameMonth(newVal, displayMonth)) {
-        setDisplayMonth(setMonth(displayMonth, newVal.getMonth()));
-      }
-
-      setValue(newVal);
-    };
-
-    useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
-
-    const handleInputChange: DatePickerInputProps['setValue'] = (
-      inputVal: Date | null,
-    ) => {
-      if (inputVal !== value) {
-        updateValue(inputVal);
-      }
-    };
-
-    const handleCellClick: DatePickerMenuProps['onCellClick'] = cellValue => {
-      updateValue(cellValue);
-      setOpen(false);
-    };
-
-    const handleMonthChange: DatePickerMenuProps['onMonthChange'] =
-      newMonth => {
-        setDisplayMonth(newMonth);
-      };
-
-    const handleInputClick: MouseEventHandler = () => {
-      setOpen(true);
-      // TODO: Set focus to appropriate segment
-      // if we clicked a specific segment, focus on that segment
-      // otherwise, check which segments are filled,
-      // if all are filled, focus the last one,
-      // if 1+ are empty, focus the first empty one
-    };
-
     return (
       <DatePickerProvider
         value={{
           ...contextProps,
           isOpen,
+          setOpen,
           menuId,
-          segmentRefs,
         }}
       >
-        <DatePickerInput
-          ref={formFieldRef}
+        <DatePickerContents
+          ref={fwdRef}
           value={value}
-          setValue={handleInputChange}
-          onClick={handleInputClick}
+          setValue={setValue}
           {...restProps}
         />
-        <DatePickerMenu
-          ref={menuRef}
-          id={menuId}
-          refEl={formFieldRef}
-          value={value}
-          isOpen={isOpen}
-          month={displayMonth}
-          onCellClick={handleCellClick}
-          onMonthChange={handleMonthChange}
-          usePortal={true}
-        />
       </DatePickerProvider>
     );
   },
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.styles.ts b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerComponent.styles.ts
similarity index 98%
rename from packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.styles.ts
rename to packages/date-picker/src/DatePicker/DatePickerContents/DatePickerComponent.styles.ts
index 356c065c34..928608f58d 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.styles.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerComponent.styles.ts
@@ -1,3 +1,4 @@
+
 import { css } from '@leafygreen-ui/emotion';
 
 export const baseStyles = css``;
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
new file mode 100644
index 0000000000..c60ba87d43
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
@@ -0,0 +1,112 @@
+import React, { forwardRef, MouseEventHandler, useRef, useState } from 'react';
+import { isSameMonth, setMonth } from 'date-fns';
+
+import {
+  useBackdropClick,
+  useDynamicRefs,
+  useForwardedRef,
+} from '@leafygreen-ui/hooks';
+
+import { DateSegment } from '../../DateInput/DateInput.types';
+import { useDatePickerContext } from '../../DatePickerContext';
+import { DatePickerInput, DatePickerInputProps } from '../DatePickerInput';
+import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
+
+import { DatePickerContentsProps } from './DatePickerContents.types';
+
+export const DatePickerContents = forwardRef<
+  HTMLDivElement,
+  DatePickerContentsProps
+>(({ value, setValue, ...rest }: DatePickerContentsProps, fwdRef) => {
+  const { isOpen, setOpen, formatParts, menuId } = useDatePickerContext();
+  const closeMenu = () => setOpen(false);
+
+  const getSegmentRef = useDynamicRefs<HTMLInputElement>({
+    prefix: 'segment',
+  });
+
+  const segmentRefs: Record<DateSegment, ReturnType<typeof getSegmentRef>> = {
+    day: getSegmentRef('day') || undefined,
+    month: getSegmentRef('month') || undefined,
+    year: getSegmentRef('year') || undefined,
+  };
+
+  const formFieldRef = useForwardedRef(fwdRef, null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const [displayMonth, setDisplayMonth] = useState<Date>(value ?? new Date());
+
+  const updateValue = (newVal: Date | null) => {
+    // if the new value is not the current month, update the month
+    if (newVal && !isSameMonth(newVal, displayMonth)) {
+      setDisplayMonth(setMonth(displayMonth, newVal.getMonth()));
+    }
+
+    setValue(newVal);
+  };
+
+  useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
+
+  const handleInputChange: DatePickerInputProps['setValue'] = (
+    inputVal: Date | null,
+  ) => {
+    if (inputVal !== value) {
+      updateValue(inputVal);
+    }
+  };
+
+  const handleCellClick: DatePickerMenuProps['onCellClick'] = cellValue => {
+    updateValue(cellValue);
+    setOpen(false);
+  };
+
+  const handleMonthChange: DatePickerMenuProps['onMonthChange'] = newMonth => {
+    setDisplayMonth(newMonth);
+  };
+
+  const handleInputClick: MouseEventHandler<HTMLElement> = e => {
+    setOpen(true);
+    // TODO: Set focus to appropriate segment
+
+    if (
+      !Object.values(segmentRefs)
+        .map(r => r.current)
+        .includes(e.target as HTMLInputElement)
+    ) {
+      // eslint-disable-next-line no-console
+      console.log(formatParts);
+
+      // otherwise, check which segments are filled,
+      // if all are filled, focus the last one,
+      // if 1+ are empty, focus the first empty one
+    }
+    // otherwise, we clicked a specific segment,
+    // so we focus on that segment (default behavior)
+  };
+
+  return (
+    <>
+      <DatePickerInput
+        ref={formFieldRef}
+        value={value}
+        setValue={handleInputChange}
+        onClick={handleInputClick}
+        segmentRefs={segmentRefs}
+        {...rest}
+      />
+      <DatePickerMenu
+        ref={menuRef}
+        id={menuId}
+        refEl={formFieldRef}
+        value={value}
+        isOpen={isOpen}
+        month={displayMonth}
+        onCellClick={handleCellClick}
+        onMonthChange={handleMonthChange}
+        usePortal={true}
+      />
+    </>
+  );
+});
+
+DatePickerContents.displayName = 'DatePickerContents';
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.types.ts b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.types.ts
new file mode 100644
index 0000000000..0a0eee5565
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.types.ts
@@ -0,0 +1,9 @@
+import { contextPropNames } from '../../DatePickerContext/DatePickerContext.utils';
+import { useControlledValue } from '../../hooks/useControlledValue';
+import { DateType } from '../../types';
+import { DatePickerProps } from '../DatePicker.types';
+
+export interface DatePickerContentsProps
+  extends Omit<DatePickerProps, (typeof contextPropNames)[number]> {
+  setValue: ReturnType<typeof useControlledValue<DateType>>['setValue'];
+}
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/index.ts b/packages/date-picker/src/DatePicker/DatePickerContents/index.ts
new file mode 100644
index 0000000000..f81b0a36dc
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/index.ts
@@ -0,0 +1 @@
+export { DatePickerContents } from './DatePickerContents';
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 1f62360e6c..89db9fb748 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -8,7 +8,10 @@ import { useDatePickerContext } from '../../DatePickerContext';
 import { DatePickerInputProps } from './DatePickerInput.types';
 
 export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
-  ({ value, setValue, onClick, ...rest }: DatePickerInputProps, fwdRef) => {
+  (
+    { value, setValue, onClick, segmentRefs, ...rest }: DatePickerInputProps,
+    fwdRef,
+  ) => {
     const { label, timeZone } = useDatePickerContext();
     const labelId = useIdAllocator({ prefix: 'lg-date-label' });
     const descriptionId = useIdAllocator({ prefix: 'lg-date-description' });
@@ -34,6 +37,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           setValue={setValue}
           id={inputId}
           labelledBy={labelId}
+          segmentRefs={segmentRefs}
         />
       </DateFormField>
     );
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index e4ee2afa7a..31070b7d49 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -1,6 +1,9 @@
 import { MouseEventHandler } from 'react';
 
+import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
+
 import { DateInputBoxProps } from '../../DateInput';
+import { DateSegment } from '../../DateInput/DateInput.types';
 
 export interface DatePickerInputProps
   extends Pick<DateInputBoxProps, 'value' | 'setValue'> {
@@ -8,4 +11,9 @@ export interface DatePickerInputProps
    * Click handler
    */
   onClick?: MouseEventHandler;
+
+  segmentRefs: Record<
+    DateSegment,
+    ReturnType<DynamicRefGetter<HTMLInputElement>>
+  >;
 }
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index 36079cc5ed..414761a7a0 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -18,8 +18,10 @@ export const DatePickerProvider = ({
   children,
   value,
 }: PropsWithChildren<{ value: DatePickerProviderProps }>) => {
+  const contextValue = getContextProps(value);
+
   return (
-    <DatePickerContext.Provider value={getContextProps(value)}>
+    <DatePickerContext.Provider value={contextValue}>
       {children}
     </DatePickerContext.Provider>
   );
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
index 855c1f34f3..fa965d6edf 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
@@ -1,13 +1,11 @@
-import { useDynamicRefs } from '@leafygreen-ui/hooks';
-
 import { BaseDatePickerProps } from '../types';
 
 /** The props expected by the provider */
 export interface DatePickerProviderProps extends BaseDatePickerProps {
   /** Whether the calendar menu is open */
   isOpen: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   menuId: string;
-  segmentRefs: ReturnType<typeof useDynamicRefs<HTMLInputElement>>;
 }
 
 /**
@@ -25,4 +23,6 @@ export interface DatePickerContextProps
    * Returns whether the given date is within the component's min/max dates
    */
   isInRange: (d?: Date | null) => boolean;
+
+  formatParts?: Array<Intl.DateTimeFormatPart>;
 }
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
index 192a270d30..a3f52b43e5 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
@@ -1,8 +1,11 @@
 import { isWithinInterval } from 'date-fns';
-import { defaults, defaultTo } from 'lodash';
+import defaults from 'lodash/defaults';
+import defaultTo from 'lodash/defaultTo';
 
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
+import { BaseDatePickerProps } from '../types';
+import { getFormatParts } from '../utils/getFormatParts';
 import { toDate } from '../utils/toDate';
 
 import {
@@ -14,6 +17,22 @@ export const MIN_DATE = new Date('12-31-1969');
 export const MAX_DATE = new Date('01-19-2038');
 export const TZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
+/** Prop names that are in both DatePickerProps and DatePickerProviderProps */
+export const contextPropNames: Array<
+  keyof DatePickerProviderProps & keyof BaseDatePickerProps
+> = [
+  'label',
+  'dateFormat',
+  'timeZone',
+  'min',
+  'max',
+  'baseFontSize',
+  'disabled',
+  'size',
+  'state',
+  'errorMessage',
+];
+
 /** The default context value */
 export const defaultDatePickerContext: DatePickerContextProps = {
   label: '',
@@ -23,6 +42,7 @@ export const defaultDatePickerContext: DatePickerContextProps = {
   min: MIN_DATE,
   max: MAX_DATE,
   isOpen: false,
+  setOpen: () => {},
   isInRange: () => true,
   disabled: false,
   size: Size.Default,
@@ -31,7 +51,6 @@ export const defaultDatePickerContext: DatePickerContextProps = {
   baseFontSize: BaseFontSize.Body1,
   darkMode: false,
   menuId: '',
-  segmentRefs: () => undefined,
 };
 
 /**
@@ -64,5 +83,8 @@ export const getContextProps = (
 
   const isInRange = getIsInRange(providerValue.min, providerValue.max);
 
-  return { ...providerValue, isInRange };
+  // Only used to track the _order_ of segments, not the value itself
+  const formatParts = getFormatParts(providerValue.dateFormat);
+
+  return { ...providerValue, isInRange, formatParts };
 };
diff --git a/packages/date-picker/src/hooks/useFormat/index.ts b/packages/date-picker/src/hooks/useFormat/index.ts
index 42c08fdf7d..22874d4887 100644
--- a/packages/date-picker/src/hooks/useFormat/index.ts
+++ b/packages/date-picker/src/hooks/useFormat/index.ts
@@ -16,6 +16,7 @@ const IsoFormatParts: Array<Intl.DateTimeFormatPart> = [
 
 /**
  * Hook that returns an Intl.DateTimeFormat object for the provided format string
+ * @deprecated
  */
 export const useFormatter = (format: string) => {
   const [formatter, setFormatter] = useState<Intl.DateTimeFormat | undefined>(
@@ -35,6 +36,9 @@ export const useFormatter = (format: string) => {
   return formatter;
 };
 
+/**
+ * @deprecated
+ */
 export const useFormatParts = (
   format: string,
 ): Array<Intl.DateTimeFormatPart> | undefined => {
diff --git a/packages/date-picker/src/utils/getFormatParts/index.ts b/packages/date-picker/src/utils/getFormatParts/index.ts
new file mode 100644
index 0000000000..bdacb1f0b5
--- /dev/null
+++ b/packages/date-picker/src/utils/getFormatParts/index.ts
@@ -0,0 +1,38 @@
+import { isValidLocale } from '../../utils/isValidLocale';
+
+const now = new Date();
+const ISO = 'iso8601';
+const IsoFormatParts: Array<Intl.DateTimeFormatPart> = [
+  { type: 'year', value: '' },
+  { type: 'literal', value: '-' },
+  { type: 'month', value: '' },
+  { type: 'literal', value: '-' },
+  { type: 'day', value: '' },
+];
+
+/**
+ * Returns an {@link Intl.DateTimeFormat} for the provided locale
+ */
+export const getFormatter = (locale: string) => {
+  const formatter: Intl.DateTimeFormat | undefined = isValidLocale(locale)
+    ? Intl.DateTimeFormat(locale)
+    : undefined;
+
+  return formatter;
+};
+
+/**
+ * Returns an array of {@link Intl.DateTimeFormatPart} for the provided locale
+ */
+export const getFormatParts = (
+  locale: string,
+): Array<Intl.DateTimeFormatPart> | undefined => {
+  if (locale === ISO) {
+    return IsoFormatParts;
+  }
+
+  const formatter = getFormatter(locale);
+  const formatParts = formatter?.formatToParts(now);
+
+  return formatParts;
+};
diff --git a/packages/date-picker/src/utils/getSegmentsFromDate/index.ts b/packages/date-picker/src/utils/getSegmentsFromDate/index.ts
index 57ba2ed6c2..db188ad9b4 100644
--- a/packages/date-picker/src/utils/getSegmentsFromDate/index.ts
+++ b/packages/date-picker/src/utils/getSegmentsFromDate/index.ts
@@ -1,4 +1,4 @@
-import { DateSegmentsState } from 'src/DateInput/DateInput.types';
+import { DateSegmentsState } from '../../DateInput/DateInput.types';
 
 /** Returns a single object with day, month & year segments */
 export const getSegmentsFromDate = (date: Date | null): DateSegmentsState => {

From bca77f98e3b42f4b23eef05c76fea8a5a55ce383 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 20 Sep 2023 11:41:36 -0400
Subject: [PATCH 102/351] adds segment focus functionality

---
 .../src/DatePicker/DatePicker.styles.ts       |  3 -
 .../DatePickerComponent.styles.ts             |  4 --
 .../DatePickerContents/DatePickerContents.tsx | 58 ++++++++++++++-----
 3 files changed, 44 insertions(+), 21 deletions(-)
 delete mode 100644 packages/date-picker/src/DatePicker/DatePicker.styles.ts
 delete mode 100644 packages/date-picker/src/DatePicker/DatePickerContents/DatePickerComponent.styles.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.styles.ts b/packages/date-picker/src/DatePicker/DatePicker.styles.ts
deleted file mode 100644
index 356c065c34..0000000000
--- a/packages/date-picker/src/DatePicker/DatePicker.styles.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { css } from '@leafygreen-ui/emotion';
-
-export const baseStyles = css``;
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerComponent.styles.ts b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerComponent.styles.ts
deleted file mode 100644
index 928608f58d..0000000000
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerComponent.styles.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-
-import { css } from '@leafygreen-ui/emotion';
-
-export const baseStyles = css``;
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
index c60ba87d43..798101b285 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
@@ -1,5 +1,6 @@
 import React, { forwardRef, MouseEventHandler, useRef, useState } from 'react';
 import { isSameMonth, setMonth } from 'date-fns';
+import last from 'lodash/last';
 
 import {
   useBackdropClick,
@@ -7,7 +8,7 @@ import {
   useForwardedRef,
 } from '@leafygreen-ui/hooks';
 
-import { DateSegment } from '../../DateInput/DateInput.types';
+import { DateSegment, isDateSegment } from '../../DateInput/DateInput.types';
 import { useDatePickerContext } from '../../DatePickerContext';
 import { DatePickerInput, DatePickerInputProps } from '../DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
@@ -66,19 +67,48 @@ export const DatePickerContents = forwardRef<
 
   const handleInputClick: MouseEventHandler<HTMLElement> = e => {
     setOpen(true);
-    // TODO: Set focus to appropriate segment
-
-    if (
-      !Object.values(segmentRefs)
-        .map(r => r.current)
-        .includes(e.target as HTMLInputElement)
-    ) {
-      // eslint-disable-next-line no-console
-      console.log(formatParts);
-
-      // otherwise, check which segments are filled,
-      // if all are filled, focus the last one,
-      // if 1+ are empty, focus the first empty one
+
+    if (!formatParts) {
+      return;
+    }
+
+    const segmentRefsArray = Object.values(segmentRefs).map(r => r.current);
+
+    // If we didn't explicitly click on an input segment...
+    if (!segmentRefsArray.includes(e.target as HTMLInputElement)) {
+      // filter out the literals from the format parts
+      const formatSegments = formatParts.filter(
+        part => part.type !== 'literal',
+      );
+
+      // Check which segments are filled,
+      if (segmentRefsArray.every(el => el?.value)) {
+        // if all are filled, focus the last one,
+        const keyOfLastSegment = (
+          last(formatSegments) as Intl.DateTimeFormatPart
+        ).type;
+
+        if (isDateSegment(keyOfLastSegment)) {
+          const lastSegmentRef = segmentRefs[keyOfLastSegment];
+          lastSegmentRef?.current?.focus();
+        }
+      } else {
+        // if 1+ are empty, focus the first empty one
+        const emptySegmentKeys = formatSegments
+          .map(p => p.type)
+          .filter(type => {
+            if (isDateSegment(type)) {
+              const element = segmentRefs[type];
+              return !element?.current?.value;
+            }
+          });
+        const firstEmptySegmentKey = emptySegmentKeys[0];
+
+        if (isDateSegment(firstEmptySegmentKey)) {
+          const firstEmptySegmentRef = segmentRefs[firstEmptySegmentKey];
+          firstEmptySegmentRef?.current?.focus();
+        }
+      }
     }
     // otherwise, we clicked a specific segment,
     // so we focus on that segment (default behavior)

From 3d8ab8645e072a2502b15b88efd00ba9e18fb5fd Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 20 Sep 2023 11:55:41 -0400
Subject: [PATCH 103/351] abstract helper focusRelevantSegment

---
 .../src/DatePicker/DatePicker.types.ts        |  8 +++
 .../DatePickerContents/DatePickerContents.tsx | 57 +++------------
 .../DatePicker/utils/focusRelevantSegment.ts  | 72 +++++++++++++++++++
 3 files changed, 89 insertions(+), 48 deletions(-)
 create mode 100644 packages/date-picker/src/DatePicker/utils/focusRelevantSegment.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index f82404d473..b3987dfcd8 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -1,5 +1,13 @@
+import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
+
+import { DateSegment } from '../DateInput/DateInput.types';
 import { BaseDatePickerProps, DateType } from '../types';
 
+export type SegmentRefs = Record<
+  DateSegment,
+  ReturnType<DynamicRefGetter<HTMLInputElement>>
+>;
+
 export interface DatePickerProps extends BaseDatePickerProps {
   /**
    * The selected date, given in UTC time
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
index 798101b285..52b7ca56ab 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef, MouseEventHandler, useRef, useState } from 'react';
 import { isSameMonth, setMonth } from 'date-fns';
-import last from 'lodash/last';
 
 import {
   useBackdropClick,
@@ -8,10 +7,11 @@ import {
   useForwardedRef,
 } from '@leafygreen-ui/hooks';
 
-import { DateSegment, isDateSegment } from '../../DateInput/DateInput.types';
 import { useDatePickerContext } from '../../DatePickerContext';
+import { SegmentRefs } from '../DatePicker.types';
 import { DatePickerInput, DatePickerInputProps } from '../DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
+import { focusRelevantSegment } from '../utils/focusRelevantSegment';
 
 import { DatePickerContentsProps } from './DatePickerContents.types';
 
@@ -26,7 +26,7 @@ export const DatePickerContents = forwardRef<
     prefix: 'segment',
   });
 
-  const segmentRefs: Record<DateSegment, ReturnType<typeof getSegmentRef>> = {
+  const segmentRefs: SegmentRefs = {
     day: getSegmentRef('day') || undefined,
     month: getSegmentRef('month') || undefined,
     year: getSegmentRef('year') || undefined,
@@ -65,53 +65,14 @@ export const DatePickerContents = forwardRef<
     setDisplayMonth(newMonth);
   };
 
-  const handleInputClick: MouseEventHandler<HTMLElement> = e => {
+  const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
     setOpen(true);
 
-    if (!formatParts) {
-      return;
-    }
-
-    const segmentRefsArray = Object.values(segmentRefs).map(r => r.current);
-
-    // If we didn't explicitly click on an input segment...
-    if (!segmentRefsArray.includes(e.target as HTMLInputElement)) {
-      // filter out the literals from the format parts
-      const formatSegments = formatParts.filter(
-        part => part.type !== 'literal',
-      );
-
-      // Check which segments are filled,
-      if (segmentRefsArray.every(el => el?.value)) {
-        // if all are filled, focus the last one,
-        const keyOfLastSegment = (
-          last(formatSegments) as Intl.DateTimeFormatPart
-        ).type;
-
-        if (isDateSegment(keyOfLastSegment)) {
-          const lastSegmentRef = segmentRefs[keyOfLastSegment];
-          lastSegmentRef?.current?.focus();
-        }
-      } else {
-        // if 1+ are empty, focus the first empty one
-        const emptySegmentKeys = formatSegments
-          .map(p => p.type)
-          .filter(type => {
-            if (isDateSegment(type)) {
-              const element = segmentRefs[type];
-              return !element?.current?.value;
-            }
-          });
-        const firstEmptySegmentKey = emptySegmentKeys[0];
-
-        if (isDateSegment(firstEmptySegmentKey)) {
-          const firstEmptySegmentRef = segmentRefs[firstEmptySegmentKey];
-          firstEmptySegmentRef?.current?.focus();
-        }
-      }
-    }
-    // otherwise, we clicked a specific segment,
-    // so we focus on that segment (default behavior)
+    focusRelevantSegment({
+      target,
+      formatParts,
+      segmentRefs,
+    });
   };
 
   return (
diff --git a/packages/date-picker/src/DatePicker/utils/focusRelevantSegment.ts b/packages/date-picker/src/DatePicker/utils/focusRelevantSegment.ts
new file mode 100644
index 0000000000..fa0a7984d2
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/utils/focusRelevantSegment.ts
@@ -0,0 +1,72 @@
+import isUndefined from 'lodash/isUndefined';
+import last from 'lodash/last';
+
+import { isDateSegment } from '../../DateInput/DateInput.types';
+import { DatePickerContextProps } from '../../DatePickerContext';
+import { SegmentRefs } from '../DatePicker.types';
+
+interface FocusRelevantSegmentArgs {
+  target: EventTarget;
+  formatParts: DatePickerContextProps['formatParts'];
+  segmentRefs: SegmentRefs;
+}
+
+/**
+ * Helper function that focuses the appropriate input segment
+ * given an event target and segment refs.
+ *
+ * 1) if the target was a segment, focus that segment
+ * 2) otherwise, if all segments are filled, focus the last one
+ * 3) but, if some segments are empty, focus the first empty one
+ */
+export const focusRelevantSegment = ({
+  target,
+  formatParts,
+  segmentRefs,
+}: FocusRelevantSegmentArgs): void => {
+  if (
+    isUndefined(target) ||
+    isUndefined(formatParts) ||
+    isUndefined(segmentRefs)
+  ) {
+    return;
+  }
+
+  const segmentRefsArray = Object.values(segmentRefs).map(r => r.current);
+
+  // If we didn't explicitly click on an input segment...
+  if (!segmentRefsArray.includes(target as HTMLInputElement)) {
+    // filter out the literals from the format parts
+    const formatSegments = formatParts.filter(part => part.type !== 'literal');
+
+    // Check which segments are filled,
+    if (segmentRefsArray.every(el => el?.value)) {
+      // if all are filled, focus the last one,
+      const keyOfLastSegment = (last(formatSegments) as Intl.DateTimeFormatPart)
+        .type;
+
+      if (isDateSegment(keyOfLastSegment)) {
+        const lastSegmentRef = segmentRefs[keyOfLastSegment];
+        lastSegmentRef?.current?.focus();
+      }
+    } else {
+      // if 1+ are empty, focus the first empty one
+      const emptySegmentKeys = formatSegments
+        .map(p => p.type)
+        .filter(type => {
+          if (isDateSegment(type)) {
+            const element = segmentRefs[type];
+            return !element?.current?.value;
+          }
+        });
+      const firstEmptySegmentKey = emptySegmentKeys[0];
+
+      if (isDateSegment(firstEmptySegmentKey)) {
+        const firstEmptySegmentRef = segmentRefs[firstEmptySegmentKey];
+        firstEmptySegmentRef?.current?.focus();
+      }
+    }
+  }
+  // otherwise, we clicked a specific segment,
+  // so we focus on that segment (default behavior)
+};

From 21296eeac4fc00ce204a67b19bf3cb5fd6ec5779 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 20 Sep 2023 12:05:36 -0400
Subject: [PATCH 104/351] fixes failing input box tests

---
 .../DateInputBox/DateInputBox.spec.tsx        | 20 +++++++++++++++----
 .../DateInputBox/DateInputBox.types.ts        | 10 ++++++----
 .../src/DatePicker/DatePicker.types.ts        |  8 --------
 .../DatePickerContents/DatePickerContents.tsx |  2 +-
 .../DatePicker/utils/focusRelevantSegment.ts  |  2 +-
 5 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
index d59d114676..8efb04fee2 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -6,16 +6,28 @@ import {
   DatePickerProvider,
   DatePickerProviderProps,
 } from '../../DatePickerContext';
+import { defaultDatePickerContext } from '../../DatePickerContext/DatePickerContext.utils';
 
+import { SegmentRefs } from './DateInputBox.types';
 import { DateInputBox, type DateInputBoxProps } from '.';
 
 const renderDateInputBox = (
-  props?: DateInputBoxProps,
-  context?: DatePickerProviderProps,
+  props?: Omit<DateInputBoxProps, 'segmentRefs'>,
+  context?: Partial<DatePickerProviderProps>,
 ) => {
+  const segmentRefsMock: SegmentRefs = {
+    day: React.createRef(),
+    month: React.createRef(),
+    year: React.createRef(),
+  };
+
   const result = render(
-    <DatePickerProvider value={{ label: 'Label', ...context }}>
-      <DateInputBox {...props} value={props?.value ?? null} />
+    <DatePickerProvider value={{ ...defaultDatePickerContext, ...context }}>
+      <DateInputBox
+        {...props}
+        value={props?.value ?? null}
+        segmentRefs={segmentRefsMock}
+      />
     </DatePickerProvider>,
   );
 
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
index 6224f7baec..ab9ae9bfa7 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
@@ -4,6 +4,11 @@ import { HTMLElementProps } from '@leafygreen-ui/lib';
 import { DateType } from '../../types';
 import { DateSegment } from '../DateInput.types';
 
+export type SegmentRefs = Record<
+  DateSegment,
+  ReturnType<DynamicRefGetter<HTMLInputElement>>
+>;
+
 export interface DateInputBoxProps
   extends Omit<HTMLElementProps<'div'>, 'onChange'> {
   /**
@@ -23,8 +28,5 @@ export interface DateInputBoxProps
   labelledBy?: string;
 
   /** Refs  */
-  segmentRefs: Record<
-    DateSegment,
-    ReturnType<DynamicRefGetter<HTMLInputElement>>
-  >;
+  segmentRefs: SegmentRefs;
 }
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index b3987dfcd8..f82404d473 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -1,13 +1,5 @@
-import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
-
-import { DateSegment } from '../DateInput/DateInput.types';
 import { BaseDatePickerProps, DateType } from '../types';
 
-export type SegmentRefs = Record<
-  DateSegment,
-  ReturnType<DynamicRefGetter<HTMLInputElement>>
->;
-
 export interface DatePickerProps extends BaseDatePickerProps {
   /**
    * The selected date, given in UTC time
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
index 52b7ca56ab..7ce31fa774 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
@@ -7,8 +7,8 @@ import {
   useForwardedRef,
 } from '@leafygreen-ui/hooks';
 
+import { SegmentRefs } from '../../DateInput/DateInputBox/DateInputBox.types';
 import { useDatePickerContext } from '../../DatePickerContext';
-import { SegmentRefs } from '../DatePicker.types';
 import { DatePickerInput, DatePickerInputProps } from '../DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
 import { focusRelevantSegment } from '../utils/focusRelevantSegment';
diff --git a/packages/date-picker/src/DatePicker/utils/focusRelevantSegment.ts b/packages/date-picker/src/DatePicker/utils/focusRelevantSegment.ts
index fa0a7984d2..b006b8916b 100644
--- a/packages/date-picker/src/DatePicker/utils/focusRelevantSegment.ts
+++ b/packages/date-picker/src/DatePicker/utils/focusRelevantSegment.ts
@@ -2,8 +2,8 @@ import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
 import { isDateSegment } from '../../DateInput/DateInput.types';
+import { SegmentRefs } from '../../DateInput/DateInputBox/DateInputBox.types';
 import { DatePickerContextProps } from '../../DatePickerContext';
-import { SegmentRefs } from '../DatePicker.types';
 
 interface FocusRelevantSegmentArgs {
   target: EventTarget;

From 668631f189c89fd0e713a443f5fbd7ed0bf44b65 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 20 Sep 2023 12:06:22 -0400
Subject: [PATCH 105/351] mv focusRelevantSegment

---
 .../{focusRelevantSegment.ts => focusRelevantSegment/index.ts}    | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/date-picker/src/DatePicker/utils/{focusRelevantSegment.ts => focusRelevantSegment/index.ts} (100%)

diff --git a/packages/date-picker/src/DatePicker/utils/focusRelevantSegment.ts b/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts
similarity index 100%
rename from packages/date-picker/src/DatePicker/utils/focusRelevantSegment.ts
rename to packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts

From a5105593d49fa85d014cfc87d1c675bc7c4dfacd Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 20 Sep 2023 12:20:38 -0400
Subject: [PATCH 106/351] adds input click tests

---
 .../src/DatePicker/DatePicker.spec.tsx        | 26 ++++++++++++++++---
 .../utils/focusRelevantSegment/index.ts       |  6 ++---
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 3ddc0a2062..591abeff5e 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -145,12 +145,32 @@ describe('packages/date-picker', () => {
         expect(menuContainerEl).toBeInTheDocument();
       });
 
-      test.skip('focuses the first empty segment', async () => {
+      test('focuses a specific segment when clicked', () => {
+        const { monthInput } = renderDatePicker();
+        userEvent.click(monthInput);
+        expect(monthInput).toHaveFocus();
+      });
+
+      test('focuses the first segment when all are empty', () => {
         const { inputContainer, yearInput } = renderDatePicker();
         userEvent.click(inputContainer);
-        await waitFor(() => {
-          expect(yearInput).toHaveFocus();
+        expect(yearInput).toHaveFocus();
+      });
+
+      test('focuses the first empty segment when some are empty', () => {
+        const { inputContainer, yearInput, monthInput } = renderDatePicker();
+        yearInput.value = '2023';
+        yearInput.blur();
+        userEvent.click(inputContainer);
+        expect(monthInput).toHaveFocus();
+      });
+
+      test('focuses the last segment when all are filled', () => {
+        const { inputContainer, dayInput } = renderDatePicker({
+          value: new Date(),
         });
+        userEvent.click(inputContainer);
+        expect(dayInput).toHaveFocus();
       });
     });
 
diff --git a/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts b/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts
index b006b8916b..505d34abcf 100644
--- a/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts
@@ -1,9 +1,9 @@
 import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
-import { isDateSegment } from '../../DateInput/DateInput.types';
-import { SegmentRefs } from '../../DateInput/DateInputBox/DateInputBox.types';
-import { DatePickerContextProps } from '../../DatePickerContext';
+import { isDateSegment } from '../../../DateInput/DateInput.types';
+import { SegmentRefs } from '../../../DateInput/DateInputBox/DateInputBox.types';
+import { DatePickerContextProps } from '../../../DatePickerContext';
 
 interface FocusRelevantSegmentArgs {
   target: EventTarget;

From 08a3d09d441138ee64f4b7d2d453439b10a12e88 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 20 Sep 2023 12:32:51 -0400
Subject: [PATCH 107/351] clean up types. removes redundant tests

---
 .../DateInputBox/DateInputBox.spec.tsx        | 22 -------------------
 .../src/DatePicker/DatePicker.spec.tsx        | 16 ++++++++++++--
 .../DatePickerContents.types.ts               |  5 ++++-
 .../DatePickerInput/DatePickerInput.types.ts  |  4 +++-
 4 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
index 8efb04fee2..1dfb892498 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -198,27 +198,5 @@ describe('packages/date-input-box', () => {
       userEvent.tab();
       expect(dayInput).toHaveFocus();
     });
-
-    describe('Arrow Keys', () => {
-      test('ArrowRight moves focus right', () => {
-        const { monthInput, yearInput } = renderDateInputBox(undefined, {
-          dateFormat: 'iso8601',
-        });
-
-        userEvent.click(yearInput);
-        userEvent.type(yearInput, '{arrowright}');
-        expect(monthInput).toHaveFocus();
-      });
-
-      test('ArrowLeft moves focus left', () => {
-        const { dayInput, monthInput } = renderDateInputBox(undefined, {
-          dateFormat: 'iso8601',
-        });
-
-        userEvent.click(dayInput);
-        userEvent.type(dayInput, '{arrowleft}');
-        expect(monthInput).toHaveFocus();
-      });
-    });
   });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 591abeff5e..ddab91c62f 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -363,8 +363,20 @@ describe('packages/date-picker', () => {
     describe('Left/Right Arrow', () => {
       describe('when the input is focused', () => {
         describe('when the segment is empty', () => {
-          test.todo('left arrow focuses the prev. segment');
-          test.todo('right arrow focuses the next segment');
+          test('Left arrow focuses the prev. segment', () => {
+            const { monthInput, yearInput } = renderDatePicker();
+
+            userEvent.click(yearInput);
+            userEvent.type(yearInput, '{arrowright}');
+            expect(monthInput).toHaveFocus();
+          });
+          test('Right arrow focuses the next segment', () => {
+            const { dayInput, monthInput } = renderDatePicker();
+
+            userEvent.click(dayInput);
+            userEvent.type(dayInput, '{arrowleft}');
+            expect(monthInput).toHaveFocus();
+          });
         });
 
         describe('when the segment has a value', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.types.ts b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.types.ts
index 0a0eee5565..264c874c54 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.types.ts
@@ -4,6 +4,9 @@ import { DateType } from '../../types';
 import { DatePickerProps } from '../DatePicker.types';
 
 export interface DatePickerContentsProps
-  extends Omit<DatePickerProps, (typeof contextPropNames)[number]> {
+  extends Omit<
+    DatePickerProps,
+    (typeof contextPropNames)[number] | 'onChange'
+  > {
   setValue: ReturnType<typeof useControlledValue<DateType>>['setValue'];
 }
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index 31070b7d49..a4be99b6a0 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -1,12 +1,14 @@
 import { MouseEventHandler } from 'react';
 
 import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
+import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 import { DateInputBoxProps } from '../../DateInput';
 import { DateSegment } from '../../DateInput/DateInput.types';
 
 export interface DatePickerInputProps
-  extends Pick<DateInputBoxProps, 'value' | 'setValue'> {
+  extends Pick<DateInputBoxProps, 'value' | 'setValue'>,
+    HTMLElementProps<'div'> {
   /**
    * Click handler
    */

From 827aec7f8fa78c31dcf80a475e572a1a9c49327c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 21 Sep 2023 11:52:48 -0400
Subject: [PATCH 108/351] adds input left/right arrow key behavior

---
 packages/date-picker/package.json             |   2 +-
 .../src/DatePicker/DatePicker.spec.tsx        |  35 +++---
 .../date-picker/src/DatePicker/DatePicker.tsx |   1 +
 .../DatePickerContents/DatePickerContents.tsx |  79 ++++++++++++-
 .../utils/getRelativeSegment/index.ts         | 105 ++++++++++++++++++
 .../DatePicker/utils/getSegmentKey/index.ts   |  22 ++++
 .../index.ts                                  |  24 ++++
 .../utils/isElementInputSegment/index.ts      |  16 +++
 8 files changed, 269 insertions(+), 15 deletions(-)
 create mode 100644 packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
 create mode 100644 packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
 create mode 100644 packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
 create mode 100644 packages/date-picker/src/DatePicker/utils/isElementInputSegment/index.ts

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index a3aa3e553d..665cf61e76 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -19,7 +19,7 @@
     "@leafygreen-ui/hooks": "^8.0.0",
     "@leafygreen-ui/icon": "^11.23.0",
     "@leafygreen-ui/icon-button": "^15.0.17",
-    "@leafygreen-ui/lib": "^11.0.0",
+    "@leafygreen-ui/lib": "^12.0.0",
     "@leafygreen-ui/palette": "^4.0.7",
     "@leafygreen-ui/popover": "^11.0.17",
     "@leafygreen-ui/select": "^10.3.15",
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index ddab91c62f..a0b59d1e9f 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -362,26 +362,35 @@ describe('packages/date-picker', () => {
 
     describe('Left/Right Arrow', () => {
       describe('when the input is focused', () => {
-        describe('when the segment is empty', () => {
-          test('Left arrow focuses the prev. segment', () => {
-            const { monthInput, yearInput } = renderDatePicker();
-
-            userEvent.click(yearInput);
-            userEvent.type(yearInput, '{arrowright}');
+        describe('and the segment is empty', () => {
+          test('Left arrow focuses the prev segment', () => {
+            const { dayInput, monthInput } = renderDatePicker();
+            userEvent.type(dayInput, '{arrowleft}');
             expect(monthInput).toHaveFocus();
           });
-          test('Right arrow focuses the next segment', () => {
-            const { dayInput, monthInput } = renderDatePicker();
 
-            userEvent.click(dayInput);
-            userEvent.type(dayInput, '{arrowleft}');
+          test('Right arrow focuses the next segment', () => {
+            const { monthInput, yearInput } = renderDatePicker();
+            userEvent.type(yearInput, '{arrowright}');
             expect(monthInput).toHaveFocus();
           });
         });
 
-        describe('when the segment has a value', () => {
-          test.todo('left arrow moves the cursor');
-          test.todo('right moves the cursor');
+        describe('and the segment has a value', () => {
+          test('Left arrow moves the cursor', () => {
+            const { dayInput } = renderDatePicker({
+              value: new Date(),
+            });
+            userEvent.type(dayInput, '{arrowleft}');
+            expect(dayInput).toHaveFocus();
+          });
+          test('Right moves the cursor', () => {
+            const { yearInput } = renderDatePicker({
+              value: new Date(),
+            });
+            userEvent.type(yearInput, '{arrowright}');
+            expect(yearInput).toHaveFocus();
+          });
         });
       });
       describe('when any menu element is focused', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 5f13dc69a6..d46b95d46d 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -33,6 +33,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       onChangeProp,
       initialProp,
     );
+
     return (
       <DatePickerProvider
         value={{
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
index 7ce31fa774..9cf74a4868 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
@@ -1,4 +1,10 @@
-import React, { forwardRef, MouseEventHandler, useRef, useState } from 'react';
+import React, {
+  forwardRef,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  useRef,
+  useState,
+} from 'react';
 import { isSameMonth, setMonth } from 'date-fns';
 
 import {
@@ -6,12 +12,16 @@ import {
   useDynamicRefs,
   useForwardedRef,
 } from '@leafygreen-ui/hooks';
+import { keyMap } from '@leafygreen-ui/lib';
 
 import { SegmentRefs } from '../../DateInput/DateInputBox/DateInputBox.types';
 import { useDatePickerContext } from '../../DatePickerContext';
+import { isZeroLike } from '../../utils/isZeroLike';
 import { DatePickerInput, DatePickerInputProps } from '../DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
 import { focusRelevantSegment } from '../utils/focusRelevantSegment';
+import { getRelativeSegment } from '../utils/getRelativeSegment';
+import { isElementInputSegment } from '../utils/isElementInputSegment';
 
 import { DatePickerContentsProps } from './DatePickerContents.types';
 
@@ -75,6 +85,72 @@ export const DatePickerContents = forwardRef<
     });
   };
 
+  const handleInputKeyDown: KeyboardEventHandler = e => {
+    const { target: _target, key } = e;
+    const target = _target as HTMLElement;
+    // if target is not a segment, do nothing
+    const isSegment = isElementInputSegment(target, segmentRefs);
+
+    if (!isSegment) return;
+
+    const isInputEmpty = !isZeroLike(target.value);
+    const cursorPosition = target.selectionEnd;
+
+    switch (key) {
+      case keyMap.ArrowLeft: {
+        // if input is empty,
+        // or the cursor is at the beginning of the input
+        // set focus to prev. input (if it exists)
+        if (isInputEmpty || cursorPosition === 0) {
+          const segmentToFocus = getRelativeSegment('next', {
+            segment: target,
+            formatParts,
+            segmentRefs,
+          });
+          segmentToFocus?.current?.focus();
+        }
+
+        // otherwise, use default behavior
+
+        break;
+      }
+
+      case keyMap.ArrowRight: {
+        // if input is empty,
+        // or the cursor is at the end of the input
+        // set focus to next. input (if it exists)
+        if (isInputEmpty || cursorPosition === target.value.length) {
+          const segmentToFocus = getRelativeSegment('next', {
+            segment: target,
+            formatParts,
+            segmentRefs,
+          });
+
+          segmentToFocus?.current?.focus();
+        }
+
+        // otherwise, use default behavior
+
+        break;
+      }
+
+      case keyMap.ArrowUp: {
+        // if incrementing the segment's value is in range
+        // increment that segment value
+        break;
+      }
+
+      case keyMap.ArrowDown: {
+        // if decrementing the segment's value is in range
+        // decrement that segment value
+        break;
+      }
+
+      default:
+        break;
+    }
+  };
+
   return (
     <>
       <DatePickerInput
@@ -82,6 +158,7 @@ export const DatePickerContents = forwardRef<
         value={value}
         setValue={handleInputChange}
         onClick={handleInputClick}
+        onKeyDown={handleInputKeyDown}
         segmentRefs={segmentRefs}
         {...rest}
       />
diff --git a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
new file mode 100644
index 0000000000..079de61564
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
@@ -0,0 +1,105 @@
+import isUndefined from 'lodash/isUndefined';
+import last from 'lodash/last';
+
+import { SegmentRefs } from '../../../DateInput/DateInputBox/DateInputBox.types';
+import { DatePickerContextProps } from '../../../DatePickerContext';
+import { getSegmentKey } from '../getSegmentKey';
+import { getSegmentRefFromDateTimeFormatPart } from '../getSegmentRefFromDateTimeFormatPart';
+
+type RelativeDirection = 'next' | 'prev' | 'first' | 'last';
+interface GetRelativeSegmentContext {
+  segment: HTMLInputElement | React.RefObject<HTMLInputElement>;
+  formatParts: DatePickerContextProps['formatParts'];
+  segmentRefs: SegmentRefs;
+}
+
+/**
+ * Given a direction, staring segment, and segment refs,
+ * returns the segment ref in the given direction
+ */
+export const getRelativeSegment = (
+  direction: RelativeDirection,
+  { segment, formatParts, segmentRefs }: GetRelativeSegmentContext,
+): React.RefObject<HTMLInputElement> | undefined => {
+  if (
+    isUndefined(direction) ||
+    isUndefined(segment) ||
+    isUndefined(formatParts) ||
+    isUndefined(segmentRefs)
+  ) {
+    return;
+  }
+
+  // only the relevant segments, not separators
+  const formatSegments = formatParts.filter(part => part.type !== 'literal');
+
+  switch (direction) {
+    case 'first': {
+      const firstSegmentRef = getSegmentRefFromDateTimeFormatPart(
+        formatSegments[0],
+        segmentRefs,
+      );
+      return firstSegmentRef;
+    }
+
+    case 'last': {
+      const lastSegment = last(formatSegments);
+
+      if (lastSegment) {
+        const lastSegmentRef = getSegmentRefFromDateTimeFormatPart(
+          lastSegment,
+          segmentRefs,
+        );
+        return lastSegmentRef;
+      }
+
+      break;
+    }
+
+    case 'next': {
+      const currentSegmentKey = getSegmentKey(segment, segmentRefs);
+
+      if (currentSegmentKey) {
+        const currentSegmentIndex = formatSegments.findIndex(
+          p => p.type === currentSegmentKey,
+        );
+
+        const nextSegmentIndex = Math.min(
+          currentSegmentIndex + 1,
+          formatSegments.length - 1,
+        );
+
+        const nextSegmentRef = getSegmentRefFromDateTimeFormatPart(
+          formatSegments[nextSegmentIndex],
+          segmentRefs,
+        );
+        return nextSegmentRef;
+      }
+
+      break;
+    }
+
+    case 'prev': {
+      const currentSegmentKey = getSegmentKey(segment, segmentRefs);
+
+      if (currentSegmentKey) {
+        const currentSegmentIndex = formatSegments.findIndex(
+          p => p.type === currentSegmentKey,
+        );
+
+        const prevSegmentIndex = Math.max(currentSegmentIndex - 1, 0);
+
+        const prevSegmentRef = getSegmentRefFromDateTimeFormatPart(
+          formatSegments[prevSegmentIndex],
+          segmentRefs,
+        );
+        return prevSegmentRef;
+      }
+
+      break;
+    }
+
+    default:
+      break;
+  }
+};
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
new file mode 100644
index 0000000000..184b5709d5
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
@@ -0,0 +1,22 @@
+import { SegmentRefs } from '../../../DateInput/DateInputBox/DateInputBox.types';
+
+/** Returns the key of a given segment ref or element */
+export const getSegmentKey = (
+  segment: HTMLInputElement | React.RefObject<HTMLInputElement>,
+  segmentRefs: SegmentRefs,
+): keyof SegmentRefs | undefined => {
+  const currentSegmentKeyValuePair = Object.entries(segmentRefs).find(
+    ([_, val]) => {
+      return (
+        val.current ===
+          (segment as React.RefObject<HTMLInputElement>).current ||
+        val.current === (segment as HTMLInputElement)
+      );
+    },
+  ) as [keyof SegmentRefs, React.RefObject<HTMLInputElement>] | undefined;
+
+  if (currentSegmentKeyValuePair) {
+    const currentSegmentKey = currentSegmentKeyValuePair[0];
+    return currentSegmentKey;
+  }
+};
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
new file mode 100644
index 0000000000..cbf575c98e
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
@@ -0,0 +1,24 @@
+import isUndefined from 'lodash/isUndefined';
+
+import { isDateSegment } from '../../../DateInput/DateInput.types';
+import { SegmentRefs } from '../../../DateInput/DateInputBox/DateInputBox.types';
+
+/**
+ * Given a {@link Intl.DateTimeFormatPart},
+ * return the segmentRefs entry with the same type
+ */
+export const getSegmentRefFromDateTimeFormatPart = (
+  formatPart: Intl.DateTimeFormatPart | undefined,
+  segmentRefs: SegmentRefs,
+) => {
+  if (isUndefined(formatPart)) {
+    return;
+  }
+
+  const key = formatPart.type;
+
+  if (isDateSegment(key)) {
+    const ref = segmentRefs[key];
+    return ref;
+  }
+};
diff --git a/packages/date-picker/src/DatePicker/utils/isElementInputSegment/index.ts b/packages/date-picker/src/DatePicker/utils/isElementInputSegment/index.ts
new file mode 100644
index 0000000000..32659c01d8
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/utils/isElementInputSegment/index.ts
@@ -0,0 +1,16 @@
+import { SegmentRefs } from '../../../DateInput/DateInputBox/DateInputBox.types';
+
+/**
+ * Returns whether the given element is a segment
+ */
+export const isElementInputSegment = (
+  element: HTMLElement,
+  segmentRefs: SegmentRefs,
+): element is HTMLInputElement => {
+  const segmentsArray = Object.values(segmentRefs).map(
+    ref => ref.current,
+  ) as Array<HTMLElement | null>;
+  const isSegment = segmentsArray.includes(element);
+
+  return isSegment;
+};

From 9cd3ffbedccf821c8d055226e38496d5470f58ef Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 21 Sep 2023 12:10:23 -0400
Subject: [PATCH 109/351] extract hook "useSegmentRefs"

---
 .../src/DateInput/DateInput.types.ts          | 17 ----
 .../DateInput/DateInputBox/DateInputBox.tsx   |  4 +-
 .../DateInputBox/DateInputBox.types.ts        |  8 +-
 .../DateInputSegment.styles.ts                |  2 +-
 .../DateInputSegment.types.ts                 |  5 +-
 .../DatePickerContents/DatePickerContents.tsx | 18 +---
 .../DatePickerInput/DatePickerInput.spec.tsx  | 73 +++++++++++++++-
 .../DatePickerInput/DatePickerInput.types.ts  |  2 +-
 .../utils/focusRelevantSegment/index.ts       |  2 +-
 .../index.ts                                  |  2 +-
 .../useDateSegments/DateSegments.types.ts     | 32 +++++++
 .../src/hooks/useDateSegments/index.ts        | 85 +------------------
 .../hooks/useDateSegments/useDateSegments.ts  | 72 ++++++++++++++++
 .../src/hooks/useSegmentRefs/index.ts         |  2 +
 .../hooks/useSegmentRefs/segmentRefs.types.ts |  8 ++
 .../hooks/useSegmentRefs/useSegmentRefs.ts    | 23 +++++
 .../src/utils/getSegmentsFromDate/index.ts    |  2 +-
 .../src/utils/isValidSegment/index.ts         |  5 +-
 .../src/utils/newDateFromSegments/index.ts    |  2 +-
 .../src/utils/valueFormatter/index.ts         |  2 +-
 .../valueFormatter/valueFormatter.spec.ts     |  2 +-
 21 files changed, 232 insertions(+), 136 deletions(-)
 delete mode 100644 packages/date-picker/src/DateInput/DateInput.types.ts
 create mode 100644 packages/date-picker/src/hooks/useDateSegments/DateSegments.types.ts
 create mode 100644 packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts
 create mode 100644 packages/date-picker/src/hooks/useSegmentRefs/index.ts
 create mode 100644 packages/date-picker/src/hooks/useSegmentRefs/segmentRefs.types.ts
 create mode 100644 packages/date-picker/src/hooks/useSegmentRefs/useSegmentRefs.ts

diff --git a/packages/date-picker/src/DateInput/DateInput.types.ts b/packages/date-picker/src/DateInput/DateInput.types.ts
deleted file mode 100644
index 5730942ac5..0000000000
--- a/packages/date-picker/src/DateInput/DateInput.types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export const DateSegment = {
-  Day: 'day',
-  Month: 'month',
-  Year: 'year',
-} as const;
-export type DateSegment = (typeof DateSegment)[keyof typeof DateSegment];
-
-export type DateSegmentValue = number;
-
-export type DateSegmentsState = Record<
-  DateSegment,
-  DateSegmentValue | undefined
->;
-
-export function isDateSegment(str: string): str is DateSegment {
-  return ['day', 'month', 'year'].includes(str);
-}
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index 5ccc9b8993..2f52b92907 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -6,7 +6,7 @@ import { useForwardedRef } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../DatePickerContext';
-import { useDateSegments } from '../../hooks/useDateSegments';
+import { useDateSegments } from '../../hooks/useDateSegments/useDateSegments';
 import { getRemainingParts } from '../../utils/getRemainingParts';
 import { isValidSegmentName } from '../../utils/isValidSegment';
 import { newDateFromSegments } from '../../utils/newDateFromSegments';
@@ -14,7 +14,7 @@ import {
   DateSegment,
   DateSegmentsState,
   isDateSegment,
-} from '../DateInput.types';
+} from '../../hooks/useDateSegments/DateSegments.types';
 import { DateInputSegment } from '../DateInputSegment';
 
 import {
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
index ab9ae9bfa7..551029d6bd 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
@@ -1,13 +1,7 @@
-import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
+import { SegmentRefs } from '../../hooks/useSegmentRefs';
 import { DateType } from '../../types';
-import { DateSegment } from '../DateInput.types';
-
-export type SegmentRefs = Record<
-  DateSegment,
-  ReturnType<DynamicRefGetter<HTMLInputElement>>
->;
 
 export interface DateInputBoxProps
   extends Omit<HTMLElementProps<'div'>, 'onChange'> {
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts
index b2231ce31c..64feeb79d8 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts
@@ -8,7 +8,7 @@ import {
   typeScales,
 } from '@leafygreen-ui/tokens';
 
-import { DateSegment } from '../DateInput.types';
+import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
 
 import { characterWidth, charsPerSegment } from './constants';
 
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
index 4c287255bb..068ac6b3b3 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
@@ -1,6 +1,9 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
-import { DateSegment, DateSegmentValue } from '../DateInput.types';
+import {
+  DateSegment,
+  DateSegmentValue,
+} from '../../hooks/useDateSegments/DateSegments.types';
 
 export interface DateInputSegmentProps
   extends DarkModeProps,
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
index 9cf74a4868..ab586bf8c4 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
@@ -7,15 +7,11 @@ import React, {
 } from 'react';
 import { isSameMonth, setMonth } from 'date-fns';
 
-import {
-  useBackdropClick,
-  useDynamicRefs,
-  useForwardedRef,
-} from '@leafygreen-ui/hooks';
+import { useBackdropClick, useForwardedRef } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
 
-import { SegmentRefs } from '../../DateInput/DateInputBox/DateInputBox.types';
 import { useDatePickerContext } from '../../DatePickerContext';
+import { useSegmentRefs } from '../../hooks/useSegmentRefs';
 import { isZeroLike } from '../../utils/isZeroLike';
 import { DatePickerInput, DatePickerInputProps } from '../DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
@@ -32,15 +28,7 @@ export const DatePickerContents = forwardRef<
   const { isOpen, setOpen, formatParts, menuId } = useDatePickerContext();
   const closeMenu = () => setOpen(false);
 
-  const getSegmentRef = useDynamicRefs<HTMLInputElement>({
-    prefix: 'segment',
-  });
-
-  const segmentRefs: SegmentRefs = {
-    day: getSegmentRef('day') || undefined,
-    month: getSegmentRef('month') || undefined,
-    year: getSegmentRef('year') || undefined,
-  };
+  const segmentRefs = useSegmentRefs();
 
   const formFieldRef = useForwardedRef(fwdRef, null);
   const menuRef = useRef<HTMLDivElement>(null);
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 139932950e..7393886d18 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -1,8 +1,73 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import {
+  render,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-import { DatePickerInput } from '.';
+import { Month } from '../../constants';
+import {
+  DatePickerProvider,
+  DatePickerProviderProps,
+} from '../../DatePickerContext';
 
-describe('packages/date-picker-input', () => {
-  test('condition', () => {});
+import { DatePickerInput, DatePickerInputProps } from '.';
+
+const renderDatePickerInput = (
+  props?: DatePickerInputProps,
+  context?: DatePickerProviderProps,
+) => {
+  const result = render(
+    <></>,
+    // <DatePickerProvider>
+    //   <DatePickerInput />
+    // </DatePickerProvider>,
+  );
+};
+
+describe('packages/date-picker/date-picker-input', () => {
+  beforeEach(() => {
+    // Set the current time to midnight UTC on 2023-12-26
+    jest
+      .useFakeTimers()
+      .setSystemTime(new Date(Date.UTC(2023, Month.December, 26)));
+  });
+
+  describe.skip('Keyboard interaction', () => {
+    describe('Left/Right Arrow', () => {
+      describe('when the input is focused', () => {
+        describe('and the segment is empty', () => {
+          test('Left arrow focuses the prev segment', () => {
+            const { dayInput, monthInput } = renderDatePickerInput();
+            userEvent.type(dayInput, '{arrowleft}');
+            expect(monthInput).toHaveFocus();
+          });
+
+          test('Right arrow focuses the next segment', () => {
+            const { monthInput, yearInput } = renderDatePickerInput();
+            userEvent.type(yearInput, '{arrowright}');
+            expect(monthInput).toHaveFocus();
+          });
+        });
+
+        describe('and the segment has a value', () => {
+          test('Left arrow moves the cursor', () => {
+            const { dayInput } = renderDatePickerInput({
+              value: new Date(),
+            });
+            userEvent.type(dayInput, '{arrowleft}');
+            expect(dayInput).toHaveFocus();
+          });
+          test('Right moves the cursor', () => {
+            const { yearInput } = renderDatePickerInput({
+              value: new Date(),
+            });
+            userEvent.type(yearInput, '{arrowright}');
+            expect(yearInput).toHaveFocus();
+          });
+        });
+      });
+    });
+  });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index a4be99b6a0..b279d5a2e0 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -4,7 +4,7 @@ import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 import { DateInputBoxProps } from '../../DateInput';
-import { DateSegment } from '../../DateInput/DateInput.types';
+import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
 
 export interface DatePickerInputProps
   extends Pick<DateInputBoxProps, 'value' | 'setValue'>,
diff --git a/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts b/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts
index 505d34abcf..adaa59f3eb 100644
--- a/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts
@@ -1,7 +1,7 @@
 import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
-import { isDateSegment } from '../../../DateInput/DateInput.types';
+import { isDateSegment } from '../../../hooks/useDateSegments/DateSegments.types';
 import { SegmentRefs } from '../../../DateInput/DateInputBox/DateInputBox.types';
 import { DatePickerContextProps } from '../../../DatePickerContext';
 
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
index cbf575c98e..861d6a5998 100644
--- a/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
@@ -1,6 +1,6 @@
 import isUndefined from 'lodash/isUndefined';
 
-import { isDateSegment } from '../../../DateInput/DateInput.types';
+import { isDateSegment } from '../../../hooks/useDateSegments/DateSegments.types';
 import { SegmentRefs } from '../../../DateInput/DateInputBox/DateInputBox.types';
 
 /**
diff --git a/packages/date-picker/src/hooks/useDateSegments/DateSegments.types.ts b/packages/date-picker/src/hooks/useDateSegments/DateSegments.types.ts
new file mode 100644
index 0000000000..13761de89e
--- /dev/null
+++ b/packages/date-picker/src/hooks/useDateSegments/DateSegments.types.ts
@@ -0,0 +1,32 @@
+export const DateSegment = {
+  Day: 'day',
+  Month: 'month',
+  Year: 'year',
+} as const;
+export type DateSegment = (typeof DateSegment)[keyof typeof DateSegment];
+
+export type DateSegmentValue = number;
+
+export type DateSegmentsState = Record<
+  DateSegment,
+  DateSegmentValue | undefined
+>;
+
+export function isDateSegment(str: string): str is DateSegment {
+  return ['day', 'month', 'year'].includes(str);
+}
+
+export type OnUpdateCallback = (value: DateSegmentsState) => void;
+
+export interface UseDateSegmentsOptions {
+  /** A formatter used to separate the date value into segments */
+  // timeZone: string;
+
+  /** A callback fired when the segment values change */
+  onUpdate?: OnUpdateCallback;
+}
+
+export interface UseDateSegmentsReturnValue {
+  segments: DateSegmentsState;
+  setSegment: (segment: DateSegment, value: DateSegmentValue) => void;
+}
diff --git a/packages/date-picker/src/hooks/useDateSegments/index.ts b/packages/date-picker/src/hooks/useDateSegments/index.ts
index 12745c738f..516d0812d4 100644
--- a/packages/date-picker/src/hooks/useDateSegments/index.ts
+++ b/packages/date-picker/src/hooks/useDateSegments/index.ts
@@ -1,84 +1,7 @@
-import { useEffect, useReducer } from 'react';
-import { isSameDay } from 'date-fns';
-
-import { usePrevious } from '@leafygreen-ui/hooks';
-
-import {
+export {
   DateSegment,
   DateSegmentsState,
   DateSegmentValue,
-} from '../../DateInput/DateInput.types';
-import { DateType } from '../../types';
-import { getSegmentsFromDate } from '../../utils/getSegmentsFromDate';
-
-type OnUpdateCallback = (value: DateSegmentsState) => void;
-
-interface UseDateSegmentsOptions {
-  /** A formatter used to separate the date value into segments */
-  // timeZone: string;
-
-  /** A callback fired when the segment values change */
-  onUpdate?: OnUpdateCallback;
-}
-
-interface UseDateSegmentsReturnValue {
-  segments: DateSegmentsState;
-  setSegment: (segment: DateSegment, value: DateSegmentValue) => void;
-}
-
-/** Merges old state & new state */
-const dateSegmentsReducer = (
-  currentState: DateSegmentsState,
-  newState: Partial<DateSegmentsState>,
-) => {
-  const state = {
-    ...currentState,
-    ...newState,
-  };
-  return state;
-};
-
-/**
- * Returns an object with all 3 date segments, and a setter function
- *
- * Returned segments are relative to the formatter time zone
- */
-export const useDateSegments = (
-  /** Provided date is relative to the client's time zone */
-  date: DateType,
-  { onUpdate }: UseDateSegmentsOptions,
-): UseDateSegmentsReturnValue => {
-  //
-  const [segments, dispatch] = useReducer(
-    dateSegmentsReducer,
-    date,
-    getSegmentsFromDate,
-  );
-  const prevDate = usePrevious(date);
-
-  // If `date` prop changes, update the segments
-  useEffect(() => {
-    if (date && !(prevDate && isSameDay(date, prevDate))) {
-      const newSegments = getSegmentsFromDate(date);
-      onUpdate?.(newSegments);
-      dispatch(newSegments);
-    }
-  }, [date, onUpdate, prevDate]);
-
-  /**
-   * Custom dispatch that triggers the provided side effects, and updates state
-   */
-  const setSegment = (segment: DateSegment, value: DateSegmentValue) => {
-    // Calculate next state
-    // then, execute any side effects based on the new state
-    // finally, commit the new state
-    const nextState = dateSegmentsReducer(segments, { [segment]: value });
-    onUpdate?.(nextState);
-    dispatch({ [segment]: value });
-  };
-
-  return {
-    segments,
-    setSegment,
-  };
-};
+  isDateSegment,
+} from './DateSegments.types';
+export { useDateSegments } from './useDateSegments';
diff --git a/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts b/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts
new file mode 100644
index 0000000000..bc1fc6a676
--- /dev/null
+++ b/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts
@@ -0,0 +1,72 @@
+import { useEffect, useReducer } from 'react';
+import { isSameDay } from 'date-fns';
+
+import { usePrevious } from '@leafygreen-ui/hooks';
+
+import { DateType } from '../../types';
+import { getSegmentsFromDate } from '../../utils/getSegmentsFromDate';
+
+import {
+  DateSegment,
+  DateSegmentsState,
+  DateSegmentValue,
+  UseDateSegmentsOptions,
+  UseDateSegmentsReturnValue,
+} from './DateSegments.types';
+
+/** Merges old state & new state */
+const dateSegmentsReducer = (
+  currentState: DateSegmentsState,
+  newState: Partial<DateSegmentsState>,
+) => {
+  const state = {
+    ...currentState,
+    ...newState,
+  };
+  return state;
+};
+
+/**
+ * Returns an object with all 3 date segments, and a setter function
+ *
+ * Returned segments are relative to the formatter time zone
+ */
+export const useDateSegments = (
+  /** Provided date is relative to the client's time zone */
+  date: DateType,
+  { onUpdate }: UseDateSegmentsOptions,
+): UseDateSegmentsReturnValue => {
+  //
+  const [segments, dispatch] = useReducer(
+    dateSegmentsReducer,
+    date,
+    getSegmentsFromDate,
+  );
+  const prevDate = usePrevious(date);
+
+  // If `date` prop changes, update the segments
+  useEffect(() => {
+    if (date && !(prevDate && isSameDay(date, prevDate))) {
+      const newSegments = getSegmentsFromDate(date);
+      onUpdate?.(newSegments);
+      dispatch(newSegments);
+    }
+  }, [date, onUpdate, prevDate]);
+
+  /**
+   * Custom dispatch that triggers the provided side effects, and updates state
+   */
+  const setSegment = (segment: DateSegment, value: DateSegmentValue) => {
+    // Calculate next state
+    // then, execute any side effects based on the new state
+    // finally, commit the new state
+    const nextState = dateSegmentsReducer(segments, { [segment]: value });
+    onUpdate?.(nextState);
+    dispatch({ [segment]: value });
+  };
+
+  return {
+    segments,
+    setSegment,
+  };
+};
diff --git a/packages/date-picker/src/hooks/useSegmentRefs/index.ts b/packages/date-picker/src/hooks/useSegmentRefs/index.ts
new file mode 100644
index 0000000000..8e17c84e0e
--- /dev/null
+++ b/packages/date-picker/src/hooks/useSegmentRefs/index.ts
@@ -0,0 +1,2 @@
+export { SegmentRefs } from './segmentRefs.types';
+export { useSegmentRefs } from './useSegmentRefs';
diff --git a/packages/date-picker/src/hooks/useSegmentRefs/segmentRefs.types.ts b/packages/date-picker/src/hooks/useSegmentRefs/segmentRefs.types.ts
new file mode 100644
index 0000000000..f189b58e7f
--- /dev/null
+++ b/packages/date-picker/src/hooks/useSegmentRefs/segmentRefs.types.ts
@@ -0,0 +1,8 @@
+import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
+
+import { DateSegment } from '../useDateSegments';
+
+export type SegmentRefs = Record<
+  DateSegment,
+  ReturnType<DynamicRefGetter<HTMLInputElement>>
+>;
diff --git a/packages/date-picker/src/hooks/useSegmentRefs/useSegmentRefs.ts b/packages/date-picker/src/hooks/useSegmentRefs/useSegmentRefs.ts
new file mode 100644
index 0000000000..a2f6f52f0a
--- /dev/null
+++ b/packages/date-picker/src/hooks/useSegmentRefs/useSegmentRefs.ts
@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+
+import { useDynamicRefs } from '@leafygreen-ui/hooks';
+
+import { SegmentRefs } from './segmentRefs.types';
+
+/**
+ * @returns A {@link SegmentRefs} object to keep track of each day/month/year input segment
+ */
+export const useSegmentRefs = () => {
+  const getSegmentRef = useDynamicRefs<HTMLInputElement>();
+
+  const segmentRefs: SegmentRefs = useMemo(
+    () => ({
+      day: getSegmentRef('day') || undefined,
+      month: getSegmentRef('month') || undefined,
+      year: getSegmentRef('year') || undefined,
+    }),
+    [getSegmentRef],
+  );
+
+  return segmentRefs;
+};
diff --git a/packages/date-picker/src/utils/getSegmentsFromDate/index.ts b/packages/date-picker/src/utils/getSegmentsFromDate/index.ts
index db188ad9b4..296efc5c04 100644
--- a/packages/date-picker/src/utils/getSegmentsFromDate/index.ts
+++ b/packages/date-picker/src/utils/getSegmentsFromDate/index.ts
@@ -1,4 +1,4 @@
-import { DateSegmentsState } from '../../DateInput/DateInput.types';
+import { DateSegmentsState } from '../../hooks/useDateSegments/DateSegments.types';
 
 /** Returns a single object with day, month & year segments */
 export const getSegmentsFromDate = (date: Date | null): DateSegmentsState => {
diff --git a/packages/date-picker/src/utils/isValidSegment/index.ts b/packages/date-picker/src/utils/isValidSegment/index.ts
index a075558c45..f1ae4edb83 100644
--- a/packages/date-picker/src/utils/isValidSegment/index.ts
+++ b/packages/date-picker/src/utils/isValidSegment/index.ts
@@ -1,6 +1,9 @@
 import isUndefined from 'lodash/isUndefined';
 
-import { DateSegment, DateSegmentValue } from '../../DateInput/DateInput.types';
+import {
+  DateSegment,
+  DateSegmentValue,
+} from '../../hooks/useDateSegments/DateSegments.types';
 
 /**
  * Returns whether a given value is a valid segment value
diff --git a/packages/date-picker/src/utils/newDateFromSegments/index.ts b/packages/date-picker/src/utils/newDateFromSegments/index.ts
index 3e83da1c2a..96634320dc 100644
--- a/packages/date-picker/src/utils/newDateFromSegments/index.ts
+++ b/packages/date-picker/src/utils/newDateFromSegments/index.ts
@@ -1,4 +1,4 @@
-import { DateSegmentsState } from '../../DateInput/DateInput.types';
+import { DateSegmentsState } from '../../hooks/useDateSegments/DateSegments.types';
 import { isValidSegment } from '../isValidSegment';
 
 /** Constructs a date object in UTC from day, month, year segments */
diff --git a/packages/date-picker/src/utils/valueFormatter/index.ts b/packages/date-picker/src/utils/valueFormatter/index.ts
index 321f61f8fe..73dc51feb9 100644
--- a/packages/date-picker/src/utils/valueFormatter/index.ts
+++ b/packages/date-picker/src/utils/valueFormatter/index.ts
@@ -1,6 +1,6 @@
 import padStart from 'lodash/padStart';
 
-import { DateSegment } from '../../DateInput/DateInput.types';
+import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
 import { charsPerSegment } from '../../DateInput/DateInputSegment/constants';
 import { isZeroLike } from '../isZeroLike';
 
diff --git a/packages/date-picker/src/utils/valueFormatter/valueFormatter.spec.ts b/packages/date-picker/src/utils/valueFormatter/valueFormatter.spec.ts
index 959e583d2f..461e531f34 100644
--- a/packages/date-picker/src/utils/valueFormatter/valueFormatter.spec.ts
+++ b/packages/date-picker/src/utils/valueFormatter/valueFormatter.spec.ts
@@ -1,4 +1,4 @@
-import { DateSegment } from '../../DateInput/DateInput.types';
+import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
 
 import { getValueFormatter } from '.';
 

From 3a705c515e780a1043c3d6aee365c5f885b791f2 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 21 Sep 2023 15:10:58 -0400
Subject: [PATCH 110/351] move keydown behavior to input element

---
 .../src/DatePicker/DatePicker.spec.tsx        | 32 -------
 .../DatePickerContents/DatePickerContents.tsx | 79 +----------------
 .../DatePickerInput/DatePickerInput.spec.tsx  | 86 +++++++++++--------
 .../DatePickerInput/DatePickerInput.tsx       | 75 +++++++++++++++-
 .../utils/focusRelevantSegment/index.ts       |  4 +-
 .../utils/getRelativeSegment/index.ts         |  2 +-
 .../DatePicker/utils/getSegmentKey/index.ts   |  2 +-
 .../index.ts                                  |  4 +-
 .../utils/isElementInputSegment/index.ts      |  2 +-
 .../src/hooks/useSegmentRefs/index.ts         |  2 +-
 10 files changed, 132 insertions(+), 156 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index a0b59d1e9f..f3f794a847 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -361,38 +361,6 @@ describe('packages/date-picker', () => {
     });
 
     describe('Left/Right Arrow', () => {
-      describe('when the input is focused', () => {
-        describe('and the segment is empty', () => {
-          test('Left arrow focuses the prev segment', () => {
-            const { dayInput, monthInput } = renderDatePicker();
-            userEvent.type(dayInput, '{arrowleft}');
-            expect(monthInput).toHaveFocus();
-          });
-
-          test('Right arrow focuses the next segment', () => {
-            const { monthInput, yearInput } = renderDatePicker();
-            userEvent.type(yearInput, '{arrowright}');
-            expect(monthInput).toHaveFocus();
-          });
-        });
-
-        describe('and the segment has a value', () => {
-          test('Left arrow moves the cursor', () => {
-            const { dayInput } = renderDatePicker({
-              value: new Date(),
-            });
-            userEvent.type(dayInput, '{arrowleft}');
-            expect(dayInput).toHaveFocus();
-          });
-          test('Right moves the cursor', () => {
-            const { yearInput } = renderDatePicker({
-              value: new Date(),
-            });
-            userEvent.type(yearInput, '{arrowright}');
-            expect(yearInput).toHaveFocus();
-          });
-        });
-      });
       describe('when any menu element is focused', () => {
         test.todo('up arrow decrements the week by 1');
         test.todo('down arrow decrements the week by 1');
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
index ab586bf8c4..4349b464f3 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
@@ -1,23 +1,13 @@
-import React, {
-  forwardRef,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  useRef,
-  useState,
-} from 'react';
+import React, { forwardRef, MouseEventHandler, useRef, useState } from 'react';
 import { isSameMonth, setMonth } from 'date-fns';
 
 import { useBackdropClick, useForwardedRef } from '@leafygreen-ui/hooks';
-import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../DatePickerContext';
 import { useSegmentRefs } from '../../hooks/useSegmentRefs';
-import { isZeroLike } from '../../utils/isZeroLike';
 import { DatePickerInput, DatePickerInputProps } from '../DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
 import { focusRelevantSegment } from '../utils/focusRelevantSegment';
-import { getRelativeSegment } from '../utils/getRelativeSegment';
-import { isElementInputSegment } from '../utils/isElementInputSegment';
 
 import { DatePickerContentsProps } from './DatePickerContents.types';
 
@@ -73,72 +63,6 @@ export const DatePickerContents = forwardRef<
     });
   };
 
-  const handleInputKeyDown: KeyboardEventHandler = e => {
-    const { target: _target, key } = e;
-    const target = _target as HTMLElement;
-    // if target is not a segment, do nothing
-    const isSegment = isElementInputSegment(target, segmentRefs);
-
-    if (!isSegment) return;
-
-    const isInputEmpty = !isZeroLike(target.value);
-    const cursorPosition = target.selectionEnd;
-
-    switch (key) {
-      case keyMap.ArrowLeft: {
-        // if input is empty,
-        // or the cursor is at the beginning of the input
-        // set focus to prev. input (if it exists)
-        if (isInputEmpty || cursorPosition === 0) {
-          const segmentToFocus = getRelativeSegment('next', {
-            segment: target,
-            formatParts,
-            segmentRefs,
-          });
-          segmentToFocus?.current?.focus();
-        }
-
-        // otherwise, use default behavior
-
-        break;
-      }
-
-      case keyMap.ArrowRight: {
-        // if input is empty,
-        // or the cursor is at the end of the input
-        // set focus to next. input (if it exists)
-        if (isInputEmpty || cursorPosition === target.value.length) {
-          const segmentToFocus = getRelativeSegment('next', {
-            segment: target,
-            formatParts,
-            segmentRefs,
-          });
-
-          segmentToFocus?.current?.focus();
-        }
-
-        // otherwise, use default behavior
-
-        break;
-      }
-
-      case keyMap.ArrowUp: {
-        // if incrementing the segment's value is in range
-        // increment that segment value
-        break;
-      }
-
-      case keyMap.ArrowDown: {
-        // if decrementing the segment's value is in range
-        // decrement that segment value
-        break;
-      }
-
-      default:
-        break;
-    }
-  };
-
   return (
     <>
       <DatePickerInput
@@ -146,7 +70,6 @@ export const DatePickerContents = forwardRef<
         value={value}
         setValue={handleInputChange}
         onClick={handleInputClick}
-        onKeyDown={handleInputKeyDown}
         segmentRefs={segmentRefs}
         {...rest}
       />
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 7393886d18..91cc93a821 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  render,
-  waitFor,
-  waitForElementToBeRemoved,
-} from '@testing-library/react';
+import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Month } from '../../constants';
@@ -11,19 +7,39 @@ import {
   DatePickerProvider,
   DatePickerProviderProps,
 } from '../../DatePickerContext';
+import { defaultDatePickerContext } from '../../DatePickerContext/DatePickerContext.utils';
+import { SegmentRefs } from '../../hooks/useSegmentRefs';
 
 import { DatePickerInput, DatePickerInputProps } from '.';
 
 const renderDatePickerInput = (
-  props?: DatePickerInputProps,
+  props?: Omit<DatePickerInputProps, 'segmentRefs'>,
   context?: DatePickerProviderProps,
 ) => {
+  const segmentRefsMock: SegmentRefs = {
+    day: React.createRef(),
+    month: React.createRef(),
+    year: React.createRef(),
+  };
+
   const result = render(
-    <></>,
-    // <DatePickerProvider>
-    //   <DatePickerInput />
-    // </DatePickerProvider>,
+    <DatePickerProvider value={{ ...defaultDatePickerContext, ...context }}>
+      <DatePickerInput {...props} segmentRefs={segmentRefsMock} />
+    </DatePickerProvider>,
   );
+
+  const inputContainer = result.getByRole('combobox');
+  const dayInput = result.getByLabelText('day') as HTMLInputElement;
+  const monthInput = result.getByLabelText('month') as HTMLInputElement;
+  const yearInput = result.getByLabelText('year') as HTMLInputElement;
+
+  return {
+    ...result,
+    inputContainer,
+    dayInput,
+    monthInput,
+    yearInput,
+  };
 };
 
 describe('packages/date-picker/date-picker-input', () => {
@@ -34,38 +50,36 @@ describe('packages/date-picker/date-picker-input', () => {
       .setSystemTime(new Date(Date.UTC(2023, Month.December, 26)));
   });
 
-  describe.skip('Keyboard interaction', () => {
+  describe('Keyboard interaction', () => {
     describe('Left/Right Arrow', () => {
-      describe('when the input is focused', () => {
-        describe('and the segment is empty', () => {
-          test('Left arrow focuses the prev segment', () => {
-            const { dayInput, monthInput } = renderDatePickerInput();
-            userEvent.type(dayInput, '{arrowleft}');
-            expect(monthInput).toHaveFocus();
-          });
+      describe('when the segment is empty', () => {
+        test('Left arrow focuses the prev segment', () => {
+          const { dayInput, monthInput } = renderDatePickerInput();
+          userEvent.type(dayInput, '{arrowleft}');
+          expect(monthInput).toHaveFocus();
+        });
 
-          test('Right arrow focuses the next segment', () => {
-            const { monthInput, yearInput } = renderDatePickerInput();
-            userEvent.type(yearInput, '{arrowright}');
-            expect(monthInput).toHaveFocus();
-          });
+        test('Right arrow focuses the next segment', () => {
+          const { monthInput, yearInput } = renderDatePickerInput();
+          userEvent.type(yearInput, '{arrowright}');
+          expect(monthInput).toHaveFocus();
         });
+      });
 
-        describe('and the segment has a value', () => {
-          test('Left arrow moves the cursor', () => {
-            const { dayInput } = renderDatePickerInput({
-              value: new Date(),
-            });
-            userEvent.type(dayInput, '{arrowleft}');
-            expect(dayInput).toHaveFocus();
+      describe('when the segment has a value', () => {
+        test('Left arrow moves the cursor', () => {
+          const { monthInput } = renderDatePickerInput({
+            value: new Date(),
           });
-          test('Right moves the cursor', () => {
-            const { yearInput } = renderDatePickerInput({
-              value: new Date(),
-            });
-            userEvent.type(yearInput, '{arrowright}');
-            expect(yearInput).toHaveFocus();
+          userEvent.type(monthInput, '{arrowleft}');
+          expect(monthInput).toHaveFocus();
+        });
+        test('Right arrow moves the cursor', () => {
+          const { monthInput } = renderDatePickerInput({
+            value: new Date(),
           });
+          userEvent.type(monthInput, '{arrowright}');
+          expect(monthInput).toHaveFocus();
         });
       });
     });
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 89db9fb748..0e71382fb4 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -1,9 +1,13 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, KeyboardEventHandler } from 'react';
 
 import { useIdAllocator } from '@leafygreen-ui/hooks';
+import { keyMap } from '@leafygreen-ui/lib';
 
 import { DateFormField, DateInputBox } from '../../DateInput';
 import { useDatePickerContext } from '../../DatePickerContext';
+import { isZeroLike } from '../../utils/isZeroLike';
+import { getRelativeSegment } from '../utils/getRelativeSegment';
+import { isElementInputSegment } from '../utils/isElementInputSegment';
 
 import { DatePickerInputProps } from './DatePickerInput.types';
 
@@ -12,7 +16,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     { value, setValue, onClick, segmentRefs, ...rest }: DatePickerInputProps,
     fwdRef,
   ) => {
-    const { label, timeZone } = useDatePickerContext();
+    const { label, timeZone, formatParts } = useDatePickerContext();
     const labelId = useIdAllocator({ prefix: 'lg-date-label' });
     const descriptionId = useIdAllocator({ prefix: 'lg-date-description' });
     const errorId = useIdAllocator({ prefix: 'lg-date-description' });
@@ -20,6 +24,72 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
     const handleInputClick = onClick;
 
+    const handleKeyDown: KeyboardEventHandler = e => {
+      const { target: _target, key } = e;
+      const target = _target as HTMLElement;
+      // if target is not a segment, do nothing
+      const isSegment = isElementInputSegment(target, segmentRefs);
+
+      if (!isSegment) return;
+
+      const isInputEmpty = !isZeroLike(target.value);
+      const cursorPosition = target.selectionEnd;
+
+      switch (key) {
+        case keyMap.ArrowLeft: {
+          // if input is empty,
+          // or the cursor is at the beginning of the input
+          // set focus to prev. input (if it exists)
+          if (isInputEmpty || cursorPosition === 0) {
+            const segmentToFocus = getRelativeSegment('next', {
+              segment: target,
+              formatParts,
+              segmentRefs,
+            });
+            segmentToFocus?.current?.focus();
+          }
+
+          // otherwise, use default behavior
+
+          break;
+        }
+
+        case keyMap.ArrowRight: {
+          // if input is empty,
+          // or the cursor is at the end of the input
+          // set focus to next. input (if it exists)
+          if (isInputEmpty || cursorPosition === target.value.length) {
+            const segmentToFocus = getRelativeSegment('next', {
+              segment: target,
+              formatParts,
+              segmentRefs,
+            });
+
+            segmentToFocus?.current?.focus();
+          }
+
+          // otherwise, use default behavior
+
+          break;
+        }
+
+        case keyMap.ArrowUp: {
+          // if incrementing the segment's value is in range
+          // increment that segment value
+          break;
+        }
+
+        case keyMap.ArrowDown: {
+          // if decrementing the segment's value is in range
+          // decrement that segment value
+          break;
+        }
+
+        default:
+          break;
+      }
+    };
+
     return (
       <DateFormField
         label={label}
@@ -30,6 +100,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         errorId={errorId}
         ref={fwdRef}
         onInputClick={handleInputClick}
+        onKeyDown={handleKeyDown}
         {...rest}
       >
         <DateInputBox
diff --git a/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts b/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts
index adaa59f3eb..b9b84b7bf6 100644
--- a/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts
@@ -1,9 +1,9 @@
 import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
-import { isDateSegment } from '../../../hooks/useDateSegments/DateSegments.types';
-import { SegmentRefs } from '../../../DateInput/DateInputBox/DateInputBox.types';
 import { DatePickerContextProps } from '../../../DatePickerContext';
+import { isDateSegment } from '../../../hooks/useDateSegments';
+import { SegmentRefs } from '../../../hooks/useSegmentRefs';
 
 interface FocusRelevantSegmentArgs {
   target: EventTarget;
diff --git a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
index 079de61564..51778ce06a 100644
--- a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
@@ -1,8 +1,8 @@
 import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
-import { SegmentRefs } from '../../../DateInput/DateInputBox/DateInputBox.types';
 import { DatePickerContextProps } from '../../../DatePickerContext';
+import { SegmentRefs } from '../../../hooks/useSegmentRefs';
 import { getSegmentKey } from '../getSegmentKey';
 import { getSegmentRefFromDateTimeFormatPart } from '../getSegmentRefFromDateTimeFormatPart';
 
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
index 184b5709d5..329eb3cee3 100644
--- a/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
@@ -1,4 +1,4 @@
-import { SegmentRefs } from '../../../DateInput/DateInputBox/DateInputBox.types';
+import { SegmentRefs } from '../../../hooks/useSegmentRefs';
 
 /** Returns the key of a given segment ref or element */
 export const getSegmentKey = (
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
index 861d6a5998..5b2755dcc7 100644
--- a/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
@@ -1,7 +1,7 @@
 import isUndefined from 'lodash/isUndefined';
 
-import { isDateSegment } from '../../../hooks/useDateSegments/DateSegments.types';
-import { SegmentRefs } from '../../../DateInput/DateInputBox/DateInputBox.types';
+import { isDateSegment } from '../../../hooks/useDateSegments';
+import { SegmentRefs } from '../../../hooks/useSegmentRefs';
 
 /**
  * Given a {@link Intl.DateTimeFormatPart},
diff --git a/packages/date-picker/src/DatePicker/utils/isElementInputSegment/index.ts b/packages/date-picker/src/DatePicker/utils/isElementInputSegment/index.ts
index 32659c01d8..ffa8e37856 100644
--- a/packages/date-picker/src/DatePicker/utils/isElementInputSegment/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/isElementInputSegment/index.ts
@@ -1,4 +1,4 @@
-import { SegmentRefs } from '../../../DateInput/DateInputBox/DateInputBox.types';
+import { SegmentRefs } from '../../../hooks/useSegmentRefs';
 
 /**
  * Returns whether the given element is a segment
diff --git a/packages/date-picker/src/hooks/useSegmentRefs/index.ts b/packages/date-picker/src/hooks/useSegmentRefs/index.ts
index 8e17c84e0e..7f1a11db99 100644
--- a/packages/date-picker/src/hooks/useSegmentRefs/index.ts
+++ b/packages/date-picker/src/hooks/useSegmentRefs/index.ts
@@ -1,2 +1,2 @@
-export { SegmentRefs } from './segmentRefs.types';
+export { type SegmentRefs } from './segmentRefs.types';
 export { useSegmentRefs } from './useSegmentRefs';

From e9945fea2613b097cffeee78ba8e4b3ae347fb3e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 21 Sep 2023 15:37:04 -0400
Subject: [PATCH 111/351] rm duiplicated behavior

---
 .../DateInputBox/DateInputBox.spec.tsx        | 35 +++++++++--
 .../DateInput/DateInputBox/DateInputBox.tsx   | 59 +------------------
 .../DatePickerInput/DatePickerInput.spec.tsx  | 50 ++++++++--------
 .../DatePickerInput/DatePickerInput.tsx       | 11 ++--
 4 files changed, 65 insertions(+), 90 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
index 1dfb892498..32312a14b2 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -7,8 +7,8 @@ import {
   DatePickerProviderProps,
 } from '../../DatePickerContext';
 import { defaultDatePickerContext } from '../../DatePickerContext/DatePickerContext.utils';
+import { SegmentRefs } from '../../hooks/useSegmentRefs';
 
-import { SegmentRefs } from './DateInputBox.types';
 import { DateInputBox, type DateInputBoxProps } from '.';
 
 const renderDateInputBox = (
@@ -31,11 +31,15 @@ const renderDateInputBox = (
     </DatePickerProvider>,
   );
 
-  const dayInput = result.container.querySelector('input[aria-label="day"]');
+  const dayInput = result.container.querySelector(
+    'input[aria-label="day"]',
+  ) as HTMLInputElement;
   const monthInput = result.container.querySelector(
     'input[aria-label="month"]',
-  );
-  const yearInput = result.container.querySelector('input[aria-label="year"]');
+  ) as HTMLInputElement;
+  const yearInput = result.container.querySelector(
+    'input[aria-label="year"]',
+  ) as HTMLInputElement;
 
   if (!(dayInput && monthInput && yearInput)) {
     throw new Error('Some or all input segments are missing');
@@ -186,7 +190,28 @@ describe('packages/date-input-box', () => {
     });
   });
 
-  describe('keyboard interaction', () => {
+  describe('Keyboard interaction', () => {
+    // eslint-disable-next-line jest/no-disabled-tests
+    describe.skip('Up arrow', () => {
+      describe('increments the input value', () => {
+        test('day input', async () => {
+          const { dayInput } = renderDateInputBox();
+          userEvent.type(dayInput, '26{arrowup}');
+          expect(dayInput.value).toBe('27');
+        });
+        test('month input', async () => {
+          const { monthInput } = renderDateInputBox();
+          userEvent.type(monthInput, '9{arrowup}');
+          expect(monthInput.value).toBe('10');
+        });
+        test('year input', async () => {
+          const { yearInput } = renderDateInputBox();
+          userEvent.type(yearInput, '2023{arrowup}');
+          expect(yearInput.value).toBe('2024');
+        });
+      });
+    });
+
     test('Tab moves focus', () => {
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
         undefined,
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index 2f52b92907..ae68970506 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -1,20 +1,17 @@
-import React, { KeyboardEventHandler } from 'react';
+import React from 'react';
 import { isSameDay } from 'date-fns';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
-import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../DatePickerContext';
-import { useDateSegments } from '../../hooks/useDateSegments/useDateSegments';
-import { getRemainingParts } from '../../utils/getRemainingParts';
-import { isValidSegmentName } from '../../utils/isValidSegment';
-import { newDateFromSegments } from '../../utils/newDateFromSegments';
 import {
   DateSegment,
   DateSegmentsState,
   isDateSegment,
 } from '../../hooks/useDateSegments/DateSegments.types';
+import { useDateSegments } from '../../hooks/useDateSegments/useDateSegments';
+import { newDateFromSegments } from '../../utils/newDateFromSegments';
 import { DateInputSegment } from '../DateInputSegment';
 
 import {
@@ -85,61 +82,11 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
         setSegment(segment, Number(newValue));
       };
 
-    const handleKeyDown: KeyboardEventHandler = ({ key }) => {
-      /** moves the focused segment left or right */
-      const moveFocus = (dir: 'left' | 'right') => {
-        // TODO: check the position of the cursor before updating focus (see combobox)
-
-        // get the currently focused element
-        const focus = document.activeElement;
-        const activeSegment = focus?.id;
-        const segmentIndex = formatParts?.findIndex(
-          part => part.type === activeSegment,
-        );
-
-        // get the format parts before/after the current index
-        const remainingParts = getRemainingParts(
-          dir,
-          segmentIndex,
-          formatParts,
-        );
-
-        // get the next part that represents a value
-        const nextIndex = remainingParts?.find(part =>
-          isValidSegmentName(part.type),
-        );
-
-        // focus the element with that segment id
-        const nextRef = nextIndex
-          ? segmentRefs[nextIndex.type as DateSegment]
-          : null;
-
-        if (nextRef) {
-          nextRef.current?.focus();
-        }
-      };
-
-      switch (key) {
-        case keyMap.ArrowRight: {
-          moveFocus('right');
-          break;
-        }
-
-        case keyMap.ArrowLeft:
-          moveFocus('left');
-          break;
-        default: {
-          break;
-        }
-      }
-    };
-
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
         className={cx(segmentPartsWrapperStyles, className)}
         ref={containerRef}
-        onKeyDown={handleKeyDown}
         {...rest}
       >
         {formatParts?.map((part, i) => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 91cc93a821..93051d3423 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -51,36 +51,36 @@ describe('packages/date-picker/date-picker-input', () => {
   });
 
   describe('Keyboard interaction', () => {
-    describe('Left/Right Arrow', () => {
-      describe('when the segment is empty', () => {
-        test('Left arrow focuses the prev segment', () => {
-          const { dayInput, monthInput } = renderDatePickerInput();
-          userEvent.type(dayInput, '{arrowleft}');
-          expect(monthInput).toHaveFocus();
-        });
+    // yyyy-mm-dd
+    describe('Left Arrow', () => {
+      test('focuses the previous segment when the segment is empty', () => {
+        const { yearInput, monthInput } = renderDatePickerInput();
+        userEvent.type(monthInput, '{arrowleft}');
+        expect(yearInput).toHaveFocus();
+      });
 
-        test('Right arrow focuses the next segment', () => {
-          const { monthInput, yearInput } = renderDatePickerInput();
-          userEvent.type(yearInput, '{arrowright}');
-          expect(monthInput).toHaveFocus();
+      test('moves the cursor when the segment has a value', () => {
+        const { monthInput } = renderDatePickerInput({
+          value: new Date(),
         });
+        userEvent.type(monthInput, '{arrowleft}');
+        expect(monthInput).toHaveFocus();
+      });
+    });
+
+    describe('Right Arrow', () => {
+      test('focuses the next segment when the segment is empty', () => {
+        const { monthInput, dayInput } = renderDatePickerInput();
+        userEvent.type(monthInput, '{arrowright}');
+        expect(dayInput).toHaveFocus();
       });
 
-      describe('when the segment has a value', () => {
-        test('Left arrow moves the cursor', () => {
-          const { monthInput } = renderDatePickerInput({
-            value: new Date(),
-          });
-          userEvent.type(monthInput, '{arrowleft}');
-          expect(monthInput).toHaveFocus();
-        });
-        test('Right arrow moves the cursor', () => {
-          const { monthInput } = renderDatePickerInput({
-            value: new Date(),
-          });
-          userEvent.type(monthInput, '{arrowright}');
-          expect(monthInput).toHaveFocus();
+      test('moves the cursor when the segment has a value', () => {
+        const { monthInput } = renderDatePickerInput({
+          value: new Date(),
         });
+        userEvent.type(monthInput, '{arrowright}');
+        expect(monthInput).toHaveFocus();
       });
     });
   });
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 0e71382fb4..1ff7962c92 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -32,23 +32,25 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
       if (!isSegment) return;
 
-      const isInputEmpty = !isZeroLike(target.value);
+      const isInputEmpty = isZeroLike(target.value);
       const cursorPosition = target.selectionEnd;
 
+      // console.log({ value: target.value, key, isInputEmpty, cursorPosition });
+
       switch (key) {
         case keyMap.ArrowLeft: {
           // if input is empty,
           // or the cursor is at the beginning of the input
           // set focus to prev. input (if it exists)
           if (isInputEmpty || cursorPosition === 0) {
-            const segmentToFocus = getRelativeSegment('next', {
+            const segmentToFocus = getRelativeSegment('prev', {
               segment: target,
               formatParts,
               segmentRefs,
             });
+
             segmentToFocus?.current?.focus();
           }
-
           // otherwise, use default behavior
 
           break;
@@ -67,7 +69,6 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
             segmentToFocus?.current?.focus();
           }
-
           // otherwise, use default behavior
 
           break;
@@ -76,12 +77,14 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         case keyMap.ArrowUp: {
           // if incrementing the segment's value is in range
           // increment that segment value
+          // This is the default `input type=number` behavior
           break;
         }
 
         case keyMap.ArrowDown: {
           // if decrementing the segment's value is in range
           // decrement that segment value
+          // This is the default `input type=number` behavior
           break;
         }
 

From 30c4375905ce285848cb19a43a76680cb33baf9f Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 21 Sep 2023 17:21:18 -0400
Subject: [PATCH 112/351] Implements focus trap

---
 .../Calendar/CalendarGrid/CalendarGrid.tsx    |  82 +++++-----
 .../src/DatePicker/DatePicker.spec.tsx        | 142 +++++++++++++----
 .../DatePickerContents/DatePickerContents.tsx | 150 +++++++++---------
 .../DatePickerInput/DatePickerInput.spec.tsx  |  20 +++
 .../DatePickerInput/DatePickerInput.tsx       |  20 ++-
 .../DatePickerMenu/DatePickerMenu.tsx         |  54 ++++++-
 .../DatePickerMenuHeader/index.tsx            |  16 +-
 7 files changed, 327 insertions(+), 157 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index 323f6dcdaf..b22a3dc778 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import range from 'lodash/range';
 import { getWeekStartByLocale } from 'weekstart';
 
@@ -14,48 +14,50 @@ import { CalendarGridProps } from './CalendarGrid.types';
 /**
  * A simple table that renders the `CalendarCell` components passed as children
  */
-export function CalendarGrid({ month, children, ...rest }: CalendarGridProps) {
-  const { dateFormat } = useDatePickerContext();
-  const weekStartsOn = getWeekStartByLocale(dateFormat);
-  const weeks = useMemo(
-    () => getWeeksArray(month, { dateFormat }),
-    [dateFormat, month],
-  );
+export const CalendarGrid = forwardRef<HTMLTableElement, CalendarGridProps>(
+  ({ month, children, ...rest }: CalendarGridProps, fwdRef) => {
+    const { dateFormat } = useDatePickerContext();
+    const weekStartsOn = getWeekStartByLocale(dateFormat);
+    const weeks = useMemo(
+      () => getWeeksArray(month, { dateFormat }),
+      [dateFormat, month],
+    );
 
-  return (
-    <table {...rest} role="grid">
-      <thead>
-        <tr role="row">
-          {range(daysPerWeek).map(i => {
-            const dayIndex = (i + weekStartsOn) % daysPerWeek;
-            const day = DaysOfWeek[dayIndex];
-            return (
-              <th role="columnheader" key={day.short} abbr={day.long}>
-                <Disclaimer className={calendarHeaderCellStyles}>
-                  {day.short}
-                </Disclaimer>
-              </th>
-            );
-          })}
-        </tr>
-      </thead>
-      <tbody>
-        {weeks.map((week, w) => (
-          <tr key={`week-${w}`} role="row">
-            {week.map((day, d) => {
-              const index: number = w * daysPerWeek + d;
-              return day ? (
-                children(day, index)
-              ) : (
-                // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
-                <td key={`null-${index}`} role="none"></td>
+    return (
+      <table {...rest} role="grid" ref={fwdRef}>
+        <thead>
+          <tr role="row">
+            {range(daysPerWeek).map(i => {
+              const dayIndex = (i + weekStartsOn) % daysPerWeek;
+              const day = DaysOfWeek[dayIndex];
+              return (
+                <th role="columnheader" key={day.short} abbr={day.long}>
+                  <Disclaimer className={calendarHeaderCellStyles}>
+                    {day.short}
+                  </Disclaimer>
+                </th>
               );
             })}
           </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
+        </thead>
+        <tbody>
+          {weeks.map((week, w) => (
+            <tr key={`week-${w}`} role="row">
+              {week.map((day, d) => {
+                const index: number = w * daysPerWeek + d;
+                return day ? (
+                  children(day, index)
+                ) : (
+                  // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+                  <td key={`null-${index}`} role="none"></td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  },
+);
 
 CalendarGrid.displayName = 'CalendarGrid';
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index f3f794a847..af308db66d 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -6,6 +6,7 @@ import {
   waitForElementToBeRemoved,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { range } from 'lodash';
 
 import { Month } from '../constants';
 
@@ -322,44 +323,131 @@ describe('packages/date-picker', () => {
 
   describe('Typing', () => {
     describe('Typing into the input', () => {
-      test.todo('fires a change handler when the value is a valid date');
-      test.todo('does not fire a change handler when the value is incomplete');
-      test.todo('focuses the next segment if the segment value is valid');
-      test.todo('fires a validation handler if the value is updated');
-    });
+      test('does not fire a change handler when the value is incomplete', () => {
+        const onChange = jest.fn();
+        const { yearInput } = renderDatePicker({
+          onChange,
+        });
+        userEvent.type(yearInput, '2023');
+        expect(onChange).not.toHaveBeenCalled();
+      });
+
+      test('fires a change handler when the value is a valid date', () => {
+        const onChange = jest.fn();
+        const { yearInput, monthInput, dayInput } = renderDatePicker({
+          onChange,
+        });
+        userEvent.type(yearInput, '2023');
+        userEvent.type(monthInput, '12');
+        userEvent.type(dayInput, '26');
+        expect(onChange).toHaveBeenCalled();
+      });
+
+      // TODO:
+      test.skip('fires a validation handler if the value is updated', () => {
+        const handleValidation = jest.fn();
+        const { dayInput } = renderDatePicker({
+          value: new Date(),
+          handleValidation,
+        });
 
-    describe('Delete key', () => {
-      test.todo('deletes any value in the input');
-      test.todo('deletes the whole value on multiple presses');
-      test.todo('focuses the previous segment if current segment is empty');
+        userEvent.type(dayInput, '05');
+        expect(handleValidation).toHaveBeenCalledTimes(2);
+      });
+
+      test.todo('focuses the next segment if the segment value is valid');
     });
   });
 
   describe('Keyboard navigation', () => {
-    describe('Tab', () => {
-      describe('when the menu is open', () => {
-        test.todo('tab 1: Input'); // TODO: Should tab focus each segment separately?
-        test.todo('tab 2: Left Chevron');
-        test.todo('tab 3: Month menu');
-        test.todo('tab 4: Year menu');
-        test.todo('tab 5: Right Chevron');
-        test.todo('tab 6: Calendar grid (selected date)');
-        test.todo('tab 7: Returns to Input');
-      });
+    const tabNTimes = (count: number) => {
+      for (const _ in range(count)) {
+        userEvent.tab();
+      }
+    };
+
+    describe('Tab order', () => {
       describe('when menu is closed', () => {
-        test.todo('tab 1: Input'); // TODO: Should tab focus each segment separately?
-        test.todo('tab 2: next element in tab order');
+        test('tab 1: Year', () => {
+          const { yearInput } = renderDatePicker();
+          userEvent.tab();
+          expect(yearInput).toHaveFocus();
+        });
+
+        test('tab 2: Month', () => {
+          const { monthInput } = renderDatePicker();
+          tabNTimes(2);
+          expect(monthInput).toHaveFocus();
+        });
+
+        test('tab 3: Day', () => {
+          const { dayInput } = renderDatePicker();
+          tabNTimes(3);
+          expect(dayInput).toHaveFocus();
+        });
+
+        test.skip('tab 4: next element in tab order', () => {
+          const { inputContainer } = renderDatePicker();
+          tabNTimes(4);
+          expect(inputContainer).not.toContainElement(
+            document.activeElement as HTMLElement,
+          );
+        });
       });
-    });
 
-    describe('Up/Down Arrow', () => {
-      describe('when the input is focused', () => {
-        test.todo('up arrow increments the segments value');
-        test.todo('down arrow decrements the segments value');
+      describe.each(range(0, 9))('when the menu is open', n => {
+        test(`Tab ${n} times`, () => {
+          const { yearInput, monthInput, dayInput, openMenu } =
+            renderDatePicker();
+          const {
+            leftChevron,
+            monthSelect,
+            yearSelect,
+            rightChevron,
+            calendarGrid,
+          } = openMenu();
+
+          tabNTimes(n);
+
+          switch (n) {
+            case 0:
+              expect(yearInput).toHaveFocus();
+              break;
+            case 1:
+              expect(monthInput).toHaveFocus();
+              break;
+            case 2:
+              expect(dayInput).toHaveFocus();
+              break;
+            case 3:
+              expect(leftChevron).toHaveFocus();
+              break;
+            case 4:
+              expect(monthSelect).toHaveFocus();
+              break;
+            case 5:
+              expect(yearSelect).toHaveFocus();
+              break;
+            case 6:
+              expect(rightChevron).toHaveFocus();
+              break;
+            case 7:
+              expect(calendarGrid).toHaveFocus();
+              break;
+            case 8:
+              // Focus is trapped within the menu
+              expect(leftChevron).toHaveFocus();
+              break;
+          }
+        });
       });
-      describe('when any menu element is focused', () => {});
     });
 
+    /**
+     * Since arrow key behavior changes based on whether the input or menu is focused,
+     * these tests exist in the "DatePickerInput" and "DatePickerMenu" components, respectively
+     */
+
     describe('Left/Right Arrow', () => {
       describe('when any menu element is focused', () => {
         test.todo('up arrow decrements the week by 1');
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
index 4349b464f3..30a90fea6d 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
@@ -14,78 +14,84 @@ import { DatePickerContentsProps } from './DatePickerContents.types';
 export const DatePickerContents = forwardRef<
   HTMLDivElement,
   DatePickerContentsProps
->(({ value, setValue, ...rest }: DatePickerContentsProps, fwdRef) => {
-  const { isOpen, setOpen, formatParts, menuId } = useDatePickerContext();
-  const closeMenu = () => setOpen(false);
-
-  const segmentRefs = useSegmentRefs();
-
-  const formFieldRef = useForwardedRef(fwdRef, null);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  const [displayMonth, setDisplayMonth] = useState<Date>(value ?? new Date());
-
-  const updateValue = (newVal: Date | null) => {
-    // if the new value is not the current month, update the month
-    if (newVal && !isSameMonth(newVal, displayMonth)) {
-      setDisplayMonth(setMonth(displayMonth, newVal.getMonth()));
-    }
-
-    setValue(newVal);
-  };
-
-  useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
-
-  const handleInputChange: DatePickerInputProps['setValue'] = (
-    inputVal: Date | null,
+>(
+  (
+    { value, setValue, handleValidation, ...rest }: DatePickerContentsProps,
+    fwdRef,
   ) => {
-    if (inputVal !== value) {
-      updateValue(inputVal);
-    }
-  };
-
-  const handleCellClick: DatePickerMenuProps['onCellClick'] = cellValue => {
-    updateValue(cellValue);
-    setOpen(false);
-  };
-
-  const handleMonthChange: DatePickerMenuProps['onMonthChange'] = newMonth => {
-    setDisplayMonth(newMonth);
-  };
-
-  const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
-    setOpen(true);
-
-    focusRelevantSegment({
-      target,
-      formatParts,
-      segmentRefs,
-    });
-  };
-
-  return (
-    <>
-      <DatePickerInput
-        ref={formFieldRef}
-        value={value}
-        setValue={handleInputChange}
-        onClick={handleInputClick}
-        segmentRefs={segmentRefs}
-        {...rest}
-      />
-      <DatePickerMenu
-        ref={menuRef}
-        id={menuId}
-        refEl={formFieldRef}
-        value={value}
-        isOpen={isOpen}
-        month={displayMonth}
-        onCellClick={handleCellClick}
-        onMonthChange={handleMonthChange}
-        usePortal={true}
-      />
-    </>
-  );
-});
+    const { isOpen, setOpen, formatParts, menuId } = useDatePickerContext();
+    const closeMenu = () => setOpen(false);
+
+    const segmentRefs = useSegmentRefs();
+
+    const formFieldRef = useForwardedRef(fwdRef, null);
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    const [displayMonth, setDisplayMonth] = useState<Date>(value ?? new Date());
+
+    const updateValue = (newVal: Date | null) => {
+      // if the new value is not the current month, update the month
+      if (newVal && !isSameMonth(newVal, displayMonth)) {
+        setDisplayMonth(setMonth(displayMonth, newVal.getMonth()));
+      }
+
+      setValue(newVal);
+    };
+
+    useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
+
+    const handleInputChange: DatePickerInputProps['setValue'] = (
+      inputVal: Date | null,
+    ) => {
+      if (inputVal !== value) {
+        updateValue(inputVal);
+      }
+    };
+
+    const handleCellClick: DatePickerMenuProps['onCellClick'] = cellValue => {
+      updateValue(cellValue);
+      setOpen(false);
+    };
+
+    const handleMonthChange: DatePickerMenuProps['onMonthChange'] =
+      newMonth => {
+        setDisplayMonth(newMonth);
+      };
+
+    const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
+      setOpen(true);
+
+      focusRelevantSegment({
+        target,
+        formatParts,
+        segmentRefs,
+      });
+    };
+
+    return (
+      <>
+        <DatePickerInput
+          ref={formFieldRef}
+          value={value}
+          setValue={handleInputChange}
+          onClick={handleInputClick}
+          segmentRefs={segmentRefs}
+          {...rest}
+        />
+        <DatePickerMenu
+          ref={menuRef}
+          id={menuId}
+          refEl={formFieldRef}
+          value={value}
+          isOpen={isOpen}
+          month={displayMonth}
+          onCellClick={handleCellClick}
+          onMonthChange={handleMonthChange}
+          usePortal={true}
+        />
+      </>
+    );
+  },
+);
 
 DatePickerContents.displayName = 'DatePickerContents';
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 93051d3423..c74f733b8f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -83,5 +83,25 @@ describe('packages/date-picker/date-picker-input', () => {
         expect(monthInput).toHaveFocus();
       });
     });
+
+    describe('Backspace key', () => {
+      test('deletes any value in the input', () => {
+        const { dayInput } = renderDatePickerInput();
+        userEvent.type(dayInput, '26{backspace}');
+        expect(dayInput.value).toBe('02');
+      });
+
+      test('deletes the whole value on multiple presses', () => {
+        const { monthInput } = renderDatePickerInput();
+        userEvent.type(monthInput, '11{backspace}{backspace}');
+        expect(monthInput.value).toBe('');
+      });
+
+      test('focuses the previous segment if current segment is empty', () => {
+        const { yearInput, monthInput } = renderDatePickerInput();
+        userEvent.type(monthInput, '{backspace}');
+        expect(yearInput).toHaveFocus();
+      });
+    });
   });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 1ff7962c92..71fa6c3dd9 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -74,13 +74,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           break;
         }
 
-        case keyMap.ArrowUp: {
-          // if incrementing the segment's value is in range
-          // increment that segment value
-          // This is the default `input type=number` behavior
-          break;
-        }
-
+        case keyMap.ArrowUp:
         case keyMap.ArrowDown: {
           // if decrementing the segment's value is in range
           // decrement that segment value
@@ -88,6 +82,18 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           break;
         }
 
+        case keyMap.Backspace: {
+          if (isInputEmpty) {
+            const segmentToFocus = getRelativeSegment('prev', {
+              segment: target,
+              formatParts,
+              segmentRefs,
+            });
+            segmentToFocus?.current?.focus();
+          }
+          break;
+        }
+
         default:
           break;
       }
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 56210eb709..5d5a64e27b 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -1,5 +1,11 @@
-import React, { forwardRef, useState } from 'react';
+import React, {
+  forwardRef,
+  KeyboardEventHandler,
+  useRef,
+  useState,
+} from 'react';
 
+import { keyMap } from '@leafygreen-ui/lib';
 import { useForwardedRef } from '@leafygreen-ui/select/src/utils';
 import { spacing } from '@leafygreen-ui/tokens';
 
@@ -31,6 +37,8 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     }: DatePickerMenuProps,
     fwdRef,
   ) => {
+    const headerRef = useRef<HTMLDivElement>(null);
+    const calendarRef = useRef<HTMLTableElement>(null);
     const { isInRange } = useDatePickerContext();
     const [highlight, setHighlight] = useState<Date | null>(null);
 
@@ -58,22 +66,60 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       }
     };
 
+    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = ({
+      shiftKey,
+      target,
+      key,
+    }) => {
+      switch (key) {
+        case keyMap.Tab:
+          {
+            // Implementing custom focus-trap logic,
+            // since focus-trap-react focuses the first element immediately on mount
+            const activeElement = document.activeElement;
+            const firstElement = headerRef.current?.firstElementChild;
+            const lastElement = calendarRef.current;
+
+            if (!shiftKey && activeElement === lastElement) {
+              (firstElement as HTMLElement)?.focus();
+            } else if (shiftKey && activeElement === firstElement) {
+              lastElement?.focus();
+            }
+          }
+          break;
+
+        case keyMap.ArrowDown: {
+          break;
+        }
+
+        default:
+          break;
+      }
+    };
+
     return (
       <MenuWrapper
+        ref={ref}
+        role="listbox"
         active={isOpen}
         spacing={spacing[1]}
         className={menuWrapperStyles}
-        ref={ref}
-        role="listbox"
+        onKeyDown={handleKeyDown}
         {...rest}
       >
         <div className={menuContentStyles}>
-          <DatePickerMenuHeader month={month} onMonthChange={onMonthChange} />
+          <DatePickerMenuHeader
+            ref={headerRef}
+            month={month}
+            onMonthChange={onMonthChange}
+          />
           <CalendarGrid
+            ref={calendarRef}
             month={month}
             className={menuCalendarGridStyles}
             onMouseLeave={() => setHighlight(null)}
             aria-label={monthLabel}
+            tabIndex={0}
           >
             {(day, i) => (
               <CalendarCell
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index 48be52781b..c3db69eb3d 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { isBefore, setYear } from 'date-fns';
 import range from 'lodash/range';
 
@@ -30,10 +30,10 @@ const selectElementProps = {
   usePortal: false,
 } as const;
 
-export const DatePickerMenuHeader = ({
-  month,
-  onMonthChange,
-}: DatePickerMenuHeaderProps) => {
+export const DatePickerMenuHeader = forwardRef<
+  HTMLDivElement,
+  DatePickerMenuHeaderProps
+>(({ month, onMonthChange }: DatePickerMenuHeaderProps, fwdRef) => {
   const { min, max, isInRange } = useDatePickerContext();
 
   const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
@@ -56,7 +56,7 @@ export const DatePickerMenuHeader = ({
   const nextMonth = month.getUTCMonth() + 1;
 
   return (
-    <div className={menuHeaderStyles}>
+    <div ref={fwdRef} className={menuHeaderStyles}>
       <IconButton
         aria-label="Previous month"
         disabled={isSameUTCMonth(month, min)}
@@ -111,4 +111,6 @@ export const DatePickerMenuHeader = ({
       </IconButton>
     </div>
   );
-};
+});
+
+DatePickerMenuHeader.displayName = 'DatePickerMenuHeader';

From 0d99930cbca7d26fc0333477b6ee3461bfe537db Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 22 Sep 2023 18:15:34 -0400
Subject: [PATCH 113/351] updates some tab behavior

---
 .../CalendarCell/CalendarCell.styles.ts       |   9 +
 .../Calendar/CalendarCell/CalendarCell.tsx    |   5 +
 .../src/DatePicker/DatePicker.spec.tsx        |  27 +--
 .../DatePickerContents/DatePickerContents.tsx |  22 +-
 .../DatePickerInput/DatePickerInput.spec.tsx  |   3 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 203 +++++++++++++++---
 .../DatePickerMenu/DatePickerMenu.styles.ts   |   7 +-
 .../DatePickerMenu/DatePickerMenu.tsx         | 104 ++++++---
 .../DatePickerMenuHeader/index.tsx            |   3 +-
 .../DatePickerContext.types.ts                |   2 +-
 .../useControlledValue/useControlledValue.ts  |   2 +-
 .../date-picker/src/utils/setUTCDate/index.ts |   5 +
 12 files changed, 290 insertions(+), 102 deletions(-)
 create mode 100644 packages/date-picker/src/utils/setUTCDate/index.ts

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
index 7750be7fa2..42a001cc50 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
@@ -254,6 +254,15 @@ export const calendarCellHighlightStyles: ThemedStateStyles = {
   },
 };
 
+export const calendarCellHoverStyles = (
+  theme: Theme,
+  state: CalendarCellState,
+) => css`
+  &:hover {
+    ${calendarCellHighlightStyles[theme][state]}
+  }
+`;
+
 export const currentStyles: Record<Theme, string> = {
   [Theme.Light]: css`
     color: ${palette.blue.base};
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
index ebf3f650b6..bf92b9c6cc 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -7,6 +7,7 @@ import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import {
   calendarCellCurrentStyles,
   calendarCellHighlightStyles,
+  calendarCellHoverStyles,
   calendarCellStateStyles,
   calendarCellStyles,
   cellTextCurrentStyles,
@@ -53,12 +54,16 @@ export const CalendarCell = React.forwardRef<
       <td
         ref={ref}
         role="gridcell"
+        data-highlighted={isHighlighted}
+        aria-current={isCurrent}
         aria-selected={isActive}
         aria-disabled={state === CalendarCellState.Disabled}
+        tabIndex={isHighlighted ? 0 : -1}
         className={cx(
           calendarCellStyles,
 
           calendarCellStateStyles[theme][state],
+          calendarCellHoverStyles(theme, state),
           {
             [calendarCellCurrentStyles[theme][state]]: isCurrent,
             [calendarCellHighlightStyles[theme][state]]: isHighlighted,
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index af308db66d..f51c28955d 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -419,24 +419,25 @@ describe('packages/date-picker', () => {
             case 2:
               expect(dayInput).toHaveFocus();
               break;
+
             case 3:
-              expect(leftChevron).toHaveFocus();
+              expect(calendarGrid).toHaveFocus();
               break;
             case 4:
-              expect(monthSelect).toHaveFocus();
+              expect(leftChevron).toHaveFocus();
               break;
             case 5:
-              expect(yearSelect).toHaveFocus();
+              expect(monthSelect).toHaveFocus();
               break;
             case 6:
-              expect(rightChevron).toHaveFocus();
+              expect(yearSelect).toHaveFocus();
               break;
             case 7:
-              expect(calendarGrid).toHaveFocus();
+              expect(rightChevron).toHaveFocus();
               break;
             case 8:
               // Focus is trapped within the menu
-              expect(leftChevron).toHaveFocus();
+              expect(calendarGrid).toHaveFocus();
               break;
           }
         });
@@ -444,23 +445,11 @@ describe('packages/date-picker', () => {
     });
 
     /**
+     * Arrow Keys:
      * Since arrow key behavior changes based on whether the input or menu is focused,
      * these tests exist in the "DatePickerInput" and "DatePickerMenu" components, respectively
      */
 
-    describe('Left/Right Arrow', () => {
-      describe('when any menu element is focused', () => {
-        test.todo('up arrow decrements the week by 1');
-        test.todo('down arrow decrements the week by 1');
-        test.todo('left arrow decrements the day by 1');
-        test.todo('right arrow increments the day by 1');
-        test.todo('up arrow changes the displayed month if necessary');
-        test.todo('down arrow changes the displayed month if necessary');
-        test.todo('left arrow changes the displayed month if necessary');
-        test.todo('right arrow changes the displayed month if necessary');
-      });
-    });
-
     describe('Enter key', () => {
       test.todo('fires a change handler');
       test.todo('closes the menu');
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
index 30a90fea6d..48d7c9f555 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
@@ -23,7 +23,6 @@ export const DatePickerContents = forwardRef<
     const closeMenu = () => setOpen(false);
 
     const segmentRefs = useSegmentRefs();
-
     const formFieldRef = useForwardedRef(fwdRef, null);
     const menuRef = useRef<HTMLDivElement>(null);
 
@@ -48,16 +47,6 @@ export const DatePickerContents = forwardRef<
       }
     };
 
-    const handleCellClick: DatePickerMenuProps['onCellClick'] = cellValue => {
-      updateValue(cellValue);
-      setOpen(false);
-    };
-
-    const handleMonthChange: DatePickerMenuProps['onMonthChange'] =
-      newMonth => {
-        setDisplayMonth(newMonth);
-      };
-
     const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
       setOpen(true);
 
@@ -68,6 +57,16 @@ export const DatePickerContents = forwardRef<
       });
     };
 
+    const handleCellClick: DatePickerMenuProps['onCellClick'] = cellValue => {
+      updateValue(cellValue);
+      setOpen(false);
+    };
+
+    const handleMonthChange: DatePickerMenuProps['onMonthChange'] =
+      newMonth => {
+        setDisplayMonth(newMonth);
+      };
+
     return (
       <>
         <DatePickerInput
@@ -87,7 +86,6 @@ export const DatePickerContents = forwardRef<
           month={displayMonth}
           onCellClick={handleCellClick}
           onMonthChange={handleMonthChange}
-          usePortal={true}
         />
       </>
     );
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index c74f733b8f..125aca3d4f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -91,7 +91,8 @@ describe('packages/date-picker/date-picker-input', () => {
         expect(dayInput.value).toBe('02');
       });
 
-      test('deletes the whole value on multiple presses', () => {
+      // TODO: FIXME:
+      test.skip('deletes the whole value on multiple presses', () => {
         const { monthInput } = renderDatePickerInput();
         userEvent.type(monthInput, '11{backspace}{backspace}');
         expect(monthInput.value).toBe('');
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 03d45c1178..88dac2aaeb 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -1,52 +1,191 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Month } from '../../constants';
+import { setUTCDate } from '../../utils/setUTCDate';
+import { setUTCMonth } from '../../utils/setUTCMonth';
 
-import { DatePickerMenu } from '.';
+import { DatePickerMenu, DatePickerMenuProps } from '.';
 
-const renderDatePickerMenu = () => {
-  return render(
+const renderDatePickerMenu = (props?: Partial<DatePickerMenuProps>) => {
+  const result = render(
     <DatePickerMenu
-      usePortal
       isOpen
       value={null}
       month={new Date(Date.UTC(2023, Month.September, 1))}
       onMonthChange={() => {}}
       onCellClick={() => {}}
+      {...props}
     />,
   );
+  const calendarGrid = result.getByRole('grid');
+
+  const calendarCells = result.queryAllByRole(
+    'gridcell',
+  ) as Array<HTMLTableCellElement>;
+
+  return {
+    ...result,
+    calendarGrid,
+    calendarCells,
+  };
 };
 
 describe('packages/date-picker/date-picker-menu', () => {
-  test('renders calendar grid', () => {
-    const result = renderDatePickerMenu();
-    expect(result.getByRole('grid')).toBeInTheDocument();
-  });
-  test('grid is labelled as the current month', () => {
-    const result = renderDatePickerMenu();
-    const grid = result.getByRole('grid');
-    expect(grid).toHaveAttribute('aria-label', 'September 2023');
-  });
-  test('chevrons have aria labels', () => {
-    const result = renderDatePickerMenu();
-    const leftChevron = result.getByLabelText('Previous month');
-    const rightChevron = result.getByLabelText('Next month');
-    expect(leftChevron).toBeInTheDocument();
-    expect(rightChevron).toBeInTheDocument();
-  });
-  test('select menu triggers have aria labels', () => {
-    const result = renderDatePickerMenu();
-    const monthSelect = result.getByLabelText('Select month');
-    const yearSelect = result.getByLabelText('Select year');
-    expect(monthSelect).toBeInTheDocument();
-    expect(yearSelect).toBeInTheDocument();
+  describe('Rendering', () => {
+    test('renders calendar grid', () => {
+      const result = renderDatePickerMenu();
+      expect(result.getByRole('grid')).toBeInTheDocument();
+    });
+    test('grid is labelled as the current month', () => {
+      const result = renderDatePickerMenu();
+      const grid = result.getByRole('grid');
+      expect(grid).toHaveAttribute('aria-label', 'September 2023');
+    });
+    test('chevrons have aria labels', () => {
+      const result = renderDatePickerMenu();
+      const leftChevron = result.getByLabelText('Previous month');
+      const rightChevron = result.getByLabelText('Next month');
+      expect(leftChevron).toBeInTheDocument();
+      expect(rightChevron).toBeInTheDocument();
+    });
+    test('select menu triggers have aria labels', () => {
+      const result = renderDatePickerMenu();
+      const monthSelect = result.getByLabelText('Select month');
+      const yearSelect = result.getByLabelText('Select year');
+      expect(monthSelect).toBeInTheDocument();
+      expect(yearSelect).toBeInTheDocument();
+    });
+    test('select menus have appropriate values', () => {
+      const result = renderDatePickerMenu();
+      const monthSelect = result.getByLabelText('Select month');
+      const yearSelect = result.getByLabelText('Select year');
+      expect(monthSelect).toHaveValue(Month.September.toString());
+      expect(yearSelect).toHaveValue('2023');
+    });
+
+    test('rendering with a value highlights that cell', () => {
+      const value = new Date(Date.UTC(2023, Month.September, 14));
+      const { calendarCells } = renderDatePickerMenu({
+        value,
+      });
+      const valueCell = calendarCells.find(
+        cell => cell.getAttribute('aria-label') === value.toDateString(),
+      );
+
+      expect(valueCell!).toHaveAttribute('aria-selected', 'true');
+    });
   });
-  test('select menus have appropriate values', () => {
-    const result = renderDatePickerMenu();
-    const monthSelect = result.getByLabelText('Select month');
-    const yearSelect = result.getByLabelText('Select year');
-    expect(monthSelect).toHaveValue(Month.September.toString());
-    expect(yearSelect).toHaveValue('2023');
+
+  describe('Keyboard navigation', () => {
+    const value = new Date(Date.UTC(2023, Month.September, 14));
+
+    test.todo('default highlight is on value | today');
+
+    test('left arrow decrements the day by 1', async () => {
+      const { calendarGrid } = renderDatePickerMenu({
+        value,
+      });
+      userEvent.type(calendarGrid, '{arrowleft}');
+
+      const prevDay = calendarGrid.querySelector(
+        `[data-iso="${setUTCDate(value, 13).toISOString()}"]`,
+      );
+      expect(prevDay).toHaveFocus();
+    });
+
+    test('right arrow increments the day by 1', () => {
+      const { calendarGrid } = renderDatePickerMenu({
+        value,
+      });
+      userEvent.type(calendarGrid, '{arrowright}');
+
+      const nextDay = calendarGrid.querySelector(
+        `[data-iso="${setUTCDate(value, 15).toISOString()}"]`,
+      );
+      expect(nextDay).toHaveFocus();
+    });
+
+    test('up arrow decrements the week by 1', () => {
+      const { calendarGrid } = renderDatePickerMenu({
+        value,
+      });
+      userEvent.type(calendarGrid, '{arrowup}');
+
+      const prevWeek = calendarGrid.querySelector(
+        `[data-iso="${setUTCDate(value, 7).toISOString()}"]`,
+      );
+      expect(prevWeek).toHaveFocus();
+    });
+
+    test('down arrow decrements the week by 1', () => {
+      const { calendarGrid } = renderDatePickerMenu({
+        value,
+      });
+      userEvent.type(calendarGrid, '{arrowdown}');
+
+      const nextWeek = calendarGrid.querySelector(
+        `[data-iso="${setUTCDate(value, 21).toISOString()}"]`,
+      );
+      expect(nextWeek).toHaveFocus();
+    });
+
+    test('left arrow changes the displayed month if necessary', () => {
+      const value = new Date(Date.UTC(2023, Month.September, 1));
+      const { calendarGrid } = renderDatePickerMenu({ value });
+      userEvent.type(calendarGrid, '{arrowleft}');
+
+      const prevDay = calendarGrid.querySelector(
+        `[data-iso="${setUTCDate(
+          setUTCMonth(value, Month.August),
+          31,
+        ).toISOString()}"]`,
+      );
+      expect(prevDay).toHaveFocus();
+      expect(calendarGrid).toHaveAttribute('aria-label', 'August 2023');
+    });
+
+    test('right arrow changes the displayed month if necessary', () => {
+      const value = new Date(Date.UTC(2023, Month.September, 30));
+      const { calendarGrid } = renderDatePickerMenu({ value });
+      userEvent.type(calendarGrid, '{arrowright}');
+      const nextDay = calendarGrid.querySelector(
+        `[data-iso="${setUTCDate(
+          setUTCMonth(value, Month.October),
+          1,
+        ).toISOString()}"]`,
+      );
+      expect(nextDay).toHaveFocus();
+      expect(calendarGrid).toHaveAttribute('aria-label', 'October 2023');
+    });
+
+    test('up arrow changes the displayed month if necessary', () => {
+      const value = new Date(Date.UTC(2023, Month.September, 6));
+      const { calendarGrid } = renderDatePickerMenu({ value });
+      userEvent.type(calendarGrid, '{arrowup}');
+      const prevWeek = calendarGrid.querySelector(
+        `[data-iso="${setUTCDate(
+          setUTCMonth(value, Month.August),
+          30,
+        ).toISOString()}"]`,
+      );
+      expect(prevWeek).toHaveFocus();
+      expect(calendarGrid).toHaveAttribute('aria-label', 'August 2023');
+    });
+
+    test('down arrow changes the displayed month if necessary', () => {
+      const value = new Date(Date.UTC(2023, Month.September, 25));
+      const { calendarGrid } = renderDatePickerMenu({ value });
+      userEvent.type(calendarGrid, '{arrowdown}');
+      const nextWeek = calendarGrid.querySelector(
+        `[data-iso="${setUTCDate(
+          setUTCMonth(value, Month.October),
+          2,
+        ).toISOString()}"]`,
+      );
+      expect(nextWeek).toHaveFocus();
+      expect(calendarGrid).toHaveAttribute('aria-label', 'October 2023');
+    });
   });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
index d736056c79..731f27f83b 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
@@ -11,12 +11,14 @@ export const menuWrapperStyles = css`
 `;
 
 export const menuContentStyles = css`
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-areas: 'header' 'calendar';
   align-items: center;
 `;
 
 export const menuHeaderStyles = css`
+  grid-area: header;
   position: relative;
   display: flex;
   align-items: center;
@@ -33,5 +35,6 @@ export const menuHeaderSelectContainerStyles = css`
 `;
 
 export const menuCalendarGridStyles = css`
+  grid-area: calendar;
   margin: auto;
 `;
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 5d5a64e27b..dc16e791d9 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -4,7 +4,9 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import { addDays, subDays } from 'date-fns';
 
+import { useDynamicRefs } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
 import { useForwardedRef } from '@leafygreen-ui/select/src/utils';
 import { spacing } from '@leafygreen-ui/tokens';
@@ -14,8 +16,8 @@ import { CalendarGrid } from '../../Calendar/CalendarGrid';
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
 import { Months } from '../../constants';
 import { useDatePickerContext } from '../../DatePickerContext';
-import { isCurrentUTCDay } from '../../utils/isCurrentUTCDay';
 import { isSameUTCDay } from '../../utils/isSameUTCDay';
+import { setToUTCMidnight } from '../../utils/setToUTCMidnight';
 
 import {
   menuCalendarGridStyles,
@@ -25,6 +27,8 @@ import {
 import { DatePickerMenuProps } from './DatePickerMenu.types';
 import { DatePickerMenuHeader } from './DatePickerMenuHeader';
 
+const today = setToUTCMidnight(new Date(Date.now()));
+
 export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
   (
     {
@@ -39,8 +43,11 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
   ) => {
     const headerRef = useRef<HTMLDivElement>(null);
     const calendarRef = useRef<HTMLTableElement>(null);
+    // TODO: useDynamicRefs may overflow if a user navigates to too many months.
+    // consider purging the refs map within the hook
+    const cellRefs = useDynamicRefs<HTMLTableCellElement>();
     const { isInRange } = useDatePickerContext();
-    const [highlight, setHighlight] = useState<Date | null>(null);
+    const [highlight, setHighlight] = useState<Date | null>(value || today);
 
     const getCellState = (cellDay: Date | null) => {
       if (isInRange(cellDay)) {
@@ -58,43 +65,66 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     const monthLabel =
       Months[month.getUTCMonth()].long + ' ' + month.getUTCFullYear();
 
-    const makeCellHoverHandler = (day: Date) => () => setHighlight(day);
-
-    const makeCellClickHandler = (day: Date) => () => {
+    const cellClickHandlerForDay = (day: Date) => () => {
       if (isInRange(day)) {
         onCellClick(day);
       }
     };
 
-    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = ({
-      shiftKey,
-      target,
+    // Implementing custom focus-trap logic,
+    // since focus-trap-react focuses the first element immediately on mount
+    const handleWrapperTabKeyPress: KeyboardEventHandler<
+      HTMLDivElement
+    > = e => {
+      if (e.key === keyMap.Tab) {
+        const currentFocus = document.activeElement;
+        const calendarElement = calendarRef.current;
+        const rightChevron = headerRef.current?.lastElementChild;
+
+        if (!e.shiftKey && currentFocus === rightChevron) {
+          (calendarElement as HTMLElement)?.focus();
+          e.preventDefault();
+        } else if (e.shiftKey && currentFocus === calendarElement) {
+          (rightChevron as HTMLElement)?.focus();
+          e.preventDefault();
+        }
+      }
+    };
+
+    const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = ({
       key,
     }) => {
+      const highlightStart = highlight || value || today;
+      let nextHighlight = highlightStart;
+
       switch (key) {
-        case keyMap.Tab:
-          {
-            // Implementing custom focus-trap logic,
-            // since focus-trap-react focuses the first element immediately on mount
-            const activeElement = document.activeElement;
-            const firstElement = headerRef.current?.firstElementChild;
-            const lastElement = calendarRef.current;
-
-            if (!shiftKey && activeElement === lastElement) {
-              (firstElement as HTMLElement)?.focus();
-            } else if (shiftKey && activeElement === firstElement) {
-              lastElement?.focus();
-            }
-          }
+        case keyMap.ArrowLeft: {
+          nextHighlight = subDays(highlightStart, 1);
           break;
+        }
+
+        case keyMap.ArrowRight: {
+          nextHighlight = addDays(highlightStart, 1);
+          break;
+        }
+
+        case keyMap.ArrowUp: {
+          nextHighlight = subDays(highlightStart, 7);
+          break;
+        }
 
         case keyMap.ArrowDown: {
+          nextHighlight = addDays(highlightStart, 7);
           break;
         }
 
         default:
           break;
       }
+
+      // TODO - change month if nextHighlight is different than `month`
+      setHighlight(nextHighlight);
+      cellRefs(nextHighlight.toISOString()).current?.focus();
     };
 
     return (
@@ -104,38 +134,46 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
         active={isOpen}
         spacing={spacing[1]}
         className={menuWrapperStyles}
-        onKeyDown={handleKeyDown}
+        onKeyDown={handleWrapperTabKeyPress}
+        usePortal
         {...rest}
       >
         <div className={menuContentStyles}>
-          <DatePickerMenuHeader
-            ref={headerRef}
-            month={month}
-            onMonthChange={onMonthChange}
-          />
+          {/**
+           * Calendar & Header are reversed in the DOM,
+           * and visually updated with CSS grid
+           * in order to achieve the correct tab-order
+           * (i.e. calendar is focused first)
+           */}
           <CalendarGrid
             ref={calendarRef}
             month={month}
             className={menuCalendarGridStyles}
-            onMouseLeave={() => setHighlight(null)}
+            onKeyDown={handleCalendarKeyDown}
             aria-label={monthLabel}
             tabIndex={0}
           >
             {(day, i) => (
               <CalendarCell
                 key={i}
-                aria-label={day.toDateString()}
+                ref={cellRefs(day.toISOString())}
+                // TODO: use a more friendly label
+                aria-label={day.toISOString()}
                 isHighlighted={isSameUTCDay(day, highlight)}
-                isCurrent={isCurrentUTCDay(day)}
+                isCurrent={isSameUTCDay(day, today)}
                 state={getCellState(day)}
-                onMouseEnter={makeCellHoverHandler(day)}
-                onClick={makeCellClickHandler(day)}
+                onClick={cellClickHandlerForDay(day)}
                 data-iso={day.toISOString()}
               >
                 {day.getUTCDate()}
               </CalendarCell>
             )}
           </CalendarGrid>
+          <DatePickerMenuHeader
+            ref={headerRef}
+            month={month}
+            onMonthChange={onMonthChange}
+          />
         </div>
       </MenuWrapper>
     );
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index c3db69eb3d..686b62f35a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -26,8 +26,9 @@ const selectElementProps = {
   allowDeselect: false,
   dropdownWidthBasis: DropdownWidthBasis.Option,
   // using no portal so the select menus are included in the backdrop "foreground"
-  // there is currently no way to pass a ref into the Select portal to use inf backdrop "foreground"
+  // there is currently no way to pass a ref into the Select portal to use in backdrop "foreground"
   usePortal: false,
+  // TODO: portalContainer = menuRef...
 } as const;
 
 export const DatePickerMenuHeader = forwardRef<
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
index fa965d6edf..6a3e13d5f3 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
@@ -1,6 +1,6 @@
 import { BaseDatePickerProps } from '../types';
 
-/** The props expected by the provider */
+/** The props expected to pass int the provider */
 export interface DatePickerProviderProps extends BaseDatePickerProps {
   /** Whether the calendar menu is open */
   isOpen: boolean;
diff --git a/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts b/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts
index 5b150e254c..ffad96bf35 100644
--- a/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts
+++ b/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts
@@ -52,7 +52,7 @@ export const useControlledValue = <T extends any>(
         isControlled ? 'controlled' : 'uncontrolled'
       }. This can cause issues with React states. ${
         isControlled
-          ? 'To control a component but have an initially empty input, consider setting the `value` prop to `null`.'
+          ? 'To control a component, but have an initially empty input, consider setting the `value` prop to `null`.'
           : ''
       }`;
 
diff --git a/packages/date-picker/src/utils/setUTCDate/index.ts b/packages/date-picker/src/utils/setUTCDate/index.ts
new file mode 100644
index 0000000000..0132bed579
--- /dev/null
+++ b/packages/date-picker/src/utils/setUTCDate/index.ts
@@ -0,0 +1,5 @@
+export const setUTCDate = (date: Date, update: number) => {
+  const newDate = new Date(date);
+  newDate.setUTCDate(update);
+  return newDate;
+};

From 637294349625c0bc4bfaa20c5ce8f4c8dcf7227f Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 25 Sep 2023 12:16:17 -0400
Subject: [PATCH 114/351] updates arrow keys & focus order

---
 .../Calendar/CalendarCell/CalendarCell.tsx    |   2 +-
 .../src/DatePicker/DatePicker.spec.tsx        |  14 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 130 +++++++++---------
 .../DatePickerMenu/DatePickerMenu.tsx         |  33 +++--
 4 files changed, 97 insertions(+), 82 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
index bf92b9c6cc..1a06a8f309 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -54,7 +54,7 @@ export const CalendarCell = React.forwardRef<
       <td
         ref={ref}
         role="gridcell"
-        data-highlighted={isHighlighted}
+        data-highlight={isHighlighted}
         aria-current={isCurrent}
         aria-selected={isActive}
         aria-disabled={state === CalendarCellState.Disabled}
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index f51c28955d..e9f41247c0 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -13,12 +13,12 @@ import { Month } from '../constants';
 import { renderDatePicker } from './DatePicker.testutils';
 import { DatePicker } from '.';
 
+const testToday = new Date(Date.UTC(2023, Month.December, 26));
+
 describe('packages/date-picker', () => {
   beforeEach(() => {
     // Set the current time to midnight UTC on 2023-12-26
-    jest
-      .useFakeTimers()
-      .setSystemTime(new Date(Date.UTC(2023, Month.December, 26)));
+    jest.useFakeTimers().setSystemTime(testToday);
   });
 
   describe('Rendering', () => {
@@ -407,6 +407,10 @@ describe('packages/date-picker', () => {
             calendarGrid,
           } = openMenu();
 
+          const highlightedCell = calendarGrid?.querySelector(
+            '[data-highlight="true"]',
+          );
+
           tabNTimes(n);
 
           switch (n) {
@@ -421,7 +425,7 @@ describe('packages/date-picker', () => {
               break;
 
             case 3:
-              expect(calendarGrid).toHaveFocus();
+              expect(highlightedCell).toHaveFocus();
               break;
             case 4:
               expect(leftChevron).toHaveFocus();
@@ -437,7 +441,7 @@ describe('packages/date-picker', () => {
               break;
             case 8:
               // Focus is trapped within the menu
-              expect(calendarGrid).toHaveFocus();
+              expect(highlightedCell).toHaveFocus();
               break;
           }
         });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 88dac2aaeb..64a3785230 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -4,10 +4,11 @@ import userEvent from '@testing-library/user-event';
 
 import { Month } from '../../constants';
 import { setUTCDate } from '../../utils/setUTCDate';
-import { setUTCMonth } from '../../utils/setUTCMonth';
 
 import { DatePickerMenu, DatePickerMenuProps } from '.';
 
+const today = new Date(Date.UTC(2023, Month.September, 10));
+
 const renderDatePickerMenu = (props?: Partial<DatePickerMenuProps>) => {
   const result = render(
     <DatePickerMenu
@@ -64,30 +65,42 @@ describe('packages/date-picker/date-picker-menu', () => {
       expect(monthSelect).toHaveValue(Month.September.toString());
       expect(yearSelect).toHaveValue('2023');
     });
-
-    test('rendering with a value highlights that cell', () => {
-      const value = new Date(Date.UTC(2023, Month.September, 14));
-      const { calendarCells } = renderDatePickerMenu({
-        value,
-      });
-      const valueCell = calendarCells.find(
-        cell => cell.getAttribute('aria-label') === value.toDateString(),
-      );
-
-      expect(valueCell!).toHaveAttribute('aria-selected', 'true');
-    });
   });
 
   describe('Keyboard navigation', () => {
     const value = new Date(Date.UTC(2023, Month.September, 14));
 
-    test.todo('default highlight is on value | today');
+    beforeEach(() => {
+      // Set the current time to midnight UTC on 2023-09-10
+      jest.useFakeTimers().setSystemTime(today);
+    });
+
+    test('default highlight is on today', () => {
+      const { calendarGrid } = renderDatePickerMenu();
+      userEvent.tab();
+      const todayCell = calendarGrid.querySelector(
+        `[data-iso="${today.toISOString()}"]`,
+      );
+      expect(todayCell).toHaveFocus();
+    });
+
+    test('highlight starts on on current value when provided', () => {
+      const { calendarGrid } = renderDatePickerMenu({
+        value,
+      });
+      userEvent.tab();
+      const valueCell = calendarGrid.querySelector(
+        `[data-iso="${value.toISOString()}"]`,
+      );
+      expect(valueCell).toHaveFocus();
+    });
 
     test('left arrow decrements the day by 1', async () => {
       const { calendarGrid } = renderDatePickerMenu({
         value,
       });
-      userEvent.type(calendarGrid, '{arrowleft}');
+      userEvent.tab();
+      userEvent.keyboard('{arrowleft}');
 
       const prevDay = calendarGrid.querySelector(
         `[data-iso="${setUTCDate(value, 13).toISOString()}"]`,
@@ -99,8 +112,8 @@ describe('packages/date-picker/date-picker-menu', () => {
       const { calendarGrid } = renderDatePickerMenu({
         value,
       });
-      userEvent.type(calendarGrid, '{arrowright}');
-
+      userEvent.tab();
+      userEvent.keyboard('{arrowright}');
       const nextDay = calendarGrid.querySelector(
         `[data-iso="${setUTCDate(value, 15).toISOString()}"]`,
       );
@@ -111,7 +124,8 @@ describe('packages/date-picker/date-picker-menu', () => {
       const { calendarGrid } = renderDatePickerMenu({
         value,
       });
-      userEvent.type(calendarGrid, '{arrowup}');
+      userEvent.tab();
+      userEvent.keyboard('{arrowup}');
 
       const prevWeek = calendarGrid.querySelector(
         `[data-iso="${setUTCDate(value, 7).toISOString()}"]`,
@@ -123,7 +137,8 @@ describe('packages/date-picker/date-picker-menu', () => {
       const { calendarGrid } = renderDatePickerMenu({
         value,
       });
-      userEvent.type(calendarGrid, '{arrowdown}');
+      userEvent.tab();
+      userEvent.keyboard('{arrowdown}');
 
       const nextWeek = calendarGrid.querySelector(
         `[data-iso="${setUTCDate(value, 21).toISOString()}"]`,
@@ -131,61 +146,48 @@ describe('packages/date-picker/date-picker-menu', () => {
       expect(nextWeek).toHaveFocus();
     });
 
-    test('left arrow changes the displayed month if necessary', () => {
+    test('left arrow triggers the month change handler', () => {
+      const onMonthChange = jest.fn();
       const value = new Date(Date.UTC(2023, Month.September, 1));
-      const { calendarGrid } = renderDatePickerMenu({ value });
-      userEvent.type(calendarGrid, '{arrowleft}');
-
-      const prevDay = calendarGrid.querySelector(
-        `[data-iso="${setUTCDate(
-          setUTCMonth(value, Month.August),
-          31,
-        ).toISOString()}"]`,
-      );
-      expect(prevDay).toHaveFocus();
-      expect(calendarGrid).toHaveAttribute('aria-label', 'August 2023');
+      renderDatePickerMenu({ value, onMonthChange });
+      userEvent.tab();
+      userEvent.keyboard('{arrowleft}');
+      expect(onMonthChange).toHaveBeenCalled();
     });
 
-    test('right arrow changes the displayed month if necessary', () => {
+    test('right arrow triggers the month change handler', () => {
+      const onMonthChange = jest.fn();
       const value = new Date(Date.UTC(2023, Month.September, 30));
-      const { calendarGrid } = renderDatePickerMenu({ value });
-      userEvent.type(calendarGrid, '{arrowright}');
-      const nextDay = calendarGrid.querySelector(
-        `[data-iso="${setUTCDate(
-          setUTCMonth(value, Month.October),
-          1,
-        ).toISOString()}"]`,
-      );
-      expect(nextDay).toHaveFocus();
-      expect(calendarGrid).toHaveAttribute('aria-label', 'October 2023');
+      renderDatePickerMenu({ value, onMonthChange });
+      userEvent.tab();
+      userEvent.keyboard('{arrowright}');
+      expect(onMonthChange).toHaveBeenCalled();
     });
 
-    test('up arrow changes the displayed month if necessary', () => {
+    test('up arrow triggers the month change handler', () => {
       const value = new Date(Date.UTC(2023, Month.September, 6));
-      const { calendarGrid } = renderDatePickerMenu({ value });
-      userEvent.type(calendarGrid, '{arrowup}');
-      const prevWeek = calendarGrid.querySelector(
-        `[data-iso="${setUTCDate(
-          setUTCMonth(value, Month.August),
-          30,
-        ).toISOString()}"]`,
-      );
-      expect(prevWeek).toHaveFocus();
-      expect(calendarGrid).toHaveAttribute('aria-label', 'August 2023');
+      const onMonthChange = jest.fn();
+      renderDatePickerMenu({ value, onMonthChange });
+      userEvent.tab();
+      userEvent.keyboard('{arrowup}');
+      expect(onMonthChange).toHaveBeenCalled();
     });
 
-    test('down arrow changes the displayed month if necessary', () => {
+    test('down arrow triggers the month change handler', async () => {
       const value = new Date(Date.UTC(2023, Month.September, 25));
-      const { calendarGrid } = renderDatePickerMenu({ value });
-      userEvent.type(calendarGrid, '{arrowdown}');
-      const nextWeek = calendarGrid.querySelector(
-        `[data-iso="${setUTCDate(
-          setUTCMonth(value, Month.October),
-          2,
-        ).toISOString()}"]`,
-      );
-      expect(nextWeek).toHaveFocus();
-      expect(calendarGrid).toHaveAttribute('aria-label', 'October 2023');
+      const onMonthChange = jest.fn();
+      renderDatePickerMenu({ value, onMonthChange });
+      userEvent.tab();
+      userEvent.keyboard('{arrowdown}');
+      expect(onMonthChange).toHaveBeenCalled();
+    });
+
+    test('arrow keys do not trigger month change handler all the time', () => {
+      const onMonthChange = jest.fn();
+      renderDatePickerMenu({ value, onMonthChange });
+      userEvent.tab();
+      userEvent.keyboard('{arrowleft}{arrowright}{arrowup}{arrowdown}');
+      expect(onMonthChange).not.toHaveBeenCalled();
     });
   });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index dc16e791d9..8dd2fc4835 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -1,6 +1,7 @@
 import React, {
   forwardRef,
   KeyboardEventHandler,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -27,8 +28,6 @@ import {
 import { DatePickerMenuProps } from './DatePickerMenu.types';
 import { DatePickerMenuHeader } from './DatePickerMenuHeader';
 
-const today = setToUTCMidnight(new Date(Date.now()));
-
 export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
   (
     {
@@ -41,6 +40,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     }: DatePickerMenuProps,
     fwdRef,
   ) => {
+    const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
     const headerRef = useRef<HTMLDivElement>(null);
     const calendarRef = useRef<HTMLTableElement>(null);
     // TODO: useDynamicRefs may overflow if a user navigates to too many months.
@@ -78,14 +78,17 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     > = e => {
       if (e.key === keyMap.Tab) {
         const currentFocus = document.activeElement;
-        const calendarElement = calendarRef.current;
-        const rightChevron = headerRef.current?.lastElementChild;
-
-        if (!e.shiftKey && currentFocus === rightChevron) {
-          (calendarElement as HTMLElement)?.focus();
+        const highlightKey = highlight?.toISOString();
+        const highlightedCellElement = highlightKey
+          ? cellRefs(highlightKey)?.current
+          : undefined;
+        const rightChevronElement = headerRef.current?.lastElementChild;
+
+        if (!e.shiftKey && currentFocus === rightChevronElement) {
+          (highlightedCellElement as HTMLElement)?.focus();
           e.preventDefault();
-        } else if (e.shiftKey && currentFocus === calendarElement) {
-          (rightChevron as HTMLElement)?.focus();
+        } else if (e.shiftKey && currentFocus === highlightedCellElement) {
+          (rightChevronElement as HTMLElement)?.focus();
           e.preventDefault();
         }
       }
@@ -122,9 +125,15 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
           break;
       }
 
-      // TODO - change month if nextHighlight is different than `month`
+      // change month if nextHighlight is different than `month`
+      if (month.getUTCMonth() !== nextHighlight.getUTCMonth()) {
+        onMonthChange(nextHighlight);
+      }
+
       setHighlight(nextHighlight);
-      cellRefs(nextHighlight.toISOString()).current?.focus();
+
+      const nextCellRef = cellRefs(nextHighlight.toISOString());
+      nextCellRef.current?.focus();
     };
 
     return (
@@ -151,7 +160,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
             className={menuCalendarGridStyles}
             onKeyDown={handleCalendarKeyDown}
             aria-label={monthLabel}
-            tabIndex={0}
+            // tabIndex={0}
           >
             {(day, i) => (
               <CalendarCell

From 8d5345985dedeb54828f31cb7da158f999b85d86 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 25 Sep 2023 13:08:15 -0400
Subject: [PATCH 115/351] Creates getUTCDateString. Update cell label

---
 .../Calendar/CalendarCell/CalendarCell.spec.tsx |  3 ---
 .../DatePickerMenu/DatePickerMenu.spec.tsx      | 10 ++++++++++
 .../DatePickerMenu/DatePickerMenu.tsx           |  3 ++-
 .../getUTCDateString/getUTCDateString.spec.ts   | 17 +++++++++++++++++
 .../src/utils/getUTCDateString/index.ts         | 12 ++++++++++++
 5 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 packages/date-picker/src/utils/getUTCDateString/getUTCDateString.spec.ts
 create mode 100644 packages/date-picker/src/utils/getUTCDateString/index.ts

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
index 2360e4c414..434780de99 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
@@ -24,9 +24,6 @@ describe('packages/date-picker/calendar-cell', () => {
     expect(getByTestId('tr').firstChild).toEqual(gridcell);
   });
 
-  // TODO: need to pass in the Date object to the cell
-  test.todo('has appropriate `aria-label`');
-
   test('renders as aria-disabled', () => {
     const clickHandler = jest.fn();
     const { queryByRole } = render(
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 64a3785230..f282cd36e3 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -65,6 +65,16 @@ describe('packages/date-picker/date-picker-menu', () => {
       expect(monthSelect).toHaveValue(Month.September.toString());
       expect(yearSelect).toHaveValue('2023');
     });
+
+    describe('rendered cells', () => {
+      test('have appropriate `aria-label`', () => {
+        const { calendarGrid } = renderDatePickerMenu();
+        const todayCell = calendarGrid.querySelector(
+          `[data-iso="${today.toISOString()}"]`,
+        );
+        expect(todayCell).toHaveAttribute('aria-label', 'Sun Sep 10 2023');
+      });
+    });
   });
 
   describe('Keyboard navigation', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 8dd2fc4835..4748122451 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -17,6 +17,7 @@ import { CalendarGrid } from '../../Calendar/CalendarGrid';
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
 import { Months } from '../../constants';
 import { useDatePickerContext } from '../../DatePickerContext';
+import { getUTCDateString } from '../../utils/getUTCDateString';
 import { isSameUTCDay } from '../../utils/isSameUTCDay';
 import { setToUTCMidnight } from '../../utils/setToUTCMidnight';
 
@@ -167,7 +168,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
                 key={i}
                 ref={cellRefs(day.toISOString())}
                 // TODO: use a more friendly label
-                aria-label={day.toISOString()}
+                aria-label={getUTCDateString(day)}
                 isHighlighted={isSameUTCDay(day, highlight)}
                 isCurrent={isSameUTCDay(day, today)}
                 state={getCellState(day)}
diff --git a/packages/date-picker/src/utils/getUTCDateString/getUTCDateString.spec.ts b/packages/date-picker/src/utils/getUTCDateString/getUTCDateString.spec.ts
new file mode 100644
index 0000000000..9fa68e52af
--- /dev/null
+++ b/packages/date-picker/src/utils/getUTCDateString/getUTCDateString.spec.ts
@@ -0,0 +1,17 @@
+import { Month } from '../../constants';
+
+import { getUTCDateString } from '.';
+
+describe('date-picker/utils/getUTCDateString', () => {
+  test('returns date string relative to UTC', () => {
+    const date = new Date(Date.UTC(2023, Month.September, 10));
+    const str = getUTCDateString(date);
+    expect(str).toBe('Sun Sep 10 2023');
+  });
+
+  test('returns date string relative with time provided', () => {
+    const date = new Date(Date.UTC(2023, Month.September, 10, 12, 0));
+    const str = getUTCDateString(date);
+    expect(str).toBe('Sun Sep 10 2023');
+  });
+});
diff --git a/packages/date-picker/src/utils/getUTCDateString/index.ts b/packages/date-picker/src/utils/getUTCDateString/index.ts
new file mode 100644
index 0000000000..6a5930d8e8
--- /dev/null
+++ b/packages/date-picker/src/utils/getUTCDateString/index.ts
@@ -0,0 +1,12 @@
+import { addMinutes } from 'date-fns';
+
+export const getUTCDateString = (date: Date): string => {
+  const utcOffsetMins = date.getTimezoneOffset();
+
+  // Create a timestamp that, when printed in local time,
+  // appears as the UTC equivalent of the provided date
+  const fakeUTCDate = addMinutes(date, utcOffsetMins);
+
+  const utcDateString = fakeUTCDate.toDateString();
+  return utcDateString;
+};

From edba8c9cb39d694c5866bbf8be462f2dcadda634 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 25 Sep 2023 14:31:53 -0400
Subject: [PATCH 116/351] adds focusable cell tests. Conditionally set HL

---
 .../Calendar/CalendarCell/CalendarCell.tsx    |   7 +-
 .../DateInput/DateInputSegment/constants.ts   |  12 -
 .../src/DatePicker/DatePicker.spec.tsx        |  14 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 285 +++++++++++-------
 .../DatePickerMenu/DatePickerMenu.tsx         |  17 +-
 .../DatePickerMenuHeader/index.tsx            |   1 -
 6 files changed, 205 insertions(+), 131 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
index 1a06a8f309..1ce2c9bdc5 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -36,6 +36,8 @@ export const CalendarCell = React.forwardRef<
     const ref = useForwardedRef(fwdRef, null);
     const { theme } = useDarkMode();
 
+    const isFocusable = isHighlighted && state !== CalendarCellState.Disabled;
+
     const isActive = (
       [
         CalendarCellState.Active,
@@ -58,10 +60,11 @@ export const CalendarCell = React.forwardRef<
         aria-current={isCurrent}
         aria-selected={isActive}
         aria-disabled={state === CalendarCellState.Disabled}
-        tabIndex={isHighlighted ? 0 : -1}
+        tabIndex={isFocusable ? 0 : -1}
+        // @ts-expect-error https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
+        inert={isFocusable}
         className={cx(
           calendarCellStyles,
-
           calendarCellStateStyles[theme][state],
           calendarCellHoverStyles(theme, state),
           {
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/constants.ts b/packages/date-picker/src/DateInput/DateInputSegment/constants.ts
index 8264637fa5..5248f4dd37 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/constants.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/constants.ts
@@ -41,16 +41,4 @@ export const characterWidth = {
   D: 46 / 40,
   M: 55 / 40,
   Y: 50 / 40,
-  // TODO: rm. for 1.25 small-caps placeholders
-  // D: 41 / 40,
-  // M: 49 / 40,
-  // Y: 44 / 40,
-  // TODO: rm. for small-caps placeholders
-  // D: 32 / 40,
-  // M: 37 / 40,
-  // Y: 35 / 40,
-  // TODO: rm. for monospace
-  // D: 1,
-  // M: 1,
-  // Y: 1,
 } as const;
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index e9f41247c0..f9ea76c1a1 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -22,7 +22,7 @@ describe('packages/date-picker', () => {
   });
 
   describe('Rendering', () => {
-    /// Note: Most rendering tests handled by Chromatic
+    /// Note: Many rendering tests should be handled by Chromatic
 
     test('spreads rest to formField', () => {
       const { getByTestId } = render(
@@ -448,12 +448,6 @@ describe('packages/date-picker', () => {
       });
     });
 
-    /**
-     * Arrow Keys:
-     * Since arrow key behavior changes based on whether the input or menu is focused,
-     * these tests exist in the "DatePickerInput" and "DatePickerMenu" components, respectively
-     */
-
     describe('Enter key', () => {
       test.todo('fires a change handler');
       test.todo('closes the menu');
@@ -466,6 +460,12 @@ describe('packages/date-picker', () => {
       test.todo('does not fire a change handler');
       test.todo('focus remains on the input element');
     });
+
+    /**
+     * Arrow Keys:
+     * Since arrow key behavior changes based on whether the input or menu is focused,
+     * many of these tests exist in the "DatePickerInput" and "DatePickerMenu" components
+     */
   });
 
   describe('Controlled vs Uncontrolled', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index f282cd36e3..9e244c8c6f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -1,24 +1,37 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { addDays, subDays } from 'date-fns';
 
 import { Month } from '../../constants';
+import {
+  DatePickerProvider,
+  DatePickerProviderProps,
+} from '../../DatePickerContext';
+import { defaultDatePickerContext } from '../../DatePickerContext/DatePickerContext.utils';
 import { setUTCDate } from '../../utils/setUTCDate';
 
 import { DatePickerMenu, DatePickerMenuProps } from '.';
 
-const today = new Date(Date.UTC(2023, Month.September, 10));
+const testToday = new Date(Date.UTC(2023, Month.September, 10));
+const testValue = new Date(Date.UTC(2023, Month.September, 14));
 
-const renderDatePickerMenu = (props?: Partial<DatePickerMenuProps>) => {
+const renderDatePickerMenu = (
+  props?: Partial<DatePickerMenuProps>,
+  context?: Partial<DatePickerProviderProps>,
+) => {
   const result = render(
-    <DatePickerMenu
-      isOpen
-      value={null}
-      month={new Date(Date.UTC(2023, Month.September, 1))}
-      onMonthChange={() => {}}
-      onCellClick={() => {}}
-      {...props}
-    />,
+    <DatePickerProvider value={{ ...defaultDatePickerContext, ...context }}>
+      <DatePickerMenu
+        isOpen
+        value={null}
+        month={new Date(Date.UTC(2023, Month.September, 1))}
+        onMonthChange={() => {}}
+        onCellClick={() => {}}
+        {...props}
+      />
+      ,
+    </DatePickerProvider>,
   );
   const calendarGrid = result.getByRole('grid');
 
@@ -26,14 +39,24 @@ const renderDatePickerMenu = (props?: Partial<DatePickerMenuProps>) => {
     'gridcell',
   ) as Array<HTMLTableCellElement>;
 
+  const todayCell = calendarGrid.querySelector(
+    `[data-iso="${testToday.toISOString()}"]`,
+  );
+
   return {
     ...result,
     calendarGrid,
     calendarCells,
+    todayCell,
   };
 };
 
 describe('packages/date-picker/date-picker-menu', () => {
+  beforeEach(() => {
+    // Set the current time to midnight UTC on 2023-09-10
+    jest.useFakeTimers().setSystemTime(testToday);
+  });
+
   describe('Rendering', () => {
     test('renders calendar grid', () => {
       const result = renderDatePickerMenu();
@@ -70,7 +93,7 @@ describe('packages/date-picker/date-picker-menu', () => {
       test('have appropriate `aria-label`', () => {
         const { calendarGrid } = renderDatePickerMenu();
         const todayCell = calendarGrid.querySelector(
-          `[data-iso="${today.toISOString()}"]`,
+          `[data-iso="${testToday.toISOString()}"]`,
         );
         expect(todayCell).toHaveAttribute('aria-label', 'Sun Sep 10 2023');
       });
@@ -78,126 +101,184 @@ describe('packages/date-picker/date-picker-menu', () => {
   });
 
   describe('Keyboard navigation', () => {
-    const value = new Date(Date.UTC(2023, Month.September, 14));
-
-    beforeEach(() => {
-      // Set the current time to midnight UTC on 2023-09-10
-      jest.useFakeTimers().setSystemTime(today);
-    });
-
     test('default highlight is on today', () => {
-      const { calendarGrid } = renderDatePickerMenu();
+      const { todayCell } = renderDatePickerMenu();
       userEvent.tab();
-      const todayCell = calendarGrid.querySelector(
-        `[data-iso="${today.toISOString()}"]`,
-      );
       expect(todayCell).toHaveFocus();
     });
 
     test('highlight starts on on current value when provided', () => {
       const { calendarGrid } = renderDatePickerMenu({
-        value,
+        value: testValue,
       });
       userEvent.tab();
       const valueCell = calendarGrid.querySelector(
-        `[data-iso="${value.toISOString()}"]`,
+        `[data-iso="${testValue.toISOString()}"]`,
       );
       expect(valueCell).toHaveFocus();
     });
 
-    test('left arrow decrements the day by 1', async () => {
-      const { calendarGrid } = renderDatePickerMenu({
-        value,
+    describe('Arrow Keys', () => {
+      test('left arrow decrements the day by 1', async () => {
+        const { calendarGrid } = renderDatePickerMenu({
+          value: testValue,
+        });
+        userEvent.tab();
+        userEvent.keyboard('{arrowleft}');
+
+        const prevDay = calendarGrid.querySelector(
+          `[data-iso="${setUTCDate(testValue, 13).toISOString()}"]`,
+        );
+        expect(prevDay).toHaveFocus();
       });
-      userEvent.tab();
-      userEvent.keyboard('{arrowleft}');
 
-      const prevDay = calendarGrid.querySelector(
-        `[data-iso="${setUTCDate(value, 13).toISOString()}"]`,
-      );
-      expect(prevDay).toHaveFocus();
-    });
+      test('right arrow increments the day by 1', () => {
+        const { calendarGrid } = renderDatePickerMenu({
+          value: testValue,
+        });
+        userEvent.tab();
+        userEvent.keyboard('{arrowright}');
+        const nextDay = calendarGrid.querySelector(
+          `[data-iso="${setUTCDate(testValue, 15).toISOString()}"]`,
+        );
+        expect(nextDay).toHaveFocus();
+      });
 
-    test('right arrow increments the day by 1', () => {
-      const { calendarGrid } = renderDatePickerMenu({
-        value,
+      test('up arrow decrements the week by 1', () => {
+        const { calendarGrid } = renderDatePickerMenu({
+          value: testValue,
+        });
+        userEvent.tab();
+        userEvent.keyboard('{arrowup}');
+
+        const prevWeek = calendarGrid.querySelector(
+          `[data-iso="${setUTCDate(testValue, 7).toISOString()}"]`,
+        );
+        expect(prevWeek).toHaveFocus();
       });
-      userEvent.tab();
-      userEvent.keyboard('{arrowright}');
-      const nextDay = calendarGrid.querySelector(
-        `[data-iso="${setUTCDate(value, 15).toISOString()}"]`,
-      );
-      expect(nextDay).toHaveFocus();
-    });
 
-    test('up arrow decrements the week by 1', () => {
-      const { calendarGrid } = renderDatePickerMenu({
-        value,
+      test('down arrow decrements the week by 1', () => {
+        const { calendarGrid } = renderDatePickerMenu({
+          value: testValue,
+        });
+        userEvent.tab();
+        userEvent.keyboard('{arrowdown}');
+
+        const nextWeek = calendarGrid.querySelector(
+          `[data-iso="${setUTCDate(testValue, 21).toISOString()}"]`,
+        );
+        expect(nextWeek).toHaveFocus();
       });
-      userEvent.tab();
-      userEvent.keyboard('{arrowup}');
 
-      const prevWeek = calendarGrid.querySelector(
-        `[data-iso="${setUTCDate(value, 7).toISOString()}"]`,
-      );
-      expect(prevWeek).toHaveFocus();
-    });
+      describe('when next day would be out of range', () => {
+        test('left arrow does nothing', () => {
+          const { todayCell } = renderDatePickerMenu(
+            {
+              value: testToday,
+            },
+            {
+              min: subDays(testToday, 1),
+            },
+          );
+          userEvent.tab();
+          userEvent.keyboard('{arrowleft}');
+          expect(todayCell).toHaveFocus();
+        });
 
-    test('down arrow decrements the week by 1', () => {
-      const { calendarGrid } = renderDatePickerMenu({
-        value,
+        test('right arrow does nothing', () => {
+          const { todayCell } = renderDatePickerMenu(
+            {
+              value: testToday,
+            },
+            {
+              max: addDays(testToday, 1),
+            },
+          );
+          userEvent.tab();
+          userEvent.keyboard('{arrowright}');
+          expect(todayCell).toHaveFocus();
+        });
+
+        test('up arrow does nothing', () => {
+          const { todayCell } = renderDatePickerMenu(
+            {
+              value: testToday,
+            },
+            {
+              min: subDays(testToday, 7),
+            },
+          );
+          userEvent.tab();
+          userEvent.keyboard('{arrowup}');
+          expect(todayCell).toHaveFocus();
+        });
+        test('down arrow does nothing', () => {
+          const { todayCell } = renderDatePickerMenu(
+            {
+              value: testToday,
+            },
+            {
+              max: addDays(testToday, 7),
+            },
+          );
+          userEvent.tab();
+          userEvent.keyboard('{arrowdown}');
+          expect(todayCell).toHaveFocus();
+        });
       });
-      userEvent.tab();
-      userEvent.keyboard('{arrowdown}');
 
-      const nextWeek = calendarGrid.querySelector(
-        `[data-iso="${setUTCDate(value, 21).toISOString()}"]`,
-      );
-      expect(nextWeek).toHaveFocus();
-    });
+      describe('call the month change handler', () => {
+        test('left arrow triggers handler', () => {
+          const onMonthChange = jest.fn();
+          const value = new Date(Date.UTC(2023, Month.September, 1));
+          renderDatePickerMenu({ value, onMonthChange });
+          userEvent.tab();
+          userEvent.keyboard('{arrowleft}');
+          expect(onMonthChange).toHaveBeenCalled();
+        });
 
-    test('left arrow triggers the month change handler', () => {
-      const onMonthChange = jest.fn();
-      const value = new Date(Date.UTC(2023, Month.September, 1));
-      renderDatePickerMenu({ value, onMonthChange });
-      userEvent.tab();
-      userEvent.keyboard('{arrowleft}');
-      expect(onMonthChange).toHaveBeenCalled();
-    });
+        test('right arrow triggers handler', () => {
+          const onMonthChange = jest.fn();
+          const value = new Date(Date.UTC(2023, Month.September, 30));
+          renderDatePickerMenu({ value, onMonthChange });
+          userEvent.tab();
+          userEvent.keyboard('{arrowright}');
+          expect(onMonthChange).toHaveBeenCalled();
+        });
 
-    test('right arrow triggers the month change handler', () => {
-      const onMonthChange = jest.fn();
-      const value = new Date(Date.UTC(2023, Month.September, 30));
-      renderDatePickerMenu({ value, onMonthChange });
-      userEvent.tab();
-      userEvent.keyboard('{arrowright}');
-      expect(onMonthChange).toHaveBeenCalled();
-    });
+        test('up arrow triggers handler', () => {
+          const value = new Date(Date.UTC(2023, Month.September, 6));
+          const onMonthChange = jest.fn();
+          renderDatePickerMenu({ value, onMonthChange });
+          userEvent.tab();
+          userEvent.keyboard('{arrowup}');
+          expect(onMonthChange).toHaveBeenCalled();
+        });
 
-    test('up arrow triggers the month change handler', () => {
-      const value = new Date(Date.UTC(2023, Month.September, 6));
-      const onMonthChange = jest.fn();
-      renderDatePickerMenu({ value, onMonthChange });
-      userEvent.tab();
-      userEvent.keyboard('{arrowup}');
-      expect(onMonthChange).toHaveBeenCalled();
-    });
+        test('down arrow triggers handler', async () => {
+          const value = new Date(Date.UTC(2023, Month.September, 25));
+          const onMonthChange = jest.fn();
+          renderDatePickerMenu({ value, onMonthChange });
+          userEvent.tab();
+          userEvent.keyboard('{arrowdown}');
+          expect(onMonthChange).toHaveBeenCalled();
+        });
 
-    test('down arrow triggers the month change handler', async () => {
-      const value = new Date(Date.UTC(2023, Month.September, 25));
-      const onMonthChange = jest.fn();
-      renderDatePickerMenu({ value, onMonthChange });
-      userEvent.tab();
-      userEvent.keyboard('{arrowdown}');
-      expect(onMonthChange).toHaveBeenCalled();
-    });
+        test('does not trigger handler when month does not need to change', () => {
+          const onMonthChange = jest.fn();
+          renderDatePickerMenu({ value: testValue, onMonthChange });
+          userEvent.tab();
+          userEvent.keyboard('{arrowleft}{arrowright}{arrowup}{arrowdown}');
+          expect(onMonthChange).not.toHaveBeenCalled();
+        });
+      });
 
-    test('arrow keys do not trigger month change handler all the time', () => {
-      const onMonthChange = jest.fn();
-      renderDatePickerMenu({ value, onMonthChange });
-      userEvent.tab();
-      userEvent.keyboard('{arrowleft}{arrowright}{arrowup}{arrowdown}');
-      expect(onMonthChange).not.toHaveBeenCalled();
+      describe('when month is updated', () => {
+        test.todo('left arrow focuses the correct day');
+        test.todo('right arrow focuses the correct day');
+        test.todo('up arrow focuses the correct day');
+        test.todo('down arrow focuses the correct day');
+      });
     });
   });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 4748122451..1065ea7e5b 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -126,15 +126,18 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
           break;
       }
 
-      // change month if nextHighlight is different than `month`
-      if (month.getUTCMonth() !== nextHighlight.getUTCMonth()) {
-        onMonthChange(nextHighlight);
-      }
+      // if nextHighlight is in range
+      if (isInRange(nextHighlight)) {
+        // change month if nextHighlight is different than `month`
+        if (month.getUTCMonth() !== nextHighlight.getUTCMonth()) {
+          onMonthChange(nextHighlight);
+        }
 
-      setHighlight(nextHighlight);
+        setHighlight(nextHighlight);
 
-      const nextCellRef = cellRefs(nextHighlight.toISOString());
-      nextCellRef.current?.focus();
+        const nextCellRef = cellRefs(nextHighlight.toISOString());
+        nextCellRef.current?.focus();
+      }
     };
 
     return (
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index 686b62f35a..bedd120844 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -28,7 +28,6 @@ const selectElementProps = {
   // using no portal so the select menus are included in the backdrop "foreground"
   // there is currently no way to pass a ref into the Select portal to use in backdrop "foreground"
   usePortal: false,
-  // TODO: portalContainer = menuRef...
 } as const;
 
 export const DatePickerMenuHeader = forwardRef<

From 01b5f58a435ea2e559e3003b7ba16dc7c3ec660e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 25 Sep 2023 16:52:58 -0400
Subject: [PATCH 117/351] updates cell & calendar menu focus behavior

---
 .../CalendarCell/CalendarCell.spec.tsx        | 26 ++++++++-
 .../CalendarCell/CalendarCell.styles.ts       |  2 +
 .../Calendar/CalendarCell/CalendarCell.tsx    | 13 ++++-
 .../src/DatePicker/DatePicker.spec.tsx        |  2 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 57 +++++++------------
 .../DatePickerMenu/DatePickerMenu.tsx         |  4 +-
 6 files changed, 59 insertions(+), 45 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
index 434780de99..b77661d19c 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
@@ -47,7 +47,7 @@ describe('packages/date-picker/calendar-cell', () => {
       </TestCellWrapper>,
     );
     const gridcell = queryByRole('gridcell');
-    userEvent.click(gridcell!);
+    userEvent.click(gridcell!, {}, { skipPointerEventsCheck: true });
     expect(clickHandler).toHaveBeenCalled();
   });
 
@@ -63,7 +63,29 @@ describe('packages/date-picker/calendar-cell', () => {
       </TestCellWrapper>,
     );
     const gridcell = queryByRole('gridcell');
-    userEvent.click(gridcell!);
+    userEvent.click(gridcell!, {}, { skipPointerEventsCheck: true });
     expect(clickHandler).not.toHaveBeenCalled();
   });
+
+  test('is focusable when highlighted', () => {
+    const { queryByRole } = render(
+      <TestCellWrapper>
+        <CalendarCell aria-label="" isHighlighted />
+      </TestCellWrapper>,
+    );
+    const gridcell = queryByRole('gridcell');
+    userEvent.click(gridcell!, {}, { skipPointerEventsCheck: true });
+    expect(gridcell).toHaveFocus();
+  });
+
+  test('is not focusable when disabled', () => {
+    const { queryByRole } = render(
+      <TestCellWrapper>
+        <CalendarCell aria-label="" state={CalendarCellState.Disabled} />
+      </TestCellWrapper>,
+    );
+    const gridcell = queryByRole('gridcell');
+    userEvent.click(gridcell!, {}, { skipPointerEventsCheck: true });
+    expect(gridcell).not.toHaveFocus();
+  });
 });
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
index 42a001cc50..9df4e16f47 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
@@ -78,6 +78,7 @@ export const calendarCellStateStyles: ThemedStateStyles = {
     [CalendarCellState.Disabled]: css`
       color: ${palette.gray.light1};
       cursor: not-allowed;
+      pointer-events: none;
     `,
     [CalendarCellState.Active]: _baseActiveCellStyles[Theme.Light],
     [CalendarCellState.Start]: cx(
@@ -116,6 +117,7 @@ export const calendarCellStateStyles: ThemedStateStyles = {
     [CalendarCellState.Disabled]: css`
       color: ${palette.gray.dark1};
       cursor: not-allowed;
+      pointer-events: none;
     `,
     [CalendarCellState.Active]: _baseActiveCellStyles[Theme.Dark],
     [CalendarCellState.Start]: cx(
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
index 1ce2c9bdc5..7fa53d5e9c 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler } from 'react';
+import React, { FocusEventHandler, MouseEventHandler } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
@@ -52,6 +52,14 @@ export const CalendarCell = React.forwardRef<
       }
     };
 
+    const handleFocus: FocusEventHandler<HTMLTableCellElement> = e => {
+      // not checking `isHighlighted` since this event is triggered
+      // before the prop changes
+      if (state === CalendarCellState.Disabled) {
+        e.currentTarget.blur();
+      }
+    };
+
     return (
       <td
         ref={ref}
@@ -61,8 +69,6 @@ export const CalendarCell = React.forwardRef<
         aria-selected={isActive}
         aria-disabled={state === CalendarCellState.Disabled}
         tabIndex={isFocusable ? 0 : -1}
-        // @ts-expect-error https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
-        inert={isFocusable}
         className={cx(
           calendarCellStyles,
           calendarCellStateStyles[theme][state],
@@ -74,6 +80,7 @@ export const CalendarCell = React.forwardRef<
           className,
         )}
         onClick={handleClick}
+        onFocus={handleFocus}
         {...rest}
       >
         <div className={cx(indicatorBaseStyles, indicatorClassName)}></div>
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index f9ea76c1a1..ec85bf12bd 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -196,7 +196,7 @@ describe('packages/date-picker', () => {
         });
         const { calendarCells } = openMenu();
         const cell1 = calendarCells?.[0];
-        userEvent.click(cell1);
+        userEvent.click(cell1, {}, { skipPointerEventsCheck: true });
         expect(cell1).toHaveAttribute('aria-disabled', 'true');
         expect(onChange).not.toHaveBeenCalled();
       });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 9e244c8c6f..bd4f7a56e4 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { addDays, subDays } from 'date-fns';
+import { addDays } from 'date-fns';
 
 import { Month } from '../../constants';
 import {
@@ -119,7 +119,7 @@ describe('packages/date-picker/date-picker-menu', () => {
     });
 
     describe('Arrow Keys', () => {
-      test('left arrow decrements the day by 1', async () => {
+      test('left arrow moves focus to the previous day', async () => {
         const { calendarGrid } = renderDatePickerMenu({
           value: testValue,
         });
@@ -132,7 +132,7 @@ describe('packages/date-picker/date-picker-menu', () => {
         expect(prevDay).toHaveFocus();
       });
 
-      test('right arrow increments the day by 1', () => {
+      test('right arrow moves focus to the next day', () => {
         const { calendarGrid } = renderDatePickerMenu({
           value: testValue,
         });
@@ -144,7 +144,7 @@ describe('packages/date-picker/date-picker-menu', () => {
         expect(nextDay).toHaveFocus();
       });
 
-      test('up arrow decrements the week by 1', () => {
+      test('up arrow moves focus to the previous week', () => {
         const { calendarGrid } = renderDatePickerMenu({
           value: testValue,
         });
@@ -157,7 +157,7 @@ describe('packages/date-picker/date-picker-menu', () => {
         expect(prevWeek).toHaveFocus();
       });
 
-      test('down arrow decrements the week by 1', () => {
+      test('down arrow moves focus to the next week', () => {
         const { calendarGrid } = renderDatePickerMenu({
           value: testValue,
         });
@@ -171,56 +171,39 @@ describe('packages/date-picker/date-picker-menu', () => {
       });
 
       describe('when next day would be out of range', () => {
+        const props = {
+          value: testToday,
+        };
         test('left arrow does nothing', () => {
-          const { todayCell } = renderDatePickerMenu(
-            {
-              value: testToday,
-            },
-            {
-              min: subDays(testToday, 1),
-            },
-          );
+          const { todayCell } = renderDatePickerMenu(props, {
+            min: testToday,
+          });
           userEvent.tab();
           userEvent.keyboard('{arrowleft}');
           expect(todayCell).toHaveFocus();
         });
 
         test('right arrow does nothing', () => {
-          const { todayCell } = renderDatePickerMenu(
-            {
-              value: testToday,
-            },
-            {
-              max: addDays(testToday, 1),
-            },
-          );
+          const { todayCell } = renderDatePickerMenu(props, {
+            max: testToday,
+          });
           userEvent.tab();
           userEvent.keyboard('{arrowright}');
           expect(todayCell).toHaveFocus();
         });
 
         test('up arrow does nothing', () => {
-          const { todayCell } = renderDatePickerMenu(
-            {
-              value: testToday,
-            },
-            {
-              min: subDays(testToday, 7),
-            },
-          );
+          const { todayCell } = renderDatePickerMenu(props, {
+            min: addDays(testToday, -6),
+          });
           userEvent.tab();
           userEvent.keyboard('{arrowup}');
           expect(todayCell).toHaveFocus();
         });
         test('down arrow does nothing', () => {
-          const { todayCell } = renderDatePickerMenu(
-            {
-              value: testToday,
-            },
-            {
-              max: addDays(testToday, 7),
-            },
-          );
+          const { todayCell } = renderDatePickerMenu(props, {
+            max: addDays(testToday, 6),
+          });
           userEvent.tab();
           userEvent.keyboard('{arrowdown}');
           expect(todayCell).toHaveFocus();
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 1065ea7e5b..ee8bf50b69 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -44,7 +44,8 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
     const headerRef = useRef<HTMLDivElement>(null);
     const calendarRef = useRef<HTMLTableElement>(null);
-    // TODO: useDynamicRefs may overflow if a user navigates to too many months.
+    // TODO:
+    // useDynamicRefs may overflow if a user navigates to too many months.
     // consider purging the refs map within the hook
     const cellRefs = useDynamicRefs<HTMLTableCellElement>();
     const { isInRange } = useDatePickerContext();
@@ -170,7 +171,6 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
               <CalendarCell
                 key={i}
                 ref={cellRefs(day.toISOString())}
-                // TODO: use a more friendly label
                 aria-label={getUTCDateString(day)}
                 isHighlighted={isSameUTCDay(day, highlight)}
                 isCurrent={isSameUTCDay(day, today)}

From 903606acd2eada111f0a5636d3cbc22dcbc673df Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 25 Sep 2023 17:41:24 -0400
Subject: [PATCH 118/351] update highlight when month changes

---
 .../src/DatePicker/DatePicker.spec.tsx        | 562 +++++++++---------
 .../DatePickerContents/DatePickerContents.tsx |   7 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    |  37 +-
 .../DatePickerMenu/DatePickerMenu.tsx         |  49 +-
 .../DatePickerMenu/DatePickerMenu.types.ts    |   2 +-
 .../DatePickerMenuHeader/index.tsx            |  10 +-
 6 files changed, 360 insertions(+), 307 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index ec85bf12bd..225b6cef74 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -15,6 +15,13 @@ import { DatePicker } from '.';
 
 const testToday = new Date(Date.UTC(2023, Month.December, 26));
 
+/** Presses the `tab` key `count` times */
+const tabNTimes = (count: number) => {
+  for (const _ in range(count)) {
+    userEvent.tab();
+  }
+};
+
 describe('packages/date-picker', () => {
   beforeEach(() => {
     // Set the current time to midnight UTC on 2023-12-26
@@ -137,335 +144,356 @@ describe('packages/date-picker', () => {
     });
   });
 
-  describe('Mouse interaction', () => {
-    describe('Clicking the input', () => {
-      test('opens the menu', () => {
-        const { inputContainer, getMenuElements } = renderDatePicker();
-        userEvent.click(inputContainer);
-        const { menuContainerEl } = getMenuElements();
-        expect(menuContainerEl).toBeInTheDocument();
-      });
-
-      test('focuses a specific segment when clicked', () => {
-        const { monthInput } = renderDatePicker();
-        userEvent.click(monthInput);
-        expect(monthInput).toHaveFocus();
-      });
-
-      test('focuses the first segment when all are empty', () => {
-        const { inputContainer, yearInput } = renderDatePicker();
-        userEvent.click(inputContainer);
-        expect(yearInput).toHaveFocus();
-      });
+  describe('Interaction', () => {
+    describe('Mouse interaction', () => {
+      describe('Clicking the input', () => {
+        test('opens the menu', () => {
+          const { inputContainer, getMenuElements } = renderDatePicker();
+          userEvent.click(inputContainer);
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).toBeInTheDocument();
+        });
 
-      test('focuses the first empty segment when some are empty', () => {
-        const { inputContainer, yearInput, monthInput } = renderDatePicker();
-        yearInput.value = '2023';
-        yearInput.blur();
-        userEvent.click(inputContainer);
-        expect(monthInput).toHaveFocus();
-      });
+        test('focuses a specific segment when clicked', () => {
+          const { monthInput } = renderDatePicker();
+          userEvent.click(monthInput);
+          expect(monthInput).toHaveFocus();
+        });
 
-      test('focuses the last segment when all are filled', () => {
-        const { inputContainer, dayInput } = renderDatePicker({
-          value: new Date(),
+        test('focuses the first segment when all are empty', () => {
+          const { inputContainer, yearInput } = renderDatePicker();
+          userEvent.click(inputContainer);
+          expect(yearInput).toHaveFocus();
         });
-        userEvent.click(inputContainer);
-        expect(dayInput).toHaveFocus();
-      });
-    });
 
-    describe('Clicking a Calendar cell', () => {
-      test('fires a change handler', () => {
-        const onChange = jest.fn();
-        const { openMenu } = renderDatePicker({
-          onChange,
+        test('focuses the first empty segment when some are empty', () => {
+          const { inputContainer, yearInput, monthInput } = renderDatePicker();
+          yearInput.value = '2023';
+          yearInput.blur();
+          userEvent.click(inputContainer);
+          expect(monthInput).toHaveFocus();
         });
-        const { calendarCells } = openMenu();
-        const cell1 = calendarCells?.[0];
-        userEvent.click(cell1);
-        expect(onChange).toHaveBeenCalled();
-      });
 
-      test('does nothing if the cell is out-of-range', () => {
-        const onChange = jest.fn();
-        const { openMenu } = renderDatePicker({
-          onChange,
-          value: new Date(Date.UTC(2023, Month.September, 15)),
-          min: new Date(Date.UTC(2023, Month.September, 10)),
+        test('focuses the last segment when all are filled', () => {
+          const { inputContainer, dayInput } = renderDatePicker({
+            value: new Date(),
+          });
+          userEvent.click(inputContainer);
+          expect(dayInput).toHaveFocus();
         });
-        const { calendarCells } = openMenu();
-        const cell1 = calendarCells?.[0];
-        userEvent.click(cell1, {}, { skipPointerEventsCheck: true });
-        expect(cell1).toHaveAttribute('aria-disabled', 'true');
-        expect(onChange).not.toHaveBeenCalled();
       });
-    });
 
-    describe('Clicking a Chevron', () => {
-      test('Left does not close the menu', async () => {
-        const { openMenu } = renderDatePicker();
-        const { leftChevron, menuContainerEl } = openMenu();
-        userEvent.click(leftChevron!);
-        await waitFor(() => {
-          expect(menuContainerEl).toBeInTheDocument();
+      describe('Clicking a Calendar cell', () => {
+        test('fires a change handler', () => {
+          const onChange = jest.fn();
+          const { openMenu } = renderDatePicker({
+            onChange,
+          });
+          const { calendarCells } = openMenu();
+          const firstCell = calendarCells?.[0];
+          userEvent.click(firstCell);
+          expect(onChange).toHaveBeenCalled();
         });
-      });
 
-      test('Right does not close the menu', async () => {
-        const { openMenu } = renderDatePicker();
-        const { rightChevron, menuContainerEl } = openMenu();
-        userEvent.click(rightChevron!);
-        await waitFor(() => {
-          expect(menuContainerEl).toBeInTheDocument();
+        test('does nothing if the cell is out-of-range', () => {
+          const onChange = jest.fn();
+          const { openMenu } = renderDatePicker({
+            onChange,
+            value: new Date(Date.UTC(2023, Month.September, 15)),
+            min: new Date(Date.UTC(2023, Month.September, 10)),
+          });
+          const { calendarCells } = openMenu();
+          const firstCell = calendarCells?.[0];
+          userEvent.click(firstCell, {}, { skipPointerEventsCheck: true });
+          expect(firstCell).toHaveAttribute('aria-disabled', 'true');
+          expect(onChange).not.toHaveBeenCalled();
         });
       });
 
-      test('Left updates the displayed month to the previous', async () => {
-        const { openMenu } = renderDatePicker();
-        const { leftChevron, monthSelect, yearSelect, calendarGrid } =
-          openMenu();
-        userEvent.click(leftChevron!);
-        await waitFor(() => {
-          expect(calendarGrid).toHaveAttribute('aria-label', 'November 2023');
-          expect(monthSelect).toHaveValue(Month.November.toString());
-          expect(yearSelect).toHaveValue('2023');
+      describe('Clicking a Chevron', () => {
+        describe('Left', () => {
+          test('does not close the menu', () => {
+            const { openMenu } = renderDatePicker();
+            const { leftChevron, menuContainerEl } = openMenu();
+            userEvent.click(leftChevron!);
+            expect(menuContainerEl).toBeInTheDocument();
+          });
+
+          test('updates the displayed month to the previous', () => {
+            const { openMenu } = renderDatePicker();
+            const { leftChevron, monthSelect, yearSelect, calendarGrid } =
+              openMenu();
+            userEvent.click(leftChevron!);
+            expect(calendarGrid).toHaveAttribute('aria-label', 'November 2023');
+            expect(monthSelect).toHaveValue(Month.November.toString());
+            expect(yearSelect).toHaveValue('2023');
+          });
         });
-      });
 
-      test('Right updates the displayed month to the next', async () => {
-        const { openMenu } = renderDatePicker();
-        const { rightChevron, monthSelect, yearSelect, calendarGrid } =
-          openMenu();
-        userEvent.click(rightChevron!);
-        await waitFor(() => {
-          expect(calendarGrid).toHaveAttribute('aria-label', 'January 2024');
-          expect(monthSelect).toHaveValue(Month.January.toString());
-          expect(yearSelect).toHaveValue('2024');
+        describe('Right', () => {
+          test('does not close the menu', () => {
+            const { openMenu } = renderDatePicker();
+            const { rightChevron, menuContainerEl } = openMenu();
+            userEvent.click(rightChevron!);
+            expect(menuContainerEl).toBeInTheDocument();
+          });
+
+          test('updates the displayed month to the next', () => {
+            const { openMenu } = renderDatePicker();
+            const { rightChevron, monthSelect, yearSelect, calendarGrid } =
+              openMenu();
+            userEvent.click(rightChevron!);
+            expect(calendarGrid).toHaveAttribute('aria-label', 'January 2024');
+            expect(monthSelect).toHaveValue(Month.January.toString());
+            expect(yearSelect).toHaveValue('2024');
+          });
         });
       });
 
-      test.todo('changing the month is announced in an aria-live region');
-    });
-
-    describe.skip('Clicking the month select menu', () => {
-      test('menu opens over the calendar menu', async () => {
-        const { openMenu, queryAllByRole } = renderDatePicker();
-        const { monthSelect, menuContainerEl } = openMenu();
-        userEvent.click(monthSelect!);
-        await waitFor(() => {
+      describe('Month select menu', () => {
+        test('menu opens over the calendar menu', () => {
+          const { openMenu, queryAllByRole } = renderDatePicker();
+          const { monthSelect, menuContainerEl } = openMenu();
+          userEvent.click(monthSelect!);
           expect(menuContainerEl).toBeInTheDocument();
           const listBoxes = queryAllByRole('listbox');
           expect(listBoxes).toHaveLength(2);
         });
-      });
-
-      test('selecting the month updates the calendar', async () => {
-        const { openMenu, findAllByRole } = renderDatePicker({
-          value: new Date(Date.UTC(2023, Month.December, 26)),
-        });
-        const { monthSelect, calendarGrid } = openMenu();
-        userEvent.click(monthSelect!);
-        const options = await findAllByRole('option');
-        const Jan = options[0];
 
-        userEvent.click(Jan);
-        await waitFor(() => {
+        test('selecting the month updates the calendar', async () => {
+          const { openMenu, findAllByRole } = renderDatePicker({
+            value: new Date(Date.UTC(2023, Month.December, 26)),
+          });
+          const { monthSelect, calendarGrid } = openMenu();
+          userEvent.click(monthSelect!);
+          const options = await findAllByRole('option');
+          const Jan = options[0];
+          userEvent.click(Jan);
           expect(calendarGrid).toHaveAttribute('aria-label', 'January 2023');
         });
       });
-    });
 
-    describe.skip('Clicking the year select menu', () => {
-      test('menu opens over the calendar menu', async () => {
-        const { openMenu, queryAllByRole } = renderDatePicker();
-        const { yearSelect, menuContainerEl } = openMenu();
-        userEvent.click(yearSelect!);
-        await waitFor(() => {
+      describe('Year select menu', () => {
+        test('menu opens over the calendar menu', () => {
+          const { openMenu, queryAllByRole } = renderDatePicker();
+          const { yearSelect, menuContainerEl } = openMenu();
+          userEvent.click(yearSelect!);
           expect(menuContainerEl).toBeInTheDocument();
           const listBoxes = queryAllByRole('listbox');
           expect(listBoxes).toHaveLength(2);
         });
-      });
-      test('selecting the year updates the calendar', async () => {
-        const { openMenu, findAllByRole } = renderDatePicker({
-          value: new Date(Date.UTC(2023, Month.December, 26)),
-        });
-        const { yearSelect, calendarGrid } = openMenu();
-        userEvent.click(yearSelect!);
-        const options = await findAllByRole('option');
-        const _1970 = options[1];
 
-        userEvent.click(_1970);
-        await waitFor(() => {
+        test('selecting the year updates the calendar', async () => {
+          const { openMenu, findAllByRole } = renderDatePicker({
+            value: new Date(Date.UTC(2023, Month.December, 26)),
+          });
+          const { yearSelect, calendarGrid } = openMenu();
+          userEvent.click(yearSelect!);
+          const options = await findAllByRole('option');
+          const _1970 = options[1];
+
+          userEvent.click(_1970);
           expect(calendarGrid).toHaveAttribute('aria-label', 'December 1970');
         });
       });
-    });
 
-    describe('Clicking backdrop', () => {
-      test('closes the menu', async () => {
-        const { openMenu, container } = renderDatePicker();
-        const { menuContainerEl } = openMenu();
-        userEvent.click(container.parentElement!);
-        await waitForElementToBeRemoved(menuContainerEl);
+      describe('Changing the month', () => {
+        test.todo('is announced in an aria-live region');
+
+        describe('updates the highlighted cell', () => {
+          test('to the end of the month if we went backwards', async () => {
+            const { openMenu, findAllByRole } = renderDatePicker({
+              value: new Date(Date.UTC(2023, Month.July, 5)),
+            });
+            const { monthSelect, calendarGrid } = openMenu();
+            userEvent.click(monthSelect!);
+            const options = await findAllByRole('option');
+            const Jan = options[0];
+            userEvent.click(Jan);
+            const jan31Cell = calendarGrid?.querySelector(
+              '[data-iso="2023-01-31T00:00:00.000Z"]',
+            );
+            expect(jan31Cell).toHaveAttribute('data-highlight', 'true');
+            tabNTimes(3);
+            expect(jan31Cell).toHaveFocus();
+          });
+          test('to the beginning of the month if we went forwards', async () => {
+            const { openMenu, findAllByRole } = renderDatePicker({
+              value: new Date(Date.UTC(2023, Month.July, 5)),
+            });
+            const { monthSelect, calendarGrid } = openMenu();
+            userEvent.click(monthSelect!);
+            const options = await findAllByRole('option');
+            const Dec = options[11];
+            userEvent.click(Dec);
+            const dec1Cell = calendarGrid?.querySelector(
+              '[data-iso="2023-12-01T00:00:00.000Z"]',
+            );
+            expect(dec1Cell).toHaveAttribute('data-highlight', 'true');
+            tabNTimes(3);
+            expect(dec1Cell).toHaveFocus();
+          });
+        });
       });
 
-      test('does not fire a change handler', () => {
-        const onChange = jest.fn();
-        const { openMenu, container } = renderDatePicker({ onChange });
-        openMenu();
-        userEvent.click(container.parentElement!);
-        expect(onChange).not.toHaveBeenCalled();
+      describe('Clicking backdrop', () => {
+        test('closes the menu', async () => {
+          const { openMenu, container } = renderDatePicker();
+          const { menuContainerEl } = openMenu();
+          userEvent.click(container.parentElement!);
+          await waitForElementToBeRemoved(menuContainerEl);
+        });
+
+        test('does not fire a change handler', () => {
+          const onChange = jest.fn();
+          const { openMenu, container } = renderDatePicker({ onChange });
+          openMenu();
+          userEvent.click(container.parentElement!);
+          expect(onChange).not.toHaveBeenCalled();
+        });
       });
     });
-  });
 
-  describe('Typing', () => {
-    describe('Typing into the input', () => {
-      test('does not fire a change handler when the value is incomplete', () => {
-        const onChange = jest.fn();
-        const { yearInput } = renderDatePicker({
-          onChange,
+    describe('Typing', () => {
+      describe('Typing into the input', () => {
+        test('does not fire a change handler when the value is incomplete', () => {
+          const onChange = jest.fn();
+          const { yearInput } = renderDatePicker({
+            onChange,
+          });
+          userEvent.type(yearInput, '2023');
+          expect(onChange).not.toHaveBeenCalled();
         });
-        userEvent.type(yearInput, '2023');
-        expect(onChange).not.toHaveBeenCalled();
-      });
 
-      test('fires a change handler when the value is a valid date', () => {
-        const onChange = jest.fn();
-        const { yearInput, monthInput, dayInput } = renderDatePicker({
-          onChange,
+        test('fires a change handler when the value is a valid date', () => {
+          const onChange = jest.fn();
+          const { yearInput, monthInput, dayInput } = renderDatePicker({
+            onChange,
+          });
+          userEvent.type(yearInput, '2023');
+          userEvent.type(monthInput, '12');
+          userEvent.type(dayInput, '26');
+          expect(onChange).toHaveBeenCalled();
         });
-        userEvent.type(yearInput, '2023');
-        userEvent.type(monthInput, '12');
-        userEvent.type(dayInput, '26');
-        expect(onChange).toHaveBeenCalled();
-      });
 
-      // TODO:
-      test.skip('fires a validation handler if the value is updated', () => {
-        const handleValidation = jest.fn();
-        const { dayInput } = renderDatePicker({
-          value: new Date(),
-          handleValidation,
+        // TODO: validation handlers
+        test.skip('fires a validation handler if the value is updated', () => {
+          const handleValidation = jest.fn();
+          const { dayInput } = renderDatePicker({
+            value: new Date(),
+            handleValidation,
+          });
+
+          userEvent.type(dayInput, '05');
+          expect(handleValidation).toHaveBeenCalledTimes(2);
         });
 
-        userEvent.type(dayInput, '05');
-        expect(handleValidation).toHaveBeenCalledTimes(2);
+        test.todo('focuses the next segment if the segment value is valid');
       });
-
-      test.todo('focuses the next segment if the segment value is valid');
     });
-  });
 
-  describe('Keyboard navigation', () => {
-    const tabNTimes = (count: number) => {
-      for (const _ in range(count)) {
-        userEvent.tab();
-      }
-    };
-
-    describe('Tab order', () => {
-      describe('when menu is closed', () => {
-        test('tab 1: Year', () => {
-          const { yearInput } = renderDatePicker();
-          userEvent.tab();
-          expect(yearInput).toHaveFocus();
-        });
+    describe('Keyboard navigation', () => {
+      describe('Tab order', () => {
+        describe('when menu is closed', () => {
+          test('tab 1: Year', () => {
+            const { yearInput } = renderDatePicker();
+            userEvent.tab();
+            expect(yearInput).toHaveFocus();
+          });
 
-        test('tab 2: Month', () => {
-          const { monthInput } = renderDatePicker();
-          tabNTimes(2);
-          expect(monthInput).toHaveFocus();
-        });
+          test('tab 2: Month', () => {
+            const { monthInput } = renderDatePicker();
+            tabNTimes(2);
+            expect(monthInput).toHaveFocus();
+          });
 
-        test('tab 3: Day', () => {
-          const { dayInput } = renderDatePicker();
-          tabNTimes(3);
-          expect(dayInput).toHaveFocus();
+          test('tab 3: Day', () => {
+            const { dayInput } = renderDatePicker();
+            tabNTimes(3);
+            expect(dayInput).toHaveFocus();
+          });
+
+          test('tab 4: next element in tab order', () => {
+            const { inputContainer } = renderDatePicker();
+            tabNTimes(4);
+            expect(inputContainer).not.toContainElement(
+              document.activeElement as HTMLElement,
+            );
+          });
         });
 
-        test.skip('tab 4: next element in tab order', () => {
-          const { inputContainer } = renderDatePicker();
-          tabNTimes(4);
-          expect(inputContainer).not.toContainElement(
-            document.activeElement as HTMLElement,
-          );
+        describe.each(range(0, 9))('when the menu is open', n => {
+          test(`Tab ${n} times`, () => {
+            const { yearInput, monthInput, dayInput, openMenu } =
+              renderDatePicker();
+            const {
+              leftChevron,
+              monthSelect,
+              yearSelect,
+              rightChevron,
+              calendarGrid,
+            } = openMenu();
+
+            const highlightedCell = calendarGrid?.querySelector(
+              '[data-highlight="true"]',
+            );
+
+            tabNTimes(n);
+
+            switch (n) {
+              case 0:
+                expect(yearInput).toHaveFocus();
+                break;
+              case 1:
+                expect(monthInput).toHaveFocus();
+                break;
+              case 2:
+                expect(dayInput).toHaveFocus();
+                break;
+
+              case 3:
+                expect(highlightedCell).toHaveFocus();
+                break;
+              case 4:
+                expect(leftChevron).toHaveFocus();
+                break;
+              case 5:
+                expect(monthSelect).toHaveFocus();
+                break;
+              case 6:
+                expect(yearSelect).toHaveFocus();
+                break;
+              case 7:
+                expect(rightChevron).toHaveFocus();
+                break;
+              case 8:
+                // Focus is trapped within the menu
+                expect(highlightedCell).toHaveFocus();
+                break;
+            }
+          });
         });
       });
 
-      describe.each(range(0, 9))('when the menu is open', n => {
-        test(`Tab ${n} times`, () => {
-          const { yearInput, monthInput, dayInput, openMenu } =
-            renderDatePicker();
-          const {
-            leftChevron,
-            monthSelect,
-            yearSelect,
-            rightChevron,
-            calendarGrid,
-          } = openMenu();
-
-          const highlightedCell = calendarGrid?.querySelector(
-            '[data-highlight="true"]',
-          );
-
-          tabNTimes(n);
-
-          switch (n) {
-            case 0:
-              expect(yearInput).toHaveFocus();
-              break;
-            case 1:
-              expect(monthInput).toHaveFocus();
-              break;
-            case 2:
-              expect(dayInput).toHaveFocus();
-              break;
-
-            case 3:
-              expect(highlightedCell).toHaveFocus();
-              break;
-            case 4:
-              expect(leftChevron).toHaveFocus();
-              break;
-            case 5:
-              expect(monthSelect).toHaveFocus();
-              break;
-            case 6:
-              expect(yearSelect).toHaveFocus();
-              break;
-            case 7:
-              expect(rightChevron).toHaveFocus();
-              break;
-            case 8:
-              // Focus is trapped within the menu
-              expect(highlightedCell).toHaveFocus();
-              break;
-          }
-        });
+      describe('Enter key', () => {
+        test.todo('if menu is closed, opens the menu');
+        test.todo('if month/year select is open, updates the displayed month');
+        test.todo('fires a change handler');
+        test.todo('closes the menu');
       });
-    });
 
-    describe('Enter key', () => {
-      test.todo('fires a change handler');
-      test.todo('closes the menu');
-      test.todo('if month/year select is open, updates the displayed month');
-      test.todo('if menu is closed, opens the menu');
-    });
+      describe('Escape key', () => {
+        test.todo('closes the menu');
+        test.todo('does not fire a change handler');
+        test.todo('focus remains on the input element');
+      });
 
-    describe('Escape key', () => {
-      test.todo('closes the menu');
-      test.todo('does not fire a change handler');
-      test.todo('focus remains on the input element');
+      /**
+       * Arrow Keys:
+       * Since arrow key behavior changes based on whether the input or menu is focused,
+       * many of these tests exist in the "DatePickerInput" and "DatePickerMenu" components
+       */
     });
-
-    /**
-     * Arrow Keys:
-     * Since arrow key behavior changes based on whether the input or menu is focused,
-     * many of these tests exist in the "DatePickerInput" and "DatePickerMenu" components
-     */
   });
 
   describe('Controlled vs Uncontrolled', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
index 48d7c9f555..f204914d04 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
@@ -62,11 +62,6 @@ export const DatePickerContents = forwardRef<
       setOpen(false);
     };
 
-    const handleMonthChange: DatePickerMenuProps['onMonthChange'] =
-      newMonth => {
-        setDisplayMonth(newMonth);
-      };
-
     return (
       <>
         <DatePickerInput
@@ -84,8 +79,8 @@ export const DatePickerContents = forwardRef<
           value={value}
           isOpen={isOpen}
           month={displayMonth}
+          setMonth={setDisplayMonth}
           onCellClick={handleCellClick}
-          onMonthChange={handleMonthChange}
         />
       </>
     );
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index bd4f7a56e4..a18b195321 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -26,7 +26,7 @@ const renderDatePickerMenu = (
         isOpen
         value={null}
         month={new Date(Date.UTC(2023, Month.September, 1))}
-        onMonthChange={() => {}}
+        setMonth={() => {}}
         onCellClick={() => {}}
         {...props}
       />
@@ -91,10 +91,7 @@ describe('packages/date-picker/date-picker-menu', () => {
 
     describe('rendered cells', () => {
       test('have appropriate `aria-label`', () => {
-        const { calendarGrid } = renderDatePickerMenu();
-        const todayCell = calendarGrid.querySelector(
-          `[data-iso="${testToday.toISOString()}"]`,
-        );
+        const { todayCell } = renderDatePickerMenu();
         expect(todayCell).toHaveAttribute('aria-label', 'Sun Sep 10 2023');
       });
     });
@@ -212,47 +209,47 @@ describe('packages/date-picker/date-picker-menu', () => {
 
       describe('call the month change handler', () => {
         test('left arrow triggers handler', () => {
-          const onMonthChange = jest.fn();
+          const setMonth = jest.fn();
           const value = new Date(Date.UTC(2023, Month.September, 1));
-          renderDatePickerMenu({ value, onMonthChange });
+          renderDatePickerMenu({ value, setMonth });
           userEvent.tab();
           userEvent.keyboard('{arrowleft}');
-          expect(onMonthChange).toHaveBeenCalled();
+          expect(setMonth).toHaveBeenCalled();
         });
 
         test('right arrow triggers handler', () => {
-          const onMonthChange = jest.fn();
+          const setMonth = jest.fn();
           const value = new Date(Date.UTC(2023, Month.September, 30));
-          renderDatePickerMenu({ value, onMonthChange });
+          renderDatePickerMenu({ value, setMonth });
           userEvent.tab();
           userEvent.keyboard('{arrowright}');
-          expect(onMonthChange).toHaveBeenCalled();
+          expect(setMonth).toHaveBeenCalled();
         });
 
         test('up arrow triggers handler', () => {
           const value = new Date(Date.UTC(2023, Month.September, 6));
-          const onMonthChange = jest.fn();
-          renderDatePickerMenu({ value, onMonthChange });
+          const setMonth = jest.fn();
+          renderDatePickerMenu({ value, setMonth });
           userEvent.tab();
           userEvent.keyboard('{arrowup}');
-          expect(onMonthChange).toHaveBeenCalled();
+          expect(setMonth).toHaveBeenCalled();
         });
 
         test('down arrow triggers handler', async () => {
           const value = new Date(Date.UTC(2023, Month.September, 25));
-          const onMonthChange = jest.fn();
-          renderDatePickerMenu({ value, onMonthChange });
+          const setMonth = jest.fn();
+          renderDatePickerMenu({ value, setMonth });
           userEvent.tab();
           userEvent.keyboard('{arrowdown}');
-          expect(onMonthChange).toHaveBeenCalled();
+          expect(setMonth).toHaveBeenCalled();
         });
 
         test('does not trigger handler when month does not need to change', () => {
-          const onMonthChange = jest.fn();
-          renderDatePickerMenu({ value: testValue, onMonthChange });
+          const setMonth = jest.fn();
+          renderDatePickerMenu({ value: testValue, setMonth });
           userEvent.tab();
           userEvent.keyboard('{arrowleft}{arrowright}{arrowup}{arrowdown}');
-          expect(onMonthChange).not.toHaveBeenCalled();
+          expect(setMonth).not.toHaveBeenCalled();
         });
       });
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index ee8bf50b69..51960bc1c0 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { addDays, subDays } from 'date-fns';
+import { addDays, isAfter, subDays } from 'date-fns';
 
 import { useDynamicRefs } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
@@ -17,9 +17,13 @@ import { CalendarGrid } from '../../Calendar/CalendarGrid';
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
 import { Months } from '../../constants';
 import { useDatePickerContext } from '../../DatePickerContext';
+import { getDaysInUTCMonth } from '../../utils/getDaysInUTCMonth';
 import { getUTCDateString } from '../../utils/getUTCDateString';
 import { isSameUTCDay } from '../../utils/isSameUTCDay';
+import { isSameUTCMonth } from '../../utils/isSameUTCMonth';
 import { setToUTCMidnight } from '../../utils/setToUTCMidnight';
+import { setUTCDate } from '../../utils/setUTCDate';
+import { setUTCMonth } from '../../utils/setUTCMonth';
 
 import {
   menuCalendarGridStyles,
@@ -35,13 +39,16 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       isOpen,
       value,
       month,
-      onMonthChange,
+      setMonth,
       onCellClick,
       ...rest
     }: DatePickerMenuProps,
     fwdRef,
   ) => {
     const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
+    const monthLabel =
+      Months[month.getUTCMonth()].long + ' ' + month.getUTCFullYear();
+    const ref = useForwardedRef(fwdRef, null);
     const headerRef = useRef<HTMLDivElement>(null);
     const calendarRef = useRef<HTMLTableElement>(null);
     // TODO:
@@ -51,6 +58,36 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     const { isInRange } = useDatePickerContext();
     const [highlight, setHighlight] = useState<Date | null>(value || today);
 
+    // A wrapper for setMonth that handles side effects
+    const updateMonth: typeof setMonth = newMonth => {
+      if (
+        isSameUTCMonth(newMonth, month) ||
+        isSameUTCMonth(newMonth, highlight)
+      ) {
+        return;
+      }
+
+      if (isAfter(newMonth, month)) {
+        // set highlight to first of month
+        const newHighlight = highlight
+          ? setUTCMonth(setUTCDate(highlight, 1), newMonth.getUTCMonth())
+          : setUTCDate(newMonth, 1);
+        setHighlight(newHighlight);
+      } else {
+        // set highlight to last of month
+        const daysInMonth = getDaysInUTCMonth(newMonth);
+        const newHighlight = highlight
+          ? setUTCMonth(
+              setUTCDate(highlight, daysInMonth),
+              newMonth.getUTCMonth(),
+            )
+          : setUTCDate(newMonth, daysInMonth);
+        setHighlight(newHighlight);
+      }
+
+      setMonth(newMonth);
+    };
+
     const getCellState = (cellDay: Date | null) => {
       if (isInRange(cellDay)) {
         if (isSameUTCDay(cellDay, value)) {
@@ -63,10 +100,6 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       return CalendarCellState.Disabled;
     };
 
-    const ref = useForwardedRef(fwdRef, null);
-    const monthLabel =
-      Months[month.getUTCMonth()].long + ' ' + month.getUTCFullYear();
-
     const cellClickHandlerForDay = (day: Date) => () => {
       if (isInRange(day)) {
         onCellClick(day);
@@ -131,7 +164,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       if (isInRange(nextHighlight)) {
         // change month if nextHighlight is different than `month`
         if (month.getUTCMonth() !== nextHighlight.getUTCMonth()) {
-          onMonthChange(nextHighlight);
+          updateMonth(nextHighlight);
         }
 
         setHighlight(nextHighlight);
@@ -185,7 +218,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
           <DatePickerMenuHeader
             ref={headerRef}
             month={month}
-            onMonthChange={onMonthChange}
+            setMonth={updateMonth}
           />
         </div>
       </MenuWrapper>
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
index d5de0982f2..382dd8c53f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
@@ -21,7 +21,7 @@ export type DatePickerMenuProps = PortalControlProps &
      * Callback fired when the date carets are clicked,
      * or when the month/year dropdowns are modified
      */
-    onMonthChange: (newMonth: Date) => void;
+    setMonth: (newMonth: Date) => void;
 
     /** Callback fired when a cell is clicked */
     onCellClick: (cellDate: Date) => void;
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index bedd120844..2b343aaea7 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -18,7 +18,7 @@ import { DatePickerMenuProps } from '../DatePickerMenu.types';
 
 type DatePickerMenuHeaderProps = Pick<
   DatePickerMenuProps,
-  'month' | 'onMonthChange'
+  'month' | 'setMonth'
 >;
 
 const selectElementProps = {
@@ -33,7 +33,7 @@ const selectElementProps = {
 export const DatePickerMenuHeader = forwardRef<
   HTMLDivElement,
   DatePickerMenuHeaderProps
->(({ month, onMonthChange }: DatePickerMenuHeaderProps, fwdRef) => {
+>(({ month, setMonth }: DatePickerMenuHeaderProps, fwdRef) => {
   const { min, max, isInRange } = useDatePickerContext();
 
   const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
@@ -42,13 +42,13 @@ export const DatePickerMenuHeader = forwardRef<
     // TODO: may need to update this function to check if the months are in range
     // (could cause errors when the min date is near the end of the month)
     if (isInRange(newMonth)) {
-      onMonthChange(newMonth);
+      setMonth(newMonth);
     } else if (isBefore(newMonth, min)) {
       // if the selected month is not in range,
       // set the month to the first or last possible month
-      onMonthChange(min);
+      setMonth(min);
     } else {
-      onMonthChange(max);
+      setMonth(max);
     }
   };
 

From 7711dd43ac1499cae7dc754ac822768a6d0937de Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 26 Sep 2023 11:54:27 -0400
Subject: [PATCH 119/351] Updates calendar cell focus & hover styles

---
 .../CalendarCell/CalendarCell.stories.tsx     |   5 +-
 .../CalendarCell/CalendarCell.styles.ts       | 134 ++++++++++++------
 .../Calendar/CalendarCell/CalendarCell.tsx    |   4 +-
 3 files changed, 92 insertions(+), 51 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
index 9f28c57d54..96798a4181 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
@@ -20,9 +20,10 @@ const meta: StoryMetaType<typeof CalendarCell, DatePickerContextProps> = {
     generate: {
       combineArgs: {
         darkMode: [false, true],
-        state: Object.values(CalendarCellState),
-        isCurrent: [false, true],
         isHighlighted: [false, true],
+        'data-hover': [false, true],
+        isCurrent: [false, true],
+        state: Object.values(CalendarCellState),
       },
       decorator: (Instance, ctx) => (
         <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
index 9df4e16f47..96c75a7315 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
@@ -5,13 +5,19 @@ import {
   fontFamilies,
   fontWeights,
   spacing,
+  transitionDuration,
   typeScales,
 } from '@leafygreen-ui/tokens';
 
 import { CalendarCellState } from './CalendarCell.types';
 
 const CELL_SIZE = 28;
-export const indicatorClassName = createUniqueClassName('lg-calendar-cell');
+export const indicatorClassName = createUniqueClassName('calendar-cell');
+
+const calendarCellFocusRing: Record<Theme, string> = {
+  [Theme.Light]: `0 0 0 1px ${palette.white}, 0 0 0 3px ${palette.blue.light1}`,
+  [Theme.Dark]: `0 0 0 1px ${palette.black}, 0 0 0 3px ${palette.blue.light1}`,
+};
 
 export const calendarCellStyles = css`
   position: relative;
@@ -69,7 +75,9 @@ const _baseRangeEndStyles = css`
   }
 `;
 
-/** Base styles for each state */
+/**
+ * Base styles for each state
+ */
 export const calendarCellStateStyles: ThemedStateStyles = {
   [Theme.Light]: {
     [CalendarCellState.Default]: css`
@@ -103,6 +111,7 @@ export const calendarCellStateStyles: ThemedStateStyles = {
       _baseRangeStartStyles,
       _baseRangeEndStyles,
       css`
+        color: ${palette.black};
         &:before,
         &:after {
           background-color: ${palette.blue.light3};
@@ -142,6 +151,7 @@ export const calendarCellStateStyles: ThemedStateStyles = {
       _baseRangeStartStyles,
       _baseRangeEndStyles,
       css`
+        color: ${palette.blue.light3};
         &:before,
         &:after {
           background-color: ${palette.blue.dark3};
@@ -151,7 +161,9 @@ export const calendarCellStateStyles: ThemedStateStyles = {
   },
 };
 
-/** Styles for the current date */
+/**
+ * Styles for the current date
+ */
 export const calendarCellCurrentStyles: ThemedStateStyles = {
   [Theme.Light]: {
     [CalendarCellState.Default]: css`
@@ -191,80 +203,108 @@ export const calendarCellCurrentStyles: ThemedStateStyles = {
   },
 };
 
-const _activeHoverStyles: Record<Theme, string> = {
+/**
+ * Highlighted / Focus styles
+ */
+const highlightSelector = '&:focus-visible, &[data-highlight="true"]'; // using a data selector lets us easily test these states
+
+export const calendarCellHighlightStyles: Record<Theme, string> = {
   [Theme.Light]: css`
-    color: ${palette.black};
+    ${highlightSelector} {
+      outline: none;
 
-    & > .${indicatorClassName} {
-      background-color: ${palette.white};
-      outline: 1px solid ${palette.blue.dark1};
+      & > .${indicatorClassName} {
+        box-shadow: ${calendarCellFocusRing.light};
+        transition: ease-in-out ${transitionDuration.default}ms box-shadow;
+      }
     }
   `,
   [Theme.Dark]: css`
-    color: ${palette.white};
+    ${highlightSelector} {
+      outline: none;
 
-    & > .${indicatorClassName} {
-      background-color: ${palette.gray.dark3};
-      outline: 1px solid ${palette.blue.light1};
+      & > .${indicatorClassName} {
+        transition: ease-in-out ${transitionDuration.default}ms box-shadow;
+
+        box-shadow: ${calendarCellFocusRing.dark};
+      }
     }
   `,
 };
 
-/** Styles for a hovered date */
-export const calendarCellHighlightStyles: ThemedStateStyles = {
-  [Theme.Light]: {
-    [CalendarCellState.Default]: css`
+/**
+ * Hover Styles
+ */
+const hoverSelector = '&:hover, &[data-hover="true"]';
+const _defaultThemeHoverStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    ${hoverSelector} {
       color: ${palette.black};
 
       & > .${indicatorClassName} {
         background-color: ${palette.gray.light2};
       }
-    `,
+    }
+  `,
+  [Theme.Dark]: css`
+    ${hoverSelector} {
+      color: ${palette.white};
+
+      & > .${indicatorClassName} {
+        background-color: ${palette.gray.dark3};
+      }
+    }
+  `,
+};
+
+const _activeHoverStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    ${hoverSelector} {
+      & > .${indicatorClassName} {
+        background-color: ${palette.blue.dark2};
+      }
+    }
+  `,
+  [Theme.Dark]: css`
+    ${hoverSelector} {
+      & > .${indicatorClassName} {
+        background-color: ${palette.blue.light2};
+      }
+    }
+  `,
+};
+
+export const calendarCellHoverStyles: ThemedStateStyles = {
+  [Theme.Light]: {
+    [CalendarCellState.Default]: _defaultThemeHoverStyles[Theme.Light],
     [CalendarCellState.Active]: _activeHoverStyles[Theme.Light],
     [CalendarCellState.Start]: _activeHoverStyles[Theme.Light],
     [CalendarCellState.End]: _activeHoverStyles[Theme.Light],
-    [CalendarCellState.Range]: cx(
-      _activeHoverStyles[Theme.Light],
-      css`
+    [CalendarCellState.Range]: css`
+      ${hoverSelector} {
         & > .${indicatorClassName} {
-          background-color: ${palette.blue.light3};
+          background-color: ${palette.blue.light2};
         }
-      `,
-    ),
-    [CalendarCellState.Disabled]: css``, // No change
-  },
-  [Theme.Dark]: {
-    [CalendarCellState.Default]: css`
-      color: ${palette.gray.light2};
-
-      & > .${indicatorClassName} {
-        background-color: ${palette.gray.dark2};
       }
     `,
+    [CalendarCellState.Disabled]: css``,
+  },
+  [Theme.Dark]: {
+    [CalendarCellState.Default]: _defaultThemeHoverStyles[Theme.Dark],
     [CalendarCellState.Active]: _activeHoverStyles[Theme.Dark],
     [CalendarCellState.Start]: _activeHoverStyles[Theme.Dark],
     [CalendarCellState.End]: _activeHoverStyles[Theme.Dark],
-    [CalendarCellState.Range]: cx(
-      _activeHoverStyles[Theme.Dark],
-      css`
+    [CalendarCellState.Range]: css`
+      ${hoverSelector} {
         & > .${indicatorClassName} {
-          background-color: ${palette.blue.dark3};
+          background-color: ${palette.blue.dark2};
         }
-      `,
-    ),
-    [CalendarCellState.Disabled]: css``, // No change
+      }
+    `,
+    [CalendarCellState.Disabled]: css``,
   },
 };
 
-export const calendarCellHoverStyles = (
-  theme: Theme,
-  state: CalendarCellState,
-) => css`
-  &:hover {
-    ${calendarCellHighlightStyles[theme][state]}
-  }
-`;
-
 export const currentStyles: Record<Theme, string> = {
   [Theme.Light]: css`
     color: ${palette.blue.base};
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
index 7fa53d5e9c..4bd94bfc93 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -72,10 +72,10 @@ export const CalendarCell = React.forwardRef<
         className={cx(
           calendarCellStyles,
           calendarCellStateStyles[theme][state],
-          calendarCellHoverStyles(theme, state),
+          calendarCellHoverStyles[theme][state],
           {
             [calendarCellCurrentStyles[theme][state]]: isCurrent,
-            [calendarCellHighlightStyles[theme][state]]: isHighlighted,
+            [calendarCellHighlightStyles[theme]]: isFocusable,
           },
           className,
         )}

From d03e74dd0c6a221daec54c0f84fa04aeeda58192 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 26 Sep 2023 15:05:00 -0400
Subject: [PATCH 120/351] form field focus styling. segment change handler

---
 .../DateFormField/DateFormField.styles.ts     |  42 ++-
 .../DateInput/DateFormField/DateFormField.tsx |  13 +-
 .../DateFormField/DateFormField.types.ts      |   4 +-
 .../DateInputBox/DateInputBox.spec.tsx        |  18 ++
 .../DateInput/DateInputBox/DateInputBox.tsx   |   5 +-
 .../DateInputBox/DateInputBox.types.ts        |   9 +
 .../src/DatePicker/DatePicker.spec.tsx        | 305 ++++++++++++------
 .../src/DatePicker/DatePicker.testutils.tsx   |   3 +
 .../src/DatePicker/DatePicker.types.ts        |  11 +-
 .../DatePickerContents/DatePickerContents.tsx |  35 +-
 .../DatePickerInput/DatePickerInput.tsx       |  10 +-
 .../DatePickerInput/DatePickerInput.types.ts  |   2 +-
 12 files changed, 331 insertions(+), 126 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts b/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts
index 063608c0b6..58cc68c60c 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@leafygreen-ui/emotion';
-import { Theme } from '@leafygreen-ui/lib';
+import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 import {
   BaseFontSize,
@@ -15,6 +15,7 @@ import {
 
 import { InputState } from './DateFormField.types';
 
+export const iconButtonClassName = createUniqueClassName('calendar-button');
 export const baseWrapperStyles = css``;
 
 export const wrapperFontStyles: Record<BaseFontSize, string> = {
@@ -172,37 +173,52 @@ export const inputModeStyles: Record<Theme, string> = {
   `,
 };
 
-export const inputFocusStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
+const focusSelector = (styles: string) => css`
+  @supports selector(:has(a, b)) {
+    &:not(:disabled):focus-within:not(:has(.${iconButtonClassName}:focus)) {
+      ${styles}
+    }
+  }
+
+  /* Fallback for when "has" is unsupported */
+  @supports not selector(:has(a, b)) {
     &:not(:disabled):focus-within {
+      ${styles}
+    }
+  }
+`;
+
+export const inputFocusStyles: Record<Theme, string> = {
+  [Theme.Light]: focusSelector(`
+     {
       box-shadow: ${focusRing.light.input};
       border-color: ${palette.white};
     }
-  `,
-  [Theme.Dark]: css`
-    &:not(:disabled):focus-within {
+  `),
+  [Theme.Dark]: focusSelector(`
+     {
       box-shadow: ${focusRing.dark.input};
       border-color: ${palette.gray.dark4};
     }
-  `,
+  `),
 };
 
 export const inputSizeStyles: Record<Size, string> = {
   [Size.XSmall]: css`
     height: 22px;
-    padding-inline: 10px;
+    padding-inline: 10px 2px;
   `,
   [Size.Small]: css`
     height: 28px;
-    padding-inline: 10px;
+    padding-inline: 10px 2px;
   `,
   [Size.Default]: css`
     height: 36px;
-    padding-inline: 12px;
+    padding-inline: 12px 4px;
   `,
   [Size.Large]: css`
     height: 48px;
-    padding-inline: 16px;
+    padding-inline: 16px 8px;
   `,
 };
 
@@ -251,7 +267,3 @@ export const errorIconStyles: Record<Theme, string> = {
     color: ${palette.red.light1};
   `,
 };
-
-export const iconStyles = css`
-  color: ${palette.gray.base};
-`;
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
index 5532b96f91..3212fbe13e 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
+import IconButton from '@leafygreen-ui/icon-button';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
 import {
@@ -17,7 +18,7 @@ import {
   baseWrapperStyles,
   childrenWrapperStyles,
   errorIconStyles,
-  iconStyles,
+  iconButtonClassName,
   inputBaseStyles,
   inputFocusStyles,
   inputModeStyles,
@@ -44,6 +45,7 @@ export const DateFormField = React.forwardRef<
       descriptionId,
       errorId,
       onInputClick,
+      onIconButtonClick,
       ...rest
     }: DateFormFieldProps,
     fwdRef,
@@ -87,7 +89,14 @@ export const DateFormField = React.forwardRef<
           {state === InputState.Error && (
             <Icon glyph="Warning" className={errorIconStyles[theme]} />
           )}
-          <Icon glyph="Calendar" className={iconStyles} />
+          <IconButton
+            aria-label="Open calendar menu"
+            className={iconButtonClassName}
+            onClick={onIconButtonClick}
+            type="button"
+          >
+            <Icon glyph="Calendar" />
+          </IconButton>
         </div>
         {state === InputState.Error && (
           <Error id={errorId}>{errorMessage}</Error>
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts b/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
index 3991732cbc..dc4ab465c4 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
@@ -19,5 +19,7 @@ export interface DateFormFieldProps extends HTMLElementProps<'div'> {
   descriptionId?: string;
   errorId?: string;
   /** Fired when the input wrapper is clicked (not any surrounding text) */
-  onInputClick?: MouseEventHandler;
+  onInputClick?: MouseEventHandler<HTMLDivElement>;
+  /** Fired then the calendar icon button is clicked */
+  onIconButtonClick?: MouseEventHandler<HTMLButtonElement>;
 }
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
index 32312a14b2..031c696a11 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -136,6 +136,24 @@ describe('packages/date-input-box', () => {
       expect(handler).not.toHaveBeenCalled();
     });
 
+    test('typing into a segment fires a segment change handler', () => {
+      const onSegmentChange = jest.fn();
+
+      const { yearInput } = renderDateInputBox(
+        {
+          value: null,
+          onSegmentChange,
+        },
+        {
+          dateFormat: 'iso8601',
+          timeZone: 'UTC',
+        },
+      );
+      userEvent.type(yearInput, '1993');
+
+      expect(onSegmentChange).toHaveBeenCalledWith('year', 1993);
+    });
+
     test('typing a complete date fires the change handler', () => {
       const handler = jest.fn();
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index ae68970506..c2e2721cef 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -38,6 +38,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
       className,
       labelledBy,
       segmentRefs,
+      onSegmentChange,
       ...rest
     }: DateInputBoxProps,
     fwdRef,
@@ -79,7 +80,9 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
      */
     const handleSegmentChange =
       (segment: DateSegment) => (newValue: string) => {
-        setSegment(segment, Number(newValue));
+        const newSegmentValue = Number(newValue);
+        setSegment(segment, newSegmentValue);
+        onSegmentChange?.(segment, newSegmentValue);
       };
 
     return (
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
index 551029d6bd..6dece53d6e 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
@@ -1,5 +1,6 @@
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
+import { DateSegment, DateSegmentValue } from '../../hooks/useDateSegments';
 import { SegmentRefs } from '../../hooks/useSegmentRefs';
 import { DateType } from '../../types';
 
@@ -16,6 +17,14 @@ export interface DateInputBoxProps
    */
   setValue?: (date: DateType) => void;
 
+  /**
+   * Callback fired when any segment changes, but not necessarily a full value
+   */
+  onSegmentChange?: (
+    segment: DateSegment,
+    segmentValue: DateSegmentValue,
+  ) => void;
+
   /**
    * id of the labelling element
    */
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 225b6cef74..24b464bdb2 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -183,6 +183,15 @@ describe('packages/date-picker', () => {
         });
       });
 
+      describe('Clicking the Calendar button', () => {
+        test('opens the menu', () => {
+          const { calendarButton, getMenuElements } = renderDatePicker();
+          userEvent.click(calendarButton);
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).toBeInTheDocument();
+        });
+      });
+
       describe('Clicking a Calendar cell', () => {
         test('fires a change handler', () => {
           const onChange = jest.fn();
@@ -354,8 +363,194 @@ describe('packages/date-picker', () => {
       });
     });
 
+    describe('Keyboard navigation', () => {
+      describe('Tab', () => {
+        test('menu does not open on keyboard focus', () => {
+          const { getMenuElements } = renderDatePicker();
+          userEvent.tab();
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).not.toBeInTheDocument();
+        });
+
+        describe('Tab order', () => {
+          describe.each(range(0, 4))('when menu is closed', n => {
+            test(`Tab ${n} times`, () => {
+              const {
+                yearInput,
+                monthInput,
+                dayInput,
+                calendarButton,
+                inputContainer,
+              } = renderDatePicker();
+              tabNTimes(n);
+
+              switch (n) {
+                case 0:
+                  expect(
+                    inputContainer.contains(document.activeElement),
+                  ).toBeFalsy();
+                  break;
+                case 1:
+                  expect(yearInput).toHaveFocus();
+                  break;
+                case 2:
+                  expect(monthInput).toHaveFocus();
+                  break;
+                case 3:
+                  expect(dayInput).toHaveFocus();
+                  break;
+                case 4:
+                  expect(calendarButton).toHaveFocus();
+                  break;
+                case 5:
+                  expect(
+                    inputContainer.contains(document.activeElement),
+                  ).toBeFalsy();
+                  break;
+              }
+            });
+          });
+
+          describe.each(range(0, 9))('when the menu is open', n => {
+            test(`Tab ${n} times`, () => {
+              const {
+                yearInput,
+                monthInput,
+                dayInput,
+                calendarButton,
+                openMenu,
+              } = renderDatePicker();
+              const {
+                leftChevron,
+                monthSelect,
+                yearSelect,
+                rightChevron,
+                calendarGrid,
+              } = openMenu();
+
+              const highlightedCell = calendarGrid?.querySelector(
+                '[data-highlight="true"]',
+              );
+
+              tabNTimes(n);
+
+              switch (n) {
+                case 0:
+                  expect(yearInput).toHaveFocus();
+                  break;
+                case 1:
+                  expect(monthInput).toHaveFocus();
+                  break;
+                case 2:
+                  expect(dayInput).toHaveFocus();
+                  break;
+                case 3:
+                  expect(calendarButton).toHaveFocus();
+                  break;
+                case 4:
+                  expect(highlightedCell).toHaveFocus();
+                  break;
+                case 5:
+                  expect(leftChevron).toHaveFocus();
+                  break;
+                case 6:
+                  expect(monthSelect).toHaveFocus();
+                  break;
+                case 7:
+                  expect(yearSelect).toHaveFocus();
+                  break;
+                case 8:
+                  expect(rightChevron).toHaveFocus();
+                  break;
+                case 9:
+                  // Focus is trapped within the menu
+                  expect(highlightedCell).toHaveFocus();
+                  break;
+              }
+            });
+          });
+        });
+      });
+
+      describe('Enter key', () => {
+        test.skip('if menu is closed, opens the menu', () => {
+          const { getMenuElements } = renderDatePicker();
+          userEvent.tab();
+          userEvent.keyboard('{enter}');
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).toBeInTheDocument();
+        });
+
+        test('if month/year select is open, updates the displayed month', async () => {
+          const { openMenu, findAllByRole } = renderDatePicker();
+          const { monthSelect } = openMenu();
+          userEvent.type(monthSelect!, '{enter}');
+          const options = await findAllByRole('option');
+          expect(options.length).toBeGreaterThan(0);
+        });
+
+        test('if a cell is focused, fires a change handler', () => {
+          const onChange = jest.fn();
+          const { openMenu } = renderDatePicker({ onChange });
+          const { calendarCells } = openMenu();
+          const firstCell = calendarCells[0];
+          userEvent.type(firstCell, '{enter}');
+          expect(onChange).toHaveBeenCalled();
+        });
+
+        test('if a cell is focused, closes the menu', async () => {
+          const { openMenu } = renderDatePicker();
+          const { calendarCells, menuContainerEl } = openMenu();
+          const firstCell = calendarCells[0];
+          userEvent.type(firstCell, '{enter}');
+          await waitForElementToBeRemoved(menuContainerEl);
+        });
+      });
+
+      describe('Escape key', () => {
+        test('closes the menu', async () => {
+          const { openMenu } = renderDatePicker();
+          const { menuContainerEl } = openMenu();
+          userEvent.keyboard('{escape}');
+          await waitForElementToBeRemoved(menuContainerEl);
+          expect(menuContainerEl).not.toBeInTheDocument();
+        });
+
+        test('does not fire a change handler', () => {
+          const onChange = jest.fn();
+          const { openMenu } = renderDatePicker({ onChange });
+          openMenu();
+          userEvent.keyboard('{escape}');
+          expect(onChange).not.toHaveBeenCalled();
+        });
+
+        test('focus remains in the input element', () => {
+          const onChange = jest.fn();
+          const { openMenu, inputContainer } = renderDatePicker({ onChange });
+          openMenu();
+          userEvent.keyboard('{escape}');
+          expect(inputContainer.contains(document.activeElement)).toBeTruthy();
+        });
+      });
+
+      /**
+       * Arrow Keys:
+       * Since arrow key behavior changes based on whether the input or menu is focused,
+       * many of these tests exist in the "DatePickerInput" and "DatePickerMenu" components
+       */
+    });
+
     describe('Typing', () => {
       describe('Typing into the input', () => {
+        test.skip('opens the menu', () => {
+          const { yearInput, getMenuElements } = renderDatePicker();
+          userEvent.tab();
+          expect(yearInput).toHaveFocus();
+          userEvent.keyboard('2');
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).toBeInTheDocument();
+        });
+
         test('does not fire a change handler when the value is incomplete', () => {
           const onChange = jest.fn();
           const { yearInput } = renderDatePicker({
@@ -365,6 +560,13 @@ describe('packages/date-picker', () => {
           expect(onChange).not.toHaveBeenCalled();
         });
 
+        test('fires a segment change handler', () => {
+          const onSegmentChange = jest.fn();
+          const { yearInput } = renderDatePicker({ onSegmentChange });
+          userEvent.type(yearInput, '2023');
+          expect(onSegmentChange).toHaveBeenCalledWith('year', 2023);
+        });
+
         test('fires a change handler when the value is a valid date', () => {
           const onChange = jest.fn();
           const { yearInput, monthInput, dayInput } = renderDatePicker({
@@ -391,109 +593,6 @@ describe('packages/date-picker', () => {
         test.todo('focuses the next segment if the segment value is valid');
       });
     });
-
-    describe('Keyboard navigation', () => {
-      describe('Tab order', () => {
-        describe('when menu is closed', () => {
-          test('tab 1: Year', () => {
-            const { yearInput } = renderDatePicker();
-            userEvent.tab();
-            expect(yearInput).toHaveFocus();
-          });
-
-          test('tab 2: Month', () => {
-            const { monthInput } = renderDatePicker();
-            tabNTimes(2);
-            expect(monthInput).toHaveFocus();
-          });
-
-          test('tab 3: Day', () => {
-            const { dayInput } = renderDatePicker();
-            tabNTimes(3);
-            expect(dayInput).toHaveFocus();
-          });
-
-          test('tab 4: next element in tab order', () => {
-            const { inputContainer } = renderDatePicker();
-            tabNTimes(4);
-            expect(inputContainer).not.toContainElement(
-              document.activeElement as HTMLElement,
-            );
-          });
-        });
-
-        describe.each(range(0, 9))('when the menu is open', n => {
-          test(`Tab ${n} times`, () => {
-            const { yearInput, monthInput, dayInput, openMenu } =
-              renderDatePicker();
-            const {
-              leftChevron,
-              monthSelect,
-              yearSelect,
-              rightChevron,
-              calendarGrid,
-            } = openMenu();
-
-            const highlightedCell = calendarGrid?.querySelector(
-              '[data-highlight="true"]',
-            );
-
-            tabNTimes(n);
-
-            switch (n) {
-              case 0:
-                expect(yearInput).toHaveFocus();
-                break;
-              case 1:
-                expect(monthInput).toHaveFocus();
-                break;
-              case 2:
-                expect(dayInput).toHaveFocus();
-                break;
-
-              case 3:
-                expect(highlightedCell).toHaveFocus();
-                break;
-              case 4:
-                expect(leftChevron).toHaveFocus();
-                break;
-              case 5:
-                expect(monthSelect).toHaveFocus();
-                break;
-              case 6:
-                expect(yearSelect).toHaveFocus();
-                break;
-              case 7:
-                expect(rightChevron).toHaveFocus();
-                break;
-              case 8:
-                // Focus is trapped within the menu
-                expect(highlightedCell).toHaveFocus();
-                break;
-            }
-          });
-        });
-      });
-
-      describe('Enter key', () => {
-        test.todo('if menu is closed, opens the menu');
-        test.todo('if month/year select is open, updates the displayed month');
-        test.todo('fires a change handler');
-        test.todo('closes the menu');
-      });
-
-      describe('Escape key', () => {
-        test.todo('closes the menu');
-        test.todo('does not fire a change handler');
-        test.todo('focus remains on the input element');
-      });
-
-      /**
-       * Arrow Keys:
-       * Since arrow key behavior changes based on whether the input or menu is focused,
-       * many of these tests exist in the "DatePickerInput" and "DatePickerMenu" components
-       */
-    });
   });
 
   describe('Controlled vs Uncontrolled', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index a36ed50814..ced960518a 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -11,6 +11,7 @@ interface RenderDatePickerResult extends RenderResult {
   dayInput: HTMLInputElement;
   monthInput: HTMLInputElement;
   yearInput: HTMLInputElement;
+  calendarButton: HTMLButtonElement;
   getMenuElements: () => RenderMenuResult;
   openMenu: () => RenderMenuResult;
 }
@@ -41,6 +42,7 @@ export const renderDatePicker = (
   const dayInput = result.getByLabelText('day') as HTMLInputElement;
   const monthInput = result.getByLabelText('month') as HTMLInputElement;
   const yearInput = result.getByLabelText('year') as HTMLInputElement;
+  const calendarButton = result.getByRole('button') as HTMLButtonElement;
 
   /**
    * Returns relevant menu elements.
@@ -90,6 +92,7 @@ export const renderDatePicker = (
     dayInput,
     monthInput,
     yearInput,
+    calendarButton,
     getMenuElements,
     openMenu,
   };
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index f82404d473..7838241994 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -1,3 +1,4 @@
+import { DateSegment, DateSegmentValue } from '../hooks/useDateSegments';
 import { BaseDatePickerProps, DateType } from '../types';
 
 export interface DatePickerProps extends BaseDatePickerProps {
@@ -8,7 +9,7 @@ export interface DatePickerProps extends BaseDatePickerProps {
   value?: DateType;
 
   /**
-   * A Callback fired when the user makes a value change.
+   * Callback fired when the user makes a value change.
    * Fired on click of a new date in the menu, or on keydown if the input contains a valid date
    *
    * Callback date argument will be a Date object in ISO-8601 format, and in UTC time.
@@ -25,4 +26,12 @@ export interface DatePickerProps extends BaseDatePickerProps {
    * Callback date argument will be a Date object in ISO 8601 format, and in UTC time.
    */
   handleValidation?: (value: Date) => void;
+
+  /**
+   * Callback fired when any segment changes, but not necessarily a full value
+   */
+  onSegmentChange?: (
+    segment: DateSegment,
+    segmentValue: DateSegmentValue,
+  ) => void;
 }
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
index f204914d04..23589e9f8a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
@@ -1,7 +1,14 @@
-import React, { forwardRef, MouseEventHandler, useRef, useState } from 'react';
+import React, {
+  forwardRef,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  useRef,
+  useState,
+} from 'react';
 import { isSameMonth, setMonth } from 'date-fns';
 
 import { useBackdropClick, useForwardedRef } from '@leafygreen-ui/hooks';
+import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../DatePickerContext';
 import { useSegmentRefs } from '../../hooks/useSegmentRefs';
@@ -20,6 +27,7 @@ export const DatePickerContents = forwardRef<
     fwdRef,
   ) => {
     const { isOpen, setOpen, formatParts, menuId } = useDatePickerContext();
+    const openMenu = () => setOpen(true);
     const closeMenu = () => setOpen(false);
 
     const segmentRefs = useSegmentRefs();
@@ -62,6 +70,29 @@ export const DatePickerContents = forwardRef<
       setOpen(false);
     };
 
+    const handleInputKeydown: KeyboardEventHandler = ({ key }) => {
+      switch (key) {
+        case keyMap.Enter:
+          openMenu();
+          break;
+        case keyMap.Escape:
+          closeMenu();
+          break;
+        default:
+          break;
+      }
+    };
+
+    const handleMenuKeydown: KeyboardEventHandler = ({ key }) => {
+      switch (key) {
+        case keyMap.Escape:
+          closeMenu();
+          break;
+        default:
+          break;
+      }
+    };
+
     return (
       <>
         <DatePickerInput
@@ -69,6 +100,7 @@ export const DatePickerContents = forwardRef<
           value={value}
           setValue={handleInputChange}
           onClick={handleInputClick}
+          onKeyDown={handleInputKeydown}
           segmentRefs={segmentRefs}
           {...rest}
         />
@@ -81,6 +113,7 @@ export const DatePickerContents = forwardRef<
           month={displayMonth}
           setMonth={setDisplayMonth}
           onCellClick={handleCellClick}
+          onKeyDown={handleMenuKeydown}
         />
       </>
     );
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 71fa6c3dd9..bfa1d32bfe 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -13,7 +13,14 @@ import { DatePickerInputProps } from './DatePickerInput.types';
 
 export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
   (
-    { value, setValue, onClick, segmentRefs, ...rest }: DatePickerInputProps,
+    {
+      value,
+      setValue,
+      onClick,
+      segmentRefs,
+      onSegmentChange,
+      ...rest
+    }: DatePickerInputProps,
     fwdRef,
   ) => {
     const { label, timeZone, formatParts } = useDatePickerContext();
@@ -118,6 +125,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           id={inputId}
           labelledBy={labelId}
           segmentRefs={segmentRefs}
+          onSegmentChange={onSegmentChange}
         />
       </DateFormField>
     );
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index b279d5a2e0..0b96cfb2e7 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -7,7 +7,7 @@ import { DateInputBoxProps } from '../../DateInput';
 import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
 
 export interface DatePickerInputProps
-  extends Pick<DateInputBoxProps, 'value' | 'setValue'>,
+  extends Pick<DateInputBoxProps, 'value' | 'setValue' | 'onSegmentChange'>,
     HTMLElementProps<'div'> {
   /**
    * Click handler

From a37a9cf02d2d8d4b482ee8de927e7085dd865326 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 26 Sep 2023 15:29:42 -0400
Subject: [PATCH 121/351] fix keydown handler

---
 .../date-picker/src/DatePicker/DatePicker.spec.tsx   |  1 +
 packages/date-picker/src/DatePicker/DatePicker.tsx   | 12 +++++++++++-
 .../DatePickerInput/DatePickerInput.spec.tsx         |  1 +
 .../DatePicker/DatePickerInput/DatePickerInput.tsx   |  8 +++++---
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 24b464bdb2..b201e4859b 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -538,6 +538,7 @@ describe('packages/date-picker', () => {
        * Since arrow key behavior changes based on whether the input or menu is focused,
        * many of these tests exist in the "DatePickerInput" and "DatePickerMenu" components
        */
+      test.todo('Basic arrow key tests');
     });
 
     describe('Typing', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index d46b95d46d..9d5efbc7c0 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 
 import { useIdAllocator } from '@leafygreen-ui/hooks';
 
@@ -34,6 +34,16 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       initialProp,
     );
 
+    // useEffect(() => {
+    //   const logActiveElement = () => {
+    //     console.log(document.activeElement);
+    //   };
+
+    //   document.addEventListener('focusin', logActiveElement);
+
+    //   return () => document.removeEventListener('focusin', logActiveElement);
+    // }, []);
+
     return (
       <DatePickerProvider
         value={{
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 125aca3d4f..80116e1a34 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -92,6 +92,7 @@ describe('packages/date-picker/date-picker-input', () => {
       });
 
       // TODO: FIXME:
+      // eslint-disable-next-line jest/no-disabled-tests
       test.skip('deletes the whole value on multiple presses', () => {
         const { monthInput } = renderDatePickerInput();
         userEvent.type(monthInput, '11{backspace}{backspace}');
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index bfa1d32bfe..46efc0b43f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -18,6 +18,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       setValue,
       onClick,
       segmentRefs,
+      onKeyDown,
       onSegmentChange,
       ...rest
     }: DatePickerInputProps,
@@ -31,7 +32,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
     const handleInputClick = onClick;
 
-    const handleKeyDown: KeyboardEventHandler = e => {
+    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
       const { target: _target, key } = e;
       const target = _target as HTMLElement;
       // if target is not a segment, do nothing
@@ -42,8 +43,6 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       const isInputEmpty = isZeroLike(target.value);
       const cursorPosition = target.selectionEnd;
 
-      // console.log({ value: target.value, key, isInputEmpty, cursorPosition });
-
       switch (key) {
         case keyMap.ArrowLeft: {
           // if input is empty,
@@ -104,6 +103,9 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         default:
           break;
       }
+
+      // call any handler that was passed in
+      onKeyDown?.(e);
     };
 
     return (

From 375a2d3b527c88cabbaac89adeead5dcb677f1c3 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 26 Sep 2023 15:33:15 -0400
Subject: [PATCH 122/351] rename -> DatePickerComponent

---
 packages/date-picker/src/DatePicker/DatePicker.tsx     |  6 +++---
 .../DatePickerComponent.tsx}                           | 10 +++++-----
 .../DatePickerComponent.types.ts}                      |  2 +-
 .../src/DatePicker/DatePickerComponent/index.ts        |  2 ++
 .../src/DatePicker/DatePickerContents/index.ts         |  1 -
 5 files changed, 11 insertions(+), 10 deletions(-)
 rename packages/date-picker/src/DatePicker/{DatePickerContents/DatePickerContents.tsx => DatePickerComponent/DatePickerComponent.tsx} (93%)
 rename packages/date-picker/src/DatePicker/{DatePickerContents/DatePickerContents.types.ts => DatePickerComponent/DatePickerComponent.types.ts} (90%)
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerComponent/index.ts
 delete mode 100644 packages/date-picker/src/DatePicker/DatePickerContents/index.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 9d5efbc7c0..d382fbb7bd 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 
 import { useIdAllocator } from '@leafygreen-ui/hooks';
 
@@ -8,7 +8,7 @@ import { useControlledValue } from '../hooks/useControlledValue';
 import { pickAndOmit } from '../utils/pickAndOmit';
 
 import { DatePickerProps } from './DatePicker.types';
-import { DatePickerContents } from './DatePickerContents';
+import { DatePickerComponent } from './DatePickerComponent';
 
 /**
  * LeafyGreen Date Picker component
@@ -53,7 +53,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           menuId,
         }}
       >
-        <DatePickerContents
+        <DatePickerComponent
           ref={fwdRef}
           value={value}
           setValue={setValue}
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
similarity index 93%
rename from packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
rename to packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 23589e9f8a..0ffc0ad9ff 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -16,14 +16,14 @@ import { DatePickerInput, DatePickerInputProps } from '../DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
 import { focusRelevantSegment } from '../utils/focusRelevantSegment';
 
-import { DatePickerContentsProps } from './DatePickerContents.types';
+import { DatePickerComponentProps } from './DatePickerComponent.types';
 
-export const DatePickerContents = forwardRef<
+export const DatePickerComponent = forwardRef<
   HTMLDivElement,
-  DatePickerContentsProps
+  DatePickerComponentProps
 >(
   (
-    { value, setValue, handleValidation, ...rest }: DatePickerContentsProps,
+    { value, setValue, handleValidation, ...rest }: DatePickerComponentProps,
     fwdRef,
   ) => {
     const { isOpen, setOpen, formatParts, menuId } = useDatePickerContext();
@@ -120,4 +120,4 @@ export const DatePickerContents = forwardRef<
   },
 );
 
-DatePickerContents.displayName = 'DatePickerContents';
+DatePickerComponent.displayName = 'DatePickerContents';
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.types.ts b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
similarity index 90%
rename from packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.types.ts
rename to packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
index 264c874c54..18b88d9a77 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
@@ -3,7 +3,7 @@ import { useControlledValue } from '../../hooks/useControlledValue';
 import { DateType } from '../../types';
 import { DatePickerProps } from '../DatePicker.types';
 
-export interface DatePickerContentsProps
+export interface DatePickerComponentProps
   extends Omit<
     DatePickerProps,
     (typeof contextPropNames)[number] | 'onChange'
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/index.ts b/packages/date-picker/src/DatePicker/DatePickerComponent/index.ts
new file mode 100644
index 0000000000..468e93d552
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/index.ts
@@ -0,0 +1,2 @@
+export { DatePickerComponent } from './DatePickerComponent';
+export { DatePickerComponentProps } from './DatePickerComponent.types';
diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/index.ts b/packages/date-picker/src/DatePicker/DatePickerContents/index.ts
deleted file mode 100644
index f81b0a36dc..0000000000
--- a/packages/date-picker/src/DatePicker/DatePickerContents/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DatePickerContents } from './DatePickerContents';

From 710c90af18a27453c7344dd8b6294a8f9b2e3c9e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 27 Sep 2023 11:52:23 -0400
Subject: [PATCH 123/351] abstract utils for datePicker menu

---
 .../src/DatePicker/DatePicker.spec.tsx        | 78 +++++++++----------
 .../DatePickerMenu/DatePickerMenu.tsx         | 68 ++++++++--------
 .../getNewHighlight/getNewHighlight.spec.ts   | 43 ++++++++++
 .../utils/getNewHighlight/index.ts            | 28 +++++++
 .../getFirstOfMonth/getFirstOfMonth.spec.ts   | 15 ++++
 .../src/utils/getFirstOfMonth/index.ts        |  6 ++
 .../getLastOfMonth/getLastOfMonth.spec.ts     | 29 +++++++
 .../src/utils/getLastOfMonth/index.ts         |  8 ++
 8 files changed, 203 insertions(+), 72 deletions(-)
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/getNewHighlight.spec.ts
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
 create mode 100644 packages/date-picker/src/utils/getFirstOfMonth/getFirstOfMonth.spec.ts
 create mode 100644 packages/date-picker/src/utils/getFirstOfMonth/index.ts
 create mode 100644 packages/date-picker/src/utils/getLastOfMonth/getLastOfMonth.spec.ts
 create mode 100644 packages/date-picker/src/utils/getLastOfMonth/index.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index b201e4859b..9c556fd12b 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -306,45 +306,6 @@ describe('packages/date-picker', () => {
         });
       });
 
-      describe('Changing the month', () => {
-        test.todo('is announced in an aria-live region');
-
-        describe('updates the highlighted cell', () => {
-          test('to the end of the month if we went backwards', async () => {
-            const { openMenu, findAllByRole } = renderDatePicker({
-              value: new Date(Date.UTC(2023, Month.July, 5)),
-            });
-            const { monthSelect, calendarGrid } = openMenu();
-            userEvent.click(monthSelect!);
-            const options = await findAllByRole('option');
-            const Jan = options[0];
-            userEvent.click(Jan);
-            const jan31Cell = calendarGrid?.querySelector(
-              '[data-iso="2023-01-31T00:00:00.000Z"]',
-            );
-            expect(jan31Cell).toHaveAttribute('data-highlight', 'true');
-            tabNTimes(3);
-            expect(jan31Cell).toHaveFocus();
-          });
-          test('to the beginning of the month if we went forwards', async () => {
-            const { openMenu, findAllByRole } = renderDatePicker({
-              value: new Date(Date.UTC(2023, Month.July, 5)),
-            });
-            const { monthSelect, calendarGrid } = openMenu();
-            userEvent.click(monthSelect!);
-            const options = await findAllByRole('option');
-            const Dec = options[11];
-            userEvent.click(Dec);
-            const dec1Cell = calendarGrid?.querySelector(
-              '[data-iso="2023-12-01T00:00:00.000Z"]',
-            );
-            expect(dec1Cell).toHaveAttribute('data-highlight', 'true');
-            tabNTimes(3);
-            expect(dec1Cell).toHaveFocus();
-          });
-        });
-      });
-
       describe('Clicking backdrop', () => {
         test('closes the menu', async () => {
           const { openMenu, container } = renderDatePicker();
@@ -363,6 +324,45 @@ describe('packages/date-picker', () => {
       });
     });
 
+    describe('Changing the month', () => {
+      test.todo('is announced in an aria-live region');
+
+      describe('updates the highlighted cell', () => {
+        test('to the end of the month if we went backwards', async () => {
+          const { openMenu, findAllByRole } = renderDatePicker({
+            value: new Date(Date.UTC(2023, Month.July, 5)),
+          });
+          const { monthSelect, calendarGrid } = openMenu();
+          userEvent.click(monthSelect!);
+          const options = await findAllByRole('option');
+          const Jan = options[0];
+          userEvent.click(Jan);
+          const jan31Cell = calendarGrid?.querySelector(
+            '[data-iso="2023-01-31T00:00:00.000Z"]',
+          );
+          expect(jan31Cell).toHaveAttribute('data-highlight', 'true');
+          tabNTimes(3);
+          expect(jan31Cell).toHaveFocus();
+        });
+        test('to the beginning of the month if we went forwards', async () => {
+          const { openMenu, findAllByRole } = renderDatePicker({
+            value: new Date(Date.UTC(2023, Month.July, 5)),
+          });
+          const { monthSelect, calendarGrid } = openMenu();
+          userEvent.click(monthSelect!);
+          const options = await findAllByRole('option');
+          const Dec = options[11];
+          userEvent.click(Dec);
+          const dec1Cell = calendarGrid?.querySelector(
+            '[data-iso="2023-12-01T00:00:00.000Z"]',
+          );
+          expect(dec1Cell).toHaveAttribute('data-highlight', 'true');
+          tabNTimes(3);
+          expect(dec1Cell).toHaveFocus();
+        });
+      });
+    });
+
     describe('Keyboard navigation', () => {
       describe('Tab', () => {
         test('menu does not open on keyboard focus', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 51960bc1c0..803f280be1 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -1,13 +1,14 @@
 import React, {
   forwardRef,
   KeyboardEventHandler,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
-import { addDays, isAfter, subDays } from 'date-fns';
+import { addDays, subDays } from 'date-fns';
 
-import { useDynamicRefs } from '@leafygreen-ui/hooks';
+import { useDynamicRefs, usePrevious } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
 import { useForwardedRef } from '@leafygreen-ui/select/src/utils';
 import { spacing } from '@leafygreen-ui/tokens';
@@ -17,14 +18,12 @@ import { CalendarGrid } from '../../Calendar/CalendarGrid';
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
 import { Months } from '../../constants';
 import { useDatePickerContext } from '../../DatePickerContext';
-import { getDaysInUTCMonth } from '../../utils/getDaysInUTCMonth';
 import { getUTCDateString } from '../../utils/getUTCDateString';
 import { isSameUTCDay } from '../../utils/isSameUTCDay';
 import { isSameUTCMonth } from '../../utils/isSameUTCMonth';
 import { setToUTCMidnight } from '../../utils/setToUTCMidnight';
-import { setUTCDate } from '../../utils/setUTCDate';
-import { setUTCMonth } from '../../utils/setUTCMonth';
 
+import { getNewHighlight } from './utils/getNewHighlight';
 import {
   menuCalendarGridStyles,
   menuContentStyles,
@@ -40,6 +39,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       value,
       month,
       setMonth,
+      onKeyDown,
       onCellClick,
       ...rest
     }: DatePickerMenuProps,
@@ -48,6 +48,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
     const monthLabel =
       Months[month.getUTCMonth()].long + ' ' + month.getUTCFullYear();
+    const prevMonth = usePrevious(month);
     const ref = useForwardedRef(fwdRef, null);
     const headerRef = useRef<HTMLDivElement>(null);
     const calendarRef = useRef<HTMLTableElement>(null);
@@ -58,7 +59,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     const { isInRange } = useDatePickerContext();
     const [highlight, setHighlight] = useState<Date | null>(value || today);
 
-    // A wrapper for setMonth that handles side effects
+    // setMonth with side effects
     const updateMonth: typeof setMonth = newMonth => {
       if (
         isSameUTCMonth(newMonth, month) ||
@@ -67,27 +68,34 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
         return;
       }
 
-      if (isAfter(newMonth, month)) {
-        // set highlight to first of month
-        const newHighlight = highlight
-          ? setUTCMonth(setUTCDate(highlight, 1), newMonth.getUTCMonth())
-          : setUTCDate(newMonth, 1);
-        setHighlight(newHighlight);
-      } else {
-        // set highlight to last of month
-        const daysInMonth = getDaysInUTCMonth(newMonth);
-        const newHighlight = highlight
-          ? setUTCMonth(
-              setUTCDate(highlight, daysInMonth),
-              newMonth.getUTCMonth(),
-            )
-          : setUTCDate(newMonth, daysInMonth);
-        setHighlight(newHighlight);
+      const newHighlight = getNewHighlight(highlight, month, newMonth);
+
+      if (newHighlight) {
+        updateHighlight(newHighlight);
       }
 
       setMonth(newMonth);
     };
 
+    // setHighlight with side effects
+    const updateHighlight = (newHighlight: Date) => {
+      // change month if nextHighlight is different than `month`
+      if (month.getUTCMonth() !== newHighlight.getUTCMonth()) {
+        updateMonth(newHighlight);
+      }
+
+      // keep track of the highlighted cell
+      setHighlight(newHighlight);
+    };
+
+    // When month changes, after the DOM changes, focus the relevant cell
+    useLayoutEffect(() => {
+      if (highlight && !isSameUTCMonth(month, prevMonth)) {
+        const nextCellRef = cellRefs(highlight.toISOString());
+        nextCellRef.current?.focus();
+      }
+    }, [cellRefs, highlight, month, prevMonth]);
+
     const getCellState = (cellDay: Date | null) => {
       if (isInRange(cellDay)) {
         if (isSameUTCDay(cellDay, value)) {
@@ -129,9 +137,8 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       }
     };
 
-    const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = ({
-      key,
-    }) => {
+    const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {
+      const { key } = e;
       const highlightStart = highlight || value || today;
       let nextHighlight = highlightStart;
 
@@ -162,15 +169,10 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
 
       // if nextHighlight is in range
       if (isInRange(nextHighlight)) {
-        // change month if nextHighlight is different than `month`
-        if (month.getUTCMonth() !== nextHighlight.getUTCMonth()) {
-          updateMonth(nextHighlight);
-        }
+        updateHighlight(nextHighlight);
 
-        setHighlight(nextHighlight);
-
-        const nextCellRef = cellRefs(nextHighlight.toISOString());
-        nextCellRef.current?.focus();
+        // Prevent the parent keydown handler from being called
+        e.stopPropagation();
       }
     };
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/getNewHighlight.spec.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/getNewHighlight.spec.ts
new file mode 100644
index 0000000000..189879fab8
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/getNewHighlight.spec.ts
@@ -0,0 +1,43 @@
+import { getNewHighlight } from '.';
+
+describe('packages/date-picker/date-picker-menu/utils/getNewHighlight', () => {
+  test('new highlight is the first day when new month is after current month', () => {
+    const newHighlight = getNewHighlight(
+      new Date(Date.UTC(2023, 6, 5)),
+      new Date(Date.UTC(2023, 6, 1)),
+      new Date(Date.UTC(2023, 11, 5)),
+    );
+
+    expect(newHighlight).toEqual(new Date(Date.UTC(2023, 11, 1)));
+  });
+
+  test('new highlight is the last day when new month is before current month', () => {
+    const newHighlight = getNewHighlight(
+      new Date(Date.UTC(2023, 6, 5)),
+      new Date(Date.UTC(2023, 6, 1)),
+      new Date(Date.UTC(2023, 1, 5)),
+    );
+
+    expect(newHighlight).toEqual(new Date(Date.UTC(2023, 1, 28)));
+  });
+
+  test('returns undefined when the new month is the same as current month', () => {
+    const newHighlight = getNewHighlight(
+      new Date(Date.UTC(2023, 1, 5)),
+      new Date(Date.UTC(2023, 6, 5)),
+      new Date(Date.UTC(2023, 6, 15)),
+    );
+
+    expect(newHighlight).toBeUndefined();
+  });
+
+  test('returns undefined when the new month is the same as current highlight', () => {
+    const newHighlight = getNewHighlight(
+      new Date(Date.UTC(2023, 1, 5)),
+      new Date(Date.UTC(2023, 6, 5)),
+      new Date(Date.UTC(2023, 1, 15)),
+    );
+
+    expect(newHighlight).toBeUndefined();
+  });
+});
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
new file mode 100644
index 0000000000..88d14b6daa
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
@@ -0,0 +1,28 @@
+import { isAfter } from 'date-fns';
+
+import { getFirstOfMonth } from '../../../../utils/getFirstOfMonth';
+import { getLastOfMonth } from '../../../../utils/getLastOfMonth';
+import { isSameUTCMonth } from '../../../../utils/isSameUTCMonth';
+
+export const getNewHighlight = (
+  currentHighlight: Date | null,
+  currentMonth: Date,
+  newMonth: Date,
+) => {
+  if (
+    isSameUTCMonth(newMonth, currentMonth) ||
+    isSameUTCMonth(newMonth, currentHighlight)
+  ) {
+    return;
+  }
+
+  let newHighlight: Date;
+
+  if (isAfter(newMonth, currentMonth)) {
+    newHighlight = getFirstOfMonth(newMonth);
+  } else {
+    newHighlight = getLastOfMonth(newMonth);
+  }
+
+  return newHighlight;
+};
diff --git a/packages/date-picker/src/utils/getFirstOfMonth/getFirstOfMonth.spec.ts b/packages/date-picker/src/utils/getFirstOfMonth/getFirstOfMonth.spec.ts
new file mode 100644
index 0000000000..349cef16ae
--- /dev/null
+++ b/packages/date-picker/src/utils/getFirstOfMonth/getFirstOfMonth.spec.ts
@@ -0,0 +1,15 @@
+import { getFirstOfMonth } from '.';
+
+describe('packages/date-picker/utils/getFirstOfMonth', () => {
+  test('returns the first day of the provided month', () => {
+    expect(getFirstOfMonth(new Date(Date.UTC(2023, 0, 31)))).toEqual(
+      new Date(Date.UTC(2023, 0, 1)),
+    );
+  });
+
+  test('returns the same day if provided the 1st', () => {
+    expect(getFirstOfMonth(new Date(Date.UTC(2023, 11, 1)))).toEqual(
+      new Date(Date.UTC(2023, 11, 1)),
+    );
+  });
+});
diff --git a/packages/date-picker/src/utils/getFirstOfMonth/index.ts b/packages/date-picker/src/utils/getFirstOfMonth/index.ts
new file mode 100644
index 0000000000..d9a3180a73
--- /dev/null
+++ b/packages/date-picker/src/utils/getFirstOfMonth/index.ts
@@ -0,0 +1,6 @@
+import { setUTCDate } from '../setUTCDate';
+
+/** Returns the fist day of the provided month */
+export const getFirstOfMonth = (date: Date) => {
+  return setUTCDate(date, 1);
+};
diff --git a/packages/date-picker/src/utils/getLastOfMonth/getLastOfMonth.spec.ts b/packages/date-picker/src/utils/getLastOfMonth/getLastOfMonth.spec.ts
new file mode 100644
index 0000000000..b390393f7c
--- /dev/null
+++ b/packages/date-picker/src/utils/getLastOfMonth/getLastOfMonth.spec.ts
@@ -0,0 +1,29 @@
+import { Month } from '../../constants';
+
+import { getLastOfMonth } from '.';
+
+describe('packages/date-picker/utils/getLastOfMonth', () => {
+  test('sets to last of month', () => {
+    expect(getLastOfMonth(new Date(Date.UTC(2023, Month.January, 5)))).toEqual(
+      new Date(Date.UTC(2023, Month.January, 31)),
+    );
+  });
+
+  test('works for September', () => {
+    expect(
+      getLastOfMonth(new Date(Date.UTC(2023, Month.September, 10))),
+    ).toEqual(new Date(Date.UTC(2023, Month.September, 30)));
+  });
+
+  test('works for February', () => {
+    expect(
+      getLastOfMonth(new Date(Date.UTC(2023, Month.February, 14))),
+    ).toEqual(new Date(Date.UTC(2023, Month.February, 28)));
+  });
+
+  test('works for leap-years', () => {
+    expect(
+      getLastOfMonth(new Date(Date.UTC(2020, Month.February, 14))),
+    ).toEqual(new Date(Date.UTC(2020, Month.February, 29)));
+  });
+});
diff --git a/packages/date-picker/src/utils/getLastOfMonth/index.ts b/packages/date-picker/src/utils/getLastOfMonth/index.ts
new file mode 100644
index 0000000000..3c627aebbb
--- /dev/null
+++ b/packages/date-picker/src/utils/getLastOfMonth/index.ts
@@ -0,0 +1,8 @@
+import { getDaysInUTCMonth } from '../getDaysInUTCMonth';
+import { setUTCDate } from '../setUTCDate';
+
+/** Returns the last day in a given month */
+export const getLastOfMonth = (date: Date) => {
+  const daysInMonth = getDaysInUTCMonth(date);
+  return setUTCDate(date, daysInMonth);
+};

From 0ea9fe03a789855f22d71547be54f12f26551f62 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 27 Sep 2023 12:00:20 -0400
Subject: [PATCH 124/351] creates newUTC

---
 .../CalendarGrid/CalendarGrid.stories.tsx         |  5 +++--
 .../DateInputBox/DateInputBox.stories.tsx         |  3 ++-
 packages/date-picker/src/utils/newUTC/index.ts    |  4 ++++
 .../date-picker/src/utils/newUTC/newUTC.spec.ts   | 15 +++++++++++++++
 4 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 packages/date-picker/src/utils/newUTC/index.ts
 create mode 100644 packages/date-picker/src/utils/newUTC/newUTC.spec.ts

diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index 22857a3994..ae05c307fe 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -16,6 +16,7 @@ import { isTodayTZ } from '../../utils/isTodayTZ';
 import { CalendarCell } from '../CalendarCell/CalendarCell';
 
 import { CalendarGrid } from './CalendarGrid';
+import { newUTC } from '../../utils/newUTC';
 
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
   <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
@@ -64,7 +65,7 @@ export default meta;
 
 export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
   const { timeZone } = useDatePickerContext();
-  const [month] = useState(new Date(Date.UTC(2023, Month.August, 1)));
+  const [month] = useState(newUTC(2023, Month.August, 1));
 
   const [hovered, setHovered] = useState<string | undefined>();
 
@@ -98,7 +99,7 @@ export const Generated: StoryFn<typeof CalendarGrid> = () => <></>;
 Generated.parameters = {
   generate: {
     args: {
-      month: new Date(Date.UTC(2023, Month.August, 1)),
+      month: newUTC(2023, Month.August, 1),
       children: (day: Date, i: number) => (
         <CalendarCell
           key={i}
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
index 330f8da4eb..48f37236d5 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -11,10 +11,11 @@ import {
   DatePickerContextProps,
   DatePickerProvider,
 } from '../../DatePickerContext';
+import { newUTC } from '../../utils/newUTC';
 
 import { DateInputBox } from './DateInputBox';
 
-const testDate = new Date(Date.UTC(1993, Month.December, 26));
+const testDate = newUTC(1993, Month.December, 26);
 
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
   <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
diff --git a/packages/date-picker/src/utils/newUTC/index.ts b/packages/date-picker/src/utils/newUTC/index.ts
new file mode 100644
index 0000000000..251aff26c2
--- /dev/null
+++ b/packages/date-picker/src/utils/newUTC/index.ts
@@ -0,0 +1,4 @@
+/** Creates a new UTC date */
+export const newUTC = (...args: Parameters<typeof Date.UTC>): Date => {
+  return new Date(Date.UTC(...args));
+};
diff --git a/packages/date-picker/src/utils/newUTC/newUTC.spec.ts b/packages/date-picker/src/utils/newUTC/newUTC.spec.ts
new file mode 100644
index 0000000000..43695ae02c
--- /dev/null
+++ b/packages/date-picker/src/utils/newUTC/newUTC.spec.ts
@@ -0,0 +1,15 @@
+import { newUTC } from '.';
+
+describe('packages/date-picker/utils/newUTC', () => {
+  test('creates a new UTC date', () => {
+    const date = newUTC(2023, 11, 5);
+    expect(date.getUTCDate).toEqual(5);
+    expect(date.getUTCMonth).toEqual(11);
+    expect(date.getUTCFullYear).toEqual(2023);
+  });
+
+  test('creates a new UTC date with time', () => {
+    const date = newUTC(2023, 11, 5, 12);
+    expect(date.getUTCHours).toEqual(12);
+  });
+});

From db078df2e0725820b9a272477696cd059b96c78c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 27 Sep 2023 12:01:02 -0400
Subject: [PATCH 125/351] fix tests for newUTC

---
 packages/date-picker/src/utils/newUTC/newUTC.spec.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/date-picker/src/utils/newUTC/newUTC.spec.ts b/packages/date-picker/src/utils/newUTC/newUTC.spec.ts
index 43695ae02c..9b31c31457 100644
--- a/packages/date-picker/src/utils/newUTC/newUTC.spec.ts
+++ b/packages/date-picker/src/utils/newUTC/newUTC.spec.ts
@@ -3,13 +3,13 @@ import { newUTC } from '.';
 describe('packages/date-picker/utils/newUTC', () => {
   test('creates a new UTC date', () => {
     const date = newUTC(2023, 11, 5);
-    expect(date.getUTCDate).toEqual(5);
-    expect(date.getUTCMonth).toEqual(11);
-    expect(date.getUTCFullYear).toEqual(2023);
+    expect(date.getUTCDate()).toEqual(5);
+    expect(date.getUTCMonth()).toEqual(11);
+    expect(date.getUTCFullYear()).toEqual(2023);
   });
 
   test('creates a new UTC date with time', () => {
     const date = newUTC(2023, 11, 5, 12);
-    expect(date.getUTCHours).toEqual(12);
+    expect(date.getUTCHours()).toEqual(12);
   });
 });

From 067d0cdf4ccc66c648889c8897ba57c58ce874b3 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 27 Sep 2023 13:43:22 -0400
Subject: [PATCH 126/351] updates Menu tests

---
 .../src/DatePicker/DatePicker.spec.tsx        |  39 ++++-
 .../DatePickerComponent.tsx                   |  14 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 160 +++++++++++-------
 .../DatePickerMenu/DatePickerMenu.stories.tsx |   3 -
 .../DatePickerMenu/DatePickerMenu.tsx         |  90 ++++++----
 .../DatePickerMenu/DatePickerMenu.types.ts    |  10 --
 .../DatePickerMenuHeader/index.tsx            |  21 ++-
 .../getFirstOfMonth/getFirstOfMonth.spec.ts   |   8 +
 .../src/utils/getFirstOfMonth/index.ts        |   5 +-
 .../src/utils/getFullMonthLabel/index.ts      |   6 +
 .../getLastOfMonth/getLastOfMonth.spec.ts     |   8 +
 .../src/utils/getLastOfMonth/index.ts         |   3 +-
 .../isSameUTCMonth/isSameUTCMonth.spec.ts     |   6 +
 .../date-picker/src/utils/setUTCYear/index.ts |   6 +
 14 files changed, 244 insertions(+), 135 deletions(-)
 create mode 100644 packages/date-picker/src/utils/getFullMonthLabel/index.ts
 create mode 100644 packages/date-picker/src/utils/setUTCYear/index.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 9c556fd12b..5344910896 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -9,6 +9,7 @@ import userEvent from '@testing-library/user-event';
 import { range } from 'lodash';
 
 import { Month } from '../constants';
+import { newUTC } from '../utils/newUTC';
 
 import { renderDatePicker } from './DatePicker.testutils';
 import { DatePicker } from '.';
@@ -125,7 +126,7 @@ describe('packages/date-picker', () => {
           expect(rightChevron).toHaveAttribute('aria-disabled', 'true');
         });
 
-        test('Left is not disabled if part of prev. month is in range', () => {
+        test('Left is not disabled if only part of prev. month is in range', () => {
           const { openMenu } = renderDatePicker({
             min: new Date(Date.UTC(2023, Month.November, 29)),
           });
@@ -133,7 +134,7 @@ describe('packages/date-picker', () => {
           expect(leftChevron).toHaveAttribute('aria-disabled', 'false');
         });
 
-        test('Right is not disabled if part of next month is in of range', () => {
+        test('Right is not disabled if only part of next month is in of range', () => {
           const { openMenu } = renderDatePicker({
             max: new Date(Date.UTC(2024, Month.January, 2)),
           });
@@ -229,7 +230,9 @@ describe('packages/date-picker', () => {
           });
 
           test('updates the displayed month to the previous', () => {
-            const { openMenu } = renderDatePicker();
+            const { openMenu } = renderDatePicker({
+              value: newUTC(2023, Month.December, 25),
+            });
             const { leftChevron, monthSelect, yearSelect, calendarGrid } =
               openMenu();
             userEvent.click(leftChevron!);
@@ -237,6 +240,18 @@ describe('packages/date-picker', () => {
             expect(monthSelect).toHaveValue(Month.November.toString());
             expect(yearSelect).toHaveValue('2023');
           });
+
+          test('updates the displayed month to the previous, and updates year', () => {
+            const { openMenu } = renderDatePicker({
+              value: newUTC(2023, Month.January, 5),
+            });
+            const { leftChevron, monthSelect, yearSelect, calendarGrid } =
+              openMenu();
+            userEvent.click(leftChevron!);
+            expect(calendarGrid).toHaveAttribute('aria-label', 'December 2022');
+            expect(monthSelect).toHaveValue(Month.December.toString());
+            expect(yearSelect).toHaveValue('2022');
+          });
         });
 
         describe('Right', () => {
@@ -248,7 +263,21 @@ describe('packages/date-picker', () => {
           });
 
           test('updates the displayed month to the next', () => {
-            const { openMenu } = renderDatePicker();
+            const { openMenu } = renderDatePicker({
+              value: newUTC(2023, Month.January, 5),
+            });
+            const { rightChevron, monthSelect, yearSelect, calendarGrid } =
+              openMenu();
+            userEvent.click(rightChevron!);
+            expect(calendarGrid).toHaveAttribute('aria-label', 'February 2023');
+            expect(monthSelect).toHaveValue(Month.February.toString());
+            expect(yearSelect).toHaveValue('2023');
+          });
+
+          test('updates the displayed month to the next and updates year', () => {
+            const { openMenu } = renderDatePicker({
+              value: newUTC(2023, Month.December, 26),
+            });
             const { rightChevron, monthSelect, yearSelect, calendarGrid } =
               openMenu();
             userEvent.click(rightChevron!);
@@ -324,7 +353,7 @@ describe('packages/date-picker', () => {
       });
     });
 
-    describe('Changing the month', () => {
+    describe.skip('Changing the month', () => {
       test.todo('is announced in an aria-live region');
 
       describe('updates the highlighted cell', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 0ffc0ad9ff..02b2314350 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -3,9 +3,7 @@ import React, {
   KeyboardEventHandler,
   MouseEventHandler,
   useRef,
-  useState,
 } from 'react';
-import { isSameMonth, setMonth } from 'date-fns';
 
 import { useBackdropClick, useForwardedRef } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
@@ -34,14 +32,8 @@ export const DatePickerComponent = forwardRef<
     const formFieldRef = useForwardedRef(fwdRef, null);
     const menuRef = useRef<HTMLDivElement>(null);
 
-    const [displayMonth, setDisplayMonth] = useState<Date>(value ?? new Date());
-
+    /** setValue with possible side effects */
     const updateValue = (newVal: Date | null) => {
-      // if the new value is not the current month, update the month
-      if (newVal && !isSameMonth(newVal, displayMonth)) {
-        setDisplayMonth(setMonth(displayMonth, newVal.getMonth()));
-      }
-
       setValue(newVal);
     };
 
@@ -110,8 +102,8 @@ export const DatePickerComponent = forwardRef<
           refEl={formFieldRef}
           value={value}
           isOpen={isOpen}
-          month={displayMonth}
-          setMonth={setDisplayMonth}
+          // month={displayMonth}
+          // setMonth={setDisplayMonth}
           onCellClick={handleCellClick}
           onKeyDown={handleMenuKeydown}
         />
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index a18b195321..d5c9bf43f1 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { addDays } from 'date-fns';
+import { addDays, subDays } from 'date-fns';
 
 import { Month } from '../../constants';
 import {
@@ -9,6 +9,7 @@ import {
   DatePickerProviderProps,
 } from '../../DatePickerContext';
 import { defaultDatePickerContext } from '../../DatePickerContext/DatePickerContext.utils';
+import { newUTC } from '../../utils/newUTC';
 import { setUTCDate } from '../../utils/setUTCDate';
 
 import { DatePickerMenu, DatePickerMenuProps } from '.';
@@ -22,17 +23,23 @@ const renderDatePickerMenu = (
 ) => {
   const result = render(
     <DatePickerProvider value={{ ...defaultDatePickerContext, ...context }}>
-      <DatePickerMenu
-        isOpen
-        value={null}
-        month={new Date(Date.UTC(2023, Month.September, 1))}
-        setMonth={() => {}}
-        onCellClick={() => {}}
-        {...props}
-      />
-      ,
+      <DatePickerMenu isOpen value={null} onCellClick={() => {}} {...props} />,
     </DatePickerProvider>,
   );
+
+  const rerenderDatePickerMenu = (newProps?: Partial<DatePickerMenuProps>) =>
+    result.rerender(
+      <DatePickerProvider value={{ ...defaultDatePickerContext, ...context }}>
+        <DatePickerMenu
+          isOpen
+          value={null}
+          onCellClick={() => {}}
+          {...({ ...props, ...newProps } as Partial<DatePickerMenuProps>)}
+        />
+        ,
+      </DatePickerProvider>,
+    );
+
   const calendarGrid = result.getByRole('grid');
 
   const calendarCells = result.queryAllByRole(
@@ -43,11 +50,16 @@ const renderDatePickerMenu = (
     `[data-iso="${testToday.toISOString()}"]`,
   );
 
+  const getCellWithValue = (date: Date) =>
+    calendarGrid.querySelector(`[data-iso="${date.toISOString()}"]`);
+
   return {
     ...result,
+    rerenderDatePickerMenu,
     calendarGrid,
     calendarCells,
     todayCell,
+    getCellWithValue,
   };
 };
 
@@ -81,7 +93,7 @@ describe('packages/date-picker/date-picker-menu', () => {
       expect(monthSelect).toBeInTheDocument();
       expect(yearSelect).toBeInTheDocument();
     });
-    test('select menus have appropriate values', () => {
+    test('select menus have correct values', () => {
       const result = renderDatePickerMenu();
       const monthSelect = result.getByLabelText('Select month');
       const yearSelect = result.getByLabelText('Select year');
@@ -90,11 +102,30 @@ describe('packages/date-picker/date-picker-menu', () => {
     });
 
     describe('rendered cells', () => {
-      test('have appropriate `aria-label`', () => {
+      test('have correct `aria-label`', () => {
         const { todayCell } = renderDatePickerMenu();
         expect(todayCell).toHaveAttribute('aria-label', 'Sun Sep 10 2023');
       });
     });
+
+    describe('when value is updated', () => {
+      test('grid is labelled as the current month', () => {
+        const { getByRole, rerenderDatePickerMenu } = renderDatePickerMenu();
+        rerenderDatePickerMenu({ value: newUTC(2024, Month.March, 10) });
+        const grid = getByRole('grid');
+        expect(grid).toHaveAttribute('aria-label', 'March 2024');
+      });
+      test('select menus have correct values', () => {
+        const { getByLabelText, rerenderDatePickerMenu } =
+          renderDatePickerMenu();
+        rerenderDatePickerMenu({ value: newUTC(2024, Month.March, 10) });
+
+        const monthSelect = getByLabelText('Select month');
+        const yearSelect = getByLabelText('Select year');
+        expect(monthSelect).toHaveValue(Month.March.toString());
+        expect(yearSelect).toHaveValue('2024');
+      });
+    });
   });
 
   describe('Keyboard navigation', () => {
@@ -105,65 +136,55 @@ describe('packages/date-picker/date-picker-menu', () => {
     });
 
     test('highlight starts on on current value when provided', () => {
-      const { calendarGrid } = renderDatePickerMenu({
+      const { getCellWithValue } = renderDatePickerMenu({
         value: testValue,
       });
       userEvent.tab();
-      const valueCell = calendarGrid.querySelector(
-        `[data-iso="${testValue.toISOString()}"]`,
-      );
+      const valueCell = getCellWithValue(testValue);
       expect(valueCell).toHaveFocus();
     });
 
     describe('Arrow Keys', () => {
       test('left arrow moves focus to the previous day', async () => {
-        const { calendarGrid } = renderDatePickerMenu({
+        const { getCellWithValue } = renderDatePickerMenu({
           value: testValue,
         });
         userEvent.tab();
         userEvent.keyboard('{arrowleft}');
 
-        const prevDay = calendarGrid.querySelector(
-          `[data-iso="${setUTCDate(testValue, 13).toISOString()}"]`,
-        );
+        const prevDay = getCellWithValue(setUTCDate(testValue, 13));
         expect(prevDay).toHaveFocus();
       });
 
       test('right arrow moves focus to the next day', () => {
-        const { calendarGrid } = renderDatePickerMenu({
+        const { getCellWithValue } = renderDatePickerMenu({
           value: testValue,
         });
         userEvent.tab();
         userEvent.keyboard('{arrowright}');
-        const nextDay = calendarGrid.querySelector(
-          `[data-iso="${setUTCDate(testValue, 15).toISOString()}"]`,
-        );
+        const nextDay = getCellWithValue(setUTCDate(testValue, 15));
         expect(nextDay).toHaveFocus();
       });
 
       test('up arrow moves focus to the previous week', () => {
-        const { calendarGrid } = renderDatePickerMenu({
+        const { getCellWithValue } = renderDatePickerMenu({
           value: testValue,
         });
         userEvent.tab();
         userEvent.keyboard('{arrowup}');
 
-        const prevWeek = calendarGrid.querySelector(
-          `[data-iso="${setUTCDate(testValue, 7).toISOString()}"]`,
-        );
+        const prevWeek = getCellWithValue(setUTCDate(testValue, 7));
         expect(prevWeek).toHaveFocus();
       });
 
       test('down arrow moves focus to the next week', () => {
-        const { calendarGrid } = renderDatePickerMenu({
+        const { getCellWithValue } = renderDatePickerMenu({
           value: testValue,
         });
         userEvent.tab();
         userEvent.keyboard('{arrowdown}');
 
-        const nextWeek = calendarGrid.querySelector(
-          `[data-iso="${setUTCDate(testValue, 21).toISOString()}"]`,
-        );
+        const nextWeek = getCellWithValue(setUTCDate(testValue, 21));
         expect(nextWeek).toHaveFocus();
       });
 
@@ -207,57 +228,80 @@ describe('packages/date-picker/date-picker-menu', () => {
         });
       });
 
-      describe('call the month change handler', () => {
-        test('left arrow triggers handler', () => {
-          const setMonth = jest.fn();
+      describe('update the displayed month', () => {
+        test('left arrow updates displayed month to previous', () => {
           const value = new Date(Date.UTC(2023, Month.September, 1));
-          renderDatePickerMenu({ value, setMonth });
+          const { calendarGrid } = renderDatePickerMenu({ value });
           userEvent.tab();
           userEvent.keyboard('{arrowleft}');
-          expect(setMonth).toHaveBeenCalled();
+          expect(calendarGrid).toHaveAttribute('aria-label', 'August 2023');
         });
 
-        test('right arrow triggers handler', () => {
-          const setMonth = jest.fn();
+        test('right arrow updates displayed month to next', () => {
           const value = new Date(Date.UTC(2023, Month.September, 30));
-          renderDatePickerMenu({ value, setMonth });
+          const { calendarGrid } = renderDatePickerMenu({ value });
           userEvent.tab();
           userEvent.keyboard('{arrowright}');
-          expect(setMonth).toHaveBeenCalled();
+          expect(calendarGrid).toHaveAttribute('aria-label', 'October 2023');
         });
 
-        test('up arrow triggers handler', () => {
+        test('up arrow updates displayed month to previous', () => {
           const value = new Date(Date.UTC(2023, Month.September, 6));
-          const setMonth = jest.fn();
-          renderDatePickerMenu({ value, setMonth });
+          const { calendarGrid } = renderDatePickerMenu({ value });
           userEvent.tab();
           userEvent.keyboard('{arrowup}');
-          expect(setMonth).toHaveBeenCalled();
+          expect(calendarGrid).toHaveAttribute('aria-label', 'August 2023');
         });
 
-        test('down arrow triggers handler', async () => {
+        test('down arrow updates displayed month to next', () => {
           const value = new Date(Date.UTC(2023, Month.September, 25));
-          const setMonth = jest.fn();
-          renderDatePickerMenu({ value, setMonth });
+          const { calendarGrid } = renderDatePickerMenu({ value });
           userEvent.tab();
           userEvent.keyboard('{arrowdown}');
-          expect(setMonth).toHaveBeenCalled();
+          expect(calendarGrid).toHaveAttribute('aria-label', 'October 2023');
         });
 
-        test('does not trigger handler when month does not need to change', () => {
-          const setMonth = jest.fn();
-          renderDatePickerMenu({ value: testValue, setMonth });
+        test('does not update month when month does not need to change', () => {
+          const { calendarGrid } = renderDatePickerMenu({ value: testValue });
           userEvent.tab();
           userEvent.keyboard('{arrowleft}{arrowright}{arrowup}{arrowdown}');
-          expect(setMonth).not.toHaveBeenCalled();
+          expect(calendarGrid).toHaveAttribute('aria-label', 'September 2023');
         });
       });
 
-      describe('when month is updated', () => {
-        test.todo('left arrow focuses the correct day');
-        test.todo('right arrow focuses the correct day');
-        test.todo('up arrow focuses the correct day');
-        test.todo('down arrow focuses the correct day');
+      describe('when month should be updated', () => {
+        test('left arrow focuses the previous day', () => {
+          const value = new Date(Date.UTC(2023, Month.September, 1));
+          const { getCellWithValue } = renderDatePickerMenu({ value });
+          userEvent.tab();
+          userEvent.keyboard('{arrowleft}');
+          const highlightedCell = getCellWithValue(subDays(value, 1));
+          expect(highlightedCell).toHaveFocus();
+        });
+        test('right arrow focuses the next day', () => {
+          const value = new Date(Date.UTC(2023, Month.September, 30));
+          const { getCellWithValue } = renderDatePickerMenu({ value });
+          userEvent.tab();
+          userEvent.keyboard('{arrowright}');
+          const highlightedCell = getCellWithValue(addDays(value, 1));
+          expect(highlightedCell).toHaveFocus();
+        });
+        test('up arrow focuses the previous week', () => {
+          const value = new Date(Date.UTC(2023, Month.September, 6));
+          const { getCellWithValue } = renderDatePickerMenu({ value });
+          userEvent.tab();
+          userEvent.keyboard('{arrowup}');
+          const highlightedCell = getCellWithValue(subDays(value, 7));
+          expect(highlightedCell).toHaveFocus();
+        });
+        test('down arrow focuses the next week', () => {
+          const value = new Date(Date.UTC(2023, Month.September, 25));
+          const { getCellWithValue } = renderDatePickerMenu({ value });
+          userEvent.tab();
+          userEvent.keyboard('{arrowdown}');
+          const highlightedCell = getCellWithValue(addDays(value, 7));
+          expect(highlightedCell).toHaveFocus();
+        });
       });
     });
   });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 02220b696e..589c016555 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -62,7 +62,6 @@ export default meta;
 
 export const Basic: StoryFn<typeof DatePickerMenu> = props => {
   const [value, setValue] = useState<Date | null>(new Date('2023-09-11'));
-  const [month, setMonth] = useState<Date>(new Date('2023-09-11'));
 
   const refEl = useRef<HTMLDivElement>(null);
   return (
@@ -72,9 +71,7 @@ export const Basic: StoryFn<typeof DatePickerMenu> = props => {
         {...props}
         refEl={refEl}
         value={value}
-        month={month}
         onCellClick={setValue}
-        onMonthChange={newMonth => setMonth(newMonth)}
       />
     </>
   );
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 803f280be1..2779b3aef5 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -1,6 +1,7 @@
 import React, {
   forwardRef,
   KeyboardEventHandler,
+  useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -16,8 +17,9 @@ import { spacing } from '@leafygreen-ui/tokens';
 import { CalendarCell, CalendarCellState } from '../../Calendar/CalendarCell';
 import { CalendarGrid } from '../../Calendar/CalendarGrid';
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
-import { Months } from '../../constants';
 import { useDatePickerContext } from '../../DatePickerContext';
+import { getFirstOfMonth } from '../../utils/getFirstOfMonth';
+import { getFullMonthLabel } from '../../utils/getFullMonthLabel';
 import { getUTCDateString } from '../../utils/getUTCDateString';
 import { isSameUTCDay } from '../../utils/isSameUTCDay';
 import { isSameUTCMonth } from '../../utils/isSameUTCMonth';
@@ -34,69 +36,82 @@ import { DatePickerMenuHeader } from './DatePickerMenuHeader';
 
 export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
   (
-    {
-      isOpen,
-      value,
-      month,
-      setMonth,
-      onKeyDown,
-      onCellClick,
-      ...rest
-    }: DatePickerMenuProps,
+    { isOpen, value, onKeyDown, onCellClick, ...rest }: DatePickerMenuProps,
     fwdRef,
   ) => {
     const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
-    const monthLabel =
-      Months[month.getUTCMonth()].long + ' ' + month.getUTCFullYear();
-    const prevMonth = usePrevious(month);
-    const ref = useForwardedRef(fwdRef, null);
-    const headerRef = useRef<HTMLDivElement>(null);
-    const calendarRef = useRef<HTMLTableElement>(null);
+    const { isInRange } = useDatePickerContext();
+
     // TODO:
     // useDynamicRefs may overflow if a user navigates to too many months.
     // consider purging the refs map within the hook
     const cellRefs = useDynamicRefs<HTMLTableCellElement>();
-    const { isInRange } = useDatePickerContext();
+    const ref = useForwardedRef(fwdRef, null);
+    const headerRef = useRef<HTMLDivElement>(null);
+    const calendarRef = useRef<HTMLTableElement>(null);
+
+    const [month, setDisplayMonth] = useState<Date>(
+      value ?? getFirstOfMonth(today),
+    );
     const [highlight, setHighlight] = useState<Date | null>(value || today);
 
-    // setMonth with side effects
-    const updateMonth: typeof setMonth = newMonth => {
-      if (
-        isSameUTCMonth(newMonth, month) ||
-        isSameUTCMonth(newMonth, highlight)
-      ) {
+    const prevValue = usePrevious(value);
+    const prevHighlight = usePrevious(highlight);
+
+    const monthLabel = getFullMonthLabel(month);
+
+    /** setDisplayMonth with side effects */
+    const updateMonth = (newMonth: Date) => {
+      if (isSameUTCMonth(newMonth, month)) {
         return;
       }
 
       const newHighlight = getNewHighlight(highlight, month, newMonth);
+      const shouldUpdateHighlight = !isSameUTCDay(highlight, newHighlight);
 
-      if (newHighlight) {
-        updateHighlight(newHighlight);
+      if (newHighlight && shouldUpdateHighlight) {
+        setHighlight(newHighlight);
       }
 
-      setMonth(newMonth);
+      setDisplayMonth(newMonth);
     };
 
-    // setHighlight with side effects
+    /** setHighlight with side effects */
     const updateHighlight = (newHighlight: Date) => {
       // change month if nextHighlight is different than `month`
-      if (month.getUTCMonth() !== newHighlight.getUTCMonth()) {
-        updateMonth(newHighlight);
+      if (!isSameUTCMonth(month, newHighlight)) {
+        setDisplayMonth(newHighlight);
       }
 
       // keep track of the highlighted cell
       setHighlight(newHighlight);
     };
 
-    // When month changes, after the DOM changes, focus the relevant cell
+    /**
+     * When month changes, after the DOM changes, focus the relevant cell \
+     */
     useLayoutEffect(() => {
-      if (highlight && !isSameUTCMonth(month, prevMonth)) {
-        const nextCellRef = cellRefs(highlight.toISOString());
-        nextCellRef.current?.focus();
+      if (highlight && !isSameUTCDay(highlight, prevHighlight)) {
+        const highlightCellRef = cellRefs(highlight.toISOString());
+        highlightCellRef.current?.focus();
+      }
+    }, [cellRefs, highlight, prevHighlight]);
+
+    /**
+     * If the new value is not the current month, update the month
+     */
+    useEffect(() => {
+      if (
+        value &&
+        !isSameUTCDay(value, prevValue) &&
+        !isSameUTCMonth(value, month)
+      ) {
+        setDisplayMonth(getFirstOfMonth(value));
       }
-    }, [cellRefs, highlight, month, prevMonth]);
+    }, [month, prevValue, value]);
 
-    const getCellState = (cellDay: Date | null) => {
+    /** Returns the current state of the cell */
+    const getCellState = (cellDay: Date | null): CalendarCellState => {
       if (isInRange(cellDay)) {
         if (isSameUTCDay(cellDay, value)) {
           return CalendarCellState.Active;
@@ -108,17 +123,18 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       return CalendarCellState.Disabled;
     };
 
+    /** Creates a click handler for a specific cell date */
     const cellClickHandlerForDay = (day: Date) => () => {
       if (isInRange(day)) {
         onCellClick(day);
       }
     };
 
-    // Implementing custom focus-trap logic,
-    // since focus-trap-react focuses the first element immediately on mount
     const handleWrapperTabKeyPress: KeyboardEventHandler<
       HTMLDivElement
     > = e => {
+      // Implementing custom focus-trap logic,
+      // since focus-trap-react focuses the first element immediately on mount
       if (e.key === keyMap.Tab) {
         const currentFocus = document.activeElement;
         const highlightKey = highlight?.toISOString();
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
index 382dd8c53f..68b1c1b82c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
@@ -13,16 +13,6 @@ export type DatePickerMenuProps = PortalControlProps &
     /** The value of the component, provided in UTC time */
     value?: DateType;
 
-    /** The month to display in the calendar grid */
-    month: Date;
-    // highlight: ;
-
-    /**
-     * Callback fired when the date carets are clicked,
-     * or when the month/year dropdowns are modified
-     */
-    setMonth: (newMonth: Date) => void;
-
     /** Callback fired when a cell is clicked */
     onCellClick: (cellDate: Date) => void;
   };
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index 2b343aaea7..da844d3951 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { isBefore, setYear } from 'date-fns';
+import { isBefore } from 'date-fns';
 import range from 'lodash/range';
 
 import Icon from '@leafygreen-ui/icon';
@@ -10,16 +10,16 @@ import { Months } from '../../../constants';
 import { useDatePickerContext } from '../../../DatePickerContext';
 import { isSameUTCMonth } from '../../../utils/isSameUTCMonth';
 import { setUTCMonth } from '../../../utils/setUTCMonth';
+import { setUTCYear } from '../../../utils/setUTCYear';
 import {
   menuHeaderSelectContainerStyles,
   menuHeaderStyles,
 } from '../DatePickerMenu.styles';
-import { DatePickerMenuProps } from '../DatePickerMenu.types';
 
-type DatePickerMenuHeaderProps = Pick<
-  DatePickerMenuProps,
-  'month' | 'setMonth'
->;
+interface DatePickerMenuHeaderProps {
+  month: Date;
+  setMonth: (newMonth: Date) => void;
+}
 
 const selectElementProps = {
   size: 'xsmall',
@@ -30,6 +30,11 @@ const selectElementProps = {
   usePortal: false,
 } as const;
 
+/**
+ * A helper component for DatePickerMenu.
+ * Tests for this component are in DatePickerMenu
+ * @internal
+ */
 export const DatePickerMenuHeader = forwardRef<
   HTMLDivElement,
   DatePickerMenuHeaderProps
@@ -86,9 +91,9 @@ export const DatePickerMenuHeader = forwardRef<
         <Select
           {...selectElementProps}
           aria-label="Select year"
-          value={month.getFullYear().toString()}
+          value={month.getUTCFullYear().toString()}
           onChange={y => {
-            const newMonth = setYear(month, Number(y));
+            const newMonth = setUTCYear(month, Number(y));
             updateMonth(newMonth);
           }}
         >
diff --git a/packages/date-picker/src/utils/getFirstOfMonth/getFirstOfMonth.spec.ts b/packages/date-picker/src/utils/getFirstOfMonth/getFirstOfMonth.spec.ts
index 349cef16ae..ae7c819d89 100644
--- a/packages/date-picker/src/utils/getFirstOfMonth/getFirstOfMonth.spec.ts
+++ b/packages/date-picker/src/utils/getFirstOfMonth/getFirstOfMonth.spec.ts
@@ -12,4 +12,12 @@ describe('packages/date-picker/utils/getFirstOfMonth', () => {
       new Date(Date.UTC(2023, 11, 1)),
     );
   });
+
+  test('returned time is midnight', () => {
+    const first = getFirstOfMonth(new Date(Date.UTC(2023, 11, 1)));
+    expect(first.getUTCHours()).toEqual(0);
+    expect(first.getUTCMinutes()).toEqual(0);
+    expect(first.getUTCSeconds()).toEqual(0);
+    expect(first.getUTCMilliseconds()).toEqual(0);
+  });
 });
diff --git a/packages/date-picker/src/utils/getFirstOfMonth/index.ts b/packages/date-picker/src/utils/getFirstOfMonth/index.ts
index d9a3180a73..4d297b8a8e 100644
--- a/packages/date-picker/src/utils/getFirstOfMonth/index.ts
+++ b/packages/date-picker/src/utils/getFirstOfMonth/index.ts
@@ -1,6 +1,7 @@
+import { setToUTCMidnight } from '../setToUTCMidnight';
 import { setUTCDate } from '../setUTCDate';
 
-/** Returns the fist day of the provided month */
+/** Returns midnight on the fist day of the provided month */
 export const getFirstOfMonth = (date: Date) => {
-  return setUTCDate(date, 1);
+  return setToUTCMidnight(setUTCDate(date, 1));
 };
diff --git a/packages/date-picker/src/utils/getFullMonthLabel/index.ts b/packages/date-picker/src/utils/getFullMonthLabel/index.ts
new file mode 100644
index 0000000000..b9dd35adcf
--- /dev/null
+++ b/packages/date-picker/src/utils/getFullMonthLabel/index.ts
@@ -0,0 +1,6 @@
+import { Months } from '../../constants';
+
+/** Returns a long month label (i.e. September 2023) */
+export const getFullMonthLabel = (date: Date): string => {
+  return Months[date.getUTCMonth()].long + ' ' + date.getUTCFullYear();
+};
diff --git a/packages/date-picker/src/utils/getLastOfMonth/getLastOfMonth.spec.ts b/packages/date-picker/src/utils/getLastOfMonth/getLastOfMonth.spec.ts
index b390393f7c..603186c927 100644
--- a/packages/date-picker/src/utils/getLastOfMonth/getLastOfMonth.spec.ts
+++ b/packages/date-picker/src/utils/getLastOfMonth/getLastOfMonth.spec.ts
@@ -26,4 +26,12 @@ describe('packages/date-picker/utils/getLastOfMonth', () => {
       getLastOfMonth(new Date(Date.UTC(2020, Month.February, 14))),
     ).toEqual(new Date(Date.UTC(2020, Month.February, 29)));
   });
+
+  test('returned time is midnight', () => {
+    const last = getLastOfMonth(new Date(Date.UTC(2020, Month.February, 14)));
+    expect(last.getUTCHours()).toEqual(0);
+    expect(last.getUTCMinutes()).toEqual(0);
+    expect(last.getUTCSeconds()).toEqual(0);
+    expect(last.getUTCMilliseconds()).toEqual(0);
+  });
 });
diff --git a/packages/date-picker/src/utils/getLastOfMonth/index.ts b/packages/date-picker/src/utils/getLastOfMonth/index.ts
index 3c627aebbb..6b680a667b 100644
--- a/packages/date-picker/src/utils/getLastOfMonth/index.ts
+++ b/packages/date-picker/src/utils/getLastOfMonth/index.ts
@@ -1,8 +1,9 @@
 import { getDaysInUTCMonth } from '../getDaysInUTCMonth';
+import { setToUTCMidnight } from '../setToUTCMidnight';
 import { setUTCDate } from '../setUTCDate';
 
 /** Returns the last day in a given month */
 export const getLastOfMonth = (date: Date) => {
   const daysInMonth = getDaysInUTCMonth(date);
-  return setUTCDate(date, daysInMonth);
+  return setToUTCMidnight(setUTCDate(date, daysInMonth));
 };
diff --git a/packages/date-picker/src/utils/isSameUTCMonth/isSameUTCMonth.spec.ts b/packages/date-picker/src/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
index a8d2248c54..663942d314 100644
--- a/packages/date-picker/src/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
+++ b/packages/date-picker/src/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
@@ -56,4 +56,10 @@ describe('packages/date-picker/utils/isSameUTCMonth', () => {
     expect(isSameUTCMonth(null, new Date())).toBe(false);
     expect(isSameUTCMonth(null, null)).toBe(false);
   });
+
+  test('false for different years', () => {
+    const utc1 = new Date(Date.UTC(2023, Month.September, 1));
+    const utc2 = new Date(Date.UTC(2024, Month.September, 10));
+    expect(isSameUTCMonth(utc1, utc2)).toBe(false);
+  });
 });
diff --git a/packages/date-picker/src/utils/setUTCYear/index.ts b/packages/date-picker/src/utils/setUTCYear/index.ts
new file mode 100644
index 0000000000..d7ccef65fe
--- /dev/null
+++ b/packages/date-picker/src/utils/setUTCYear/index.ts
@@ -0,0 +1,6 @@
+/** Returns a new date from the provided date and year */
+export const setUTCYear = (date: Date, year: number): Date => {
+  const newDate = new Date(date);
+  newDate.setUTCFullYear(year);
+  return newDate;
+};

From 558540350b369b09a56b9ffb4468e01104161d35 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 27 Sep 2023 15:43:30 -0400
Subject: [PATCH 127/351] improves interaction tests for menu

---
 packages/date-picker/package.json             |   1 +
 .../CalendarCell/CalendarCell.stories.tsx     |  25 +-
 .../Calendar/CalendarCell/CalendarCell.tsx    |   2 +-
 .../src/DatePicker/DatePicker.spec.tsx        |  19 +-
 .../src/DatePicker/DatePicker.testutils.tsx   |   5 +
 .../DatePickerMenu/DatePickerMenu.spec.tsx    |  11 +-
 .../DatePickerMenu/DatePickerMenu.stories.tsx | 215 ++++++++++++++----
 .../DatePickerMenu/DatePickerMenu.tsx         |   7 +-
 .../DatePickerMenu/DatePickerMenu.types.ts    |   3 -
 .../DatePickerContext/DatePickerContext.tsx   |   4 +
 packages/date-picker/src/testUtils.ts         |  10 +
 11 files changed, 221 insertions(+), 81 deletions(-)

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 665cf61e76..6e6da5eb51 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -46,6 +46,7 @@
     "url": "https://jira.mongodb.org/projects/PD/summary"
   },
   "devDependencies": {
+    "mockdate": "^3.0.5",
     "timezone-mock": "^1.3.6"
   }
 }
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
index 96798a4181..5bd5912320 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
@@ -25,14 +25,23 @@ const meta: StoryMetaType<typeof CalendarCell, DatePickerContextProps> = {
         isCurrent: [false, true],
         state: Object.values(CalendarCellState),
       },
-      decorator: (Instance, ctx) => (
-        <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-          {/* @ts-expect-error - incomplete context value */}
-          <DatePickerProvider value={{ size: ctx?.args.size }}>
-            <Instance />
-          </DatePickerProvider>
-        </LeafyGreenProvider>
-      ),
+      decorator: (Instance, ctx) => {
+        const {
+          args: { darkMode, size, ...props },
+        } = ctx ?? { args: {} };
+
+        return (
+          <LeafyGreenProvider darkMode={darkMode}>
+            {/* @ts-expect-error - incomplete context value */}
+            <DatePickerProvider value={{ size }}>
+              <Instance {...props} />
+            </DatePickerProvider>
+          </LeafyGreenProvider>
+        );
+      },
+      args: {
+        'data-highlight': true,
+      },
     },
   },
   args: { children: '26' },
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
index 4bd94bfc93..66fcd8d8d8 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -64,7 +64,7 @@ export const CalendarCell = React.forwardRef<
       <td
         ref={ref}
         role="gridcell"
-        data-highlight={isHighlighted}
+        data-highlighted={isHighlighted}
         aria-current={isCurrent}
         aria-selected={isActive}
         aria-disabled={state === CalendarCellState.Disabled}
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 5344910896..e12caf76d4 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -9,6 +9,7 @@ import userEvent from '@testing-library/user-event';
 import { range } from 'lodash';
 
 import { Month } from '../constants';
+import { tabNTimes } from '../testUtils';
 import { newUTC } from '../utils/newUTC';
 
 import { renderDatePicker } from './DatePicker.testutils';
@@ -16,13 +17,6 @@ import { DatePicker } from '.';
 
 const testToday = new Date(Date.UTC(2023, Month.December, 26));
 
-/** Presses the `tab` key `count` times */
-const tabNTimes = (count: number) => {
-  for (const _ in range(count)) {
-    userEvent.tab();
-  }
-};
-
 describe('packages/date-picker', () => {
   beforeEach(() => {
     // Set the current time to midnight UTC on 2023-12-26
@@ -449,18 +443,15 @@ describe('packages/date-picker', () => {
                 calendarButton,
                 openMenu,
               } = renderDatePicker();
+
               const {
                 leftChevron,
                 monthSelect,
                 yearSelect,
                 rightChevron,
-                calendarGrid,
+                todayCell,
               } = openMenu();
 
-              const highlightedCell = calendarGrid?.querySelector(
-                '[data-highlight="true"]',
-              );
-
               tabNTimes(n);
 
               switch (n) {
@@ -477,7 +468,7 @@ describe('packages/date-picker', () => {
                   expect(calendarButton).toHaveFocus();
                   break;
                 case 4:
-                  expect(highlightedCell).toHaveFocus();
+                  expect(todayCell).toHaveFocus();
                   break;
                 case 5:
                   expect(leftChevron).toHaveFocus();
@@ -493,7 +484,7 @@ describe('packages/date-picker', () => {
                   break;
                 case 9:
                   // Focus is trapped within the menu
-                  expect(highlightedCell).toHaveFocus();
+                  expect(todayCell).toHaveFocus();
                   break;
               }
             });
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index ced960518a..051abe8e3d 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -24,6 +24,7 @@ interface RenderMenuResult {
   yearSelect: HTMLButtonElement | null;
   calendarGrid: HTMLTableElement | null;
   calendarCells: Array<HTMLTableCellElement>;
+  todayCell: HTMLTableCellElement | null;
 }
 
 /**
@@ -68,11 +69,15 @@ export const renderDatePicker = (
     const yearSelect = result.queryByLabelText(
       'Select year',
     ) as HTMLButtonElement;
+    const todayCell = calendarGrid?.querySelector(
+      '[aria-current="true"]',
+    ) as HTMLTableCellElement;
 
     return {
       menuContainerEl,
       calendarGrid,
       calendarCells,
+      todayCell,
       leftChevron,
       rightChevron,
       monthSelect,
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index d5c9bf43f1..ac9b0f107b 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -22,16 +22,19 @@ const renderDatePickerMenu = (
   context?: Partial<DatePickerProviderProps>,
 ) => {
   const result = render(
-    <DatePickerProvider value={{ ...defaultDatePickerContext, ...context }}>
-      <DatePickerMenu isOpen value={null} onCellClick={() => {}} {...props} />,
+    <DatePickerProvider
+      value={{ ...defaultDatePickerContext, ...context, isOpen: true }}
+    >
+      <DatePickerMenu value={null} onCellClick={() => {}} {...props} />,
     </DatePickerProvider>,
   );
 
   const rerenderDatePickerMenu = (newProps?: Partial<DatePickerMenuProps>) =>
     result.rerender(
-      <DatePickerProvider value={{ ...defaultDatePickerContext, ...context }}>
+      <DatePickerProvider
+        value={{ ...defaultDatePickerContext, ...context, isOpen: true }}
+      >
         <DatePickerMenu
-          isOpen
           value={null}
           onCellClick={() => {}}
           {...({ ...props, ...newProps } as Partial<DatePickerMenuProps>)}
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 589c016555..e6f99cf104 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -1,55 +1,80 @@
-/* eslint-disable react/prop-types */
+/* eslint-disable react-hooks/rules-of-hooks, react/prop-types */
 import React, { useRef, useState } from 'react';
-import { StoryFn } from '@storybook/react';
+import { StoryFn, StoryObj } from '@storybook/react';
+import { findByRole, userEvent, within } from '@storybook/testing-library';
+import { omit } from 'lodash';
+import MockDate from 'mockdate';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
+import { transitionDuration } from '@leafygreen-ui/tokens';
 
+import { Month } from '../../constants';
 import {
   DatePickerContextProps,
   DatePickerProvider,
 } from '../../DatePickerContext';
+import {
+  contextPropNames,
+  defaultDatePickerContext,
+} from '../../DatePickerContext/DatePickerContext.utils';
+import { newUTC } from '../../utils/newUTC';
+import { pickAndOmit } from '../../utils/pickAndOmit';
 
 import { DatePickerMenu } from './DatePickerMenu';
+import { DatePickerMenuProps } from './DatePickerMenu.types';
+
+const mockToday = newUTC(2023, Month.September, 14);
+type DecoratorArgs = DatePickerMenuProps & DatePickerContextProps;
+
+const MenuDecorator = (Story: StoryFn, ctx: any) => {
+  const [{ darkMode, ...contextProps }, { isOpen, ...props }] = pickAndOmit(
+    ctx?.args as DecoratorArgs,
+    [...contextPropNames],
+  );
+
+  MockDate.set(mockToday);
 
-const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
-  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-    <DatePickerProvider
-      value={{
-        ...ctx?.args,
-      }}
-    >
-      <Story />
-    </DatePickerProvider>
-  </LeafyGreenProvider>
-);
-
-const meta: StoryMetaType<typeof DatePickerMenu, DatePickerContextProps> = {
+  return (
+    <LeafyGreenProvider darkMode={darkMode}>
+      <DatePickerProvider
+        value={{ ...defaultDatePickerContext, ...contextProps, isOpen }}
+      >
+        <Story {...props} />
+      </DatePickerProvider>
+    </LeafyGreenProvider>
+  );
+};
+
+const meta: StoryMetaType<typeof DatePickerMenu, DecoratorArgs> = {
   title: 'Components/DatePicker/DatePickerMenu',
   component: DatePickerMenu,
-  decorators: [ProviderWrapper],
+  decorators: [MenuDecorator],
   parameters: {
     default: null,
-    generate: {
-      combineArgs: {
-        darkMode: [false, true],
-        value: [null, new Date('1993-12-26')],
-        dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
-        timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
-      },
-      excludeCombinations: [
-        {
-          timeZone: ['Europe/London', 'America/New_York', 'Asia/Seoul'],
-          value: null,
-        },
-      ],
-      decorator: ProviderWrapper,
+    // generate: {
+    //   combineArgs: {
+    //     darkMode: [false, true],
+    //     value: [null, new Date('1993-12-26')],
+    //     dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
+    //     timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
+    //   },
+    //   excludeCombinations: [
+    //     {
+    //       timeZone: ['Europe/London', 'America/New_York', 'Asia/Seoul'],
+    //       value: null,
+    //     },
+    //   ],
+    //   decorator: MenuDecorator,
+    // },
+    chromatic: {
+      delay: transitionDuration.slower,
     },
   },
   args: {
+    isOpen: true,
     dateFormat: 'en-UK',
     timeZone: 'Europe/London',
-    isOpen: true,
     min: new Date('1996-10-14'),
     max: new Date('2026-10-14'),
   },
@@ -60,21 +85,119 @@ const meta: StoryMetaType<typeof DatePickerMenu, DatePickerContextProps> = {
 
 export default meta;
 
-export const Basic: StoryFn<typeof DatePickerMenu> = props => {
-  const [value, setValue] = useState<Date | null>(new Date('2023-09-11'));
+type DatePickerMenuStory = StoryObj<typeof DatePickerMenu>;
 
-  const refEl = useRef<HTMLDivElement>(null);
-  return (
-    <>
-      <div ref={refEl}>refEl</div>
-      <DatePickerMenu
-        {...props}
-        refEl={refEl}
-        value={value}
-        onCellClick={setValue}
-      />
-    </>
-  );
+export const Basic: DatePickerMenuStory = {
+  render: args => {
+    const [value, setValue] = useState<Date | null>(null);
+
+    const props = omit(args, [...contextPropNames, 'isOpen']);
+    const refEl = useRef<HTMLDivElement>(null);
+    return (
+      <>
+        <code ref={refEl}>refEl</code>
+        <DatePickerMenu
+          {...props}
+          refEl={refEl}
+          value={value}
+          onCellClick={setValue}
+        />
+      </>
+    );
+  },
+};
+
+export const WithValue: DatePickerMenuStory = {
+  render: args => {
+    const props = omit(args, [...contextPropNames, 'isOpen']);
+    const refEl = useRef<HTMLDivElement>(null);
+    return (
+      <>
+        <code ref={refEl}>refEl</code>
+        <DatePickerMenu
+          {...props}
+          refEl={refEl}
+          value={newUTC(2023, Month.September, 10)}
+          onCellClick={() => {}}
+        />
+      </>
+    );
+  },
+};
+
+/**
+ * Chromatic Interaction tests
+ */
+
+export const InitialTodayHighlight: DatePickerMenuStory = {
+  ...Basic,
+  play: async ctx => {
+    within(ctx.canvasElement);
+    await findByRole(ctx.canvasElement.parentElement!, 'listbox');
+    userEvent.tab();
+  },
+};
+export const InitialValueHighlight: DatePickerMenuStory = {
+  ...WithValue,
+  play: async ctx => {
+    within(ctx.canvasElement);
+    await findByRole(ctx.canvasElement.parentElement!, 'listbox');
+    userEvent.tab();
+  },
+};
+
+export const LeftArrowKey: DatePickerMenuStory = {
+  ...Basic,
+  play: async ctx => {
+    // @ts-expect-error
+    await InitialTodayHighlight.play(ctx);
+    userEvent.keyboard('{arrowleft}');
+  },
+};
+
+export const RightArrowKey: DatePickerMenuStory = {
+  ...Basic,
+  play: async ctx => {
+    // @ts-expect-error
+    await InitialTodayHighlight.play(ctx);
+    userEvent.keyboard('{arrowright}');
+  },
+};
+
+export const UpArrowKey: DatePickerMenuStory = {
+  ...Basic,
+  play: async ctx => {
+    // @ts-expect-error
+    await InitialTodayHighlight.play(ctx);
+    userEvent.keyboard('{arrowup}');
+  },
+};
+
+export const DownArrowKey: DatePickerMenuStory = {
+  ...Basic,
+  play: async ctx => {
+    // @ts-expect-error
+    await InitialTodayHighlight.play(ctx);
+    userEvent.keyboard('{arrowdown}');
+  },
+};
+
+export const UpToPrevMonth: DatePickerMenuStory = {
+  ...Basic,
+  play: async ctx => {
+    // @ts-expect-error
+    await InitialTodayHighlight.play(ctx);
+    userEvent.keyboard('{arrowup}{arrowup}');
+  },
+};
+
+export const DownToNextMonth: DatePickerMenuStory = {
+  ...Basic,
+  play: async ctx => {
+    // @ts-expect-error
+    await InitialTodayHighlight.play(ctx);
+    userEvent.keyboard('{arrowdown}{arrowdown}{arrowdown}');
+  },
 };
 
-export const Generated = () => {};
+// export const Generated = () => {};
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 2779b3aef5..833815169e 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -35,12 +35,9 @@ import { DatePickerMenuProps } from './DatePickerMenu.types';
 import { DatePickerMenuHeader } from './DatePickerMenuHeader';
 
 export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
-  (
-    { isOpen, value, onKeyDown, onCellClick, ...rest }: DatePickerMenuProps,
-    fwdRef,
-  ) => {
+  ({ value, onKeyDown, onCellClick, ...rest }: DatePickerMenuProps, fwdRef) => {
     const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
-    const { isInRange } = useDatePickerContext();
+    const { isInRange, isOpen } = useDatePickerContext();
 
     // TODO:
     // useDynamicRefs may overflow if a user navigates to too many months.
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
index 68b1c1b82c..867041f921 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
@@ -7,9 +7,6 @@ import { DateType } from '../../types';
 export type DatePickerMenuProps = PortalControlProps &
   Pick<PopoverProps, 'refEl'> &
   HTMLElementProps<'div'> & {
-    /** Whether the calendar menu popover is open */
-    isOpen: boolean;
-
     /** The value of the component, provided in UTC time */
     value?: DateType;
 
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index 414761a7a0..6139f8c132 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -10,10 +10,12 @@ import {
   getContextProps,
 } from './DatePickerContext.utils';
 
+/** Create the DatePickerContext */
 export const DatePickerContext = createContext<DatePickerContextProps>(
   defaultDatePickerContext,
 );
 
+/** The Provider component for DatePickerContext */
 export const DatePickerProvider = ({
   children,
   value,
@@ -26,4 +28,6 @@ export const DatePickerProvider = ({
     </DatePickerContext.Provider>
   );
 };
+
+/** A hook to access DatePickerContext value */
 export const useDatePickerContext = () => useContext(DatePickerContext);
diff --git a/packages/date-picker/src/testUtils.ts b/packages/date-picker/src/testUtils.ts
index af534c9b43..8e27ac3d94 100644
--- a/packages/date-picker/src/testUtils.ts
+++ b/packages/date-picker/src/testUtils.ts
@@ -1,3 +1,6 @@
+import userEvent from '@testing-library/user-event';
+import { range } from 'lodash';
+
 /** Time zones used to test with */
 export const TimeZones = [
   'Pacific/Honolulu',
@@ -18,3 +21,10 @@ export const TimeZones = [
  * English-Maldives (week starts on Fri.)
  */
 export const Locales = ['iso8601', 'en-US', 'en-UK', 'de-DE', 'fa-AF', 'en-MV'];
+
+/** Presses the `tab` key `count` times */
+export const tabNTimes = (count: number) => {
+  for (const _ in range(count)) {
+    userEvent.tab();
+  }
+};

From 2cf64de67bf7a946e0883ceea5b2ef088b05c984 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 27 Sep 2023 16:12:28 -0400
Subject: [PATCH 128/351] fixes broken date picker test

---
 .../src/DatePicker/DatePicker.spec.tsx        | 26 ++++++++++---------
 .../DatePickerComponent.tsx                   |  3 ---
 .../DatePickerMenu/DatePickerMenu.stories.tsx | 15 ++++++++---
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index e12caf76d4..d68dff237a 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -347,7 +347,7 @@ describe('packages/date-picker', () => {
       });
     });
 
-    describe.skip('Changing the month', () => {
+    describe('Changing the month', () => {
       test.todo('is announced in an aria-live region');
 
       describe('updates the highlighted cell', () => {
@@ -363,8 +363,6 @@ describe('packages/date-picker', () => {
           const jan31Cell = calendarGrid?.querySelector(
             '[data-iso="2023-01-31T00:00:00.000Z"]',
           );
-          expect(jan31Cell).toHaveAttribute('data-highlight', 'true');
-          tabNTimes(3);
           expect(jan31Cell).toHaveFocus();
         });
         test('to the beginning of the month if we went forwards', async () => {
@@ -379,8 +377,6 @@ describe('packages/date-picker', () => {
           const dec1Cell = calendarGrid?.querySelector(
             '[data-iso="2023-12-01T00:00:00.000Z"]',
           );
-          expect(dec1Cell).toHaveAttribute('data-highlight', 'true');
-          tabNTimes(3);
           expect(dec1Cell).toHaveFocus();
         });
       });
@@ -493,6 +489,7 @@ describe('packages/date-picker', () => {
       });
 
       describe('Enter key', () => {
+        // TODO: TBD if this is the desired behavior
         test.skip('if menu is closed, opens the menu', () => {
           const { getMenuElements } = renderDatePicker();
           userEvent.tab();
@@ -504,7 +501,9 @@ describe('packages/date-picker', () => {
         test('if month/year select is open, updates the displayed month', async () => {
           const { openMenu, findAllByRole } = renderDatePicker();
           const { monthSelect } = openMenu();
-          userEvent.type(monthSelect!, '{enter}');
+          tabNTimes(6);
+          userEvent.keyboard('{enter}');
+          expect(monthSelect).toHaveFocus();
           const options = await findAllByRole('option');
           expect(options.length).toBeGreaterThan(0);
         });
@@ -512,18 +511,21 @@ describe('packages/date-picker', () => {
         test('if a cell is focused, fires a change handler', () => {
           const onChange = jest.fn();
           const { openMenu } = renderDatePicker({ onChange });
-          const { calendarCells } = openMenu();
-          const firstCell = calendarCells[0];
-          userEvent.type(firstCell, '{enter}');
+          const { todayCell } = openMenu();
+          tabNTimes(4);
+          expect(todayCell).toHaveFocus();
+          userEvent.type(todayCell!, '{enter}');
           expect(onChange).toHaveBeenCalled();
         });
 
         test('if a cell is focused, closes the menu', async () => {
           const { openMenu } = renderDatePicker();
-          const { calendarCells, menuContainerEl } = openMenu();
-          const firstCell = calendarCells[0];
-          userEvent.type(firstCell, '{enter}');
+          const { todayCell, menuContainerEl } = openMenu();
+          tabNTimes(4);
+          userEvent.keyboard('{enter}');
+          userEvent.type(todayCell!, '{enter}');
           await waitForElementToBeRemoved(menuContainerEl);
+          expect(menuContainerEl).not.toBeInTheDocument();
         });
       });
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 02b2314350..556154814c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -101,9 +101,6 @@ export const DatePickerComponent = forwardRef<
           id={menuId}
           refEl={formFieldRef}
           value={value}
-          isOpen={isOpen}
-          // month={displayMonth}
-          // setMonth={setDisplayMonth}
           onCellClick={handleCellClick}
           onKeyDown={handleMenuKeydown}
         />
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index e6f99cf104..1cdd2935c5 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -8,6 +8,7 @@ import MockDate from 'mockdate';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 import { transitionDuration } from '@leafygreen-ui/tokens';
+import { InlineCode } from '@leafygreen-ui/typography';
 
 import { Month } from '../../constants';
 import {
@@ -112,19 +113,27 @@ export const WithValue: DatePickerMenuStory = {
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
     return (
-      <>
-        <code ref={refEl}>refEl</code>
+      <div style={{ minHeight: '50vh' }}>
+        <InlineCode ref={refEl}>refEl</InlineCode>
         <DatePickerMenu
           {...props}
           refEl={refEl}
           value={newUTC(2023, Month.September, 10)}
           onCellClick={() => {}}
         />
-      </>
+      </div>
     );
   },
 };
 
+export const DarkMode: DatePickerMenuStory = {
+  ...WithValue,
+  args: {
+    // @ts-expect-error - DatePickerMenuStory does not include Context props
+    darkMode: true,
+  },
+};
+
 /**
  * Chromatic Interaction tests
  */

From 52f363d665acc09f4e0e793e283583a8869b3f77 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 27 Sep 2023 16:40:00 -0400
Subject: [PATCH 129/351] adds menu interaction tests

---
 .../src/DatePicker/DatePicker.spec.tsx        |   1 +
 .../DatePickerMenu/DatePickerMenu.stories.tsx | 102 ++++++++++++------
 2 files changed, 72 insertions(+), 31 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index d68dff237a..e6ced44225 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -187,6 +187,7 @@ describe('packages/date-picker', () => {
         });
       });
 
+      // TODO: Move these tests to DatePickerMenu
       describe('Clicking a Calendar cell', () => {
         test('fires a change handler', () => {
           const onChange = jest.fn();
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 1cdd2935c5..5eb6d7c4d7 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable react-hooks/rules-of-hooks, react/prop-types */
 import React, { useRef, useState } from 'react';
 import { StoryFn, StoryObj } from '@storybook/react';
-import { findByRole, userEvent, within } from '@storybook/testing-library';
-import { omit } from 'lodash';
+import { userEvent, within } from '@storybook/testing-library';
+import { last, omit } from 'lodash';
 import MockDate from 'mockdate';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
@@ -34,6 +34,7 @@ const MenuDecorator = (Story: StoryFn, ctx: any) => {
     [...contextPropNames],
   );
 
+  // Force `new Date()` to return `mockToday`
   MockDate.set(mockToday);
 
   return (
@@ -86,9 +87,9 @@ const meta: StoryMetaType<typeof DatePickerMenu, DecoratorArgs> = {
 
 export default meta;
 
-type DatePickerMenuStory = StoryObj<typeof DatePickerMenu>;
+type DatePickerMenuStoryType = StoryObj<typeof DatePickerMenu>;
 
-export const Basic: DatePickerMenuStory = {
+export const Basic: DatePickerMenuStoryType = {
   render: args => {
     const [value, setValue] = useState<Date | null>(null);
 
@@ -108,7 +109,7 @@ export const Basic: DatePickerMenuStory = {
   },
 };
 
-export const WithValue: DatePickerMenuStory = {
+export const WithValue: DatePickerMenuStoryType = {
   render: args => {
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
@@ -126,87 +127,126 @@ export const WithValue: DatePickerMenuStory = {
   },
 };
 
-export const DarkMode: DatePickerMenuStory = {
+export const DarkMode: DatePickerMenuStoryType = {
   ...WithValue,
   args: {
-    // @ts-expect-error - DatePickerMenuStory does not include Context props
+    // @ts-expect-error - DatePickerMenuStoryType does not include Context props
     darkMode: true,
   },
 };
 
+type DatePickerMenuInteractionTestType = Omit<DatePickerMenuStoryType, 'play'> &
+  Required<Pick<DatePickerMenuStoryType, 'play'>>;
+
 /**
  * Chromatic Interaction tests
  */
 
-export const InitialTodayHighlight: DatePickerMenuStory = {
+export const InitialFocusToday: DatePickerMenuInteractionTestType = {
   ...Basic,
   play: async ctx => {
-    within(ctx.canvasElement);
-    await findByRole(ctx.canvasElement.parentElement!, 'listbox');
+    const { findByRole } = within(ctx.canvasElement.parentElement!);
+    await findByRole('listbox');
     userEvent.tab();
   },
 };
-export const InitialValueHighlight: DatePickerMenuStory = {
+export const InitialFocusValue: DatePickerMenuInteractionTestType = {
   ...WithValue,
   play: async ctx => {
-    within(ctx.canvasElement);
-    await findByRole(ctx.canvasElement.parentElement!, 'listbox');
+    const { findByRole } = within(ctx.canvasElement.parentElement!);
+    await findByRole('listbox');
     userEvent.tab();
   },
 };
 
-export const LeftArrowKey: DatePickerMenuStory = {
+export const LeftArrowKey: DatePickerMenuInteractionTestType = {
   ...Basic,
   play: async ctx => {
-    // @ts-expect-error
-    await InitialTodayHighlight.play(ctx);
+    await InitialFocusToday.play(ctx);
     userEvent.keyboard('{arrowleft}');
   },
 };
 
-export const RightArrowKey: DatePickerMenuStory = {
+export const RightArrowKey: DatePickerMenuInteractionTestType = {
   ...Basic,
   play: async ctx => {
-    // @ts-expect-error
-    await InitialTodayHighlight.play(ctx);
+    await InitialFocusToday.play(ctx);
     userEvent.keyboard('{arrowright}');
   },
 };
 
-export const UpArrowKey: DatePickerMenuStory = {
+export const UpArrowKey: DatePickerMenuInteractionTestType = {
   ...Basic,
   play: async ctx => {
-    // @ts-expect-error
-    await InitialTodayHighlight.play(ctx);
+    await InitialFocusToday.play(ctx);
     userEvent.keyboard('{arrowup}');
   },
 };
 
-export const DownArrowKey: DatePickerMenuStory = {
+export const DownArrowKey: DatePickerMenuInteractionTestType = {
   ...Basic,
   play: async ctx => {
-    // @ts-expect-error
-    await InitialTodayHighlight.play(ctx);
+    await InitialFocusToday.play(ctx);
     userEvent.keyboard('{arrowdown}');
   },
 };
 
-export const UpToPrevMonth: DatePickerMenuStory = {
+export const UpToPrevMonth: DatePickerMenuInteractionTestType = {
   ...Basic,
   play: async ctx => {
-    // @ts-expect-error
-    await InitialTodayHighlight.play(ctx);
+    await InitialFocusToday.play(ctx);
     userEvent.keyboard('{arrowup}{arrowup}');
   },
 };
 
-export const DownToNextMonth: DatePickerMenuStory = {
+export const DownToNextMonth: DatePickerMenuInteractionTestType = {
   ...Basic,
   play: async ctx => {
-    // @ts-expect-error
-    await InitialTodayHighlight.play(ctx);
+    await InitialFocusToday.play(ctx);
     userEvent.keyboard('{arrowdown}{arrowdown}{arrowdown}');
   },
 };
 
+export const OpenMonthMenu: DatePickerMenuInteractionTestType = {
+  ...Basic,
+  play: async ctx => {
+    const canvas = within(ctx.canvasElement.parentElement!);
+    await canvas.findByRole('listbox');
+    const monthMenu = await canvas.findByLabelText('Select month');
+    userEvent.click(monthMenu);
+  },
+};
+
+export const SelectJanuary: DatePickerMenuInteractionTestType = {
+  ...Basic,
+  play: async ctx => {
+    await OpenMonthMenu.play(ctx);
+    const { findAllByRole } = within(ctx.canvasElement.parentElement!);
+    const options = await findAllByRole('option');
+    const Jan = options[0];
+    userEvent.click(Jan);
+  },
+};
+
+export const OpenYearMenu: DatePickerMenuInteractionTestType = {
+  ...Basic,
+  play: async ctx => {
+    const canvas = within(ctx.canvasElement.parentElement!);
+    await canvas.findByRole('listbox');
+    const monthMenu = await canvas.findByLabelText('Select year');
+    userEvent.click(monthMenu);
+  },
+};
+
+export const Select2026: DatePickerMenuInteractionTestType = {
+  ...Basic,
+  play: async ctx => {
+    await OpenYearMenu.play(ctx);
+    const { findAllByRole } = within(ctx.canvasElement.parentElement!);
+    const options = await findAllByRole('option');
+    const _2026 = last(options);
+    userEvent.click(_2026!);
+  },
+};
+
 // export const Generated = () => {};

From b5a24f562e6f043096ea1e5e9d4101a570a01d3e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 27 Sep 2023 16:45:03 -0400
Subject: [PATCH 130/351] Update DatePickerInput.stories.tsx

---
 .../DatePickerInput/DatePickerInput.stories.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index 018297bf52..315c9701c9 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useEffect, useState } from 'react';
+import React, { createRef, useEffect, useState } from 'react';
 import { StoryFn } from '@storybook/react';
 import { isValid } from 'date-fns';
 
@@ -32,20 +32,16 @@ const meta: StoryMetaType<typeof DatePickerInput, DatePickerContextProps> = {
   decorators: [ProviderWrapper],
   parameters: {
     default: null,
+    controls: {
+      exclude: ['segmentRefs'],
+    },
     generate: {
       combineArgs: {
         darkMode: [false, true],
         value: [null, new Date('1993-12-26')],
         dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
-        timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
         size: Object.values(Size),
       },
-      excludeCombinations: [
-        {
-          timeZone: ['Europe/London', 'America/New_York', 'Asia/Seoul'],
-          value: null,
-        },
-      ],
       decorator: ProviderWrapper,
     },
   },
@@ -53,6 +49,11 @@ const meta: StoryMetaType<typeof DatePickerInput, DatePickerContextProps> = {
     label: 'Label',
     dateFormat: 'en-UK',
     timeZone: 'Europe/London',
+    segmentRefs: {
+      day: createRef(),
+      month: createRef(),
+      year: createRef(),
+    },
   },
   argTypes: {
     value: { control: 'date' },

From 47377a5fee11a42dd3f25a63ca7a312f65e24f15 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 27 Sep 2023 16:48:00 -0400
Subject: [PATCH 131/351] lint fix

---
 .../CalendarGrid/CalendarGrid.stories.tsx     |  2 +-
 .../date-picker/src/utils/toTimeZone/index.ts | 26 -------------------
 .../src/utils/toTimeZone/toTimeZone.spec.ts   | 19 --------------
 .../src/utils/valueFormatter/index.ts         |  2 +-
 4 files changed, 2 insertions(+), 47 deletions(-)
 delete mode 100644 packages/date-picker/src/utils/toTimeZone/index.ts
 delete mode 100644 packages/date-picker/src/utils/toTimeZone/toTimeZone.spec.ts

diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index ae05c307fe..d4182ba6b3 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -13,10 +13,10 @@ import {
 } from '../../DatePickerContext';
 import { Locales, TimeZones } from '../../testUtils';
 import { isTodayTZ } from '../../utils/isTodayTZ';
+import { newUTC } from '../../utils/newUTC';
 import { CalendarCell } from '../CalendarCell/CalendarCell';
 
 import { CalendarGrid } from './CalendarGrid';
-import { newUTC } from '../../utils/newUTC';
 
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
   <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
diff --git a/packages/date-picker/src/utils/toTimeZone/index.ts b/packages/date-picker/src/utils/toTimeZone/index.ts
deleted file mode 100644
index 53382996cb..0000000000
--- a/packages/date-picker/src/utils/toTimeZone/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
-
-/**
- * Converts a date in the client's time zone to
- * @deprecated
- */
-export const toTimeZone = (clientDate: Date | string, timeZone: string) => {
-  const clientTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const utc = zonedTimeToUtc(clientDate, clientTz);
-  const tz = utcToZonedTime(utc, timeZone);
-  return tz;
-};
-
-/**
- * Converts a date from a given time zone to the client's time zone
- * @deprecated
- */
-export const toClientTimeZone = (
-  sourceDate: Date | string,
-  sourceTimeZone: string,
-) => {
-  const clientTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const utc = zonedTimeToUtc(sourceDate, sourceTimeZone);
-  const client = utcToZonedTime(utc, clientTz);
-  return client;
-};
diff --git a/packages/date-picker/src/utils/toTimeZone/toTimeZone.spec.ts b/packages/date-picker/src/utils/toTimeZone/toTimeZone.spec.ts
deleted file mode 100644
index 4b24ab5f6b..0000000000
--- a/packages/date-picker/src/utils/toTimeZone/toTimeZone.spec.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { toTimeZone } from '.';
-
-describe.skip('packages/date-picker/utils/toTimeZone', () => {
-  const clientMidnight = new Date('2023-09-01T00:00:00.000');
-
-  test('ISO string', () => {
-    expect(clientMidnight.toISOString()).toEqual('2023-09-01T04:00:00.000Z');
-  });
-
-  test('converting to America/New_York does nothing', () => {
-    const nyc = toTimeZone(clientMidnight, 'America/New_York');
-    expect(nyc.toISOString()).toEqual(clientMidnight.toISOString());
-  });
-
-  test('converts client midnight to 4:00 UTC', () => {
-    const utc = toTimeZone(clientMidnight, 'UTC');
-    expect(utc.toISOString()).toEqual('2023-09-01T04:00:00.000Z');
-  });
-});
diff --git a/packages/date-picker/src/utils/valueFormatter/index.ts b/packages/date-picker/src/utils/valueFormatter/index.ts
index 73dc51feb9..d2ee3a7432 100644
--- a/packages/date-picker/src/utils/valueFormatter/index.ts
+++ b/packages/date-picker/src/utils/valueFormatter/index.ts
@@ -1,7 +1,7 @@
 import padStart from 'lodash/padStart';
 
-import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
 import { charsPerSegment } from '../../DateInput/DateInputSegment/constants';
+import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
 import { isZeroLike } from '../isZeroLike';
 
 export const getValueFormatter =

From 9cf80316869e2c83522468355b95712e1781dc93 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 27 Sep 2023 17:27:02 -0400
Subject: [PATCH 132/351] updates disabled styles

---
 .../DateFormField/DateFormField.stories.tsx   |   9 +-
 .../DateFormField/DateFormField.styles.ts     | 124 ++++++++++--------
 .../DateInput/DateFormField/DateFormField.tsx |  14 +-
 .../DateInputBox/DateInputBox.stories.tsx     |   7 +-
 .../DateInputBox/DateInputBox.styles.ts       |   6 +-
 .../DateInput/DateInputBox/DateInputBox.tsx   |   2 +-
 .../DateInputSegment/DateInputSegment.tsx     |   3 +-
 .../src/DatePicker/DatePicker.stories.tsx     |  22 +++-
 .../date-picker/src/DatePicker/DatePicker.tsx |  10 --
 .../DatePickerComponent.tsx                   |  17 ++-
 10 files changed, 129 insertions(+), 85 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
index a8ff091da1..eeec0c443b 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
@@ -27,9 +27,10 @@ const meta: StoryMetaType<
     generate: {
       combineArgs: {
         darkMode: [false, true],
-        label: [undefined, 'Label'],
+        label: ['Label', undefined],
         description: [undefined, 'Description'],
         state: ['unset', 'error'],
+        disabled: [false, true],
       },
       excludeCombinations: [
         {
@@ -42,8 +43,10 @@ const meta: StoryMetaType<
           darkMode={ctx?.args.darkMode}
           baseFontSize={ctx?.args.baseFontSize}
         >
-          {/* @ts-expect-error - incomplete context value */}
-          <DatePickerProvider value={{ size: ctx?.args.size }}>
+          <DatePickerProvider
+            // @ts-expect-error - incomplete context value
+            value={{ size: ctx?.args.size, disabled: ctx?.args.disabled }}
+          >
             <Instance />
           </DatePickerProvider>
         </LeafyGreenProvider>
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts b/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts
index 58cc68c60c..94efe87620 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts
@@ -69,13 +69,13 @@ export const inputModeStyles: Record<Theme, string> = {
       -webkit-text-fill-color: ${palette.black};
       box-shadow: ${autofillShadowOverride(palette.white)};
 
-      &:not(:disabled):focus {
+      &:not([aria-disabled='true']):focus {
         box-shadow: ${autofillShadowOverride(palette.white)},
           ${focusRing.light.input};
         border-color: ${palette.white};
       }
 
-      &:not(:disabled):hover:not(:focus) {
+      &:not([aria-disabled='true']):hover:not(:focus) {
         box-shadow: ${autofillShadowOverride(palette.white)},
           ${hoverRing.light.gray};
       }
@@ -88,31 +88,10 @@ export const inputModeStyles: Record<Theme, string> = {
 
     &:hover,
     &:active {
-      &:not(:disabled):not(:focus) {
+      &:not([aria-disabled='true']):not(:focus) {
         box-shadow: ${hoverRing.light.gray};
       }
     }
-
-    &:disabled {
-      color: ${palette.gray.base};
-      background-color: ${palette.gray.light2};
-      border-color: ${palette.gray.light1};
-
-      &::placeholder {
-        color: inherit;
-      }
-
-      &:-webkit-autofill {
-        &,
-        &:hover,
-        &:focus {
-          appearance: none;
-          border: 1px solid ${palette.gray.base};
-          -webkit-text-fill-color: ${palette.gray.base};
-          box-shadow: ${autofillShadowOverride(palette.gray.light2)};
-        }
-      }
-    }
   `,
   [Theme.Dark]: css`
     color: ${palette.gray.light3};
@@ -126,13 +105,13 @@ export const inputModeStyles: Record<Theme, string> = {
       -webkit-text-fill-color: ${palette.gray.light3};
       box-shadow: ${autofillShadowOverride(palette.gray.dark4)};
 
-      &:not(:disabled):focus {
+      &:not([aria-disabled='true']):focus {
         box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
           ${focusRing.dark.input};
         border-color: ${palette.blue.light1};
       }
 
-      &:not(:disabled):hover:not(:focus) {
+      &:not([aria-disabled='true']):hover:not(:focus) {
         box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
           ${hoverRing.dark.gray};
       }
@@ -140,7 +119,7 @@ export const inputModeStyles: Record<Theme, string> = {
 
     &:hover,
     &:active {
-      &:not(:disabled):not(:focus) {
+      &:not([aria-disabled='true']):not(:focus) {
         box-shadow: ${hoverRing.dark.gray};
       }
     }
@@ -149,40 +128,21 @@ export const inputModeStyles: Record<Theme, string> = {
       color: ${palette.gray.dark1};
       font-weight: ${fontWeights.regular};
     }
-
-    &:disabled {
-      color: ${palette.gray.dark1};
-      background-color: ${palette.gray.dark3};
-      border-color: ${palette.gray.dark2};
-
-      &::placeholder {
-        color: inherit;
-      }
-
-      &:-webkit-autofill {
-        &,
-        &:hover,
-        &:focus {
-          appearance: none;
-          border: 1px solid ${palette.gray.dark1};
-          -webkit-text-fill-color: ${palette.gray.dark1};
-          box-shadow: ${autofillShadowOverride(palette.gray.dark2)};
-        }
-      }
-    }
   `,
 };
 
 const focusSelector = (styles: string) => css`
   @supports selector(:has(a, b)) {
-    &:not(:disabled):focus-within:not(:has(.${iconButtonClassName}:focus)) {
+    &:not([aria-disabled='true']):focus-within:not(
+        :has(.${iconButtonClassName}:focus)
+      ) {
       ${styles}
     }
   }
 
   /* Fallback for when "has" is unsupported */
   @supports not selector(:has(a, b)) {
-    &:not(:disabled):focus-within {
+    &:not([aria-disabled='true']):focus-within {
       ${styles}
     }
   }
@@ -225,24 +185,24 @@ export const inputSizeStyles: Record<Size, string> = {
 export const inputStateStyles: Record<InputState, Record<Theme, string>> = {
   [InputState.Error]: {
     [Theme.Light]: css`
-      &:not(:disabled) {
+      &:not([aria-disabled='true']) {
         border-color: ${palette.red.base};
 
         &:hover,
         &:active {
-          &:not(:disabled):not(:focus) {
+          &:not([aria-disabled='true']):not(:focus) {
             box-shadow: ${hoverRing.light.red};
           }
         }
       }
     `,
     [Theme.Dark]: css`
-      &:not(:disabled) {
+      &:not([aria-disabled='true']) {
         border-color: ${palette.red.light1};
 
         &:hover,
         &:active {
-          &:not(:disabled):not(:focus) {
+          &:not([aria-disabled='true']):not(:focus) {
             box-shadow: ${hoverRing.dark.red};
           }
         }
@@ -255,6 +215,62 @@ export const inputStateStyles: Record<InputState, Record<Theme, string>> = {
   },
 };
 
+export const inputDisabledStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    cursor: not-allowed;
+    background-color: ${palette.gray.light2};
+    border-color: ${palette.gray.light1};
+
+    & input {
+      cursor: not-allowed;
+      pointer-events: none;
+      color: ${palette.gray.base};
+
+      &::placeholder {
+        color: inherit;
+      }
+
+      &:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+          appearance: none;
+          border: 1px solid ${palette.gray.base};
+          -webkit-text-fill-color: ${palette.gray.base};
+          box-shadow: ${autofillShadowOverride(palette.gray.light2)};
+        }
+      }
+    }
+  `,
+  [Theme.Dark]: css`
+    cursor: not-allowed;
+    color: ${palette.gray.dark2};
+    background-color: ${palette.gray.dark3};
+    border-color: ${palette.gray.dark2};
+
+    & input {
+      cursor: not-allowed;
+      pointer-events: none;
+      color: ${palette.gray.dark2};
+
+      &::placeholder {
+        color: inherit;
+      }
+
+      &:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+          appearance: none;
+          border: 1px solid ${palette.gray.dark1};
+          -webkit-text-fill-color: ${palette.gray.dark1};
+          box-shadow: ${autofillShadowOverride(palette.gray.dark2)};
+        }
+      }
+    }
+  `,
+};
+
 export const childrenWrapperStyles = css`
   width: 100%;
 `;
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
index 3212fbe13e..2584e94e6e 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
@@ -20,6 +20,7 @@ import {
   errorIconStyles,
   iconButtonClassName,
   inputBaseStyles,
+  inputDisabledStyles,
   inputFocusStyles,
   inputModeStyles,
   inputSizeStyles,
@@ -51,7 +52,7 @@ export const DateFormField = React.forwardRef<
     fwdRef,
   ) => {
     const { theme } = useDarkMode();
-    const { size, isOpen, menuId } = useDatePickerContext();
+    const { size, isOpen, menuId, disabled } = useDatePickerContext();
     const baseFontSize = useUpdatedBaseFontSize();
 
     return (
@@ -62,12 +63,14 @@ export const DateFormField = React.forwardRef<
       >
         <div className={textContainerStyle}>
           {label && (
-            <Label htmlFor={inputId} id={labelId}>
+            <Label htmlFor={inputId} id={labelId} disabled={disabled}>
               {label}
             </Label>
           )}
           {description && (
-            <Description id={descriptionId}>{description}</Description>
+            <Description id={descriptionId} disabled={disabled}>
+              {description}
+            </Description>
           )}
         </div>
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
@@ -75,6 +78,7 @@ export const DateFormField = React.forwardRef<
           role="combobox"
           aria-expanded={isOpen}
           aria-controls={menuId}
+          aria-disabled={disabled}
           tabIndex={-1}
           onClick={onInputClick}
           className={cx(
@@ -83,6 +87,9 @@ export const DateFormField = React.forwardRef<
             inputFocusStyles[theme],
             inputSizeStyles[size ?? Size.Default],
             inputStateStyles[state][theme],
+            {
+              [inputDisabledStyles[theme]]: disabled,
+            },
           )}
         >
           <div className={childrenWrapperStyles}>{children}</div>
@@ -94,6 +101,7 @@ export const DateFormField = React.forwardRef<
             className={iconButtonClassName}
             onClick={onIconButtonClick}
             type="button"
+            disabled={disabled}
           >
             <Icon glyph="Calendar" />
           </IconButton>
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
index 48f37236d5..22c27124bf 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useEffect, useState } from 'react';
+import React, { createRef, useEffect, useState } from 'react';
 import { StoryFn } from '@storybook/react';
 import { isValid } from 'date-fns';
 
@@ -48,6 +48,11 @@ const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
     label: 'Label',
     dateFormat: 'en-UK',
     timeZone: 'Europe/London',
+    segmentRefs: {
+      day: createRef(),
+      month: createRef(),
+      year: createRef(),
+    },
   },
   argTypes: {
     value: { control: 'date' },
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
index 757df13026..e29b7b7c8d 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
@@ -1,11 +1,11 @@
 import { css } from '@leafygreen-ui/emotion';
 
-export const baseStyles = css``;
-
 export const segmentPartsWrapperStyles = css`
   display: flex;
   align-items: center;
   gap: 1px;
 `;
 
-export const separatorLiteralStyles = css``;
+export const separatorLiteralStyles = css`
+  user-select: none;
+`;
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index c2e2721cef..198ba8df5e 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -43,7 +43,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     }: DateInputBoxProps,
     fwdRef,
   ) => {
-    const { formatParts } = useDatePickerContext();
+    const { formatParts, disabled } = useDatePickerContext();
 
     const containerRef = useForwardedRef(fwdRef, null);
 
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index e80fb01c30..6f5d9a6d97 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -42,7 +42,7 @@ export const DateInputSegment = React.forwardRef<
 
     const { theme } = useDarkMode(darkMode);
     const baseFontSize = useUpdatedBaseFontSize();
-    const { size } = useDatePickerContext();
+    const { size, disabled } = useDatePickerContext();
 
     const formatValue = getValueFormatter(segment);
 
@@ -66,6 +66,7 @@ export const DateInputSegment = React.forwardRef<
         max={max}
         placeholder={defaultPlaceholder[segment]}
         onChange={changeHandler}
+        disabled={disabled}
         className={cx(
           baseStyles,
           fontSizeStyles[baseFontSize],
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index ccb1b2bf96..77cffc7797 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -4,6 +4,7 @@ import { StoryFn } from '@storybook/react';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
 
 import {
   DatePickerContextProps,
@@ -31,27 +32,44 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
   decorators: [ProviderWrapper],
   parameters: {
     default: null,
+    controls: {
+      exclude: [
+        'handleValidation',
+        'initialValue',
+        'onChange',
+        'onSegmentChange',
+        'value',
+      ],
+    },
     generate: {
       combineArgs: {
         darkMode: [false, true],
         value: [new Date('1993-12-26')],
         dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
         timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
+        disabled: [false, true],
       },
       decorator: ProviderWrapper,
     },
   },
   args: {
+    dateFormat: 'en-US',
     label: 'Pick a date',
     min: new Date('1996-10-14'),
     max: new Date('2026-10-14'),
+    size: Size.Default,
+    timeZone: 'America/New_York',
   },
   argTypes: {
-    value: { control: 'date' },
+    baseFontSize: { control: 'select' },
     dateFormat: { control: 'select', options: Locales },
-    timeZone: { control: 'select', options: TimeZones },
+    description: { control: 'text' },
+    label: { control: 'text' },
     min: { control: 'date' },
     max: { control: 'date' },
+    size: { control: 'select' },
+    state: { control: 'select' },
+    timeZone: { control: 'select', options: TimeZones },
   },
 };
 
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index d382fbb7bd..2a87fd98c0 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -34,16 +34,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       initialProp,
     );
 
-    // useEffect(() => {
-    //   const logActiveElement = () => {
-    //     console.log(document.activeElement);
-    //   };
-
-    //   document.addEventListener('focusin', logActiveElement);
-
-    //   return () => document.removeEventListener('focusin', logActiveElement);
-    // }, []);
-
     return (
       <DatePickerProvider
         value={{
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 556154814c..0318136d42 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -24,7 +24,8 @@ export const DatePickerComponent = forwardRef<
     { value, setValue, handleValidation, ...rest }: DatePickerComponentProps,
     fwdRef,
   ) => {
-    const { isOpen, setOpen, formatParts, menuId } = useDatePickerContext();
+    const { disabled, isOpen, setOpen, formatParts, menuId } =
+      useDatePickerContext();
     const openMenu = () => setOpen(true);
     const closeMenu = () => setOpen(false);
 
@@ -48,13 +49,15 @@ export const DatePickerComponent = forwardRef<
     };
 
     const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
-      setOpen(true);
+      if (!disabled) {
+        setOpen(true);
 
-      focusRelevantSegment({
-        target,
-        formatParts,
-        segmentRefs,
-      });
+        focusRelevantSegment({
+          target,
+          formatParts,
+          segmentRefs,
+        });
+      }
     };
 
     const handleCellClick: DatePickerMenuProps['onCellClick'] = cellValue => {

From 8e9f5b8033969af6e2cb532a415fde24e14c7fb6 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 27 Sep 2023 17:29:35 -0400
Subject: [PATCH 133/351] Update DatePicker.stories.tsx

---
 .../date-picker/src/DatePicker/DatePicker.stories.tsx     | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index 77cffc7797..ca3f2f34cc 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -6,11 +6,13 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 
+import { Month } from '../constants';
 import {
   DatePickerContextProps,
   DatePickerProvider,
 } from '../DatePickerContext';
 import { Locales, TimeZones } from '../testUtils';
+import { newUTC } from '../utils/newUTC';
 
 import { DatePicker } from './DatePicker';
 
@@ -44,7 +46,7 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
     generate: {
       combineArgs: {
         darkMode: [false, true],
-        value: [new Date('1993-12-26')],
+        value: [newUTC(2023, Month.December, 26)],
         dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
         timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
         disabled: [false, true],
@@ -55,8 +57,8 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
   args: {
     dateFormat: 'en-US',
     label: 'Pick a date',
-    min: new Date('1996-10-14'),
-    max: new Date('2026-10-14'),
+    min: newUTC(1996, Month.October, 14),
+    max: newUTC(2026, Month.October, 14),
     size: Size.Default,
     timeZone: 'America/New_York',
   },

From 33098c7756d615909ad47a86e618848db35f8a50 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 28 Sep 2023 11:12:53 -0400
Subject: [PATCH 134/351] export utils index

---
 .../DateInputSegment/DateInputSegment.tsx     |  2 +-
 .../index.ts                                  |  0
 .../valueFormatter.spec.ts                    |  0
 packages/date-picker/src/utils/index.ts       | 29 +++++++++++++++++++
 4 files changed, 30 insertions(+), 1 deletion(-)
 rename packages/date-picker/src/utils/{valueFormatter => getValueFormatter}/index.ts (100%)
 rename packages/date-picker/src/utils/{valueFormatter => getValueFormatter}/valueFormatter.spec.ts (100%)
 create mode 100644 packages/date-picker/src/utils/index.ts

diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index 6f5d9a6d97..031b01d31b 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -7,7 +7,7 @@ import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
 import { useDatePickerContext } from '../../DatePickerContext';
-import { getValueFormatter } from '../../utils/valueFormatter';
+import { getValueFormatter } from '../../utils/getValueFormatter';
 
 import { defaultMax, defaultMin, defaultPlaceholder } from './constants';
 import {
diff --git a/packages/date-picker/src/utils/valueFormatter/index.ts b/packages/date-picker/src/utils/getValueFormatter/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/valueFormatter/index.ts
rename to packages/date-picker/src/utils/getValueFormatter/index.ts
diff --git a/packages/date-picker/src/utils/valueFormatter/valueFormatter.spec.ts b/packages/date-picker/src/utils/getValueFormatter/valueFormatter.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/valueFormatter/valueFormatter.spec.ts
rename to packages/date-picker/src/utils/getValueFormatter/valueFormatter.spec.ts
diff --git a/packages/date-picker/src/utils/index.ts b/packages/date-picker/src/utils/index.ts
new file mode 100644
index 0000000000..5a54d18b0e
--- /dev/null
+++ b/packages/date-picker/src/utils/index.ts
@@ -0,0 +1,29 @@
+export { cloneReverse } from './cloneReverse';
+export { getDaysInUTCMonth } from './getDaysInUTCMonth';
+export { getFirstOfMonth } from './getFirstOfMonth';
+export { getFormatParts } from './getFormatParts';
+export { getFullMonthLabel } from './getFullMonthLabel';
+export { getLastOfMonth } from './getLastOfMonth';
+export { getMonthName } from './getMonthName';
+export { getRemainingParts } from './getRemainingParts';
+export { getSegmentsFromDate } from './getSegmentsFromDate';
+export { getUTCDateString } from './getUTCDateString';
+export { getValueFormatter } from './getValueFormatter';
+export { getWeeksArray } from './getWeeksArray';
+export { isCurrentUTCDay } from './isCurrentUTCDay';
+export { isSameTZDay } from './isSameTZDay';
+export { isSameUTCDay } from './isSameUTCDay';
+export { isSameUTCMonth } from './isSameUTCMonth';
+export { isTodayTZ } from './isTodayTZ';
+export { isValidDate } from './isValidDate';
+export { isValidLocale } from './isValidLocale';
+export { isValidSegment } from './isValidSegment';
+export { isZeroLike } from './isZeroLike';
+export { newDateFromSegments } from './newDateFromSegments';
+export { newUTC } from './newUTC';
+export { pickAndOmit } from './pickAndOmit';
+export { setToUTCMidnight } from './setToUTCMidnight';
+export { setUTCDate } from './setUTCDate';
+export { setUTCMonth } from './setUTCMonth';
+export { setUTCYear } from './setUTCYear';
+export { toDate } from './toDate';

From cb8634d89c376619f7780ef652a93f4c336e32cd Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 28 Sep 2023 11:17:44 -0400
Subject: [PATCH 135/351] import directly from utils

---
 .../Calendar/CalendarGrid/CalendarGrid.stories.tsx |  3 +--
 .../src/Calendar/CalendarGrid/CalendarGrid.tsx     |  2 +-
 .../DateInputBox/DateInputBox.stories.tsx          |  2 +-
 .../src/DateInput/DateInputBox/DateInputBox.tsx    |  4 ++--
 .../DateInputSegment/DateInputSegment.tsx          |  2 +-
 .../src/DatePicker/DatePicker.stories.tsx          |  2 +-
 packages/date-picker/src/DatePicker/DatePicker.tsx |  2 +-
 .../DatePicker/DatePickerInput/DatePickerInput.tsx |  2 +-
 .../DatePickerMenu/DatePickerMenu.stories.tsx      |  3 +--
 .../DatePicker/DatePickerMenu/DatePickerMenu.tsx   | 14 ++++++++------
 .../DatePickerMenu/DatePickerMenuHeader/index.tsx  |  4 +---
 .../DatePickerMenu/utils/getNewHighlight/index.ts  |  8 +++++---
 .../DatePickerContext/DatePickerContext.utils.ts   |  3 +--
 .../src/hooks/useDateSegments/useDateSegments.ts   |  2 +-
 packages/date-picker/src/hooks/useFormat/index.ts  |  2 +-
 .../date-picker/src/utils/getFormatParts/index.ts  |  2 +-
 16 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index d4182ba6b3..f2228dce4a 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -12,8 +12,7 @@ import {
   useDatePickerContext,
 } from '../../DatePickerContext';
 import { Locales, TimeZones } from '../../testUtils';
-import { isTodayTZ } from '../../utils/isTodayTZ';
-import { newUTC } from '../../utils/newUTC';
+import { isTodayTZ, newUTC } from '../../utils';
 import { CalendarCell } from '../CalendarCell/CalendarCell';
 
 import { CalendarGrid } from './CalendarGrid';
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index b22a3dc778..8504bc6533 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -6,7 +6,7 @@ import { Disclaimer } from '@leafygreen-ui/typography';
 
 import { DaysOfWeek, daysPerWeek } from '../../constants';
 import { useDatePickerContext } from '../../DatePickerContext';
-import { getWeeksArray } from '../../utils/getWeeksArray';
+import { getWeeksArray } from '../../utils';
 
 import { calendarHeaderCellStyles } from './CalendarGrid.styles';
 import { CalendarGridProps } from './CalendarGrid.types';
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
index 22c27124bf..0e6f1530db 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -11,7 +11,7 @@ import {
   DatePickerContextProps,
   DatePickerProvider,
 } from '../../DatePickerContext';
-import { newUTC } from '../../utils/newUTC';
+import { newUTC } from '../../utils';
 
 import { DateInputBox } from './DateInputBox';
 
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index 198ba8df5e..2b2a9ad6ee 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -11,7 +11,7 @@ import {
   isDateSegment,
 } from '../../hooks/useDateSegments/DateSegments.types';
 import { useDateSegments } from '../../hooks/useDateSegments/useDateSegments';
-import { newDateFromSegments } from '../../utils/newDateFromSegments';
+import { newDateFromSegments } from '../../utils';
 import { DateInputSegment } from '../DateInputSegment';
 
 import {
@@ -43,7 +43,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     }: DateInputBoxProps,
     fwdRef,
   ) => {
-    const { formatParts, disabled } = useDatePickerContext();
+    const { formatParts } = useDatePickerContext();
 
     const containerRef = useForwardedRef(fwdRef, null);
 
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index 031b01d31b..d652527a94 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -7,7 +7,7 @@ import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
 import { useDatePickerContext } from '../../DatePickerContext';
-import { getValueFormatter } from '../../utils/getValueFormatter';
+import { getValueFormatter } from '../../utils';
 
 import { defaultMax, defaultMin, defaultPlaceholder } from './constants';
 import {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index ca3f2f34cc..02cdba15f5 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -12,7 +12,7 @@ import {
   DatePickerProvider,
 } from '../DatePickerContext';
 import { Locales, TimeZones } from '../testUtils';
-import { newUTC } from '../utils/newUTC';
+import { newUTC } from '../utils';
 
 import { DatePicker } from './DatePicker';
 
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 2a87fd98c0..74ef8f7778 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -5,7 +5,7 @@ import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { DatePickerProvider } from '../DatePickerContext';
 import { contextPropNames } from '../DatePickerContext/DatePickerContext.utils';
 import { useControlledValue } from '../hooks/useControlledValue';
-import { pickAndOmit } from '../utils/pickAndOmit';
+import { pickAndOmit } from '../utils';
 
 import { DatePickerProps } from './DatePicker.types';
 import { DatePickerComponent } from './DatePickerComponent';
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 46efc0b43f..2a4d493b43 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -5,7 +5,7 @@ import { keyMap } from '@leafygreen-ui/lib';
 
 import { DateFormField, DateInputBox } from '../../DateInput';
 import { useDatePickerContext } from '../../DatePickerContext';
-import { isZeroLike } from '../../utils/isZeroLike';
+import { isZeroLike } from '../../utils';
 import { getRelativeSegment } from '../utils/getRelativeSegment';
 import { isElementInputSegment } from '../utils/isElementInputSegment';
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 5eb6d7c4d7..a040d9751d 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -19,8 +19,7 @@ import {
   contextPropNames,
   defaultDatePickerContext,
 } from '../../DatePickerContext/DatePickerContext.utils';
-import { newUTC } from '../../utils/newUTC';
-import { pickAndOmit } from '../../utils/pickAndOmit';
+import { newUTC, pickAndOmit } from '../../utils';
 
 import { DatePickerMenu } from './DatePickerMenu';
 import { DatePickerMenuProps } from './DatePickerMenu.types';
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 833815169e..af5588d281 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -18,12 +18,14 @@ import { CalendarCell, CalendarCellState } from '../../Calendar/CalendarCell';
 import { CalendarGrid } from '../../Calendar/CalendarGrid';
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
 import { useDatePickerContext } from '../../DatePickerContext';
-import { getFirstOfMonth } from '../../utils/getFirstOfMonth';
-import { getFullMonthLabel } from '../../utils/getFullMonthLabel';
-import { getUTCDateString } from '../../utils/getUTCDateString';
-import { isSameUTCDay } from '../../utils/isSameUTCDay';
-import { isSameUTCMonth } from '../../utils/isSameUTCMonth';
-import { setToUTCMidnight } from '../../utils/setToUTCMidnight';
+import {
+  getFirstOfMonth,
+  getFullMonthLabel,
+  getUTCDateString,
+  isSameUTCDay,
+  isSameUTCMonth,
+  setToUTCMidnight,
+} from '../../utils';
 
 import { getNewHighlight } from './utils/getNewHighlight';
 import {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index da844d3951..7e0194484a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -8,9 +8,7 @@ import { DropdownWidthBasis, Option, Select } from '@leafygreen-ui/select';
 
 import { Months } from '../../../constants';
 import { useDatePickerContext } from '../../../DatePickerContext';
-import { isSameUTCMonth } from '../../../utils/isSameUTCMonth';
-import { setUTCMonth } from '../../../utils/setUTCMonth';
-import { setUTCYear } from '../../../utils/setUTCYear';
+import { isSameUTCMonth, setUTCMonth, setUTCYear } from '../../../utils';
 import {
   menuHeaderSelectContainerStyles,
   menuHeaderStyles,
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
index 88d14b6daa..85e49fc7e2 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
@@ -1,8 +1,10 @@
 import { isAfter } from 'date-fns';
 
-import { getFirstOfMonth } from '../../../../utils/getFirstOfMonth';
-import { getLastOfMonth } from '../../../../utils/getLastOfMonth';
-import { isSameUTCMonth } from '../../../../utils/isSameUTCMonth';
+import {
+  getFirstOfMonth,
+  getLastOfMonth,
+  isSameUTCMonth,
+} from '../../../../utils';
 
 export const getNewHighlight = (
   currentHighlight: Date | null,
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
index a3f52b43e5..1857e91295 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
@@ -5,8 +5,7 @@ import defaultTo from 'lodash/defaultTo';
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
 import { BaseDatePickerProps } from '../types';
-import { getFormatParts } from '../utils/getFormatParts';
-import { toDate } from '../utils/toDate';
+import { getFormatParts, toDate } from '../utils';
 
 import {
   DatePickerContextProps,
diff --git a/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts b/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts
index bc1fc6a676..97b035f424 100644
--- a/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts
+++ b/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts
@@ -4,7 +4,7 @@ import { isSameDay } from 'date-fns';
 import { usePrevious } from '@leafygreen-ui/hooks';
 
 import { DateType } from '../../types';
-import { getSegmentsFromDate } from '../../utils/getSegmentsFromDate';
+import { getSegmentsFromDate } from '../../utils';
 
 import {
   DateSegment,
diff --git a/packages/date-picker/src/hooks/useFormat/index.ts b/packages/date-picker/src/hooks/useFormat/index.ts
index 22874d4887..29860ed9a2 100644
--- a/packages/date-picker/src/hooks/useFormat/index.ts
+++ b/packages/date-picker/src/hooks/useFormat/index.ts
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 
 import { consoleOnce } from '@leafygreen-ui/lib';
 
-import { isValidLocale } from '../../utils/isValidLocale';
+import { isValidLocale } from '../../utils';
 
 const now = new Date();
 const ISO = 'iso8601';
diff --git a/packages/date-picker/src/utils/getFormatParts/index.ts b/packages/date-picker/src/utils/getFormatParts/index.ts
index bdacb1f0b5..0cc969df4c 100644
--- a/packages/date-picker/src/utils/getFormatParts/index.ts
+++ b/packages/date-picker/src/utils/getFormatParts/index.ts
@@ -1,4 +1,4 @@
-import { isValidLocale } from '../../utils/isValidLocale';
+import { isValidLocale } from '../../utils';
 
 const now = new Date();
 const ISO = 'iso8601';

From 12670ae05954f6f56d0dbe68d303c23e1115ef0a Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 28 Sep 2023 14:50:09 -0400
Subject: [PATCH 136/351] group shared component stories & tests

---
 .../date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx | 2 +-
 .../src/Calendar/CalendarCell/CalendarCell.stories.tsx          | 2 +-
 .../date-picker/src/Calendar/CalendarGrid/CalendarGrid.spec.tsx | 2 +-
 .../src/Calendar/CalendarGrid/CalendarGrid.stories.tsx          | 2 +-
 .../date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx   | 2 +-
 .../src/DateInput/DateFormField/DateFormField.spec.tsx          | 2 +-
 .../src/DateInput/DateFormField/DateFormField.stories.tsx       | 2 +-
 .../src/DateInput/DateInputBox/DateInputBox.spec.tsx            | 2 +-
 .../src/DateInput/DateInputBox/DateInputBox.stories.tsx         | 2 +-
 .../src/DateInput/DateInputSegment/DateInputSegment.spec.tsx    | 2 +-
 .../src/DateInput/DateInputSegment/DateInputSegment.stories.tsx | 2 +-
 11 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
index b77661d19c..2206184f97 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
@@ -12,7 +12,7 @@ const TestCellWrapper = ({ children }: PropsWithChildren) => (
   </table>
 );
 
-describe('packages/date-picker/calendar-cell', () => {
+describe('packages/date-picker/shared/calendar-cell', () => {
   test('has `gridcell` role', () => {
     const { queryByRole, getByTestId } = render(
       <TestCellWrapper>
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
index 5bd5912320..3e6c11106f 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
@@ -13,7 +13,7 @@ import { CalendarCell } from './CalendarCell';
 import { CalendarCellState } from './CalendarCell.types';
 
 const meta: StoryMetaType<typeof CalendarCell, DatePickerContextProps> = {
-  title: 'Components/DatePicker/CalendarCell',
+  title: 'Components/DatePicker/Shared/CalendarCell',
   component: CalendarCell,
   parameters: {
     default: null,
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.spec.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.spec.tsx
index f5e446bffe..68229bf7ce 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.spec.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.spec.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 
 import { CalendarGrid } from '.';
 
-describe('packages/calendar-grid', () => {
+describe('packages/date-picker/shared/calendar-grid', () => {
   test('has `grid` role', () => {
     const { container, queryByRole } = render(
       <CalendarGrid month={new Date()}>{() => <></>}</CalendarGrid>,
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index f2228dce4a..fecdace289 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -30,7 +30,7 @@ const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
 );
 
 const meta: StoryMetaType<typeof CalendarGrid, DatePickerContextProps> = {
-  title: 'Components/DatePicker/CalendarGrid',
+  title: 'Components/DatePicker/Shared/CalendarGrid',
   component: CalendarGrid,
   parameters: {
     default: 'Demo',
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx
index 940ffe2aba..104159f9de 100644
--- a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx
+++ b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx
@@ -3,6 +3,6 @@ import { render } from '@testing-library/react';
 
 import { MenuWrapper } from '.';
 
-describe('packages/menu-wrapper', () => {
+describe('packages/date-picker/shared/menu-wrapper', () => {
   test('condition', () => {});
 });
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.spec.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.spec.tsx
index c25d849bed..eb56af637e 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.spec.tsx
@@ -3,6 +3,6 @@ import { render } from '@testing-library/react';
 
 import { DateFormField } from '.';
 
-describe('packages/date-picker/date-form-field', () => {
+describe('packages/date-picker/shared/date-form-field', () => {
   test('renders', () => {});
 });
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
index eeec0c443b..e7fcc5c7e4 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
@@ -17,7 +17,7 @@ const meta: StoryMetaType<
   typeof DateFormField,
   Partial<DatePickerContextProps>
 > = {
-  title: 'Components/DatePicker/DateFormField',
+  title: 'Components/DatePicker/Shared/DateFormField',
   component: DateFormField,
   parameters: {
     default: null,
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
index 031c696a11..9ad1e0b3fa 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -48,7 +48,7 @@ const renderDateInputBox = (
   return { ...result, dayInput, monthInput, yearInput };
 };
 
-describe('packages/date-input-box', () => {
+describe('packages/date-picker/shared/date-input-box', () => {
   describe('rendering', () => {
     describe.each(['day', 'month', 'year'])('%i', segment => {
       test('renders the correct aria attributes', () => {
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
index 0e6f1530db..bdf4c923a5 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -30,7 +30,7 @@ const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
 );
 
 const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
-  title: 'Components/DatePicker/DateInputBox',
+  title: 'Components/DatePicker/Shared/DateInputBox',
   component: DateInputBox,
   decorators: [ProviderWrapper],
   parameters: {
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
index 6f53b95873..d5327d6c6c 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
@@ -15,7 +15,7 @@ const renderSegment = (props: DateInputSegmentProps) => {
   };
 };
 
-describe('packages/date-picker/date-input-segment', () => {
+describe('packages/date-picker/shared/date-input-segment', () => {
   beforeEach(() => {
     handler.mockClear();
   });
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.stories.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.stories.tsx
index 871d685f2d..87fc0c6fb9 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.stories.tsx
@@ -13,7 +13,7 @@ import {
 import { DateInputSegment } from './DateInputSegment';
 
 const meta: StoryMetaType<typeof DateInputSegment, DatePickerContextProps> = {
-  title: 'Components/DatePicker/DateInputSegment',
+  title: 'Components/DatePicker/Shared/DateInputSegment',
   component: DateInputSegment,
   parameters: {
     default: null,

From d67aa283d97ce5008fbafb022d7c7045467e0b6e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 28 Sep 2023 16:15:42 -0400
Subject: [PATCH 137/351] update tests

---
 .../DateInputBox/DateInputBox.spec.tsx        | 19 +++++++++++--------
 .../DateInputSegment/DateInputSegment.tsx     |  3 ---
 .../src/DatePicker/DatePicker.spec.tsx        | 15 ++++++++++++---
 .../DatePickerComponent.tsx                   |  4 +++-
 4 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
index 9ad1e0b3fa..df17579b9d 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -209,23 +209,26 @@ describe('packages/date-picker/shared/date-input-box', () => {
   });
 
   describe('Keyboard interaction', () => {
+    // Skipping, since {arrowup}/{arrowdown} do not trigger
+    // a change event in userEvent
+    // https://github.com/testing-library/user-event/issues/1066
     // eslint-disable-next-line jest/no-disabled-tests
     describe.skip('Up arrow', () => {
       describe('increments the input value', () => {
-        test('day input', async () => {
-          const { dayInput } = renderDateInputBox();
-          userEvent.type(dayInput, '26{arrowup}');
-          expect(dayInput.value).toBe('27');
+        test('year input', async () => {
+          const { yearInput } = renderDateInputBox({});
+          userEvent.type(yearInput, '2023{arrowup}');
+          expect(yearInput.value).toBe('2024');
         });
         test('month input', async () => {
           const { monthInput } = renderDateInputBox();
           userEvent.type(monthInput, '9{arrowup}');
           expect(monthInput.value).toBe('10');
         });
-        test('year input', async () => {
-          const { yearInput } = renderDateInputBox();
-          userEvent.type(yearInput, '2023{arrowup}');
-          expect(yearInput.value).toBe('2024');
+        test('day input', async () => {
+          const { dayInput } = renderDateInputBox();
+          userEvent.type(dayInput, '26{arrowup}');
+          expect(dayInput.value).toBe('27');
         });
       });
     });
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index d652527a94..dc57d9a792 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -50,9 +50,6 @@ export const DateInputSegment = React.forwardRef<
       onChange?.(formatValue(e.target.value));
     };
 
-    // TODO:
-    // Use a text input with pattern attribute due to Firefox stripping leading zeros on number inputs. (╯°□°)╯︵ ┻━┻
-    // Thanks @matt-d-rat
     return (
       <input
         {...rest}
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index e6ced44225..4f0e969a65 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -490,12 +490,21 @@ describe('packages/date-picker', () => {
       });
 
       describe('Enter key', () => {
-        // TODO: TBD if this is the desired behavior
-        test.skip('if menu is closed, opens the menu', () => {
+        test('if menu is closed, does not open the menu', () => {
           const { getMenuElements } = renderDatePicker();
           userEvent.tab();
           userEvent.keyboard('{enter}');
           const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).not.toBeInTheDocument();
+        });
+
+        test.todo('calls validation handler');
+
+        test('if menu is closed, enter key on calendar button opens the menu', () => {
+          const { getMenuElements } = renderDatePicker();
+          tabNTimes(3);
+          userEvent.keyboard('{enter}');
+          const { menuContainerEl } = getMenuElements();
           expect(menuContainerEl).toBeInTheDocument();
         });
 
@@ -566,7 +575,7 @@ describe('packages/date-picker', () => {
 
     describe('Typing', () => {
       describe('Typing into the input', () => {
-        test.skip('opens the menu', () => {
+        test('opens the menu', () => {
           const { yearInput, getMenuElements } = renderDatePicker();
           userEvent.tab();
           expect(yearInput).toHaveFocus();
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 0318136d42..7b4d8ca7af 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -68,12 +68,14 @@ export const DatePickerComponent = forwardRef<
     const handleInputKeydown: KeyboardEventHandler = ({ key }) => {
       switch (key) {
         case keyMap.Enter:
-          openMenu();
+          // noop. Enter can interfere with Form behavior
           break;
         case keyMap.Escape:
           closeMenu();
           break;
         default:
+          // any other keydown should open the menu
+          openMenu();
           break;
       }
     };

From 0d71cd5ffd0d71bbb06d2fc1d5bd68c4cb9af4d9 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 28 Sep 2023 17:53:14 -0400
Subject: [PATCH 138/351] adds validation handler functionality

---
 .../DateInput/DateInputBox/DateInputBox.tsx   |  2 +-
 .../src/DatePicker/DatePicker.spec.tsx        | 49 +++++++++++++--
 .../date-picker/src/DatePicker/DatePicker.tsx |  3 +-
 .../src/DatePicker/DatePicker.types.ts        |  2 +-
 .../DatePickerComponent.tsx                   | 59 ++++++++++++++++---
 .../DatePickerInput/DatePickerInput.spec.tsx  |  6 +-
 .../DatePickerInput/DatePickerInput.types.ts  |  2 +
 .../DatePickerContext/DatePickerContext.tsx   |  7 ++-
 .../DatePickerContext.types.ts                | 10 ++++
 9 files changed, 121 insertions(+), 19 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index 2b2a9ad6ee..15929b31bc 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -104,10 +104,10 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
               <DateInputSegment
                 key={part.type}
                 ref={segmentRefs[part.type]}
+                aria-labelledby={labelledBy}
                 segment={part.type}
                 value={segments[part.type]}
                 onChange={handleSegmentChange(part.type)}
-                aria-labelledby={labelledBy}
               />
             );
           }
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 4f0e969a65..7b06f074fa 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -213,6 +213,17 @@ describe('packages/date-picker', () => {
           expect(firstCell).toHaveAttribute('aria-disabled', 'true');
           expect(onChange).not.toHaveBeenCalled();
         });
+
+        test('fires a validation handler', () => {
+          const handleValidation = jest.fn();
+          const { openMenu } = renderDatePicker({
+            handleValidation,
+          });
+          const { calendarCells } = openMenu();
+          const firstCell = calendarCells?.[0];
+          userEvent.click(firstCell);
+          expect(handleValidation).toHaveBeenCalled();
+        });
       });
 
       describe('Clicking a Chevron', () => {
@@ -487,6 +498,20 @@ describe('packages/date-picker', () => {
             });
           });
         });
+
+        test('calls validation handler when last segment is unfocused', () => {
+          const handleValidation = jest.fn();
+          renderDatePicker({ handleValidation });
+          tabNTimes(5);
+          expect(handleValidation).toHaveBeenCalled();
+        });
+
+        test('does not call validation handler when changing segment focus', () => {
+          const handleValidation = jest.fn();
+          renderDatePicker({ handleValidation });
+          tabNTimes(2);
+          expect(handleValidation).not.toHaveBeenCalled();
+        });
       });
 
       describe('Enter key', () => {
@@ -498,7 +523,13 @@ describe('packages/date-picker', () => {
           expect(menuContainerEl).not.toBeInTheDocument();
         });
 
-        test.todo('calls validation handler');
+        test('calls validation handler', () => {
+          const handleValidation = jest.fn();
+          renderDatePicker({ handleValidation });
+          userEvent.tab();
+          userEvent.keyboard('{enter}');
+          expect(handleValidation).toHaveBeenCalled();
+        });
 
         test('if menu is closed, enter key on calendar button opens the menu', () => {
           const { getMenuElements } = renderDatePicker();
@@ -611,8 +642,18 @@ describe('packages/date-picker', () => {
           expect(onChange).toHaveBeenCalled();
         });
 
-        // TODO: validation handlers
-        test.skip('fires a validation handler if the value is updated', () => {
+        test('does not fire a validation handler when the value is first set', () => {
+          const handleValidation = jest.fn();
+          const { yearInput, monthInput, dayInput } = renderDatePicker({
+            handleValidation,
+          });
+          userEvent.type(yearInput, '2023');
+          userEvent.type(monthInput, '12');
+          userEvent.type(dayInput, '26');
+          expect(handleValidation).not.toHaveBeenCalled();
+        });
+
+        test('fires a validation handler any time the value is updated', () => {
           const handleValidation = jest.fn();
           const { dayInput } = renderDatePicker({
             value: new Date(),
@@ -620,7 +661,7 @@ describe('packages/date-picker', () => {
           });
 
           userEvent.type(dayInput, '05');
-          expect(handleValidation).toHaveBeenCalledTimes(2);
+          expect(handleValidation).toHaveBeenCalled();
         });
 
         test.todo('focuses the next segment if the segment value is valid');
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 74ef8f7778..0d29c27e5f 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -19,13 +19,14 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       value: valueProp,
       initialValue: initialProp,
       onChange: onChangeProp,
-      handleValidation,
       ...props
     }: DatePickerProps,
     fwdRef,
   ) => {
     const [contextProps, restProps] = pickAndOmit(props, contextPropNames);
     const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
+
+    // TODO: initialize this in the Provider
     const [isOpen, setOpen] = useState(false);
 
     const { value, setValue } = useControlledValue(
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index 7838241994..31a1b1b58b 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -25,7 +25,7 @@ export interface DatePickerProps extends BaseDatePickerProps {
    *
    * Callback date argument will be a Date object in ISO 8601 format, and in UTC time.
    */
-  handleValidation?: (value: Date) => void;
+  handleValidation?: (value?: DateType) => void;
 
   /**
    * Callback fired when any segment changes, but not necessarily a full value
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 7b4d8ca7af..31ba18488a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -1,4 +1,5 @@
 import React, {
+  FocusEventHandler,
   forwardRef,
   KeyboardEventHandler,
   MouseEventHandler,
@@ -10,6 +11,7 @@ import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../DatePickerContext';
 import { useSegmentRefs } from '../../hooks/useSegmentRefs';
+import { isSameUTCDay } from '../../utils';
 import { DatePickerInput, DatePickerInputProps } from '../DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
 import { focusRelevantSegment } from '../utils/focusRelevantSegment';
@@ -24,8 +26,15 @@ export const DatePickerComponent = forwardRef<
     { value, setValue, handleValidation, ...rest }: DatePickerComponentProps,
     fwdRef,
   ) => {
-    const { disabled, isOpen, setOpen, formatParts, menuId } =
-      useDatePickerContext();
+    const {
+      disabled,
+      isOpen,
+      setOpen,
+      isDirty,
+      setIsDirty,
+      formatParts,
+      menuId,
+    } = useDatePickerContext();
     const openMenu = () => setOpen(true);
     const closeMenu = () => setOpen(false);
 
@@ -40,14 +49,21 @@ export const DatePickerComponent = forwardRef<
 
     useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
 
+    /** Called when any input segment's value has changed */
     const handleInputChange: DatePickerInputProps['setValue'] = (
       inputVal: Date | null,
     ) => {
-      if (inputVal !== value) {
+      if (!isSameUTCDay(inputVal, value)) {
+        // When the value changes via the input element,
+        // we only trigger validation if the component is dirty
+        if (isDirty) {
+          handleValidation?.(inputVal);
+        }
         updateValue(inputVal);
       }
     };
 
+    /** Called when the input, or any of its children, is clicked */
     const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
       if (!disabled) {
         setOpen(true);
@@ -60,11 +76,38 @@ export const DatePickerComponent = forwardRef<
       }
     };
 
-    const handleCellClick: DatePickerMenuProps['onCellClick'] = cellValue => {
-      updateValue(cellValue);
-      setOpen(false);
+    /** Called when any child of DatePickerInput is blurred */
+    const handleInputBlur: FocusEventHandler = e => {
+      const nextFocus = e.relatedTarget;
+
+      // If the next focus is _not_ on a segment
+      if (
+        !Object.values(segmentRefs)
+          .map(ref => ref.current)
+          .includes(nextFocus as HTMLInputElement)
+      ) {
+        setIsDirty(true);
+        handleValidation?.(value);
+      }
+    };
+
+    /** Called when any calendar cell is clicked */
+    const handleCalendarCellClick: DatePickerMenuProps['onCellClick'] = (
+      cellValue: Date,
+    ) => {
+      if (!isSameUTCDay(cellValue, value)) {
+        // when the value is changed via cell,
+        // we trigger validation every time
+        handleValidation?.(cellValue);
+        setIsDirty(true);
+        // finally we update the component value
+        updateValue(cellValue);
+        // and close the menu
+        setOpen(false);
+      }
     };
 
+    /** Called on any keydown within the input element */
     const handleInputKeydown: KeyboardEventHandler = ({ key }) => {
       switch (key) {
         case keyMap.Enter:
@@ -80,6 +123,7 @@ export const DatePickerComponent = forwardRef<
       }
     };
 
+    /** Called on any keydown within the menu element */
     const handleMenuKeydown: KeyboardEventHandler = ({ key }) => {
       switch (key) {
         case keyMap.Escape:
@@ -98,6 +142,7 @@ export const DatePickerComponent = forwardRef<
           setValue={handleInputChange}
           onClick={handleInputClick}
           onKeyDown={handleInputKeydown}
+          onBlur={handleInputBlur}
           segmentRefs={segmentRefs}
           {...rest}
         />
@@ -106,7 +151,7 @@ export const DatePickerComponent = forwardRef<
           id={menuId}
           refEl={formFieldRef}
           value={value}
-          onCellClick={handleCellClick}
+          onCellClick={handleCalendarCellClick}
           onKeyDown={handleMenuKeydown}
         />
       </>
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 80116e1a34..55fdd23b04 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -92,10 +92,10 @@ describe('packages/date-picker/date-picker-input', () => {
       });
 
       // TODO: FIXME:
-      // eslint-disable-next-line jest/no-disabled-tests
-      test.skip('deletes the whole value on multiple presses', () => {
+      test('deletes the whole value on multiple presses', () => {
         const { monthInput } = renderDatePickerInput();
-        userEvent.type(monthInput, '11{backspace}{backspace}');
+        userEvent.type(monthInput, '11');
+        userEvent.type(monthInput, '{backspace}{backspace}');
         expect(monthInput.value).toBe('');
       });
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index 0b96cfb2e7..29a5c1393e 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -5,9 +5,11 @@ import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 import { DateInputBoxProps } from '../../DateInput';
 import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
+import { DatePickerProps } from '../DatePicker.types';
 
 export interface DatePickerInputProps
   extends Pick<DateInputBoxProps, 'value' | 'setValue' | 'onSegmentChange'>,
+    Pick<DatePickerProps, 'handleValidation'>,
     HTMLElementProps<'div'> {
   /**
    * Click handler
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index 6139f8c132..cbe8bc2d85 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { createContext, PropsWithChildren, useContext } from 'react';
 
 import {
@@ -20,10 +20,13 @@ export const DatePickerProvider = ({
   children,
   value,
 }: PropsWithChildren<{ value: DatePickerProviderProps }>) => {
+  const [isDirty, setIsDirty] = useState(false);
   const contextValue = getContextProps(value);
 
   return (
-    <DatePickerContext.Provider value={contextValue}>
+    <DatePickerContext.Provider
+      value={{ ...contextValue, isDirty, setIsDirty }}
+    >
       {children}
     </DatePickerContext.Provider>
   );
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
index 6a3e13d5f3..9eea568502 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
@@ -24,5 +24,15 @@ export interface DatePickerContextProps
    */
   isInRange: (d?: Date | null) => boolean;
 
+  /**
+   * An array of {@link Intl.DateTimeFormatPart},
+   * used to determine the order of segments
+   */
   formatParts?: Array<Intl.DateTimeFormatPart>;
+
+  /** Identifies whether the component has been interacted with */
+  isDirty: boolean;
+
+  /** Setter for whether the component has been interacted with */
+  setIsDirty: React.Dispatch<React.SetStateAction<boolean>>;
 }

From 82951bdf1c96294978a3331dbcdf13031c0a011b Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 28 Sep 2023 18:42:03 -0400
Subject: [PATCH 139/351] update Segment formatting & change handling

---
 .../DateInputBox/DateInputBox.spec.tsx        | 53 ++++++++++++-----
 .../DateInputSegment.spec.tsx                 | 57 +++++++++++++++++--
 .../DateInputSegment/DateInputSegment.tsx     | 43 ++++++++++++--
 .../DatePickerInput/DatePickerInput.spec.tsx  |  3 +-
 4 files changed, 132 insertions(+), 24 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
index df17579b9d..27c3568ac7 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -2,12 +2,14 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { Month } from '../../constants';
 import {
   DatePickerProvider,
   DatePickerProviderProps,
 } from '../../DatePickerContext';
 import { defaultDatePickerContext } from '../../DatePickerContext/DatePickerContext.utils';
 import { SegmentRefs } from '../../hooks/useSegmentRefs';
+import { newUTC } from '../../utils';
 
 import { DateInputBox, type DateInputBoxProps } from '.';
 
@@ -86,7 +88,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
       });
     });
 
-    test('renders an empty text box', () => {
+    test('renders an empty text box when no value is passed', () => {
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
         undefined,
         { dateFormat: 'iso8601' },
@@ -96,7 +98,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
       expect(yearInput).toHaveValue(null);
     });
 
-    test('renders a filled text box', () => {
+    test('renders a filled text box when value is passed', () => {
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
         { value: new Date('1993-12-26') },
         { dateFormat: 'iso8601', timeZone: 'UTC' },
@@ -109,7 +111,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
   });
 
   describe('typing', () => {
-    test('typing into a segment updates the segment', () => {
+    test('typing into a segment updates the segment value', () => {
       const { dayInput } = renderDateInputBox(undefined, {
         dateFormat: 'iso8601',
         timeZone: 'UTC',
@@ -119,12 +121,12 @@ describe('packages/date-picker/shared/date-input-box', () => {
       expect(dayInput).toHaveValue(26);
     });
 
-    test('typing into a segment does not fire the change handler ', () => {
-      const handler = jest.fn();
+    test('typing into a segment does not fire the value change handler ', () => {
+      const setValue = jest.fn();
       const { dayInput } = renderDateInputBox(
         {
           value: null,
-          setValue: handler,
+          setValue,
         },
         {
           dateFormat: 'iso8601',
@@ -133,10 +135,10 @@ describe('packages/date-picker/shared/date-input-box', () => {
       );
 
       userEvent.type(dayInput, '26');
-      expect(handler).not.toHaveBeenCalled();
+      expect(setValue).not.toHaveBeenCalled();
     });
 
-    test('typing into a segment fires a segment change handler', () => {
+    test('typing into a segment does not immediately fire the segment change handler', () => {
       const onSegmentChange = jest.fn();
 
       const { yearInput } = renderDateInputBox(
@@ -151,15 +153,37 @@ describe('packages/date-picker/shared/date-input-box', () => {
       );
       userEvent.type(yearInput, '1993');
 
+      expect(onSegmentChange).not.toHaveBeenCalled();
+    });
+
+    test('only the segment change handler is fired when the input is blurred', () => {
+      const setValue = jest.fn();
+      const onSegmentChange = jest.fn();
+
+      const { yearInput } = renderDateInputBox(
+        {
+          value: null,
+          setValue,
+          onSegmentChange,
+        },
+        {
+          dateFormat: 'iso8601',
+          timeZone: 'UTC',
+        },
+      );
+
+      userEvent.type(yearInput, '1993');
+      userEvent.tab();
+      expect(setValue).not.toHaveBeenCalled();
       expect(onSegmentChange).toHaveBeenCalledWith('year', 1993);
     });
 
-    test('typing a complete date fires the change handler', () => {
-      const handler = jest.fn();
+    test('change handler is called when a complete date is entered, and is blurred', () => {
+      const setValue = jest.fn();
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
         {
           value: null,
-          setValue: handler,
+          setValue,
         },
         {
           dateFormat: 'iso8601',
@@ -169,8 +193,11 @@ describe('packages/date-picker/shared/date-input-box', () => {
       userEvent.type(yearInput, '1993');
       userEvent.type(monthInput, '12');
       userEvent.type(dayInput, '26');
-
-      expect(handler).toHaveBeenCalled();
+      expect(setValue).not.toHaveBeenCalled();
+      userEvent.tab();
+      expect(setValue).toHaveBeenCalledWith(
+        expect.objectContaining(newUTC(1993, Month.December, 26)),
+      );
     });
 
     test.todo(
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
index d5327d6c6c..d145c5c0c7 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
@@ -109,7 +109,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
   });
 
   describe('Typing', () => {
-    test('Typing a number calls the change handler', () => {
+    test('does not immediately call the change handler', () => {
       const result = render(
         <DateInputSegment
           segment="day"
@@ -119,10 +119,56 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       );
       const input = result.getByTestId('testid');
       userEvent.type(input, '12');
+      expect(handler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('When the input is unfocused (onBlur)', () => {
+    test('entering a number calls the change handler', () => {
+      const result = render(
+        <DateInputSegment
+          segment="day"
+          data-testid="testid"
+          onChange={handler}
+        />,
+      );
+      const input = result.getByTestId('testid');
+      userEvent.type(input, '12');
+      userEvent.tab();
       expect(handler).toHaveBeenCalledWith('12');
     });
 
-    test('Typing letters does not call the handler', async () => {
+    test('deleting a value calls the change handler', () => {
+      const result = render(
+        <DateInputSegment
+          segment="day"
+          data-testid="testid"
+          onChange={handler}
+          value={12}
+        />,
+      );
+      const input = result.getByTestId('testid');
+      userEvent.type(input, '{backspace}{backspace}');
+      userEvent.tab();
+      expect(handler).toHaveBeenCalledWith('');
+    });
+
+    test('entering the same value as previous does not call the handler', () => {
+      const result = render(
+        <DateInputSegment
+          segment="day"
+          data-testid="testid"
+          onChange={handler}
+          value={12}
+        />,
+      );
+      const input = result.getByTestId('testid');
+      userEvent.type(input, '{backspace}{backspace}12');
+      userEvent.tab();
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    test('entering letters does not call the handler', () => {
       const result = render(
         <DateInputSegment
           segment="day"
@@ -132,10 +178,11 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       );
       const input = result.getByTestId('testid');
       userEvent.type(input, 'abc');
+      userEvent.tab();
       expect(handler).not.toHaveBeenCalled();
     });
 
-    test('Typing 1 digit pads value', () => {
+    test('change handler is called with padded value', () => {
       const result = render(
         <DateInputSegment
           segment="day"
@@ -145,10 +192,11 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       );
       const input = result.getByTestId('testid');
       userEvent.type(input, '1');
+      userEvent.tab();
       expect(handler).toHaveBeenCalledWith('01');
     });
 
-    test('typing 3+ digits truncates value', () => {
+    test('change handler is called with truncated value', () => {
       const result = render(
         <DateInputSegment
           segment="day"
@@ -158,6 +206,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       );
       const input = result.getByTestId('testid');
       userEvent.type(input, '123');
+      userEvent.tab();
       expect(handler).toHaveBeenCalledWith('23');
     });
   });
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index dc57d9a792..e2f03f5278 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -1,4 +1,10 @@
-import React, { ChangeEventHandler } from 'react';
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
@@ -30,6 +36,7 @@ export const DateInputSegment = React.forwardRef<
       min: minProp,
       max: maxProp,
       onChange,
+      onBlur,
       darkMode,
       ...rest
     }: DateInputSegmentProps,
@@ -44,10 +51,33 @@ export const DateInputSegment = React.forwardRef<
     const baseFontSize = useUpdatedBaseFontSize();
     const { size, disabled } = useDatePickerContext();
 
-    const formatValue = getValueFormatter(segment);
+    const formatValue = useMemo(() => getValueFormatter(segment), [segment]);
 
-    const changeHandler: ChangeEventHandler<HTMLInputElement> = e => {
-      onChange?.(formatValue(e.target.value));
+    // internally, keep track of the input value
+    const [internalValue, setInternalValue] = useState<string>(
+      formatValue(value),
+    );
+
+    // If the value changes externally, update the internal value
+    useEffect(() => {
+      setInternalValue(formatValue(value));
+    }, [formatValue, value]);
+
+    // On input element change, we update the internal value
+    const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
+      setInternalValue(e.target.value);
+    };
+
+    // When the user unfocuses the element, then we fire the change handler
+    const handleBlur: FocusEventHandler<HTMLInputElement> = e => {
+      const formattedValue = formatValue(internalValue);
+
+      // If the value has changed, call the change handler
+      if (formattedValue !== formatValue(value)) {
+        onChange?.(formattedValue);
+      }
+
+      onBlur?.(e);
     };
 
     return (
@@ -58,11 +88,12 @@ export const DateInputSegment = React.forwardRef<
         ref={inputRef}
         type="number"
         role="spinbutton"
-        value={formatValue(value)}
+        value={internalValue}
         min={min}
         max={max}
         placeholder={defaultPlaceholder[segment]}
-        onChange={changeHandler}
+        onChange={handleChange}
+        onBlur={handleBlur}
         disabled={disabled}
         className={cx(
           baseStyles,
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 55fdd23b04..1502823a2a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -88,10 +88,11 @@ describe('packages/date-picker/date-picker-input', () => {
       test('deletes any value in the input', () => {
         const { dayInput } = renderDatePickerInput();
         userEvent.type(dayInput, '26{backspace}');
+        expect(dayInput.value).toBe('2');
+        userEvent.tab();
         expect(dayInput.value).toBe('02');
       });
 
-      // TODO: FIXME:
       test('deletes the whole value on multiple presses', () => {
         const { monthInput } = renderDatePickerInput();
         userEvent.type(monthInput, '11');

From b6ff0e53b2dca9019c63114401fedfca4af942d6 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 12:23:13 -0400
Subject: [PATCH 140/351] updates handleValidation tests

---
 .../src/DatePicker/DatePicker.spec.tsx        | 54 +++++++++++++++----
 .../DatePickerComponent.tsx                   |  3 +-
 2 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 7b06f074fa..6d9769bd53 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -528,7 +528,7 @@ describe('packages/date-picker', () => {
           renderDatePicker({ handleValidation });
           userEvent.tab();
           userEvent.keyboard('{enter}');
-          expect(handleValidation).toHaveBeenCalled();
+          expect(handleValidation).toHaveBeenCalledWith(null);
         });
 
         test('if menu is closed, enter key on calendar button opens the menu', () => {
@@ -594,6 +594,14 @@ describe('packages/date-picker', () => {
           userEvent.keyboard('{escape}');
           expect(inputContainer.contains(document.activeElement)).toBeTruthy();
         });
+
+        test('fires a validation handler', () => {
+          const handleValidation = jest.fn();
+          const { openMenu } = renderDatePicker({ handleValidation });
+          openMenu();
+          userEvent.keyboard('{escape}');
+          expect(handleValidation).toHaveBeenCalledWith(null);
+        });
       });
 
       /**
@@ -615,7 +623,7 @@ describe('packages/date-picker', () => {
           expect(menuContainerEl).toBeInTheDocument();
         });
 
-        test('does not fire a change handler when the value is incomplete', () => {
+        test('does not fire a value change handler', () => {
           const onChange = jest.fn();
           const { yearInput } = renderDatePicker({
             onChange,
@@ -624,10 +632,32 @@ describe('packages/date-picker', () => {
           expect(onChange).not.toHaveBeenCalled();
         });
 
+        test('does not fire a segment change handler', () => {
+          const onSegmentChange = jest.fn();
+          const { yearInput } = renderDatePicker({
+            onSegmentChange,
+          });
+          userEvent.type(yearInput, '2023');
+          expect(onSegmentChange).not.toHaveBeenCalled();
+        });
+      });
+
+      describe('when a segment is unfocused/blurred', () => {
+        test('does not fire a change handler if the value is incomplete', () => {
+          const onChange = jest.fn();
+          const { yearInput } = renderDatePicker({
+            onChange,
+          });
+          userEvent.type(yearInput, '2023');
+          userEvent.tab();
+          expect(onChange).not.toHaveBeenCalled();
+        });
+
         test('fires a segment change handler', () => {
           const onSegmentChange = jest.fn();
           const { yearInput } = renderDatePicker({ onSegmentChange });
           userEvent.type(yearInput, '2023');
+          userEvent.tab();
           expect(onSegmentChange).toHaveBeenCalledWith('year', 2023);
         });
 
@@ -639,10 +669,13 @@ describe('packages/date-picker', () => {
           userEvent.type(yearInput, '2023');
           userEvent.type(monthInput, '12');
           userEvent.type(dayInput, '26');
-          expect(onChange).toHaveBeenCalled();
+          userEvent.tab();
+          expect(onChange).toHaveBeenCalledWith(
+            expect.objectContaining(newUTC(2023, Month.December, 26)),
+          );
         });
 
-        test('does not fire a validation handler when the value is first set', () => {
+        test('fires a validation handler when the value is first set', () => {
           const handleValidation = jest.fn();
           const { yearInput, monthInput, dayInput } = renderDatePicker({
             handleValidation,
@@ -650,7 +683,10 @@ describe('packages/date-picker', () => {
           userEvent.type(yearInput, '2023');
           userEvent.type(monthInput, '12');
           userEvent.type(dayInput, '26');
-          expect(handleValidation).not.toHaveBeenCalled();
+          userEvent.tab();
+          expect(handleValidation).toHaveBeenCalledWith(
+            expect.objectContaining(newUTC(2023, Month.December, 26)),
+          );
         });
 
         test('fires a validation handler any time the value is updated', () => {
@@ -659,12 +695,12 @@ describe('packages/date-picker', () => {
             value: new Date(),
             handleValidation,
           });
-
           userEvent.type(dayInput, '05');
-          expect(handleValidation).toHaveBeenCalled();
+          userEvent.tab();
+          expect(handleValidation).toHaveBeenCalledWith(
+            expect.objectContaining(newUTC(2023, Month.December, 5)),
+          );
         });
-
-        test.todo('focuses the next segment if the segment value is valid');
       });
     });
   });
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 31ba18488a..c11d43dbbb 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -111,10 +111,11 @@ export const DatePickerComponent = forwardRef<
     const handleInputKeydown: KeyboardEventHandler = ({ key }) => {
       switch (key) {
         case keyMap.Enter:
-          // noop. Enter can interfere with Form behavior
+          handleValidation?.(value);
           break;
         case keyMap.Escape:
           closeMenu();
+          handleValidation?.(value);
           break;
         default:
           // any other keydown should open the menu

From cbbb4137072aff976ae043dcf97c98fc1ace6f26 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 13:10:22 -0400
Subject: [PATCH 141/351] adds initialOpen. moves isOpen to context

---
 .../date-picker/src/DatePicker/DatePicker.spec.tsx    | 10 ++++++++--
 .../src/DatePicker/DatePicker.testutils.tsx           | 11 +++++++++--
 packages/date-picker/src/DatePicker/DatePicker.tsx    |  7 +------
 .../DatePickerComponent/DatePickerComponent.tsx       |  1 +
 .../DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx |  4 ++--
 .../src/DatePickerContext/DatePickerContext.tsx       |  7 ++++---
 .../src/DatePickerContext/DatePickerContext.types.ts  |  9 ++++++---
 .../src/DatePickerContext/DatePickerContext.utils.ts  |  4 ++++
 packages/date-picker/src/types.ts                     |  3 +++
 9 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 6d9769bd53..5706e87795 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -77,6 +77,12 @@ describe('packages/date-picker', () => {
         expect(menuContainerEl).not.toBeInTheDocument();
       });
 
+      test('menu is initially open when rendered with `initialOpen`', async () => {
+        const { getMenuElements } = renderDatePicker({ initialOpen: true });
+        const { menuContainerEl } = getMenuElements();
+        await waitFor(() => expect(menuContainerEl).toBeInTheDocument());
+      });
+
       test('if no value is set, menu opens to current month', () => {
         const { openMenu } = renderDatePicker();
         const { calendarGrid, monthSelect, yearSelect } = openMenu();
@@ -528,7 +534,7 @@ describe('packages/date-picker', () => {
           renderDatePicker({ handleValidation });
           userEvent.tab();
           userEvent.keyboard('{enter}');
-          expect(handleValidation).toHaveBeenCalledWith(null);
+          expect(handleValidation).toHaveBeenCalledWith(undefined);
         });
 
         test('if menu is closed, enter key on calendar button opens the menu', () => {
@@ -600,7 +606,7 @@ describe('packages/date-picker', () => {
           const { openMenu } = renderDatePicker({ handleValidation });
           openMenu();
           userEvent.keyboard('{escape}');
-          expect(handleValidation).toHaveBeenCalledWith(null);
+          expect(handleValidation).toHaveBeenCalledWith(undefined);
         });
       });
 
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index 051abe8e3d..9924edda02 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
-import { render, RenderResult } from '@testing-library/react';
+import {
+  getByRole as globalGetByRole,
+  render,
+  RenderResult,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { DatePickerProps } from './DatePicker.types';
@@ -43,7 +47,10 @@ export const renderDatePicker = (
   const dayInput = result.getByLabelText('day') as HTMLInputElement;
   const monthInput = result.getByLabelText('month') as HTMLInputElement;
   const yearInput = result.getByLabelText('year') as HTMLInputElement;
-  const calendarButton = result.getByRole('button') as HTMLButtonElement;
+  const calendarButton = globalGetByRole(
+    inputContainer,
+    'button',
+  ) as HTMLButtonElement;
 
   /**
    * Returns relevant menu elements.
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 0d29c27e5f..3796421382 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef } from 'react';
 
 import { useIdAllocator } from '@leafygreen-ui/hooks';
 
@@ -26,9 +26,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const [contextProps, restProps] = pickAndOmit(props, contextPropNames);
     const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
 
-    // TODO: initialize this in the Provider
-    const [isOpen, setOpen] = useState(false);
-
     const { value, setValue } = useControlledValue(
       valueProp,
       onChangeProp,
@@ -39,8 +36,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       <DatePickerProvider
         value={{
           ...contextProps,
-          isOpen,
-          setOpen,
           menuId,
         }}
       >
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index c11d43dbbb..b6cdc19206 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -129,6 +129,7 @@ export const DatePickerComponent = forwardRef<
       switch (key) {
         case keyMap.Escape:
           closeMenu();
+          handleValidation?.(value);
           break;
         default:
           break;
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index ac9b0f107b..9527c70922 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -23,7 +23,7 @@ const renderDatePickerMenu = (
 ) => {
   const result = render(
     <DatePickerProvider
-      value={{ ...defaultDatePickerContext, ...context, isOpen: true }}
+      value={{ ...defaultDatePickerContext, ...context, initialOpen: true }}
     >
       <DatePickerMenu value={null} onCellClick={() => {}} {...props} />,
     </DatePickerProvider>,
@@ -32,7 +32,7 @@ const renderDatePickerMenu = (
   const rerenderDatePickerMenu = (newProps?: Partial<DatePickerMenuProps>) =>
     result.rerender(
       <DatePickerProvider
-        value={{ ...defaultDatePickerContext, ...context, isOpen: true }}
+        value={{ ...defaultDatePickerContext, ...context, initialOpen: true }}
       >
         <DatePickerMenu
           value={null}
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index cbe8bc2d85..abd117f893 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -18,14 +18,15 @@ export const DatePickerContext = createContext<DatePickerContextProps>(
 /** The Provider component for DatePickerContext */
 export const DatePickerProvider = ({
   children,
-  value,
+  value: { initialOpen, ...rest },
 }: PropsWithChildren<{ value: DatePickerProviderProps }>) => {
+  const [isOpen, setOpen] = useState<boolean>(initialOpen ?? false);
   const [isDirty, setIsDirty] = useState(false);
-  const contextValue = getContextProps(value);
+  const contextValue = getContextProps(rest);
 
   return (
     <DatePickerContext.Provider
-      value={{ ...contextValue, isDirty, setIsDirty }}
+      value={{ ...contextValue, isOpen, setOpen, isDirty, setIsDirty }}
     >
       {children}
     </DatePickerContext.Provider>
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
index 9eea568502..900a8874a2 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
@@ -2,9 +2,6 @@ import { BaseDatePickerProps } from '../types';
 
 /** The props expected to pass int the provider */
 export interface DatePickerProviderProps extends BaseDatePickerProps {
-  /** Whether the calendar menu is open */
-  isOpen: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   menuId: string;
 }
 
@@ -30,6 +27,12 @@ export interface DatePickerContextProps
    */
   formatParts?: Array<Intl.DateTimeFormatPart>;
 
+  /** Whether the menu is open */
+  isOpen: boolean;
+
+  /** Setter to open or close the menu */
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+
   /** Identifies whether the component has been interacted with */
   isDirty: boolean;
 
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
index 1857e91295..cd7540a3aa 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
@@ -30,6 +30,7 @@ export const contextPropNames: Array<
   'size',
   'state',
   'errorMessage',
+  'initialOpen',
 ];
 
 /** The default context value */
@@ -41,7 +42,10 @@ export const defaultDatePickerContext: DatePickerContextProps = {
   min: MIN_DATE,
   max: MAX_DATE,
   isOpen: false,
+  initialOpen: false,
   setOpen: () => {},
+  isDirty: false,
+  setIsDirty: () => {},
   isInRange: () => true,
   disabled: false,
   size: Size.Default,
diff --git a/packages/date-picker/src/types.ts b/packages/date-picker/src/types.ts
index 5e900deffa..0cb518743b 100644
--- a/packages/date-picker/src/types.ts
+++ b/packages/date-picker/src/types.ts
@@ -67,4 +67,7 @@ export interface BaseDatePickerProps extends DarkModeProps {
    * A message to show in red underneath the input when in an error state
    */
   errorMessage?: string;
+
+  /** Whether the calendar menu is initially open */
+  initialOpen?: boolean;
 }

From cf86f191545f82f4d8d73df27686bcf1d4677260 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 13:16:58 -0400
Subject: [PATCH 142/351] fix ts

---
 .../DatePickerMenu/DatePickerMenu.stories.tsx | 25 +++++--------------
 1 file changed, 6 insertions(+), 19 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index a040d9751d..28669b66c1 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -28,7 +28,7 @@ const mockToday = newUTC(2023, Month.September, 14);
 type DecoratorArgs = DatePickerMenuProps & DatePickerContextProps;
 
 const MenuDecorator = (Story: StoryFn, ctx: any) => {
-  const [{ darkMode, ...contextProps }, { isOpen, ...props }] = pickAndOmit(
+  const [{ darkMode, ...contextProps }, { ...props }] = pickAndOmit(
     ctx?.args as DecoratorArgs,
     [...contextPropNames],
   );
@@ -39,7 +39,11 @@ const MenuDecorator = (Story: StoryFn, ctx: any) => {
   return (
     <LeafyGreenProvider darkMode={darkMode}>
       <DatePickerProvider
-        value={{ ...defaultDatePickerContext, ...contextProps, isOpen }}
+        value={{
+          ...defaultDatePickerContext,
+          ...contextProps,
+          initialOpen: true,
+        }}
       >
         <Story {...props} />
       </DatePickerProvider>
@@ -53,21 +57,6 @@ const meta: StoryMetaType<typeof DatePickerMenu, DecoratorArgs> = {
   decorators: [MenuDecorator],
   parameters: {
     default: null,
-    // generate: {
-    //   combineArgs: {
-    //     darkMode: [false, true],
-    //     value: [null, new Date('1993-12-26')],
-    //     dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
-    //     timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
-    //   },
-    //   excludeCombinations: [
-    //     {
-    //       timeZone: ['Europe/London', 'America/New_York', 'Asia/Seoul'],
-    //       value: null,
-    //     },
-    //   ],
-    //   decorator: MenuDecorator,
-    // },
     chromatic: {
       delay: transitionDuration.slower,
     },
@@ -247,5 +236,3 @@ export const Select2026: DatePickerMenuInteractionTestType = {
     userEvent.click(_2026!);
   },
 };
-
-// export const Generated = () => {};

From aec8a7f2b939d5cc2c61e05620a4efb3cfe810e5 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 13:46:43 -0400
Subject: [PATCH 143/351] rm changesets

---
 .changeset/afraid-snails-trade.md | 5 -----
 .changeset/giant-ears-dress.md    | 6 ------
 .changeset/lucky-dingos-draw.md   | 5 -----
 .changeset/polite-beds-hear.md    | 5 -----
 .changeset/purple-moose-suffer.md | 5 -----
 .changeset/tough-boats-scream.md  | 5 -----
 6 files changed, 31 deletions(-)
 delete mode 100644 .changeset/afraid-snails-trade.md
 delete mode 100644 .changeset/giant-ears-dress.md
 delete mode 100644 .changeset/lucky-dingos-draw.md
 delete mode 100644 .changeset/polite-beds-hear.md
 delete mode 100644 .changeset/purple-moose-suffer.md
 delete mode 100644 .changeset/tough-boats-scream.md

diff --git a/.changeset/afraid-snails-trade.md b/.changeset/afraid-snails-trade.md
deleted file mode 100644
index 150da45e75..0000000000
--- a/.changeset/afraid-snails-trade.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@leafygreen-ui/tokens': minor
----
-
-Adds `Size` token
diff --git a/.changeset/giant-ears-dress.md b/.changeset/giant-ears-dress.md
deleted file mode 100644
index d6e04cdb36..0000000000
--- a/.changeset/giant-ears-dress.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-'@lg-tools/create': patch
----
-
-Fixes broken package.json & tsconfig.json templates.
-Default `directory` is now based off `scope` parameter, if provided.
\ No newline at end of file
diff --git a/.changeset/lucky-dingos-draw.md b/.changeset/lucky-dingos-draw.md
deleted file mode 100644
index a74b75e95e..0000000000
--- a/.changeset/lucky-dingos-draw.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@lg-tools/validate': patch
----
-
-Ignores dependencies imported from a `/scripts` directory, or `*.stories.js` file.
diff --git a/.changeset/polite-beds-hear.md b/.changeset/polite-beds-hear.md
deleted file mode 100644
index f7813b3c86..0000000000
--- a/.changeset/polite-beds-hear.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@leafygreen-ui/logo': patch
----
-
-Export `SupportedColors` from index.ts
diff --git a/.changeset/purple-moose-suffer.md b/.changeset/purple-moose-suffer.md
deleted file mode 100644
index 90d95bb85d..0000000000
--- a/.changeset/purple-moose-suffer.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@leafygreen-ui/icon': patch
----
-
-Moves some `dependencies` to devDependencies (`@svgr/core`, `@types/meow`, `@types/xml2json`, `meow`)
diff --git a/.changeset/tough-boats-scream.md b/.changeset/tough-boats-scream.md
deleted file mode 100644
index 88306d00ec..0000000000
--- a/.changeset/tough-boats-scream.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@leafygreen-ui/icon': minor
----
-
-Adds `Mobile` icon and updates `NavCollapse` and `NavExpand` icons.

From f1e084da46e2a38a7a4427a9ed6a877577ade194 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 14:13:17 -0400
Subject: [PATCH 144/351] mv menuId declaration

---
 packages/date-picker/src/DatePicker/DatePicker.tsx         | 4 ----
 packages/date-picker/src/DatePicker/DatePicker.types.ts    | 3 +--
 .../src/DatePickerContext/DatePickerContext.tsx            | 5 ++++-
 .../src/DatePickerContext/DatePickerContext.types.ts       | 7 ++++---
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 3796421382..7e2351a7c4 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -1,7 +1,5 @@
 import React, { forwardRef } from 'react';
 
-import { useIdAllocator } from '@leafygreen-ui/hooks';
-
 import { DatePickerProvider } from '../DatePickerContext';
 import { contextPropNames } from '../DatePickerContext/DatePickerContext.utils';
 import { useControlledValue } from '../hooks/useControlledValue';
@@ -24,7 +22,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     fwdRef,
   ) => {
     const [contextProps, restProps] = pickAndOmit(props, contextPropNames);
-    const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
 
     const { value, setValue } = useControlledValue(
       valueProp,
@@ -36,7 +33,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       <DatePickerProvider
         value={{
           ...contextProps,
-          menuId,
         }}
       >
         <DatePickerComponent
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index 31a1b1b58b..f388a96dce 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -4,7 +4,6 @@ import { BaseDatePickerProps, DateType } from '../types';
 export interface DatePickerProps extends BaseDatePickerProps {
   /**
    * The selected date, given in UTC time
-   *
    */
   value?: DateType;
 
@@ -17,7 +16,7 @@ export interface DatePickerProps extends BaseDatePickerProps {
   onChange?: (value?: DateType) => void;
 
   /** The initial selected date. Ignored if `value` is provided */
-  initialValue?: Date;
+  initialValue?: DateType;
 
   /**
    * A callback fired when validation should run, based on our [form validation guidelines](https://www.mongodb.design/foundation/forms/#form-validation-error-handling).
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index abd117f893..10cc07ae59 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { createContext, PropsWithChildren, useContext } from 'react';
 
+import { useIdAllocator } from '@leafygreen-ui/hooks';
+
 import {
   DatePickerContextProps,
   DatePickerProviderProps,
@@ -22,11 +24,12 @@ export const DatePickerProvider = ({
 }: PropsWithChildren<{ value: DatePickerProviderProps }>) => {
   const [isOpen, setOpen] = useState<boolean>(initialOpen ?? false);
   const [isDirty, setIsDirty] = useState(false);
+  const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
   const contextValue = getContextProps(rest);
 
   return (
     <DatePickerContext.Provider
-      value={{ ...contextValue, isOpen, setOpen, isDirty, setIsDirty }}
+      value={{ ...contextValue, isOpen, setOpen, isDirty, setIsDirty, menuId }}
     >
       {children}
     </DatePickerContext.Provider>
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
index 900a8874a2..1c8f64f3ab 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
@@ -1,9 +1,7 @@
 import { BaseDatePickerProps } from '../types';
 
 /** The props expected to pass int the provider */
-export interface DatePickerProviderProps extends BaseDatePickerProps {
-  menuId: string;
-}
+export interface DatePickerProviderProps extends BaseDatePickerProps {}
 
 /**
  * The values in context
@@ -27,6 +25,9 @@ export interface DatePickerContextProps
    */
   formatParts?: Array<Intl.DateTimeFormatPart>;
 
+  /** a unique id for the menu element */
+  menuId: string;
+
   /** Whether the menu is open */
   isOpen: boolean;
 

From 6cf112dbb1fcf477d2009571e968e947dc545da2 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 14:40:00 -0400
Subject: [PATCH 145/351] init range picker

---
 .../src/DatePicker/DatePicker.stories.tsx     |   2 +-
 .../date-picker/src/DatePicker/DatePicker.tsx |   6 +-
 .../DatePickerInput.stories.tsx               |   2 +-
 .../DatePickerMenu/DatePickerMenu.stories.tsx |   2 +-
 .../src/DatePickerContext/index.ts            |   4 +
 .../DateRangeComponent.spec.tsx               |  11 ++
 .../DateRangeComponent.styles.ts              |   4 +
 .../DateRangeComponent/DateRangeComponent.tsx |  18 +++
 .../DateRangeComponent.types.ts               |   6 +
 .../DateRangeComponent/index.ts               |   3 +
 .../DateRangeInput/DateRangeInput.spec.tsx    |  11 ++
 .../DateRangeInput/DateRangeInput.styles.ts   |   4 +
 .../DateRangeInput/DateRangeInput.tsx         |  25 +++++
 .../DateRangeInput/DateRangeInput.types.ts    |   1 +
 .../DateRangePicker/DateRangeInput/index.ts   |   3 +
 .../DateRangePicker/DateRangePicker.spec.tsx  |  11 ++
 .../DateRangePicker.stories.tsx               | 103 ++++++++++++++++++
 .../DateRangePicker/DateRangePicker.styles.ts |   4 +
 .../src/DateRangePicker/DateRangePicker.tsx   |  47 ++++++++
 .../DateRangePicker/DateRangePicker.types.ts  |  50 +++++++++
 .../date-picker/src/DateRangePicker/index.ts  |   3 +
 21 files changed, 312 insertions(+), 8 deletions(-)
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.styles.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeComponent/index.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.styles.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeInput/index.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangePicker.styles.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/index.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index 02cdba15f5..a20c83c9f2 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -29,7 +29,7 @@ const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
 );
 
 const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
-  title: 'Components/DatePicker',
+  title: 'Components/DatePicker/Single',
   component: DatePicker,
   decorators: [ProviderWrapper],
   parameters: {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 7e2351a7c4..5f82d8ad1a 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -30,11 +30,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     );
 
     return (
-      <DatePickerProvider
-        value={{
-          ...contextProps,
-        }}
-      >
+      <DatePickerProvider value={contextProps}>
         <DatePickerComponent
           ref={fwdRef}
           value={value}
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index 315c9701c9..1af8f46921 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -27,7 +27,7 @@ const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
 );
 
 const meta: StoryMetaType<typeof DatePickerInput, DatePickerContextProps> = {
-  title: 'Components/DatePicker/DatePickerInput',
+  title: 'Components/DatePicker/Single/DatePickerInput',
   component: DatePickerInput,
   decorators: [ProviderWrapper],
   parameters: {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 28669b66c1..1fb89c411a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -52,7 +52,7 @@ const MenuDecorator = (Story: StoryFn, ctx: any) => {
 };
 
 const meta: StoryMetaType<typeof DatePickerMenu, DecoratorArgs> = {
-  title: 'Components/DatePicker/DatePickerMenu',
+  title: 'Components/DatePicker/Single/DatePickerMenu',
   component: DatePickerMenu,
   decorators: [MenuDecorator],
   parameters: {
diff --git a/packages/date-picker/src/DatePickerContext/index.ts b/packages/date-picker/src/DatePickerContext/index.ts
index 6c52124f34..5bb1570bc0 100644
--- a/packages/date-picker/src/DatePickerContext/index.ts
+++ b/packages/date-picker/src/DatePickerContext/index.ts
@@ -7,3 +7,7 @@ export {
   DatePickerContextProps,
   DatePickerProviderProps,
 } from './DatePickerContext.types';
+export {
+  contextPropNames,
+  defaultDatePickerContext,
+} from './DatePickerContext.utils';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx
new file mode 100644
index 0000000000..b971e53e28
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { DateRangeComponent } from '.';
+
+describe('packages/date-range-component', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.styles.ts
new file mode 100644
index 0000000000..928608f58d
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.styles.ts
@@ -0,0 +1,4 @@
+
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseStyles = css``;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
new file mode 100644
index 0000000000..8a0079c0fd
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
@@ -0,0 +1,18 @@
+import React, { forwardRef } from 'react';
+
+import { DateRangeInput } from '../DateRangeInput';
+
+import { DateRangeComponentProps } from './DateRangeComponent.types';
+
+export const DateRangeComponent = forwardRef<
+  HTMLDivElement,
+  DateRangeComponentProps
+>((props: DateRangeComponentProps, fwdRef) => {
+  return (
+    <>
+      <DateRangeInput />
+    </>
+  );
+});
+
+DateRangeComponent.displayName = 'DateRangeComponent';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
new file mode 100644
index 0000000000..c094905cb8
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
@@ -0,0 +1,6 @@
+import { DateRangeType } from '../DateRangePicker.types';
+
+export interface DateRangeComponentProps {
+  range?: DateRangeType;
+  setRange: (newVal?: DateRangeType | undefined) => void;
+}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeComponent/index.ts
new file mode 100644
index 0000000000..69aa951a1e
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/index.ts
@@ -0,0 +1,3 @@
+
+export  { DateRangeComponent } from './DateRangeComponent';
+export { DateRangeComponentProps } from './DateRangeComponent.types';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx
new file mode 100644
index 0000000000..28448eb5f3
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { DateRangeInput } from '.';
+
+describe('packages/date-range-input', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.styles.ts
new file mode 100644
index 0000000000..928608f58d
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.styles.ts
@@ -0,0 +1,4 @@
+
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseStyles = css``;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
new file mode 100644
index 0000000000..cb2092f503
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+
+import { DateFormField, DateInputBox } from '../../DateInput';
+import { useSegmentRefs } from '../../hooks/useSegmentRefs';
+
+import { DateRangeInputProps } from './DateRangeInput.types';
+
+const EN_DASH = '–';
+
+export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
+  (props: DateRangeInputProps) => {
+    const startSegmentRefs = useSegmentRefs();
+    const endSegmentRefs = useSegmentRefs();
+
+    return (
+      <DateFormField>
+        <DateInputBox segmentRefs={startSegmentRefs} />
+        <span>{EN_DASH}</span>
+        <DateInputBox segmentRefs={endSegmentRefs} />
+      </DateFormField>
+    );
+  },
+);
+
+DateRangeInput.displayName = 'DateRangeInput';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
new file mode 100644
index 0000000000..17ff6df75a
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
@@ -0,0 +1 @@
+export interface DateRangeInputProps {}
\ No newline at end of file
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/index.ts
new file mode 100644
index 0000000000..e04609a059
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/index.ts
@@ -0,0 +1,3 @@
+
+export  { DateRangeInput } from './DateRangeInput';
+export { DateRangeInputProps } from './DateRangeInput.types';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
new file mode 100644
index 0000000000..0497f91454
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { DateRangePicker } from '.';
+
+describe('packages/date-range-picker', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
new file mode 100644
index 0000000000..d3ebed632d
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
@@ -0,0 +1,103 @@
+/* eslint-disable react/prop-types */
+import React, { useState } from 'react';
+import { StoryFn } from '@storybook/react';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
+
+import { Month } from '../constants';
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../DatePickerContext';
+import { Locales, TimeZones } from '../testUtils';
+import { newUTC } from '../utils';
+
+import { DateRangePicker } from './DateRangePicker';
+import { DateRangeType } from './DateRangePicker.types';
+
+const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
+  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
+    <DatePickerProvider
+      value={{
+        ...ctx?.args,
+      }}
+    >
+      <Story />
+    </DatePickerProvider>
+  </LeafyGreenProvider>
+);
+
+const meta: StoryMetaType<typeof DateRangePicker, DatePickerContextProps> = {
+  title: 'Components/DatePicker/Range',
+  component: DateRangePicker,
+  decorators: [ProviderWrapper],
+  parameters: {
+    default: null,
+    controls: {
+      exclude: [
+        'handleValidation',
+        'initialValue',
+        'onChange',
+        'onSegmentChange',
+        'value',
+      ],
+    },
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        value: [newUTC(2023, Month.December, 26)],
+        dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
+        timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
+        disabled: [false, true],
+      },
+      decorator: ProviderWrapper,
+    },
+  },
+  args: {
+    dateFormat: 'en-US',
+    label: 'Pick a date',
+    min: newUTC(1996, Month.October, 14),
+    max: newUTC(2026, Month.October, 14),
+    size: Size.Default,
+    timeZone: 'America/New_York',
+  },
+  argTypes: {
+    baseFontSize: { control: 'select' },
+    dateFormat: { control: 'select', options: Locales },
+    description: { control: 'text' },
+    label: { control: 'text' },
+    min: { control: 'date' },
+    max: { control: 'date' },
+    size: { control: 'select' },
+    state: { control: 'select' },
+    timeZone: { control: 'select', options: TimeZones },
+  },
+};
+
+export default meta;
+
+export const Basic: StoryFn<typeof DateRangePicker> = props => {
+  const [start, setStart] = useState<Date | null | undefined>();
+  const [end, setEnd] = useState<Date | null | undefined>();
+
+  const setRange = ([newStart, newEnd]: DateRangeType) => {
+    setStart(newStart), setEnd(newEnd);
+  };
+
+  return (
+    <DateRangePicker
+      {...props}
+      start={start}
+      end={end}
+      onRangeChange={setRange}
+    />
+  );
+};
+
+export const Uncontrolled: StoryFn<typeof DateRangePicker> = props => {
+  return <DateRangePicker {...props} />;
+};
+
+export const Generated = () => {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangePicker.styles.ts
new file mode 100644
index 0000000000..928608f58d
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.styles.ts
@@ -0,0 +1,4 @@
+
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseStyles = css``;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
new file mode 100644
index 0000000000..2cf450ab3e
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+
+import { contextPropNames, DatePickerProvider } from '../DatePickerContext';
+import { useControlledValue } from '../hooks/useControlledValue';
+import { pickAndOmit } from '../utils';
+
+import { DateRangeComponent } from './DateRangeComponent';
+import { DateRangePickerProps } from './DateRangePicker.types';
+
+export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
+  (
+    {
+      start: startProp,
+      initialStart: initialStartProp,
+      end: endProp,
+      initialEnd: initialEndProp,
+      onRangeChange,
+      // handleValidation,
+      // onClear,
+      // onCancel,
+      // showQuickSelection,
+      ...props
+    }: DateRangePickerProps,
+    fwdRef,
+  ) => {
+    const [contextProps, restProps] = pickAndOmit(props, contextPropNames);
+
+    const { value: range, setValue: setRange } = useControlledValue(
+      [startProp || null, endProp || null],
+      onRangeChange,
+      [initialStartProp || null, initialEndProp || null],
+    );
+
+    return (
+      <DatePickerProvider value={contextProps}>
+        <DateRangeComponent
+          ref={fwdRef}
+          range={range}
+          setRange={setRange}
+          {...restProps}
+        />
+      </DatePickerProvider>
+    );
+  },
+);
+
+DateRangePicker.displayName = 'DateRangePicker';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts b/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts
new file mode 100644
index 0000000000..61b6e5be45
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts
@@ -0,0 +1,50 @@
+import { MouseEventHandler } from 'react';
+
+import { BaseDatePickerProps, DateType } from '../types';
+
+export type DateRangeType = [DateType, DateType];
+
+export interface DateRangePickerProps extends BaseDatePickerProps {
+  /** The selected start date */
+  start?: DateType;
+
+  /**  The selected end date */
+  end?: DateType;
+
+  /**
+   * Callback fired when the “Apply” button is clicked, or when either the start or end date changes. If either start or end is unset, then that value will be null.
+   *
+   * Parameter `range[0]` represents the start date,
+   * and `range[1]` represents the end date.
+   *
+   * Callback date arguments will be in Date objects in UTC time, or null
+   */
+  onRangeChange?: (range?: DateRangeType) => void;
+
+  /** The initial selected start date. Ignored if `start` is provided */
+  initialStart?: DateType;
+
+  /** The initial selected end date. Ignored if `end` is provided */
+  initialEnd?: DateType;
+
+  // TODO: onSegmentChange: () => {};
+
+  /**
+   * A callback fired when validation should run, based on our form validation guidelines.
+   * Use this callback to compute the correct `state` value.
+   *
+   * Parameter `range[0]` represents the start date, and `range[1]` represents the end date.
+   *
+   * Callback date arguments will be in Date objects in UTC time, or null
+   */
+  handleValidation?: (range: DateRangeType) => void;
+
+  /** Callback fired when the “clear” button is clicked. */
+  onClear?: MouseEventHandler;
+
+  /** Callback fired when the “cancel” button is clicked.  */
+  onCancel?: MouseEventHandler;
+
+  /** Whether or not to show the Quick Range Selection menu */
+  showQuickSelection?: boolean;
+}
diff --git a/packages/date-picker/src/DateRangePicker/index.ts b/packages/date-picker/src/DateRangePicker/index.ts
new file mode 100644
index 0000000000..ccb7711d7b
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/index.ts
@@ -0,0 +1,3 @@
+
+export  { DateRangePicker } from './DateRangePicker';
+export { DateRangePickerProps } from './DateRangePicker.types';

From 45da1b0ab1f6740beb0798dd76a5956b8a5eb14c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 14:55:25 -0400
Subject: [PATCH 146/351] separate date picker input/menu concerns

---
 .../DatePickerComponent.tsx                   | 93 ++-----------------
 .../DatePickerInput/DatePickerInput.tsx       | 58 +++++++++++-
 .../DatePickerInput/DatePickerInput.types.ts  |  9 +-
 .../DatePickerMenu/DatePickerMenu.tsx         | 13 ++-
 .../DatePickerMenu/DatePickerMenu.types.ts    |  2 +
 5 files changed, 75 insertions(+), 100 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index b6cdc19206..5787bec0a9 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -1,20 +1,11 @@
-import React, {
-  FocusEventHandler,
-  forwardRef,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  useRef,
-} from 'react';
+import React, { forwardRef, useRef } from 'react';
 
 import { useBackdropClick, useForwardedRef } from '@leafygreen-ui/hooks';
-import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../DatePickerContext';
-import { useSegmentRefs } from '../../hooks/useSegmentRefs';
 import { isSameUTCDay } from '../../utils';
 import { DatePickerInput, DatePickerInputProps } from '../DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
-import { focusRelevantSegment } from '../utils/focusRelevantSegment';
 
 import { DatePickerComponentProps } from './DatePickerComponent.types';
 
@@ -26,19 +17,10 @@ export const DatePickerComponent = forwardRef<
     { value, setValue, handleValidation, ...rest }: DatePickerComponentProps,
     fwdRef,
   ) => {
-    const {
-      disabled,
-      isOpen,
-      setOpen,
-      isDirty,
-      setIsDirty,
-      formatParts,
-      menuId,
-    } = useDatePickerContext();
-    const openMenu = () => setOpen(true);
+    const { isOpen, setOpen, isDirty, setIsDirty, menuId } =
+      useDatePickerContext();
     const closeMenu = () => setOpen(false);
 
-    const segmentRefs = useSegmentRefs();
     const formFieldRef = useForwardedRef(fwdRef, null);
     const menuRef = useRef<HTMLDivElement>(null);
 
@@ -49,8 +31,8 @@ export const DatePickerComponent = forwardRef<
 
     useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
 
-    /** Called when any input segment's value has changed */
-    const handleInputChange: DatePickerInputProps['setValue'] = (
+    /** Called when the input's Date value has changed */
+    const handleInputValueChange: DatePickerInputProps['setValue'] = (
       inputVal: Date | null,
     ) => {
       if (!isSameUTCDay(inputVal, value)) {
@@ -63,34 +45,6 @@ export const DatePickerComponent = forwardRef<
       }
     };
 
-    /** Called when the input, or any of its children, is clicked */
-    const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
-      if (!disabled) {
-        setOpen(true);
-
-        focusRelevantSegment({
-          target,
-          formatParts,
-          segmentRefs,
-        });
-      }
-    };
-
-    /** Called when any child of DatePickerInput is blurred */
-    const handleInputBlur: FocusEventHandler = e => {
-      const nextFocus = e.relatedTarget;
-
-      // If the next focus is _not_ on a segment
-      if (
-        !Object.values(segmentRefs)
-          .map(ref => ref.current)
-          .includes(nextFocus as HTMLInputElement)
-      ) {
-        setIsDirty(true);
-        handleValidation?.(value);
-      }
-    };
-
     /** Called when any calendar cell is clicked */
     const handleCalendarCellClick: DatePickerMenuProps['onCellClick'] = (
       cellValue: Date,
@@ -107,45 +61,13 @@ export const DatePickerComponent = forwardRef<
       }
     };
 
-    /** Called on any keydown within the input element */
-    const handleInputKeydown: KeyboardEventHandler = ({ key }) => {
-      switch (key) {
-        case keyMap.Enter:
-          handleValidation?.(value);
-          break;
-        case keyMap.Escape:
-          closeMenu();
-          handleValidation?.(value);
-          break;
-        default:
-          // any other keydown should open the menu
-          openMenu();
-          break;
-      }
-    };
-
-    /** Called on any keydown within the menu element */
-    const handleMenuKeydown: KeyboardEventHandler = ({ key }) => {
-      switch (key) {
-        case keyMap.Escape:
-          closeMenu();
-          handleValidation?.(value);
-          break;
-        default:
-          break;
-      }
-    };
-
     return (
       <>
         <DatePickerInput
           ref={formFieldRef}
           value={value}
-          setValue={handleInputChange}
-          onClick={handleInputClick}
-          onKeyDown={handleInputKeydown}
-          onBlur={handleInputBlur}
-          segmentRefs={segmentRefs}
+          setValue={handleInputValueChange}
+          handleValidation={handleValidation}
           {...rest}
         />
         <DatePickerMenu
@@ -154,7 +76,6 @@ export const DatePickerComponent = forwardRef<
           refEl={formFieldRef}
           value={value}
           onCellClick={handleCalendarCellClick}
-          onKeyDown={handleMenuKeydown}
         />
       </>
     );
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 2a4d493b43..6d72e9a177 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -1,11 +1,18 @@
-import React, { forwardRef, KeyboardEventHandler } from 'react';
+import React, {
+  FocusEventHandler,
+  forwardRef,
+  KeyboardEventHandler,
+  MouseEventHandler,
+} from 'react';
 
 import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
 
 import { DateFormField, DateInputBox } from '../../DateInput';
 import { useDatePickerContext } from '../../DatePickerContext';
+import { useSegmentRefs } from '../../hooks/useSegmentRefs';
 import { isZeroLike } from '../../utils';
+import { focusRelevantSegment } from '../utils/focusRelevantSegment';
 import { getRelativeSegment } from '../utils/getRelativeSegment';
 import { isElementInputSegment } from '../utils/isElementInputSegment';
 
@@ -17,21 +24,36 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       value,
       setValue,
       onClick,
-      segmentRefs,
       onKeyDown,
       onSegmentChange,
+      handleValidation,
       ...rest
     }: DatePickerInputProps,
     fwdRef,
   ) => {
-    const { label, timeZone, formatParts } = useDatePickerContext();
+    const { label, timeZone, formatParts, disabled, setOpen, setIsDirty } =
+      useDatePickerContext();
+    const segmentRefs = useSegmentRefs();
+
     const labelId = useIdAllocator({ prefix: 'lg-date-label' });
     const descriptionId = useIdAllocator({ prefix: 'lg-date-description' });
     const errorId = useIdAllocator({ prefix: 'lg-date-description' });
     const inputId = useIdAllocator({ prefix: 'lg-date-input' });
 
-    const handleInputClick = onClick;
+    /** Called when the input, or any of its children, is clicked */
+    const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
+      if (!disabled) {
+        setOpen(true);
+
+        focusRelevantSegment({
+          target,
+          formatParts,
+          segmentRefs,
+        });
+      }
+    };
 
+    /** Called on any keydown within the input element */
     const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
       const { target: _target, key } = e;
       const target = _target as HTMLElement;
@@ -100,14 +122,39 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           break;
         }
 
-        default:
+        case keyMap.Enter:
+          handleValidation?.(value);
+          break;
+
+        case keyMap.Escape:
+          setOpen(false);
+          handleValidation?.(value);
           break;
+
+        default:
+          // any other keydown should open the menu
+          setOpen(true);
       }
 
       // call any handler that was passed in
       onKeyDown?.(e);
     };
 
+    /** Called when any child of DatePickerInput is blurred */
+    const handleInputBlur: FocusEventHandler = e => {
+      const nextFocus = e.relatedTarget;
+
+      // If the next focus is _not_ on a segment
+      if (
+        !Object.values(segmentRefs)
+          .map(ref => ref.current)
+          .includes(nextFocus as HTMLInputElement)
+      ) {
+        setIsDirty(true);
+        handleValidation?.(value);
+      }
+    };
+
     return (
       <DateFormField
         label={label}
@@ -119,6 +166,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         ref={fwdRef}
         onInputClick={handleInputClick}
         onKeyDown={handleKeyDown}
+        onBlur={handleInputBlur}
         {...rest}
       >
         <DateInputBox
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index 29a5c1393e..408cbec601 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -1,10 +1,10 @@
 import { MouseEventHandler } from 'react';
 
-import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
+// import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 import { DateInputBoxProps } from '../../DateInput';
-import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
+// import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
 import { DatePickerProps } from '../DatePicker.types';
 
 export interface DatePickerInputProps
@@ -15,9 +15,4 @@ export interface DatePickerInputProps
    * Click handler
    */
   onClick?: MouseEventHandler;
-
-  segmentRefs: Record<
-    DateSegment,
-    ReturnType<DynamicRefGetter<HTMLInputElement>>
-  >;
 }
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index af5588d281..b3b998322c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -37,9 +37,12 @@ import { DatePickerMenuProps } from './DatePickerMenu.types';
 import { DatePickerMenuHeader } from './DatePickerMenuHeader';
 
 export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
-  ({ value, onKeyDown, onCellClick, ...rest }: DatePickerMenuProps, fwdRef) => {
+  (
+    { value, onCellClick, handleValidation, ...rest }: DatePickerMenuProps,
+    fwdRef,
+  ) => {
     const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
-    const { isInRange, isOpen } = useDatePickerContext();
+    const { isInRange, isOpen, setOpen } = useDatePickerContext();
 
     // TODO:
     // useDynamicRefs may overflow if a user navigates to too many months.
@@ -152,6 +155,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       }
     };
 
+    /** Called on any keydown within the menu element */
     const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {
       const { key } = e;
       const highlightStart = highlight || value || today;
@@ -178,6 +182,11 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
           break;
         }
 
+        case keyMap.Escape:
+          setOpen(false);
+          handleValidation?.(value);
+          break;
+
         default:
           break;
       }
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
index 867041f921..690c3fa879 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
@@ -3,9 +3,11 @@ import { PopoverProps } from '@leafygreen-ui/popover';
 import { PortalControlProps } from '@leafygreen-ui/popover';
 
 import { DateType } from '../../types';
+import { DatePickerProps } from '..';
 
 export type DatePickerMenuProps = PortalControlProps &
   Pick<PopoverProps, 'refEl'> &
+  Pick<DatePickerProps, 'handleValidation'> &
   HTMLElementProps<'div'> & {
     /** The value of the component, provided in UTC time */
     value?: DateType;

From 0edfac04f520ef2d0974629515c9dfe2a7525d9e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 15:08:25 -0400
Subject: [PATCH 147/351] first pass range form field

---
 .../DateInput/DateFormField/DateFormField.tsx |  7 +++-
 .../src/DatePicker/DatePicker.spec.tsx        | 14 ++++++++
 .../DatePickerInput/DatePickerInput.tsx       |  4 +--
 .../DatePickerContext.utils.ts                |  1 +
 .../DateRangeComponent.spec.tsx               |  9 ++---
 .../DateRangeInput/DateRangeInput.spec.tsx    |  9 ++---
 .../DateRangeInput/DateRangeInput.styles.ts   |  6 ++--
 .../DateRangeInput/DateRangeInput.tsx         | 15 +++++---
 .../DateRangePicker/DateRangePicker.spec.tsx  |  9 ++---
 .../DateRangePicker.stories.tsx               | 36 ++++++++++---------
 .../src/DateRangePicker/DateRangePicker.tsx   |  4 ---
 11 files changed, 66 insertions(+), 48 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
index 2584e94e6e..08329e3a49 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
@@ -47,6 +47,7 @@ export const DateFormField = React.forwardRef<
       errorId,
       onInputClick,
       onIconButtonClick,
+      className,
       ...rest
     }: DateFormFieldProps,
     fwdRef,
@@ -57,7 +58,11 @@ export const DateFormField = React.forwardRef<
 
     return (
       <div
-        className={cx(baseWrapperStyles, wrapperFontStyles[baseFontSize])}
+        className={cx(
+          baseWrapperStyles,
+          wrapperFontStyles[baseFontSize],
+          className,
+        )}
         ref={fwdRef}
         {...rest}
       >
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 5706e87795..fb642d36e3 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -26,6 +26,20 @@ describe('packages/date-picker', () => {
   describe('Rendering', () => {
     /// Note: Many rendering tests should be handled by Chromatic
 
+    test('renders label', () => {
+      const { getByText } = render(<DatePicker label="Label" />);
+      const label = getByText('Label');
+      expect(label).toBeInTheDocument();
+    });
+
+    test('renders description', () => {
+      const { getByText } = render(
+        <DatePicker label="Label" description="Description" />,
+      );
+      const description = getByText('Description');
+      expect(description).toBeInTheDocument();
+    });
+
     test('spreads rest to formField', () => {
       const { getByTestId } = render(
         <DatePicker label="Label" data-testid="lg-date-picker" />,
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 6d72e9a177..0408f497df 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -31,7 +31,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     }: DatePickerInputProps,
     fwdRef,
   ) => {
-    const { label, timeZone, formatParts, disabled, setOpen, setIsDirty } =
+    const { label, description, formatParts, disabled, setOpen, setIsDirty } =
       useDatePickerContext();
     const segmentRefs = useSegmentRefs();
 
@@ -158,7 +158,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     return (
       <DateFormField
         label={label}
-        description={timeZone}
+        description={description}
         inputId={inputId}
         labelId={labelId}
         descriptionId={descriptionId}
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
index cd7540a3aa..092e69b433 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
@@ -21,6 +21,7 @@ export const contextPropNames: Array<
   keyof DatePickerProviderProps & keyof BaseDatePickerProps
 > = [
   'label',
+  'description',
   'dateFormat',
   'timeZone',
   'min',
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx
index b971e53e28..a808d7c1f2 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx
@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { DateRangeComponent } from '.';
 
-describe('packages/date-range-component', () => {
-  test('condition', () => {
-
-  })
-})
+describe('packages/date-picker/date-range-picker/date-range-component', () => {
+  test('condition', () => {});
+});
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx
index 28448eb5f3..e7ab2b16ac 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx
@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { DateRangeInput } from '.';
 
-describe('packages/date-range-input', () => {
-  test('condition', () => {
-
-  })
-})
+describe('packages/date-picker/date-range-picker/date-range-input', () => {
+  test('condition', () => {});
+});
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.styles.ts
index 928608f58d..4382dcd017 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.styles.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.styles.ts
@@ -1,4 +1,6 @@
-
 import { css } from '@leafygreen-ui/emotion';
 
-export const baseStyles = css``;
+export const inputWrapperStyles = css`
+  display: flex;
+  gap: 12px;
+`;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index cb2092f503..571b6f11af 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -1,22 +1,29 @@
 import React, { forwardRef } from 'react';
 
 import { DateFormField, DateInputBox } from '../../DateInput';
+import { useDatePickerContext } from '../../DatePickerContext';
 import { useSegmentRefs } from '../../hooks/useSegmentRefs';
 
+import { inputWrapperStyles } from './DateRangeInput.styles';
 import { DateRangeInputProps } from './DateRangeInput.types';
 
 const EN_DASH = '–';
 
 export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
   (props: DateRangeInputProps) => {
+    const { label, description, formatParts, disabled, setOpen, setIsDirty } =
+      useDatePickerContext();
+
     const startSegmentRefs = useSegmentRefs();
     const endSegmentRefs = useSegmentRefs();
 
     return (
-      <DateFormField>
-        <DateInputBox segmentRefs={startSegmentRefs} />
-        <span>{EN_DASH}</span>
-        <DateInputBox segmentRefs={endSegmentRefs} />
+      <DateFormField label={label} description={description}>
+        <div className={inputWrapperStyles}>
+          <DateInputBox segmentRefs={startSegmentRefs} />
+          <span>{EN_DASH}</span>
+          <DateInputBox segmentRefs={endSegmentRefs} />
+        </div>
       </DateFormField>
     );
   },
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 0497f91454..fe1ed2e9b2 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { DateRangePicker } from '.';
 
-describe('packages/date-range-picker', () => {
-  test('condition', () => {
-
-  })
-})
+describe('packages/date-picker/date-range-picker', () => {
+  test('condition', () => {});
+});
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
index d3ebed632d..76a9c8171a 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
@@ -44,20 +44,21 @@ const meta: StoryMetaType<typeof DateRangePicker, DatePickerContextProps> = {
         'value',
       ],
     },
-    generate: {
-      combineArgs: {
-        darkMode: [false, true],
-        value: [newUTC(2023, Month.December, 26)],
-        dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
-        timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
-        disabled: [false, true],
-      },
-      decorator: ProviderWrapper,
-    },
+    // generate: {
+    //   combineArgs: {
+    //     darkMode: [false, true],
+    //     value: [newUTC(2023, Month.December, 26)],
+    //     dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
+    //     timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
+    //     disabled: [false, true],
+    //   },
+    //   decorator: ProviderWrapper,
+    // },
   },
   args: {
     dateFormat: 'en-US',
-    label: 'Pick a date',
+    label: 'Pick a Range',
+    description: 'Coordinated Universal Time',
     min: newUTC(1996, Month.October, 14),
     max: newUTC(2026, Month.October, 14),
     size: Size.Default,
@@ -82,8 +83,9 @@ export const Basic: StoryFn<typeof DateRangePicker> = props => {
   const [start, setStart] = useState<Date | null | undefined>();
   const [end, setEnd] = useState<Date | null | undefined>();
 
-  const setRange = ([newStart, newEnd]: DateRangeType) => {
-    setStart(newStart), setEnd(newEnd);
+  const setRange = (range?: DateRangeType) => {
+    setStart(range?.[0]);
+    setEnd(range?.[1]);
   };
 
   return (
@@ -96,8 +98,8 @@ export const Basic: StoryFn<typeof DateRangePicker> = props => {
   );
 };
 
-export const Uncontrolled: StoryFn<typeof DateRangePicker> = props => {
-  return <DateRangePicker {...props} />;
-};
+// export const Uncontrolled: StoryFn<typeof DateRangePicker> = props => {
+//   return <DateRangePicker {...props} />;
+// };
 
-export const Generated = () => {};
+// export const Generated = () => {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
index 2cf450ab3e..81dbd04319 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
@@ -15,10 +15,6 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
       end: endProp,
       initialEnd: initialEndProp,
       onRangeChange,
-      // handleValidation,
-      // onClear,
-      // onCancel,
-      // showQuickSelection,
       ...props
     }: DateRangePickerProps,
     fwdRef,

From 8f52782826c341a9eda644113548030a1f98be94 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 16:34:55 -0400
Subject: [PATCH 148/351] Creates form-field component

---
 .changeset/poor-houses-collect.md             |   5 +
 packages/form-field/README.md                 |  20 ++
 packages/form-field/package.json              |  40 +++
 packages/form-field/src/FormField.stories.tsx |  67 ++++
 .../src/FormField/FormField.spec.tsx          |  71 ++++
 .../src/FormField/FormField.styles.ts         | 307 ++++++++++++++++++
 .../form-field/src/FormField/FormField.tsx    | 121 +++++++
 .../src/FormField/FormField.types.ts          |  32 ++
 packages/form-field/src/FormField/index.ts    |   3 +
 packages/form-field/src/index.ts              |   1 +
 packages/form-field/tsconfig.json             |  40 +++
 11 files changed, 707 insertions(+)
 create mode 100644 .changeset/poor-houses-collect.md
 create mode 100644 packages/form-field/README.md
 create mode 100644 packages/form-field/package.json
 create mode 100644 packages/form-field/src/FormField.stories.tsx
 create mode 100644 packages/form-field/src/FormField/FormField.spec.tsx
 create mode 100644 packages/form-field/src/FormField/FormField.styles.ts
 create mode 100644 packages/form-field/src/FormField/FormField.tsx
 create mode 100644 packages/form-field/src/FormField/FormField.types.ts
 create mode 100644 packages/form-field/src/FormField/index.ts
 create mode 100644 packages/form-field/src/index.ts
 create mode 100644 packages/form-field/tsconfig.json

diff --git a/.changeset/poor-houses-collect.md b/.changeset/poor-houses-collect.md
new file mode 100644
index 0000000000..d35324eae0
--- /dev/null
+++ b/.changeset/poor-houses-collect.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/form-field': minor
+---
+
+Initial beta release of FormField
diff --git a/packages/form-field/README.md b/packages/form-field/README.md
new file mode 100644
index 0000000000..9224f03c7d
--- /dev/null
+++ b/packages/form-field/README.md
@@ -0,0 +1,20 @@
+
+# Form Field
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/form-field.svg)
+#### [View on MongoDB.design](https://www.mongodb.design/component/form-field/example/)
+
+## Installation
+
+### Yarn
+
+```shell
+yarn add @leafygreen-ui/form-field
+```
+
+### NPM
+
+```shell
+npm install @leafygreen-ui/form-field
+```
+
diff --git a/packages/form-field/package.json b/packages/form-field/package.json
new file mode 100644
index 0000000000..402d3314b6
--- /dev/null
+++ b/packages/form-field/package.json
@@ -0,0 +1,40 @@
+  
+{
+  "name": "@leafygreen-ui/form-field",
+  "version": "0.1.0",
+  "description": "LeafyGreen UI Kit Form Field",
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "lg build-package",
+    "tsc": "lg build-ts",
+    "docs": "lg build-tsdoc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/emotion": "^4.0.7",
+    "@leafygreen-ui/hooks": "^8.0.0",
+    "@leafygreen-ui/icon": "^11.24.0",
+    "@leafygreen-ui/lib": "^12.0.0",
+    "@leafygreen-ui/tokens": "^2.2.0",
+    "@leafygreen-ui/typography": "^17.0.1"
+  },
+  "peerDependencies": {
+    "@leafygreen-ui/leafygreen-provider": "^3.1.9"
+  },
+  "devDependencies": {
+    "@leafygreen-ui/icon-button": "^15.0.18"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/form-field",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/PD/summary"
+  }
+}
diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
new file mode 100644
index 0000000000..0381349294
--- /dev/null
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -0,0 +1,67 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+
+import { css } from '@leafygreen-ui/emotion';
+import Icon, { glyphs } from '@leafygreen-ui/icon';
+import IconButton from '@leafygreen-ui/icon-button';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
+
+import { FormFieldProps, FormFieldState } from './FormField/FormField.types';
+import { FormField } from '.';
+
+const meta: StoryMetaType<typeof FormField> = {
+  title: 'Components/FormField',
+  component: FormField,
+  parameters: {
+    default: 'Basic',
+    controls: {
+      exclude: ['inputWrapperProps', 'icon'],
+    },
+  },
+  args: {
+    label: 'Label',
+    description: 'Description',
+    notificationMessage: 'This is a notification',
+    size: Size.Default,
+    state: FormFieldState.Unset,
+    glyph: 'Beaker',
+  },
+  argTypes: {
+    label: { control: 'text' },
+    description: { control: 'text' },
+    notificationMessage: { control: 'text' },
+    size: { control: 'select' },
+    state: { control: 'select' },
+    glyph: { control: 'select', options: Object.keys(glyphs) },
+  },
+};
+
+export default meta;
+
+export const Basic: StoryFn<FormFieldProps & { glyph: string }> = props => (
+  <FormField {...props} icon={<Icon glyph={props.glyph} />}>
+    <input placeholder="placeholder" />
+  </FormField>
+);
+
+export const WithIconButton: StoryFn<
+  FormFieldProps & { glyph: string }
+> = props => (
+  <FormField
+    {...props}
+    inputWrapperProps={{
+      className: css`
+        padding-inline-end: 4px;
+      `,
+    }}
+    icon={
+      <IconButton aria-label="Icon">
+        <Icon glyph={props.glyph} />
+      </IconButton>
+    }
+  >
+    <input placeholder="placeholder" />
+  </FormField>
+);
diff --git a/packages/form-field/src/FormField/FormField.spec.tsx b/packages/form-field/src/FormField/FormField.spec.tsx
new file mode 100644
index 0000000000..9881eb36a3
--- /dev/null
+++ b/packages/form-field/src/FormField/FormField.spec.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { FormField } from '.';
+
+describe('packages/form-field', () => {
+  test('rest passed to outer element', () => {
+    const { getByTestId } = render(
+      <FormField data-testid="form-field">
+        <div />
+      </FormField>,
+    );
+    const formField = getByTestId('form-field');
+    expect(formField).toBeInTheDocument();
+  });
+
+  test('className passed to outer element', () => {
+    const { getByTestId } = render(
+      <FormField data-testid="form-field" className="form-field">
+        <div />
+      </FormField>,
+    );
+    const formField = getByTestId('form-field');
+    expect(formField.classList.contains('form-field')).toBeTruthy();
+  });
+
+  test('label has id & htmlFor', () => {
+    const { getByText } = render(
+      <FormField label="Label" data-testid="form-field">
+        <div />
+      </FormField>,
+    );
+    const label = getByText('Label');
+    expect(label).toHaveAttribute('id');
+    expect(label).toHaveAttribute('for');
+  });
+
+  test('description has id', () => {
+    const { getByText } = render(
+      <FormField
+        label="Label"
+        description="Description"
+        data-testid="form-field"
+      >
+        <div />
+      </FormField>,
+    );
+    const description = getByText('Description');
+    expect(description).toHaveAttribute('id');
+  });
+
+  test('input has id, labelledby & describedby', () => {
+    const { getByTestId } = render(
+      <FormField
+        label="Label"
+        description="Description"
+        data-testid="form-field"
+      >
+        <div data-testid="input" />
+      </FormField>,
+    );
+    const input = getByTestId('input');
+    expect(input).toHaveAttribute('id');
+    expect(input).toHaveAttribute('aria-labelledby');
+    expect(input).toHaveAttribute('aria-describedby');
+  });
+
+  test.todo('Error message appears when state changes');
+  test.todo('Error message has id');
+  test.todo('icon rendering');
+});
diff --git a/packages/form-field/src/FormField/FormField.styles.ts b/packages/form-field/src/FormField/FormField.styles.ts
new file mode 100644
index 0000000000..55552179d4
--- /dev/null
+++ b/packages/form-field/src/FormField/FormField.styles.ts
@@ -0,0 +1,307 @@
+import { css } from '@leafygreen-ui/emotion';
+import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+import {
+  BaseFontSize,
+  focusRing,
+  fontFamilies,
+  fontWeights,
+  hoverRing,
+  Size,
+  spacing,
+  transitionDuration,
+  typeScales,
+} from '@leafygreen-ui/tokens';
+
+import { FormFieldState } from './FormField.types';
+
+export const iconClassName = createUniqueClassName('calendar-button');
+
+export const formFieldFontStyles: Record<BaseFontSize, string> = {
+  [BaseFontSize.Body1]: css`
+    font-size: ${typeScales.body1.fontSize}px;
+    line-height: ${typeScales.body1.lineHeight}px;
+  `,
+  [BaseFontSize.Body2]: css`
+    font-size: ${typeScales.body2.fontSize}px;
+    line-height: 20px; // Hardcoding because it does not match body2 lineHeight
+  `,
+};
+
+export const textContainerStyle = css`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${spacing[1]}px;
+`;
+
+const autofillShadowOverride = (color: string) => `0 0 0 100px ${color} inset`;
+
+export const inputWrapperBaseStyles = css`
+  display: flex;
+  align-items: center;
+  gap: ${spacing[1]}px;
+  font-size: inherit;
+  line-height: inherit;
+  font-family: ${fontFamilies.default};
+  width: 100%;
+  height: 36px;
+  font-weight: ${fontWeights.regular};
+  border: 1px solid;
+  z-index: 1;
+  outline: none;
+  border-radius: 6px;
+  transition: ${transitionDuration.default}ms ease-in-out;
+  transition-property: border-color, box-shadow;
+  z-index: 0;
+
+  & input {
+    outline: none;
+    border: none;
+    font-family: ${fontFamilies.default};
+  }
+`;
+
+export const inputWrapperModeStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.black};
+    background: ${palette.white};
+    border: 1px solid ${palette.gray.base};
+
+    &:hover,
+    &:active {
+      &:not([aria-disabled='true']):not(:focus) {
+        box-shadow: ${hoverRing.light.gray};
+      }
+    }
+
+    & input:-webkit-autofill {
+      color: ${palette.black};
+      background: ${palette.white};
+      border: 1px solid ${palette.gray.base};
+      -webkit-text-fill-color: ${palette.black};
+      box-shadow: ${autofillShadowOverride(palette.white)};
+
+      &:not([aria-disabled='true']):focus {
+        box-shadow: ${autofillShadowOverride(palette.white)},
+          ${focusRing.light.input};
+        border-color: ${palette.white};
+      }
+
+      &:not([aria-disabled='true']):hover:not(:focus) {
+        box-shadow: ${autofillShadowOverride(palette.white)},
+          ${hoverRing.light.gray};
+      }
+    }
+
+    & input::placeholder {
+      color: ${palette.gray.light1};
+      font-weight: ${fontWeights.regular};
+    }
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.gray.light3};
+    background-color: ${palette.gray.dark4};
+    border: 1px solid ${palette.gray.base};
+
+    &:hover,
+    &:active {
+      &:not([aria-disabled='true']):not(:focus) {
+        box-shadow: ${hoverRing.dark.gray};
+      }
+    }
+
+    & input:-webkit-autofill {
+      border: 1px solid ${palette.gray.base};
+      color: ${palette.gray.light3};
+      background: ${palette.gray.dark4};
+      -webkit-text-fill-color: ${palette.gray.light3};
+      box-shadow: ${autofillShadowOverride(palette.gray.dark4)};
+
+      &:not([aria-disabled='true']):focus {
+        box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
+          ${focusRing.dark.input};
+        border-color: ${palette.blue.light1};
+      }
+
+      &:not([aria-disabled='true']):hover:not(:focus) {
+        box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
+          ${hoverRing.dark.gray};
+      }
+    }
+
+    & input::placeholder {
+      color: ${palette.gray.dark1};
+      font-weight: ${fontWeights.regular};
+    }
+  `,
+};
+
+const focusSelector = (styles: string) => css`
+  @supports selector(:has(a, b)) {
+    &:not([aria-disabled='true']):focus-within:not(
+        :has(.${iconClassName}:focus)
+      ) {
+      ${styles}
+    }
+  }
+
+  /* Fallback for when "has" is unsupported */
+  @supports not selector(:has(a, b)) {
+    &:not([aria-disabled='true']):focus-within {
+      ${styles}
+    }
+  }
+`;
+
+export const inputWrapperFocusStyles: Record<Theme, string> = {
+  [Theme.Light]: focusSelector(`
+     {
+      box-shadow: ${focusRing.light.input};
+      border-color: ${palette.white};
+    }
+  `),
+  [Theme.Dark]: focusSelector(`
+     {
+      box-shadow: ${focusRing.dark.input};
+      border-color: ${palette.gray.dark4};
+    }
+  `),
+};
+
+export const inputWrapperSizeStyles: Record<Size, string> = {
+  [Size.XSmall]: css`
+    height: 22px;
+    padding-inline: 10px;
+  `,
+  [Size.Small]: css`
+    height: 28px;
+    padding-inline: 10px;
+  `,
+  [Size.Default]: css`
+    height: 36px;
+    padding-inline: 12px;
+  `,
+  [Size.Large]: css`
+    height: 48px;
+    padding-inline: 16px;
+  `,
+};
+
+export const inputWrapperStateStyles: Record<
+  FormFieldState,
+  Record<Theme, string>
+> = {
+  [FormFieldState.Error]: {
+    [Theme.Light]: css`
+      &:not([aria-disabled='true']) {
+        border-color: ${palette.red.base};
+
+        &:hover,
+        &:active {
+          &:not([aria-disabled='true']):not(:focus) {
+            box-shadow: ${hoverRing.light.red};
+          }
+        }
+      }
+    `,
+    [Theme.Dark]: css`
+      &:not([aria-disabled='true']) {
+        border-color: ${palette.red.light1};
+
+        &:hover,
+        &:active {
+          &:not([aria-disabled='true']):not(:focus) {
+            box-shadow: ${hoverRing.dark.red};
+          }
+        }
+      }
+    `,
+  },
+  [FormFieldState.Unset]: {
+    [Theme.Light]: css``,
+    [Theme.Dark]: css``,
+  },
+  [FormFieldState.Valid]: {
+    // TODO:
+    [Theme.Light]: css``,
+    [Theme.Dark]: css``,
+  },
+};
+
+export const inputWrapperDisabledStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    cursor: not-allowed;
+    background-color: ${palette.gray.light2};
+    border-color: ${palette.gray.light1};
+
+    & input {
+      cursor: not-allowed;
+      pointer-events: none;
+      color: ${palette.gray.base};
+
+      &::placeholder {
+        color: inherit;
+      }
+
+      &:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+          appearance: none;
+          border: 1px solid ${palette.gray.base};
+          -webkit-text-fill-color: ${palette.gray.base};
+          box-shadow: ${autofillShadowOverride(palette.gray.light2)};
+        }
+      }
+    }
+  `,
+  [Theme.Dark]: css`
+    cursor: not-allowed;
+    color: ${palette.gray.dark2};
+    background-color: ${palette.gray.dark3};
+    border-color: ${palette.gray.dark2};
+
+    & input {
+      cursor: not-allowed;
+      pointer-events: none;
+      color: ${palette.gray.dark2};
+
+      &::placeholder {
+        color: inherit;
+      }
+
+      &:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+          appearance: none;
+          border: 1px solid ${palette.gray.dark1};
+          -webkit-text-fill-color: ${palette.gray.dark1};
+          box-shadow: ${autofillShadowOverride(palette.gray.dark2)};
+        }
+      }
+    }
+  `,
+};
+
+export const childrenWrapperStyles = css`
+  width: 100%;
+`;
+
+export const iconStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.gray.base};
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.gray.base};
+  `,
+};
+
+export const errorIconStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.red.base};
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.red.light1};
+  `,
+};
diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
new file mode 100644
index 0000000000..42e733bead
--- /dev/null
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -0,0 +1,121 @@
+import React, { forwardRef } from 'react';
+
+import { cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
+import Icon from '@leafygreen-ui/icon';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { Size } from '@leafygreen-ui/tokens';
+import {
+  Description,
+  Error,
+  Label,
+  useUpdatedBaseFontSize,
+} from '@leafygreen-ui/typography';
+
+import {
+  childrenWrapperStyles,
+  errorIconStyles,
+  formFieldFontStyles,
+  iconClassName,
+  iconStyles,
+  inputWrapperBaseStyles,
+  inputWrapperDisabledStyles,
+  inputWrapperFocusStyles,
+  inputWrapperModeStyles,
+  inputWrapperSizeStyles,
+  inputWrapperStateStyles,
+  textContainerStyle,
+} from './FormField.styles';
+import { FormFieldProps, FormFieldState } from './FormField.types';
+
+export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
+  (
+    {
+      label,
+      description,
+      children,
+      state = FormFieldState.Unset,
+      size,
+      disabled,
+      notificationMessage,
+      icon,
+      className,
+      inputWrapperProps,
+      ...rest
+    }: FormFieldProps,
+    fwdRef,
+  ) => {
+    const { theme } = useDarkMode();
+    const baseFontSize = useUpdatedBaseFontSize();
+
+    const labelId = useIdAllocator({ prefix: 'lg-form-field-label' });
+    const descriptionId = useIdAllocator({
+      prefix: 'lg-form-field-description',
+    });
+    const errorId = useIdAllocator({ prefix: 'lg-form-field-description' });
+    const inputId = useIdAllocator({ prefix: 'lg-form-field-input' });
+
+    return (
+      <div
+        className={cx(formFieldFontStyles[baseFontSize], className)}
+        ref={fwdRef}
+        {...rest}
+      >
+        <div className={textContainerStyle}>
+          {label && (
+            <Label htmlFor={inputId} id={labelId} disabled={disabled}>
+              {label}
+            </Label>
+          )}
+          {description && (
+            <Description id={descriptionId} disabled={disabled}>
+              {description}
+            </Description>
+          )}
+        </div>
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+        <div
+          {...inputWrapperProps}
+          aria-disabled={disabled}
+          tabIndex={-1}
+          className={cx(
+            inputWrapperBaseStyles,
+            inputWrapperModeStyles[theme],
+            inputWrapperFocusStyles[theme],
+            inputWrapperSizeStyles[size ?? Size.Default],
+            inputWrapperStateStyles[state][theme],
+            {
+              [inputWrapperDisabledStyles[theme]]: disabled,
+            },
+            inputWrapperProps?.className,
+          )}
+        >
+          <div className={childrenWrapperStyles}>
+            {React.cloneElement(children, {
+              id: inputId,
+              'aria-labelledby': labelId,
+              'aria-describedby': `${descriptionId} ${errorId}`,
+            })}
+          </div>
+          {state === FormFieldState.Error && (
+            <Icon glyph="Warning" className={errorIconStyles[theme]} />
+          )}
+          {icon &&
+            React.cloneElement(icon, {
+              className: cx(
+                iconClassName,
+                iconStyles[theme],
+                icon.props.className,
+              ),
+              disabled,
+            })}
+        </div>
+        {state === FormFieldState.Error && (
+          <Error id={errorId}>{notificationMessage}</Error>
+        )}
+      </div>
+    );
+  },
+);
+
+FormField.displayName = 'FormField';
diff --git a/packages/form-field/src/FormField/FormField.types.ts b/packages/form-field/src/FormField/FormField.types.ts
new file mode 100644
index 0000000000..21836e21bc
--- /dev/null
+++ b/packages/form-field/src/FormField/FormField.types.ts
@@ -0,0 +1,32 @@
+import { HTMLElementProps } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
+
+export const FormFieldState = {
+  Unset: 'unset',
+  Error: 'error',
+  Valid: 'valid',
+} as const;
+export type FormFieldState =
+  (typeof FormFieldState)[keyof typeof FormFieldState];
+
+interface FormFieldInputWrapperProps extends HTMLElementProps<'div'> {}
+
+interface FormFieldChildrenProps {
+  id: string;
+  'aria-labelledby': string;
+  [key: string]: any;
+}
+type FormFieldChildren = React.ReactElement<FormFieldChildrenProps>;
+
+export interface FormFieldProps
+  extends Omit<HTMLElementProps<'div'>, 'children'> {
+  children: FormFieldChildren;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  state?: FormFieldState;
+  size?: Size;
+  disabled?: boolean;
+  notificationMessage?: React.ReactNode;
+  icon?: React.ReactElement;
+  inputWrapperProps?: FormFieldInputWrapperProps;
+}
diff --git a/packages/form-field/src/FormField/index.ts b/packages/form-field/src/FormField/index.ts
new file mode 100644
index 0000000000..2ea29f1da6
--- /dev/null
+++ b/packages/form-field/src/FormField/index.ts
@@ -0,0 +1,3 @@
+
+export  { FormField } from './FormField';
+export { FormFieldProps } from './FormField.types';
diff --git a/packages/form-field/src/index.ts b/packages/form-field/src/index.ts
new file mode 100644
index 0000000000..347a3d1ce2
--- /dev/null
+++ b/packages/form-field/src/index.ts
@@ -0,0 +1 @@
+export { FormField, FormFieldProps } from './FormField';
\ No newline at end of file
diff --git a/packages/form-field/tsconfig.json b/packages/form-field/tsconfig.json
new file mode 100644
index 0000000000..3b211e674b
--- /dev/null
+++ b/packages/form-field/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "extends": "@lg-tools/build/config/package.tsconfig.json",
+   "compilerOptions": {
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "rootDir": "src",
+    "baseUrl": ".",
+    "paths": {
+      "@leafygreen-ui/icon/dist/*": ["../icon/src/generated/*"],
+      "@leafygreen-ui/*": ["../*/src"]
+    }
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": ["**/*.spec.*", "**/*.story.*"],
+  "references": [
+    {
+      "path": "../emotion"
+    },
+    {
+      "path": "../icon"
+    },
+    {
+      "path": "../icon-button"
+    },
+    {
+      "path": "../leafygreen-provider"
+    },
+    {
+      "path": "../lib"
+    },
+    {
+      "path": "../tokens"
+    },
+    {
+      "path": "../typography"
+    }
+  ]
+}

From 803015683d68ae2cfc9cbb59b5746a3aa74e26b9 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 16:35:25 -0400
Subject: [PATCH 149/351] Creates form-field component

---
 .changeset/poor-houses-collect.md             |   5 +
 packages/form-field/README.md                 |  20 ++
 packages/form-field/package.json              |  40 +++
 packages/form-field/src/FormField.stories.tsx |  67 ++++
 .../src/FormField/FormField.spec.tsx          |  71 ++++
 .../src/FormField/FormField.styles.ts         | 307 ++++++++++++++++++
 .../form-field/src/FormField/FormField.tsx    | 121 +++++++
 .../src/FormField/FormField.types.ts          |  32 ++
 packages/form-field/src/FormField/index.ts    |   3 +
 packages/form-field/src/index.ts              |   1 +
 packages/form-field/tsconfig.json             |  40 +++
 11 files changed, 707 insertions(+)
 create mode 100644 .changeset/poor-houses-collect.md
 create mode 100644 packages/form-field/README.md
 create mode 100644 packages/form-field/package.json
 create mode 100644 packages/form-field/src/FormField.stories.tsx
 create mode 100644 packages/form-field/src/FormField/FormField.spec.tsx
 create mode 100644 packages/form-field/src/FormField/FormField.styles.ts
 create mode 100644 packages/form-field/src/FormField/FormField.tsx
 create mode 100644 packages/form-field/src/FormField/FormField.types.ts
 create mode 100644 packages/form-field/src/FormField/index.ts
 create mode 100644 packages/form-field/src/index.ts
 create mode 100644 packages/form-field/tsconfig.json

diff --git a/.changeset/poor-houses-collect.md b/.changeset/poor-houses-collect.md
new file mode 100644
index 0000000000..d35324eae0
--- /dev/null
+++ b/.changeset/poor-houses-collect.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/form-field': minor
+---
+
+Initial beta release of FormField
diff --git a/packages/form-field/README.md b/packages/form-field/README.md
new file mode 100644
index 0000000000..9224f03c7d
--- /dev/null
+++ b/packages/form-field/README.md
@@ -0,0 +1,20 @@
+
+# Form Field
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/form-field.svg)
+#### [View on MongoDB.design](https://www.mongodb.design/component/form-field/example/)
+
+## Installation
+
+### Yarn
+
+```shell
+yarn add @leafygreen-ui/form-field
+```
+
+### NPM
+
+```shell
+npm install @leafygreen-ui/form-field
+```
+
diff --git a/packages/form-field/package.json b/packages/form-field/package.json
new file mode 100644
index 0000000000..402d3314b6
--- /dev/null
+++ b/packages/form-field/package.json
@@ -0,0 +1,40 @@
+  
+{
+  "name": "@leafygreen-ui/form-field",
+  "version": "0.1.0",
+  "description": "LeafyGreen UI Kit Form Field",
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "lg build-package",
+    "tsc": "lg build-ts",
+    "docs": "lg build-tsdoc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/emotion": "^4.0.7",
+    "@leafygreen-ui/hooks": "^8.0.0",
+    "@leafygreen-ui/icon": "^11.24.0",
+    "@leafygreen-ui/lib": "^12.0.0",
+    "@leafygreen-ui/tokens": "^2.2.0",
+    "@leafygreen-ui/typography": "^17.0.1"
+  },
+  "peerDependencies": {
+    "@leafygreen-ui/leafygreen-provider": "^3.1.9"
+  },
+  "devDependencies": {
+    "@leafygreen-ui/icon-button": "^15.0.18"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/form-field",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/PD/summary"
+  }
+}
diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
new file mode 100644
index 0000000000..0381349294
--- /dev/null
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -0,0 +1,67 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+
+import { css } from '@leafygreen-ui/emotion';
+import Icon, { glyphs } from '@leafygreen-ui/icon';
+import IconButton from '@leafygreen-ui/icon-button';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
+
+import { FormFieldProps, FormFieldState } from './FormField/FormField.types';
+import { FormField } from '.';
+
+const meta: StoryMetaType<typeof FormField> = {
+  title: 'Components/FormField',
+  component: FormField,
+  parameters: {
+    default: 'Basic',
+    controls: {
+      exclude: ['inputWrapperProps', 'icon'],
+    },
+  },
+  args: {
+    label: 'Label',
+    description: 'Description',
+    notificationMessage: 'This is a notification',
+    size: Size.Default,
+    state: FormFieldState.Unset,
+    glyph: 'Beaker',
+  },
+  argTypes: {
+    label: { control: 'text' },
+    description: { control: 'text' },
+    notificationMessage: { control: 'text' },
+    size: { control: 'select' },
+    state: { control: 'select' },
+    glyph: { control: 'select', options: Object.keys(glyphs) },
+  },
+};
+
+export default meta;
+
+export const Basic: StoryFn<FormFieldProps & { glyph: string }> = props => (
+  <FormField {...props} icon={<Icon glyph={props.glyph} />}>
+    <input placeholder="placeholder" />
+  </FormField>
+);
+
+export const WithIconButton: StoryFn<
+  FormFieldProps & { glyph: string }
+> = props => (
+  <FormField
+    {...props}
+    inputWrapperProps={{
+      className: css`
+        padding-inline-end: 4px;
+      `,
+    }}
+    icon={
+      <IconButton aria-label="Icon">
+        <Icon glyph={props.glyph} />
+      </IconButton>
+    }
+  >
+    <input placeholder="placeholder" />
+  </FormField>
+);
diff --git a/packages/form-field/src/FormField/FormField.spec.tsx b/packages/form-field/src/FormField/FormField.spec.tsx
new file mode 100644
index 0000000000..9881eb36a3
--- /dev/null
+++ b/packages/form-field/src/FormField/FormField.spec.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { FormField } from '.';
+
+describe('packages/form-field', () => {
+  test('rest passed to outer element', () => {
+    const { getByTestId } = render(
+      <FormField data-testid="form-field">
+        <div />
+      </FormField>,
+    );
+    const formField = getByTestId('form-field');
+    expect(formField).toBeInTheDocument();
+  });
+
+  test('className passed to outer element', () => {
+    const { getByTestId } = render(
+      <FormField data-testid="form-field" className="form-field">
+        <div />
+      </FormField>,
+    );
+    const formField = getByTestId('form-field');
+    expect(formField.classList.contains('form-field')).toBeTruthy();
+  });
+
+  test('label has id & htmlFor', () => {
+    const { getByText } = render(
+      <FormField label="Label" data-testid="form-field">
+        <div />
+      </FormField>,
+    );
+    const label = getByText('Label');
+    expect(label).toHaveAttribute('id');
+    expect(label).toHaveAttribute('for');
+  });
+
+  test('description has id', () => {
+    const { getByText } = render(
+      <FormField
+        label="Label"
+        description="Description"
+        data-testid="form-field"
+      >
+        <div />
+      </FormField>,
+    );
+    const description = getByText('Description');
+    expect(description).toHaveAttribute('id');
+  });
+
+  test('input has id, labelledby & describedby', () => {
+    const { getByTestId } = render(
+      <FormField
+        label="Label"
+        description="Description"
+        data-testid="form-field"
+      >
+        <div data-testid="input" />
+      </FormField>,
+    );
+    const input = getByTestId('input');
+    expect(input).toHaveAttribute('id');
+    expect(input).toHaveAttribute('aria-labelledby');
+    expect(input).toHaveAttribute('aria-describedby');
+  });
+
+  test.todo('Error message appears when state changes');
+  test.todo('Error message has id');
+  test.todo('icon rendering');
+});
diff --git a/packages/form-field/src/FormField/FormField.styles.ts b/packages/form-field/src/FormField/FormField.styles.ts
new file mode 100644
index 0000000000..55552179d4
--- /dev/null
+++ b/packages/form-field/src/FormField/FormField.styles.ts
@@ -0,0 +1,307 @@
+import { css } from '@leafygreen-ui/emotion';
+import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+import {
+  BaseFontSize,
+  focusRing,
+  fontFamilies,
+  fontWeights,
+  hoverRing,
+  Size,
+  spacing,
+  transitionDuration,
+  typeScales,
+} from '@leafygreen-ui/tokens';
+
+import { FormFieldState } from './FormField.types';
+
+export const iconClassName = createUniqueClassName('calendar-button');
+
+export const formFieldFontStyles: Record<BaseFontSize, string> = {
+  [BaseFontSize.Body1]: css`
+    font-size: ${typeScales.body1.fontSize}px;
+    line-height: ${typeScales.body1.lineHeight}px;
+  `,
+  [BaseFontSize.Body2]: css`
+    font-size: ${typeScales.body2.fontSize}px;
+    line-height: 20px; // Hardcoding because it does not match body2 lineHeight
+  `,
+};
+
+export const textContainerStyle = css`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${spacing[1]}px;
+`;
+
+const autofillShadowOverride = (color: string) => `0 0 0 100px ${color} inset`;
+
+export const inputWrapperBaseStyles = css`
+  display: flex;
+  align-items: center;
+  gap: ${spacing[1]}px;
+  font-size: inherit;
+  line-height: inherit;
+  font-family: ${fontFamilies.default};
+  width: 100%;
+  height: 36px;
+  font-weight: ${fontWeights.regular};
+  border: 1px solid;
+  z-index: 1;
+  outline: none;
+  border-radius: 6px;
+  transition: ${transitionDuration.default}ms ease-in-out;
+  transition-property: border-color, box-shadow;
+  z-index: 0;
+
+  & input {
+    outline: none;
+    border: none;
+    font-family: ${fontFamilies.default};
+  }
+`;
+
+export const inputWrapperModeStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.black};
+    background: ${palette.white};
+    border: 1px solid ${palette.gray.base};
+
+    &:hover,
+    &:active {
+      &:not([aria-disabled='true']):not(:focus) {
+        box-shadow: ${hoverRing.light.gray};
+      }
+    }
+
+    & input:-webkit-autofill {
+      color: ${palette.black};
+      background: ${palette.white};
+      border: 1px solid ${palette.gray.base};
+      -webkit-text-fill-color: ${palette.black};
+      box-shadow: ${autofillShadowOverride(palette.white)};
+
+      &:not([aria-disabled='true']):focus {
+        box-shadow: ${autofillShadowOverride(palette.white)},
+          ${focusRing.light.input};
+        border-color: ${palette.white};
+      }
+
+      &:not([aria-disabled='true']):hover:not(:focus) {
+        box-shadow: ${autofillShadowOverride(palette.white)},
+          ${hoverRing.light.gray};
+      }
+    }
+
+    & input::placeholder {
+      color: ${palette.gray.light1};
+      font-weight: ${fontWeights.regular};
+    }
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.gray.light3};
+    background-color: ${palette.gray.dark4};
+    border: 1px solid ${palette.gray.base};
+
+    &:hover,
+    &:active {
+      &:not([aria-disabled='true']):not(:focus) {
+        box-shadow: ${hoverRing.dark.gray};
+      }
+    }
+
+    & input:-webkit-autofill {
+      border: 1px solid ${palette.gray.base};
+      color: ${palette.gray.light3};
+      background: ${palette.gray.dark4};
+      -webkit-text-fill-color: ${palette.gray.light3};
+      box-shadow: ${autofillShadowOverride(palette.gray.dark4)};
+
+      &:not([aria-disabled='true']):focus {
+        box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
+          ${focusRing.dark.input};
+        border-color: ${palette.blue.light1};
+      }
+
+      &:not([aria-disabled='true']):hover:not(:focus) {
+        box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
+          ${hoverRing.dark.gray};
+      }
+    }
+
+    & input::placeholder {
+      color: ${palette.gray.dark1};
+      font-weight: ${fontWeights.regular};
+    }
+  `,
+};
+
+const focusSelector = (styles: string) => css`
+  @supports selector(:has(a, b)) {
+    &:not([aria-disabled='true']):focus-within:not(
+        :has(.${iconClassName}:focus)
+      ) {
+      ${styles}
+    }
+  }
+
+  /* Fallback for when "has" is unsupported */
+  @supports not selector(:has(a, b)) {
+    &:not([aria-disabled='true']):focus-within {
+      ${styles}
+    }
+  }
+`;
+
+export const inputWrapperFocusStyles: Record<Theme, string> = {
+  [Theme.Light]: focusSelector(`
+     {
+      box-shadow: ${focusRing.light.input};
+      border-color: ${palette.white};
+    }
+  `),
+  [Theme.Dark]: focusSelector(`
+     {
+      box-shadow: ${focusRing.dark.input};
+      border-color: ${palette.gray.dark4};
+    }
+  `),
+};
+
+export const inputWrapperSizeStyles: Record<Size, string> = {
+  [Size.XSmall]: css`
+    height: 22px;
+    padding-inline: 10px;
+  `,
+  [Size.Small]: css`
+    height: 28px;
+    padding-inline: 10px;
+  `,
+  [Size.Default]: css`
+    height: 36px;
+    padding-inline: 12px;
+  `,
+  [Size.Large]: css`
+    height: 48px;
+    padding-inline: 16px;
+  `,
+};
+
+export const inputWrapperStateStyles: Record<
+  FormFieldState,
+  Record<Theme, string>
+> = {
+  [FormFieldState.Error]: {
+    [Theme.Light]: css`
+      &:not([aria-disabled='true']) {
+        border-color: ${palette.red.base};
+
+        &:hover,
+        &:active {
+          &:not([aria-disabled='true']):not(:focus) {
+            box-shadow: ${hoverRing.light.red};
+          }
+        }
+      }
+    `,
+    [Theme.Dark]: css`
+      &:not([aria-disabled='true']) {
+        border-color: ${palette.red.light1};
+
+        &:hover,
+        &:active {
+          &:not([aria-disabled='true']):not(:focus) {
+            box-shadow: ${hoverRing.dark.red};
+          }
+        }
+      }
+    `,
+  },
+  [FormFieldState.Unset]: {
+    [Theme.Light]: css``,
+    [Theme.Dark]: css``,
+  },
+  [FormFieldState.Valid]: {
+    // TODO:
+    [Theme.Light]: css``,
+    [Theme.Dark]: css``,
+  },
+};
+
+export const inputWrapperDisabledStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    cursor: not-allowed;
+    background-color: ${palette.gray.light2};
+    border-color: ${palette.gray.light1};
+
+    & input {
+      cursor: not-allowed;
+      pointer-events: none;
+      color: ${palette.gray.base};
+
+      &::placeholder {
+        color: inherit;
+      }
+
+      &:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+          appearance: none;
+          border: 1px solid ${palette.gray.base};
+          -webkit-text-fill-color: ${palette.gray.base};
+          box-shadow: ${autofillShadowOverride(palette.gray.light2)};
+        }
+      }
+    }
+  `,
+  [Theme.Dark]: css`
+    cursor: not-allowed;
+    color: ${palette.gray.dark2};
+    background-color: ${palette.gray.dark3};
+    border-color: ${palette.gray.dark2};
+
+    & input {
+      cursor: not-allowed;
+      pointer-events: none;
+      color: ${palette.gray.dark2};
+
+      &::placeholder {
+        color: inherit;
+      }
+
+      &:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+          appearance: none;
+          border: 1px solid ${palette.gray.dark1};
+          -webkit-text-fill-color: ${palette.gray.dark1};
+          box-shadow: ${autofillShadowOverride(palette.gray.dark2)};
+        }
+      }
+    }
+  `,
+};
+
+export const childrenWrapperStyles = css`
+  width: 100%;
+`;
+
+export const iconStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.gray.base};
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.gray.base};
+  `,
+};
+
+export const errorIconStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.red.base};
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.red.light1};
+  `,
+};
diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
new file mode 100644
index 0000000000..42e733bead
--- /dev/null
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -0,0 +1,121 @@
+import React, { forwardRef } from 'react';
+
+import { cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
+import Icon from '@leafygreen-ui/icon';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { Size } from '@leafygreen-ui/tokens';
+import {
+  Description,
+  Error,
+  Label,
+  useUpdatedBaseFontSize,
+} from '@leafygreen-ui/typography';
+
+import {
+  childrenWrapperStyles,
+  errorIconStyles,
+  formFieldFontStyles,
+  iconClassName,
+  iconStyles,
+  inputWrapperBaseStyles,
+  inputWrapperDisabledStyles,
+  inputWrapperFocusStyles,
+  inputWrapperModeStyles,
+  inputWrapperSizeStyles,
+  inputWrapperStateStyles,
+  textContainerStyle,
+} from './FormField.styles';
+import { FormFieldProps, FormFieldState } from './FormField.types';
+
+export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
+  (
+    {
+      label,
+      description,
+      children,
+      state = FormFieldState.Unset,
+      size,
+      disabled,
+      notificationMessage,
+      icon,
+      className,
+      inputWrapperProps,
+      ...rest
+    }: FormFieldProps,
+    fwdRef,
+  ) => {
+    const { theme } = useDarkMode();
+    const baseFontSize = useUpdatedBaseFontSize();
+
+    const labelId = useIdAllocator({ prefix: 'lg-form-field-label' });
+    const descriptionId = useIdAllocator({
+      prefix: 'lg-form-field-description',
+    });
+    const errorId = useIdAllocator({ prefix: 'lg-form-field-description' });
+    const inputId = useIdAllocator({ prefix: 'lg-form-field-input' });
+
+    return (
+      <div
+        className={cx(formFieldFontStyles[baseFontSize], className)}
+        ref={fwdRef}
+        {...rest}
+      >
+        <div className={textContainerStyle}>
+          {label && (
+            <Label htmlFor={inputId} id={labelId} disabled={disabled}>
+              {label}
+            </Label>
+          )}
+          {description && (
+            <Description id={descriptionId} disabled={disabled}>
+              {description}
+            </Description>
+          )}
+        </div>
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+        <div
+          {...inputWrapperProps}
+          aria-disabled={disabled}
+          tabIndex={-1}
+          className={cx(
+            inputWrapperBaseStyles,
+            inputWrapperModeStyles[theme],
+            inputWrapperFocusStyles[theme],
+            inputWrapperSizeStyles[size ?? Size.Default],
+            inputWrapperStateStyles[state][theme],
+            {
+              [inputWrapperDisabledStyles[theme]]: disabled,
+            },
+            inputWrapperProps?.className,
+          )}
+        >
+          <div className={childrenWrapperStyles}>
+            {React.cloneElement(children, {
+              id: inputId,
+              'aria-labelledby': labelId,
+              'aria-describedby': `${descriptionId} ${errorId}`,
+            })}
+          </div>
+          {state === FormFieldState.Error && (
+            <Icon glyph="Warning" className={errorIconStyles[theme]} />
+          )}
+          {icon &&
+            React.cloneElement(icon, {
+              className: cx(
+                iconClassName,
+                iconStyles[theme],
+                icon.props.className,
+              ),
+              disabled,
+            })}
+        </div>
+        {state === FormFieldState.Error && (
+          <Error id={errorId}>{notificationMessage}</Error>
+        )}
+      </div>
+    );
+  },
+);
+
+FormField.displayName = 'FormField';
diff --git a/packages/form-field/src/FormField/FormField.types.ts b/packages/form-field/src/FormField/FormField.types.ts
new file mode 100644
index 0000000000..21836e21bc
--- /dev/null
+++ b/packages/form-field/src/FormField/FormField.types.ts
@@ -0,0 +1,32 @@
+import { HTMLElementProps } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
+
+export const FormFieldState = {
+  Unset: 'unset',
+  Error: 'error',
+  Valid: 'valid',
+} as const;
+export type FormFieldState =
+  (typeof FormFieldState)[keyof typeof FormFieldState];
+
+interface FormFieldInputWrapperProps extends HTMLElementProps<'div'> {}
+
+interface FormFieldChildrenProps {
+  id: string;
+  'aria-labelledby': string;
+  [key: string]: any;
+}
+type FormFieldChildren = React.ReactElement<FormFieldChildrenProps>;
+
+export interface FormFieldProps
+  extends Omit<HTMLElementProps<'div'>, 'children'> {
+  children: FormFieldChildren;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  state?: FormFieldState;
+  size?: Size;
+  disabled?: boolean;
+  notificationMessage?: React.ReactNode;
+  icon?: React.ReactElement;
+  inputWrapperProps?: FormFieldInputWrapperProps;
+}
diff --git a/packages/form-field/src/FormField/index.ts b/packages/form-field/src/FormField/index.ts
new file mode 100644
index 0000000000..2ea29f1da6
--- /dev/null
+++ b/packages/form-field/src/FormField/index.ts
@@ -0,0 +1,3 @@
+
+export  { FormField } from './FormField';
+export { FormFieldProps } from './FormField.types';
diff --git a/packages/form-field/src/index.ts b/packages/form-field/src/index.ts
new file mode 100644
index 0000000000..347a3d1ce2
--- /dev/null
+++ b/packages/form-field/src/index.ts
@@ -0,0 +1 @@
+export { FormField, FormFieldProps } from './FormField';
\ No newline at end of file
diff --git a/packages/form-field/tsconfig.json b/packages/form-field/tsconfig.json
new file mode 100644
index 0000000000..3b211e674b
--- /dev/null
+++ b/packages/form-field/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "extends": "@lg-tools/build/config/package.tsconfig.json",
+   "compilerOptions": {
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "rootDir": "src",
+    "baseUrl": ".",
+    "paths": {
+      "@leafygreen-ui/icon/dist/*": ["../icon/src/generated/*"],
+      "@leafygreen-ui/*": ["../*/src"]
+    }
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": ["**/*.spec.*", "**/*.story.*"],
+  "references": [
+    {
+      "path": "../emotion"
+    },
+    {
+      "path": "../icon"
+    },
+    {
+      "path": "../icon-button"
+    },
+    {
+      "path": "../leafygreen-provider"
+    },
+    {
+      "path": "../lib"
+    },
+    {
+      "path": "../tokens"
+    },
+    {
+      "path": "../typography"
+    }
+  ]
+}

From e32f1e4d8e361993395b931ff3086e73bd156ba6 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 17:00:58 -0400
Subject: [PATCH 150/351] fixes types

---
 packages/form-field/src/FormField/FormField.tsx      |  3 +--
 packages/form-field/src/FormField/FormField.types.ts |  5 +++--
 packages/form-field/src/FormField/index.ts           | 10 +++++++---
 packages/form-field/src/index.ts                     |  8 +++++++-
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
index 42e733bead..3f72df96f2 100644
--- a/packages/form-field/src/FormField/FormField.tsx
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -26,7 +26,7 @@ import {
   inputWrapperStateStyles,
   textContainerStyle,
 } from './FormField.styles';
-import { FormFieldProps, FormFieldState } from './FormField.types';
+import { type FormFieldProps, FormFieldState } from './FormField.types';
 
 export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
   (
@@ -77,7 +77,6 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
         <div
           {...inputWrapperProps}
           aria-disabled={disabled}
-          tabIndex={-1}
           className={cx(
             inputWrapperBaseStyles,
             inputWrapperModeStyles[theme],
diff --git a/packages/form-field/src/FormField/FormField.types.ts b/packages/form-field/src/FormField/FormField.types.ts
index 21836e21bc..f195ef5174 100644
--- a/packages/form-field/src/FormField/FormField.types.ts
+++ b/packages/form-field/src/FormField/FormField.types.ts
@@ -9,13 +9,14 @@ export const FormFieldState = {
 export type FormFieldState =
   (typeof FormFieldState)[keyof typeof FormFieldState];
 
-interface FormFieldInputWrapperProps extends HTMLElementProps<'div'> {}
+export interface FormFieldInputWrapperProps extends HTMLElementProps<'div'> {}
 
-interface FormFieldChildrenProps {
+export interface FormFieldChildrenProps {
   id: string;
   'aria-labelledby': string;
   [key: string]: any;
 }
+
 type FormFieldChildren = React.ReactElement<FormFieldChildrenProps>;
 
 export interface FormFieldProps
diff --git a/packages/form-field/src/FormField/index.ts b/packages/form-field/src/FormField/index.ts
index 2ea29f1da6..52bc63ec63 100644
--- a/packages/form-field/src/FormField/index.ts
+++ b/packages/form-field/src/FormField/index.ts
@@ -1,3 +1,7 @@
-
-export  { FormField } from './FormField';
-export { FormFieldProps } from './FormField.types';
+export { FormField } from './FormField';
+export {
+  type FormFieldChildrenProps,
+  type FormFieldInputWrapperProps,
+  type FormFieldProps,
+  FormFieldState,
+} from './FormField.types';
diff --git a/packages/form-field/src/index.ts b/packages/form-field/src/index.ts
index 347a3d1ce2..e4b6ffc72a 100644
--- a/packages/form-field/src/index.ts
+++ b/packages/form-field/src/index.ts
@@ -1 +1,7 @@
-export { FormField, FormFieldProps } from './FormField';
\ No newline at end of file
+export {
+  FormField,
+  type FormFieldChildrenProps,
+  type FormFieldInputWrapperProps,
+  type FormFieldProps,
+  FormFieldState,
+} from './FormField';

From 0bdd4a626e95bff8e822323dc578ed7da9400781 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 17:01:31 -0400
Subject: [PATCH 151/351] lint

---
 packages/form-field/README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/form-field/README.md b/packages/form-field/README.md
index 9224f03c7d..99c29bfaad 100644
--- a/packages/form-field/README.md
+++ b/packages/form-field/README.md
@@ -1,7 +1,7 @@
-
 # Form Field
 
 ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/form-field.svg)
+
 #### [View on MongoDB.design](https://www.mongodb.design/component/form-field/example/)
 
 ## Installation
@@ -17,4 +17,3 @@ yarn add @leafygreen-ui/form-field
 ```shell
 npm install @leafygreen-ui/form-field
 ```
-

From 948c91b0036c306a585029882dc8d42c51c9f321 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 17:10:01 -0400
Subject: [PATCH 152/351] rename prop to errorMessage

---
 packages/form-field/src/FormField/FormField.tsx      | 4 ++--
 packages/form-field/src/FormField/FormField.types.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
index 3f72df96f2..acc7df972b 100644
--- a/packages/form-field/src/FormField/FormField.tsx
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -37,7 +37,7 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
       state = FormFieldState.Unset,
       size,
       disabled,
-      notificationMessage,
+      errorMessage,
       icon,
       className,
       inputWrapperProps,
@@ -110,7 +110,7 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
             })}
         </div>
         {state === FormFieldState.Error && (
-          <Error id={errorId}>{notificationMessage}</Error>
+          <Error id={errorId}>{errorMessage}</Error>
         )}
       </div>
     );
diff --git a/packages/form-field/src/FormField/FormField.types.ts b/packages/form-field/src/FormField/FormField.types.ts
index f195ef5174..4dbb1615db 100644
--- a/packages/form-field/src/FormField/FormField.types.ts
+++ b/packages/form-field/src/FormField/FormField.types.ts
@@ -27,7 +27,7 @@ export interface FormFieldProps
   state?: FormFieldState;
   size?: Size;
   disabled?: boolean;
-  notificationMessage?: React.ReactNode;
+  errorMessage?: React.ReactNode;
   icon?: React.ReactElement;
   inputWrapperProps?: FormFieldInputWrapperProps;
 }

From 2103ff1ae0f8b76071c39988075699136bd2ce64 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 17:55:44 -0400
Subject: [PATCH 153/351] adds tests, updates aria attributes, adds stories

---
 packages/form-field/src/FormField.stories.tsx |  34 ++-
 .../src/FormField/FormField.spec.tsx          | 195 +++++++++++++++++-
 .../form-field/src/FormField/FormField.tsx    |  81 +++-----
 .../src/FormField/FormField.types.ts          |  43 ++--
 .../FormFieldInputWrapper.spec.tsx            |  11 +
 .../FormFieldInputWrapper.styles.ts           |   4 +
 .../FormFieldInputWrapper.tsx                 |  83 ++++++++
 .../FormFieldInputWrapper.types.ts            |  13 ++
 .../FormField/FormFieldInputWrapper/index.ts  |   2 +
 9 files changed, 382 insertions(+), 84 deletions(-)
 create mode 100644 packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.spec.tsx
 create mode 100644 packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.styles.ts
 create mode 100644 packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx
 create mode 100644 packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.types.ts
 create mode 100644 packages/form-field/src/FormField/FormFieldInputWrapper/index.ts

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index 0381349294..01bb41ec6d 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -5,6 +5,7 @@ import { StoryFn } from '@storybook/react';
 import { css } from '@leafygreen-ui/emotion';
 import Icon, { glyphs } from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 
@@ -19,11 +20,27 @@ const meta: StoryMetaType<typeof FormField> = {
     controls: {
       exclude: ['inputWrapperProps', 'icon'],
     },
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        description: [undefined, 'Description'],
+        icon: [undefined, <Icon glyph="Cloud" key="" />],
+        size: Object.values(Size),
+        state: Object.values(FormFieldState),
+        disabled: [false, true],
+      },
+      excludeCombinations: [{}],
+      decorator: (Instance, ctx) => (
+        <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
+          <Instance />
+        </LeafyGreenProvider>
+      ),
+    },
   },
   args: {
     label: 'Label',
     description: 'Description',
-    notificationMessage: 'This is a notification',
+    errorMessage: 'This is a notification',
     size: Size.Default,
     state: FormFieldState.Unset,
     glyph: 'Beaker',
@@ -31,7 +48,7 @@ const meta: StoryMetaType<typeof FormField> = {
   argTypes: {
     label: { control: 'text' },
     description: { control: 'text' },
-    notificationMessage: { control: 'text' },
+    errorMessage: { control: 'text' },
     size: { control: 'select' },
     state: { control: 'select' },
     glyph: { control: 'select', options: Object.keys(glyphs) },
@@ -40,15 +57,18 @@ const meta: StoryMetaType<typeof FormField> = {
 
 export default meta;
 
-export const Basic: StoryFn<FormFieldProps & { glyph: string }> = props => (
+type FormFieldStoryProps = FormFieldProps & { glyph: string };
+export const Basic: StoryFn<FormFieldStoryProps> = (
+  props: FormFieldStoryProps,
+) => (
   <FormField {...props} icon={<Icon glyph={props.glyph} />}>
     <input placeholder="placeholder" />
   </FormField>
 );
 
-export const WithIconButton: StoryFn<
-  FormFieldProps & { glyph: string }
-> = props => (
+export const WithIconButton: StoryFn<FormFieldStoryProps> = (
+  props: FormFieldStoryProps,
+) => (
   <FormField
     {...props}
     inputWrapperProps={{
@@ -65,3 +85,5 @@ export const WithIconButton: StoryFn<
     <input placeholder="placeholder" />
   </FormField>
 );
+
+export const Generated = () => <></>;
diff --git a/packages/form-field/src/FormField/FormField.spec.tsx b/packages/form-field/src/FormField/FormField.spec.tsx
index 9881eb36a3..057795bddd 100644
--- a/packages/form-field/src/FormField/FormField.spec.tsx
+++ b/packages/form-field/src/FormField/FormField.spec.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { FormField } from '.';
+import Icon from '@leafygreen-ui/icon';
+
+import { FormField, FormFieldState } from '.';
 
 describe('packages/form-field', () => {
   test('rest passed to outer element', () => {
     const { getByTestId } = render(
-      <FormField data-testid="form-field">
+      <FormField label="Label" data-testid="form-field">
         <div />
       </FormField>,
     );
@@ -16,7 +18,7 @@ describe('packages/form-field', () => {
 
   test('className passed to outer element', () => {
     const { getByTestId } = render(
-      <FormField data-testid="form-field" className="form-field">
+      <FormField label="Label" data-testid="form-field" className="form-field">
         <div />
       </FormField>,
     );
@@ -49,8 +51,18 @@ describe('packages/form-field', () => {
     expect(description).toHaveAttribute('id');
   });
 
-  test('input has id, labelledby & describedby', () => {
+  test('input has id,', () => {
     const { getByTestId } = render(
+      <FormField label="Label" data-testid="form-field">
+        <div data-testid="input" />
+      </FormField>,
+    );
+    const input = getByTestId('input');
+    expect(input).toHaveAttribute('id');
+  });
+
+  test('input has labelledby attribute', () => {
+    const { getByTestId, getByText } = render(
       <FormField
         label="Label"
         description="Description"
@@ -59,13 +71,176 @@ describe('packages/form-field', () => {
         <div data-testid="input" />
       </FormField>,
     );
+    const label = getByText('Label');
     const input = getByTestId('input');
-    expect(input).toHaveAttribute('id');
-    expect(input).toHaveAttribute('aria-labelledby');
-    expect(input).toHaveAttribute('aria-describedby');
+    expect(input).toHaveAttribute('aria-labelledby', label.id);
+  });
+
+  test('input has describedby attribute', () => {
+    const { getByTestId, getByText } = render(
+      <FormField
+        label="Label"
+        description="Description"
+        data-testid="form-field"
+      >
+        <div data-testid="input" />
+      </FormField>,
+    );
+    const description = getByText('Description');
+    const input = getByTestId('input');
+    expect(input).toHaveAttribute('aria-describedby', description.id);
+  });
+
+  test('when aria-label is provided, input has that aria-label', () => {
+    const { getByTestId } = render(
+      <FormField aria-label="Label" data-testid="form-field">
+        <div data-testid="input" />
+      </FormField>,
+    );
+    const input = getByTestId('input');
+    expect(input).toHaveAttribute('aria-label', 'Label');
   });
 
-  test.todo('Error message appears when state changes');
-  test.todo('Error message has id');
-  test.todo('icon rendering');
+  test('when aria-labelledby is provided, input has that aria-labelledby', () => {
+    const { getByTestId } = render(
+      <FormField aria-labelledby="label-123" data-testid="form-field">
+        <div data-testid="input" />
+      </FormField>,
+    );
+    const input = getByTestId('input');
+    expect(input).toHaveAttribute('aria-labelledby', 'label-123');
+  });
+
+  describe('Error state', () => {
+    test('Error message is not shown by default', () => {
+      const { queryByText } = render(
+        <FormField
+          label="Label"
+          errorMessage="This is an error message"
+          data-testid="form-field"
+        >
+          <div data-testid="input" />
+        </FormField>,
+      );
+      const error = queryByText('This is an error message');
+      expect(error).not.toBeInTheDocument();
+    });
+
+    test('Error message appears when state is Error', () => {
+      const { queryByText } = render(
+        <FormField
+          label="Label"
+          errorMessage="This is an error message"
+          state={FormFieldState.Error}
+          data-testid="form-field"
+        >
+          <div data-testid="input" />
+        </FormField>,
+      );
+      const error = queryByText('This is an error message');
+      expect(error).toBeInTheDocument();
+    });
+
+    test('Error message has id', () => {
+      const { queryByText } = render(
+        <FormField
+          label="Label"
+          errorMessage="This is an error message"
+          state={FormFieldState.Error}
+          data-testid="form-field"
+        >
+          <div data-testid="input" />
+        </FormField>,
+      );
+      const error = queryByText('This is an error message');
+      expect(error).toHaveAttribute('id');
+    });
+
+    test('input is described by error message', () => {
+      const { getByTestId, queryByText } = render(
+        <FormField
+          label="Label"
+          errorMessage="This is an error message"
+          state={FormFieldState.Error}
+          data-testid="form-field"
+        >
+          <div data-testid="input" />
+        </FormField>,
+      );
+      const input = getByTestId('input');
+      const error = queryByText('This is an error message');
+      expect(input).toHaveAttribute('aria-describedby', error?.id);
+    });
+
+    test('input is described by both description & error message', () => {
+      const { getByTestId, queryByText } = render(
+        <FormField
+          label="Label"
+          description="Description"
+          errorMessage="This is an error message"
+          state={FormFieldState.Error}
+          data-testid="form-field"
+        >
+          <div data-testid="input" />
+        </FormField>,
+      );
+      const input = getByTestId('input');
+      const description = queryByText('Description');
+      const error = queryByText('This is an error message');
+      expect(input).toHaveAttribute(
+        'aria-describedby',
+        description?.id + ' ' + error?.id,
+      );
+    });
+  });
+
+  test('Renders an icon', () => {
+    const { queryByTestId } = render(
+      <FormField
+        label="Label"
+        icon={<Icon glyph="Beaker" data-testid="icon" />}
+        data-testid="form-field"
+      >
+        <div data-testid="input" />
+      </FormField>,
+    );
+
+    const icon = queryByTestId('icon');
+    expect(icon).toBeInTheDocument();
+    expect(icon?.tagName).toEqual('svg');
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  test.skip('Types', () => {
+    render(
+      // @ts-expect-error - label is required
+      <FormField>
+        <div />
+      </FormField>,
+    );
+
+    // Label is required ...
+    render(
+      <FormField label="">
+        <div />
+      </FormField>,
+    );
+
+    // ...or aria-label...
+    render(
+      <FormField aria-label="">
+        <div />
+      </FormField>,
+    );
+
+    // ...or aria-labelledby
+    render(
+      <FormField aria-labelledby="">
+        <div />
+      </FormField>,
+    );
+
+    // @ts-expect-error - children is required
+    render(<FormField label=""></FormField>);
+  });
 });
diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
index acc7df972b..f7cdabc72e 100644
--- a/packages/form-field/src/FormField/FormField.tsx
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -2,8 +2,6 @@ import React, { forwardRef } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useIdAllocator } from '@leafygreen-ui/hooks';
-import Icon from '@leafygreen-ui/icon';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
 import {
   Description,
@@ -12,21 +10,9 @@ import {
   useUpdatedBaseFontSize,
 } from '@leafygreen-ui/typography';
 
-import {
-  childrenWrapperStyles,
-  errorIconStyles,
-  formFieldFontStyles,
-  iconClassName,
-  iconStyles,
-  inputWrapperBaseStyles,
-  inputWrapperDisabledStyles,
-  inputWrapperFocusStyles,
-  inputWrapperModeStyles,
-  inputWrapperSizeStyles,
-  inputWrapperStateStyles,
-  textContainerStyle,
-} from './FormField.styles';
+import { formFieldFontStyles, textContainerStyle } from './FormField.styles';
 import { type FormFieldProps, FormFieldState } from './FormField.types';
+import { FormFieldInputWrapper } from './FormFieldInputWrapper';
 
 export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
   (
@@ -35,8 +21,8 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
       description,
       children,
       state = FormFieldState.Unset,
-      size,
-      disabled,
+      size = Size.Default,
+      disabled = false,
       errorMessage,
       icon,
       className,
@@ -45,7 +31,6 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
     }: FormFieldProps,
     fwdRef,
   ) => {
-    const { theme } = useDarkMode();
     const baseFontSize = useUpdatedBaseFontSize();
 
     const labelId = useIdAllocator({ prefix: 'lg-form-field-label' });
@@ -55,6 +40,21 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
     const errorId = useIdAllocator({ prefix: 'lg-form-field-description' });
     const inputId = useIdAllocator({ prefix: 'lg-form-field-input' });
 
+    const ariaLabelledby = label ? labelId : rest['aria-labelledby'];
+    const ariaLabel = label ? '' : rest['aria-label'];
+    const describedBy = `${description ? descriptionId : ''} ${
+      state === FormFieldState.Error ? errorId : ''
+    }`.trim();
+
+    const renderedChildren =
+      children &&
+      React.cloneElement(children, {
+        id: inputId,
+        'aria-labelledby': ariaLabelledby,
+        'aria-describedby': describedBy,
+        'aria-label': ariaLabel,
+      });
+
     return (
       <div
         className={cx(formFieldFontStyles[baseFontSize], className)}
@@ -73,42 +73,13 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
             </Description>
           )}
         </div>
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-        <div
-          {...inputWrapperProps}
-          aria-disabled={disabled}
-          className={cx(
-            inputWrapperBaseStyles,
-            inputWrapperModeStyles[theme],
-            inputWrapperFocusStyles[theme],
-            inputWrapperSizeStyles[size ?? Size.Default],
-            inputWrapperStateStyles[state][theme],
-            {
-              [inputWrapperDisabledStyles[theme]]: disabled,
-            },
-            inputWrapperProps?.className,
-          )}
-        >
-          <div className={childrenWrapperStyles}>
-            {React.cloneElement(children, {
-              id: inputId,
-              'aria-labelledby': labelId,
-              'aria-describedby': `${descriptionId} ${errorId}`,
-            })}
-          </div>
-          {state === FormFieldState.Error && (
-            <Icon glyph="Warning" className={errorIconStyles[theme]} />
-          )}
-          {icon &&
-            React.cloneElement(icon, {
-              className: cx(
-                iconClassName,
-                iconStyles[theme],
-                icon.props.className,
-              ),
-              disabled,
-            })}
-        </div>
+        <FormFieldInputWrapper
+          input={renderedChildren}
+          icon={icon}
+          disabled={disabled}
+          size={size}
+          state={state}
+        />
         {state === FormFieldState.Error && (
           <Error id={errorId}>{errorMessage}</Error>
         )}
diff --git a/packages/form-field/src/FormField/FormField.types.ts b/packages/form-field/src/FormField/FormField.types.ts
index 4dbb1615db..5225e375bd 100644
--- a/packages/form-field/src/FormField/FormField.types.ts
+++ b/packages/form-field/src/FormField/FormField.types.ts
@@ -17,17 +17,34 @@ export interface FormFieldChildrenProps {
   [key: string]: any;
 }
 
-type FormFieldChildren = React.ReactElement<FormFieldChildrenProps>;
+export type FormFieldChildren = React.ReactElement<FormFieldChildrenProps>;
 
-export interface FormFieldProps
-  extends Omit<HTMLElementProps<'div'>, 'children'> {
-  children: FormFieldChildren;
-  label?: React.ReactNode;
-  description?: React.ReactNode;
-  state?: FormFieldState;
-  size?: Size;
-  disabled?: boolean;
-  errorMessage?: React.ReactNode;
-  icon?: React.ReactElement;
-  inputWrapperProps?: FormFieldInputWrapperProps;
-}
+type AriaLabelProps =
+  | {
+      label: string;
+      'aria-label'?: string;
+      'aria-labelledby'?: string;
+    }
+  | {
+      label?: string;
+      'aria-label': string;
+      'aria-labelledby'?: string;
+    }
+  | {
+      label?: string;
+      'aria-label'?: string;
+      'aria-labelledby': string;
+    };
+
+export type FormFieldProps = Omit<HTMLElementProps<'div'>, 'children'> &
+  AriaLabelProps & {
+    children: FormFieldChildren;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    state?: FormFieldState;
+    size?: Size;
+    disabled?: boolean;
+    errorMessage?: React.ReactNode;
+    icon?: React.ReactElement;
+    inputWrapperProps?: FormFieldInputWrapperProps;
+  };
diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.spec.tsx b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.spec.tsx
new file mode 100644
index 0000000000..51f9c39dee
--- /dev/null
+++ b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { FormFieldInputWrapper } from '.';
+
+describe('packages/form-field-input-wrapper', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.styles.ts b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.styles.ts
new file mode 100644
index 0000000000..928608f58d
--- /dev/null
+++ b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.styles.ts
@@ -0,0 +1,4 @@
+
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseStyles = css``;
diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx
new file mode 100644
index 0000000000..97ba6bf807
--- /dev/null
+++ b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx
@@ -0,0 +1,83 @@
+import React, { forwardRef } from 'react';
+
+import { cx } from '@leafygreen-ui/emotion';
+import Icon from '@leafygreen-ui/icon';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { Size } from '@leafygreen-ui/tokens';
+
+import {
+  childrenWrapperStyles,
+  errorIconStyles,
+  iconClassName,
+  iconStyles,
+  inputWrapperBaseStyles,
+  inputWrapperDisabledStyles,
+  inputWrapperFocusStyles,
+  inputWrapperModeStyles,
+  inputWrapperSizeStyles,
+  inputWrapperStateStyles,
+} from '../FormField.styles';
+import { FormFieldState } from '../FormField.types';
+
+import { FormFieldInputWrapperProps } from './FormFieldInputWrapper.types';
+
+export const FormFieldInputWrapper = forwardRef<
+  HTMLDivElement,
+  FormFieldInputWrapperProps
+>(
+  (
+    {
+      input,
+      icon,
+      size,
+      state,
+      disabled,
+      className,
+      ...rest
+    }: FormFieldInputWrapperProps,
+    fwdRef,
+  ) => {
+    const { theme } = useDarkMode();
+
+    return (
+      <div
+        {...rest}
+        ref={fwdRef}
+        aria-disabled={disabled}
+        className={cx(
+          inputWrapperBaseStyles,
+          inputWrapperModeStyles[theme],
+          inputWrapperFocusStyles[theme],
+          inputWrapperSizeStyles[size ?? Size.Default],
+          inputWrapperStateStyles[state][theme],
+          {
+            [inputWrapperDisabledStyles[theme]]: disabled,
+          },
+          className,
+        )}
+      >
+        <div className={childrenWrapperStyles}>{input}</div>
+        {state === FormFieldState.Error && (
+          <Icon
+            role="presentation"
+            title="Error"
+            glyph="Warning"
+            className={errorIconStyles[theme]}
+          />
+        )}
+        {icon &&
+          React.cloneElement(icon, {
+            role: 'presentation',
+            className: cx(
+              iconClassName,
+              iconStyles[theme],
+              icon.props.className,
+            ),
+            disabled,
+          })}
+      </div>
+    );
+  },
+);
+
+FormFieldInputWrapper.displayName = 'FormFieldInputWrapper';
diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.types.ts b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.types.ts
new file mode 100644
index 0000000000..703f417d02
--- /dev/null
+++ b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.types.ts
@@ -0,0 +1,13 @@
+import { HTMLElementProps } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
+
+import { FormFieldChildren, FormFieldState } from '../FormField.types';
+
+export interface FormFieldInputWrapperProps
+  extends Omit<HTMLElementProps<'div'>, 'children'> {
+  input: FormFieldChildren;
+  disabled: boolean;
+  size: Size;
+  state: FormFieldState;
+  icon?: React.ReactElement;
+}
diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/index.ts b/packages/form-field/src/FormField/FormFieldInputWrapper/index.ts
new file mode 100644
index 0000000000..4ac9cc3a4d
--- /dev/null
+++ b/packages/form-field/src/FormField/FormFieldInputWrapper/index.ts
@@ -0,0 +1,2 @@
+export { FormFieldInputWrapper } from './FormFieldInputWrapper';
+export { FormFieldInputWrapperProps } from './FormFieldInputWrapper.types';

From e182cafbe0838c3055cf60f90576d09d6d4433c9 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 17:57:50 -0400
Subject: [PATCH 154/351] Update FormField.stories.tsx

---
 packages/form-field/src/FormField.stories.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index 01bb41ec6d..edf586ab7f 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -75,6 +75,8 @@ export const WithIconButton: StoryFn<FormFieldStoryProps> = (
       className: css`
         padding-inline-end: 4px;
       `,
+      role: 'combobox',
+      tabIndex: -1,
     }}
     icon={
       <IconButton aria-label="Icon">

From be56b772408aa4a091b80aae05cf4c17f6933dc2 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 18:15:41 -0400
Subject: [PATCH 155/351] adds rests for ReactNode label & description

---
 .../src/FormField/FormField.spec.tsx          | 182 ++++++++++++------
 .../src/FormField/FormField.types.ts          |   7 +-
 2 files changed, 131 insertions(+), 58 deletions(-)

diff --git a/packages/form-field/src/FormField/FormField.spec.tsx b/packages/form-field/src/FormField/FormField.spec.tsx
index 057795bddd..db5f75722a 100644
--- a/packages/form-field/src/FormField/FormField.spec.tsx
+++ b/packages/form-field/src/FormField/FormField.spec.tsx
@@ -26,17 +26,6 @@ describe('packages/form-field', () => {
     expect(formField.classList.contains('form-field')).toBeTruthy();
   });
 
-  test('label has id & htmlFor', () => {
-    const { getByText } = render(
-      <FormField label="Label" data-testid="form-field">
-        <div />
-      </FormField>,
-    );
-    const label = getByText('Label');
-    expect(label).toHaveAttribute('id');
-    expect(label).toHaveAttribute('for');
-  });
-
   test('description has id', () => {
     const { getByText } = render(
       <FormField
@@ -51,64 +40,142 @@ describe('packages/form-field', () => {
     expect(description).toHaveAttribute('id');
   });
 
-  test('input has id,', () => {
-    const { getByTestId } = render(
-      <FormField label="Label" data-testid="form-field">
-        <div data-testid="input" />
-      </FormField>,
-    );
-    const input = getByTestId('input');
-    expect(input).toHaveAttribute('id');
-  });
-
-  test('input has labelledby attribute', () => {
-    const { getByTestId, getByText } = render(
-      <FormField
-        label="Label"
-        description="Description"
-        data-testid="form-field"
-      >
-        <div data-testid="input" />
-      </FormField>,
-    );
-    const label = getByText('Label');
-    const input = getByTestId('input');
-    expect(input).toHaveAttribute('aria-labelledby', label.id);
-  });
-
-  test('input has describedby attribute', () => {
-    const { getByTestId, getByText } = render(
+  test('description can be ReactNode', () => {
+    const { queryByTestId } = render(
       <FormField
         label="Label"
-        description="Description"
+        description={<span data-testid="description-span">description</span>}
         data-testid="form-field"
       >
-        <div data-testid="input" />
+        <div />
       </FormField>,
     );
-    const description = getByText('Description');
-    const input = getByTestId('input');
-    expect(input).toHaveAttribute('aria-describedby', description.id);
+    const descriptionSpan = queryByTestId('description-span');
+    expect(descriptionSpan).toBeInTheDocument();
+    expect(descriptionSpan?.parentElement).toHaveAttribute('id');
   });
 
-  test('when aria-label is provided, input has that aria-label', () => {
+  test('input has id,', () => {
     const { getByTestId } = render(
-      <FormField aria-label="Label" data-testid="form-field">
+      <FormField label="Label" data-testid="form-field">
         <div data-testid="input" />
       </FormField>,
     );
     const input = getByTestId('input');
-    expect(input).toHaveAttribute('aria-label', 'Label');
+    expect(input).toHaveAttribute('id');
   });
 
-  test('when aria-labelledby is provided, input has that aria-labelledby', () => {
-    const { getByTestId } = render(
-      <FormField aria-labelledby="label-123" data-testid="form-field">
-        <div data-testid="input" />
-      </FormField>,
-    );
-    const input = getByTestId('input');
-    expect(input).toHaveAttribute('aria-labelledby', 'label-123');
+  describe('Label rendering', () => {
+    test('label element has id & htmlFor', () => {
+      const { getByText } = render(
+        <FormField label="Label" data-testid="form-field">
+          <div />
+        </FormField>,
+      );
+      const label = getByText('Label');
+      expect(label).toHaveAttribute('id');
+      expect(label).toHaveAttribute('for');
+    });
+
+    test('label can be a ReactNode', () => {
+      const { queryByTestId } = render(
+        <FormField
+          label={<span data-testid="label-span">Label</span>}
+          data-testid="form-field"
+        >
+          <div />
+        </FormField>,
+      );
+      const labelSpan = queryByTestId('label-span');
+      expect(labelSpan).toBeInTheDocument();
+      expect(labelSpan?.parentElement).toHaveAttribute('id');
+    });
+
+    test('input is labelledby label element', () => {
+      const { getByTestId, getByText } = render(
+        <FormField
+          label="Label"
+          description="Description"
+          data-testid="form-field"
+        >
+          <div data-testid="input" />
+        </FormField>,
+      );
+      const label = getByText('Label');
+      const input = getByTestId('input');
+      expect(input).toHaveAttribute('aria-labelledby', label.id);
+    });
+
+    test("input is labelledby label when it's a ReactNode", () => {
+      const { queryByTestId } = render(
+        <FormField
+          label={<span data-testid="label-span">Label</span>}
+          description="Description"
+          data-testid="form-field"
+        >
+          <div data-testid="input" />
+        </FormField>,
+      );
+      const labelSpan = queryByTestId('label-span');
+      const input = queryByTestId('input');
+      expect(input).toHaveAttribute(
+        'aria-labelledby',
+        labelSpan?.parentElement?.id,
+      );
+    });
+
+    test('input is describedby description element', () => {
+      const { getByTestId, getByText } = render(
+        <FormField
+          label="Label"
+          description="Description"
+          data-testid="form-field"
+        >
+          <div data-testid="input" />
+        </FormField>,
+      );
+      const description = getByText('Description');
+      const input = getByTestId('input');
+      expect(input).toHaveAttribute('aria-describedby', description.id);
+    });
+
+    test("input is describedby description when it's a ReactNode", () => {
+      const { getByTestId, queryByTestId } = render(
+        <FormField
+          label="Label"
+          description={<span data-testid="description-span">description</span>}
+          data-testid="form-field"
+        >
+          <div data-testid="input" />
+        </FormField>,
+      );
+      const descriptionSpan = queryByTestId('description-span');
+      const input = getByTestId('input');
+      expect(input).toHaveAttribute(
+        'aria-describedby',
+        descriptionSpan?.parentElement?.id,
+      );
+    });
+
+    test('when aria-label is provided, input has that aria-label', () => {
+      const { getByTestId } = render(
+        <FormField aria-label="Label" data-testid="form-field">
+          <div data-testid="input" />
+        </FormField>,
+      );
+      const input = getByTestId('input');
+      expect(input).toHaveAttribute('aria-label', 'Label');
+    });
+
+    test('when aria-labelledby is provided, input has that aria-labelledby', () => {
+      const { getByTestId } = render(
+        <FormField aria-labelledby="label-123" data-testid="form-field">
+          <div data-testid="input" />
+        </FormField>,
+      );
+      const input = getByTestId('input');
+      expect(input).toHaveAttribute('aria-labelledby', 'label-123');
+    });
   });
 
   describe('Error state', () => {
@@ -240,6 +307,13 @@ describe('packages/form-field', () => {
       </FormField>,
     );
 
+    // Label accepts React.ReactNode
+    render(
+      <FormField label={<span>label</span>}>
+        <div />
+      </FormField>,
+    );
+
     // @ts-expect-error - children is required
     render(<FormField label=""></FormField>);
   });
diff --git a/packages/form-field/src/FormField/FormField.types.ts b/packages/form-field/src/FormField/FormField.types.ts
index 5225e375bd..9a1f53bbd9 100644
--- a/packages/form-field/src/FormField/FormField.types.ts
+++ b/packages/form-field/src/FormField/FormField.types.ts
@@ -21,17 +21,17 @@ export type FormFieldChildren = React.ReactElement<FormFieldChildrenProps>;
 
 type AriaLabelProps =
   | {
-      label: string;
+      label: React.ReactNode;
       'aria-label'?: string;
       'aria-labelledby'?: string;
     }
   | {
-      label?: string;
+      label?: React.ReactNode;
       'aria-label': string;
       'aria-labelledby'?: string;
     }
   | {
-      label?: string;
+      label?: React.ReactNode;
       'aria-label'?: string;
       'aria-labelledby': string;
     };
@@ -39,7 +39,6 @@ type AriaLabelProps =
 export type FormFieldProps = Omit<HTMLElementProps<'div'>, 'children'> &
   AriaLabelProps & {
     children: FormFieldChildren;
-    label?: React.ReactNode;
     description?: React.ReactNode;
     state?: FormFieldState;
     size?: Size;

From 311408504e3ef3034a4a477a321b2dd0e965398b Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 18:29:51 -0400
Subject: [PATCH 156/351] adds tests for form field pass through

---
 .../src/FormField/FormField.spec.tsx          | 19 +++++++++++++++++++
 .../form-field/src/FormField/FormField.tsx    |  1 +
 .../src/FormField/FormField.types.ts          |  4 +++-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/form-field/src/FormField/FormField.spec.tsx b/packages/form-field/src/FormField/FormField.spec.tsx
index db5f75722a..ce7ba50c62 100644
--- a/packages/form-field/src/FormField/FormField.spec.tsx
+++ b/packages/form-field/src/FormField/FormField.spec.tsx
@@ -277,6 +277,25 @@ describe('packages/form-field', () => {
     expect(icon?.tagName).toEqual('svg');
   });
 
+  test('inputWrapperProps are passed through', () => {
+    const { queryByTestId } = render(
+      <FormField
+        label="Label"
+        inputWrapperProps={{
+          'data-testid': 'input-wrapper',
+          role: 'combobox',
+          className: 'input-class',
+        }}
+      >
+        <div />
+      </FormField>,
+    );
+    const wrapper = queryByTestId('input-wrapper');
+    expect(wrapper).toBeInTheDocument();
+    expect(wrapper).toHaveAttribute('role', 'combobox');
+    expect(wrapper?.classList.contains('input-class')).toBeTruthy();
+  });
+
   // eslint-disable-next-line jest/no-disabled-tests
   test.skip('Types', () => {
     render(
diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
index f7cdabc72e..3eaa0dcbde 100644
--- a/packages/form-field/src/FormField/FormField.tsx
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -79,6 +79,7 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
           disabled={disabled}
           size={size}
           state={state}
+          {...inputWrapperProps}
         />
         {state === FormFieldState.Error && (
           <Error id={errorId}>{errorMessage}</Error>
diff --git a/packages/form-field/src/FormField/FormField.types.ts b/packages/form-field/src/FormField/FormField.types.ts
index 9a1f53bbd9..411ef89352 100644
--- a/packages/form-field/src/FormField/FormField.types.ts
+++ b/packages/form-field/src/FormField/FormField.types.ts
@@ -9,7 +9,9 @@ export const FormFieldState = {
 export type FormFieldState =
   (typeof FormFieldState)[keyof typeof FormFieldState];
 
-export interface FormFieldInputWrapperProps extends HTMLElementProps<'div'> {}
+export interface FormFieldInputWrapperProps extends HTMLElementProps<'div'> {
+  [key: `data-${string}`]: any;
+}
 
 export interface FormFieldChildrenProps {
   id: string;

From bdd1c2090839dd7cc31fa91df26b1be24b7af6f8 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 18:29:51 -0400
Subject: [PATCH 157/351] adds tests for form field pass through

---
 .../src/FormField/FormField.spec.tsx          | 19 +++++++++++++++++++
 .../form-field/src/FormField/FormField.tsx    |  1 +
 .../src/FormField/FormField.types.ts          |  4 +++-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/form-field/src/FormField/FormField.spec.tsx b/packages/form-field/src/FormField/FormField.spec.tsx
index db5f75722a..ce7ba50c62 100644
--- a/packages/form-field/src/FormField/FormField.spec.tsx
+++ b/packages/form-field/src/FormField/FormField.spec.tsx
@@ -277,6 +277,25 @@ describe('packages/form-field', () => {
     expect(icon?.tagName).toEqual('svg');
   });
 
+  test('inputWrapperProps are passed through', () => {
+    const { queryByTestId } = render(
+      <FormField
+        label="Label"
+        inputWrapperProps={{
+          'data-testid': 'input-wrapper',
+          role: 'combobox',
+          className: 'input-class',
+        }}
+      >
+        <div />
+      </FormField>,
+    );
+    const wrapper = queryByTestId('input-wrapper');
+    expect(wrapper).toBeInTheDocument();
+    expect(wrapper).toHaveAttribute('role', 'combobox');
+    expect(wrapper?.classList.contains('input-class')).toBeTruthy();
+  });
+
   // eslint-disable-next-line jest/no-disabled-tests
   test.skip('Types', () => {
     render(
diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
index f7cdabc72e..3eaa0dcbde 100644
--- a/packages/form-field/src/FormField/FormField.tsx
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -79,6 +79,7 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
           disabled={disabled}
           size={size}
           state={state}
+          {...inputWrapperProps}
         />
         {state === FormFieldState.Error && (
           <Error id={errorId}>{errorMessage}</Error>
diff --git a/packages/form-field/src/FormField/FormField.types.ts b/packages/form-field/src/FormField/FormField.types.ts
index 9a1f53bbd9..411ef89352 100644
--- a/packages/form-field/src/FormField/FormField.types.ts
+++ b/packages/form-field/src/FormField/FormField.types.ts
@@ -9,7 +9,9 @@ export const FormFieldState = {
 export type FormFieldState =
   (typeof FormFieldState)[keyof typeof FormFieldState];
 
-export interface FormFieldInputWrapperProps extends HTMLElementProps<'div'> {}
+export interface FormFieldInputWrapperProps extends HTMLElementProps<'div'> {
+  [key: `data-${string}`]: any;
+}
 
 export interface FormFieldChildrenProps {
   id: string;

From da2aefeb9d0b90c231c96d5cef07d260a83494a9 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 18:53:10 -0400
Subject: [PATCH 158/351] implements form-field

---
 packages/date-picker/package.json             |   1 +
 .../DateFormField/DateFormField.stories.tsx   |   6 -
 .../DateFormField/DateFormField.styles.ts     | 284 +-----------------
 .../DateInput/DateFormField/DateFormField.tsx | 109 ++-----
 .../DateFormField/DateFormField.types.ts      |  16 +-
 .../DatePickerInput.stories.tsx               |   7 +-
 .../DatePickerInput/DatePickerInput.tsx       |  33 +-
 .../DateRangeInput/DateRangeInput.tsx         |   9 +-
 packages/date-picker/tsconfig.json            |   3 +
 .../FormFieldInputWrapper.tsx                 |   1 -
 10 files changed, 52 insertions(+), 417 deletions(-)

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 6e6da5eb51..36efe6e4dd 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@leafygreen-ui/emotion": "^4.0.7",
+    "@leafygreen-ui/form-field": "^0.1.0",
     "@leafygreen-ui/hooks": "^8.0.0",
     "@leafygreen-ui/icon": "^11.23.0",
     "@leafygreen-ui/icon-button": "^15.0.17",
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
index e7fcc5c7e4..7229c7ce19 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
@@ -75,9 +75,6 @@ const meta: StoryMetaType<
     errorMessage: 'This is an error message',
   },
   argTypes: {
-    inputId: { control: 'none' },
-    descriptionId: { control: 'none' },
-    errorId: { control: 'none' },
     darkMode: { control: 'boolean' },
   },
 };
@@ -100,9 +97,6 @@ const Template: StoryFn<typeof DateFormField> = ({
       description={description}
       state={state}
       errorMessage={errorMessage}
-      inputId={inputId}
-      descriptionId={descriptionId}
-      errorId={errorId}
     >
       <input
         id={inputId}
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts b/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts
index 94efe87620..35d1d682a4 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts
@@ -1,285 +1,5 @@
 import { css } from '@leafygreen-ui/emotion';
-import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
-import { palette } from '@leafygreen-ui/palette';
-import {
-  BaseFontSize,
-  focusRing,
-  fontFamilies,
-  fontWeights,
-  hoverRing,
-  Size,
-  spacing,
-  transitionDuration,
-  typeScales,
-} from '@leafygreen-ui/tokens';
 
-import { InputState } from './DateFormField.types';
-
-export const iconButtonClassName = createUniqueClassName('calendar-button');
-export const baseWrapperStyles = css``;
-
-export const wrapperFontStyles: Record<BaseFontSize, string> = {
-  [BaseFontSize.Body1]: css`
-    font-size: ${typeScales.body1.fontSize}px;
-    line-height: ${typeScales.body1.lineHeight}px;
-  `,
-  [BaseFontSize.Body2]: css`
-    font-size: ${typeScales.body2.fontSize}px;
-    line-height: 20px; // Hardcoding because it does not match body2 lineHeight
-  `,
-};
-
-export const textContainerStyle = css`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: ${spacing[1]}px;
+export const iconButtonStyles = css`
+  margin-inline-end: -8px;
 `;
-
-const autofillShadowOverride = (color: string) => `0 0 0 100px ${color} inset`;
-
-export const inputBaseStyles = css`
-  display: flex;
-  align-items: center;
-  gap: ${spacing[1]}px;
-  font-size: inherit;
-  line-height: inherit;
-  font-family: ${fontFamilies.default};
-  width: 100%;
-  height: 36px;
-  font-weight: ${fontWeights.regular};
-  border: 1px solid;
-  z-index: 1;
-  outline: none;
-  border-radius: 6px;
-  transition: ${transitionDuration.default}ms ease-in-out;
-  transition-property: border-color, box-shadow;
-  z-index: 0;
-`;
-
-export const inputModeStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
-    color: ${palette.black};
-    background: ${palette.white};
-    border: 1px solid ${palette.gray.base};
-
-    &:-webkit-autofill {
-      color: ${palette.black};
-      background: ${palette.white};
-      border: 1px solid ${palette.gray.base};
-      -webkit-text-fill-color: ${palette.black};
-      box-shadow: ${autofillShadowOverride(palette.white)};
-
-      &:not([aria-disabled='true']):focus {
-        box-shadow: ${autofillShadowOverride(palette.white)},
-          ${focusRing.light.input};
-        border-color: ${palette.white};
-      }
-
-      &:not([aria-disabled='true']):hover:not(:focus) {
-        box-shadow: ${autofillShadowOverride(palette.white)},
-          ${hoverRing.light.gray};
-      }
-    }
-
-    &::placeholder {
-      color: ${palette.gray.light1};
-      font-weight: ${fontWeights.regular};
-    }
-
-    &:hover,
-    &:active {
-      &:not([aria-disabled='true']):not(:focus) {
-        box-shadow: ${hoverRing.light.gray};
-      }
-    }
-  `,
-  [Theme.Dark]: css`
-    color: ${palette.gray.light3};
-    background-color: ${palette.gray.dark4};
-    border: 1px solid ${palette.gray.base};
-
-    &:-webkit-autofill {
-      border: 1px solid ${palette.gray.base};
-      color: ${palette.gray.light3};
-      background: ${palette.gray.dark4};
-      -webkit-text-fill-color: ${palette.gray.light3};
-      box-shadow: ${autofillShadowOverride(palette.gray.dark4)};
-
-      &:not([aria-disabled='true']):focus {
-        box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
-          ${focusRing.dark.input};
-        border-color: ${palette.blue.light1};
-      }
-
-      &:not([aria-disabled='true']):hover:not(:focus) {
-        box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
-          ${hoverRing.dark.gray};
-      }
-    }
-
-    &:hover,
-    &:active {
-      &:not([aria-disabled='true']):not(:focus) {
-        box-shadow: ${hoverRing.dark.gray};
-      }
-    }
-
-    &::placeholder {
-      color: ${palette.gray.dark1};
-      font-weight: ${fontWeights.regular};
-    }
-  `,
-};
-
-const focusSelector = (styles: string) => css`
-  @supports selector(:has(a, b)) {
-    &:not([aria-disabled='true']):focus-within:not(
-        :has(.${iconButtonClassName}:focus)
-      ) {
-      ${styles}
-    }
-  }
-
-  /* Fallback for when "has" is unsupported */
-  @supports not selector(:has(a, b)) {
-    &:not([aria-disabled='true']):focus-within {
-      ${styles}
-    }
-  }
-`;
-
-export const inputFocusStyles: Record<Theme, string> = {
-  [Theme.Light]: focusSelector(`
-     {
-      box-shadow: ${focusRing.light.input};
-      border-color: ${palette.white};
-    }
-  `),
-  [Theme.Dark]: focusSelector(`
-     {
-      box-shadow: ${focusRing.dark.input};
-      border-color: ${palette.gray.dark4};
-    }
-  `),
-};
-
-export const inputSizeStyles: Record<Size, string> = {
-  [Size.XSmall]: css`
-    height: 22px;
-    padding-inline: 10px 2px;
-  `,
-  [Size.Small]: css`
-    height: 28px;
-    padding-inline: 10px 2px;
-  `,
-  [Size.Default]: css`
-    height: 36px;
-    padding-inline: 12px 4px;
-  `,
-  [Size.Large]: css`
-    height: 48px;
-    padding-inline: 16px 8px;
-  `,
-};
-
-export const inputStateStyles: Record<InputState, Record<Theme, string>> = {
-  [InputState.Error]: {
-    [Theme.Light]: css`
-      &:not([aria-disabled='true']) {
-        border-color: ${palette.red.base};
-
-        &:hover,
-        &:active {
-          &:not([aria-disabled='true']):not(:focus) {
-            box-shadow: ${hoverRing.light.red};
-          }
-        }
-      }
-    `,
-    [Theme.Dark]: css`
-      &:not([aria-disabled='true']) {
-        border-color: ${palette.red.light1};
-
-        &:hover,
-        &:active {
-          &:not([aria-disabled='true']):not(:focus) {
-            box-shadow: ${hoverRing.dark.red};
-          }
-        }
-      }
-    `,
-  },
-  [InputState.Unset]: {
-    [Theme.Light]: css``,
-    [Theme.Dark]: css``,
-  },
-};
-
-export const inputDisabledStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
-    cursor: not-allowed;
-    background-color: ${palette.gray.light2};
-    border-color: ${palette.gray.light1};
-
-    & input {
-      cursor: not-allowed;
-      pointer-events: none;
-      color: ${palette.gray.base};
-
-      &::placeholder {
-        color: inherit;
-      }
-
-      &:-webkit-autofill {
-        &,
-        &:hover,
-        &:focus {
-          appearance: none;
-          border: 1px solid ${palette.gray.base};
-          -webkit-text-fill-color: ${palette.gray.base};
-          box-shadow: ${autofillShadowOverride(palette.gray.light2)};
-        }
-      }
-    }
-  `,
-  [Theme.Dark]: css`
-    cursor: not-allowed;
-    color: ${palette.gray.dark2};
-    background-color: ${palette.gray.dark3};
-    border-color: ${palette.gray.dark2};
-
-    & input {
-      cursor: not-allowed;
-      pointer-events: none;
-      color: ${palette.gray.dark2};
-
-      &::placeholder {
-        color: inherit;
-      }
-
-      &:-webkit-autofill {
-        &,
-        &:hover,
-        &:focus {
-          appearance: none;
-          border: 1px solid ${palette.gray.dark1};
-          -webkit-text-fill-color: ${palette.gray.dark1};
-          box-shadow: ${autofillShadowOverride(palette.gray.dark2)};
-        }
-      }
-    }
-  `,
-};
-
-export const childrenWrapperStyles = css`
-  width: 100%;
-`;
-
-export const errorIconStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
-    color: ${palette.red.base};
-  `,
-  [Theme.Dark]: css`
-    color: ${palette.red.light1};
-  `,
-};
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
index 08329e3a49..3365772244 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
@@ -1,120 +1,49 @@
 import React from 'react';
 
-import { cx } from '@leafygreen-ui/emotion';
+import { FormField } from '@leafygreen-ui/form-field';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { Size } from '@leafygreen-ui/tokens';
-import {
-  Description,
-  Error,
-  Label,
-  useUpdatedBaseFontSize,
-} from '@leafygreen-ui/typography';
 
-import { useDatePickerContext } from '../../DatePickerContext';
-
-import {
-  baseWrapperStyles,
-  childrenWrapperStyles,
-  errorIconStyles,
-  iconButtonClassName,
-  inputBaseStyles,
-  inputDisabledStyles,
-  inputFocusStyles,
-  inputModeStyles,
-  inputSizeStyles,
-  inputStateStyles,
-  textContainerStyle,
-  wrapperFontStyles,
-} from './DateFormField.styles';
-import { DateFormFieldProps, InputState } from './DateFormField.types';
+import { iconButtonStyles } from './DateFormField.styles';
+import { DateFormFieldProps } from './DateFormField.types';
 
+/** A wrapper around `FormField` that sets the icon */
 export const DateFormField = React.forwardRef<
   HTMLDivElement,
   DateFormFieldProps
 >(
   (
     {
-      label,
-      description,
-      state = InputState.Unset,
-      errorMessage,
       children,
-      inputId,
-      labelId,
-      descriptionId,
-      errorId,
-      onInputClick,
       onIconButtonClick,
-      className,
+      inputWrapperProps,
       ...rest
     }: DateFormFieldProps,
     fwdRef,
   ) => {
-    const { theme } = useDarkMode();
-    const { size, isOpen, menuId, disabled } = useDatePickerContext();
-    const baseFontSize = useUpdatedBaseFontSize();
-
     return (
-      <div
-        className={cx(
-          baseWrapperStyles,
-          wrapperFontStyles[baseFontSize],
-          className,
-        )}
+      <FormField
         ref={fwdRef}
-        {...rest}
-      >
-        <div className={textContainerStyle}>
-          {label && (
-            <Label htmlFor={inputId} id={labelId} disabled={disabled}>
-              {label}
-            </Label>
-          )}
-          {description && (
-            <Description id={descriptionId} disabled={disabled}>
-              {description}
-            </Description>
-          )}
-        </div>
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-        <div
-          role="combobox"
-          aria-expanded={isOpen}
-          aria-controls={menuId}
-          aria-disabled={disabled}
-          tabIndex={-1}
-          onClick={onInputClick}
-          className={cx(
-            inputBaseStyles,
-            inputModeStyles[theme],
-            inputFocusStyles[theme],
-            inputSizeStyles[size ?? Size.Default],
-            inputStateStyles[state][theme],
-            {
-              [inputDisabledStyles[theme]]: disabled,
-            },
-          )}
-        >
-          <div className={childrenWrapperStyles}>{children}</div>
-          {state === InputState.Error && (
-            <Icon glyph="Warning" className={errorIconStyles[theme]} />
-          )}
+        icon={
           <IconButton
             aria-label="Open calendar menu"
-            className={iconButtonClassName}
+            className={iconButtonStyles}
             onClick={onIconButtonClick}
             type="button"
-            disabled={disabled}
+            disabled={rest.disabled}
           >
             <Icon glyph="Calendar" />
           </IconButton>
-        </div>
-        {state === InputState.Error && (
-          <Error id={errorId}>{errorMessage}</Error>
-        )}
-      </div>
+        }
+        inputWrapperProps={{
+          ...inputWrapperProps,
+          role: 'combobox',
+          tabIndex: -1,
+        }}
+        {...rest}
+      >
+        {children}
+      </FormField>
     );
   },
 );
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts b/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
index dc4ab465c4..fb5e4f38cb 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
@@ -1,6 +1,6 @@
 import { MouseEventHandler } from 'react';
 
-import { HTMLElementProps } from '@leafygreen-ui/lib';
+import { FormFieldProps } from '@leafygreen-ui/form-field';
 
 export const InputState = {
   Unset: 'unset',
@@ -9,17 +9,7 @@ export const InputState = {
 
 export type InputState = (typeof InputState)[keyof typeof InputState];
 
-export interface DateFormFieldProps extends HTMLElementProps<'div'> {
-  label?: React.ReactNode;
-  description?: React.ReactNode;
-  state?: InputState;
-  errorMessage?: string;
-  inputId: string;
-  labelId?: string;
-  descriptionId?: string;
-  errorId?: string;
-  /** Fired when the input wrapper is clicked (not any surrounding text) */
-  onInputClick?: MouseEventHandler<HTMLDivElement>;
+export type DateFormFieldProps = FormFieldProps & {
   /** Fired then the calendar icon button is clicked */
   onIconButtonClick?: MouseEventHandler<HTMLButtonElement>;
-}
+};
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index 1af8f46921..e2bf91eea1 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { createRef, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { StoryFn } from '@storybook/react';
 import { isValid } from 'date-fns';
 
@@ -49,11 +49,6 @@ const meta: StoryMetaType<typeof DatePickerInput, DatePickerContextProps> = {
     label: 'Label',
     dateFormat: 'en-UK',
     timeZone: 'Europe/London',
-    segmentRefs: {
-      day: createRef(),
-      month: createRef(),
-      year: createRef(),
-    },
   },
   argTypes: {
     value: { control: 'date' },
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 0408f497df..25955d2422 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -5,7 +5,6 @@ import React, {
   MouseEventHandler,
 } from 'react';
 
-import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
 
 import { DateFormField, DateInputBox } from '../../DateInput';
@@ -31,15 +30,18 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     }: DatePickerInputProps,
     fwdRef,
   ) => {
-    const { label, description, formatParts, disabled, setOpen, setIsDirty } =
-      useDatePickerContext();
+    const {
+      label,
+      description,
+      menuId,
+      formatParts,
+      disabled,
+      isOpen,
+      setOpen,
+      setIsDirty,
+    } = useDatePickerContext();
     const segmentRefs = useSegmentRefs();
 
-    const labelId = useIdAllocator({ prefix: 'lg-date-label' });
-    const descriptionId = useIdAllocator({ prefix: 'lg-date-description' });
-    const errorId = useIdAllocator({ prefix: 'lg-date-description' });
-    const inputId = useIdAllocator({ prefix: 'lg-date-input' });
-
     /** Called when the input, or any of its children, is clicked */
     const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
       if (!disabled) {
@@ -157,23 +159,22 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
     return (
       <DateFormField
+        ref={fwdRef}
         label={label}
         description={description}
-        inputId={inputId}
-        labelId={labelId}
-        descriptionId={descriptionId}
-        errorId={errorId}
-        ref={fwdRef}
-        onInputClick={handleInputClick}
+        disabled={disabled}
         onKeyDown={handleKeyDown}
         onBlur={handleInputBlur}
+        inputWrapperProps={{
+          onClick: handleInputClick,
+          'aria-expanded': isOpen,
+          'aria-controls': menuId,
+        }}
         {...rest}
       >
         <DateInputBox
           value={value}
           setValue={setValue}
-          id={inputId}
-          labelledBy={labelId}
           segmentRefs={segmentRefs}
           onSegmentChange={onSegmentChange}
         />
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index 571b6f11af..262ab4ebbe 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -10,9 +10,12 @@ import { DateRangeInputProps } from './DateRangeInput.types';
 const EN_DASH = '–';
 
 export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
-  (props: DateRangeInputProps) => {
-    const { label, description, formatParts, disabled, setOpen, setIsDirty } =
-      useDatePickerContext();
+  (_props: DateRangeInputProps) => {
+    const {
+      label,
+      description,
+      // formatParts, disabled, setOpen, setIsDirty
+    } = useDatePickerContext();
 
     const startSegmentRefs = useSegmentRefs();
     const endSegmentRefs = useSegmentRefs();
diff --git a/packages/date-picker/tsconfig.json b/packages/date-picker/tsconfig.json
index 84a6d55723..8a43dbc9e5 100644
--- a/packages/date-picker/tsconfig.json
+++ b/packages/date-picker/tsconfig.json
@@ -21,6 +21,9 @@
     {
       "path": "../hooks"
     },
+    {
+      "path": "../form-field"
+    },
     {
       "path": "../icon"
     },
diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx
index 97ba6bf807..d18ee518c8 100644
--- a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx
+++ b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx
@@ -67,7 +67,6 @@ export const FormFieldInputWrapper = forwardRef<
         )}
         {icon &&
           React.cloneElement(icon, {
-            role: 'presentation',
             className: cx(
               iconClassName,
               iconStyles[theme],

From d3e543ac4858d3bb825da6d54709a091049ff4c3 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 18:54:12 -0400
Subject: [PATCH 159/351] lint

---
 .../FormFieldInputWrapper/FormFieldInputWrapper.spec.tsx   | 7 ++-----
 .../FormFieldInputWrapper/FormFieldInputWrapper.styles.ts  | 1 -
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.spec.tsx b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.spec.tsx
index 51f9c39dee..5537e5d0c1 100644
--- a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.spec.tsx
+++ b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.spec.tsx
@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { FormFieldInputWrapper } from '.';
 
 describe('packages/form-field-input-wrapper', () => {
-  test('condition', () => {
-
-  })
-})
+  test('condition', () => {});
+});
diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.styles.ts b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.styles.ts
index 928608f58d..356c065c34 100644
--- a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.styles.ts
+++ b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.styles.ts
@@ -1,4 +1,3 @@
-
 import { css } from '@leafygreen-ui/emotion';
 
 export const baseStyles = css``;

From f3806f556490b22c67584590c23c9b85005245c8 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 29 Sep 2023 18:54:54 -0400
Subject: [PATCH 160/351] rm explicit presentation role from icon

---
 .../FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx
index 97ba6bf807..d18ee518c8 100644
--- a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx
+++ b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx
@@ -67,7 +67,6 @@ export const FormFieldInputWrapper = forwardRef<
         )}
         {icon &&
           React.cloneElement(icon, {
-            role: 'presentation',
             className: cx(
               iconClassName,
               iconStyles[theme],

From 3a529db46d7f568643b30ef69710d62a7ec28b1c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 3 Oct 2023 14:00:57 -0400
Subject: [PATCH 161/351] update dependencies. fix stories

---
 packages/form-field/package.json              | 2 +-
 packages/form-field/src/FormField.stories.tsx | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/form-field/package.json b/packages/form-field/package.json
index 402d3314b6..e4d3e24baa 100644
--- a/packages/form-field/package.json
+++ b/packages/form-field/package.json
@@ -1,4 +1,3 @@
-  
 {
   "name": "@leafygreen-ui/form-field",
   "version": "0.1.0",
@@ -20,6 +19,7 @@
     "@leafygreen-ui/hooks": "^8.0.0",
     "@leafygreen-ui/icon": "^11.24.0",
     "@leafygreen-ui/lib": "^12.0.0",
+    "@leafygreen-ui/palette": "^4.0.7",
     "@leafygreen-ui/tokens": "^2.2.0",
     "@leafygreen-ui/typography": "^17.0.1"
   },
diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index edf586ab7f..8e0496b275 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -30,6 +30,9 @@ const meta: StoryMetaType<typeof FormField> = {
         disabled: [false, true],
       },
       excludeCombinations: [{}],
+      args: {
+        children: <input placeholder="placeholder" />,
+      },
       decorator: (Instance, ctx) => (
         <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
           <Instance />
@@ -46,6 +49,7 @@ const meta: StoryMetaType<typeof FormField> = {
     glyph: 'Beaker',
   },
   argTypes: {
+    darkMode: { control: 'boolean' },
     label: { control: 'text' },
     description: { control: 'text' },
     errorMessage: { control: 'text' },

From 691478a05ac038d5d069a45b9539e45bc2bb4dbc Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 3 Oct 2023 14:32:22 -0400
Subject: [PATCH 162/351] Refactor to use composition

---
 packages/form-field/src/FormField.stories.tsx | 78 +++++++++++++------
 .../form-field/src/FormField/FormField.tsx    | 78 +++++++------------
 .../src/FormField/FormField.types.ts          |  2 -
 .../FormFieldContext/FormFieldContext.tsx     | 36 +++++++++
 .../FormFieldInput.spec.tsx}                  |  2 +-
 .../FormFieldInput.styles.ts}                 |  0
 .../FormFieldInput.tsx}                       | 28 +++----
 .../FormFieldInput/FormFieldInput.types.ts    |  8 ++
 .../src/FormField/FormFieldInput/index.ts     |  2 +
 .../FormFieldInputWrapper.types.ts            | 13 ----
 .../FormField/FormFieldInputWrapper/index.ts  |  2 -
 .../src/FormField/useFormFieldProps.ts        | 53 +++++++++++++
 12 files changed, 190 insertions(+), 112 deletions(-)
 create mode 100644 packages/form-field/src/FormField/FormFieldContext/FormFieldContext.tsx
 rename packages/form-field/src/FormField/{FormFieldInputWrapper/FormFieldInputWrapper.spec.tsx => FormFieldInput/FormFieldInput.spec.tsx} (79%)
 rename packages/form-field/src/FormField/{FormFieldInputWrapper/FormFieldInputWrapper.styles.ts => FormFieldInput/FormFieldInput.styles.ts} (100%)
 rename packages/form-field/src/FormField/{FormFieldInputWrapper/FormFieldInputWrapper.tsx => FormFieldInput/FormFieldInput.tsx} (73%)
 create mode 100644 packages/form-field/src/FormField/FormFieldInput/FormFieldInput.types.ts
 create mode 100644 packages/form-field/src/FormField/FormFieldInput/index.ts
 delete mode 100644 packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.types.ts
 delete mode 100644 packages/form-field/src/FormField/FormFieldInputWrapper/index.ts
 create mode 100644 packages/form-field/src/FormField/useFormFieldProps.ts

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index 8e0496b275..d7afbaf1bd 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -10,6 +10,7 @@ import { StoryMetaType } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 
 import { FormFieldProps, FormFieldState } from './FormField/FormField.types';
+import { FormFieldInput } from './FormField/FormFieldInput';
 import { FormField } from '.';
 
 const meta: StoryMetaType<typeof FormField> = {
@@ -35,7 +36,11 @@ const meta: StoryMetaType<typeof FormField> = {
       },
       decorator: (Instance, ctx) => (
         <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-          <Instance />
+          <Instance>
+            <FormFieldInput icon={ctx?.args.icon}>
+              {ctx?.args.children}
+            </FormFieldInput>
+          </Instance>
         </LeafyGreenProvider>
       ),
     },
@@ -62,33 +67,60 @@ const meta: StoryMetaType<typeof FormField> = {
 export default meta;
 
 type FormFieldStoryProps = FormFieldProps & { glyph: string };
-export const Basic: StoryFn<FormFieldStoryProps> = (
-  props: FormFieldStoryProps,
-) => (
-  <FormField {...props} icon={<Icon glyph={props.glyph} />}>
-    <input placeholder="placeholder" />
+export const Basic: StoryFn<FormFieldStoryProps> = ({
+  label,
+  description,
+  state,
+  size,
+  disabled,
+  glyph,
+  ...rest
+}: FormFieldStoryProps) => (
+  <FormField
+    label={label}
+    description={description}
+    state={state}
+    size={size}
+    disabled={disabled}
+    {...rest}
+  >
+    <FormFieldInput role="combobox" tabIndex={-1} icon={<Icon glyph={glyph} />}>
+      <input placeholder="placeholder" />
+    </FormFieldInput>
   </FormField>
 );
 
-export const WithIconButton: StoryFn<FormFieldStoryProps> = (
-  props: FormFieldStoryProps,
-) => (
+export const WithIconButton: StoryFn<FormFieldStoryProps> = ({
+  label,
+  description,
+  state,
+  size,
+  disabled,
+  glyph,
+  ...rest
+}: FormFieldStoryProps) => (
   <FormField
-    {...props}
-    inputWrapperProps={{
-      className: css`
-        padding-inline-end: 4px;
-      `,
-      role: 'combobox',
-      tabIndex: -1,
-    }}
-    icon={
-      <IconButton aria-label="Icon">
-        <Icon glyph={props.glyph} />
-      </IconButton>
-    }
+    label={label}
+    description={description}
+    state={state}
+    size={size}
+    disabled={disabled}
+    {...rest}
   >
-    <input placeholder="placeholder" />
+    <FormFieldInput
+      className={css`
+        padding-inline-end: 4px;
+      `}
+      role="combobox"
+      tabIndex={-1}
+      icon={
+        <IconButton aria-label="Icon">
+          <Icon glyph={glyph} />
+        </IconButton>
+      }
+    >
+      <input placeholder="placeholder" />
+    </FormFieldInput>
   </FormField>
 );
 
diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
index 3eaa0dcbde..85c70115ca 100644
--- a/packages/form-field/src/FormField/FormField.tsx
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
-import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { Size } from '@leafygreen-ui/tokens';
 import {
   Description,
@@ -10,9 +9,10 @@ import {
   useUpdatedBaseFontSize,
 } from '@leafygreen-ui/typography';
 
+import { FormFieldProvider } from './FormFieldContext/FormFieldContext';
 import { formFieldFontStyles, textContainerStyle } from './FormField.styles';
 import { type FormFieldProps, FormFieldState } from './FormField.types';
-import { FormFieldInputWrapper } from './FormFieldInputWrapper';
+import { useFormFieldProps } from './useFormFieldProps';
 
 export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
   (
@@ -24,67 +24,41 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
       size = Size.Default,
       disabled = false,
       errorMessage,
-      icon,
       className,
-      inputWrapperProps,
       ...rest
     }: FormFieldProps,
     fwdRef,
   ) => {
     const baseFontSize = useUpdatedBaseFontSize();
 
-    const labelId = useIdAllocator({ prefix: 'lg-form-field-label' });
-    const descriptionId = useIdAllocator({
-      prefix: 'lg-form-field-description',
-    });
-    const errorId = useIdAllocator({ prefix: 'lg-form-field-description' });
-    const inputId = useIdAllocator({ prefix: 'lg-form-field-input' });
-
-    const ariaLabelledby = label ? labelId : rest['aria-labelledby'];
-    const ariaLabel = label ? '' : rest['aria-label'];
-    const describedBy = `${description ? descriptionId : ''} ${
-      state === FormFieldState.Error ? errorId : ''
-    }`.trim();
-
-    const renderedChildren =
-      children &&
-      React.cloneElement(children, {
-        id: inputId,
-        'aria-labelledby': ariaLabelledby,
-        'aria-describedby': describedBy,
-        'aria-label': ariaLabel,
-      });
+    const { labelId, descriptionId, errorId, inputId, inputProps } =
+      useFormFieldProps({ label, description, state, ...rest });
 
     return (
-      <div
-        className={cx(formFieldFontStyles[baseFontSize], className)}
-        ref={fwdRef}
-        {...rest}
-      >
-        <div className={textContainerStyle}>
-          {label && (
-            <Label htmlFor={inputId} id={labelId} disabled={disabled}>
-              {label}
-            </Label>
-          )}
-          {description && (
-            <Description id={descriptionId} disabled={disabled}>
-              {description}
-            </Description>
+      <FormFieldProvider value={{ disabled, size, state, inputProps }}>
+        <div
+          className={cx(formFieldFontStyles[baseFontSize], className)}
+          ref={fwdRef}
+          {...rest}
+        >
+          <div className={textContainerStyle}>
+            {label && (
+              <Label htmlFor={inputId} id={labelId} disabled={disabled}>
+                {label}
+              </Label>
+            )}
+            {description && (
+              <Description id={descriptionId} disabled={disabled}>
+                {description}
+              </Description>
+            )}
+          </div>
+          {children}
+          {state === FormFieldState.Error && (
+            <Error id={errorId}>{errorMessage}</Error>
           )}
         </div>
-        <FormFieldInputWrapper
-          input={renderedChildren}
-          icon={icon}
-          disabled={disabled}
-          size={size}
-          state={state}
-          {...inputWrapperProps}
-        />
-        {state === FormFieldState.Error && (
-          <Error id={errorId}>{errorMessage}</Error>
-        )}
-      </div>
+      </FormFieldProvider>
     );
   },
 );
diff --git a/packages/form-field/src/FormField/FormField.types.ts b/packages/form-field/src/FormField/FormField.types.ts
index 411ef89352..9b74d41916 100644
--- a/packages/form-field/src/FormField/FormField.types.ts
+++ b/packages/form-field/src/FormField/FormField.types.ts
@@ -46,6 +46,4 @@ export type FormFieldProps = Omit<HTMLElementProps<'div'>, 'children'> &
     size?: Size;
     disabled?: boolean;
     errorMessage?: React.ReactNode;
-    icon?: React.ReactElement;
-    inputWrapperProps?: FormFieldInputWrapperProps;
   };
diff --git a/packages/form-field/src/FormField/FormFieldContext/FormFieldContext.tsx b/packages/form-field/src/FormField/FormFieldContext/FormFieldContext.tsx
new file mode 100644
index 0000000000..d663f62458
--- /dev/null
+++ b/packages/form-field/src/FormField/FormFieldContext/FormFieldContext.tsx
@@ -0,0 +1,36 @@
+import React, { PropsWithChildren, useContext } from 'react';
+
+import { Size } from '@leafygreen-ui/tokens';
+
+import { FormFieldState } from '../FormField.types';
+import { FormFieldInputElementProps } from '../useFormFieldProps';
+
+interface FormFieldContextProps {
+  disabled: boolean;
+  size: Size;
+  state: FormFieldState;
+  inputProps?: FormFieldInputElementProps;
+}
+
+const defaultFormFieldContext = {
+  disabled: false,
+  size: Size.Default,
+  state: FormFieldState.Unset,
+};
+
+const FormFieldContext = React.createContext<FormFieldContextProps>(
+  defaultFormFieldContext,
+);
+
+export const FormFieldProvider = ({
+  value,
+  children,
+}: PropsWithChildren<{
+  value: FormFieldContextProps;
+}>) => (
+  <FormFieldContext.Provider value={value}>
+    {children}
+  </FormFieldContext.Provider>
+);
+
+export const useFormFieldContext = () => useContext(FormFieldContext);
diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.spec.tsx b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.spec.tsx
similarity index 79%
rename from packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.spec.tsx
rename to packages/form-field/src/FormField/FormFieldInput/FormFieldInput.spec.tsx
index 5537e5d0c1..e1f297b318 100644
--- a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.spec.tsx
+++ b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { FormFieldInputWrapper } from '.';
+import { FormFieldInput } from '.';
 
 describe('packages/form-field-input-wrapper', () => {
   test('condition', () => {});
diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.styles.ts b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.styles.ts
similarity index 100%
rename from packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.styles.ts
rename to packages/form-field/src/FormField/FormFieldInput/FormFieldInput.styles.ts
diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx
similarity index 73%
rename from packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx
rename to packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx
index d18ee518c8..c705e1e0dc 100644
--- a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.tsx
+++ b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx
@@ -18,26 +18,16 @@ import {
   inputWrapperStateStyles,
 } from '../FormField.styles';
 import { FormFieldState } from '../FormField.types';
+import { useFormFieldContext } from '../FormFieldContext/FormFieldContext';
 
-import { FormFieldInputWrapperProps } from './FormFieldInputWrapper.types';
+import { FormFieldInputProps } from './FormFieldInput.types';
 
-export const FormFieldInputWrapper = forwardRef<
-  HTMLDivElement,
-  FormFieldInputWrapperProps
->(
-  (
-    {
-      input,
-      icon,
-      size,
-      state,
-      disabled,
-      className,
-      ...rest
-    }: FormFieldInputWrapperProps,
-    fwdRef,
-  ) => {
+export const FormFieldInput = forwardRef<HTMLDivElement, FormFieldInputProps>(
+  ({ icon, className, children, ...rest }: FormFieldInputProps, fwdRef) => {
     const { theme } = useDarkMode();
+    const { disabled, size, state, inputProps } = useFormFieldContext();
+
+    const renderedChildren = React.cloneElement(children, inputProps);
 
     return (
       <div
@@ -56,7 +46,7 @@ export const FormFieldInputWrapper = forwardRef<
           className,
         )}
       >
-        <div className={childrenWrapperStyles}>{input}</div>
+        <div className={childrenWrapperStyles}>{renderedChildren}</div>
         {state === FormFieldState.Error && (
           <Icon
             role="presentation"
@@ -79,4 +69,4 @@ export const FormFieldInputWrapper = forwardRef<
   },
 );
 
-FormFieldInputWrapper.displayName = 'FormFieldInputWrapper';
+FormFieldInput.displayName = 'FormFieldInputWrapper';
diff --git a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.types.ts b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.types.ts
new file mode 100644
index 0000000000..d16b587557
--- /dev/null
+++ b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.types.ts
@@ -0,0 +1,8 @@
+import { HTMLElementProps } from '@leafygreen-ui/lib';
+
+import { FormFieldChildren } from '../FormField.types';
+
+export interface FormFieldInputProps extends HTMLElementProps<'div'> {
+  children: FormFieldChildren;
+  icon?: React.ReactElement;
+}
diff --git a/packages/form-field/src/FormField/FormFieldInput/index.ts b/packages/form-field/src/FormField/FormFieldInput/index.ts
new file mode 100644
index 0000000000..290dd4e09b
--- /dev/null
+++ b/packages/form-field/src/FormField/FormFieldInput/index.ts
@@ -0,0 +1,2 @@
+export { FormFieldInput } from './FormFieldInput';
+export { FormFieldInputProps } from './FormFieldInput.types';
diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.types.ts b/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.types.ts
deleted file mode 100644
index 703f417d02..0000000000
--- a/packages/form-field/src/FormField/FormFieldInputWrapper/FormFieldInputWrapper.types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { HTMLElementProps } from '@leafygreen-ui/lib';
-import { Size } from '@leafygreen-ui/tokens';
-
-import { FormFieldChildren, FormFieldState } from '../FormField.types';
-
-export interface FormFieldInputWrapperProps
-  extends Omit<HTMLElementProps<'div'>, 'children'> {
-  input: FormFieldChildren;
-  disabled: boolean;
-  size: Size;
-  state: FormFieldState;
-  icon?: React.ReactElement;
-}
diff --git a/packages/form-field/src/FormField/FormFieldInputWrapper/index.ts b/packages/form-field/src/FormField/FormFieldInputWrapper/index.ts
deleted file mode 100644
index 4ac9cc3a4d..0000000000
--- a/packages/form-field/src/FormField/FormFieldInputWrapper/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { FormFieldInputWrapper } from './FormFieldInputWrapper';
-export { FormFieldInputWrapperProps } from './FormFieldInputWrapper.types';
diff --git a/packages/form-field/src/FormField/useFormFieldProps.ts b/packages/form-field/src/FormField/useFormFieldProps.ts
new file mode 100644
index 0000000000..7182e99fcf
--- /dev/null
+++ b/packages/form-field/src/FormField/useFormFieldProps.ts
@@ -0,0 +1,53 @@
+import { useIdAllocator } from '@leafygreen-ui/hooks';
+
+import { FormFieldProps, FormFieldState } from './FormField.types';
+
+export interface FormFieldInputElementProps {
+  id: string;
+  'aria-describedby': string;
+  'aria-labelledby'?: string;
+  'aria-label'?: string;
+}
+
+export interface FormFieldElementProps {
+  labelId: string;
+  descriptionId: string;
+  errorId: string;
+  inputId: string;
+  inputProps: FormFieldInputElementProps;
+}
+
+export const useFormFieldProps = ({
+  label,
+  description,
+  state,
+  ...rest
+}: Partial<FormFieldProps>): FormFieldElementProps => {
+  const labelId = useIdAllocator({ prefix: 'lg-form-field-label' });
+  const descriptionId = useIdAllocator({
+    prefix: 'lg-form-field-description',
+  });
+  const errorId = useIdAllocator({ prefix: 'lg-form-field-description' });
+  const inputId = useIdAllocator({ prefix: 'lg-form-field-input' });
+
+  const ariaLabelledby = label ? labelId : rest['aria-labelledby'];
+  const ariaLabel = label ? '' : rest['aria-label'];
+  const describedBy = `${description ? descriptionId : ''} ${
+    state === FormFieldState.Error ? errorId : ''
+  }`.trim();
+
+  const inputProps: FormFieldInputElementProps = {
+    id: inputId,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': describedBy,
+    'aria-label': ariaLabel,
+  };
+
+  return {
+    labelId,
+    descriptionId,
+    errorId,
+    inputId,
+    inputProps,
+  };
+};

From d4eb45ea9132abbf2ca16ed830807b3cb97d56e0 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 3 Oct 2023 14:51:42 -0400
Subject: [PATCH 163/351] erefactor styles

---
 packages/form-field/src/FormField.stories.tsx |   4 -
 .../src/FormField/FormField.styles.ts         | 290 +---------------
 .../FormFieldInput/FormFieldInput.styles.ts   | 320 +++++++++++++++++-
 .../FormFieldInput/FormFieldInput.tsx         |  14 +-
 4 files changed, 329 insertions(+), 299 deletions(-)

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index d7afbaf1bd..1eaa6c67df 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -2,7 +2,6 @@
 import React from 'react';
 import { StoryFn } from '@storybook/react';
 
-import { css } from '@leafygreen-ui/emotion';
 import Icon, { glyphs } from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
@@ -108,9 +107,6 @@ export const WithIconButton: StoryFn<FormFieldStoryProps> = ({
     {...rest}
   >
     <FormFieldInput
-      className={css`
-        padding-inline-end: 4px;
-      `}
       role="combobox"
       tabIndex={-1}
       icon={
diff --git a/packages/form-field/src/FormField/FormField.styles.ts b/packages/form-field/src/FormField/FormField.styles.ts
index 55552179d4..8f1493ad26 100644
--- a/packages/form-field/src/FormField/FormField.styles.ts
+++ b/packages/form-field/src/FormField/FormField.styles.ts
@@ -1,21 +1,5 @@
 import { css } from '@leafygreen-ui/emotion';
-import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
-import { palette } from '@leafygreen-ui/palette';
-import {
-  BaseFontSize,
-  focusRing,
-  fontFamilies,
-  fontWeights,
-  hoverRing,
-  Size,
-  spacing,
-  transitionDuration,
-  typeScales,
-} from '@leafygreen-ui/tokens';
-
-import { FormFieldState } from './FormField.types';
-
-export const iconClassName = createUniqueClassName('calendar-button');
+import { BaseFontSize, spacing, typeScales } from '@leafygreen-ui/tokens';
 
 export const formFieldFontStyles: Record<BaseFontSize, string> = {
   [BaseFontSize.Body1]: css`
@@ -33,275 +17,3 @@ export const textContainerStyle = css`
   flex-direction: column;
   margin-bottom: ${spacing[1]}px;
 `;
-
-const autofillShadowOverride = (color: string) => `0 0 0 100px ${color} inset`;
-
-export const inputWrapperBaseStyles = css`
-  display: flex;
-  align-items: center;
-  gap: ${spacing[1]}px;
-  font-size: inherit;
-  line-height: inherit;
-  font-family: ${fontFamilies.default};
-  width: 100%;
-  height: 36px;
-  font-weight: ${fontWeights.regular};
-  border: 1px solid;
-  z-index: 1;
-  outline: none;
-  border-radius: 6px;
-  transition: ${transitionDuration.default}ms ease-in-out;
-  transition-property: border-color, box-shadow;
-  z-index: 0;
-
-  & input {
-    outline: none;
-    border: none;
-    font-family: ${fontFamilies.default};
-  }
-`;
-
-export const inputWrapperModeStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
-    color: ${palette.black};
-    background: ${palette.white};
-    border: 1px solid ${palette.gray.base};
-
-    &:hover,
-    &:active {
-      &:not([aria-disabled='true']):not(:focus) {
-        box-shadow: ${hoverRing.light.gray};
-      }
-    }
-
-    & input:-webkit-autofill {
-      color: ${palette.black};
-      background: ${palette.white};
-      border: 1px solid ${palette.gray.base};
-      -webkit-text-fill-color: ${palette.black};
-      box-shadow: ${autofillShadowOverride(palette.white)};
-
-      &:not([aria-disabled='true']):focus {
-        box-shadow: ${autofillShadowOverride(palette.white)},
-          ${focusRing.light.input};
-        border-color: ${palette.white};
-      }
-
-      &:not([aria-disabled='true']):hover:not(:focus) {
-        box-shadow: ${autofillShadowOverride(palette.white)},
-          ${hoverRing.light.gray};
-      }
-    }
-
-    & input::placeholder {
-      color: ${palette.gray.light1};
-      font-weight: ${fontWeights.regular};
-    }
-  `,
-  [Theme.Dark]: css`
-    color: ${palette.gray.light3};
-    background-color: ${palette.gray.dark4};
-    border: 1px solid ${palette.gray.base};
-
-    &:hover,
-    &:active {
-      &:not([aria-disabled='true']):not(:focus) {
-        box-shadow: ${hoverRing.dark.gray};
-      }
-    }
-
-    & input:-webkit-autofill {
-      border: 1px solid ${palette.gray.base};
-      color: ${palette.gray.light3};
-      background: ${palette.gray.dark4};
-      -webkit-text-fill-color: ${palette.gray.light3};
-      box-shadow: ${autofillShadowOverride(palette.gray.dark4)};
-
-      &:not([aria-disabled='true']):focus {
-        box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
-          ${focusRing.dark.input};
-        border-color: ${palette.blue.light1};
-      }
-
-      &:not([aria-disabled='true']):hover:not(:focus) {
-        box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
-          ${hoverRing.dark.gray};
-      }
-    }
-
-    & input::placeholder {
-      color: ${palette.gray.dark1};
-      font-weight: ${fontWeights.regular};
-    }
-  `,
-};
-
-const focusSelector = (styles: string) => css`
-  @supports selector(:has(a, b)) {
-    &:not([aria-disabled='true']):focus-within:not(
-        :has(.${iconClassName}:focus)
-      ) {
-      ${styles}
-    }
-  }
-
-  /* Fallback for when "has" is unsupported */
-  @supports not selector(:has(a, b)) {
-    &:not([aria-disabled='true']):focus-within {
-      ${styles}
-    }
-  }
-`;
-
-export const inputWrapperFocusStyles: Record<Theme, string> = {
-  [Theme.Light]: focusSelector(`
-     {
-      box-shadow: ${focusRing.light.input};
-      border-color: ${palette.white};
-    }
-  `),
-  [Theme.Dark]: focusSelector(`
-     {
-      box-shadow: ${focusRing.dark.input};
-      border-color: ${palette.gray.dark4};
-    }
-  `),
-};
-
-export const inputWrapperSizeStyles: Record<Size, string> = {
-  [Size.XSmall]: css`
-    height: 22px;
-    padding-inline: 10px;
-  `,
-  [Size.Small]: css`
-    height: 28px;
-    padding-inline: 10px;
-  `,
-  [Size.Default]: css`
-    height: 36px;
-    padding-inline: 12px;
-  `,
-  [Size.Large]: css`
-    height: 48px;
-    padding-inline: 16px;
-  `,
-};
-
-export const inputWrapperStateStyles: Record<
-  FormFieldState,
-  Record<Theme, string>
-> = {
-  [FormFieldState.Error]: {
-    [Theme.Light]: css`
-      &:not([aria-disabled='true']) {
-        border-color: ${palette.red.base};
-
-        &:hover,
-        &:active {
-          &:not([aria-disabled='true']):not(:focus) {
-            box-shadow: ${hoverRing.light.red};
-          }
-        }
-      }
-    `,
-    [Theme.Dark]: css`
-      &:not([aria-disabled='true']) {
-        border-color: ${palette.red.light1};
-
-        &:hover,
-        &:active {
-          &:not([aria-disabled='true']):not(:focus) {
-            box-shadow: ${hoverRing.dark.red};
-          }
-        }
-      }
-    `,
-  },
-  [FormFieldState.Unset]: {
-    [Theme.Light]: css``,
-    [Theme.Dark]: css``,
-  },
-  [FormFieldState.Valid]: {
-    // TODO:
-    [Theme.Light]: css``,
-    [Theme.Dark]: css``,
-  },
-};
-
-export const inputWrapperDisabledStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
-    cursor: not-allowed;
-    background-color: ${palette.gray.light2};
-    border-color: ${palette.gray.light1};
-
-    & input {
-      cursor: not-allowed;
-      pointer-events: none;
-      color: ${palette.gray.base};
-
-      &::placeholder {
-        color: inherit;
-      }
-
-      &:-webkit-autofill {
-        &,
-        &:hover,
-        &:focus {
-          appearance: none;
-          border: 1px solid ${palette.gray.base};
-          -webkit-text-fill-color: ${palette.gray.base};
-          box-shadow: ${autofillShadowOverride(palette.gray.light2)};
-        }
-      }
-    }
-  `,
-  [Theme.Dark]: css`
-    cursor: not-allowed;
-    color: ${palette.gray.dark2};
-    background-color: ${palette.gray.dark3};
-    border-color: ${palette.gray.dark2};
-
-    & input {
-      cursor: not-allowed;
-      pointer-events: none;
-      color: ${palette.gray.dark2};
-
-      &::placeholder {
-        color: inherit;
-      }
-
-      &:-webkit-autofill {
-        &,
-        &:hover,
-        &:focus {
-          appearance: none;
-          border: 1px solid ${palette.gray.dark1};
-          -webkit-text-fill-color: ${palette.gray.dark1};
-          box-shadow: ${autofillShadowOverride(palette.gray.dark2)};
-        }
-      }
-    }
-  `,
-};
-
-export const childrenWrapperStyles = css`
-  width: 100%;
-`;
-
-export const iconStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
-    color: ${palette.gray.base};
-  `,
-  [Theme.Dark]: css`
-    color: ${palette.gray.base};
-  `,
-};
-
-export const errorIconStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
-    color: ${palette.red.base};
-  `,
-  [Theme.Dark]: css`
-    color: ${palette.red.light1};
-  `,
-};
diff --git a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.styles.ts b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.styles.ts
index 356c065c34..0a8b8b110a 100644
--- a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.styles.ts
+++ b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.styles.ts
@@ -1,3 +1,321 @@
 import { css } from '@leafygreen-ui/emotion';
+import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+import {
+  focusRing,
+  fontFamilies,
+  fontWeights,
+  hoverRing,
+  Size,
+  spacing,
+  transitionDuration,
+} from '@leafygreen-ui/tokens';
 
-export const baseStyles = css``;
+import { FormFieldState } from '../FormField.types';
+
+export const inputElementClassName = createUniqueClassName('form-field-input');
+export const iconClassName = createUniqueClassName('form-field-icon');
+const autofillShadowOverride = (color: string) => `0 0 0 100px ${color} inset`;
+
+export const inputWrapperBaseStyles = css`
+  display: flex;
+  align-items: center;
+  gap: ${spacing[1]}px;
+  font-size: inherit;
+  line-height: inherit;
+  font-family: ${fontFamilies.default};
+  width: 100%;
+  height: 36px;
+  font-weight: ${fontWeights.regular};
+  border: 1px solid;
+  z-index: 1;
+  outline: none;
+  border-radius: 6px;
+  transition: ${transitionDuration.default}ms ease-in-out;
+  transition-property: border-color, box-shadow;
+  z-index: 0;
+
+  & .${inputElementClassName} {
+    font-family: ${fontFamilies.default};
+    color: inherit;
+    background-color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    outline: none;
+    border: none;
+  }
+
+  & .${iconClassName} svg,
+  & svg {
+    min-height: 16px;
+    min-width: 16px;
+  }
+`;
+
+export const inputWrapperModeStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.black};
+    background: ${palette.white};
+    border: 1px solid ${palette.gray.base};
+
+    &:hover,
+    &:active {
+      &:not([aria-disabled='true']):not(:focus) {
+        box-shadow: ${hoverRing.light.gray};
+      }
+    }
+
+    & .${inputElementClassName} {
+      &:-webkit-autofill {
+        color: ${palette.black};
+        background: ${palette.white};
+        border: 1px solid ${palette.gray.base};
+        -webkit-text-fill-color: ${palette.black};
+        box-shadow: ${autofillShadowOverride(palette.white)};
+
+        &:not([aria-disabled='true']):focus {
+          box-shadow: ${autofillShadowOverride(palette.white)},
+            ${focusRing.light.input};
+          border-color: ${palette.white};
+        }
+
+        &:not([aria-disabled='true']):hover:not(:focus) {
+          box-shadow: ${autofillShadowOverride(palette.white)},
+            ${hoverRing.light.gray};
+        }
+      }
+
+      &::placeholder {
+        color: ${palette.gray.light1};
+        font-weight: ${fontWeights.regular};
+      }
+    }
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.gray.light3};
+    background-color: ${palette.gray.dark4};
+    border: 1px solid ${palette.gray.base};
+
+    &:hover,
+    &:active {
+      &:not([aria-disabled='true']):not(:focus) {
+        box-shadow: ${hoverRing.dark.gray};
+      }
+    }
+
+    & .${inputElementClassName} {
+      &:-webkit-autofill {
+        border: 1px solid ${palette.gray.base};
+        color: ${palette.gray.light3};
+        background: ${palette.gray.dark4};
+        -webkit-text-fill-color: ${palette.gray.light3};
+        box-shadow: ${autofillShadowOverride(palette.gray.dark4)};
+
+        &:not([aria-disabled='true']):focus {
+          box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
+            ${focusRing.dark.input};
+          border-color: ${palette.blue.light1};
+        }
+
+        &:not([aria-disabled='true']):hover:not(:focus) {
+          box-shadow: ${autofillShadowOverride(palette.gray.dark4)},
+            ${hoverRing.dark.gray};
+        }
+      }
+
+      &::placeholder {
+        color: ${palette.gray.dark1};
+        font-weight: ${fontWeights.regular};
+      }
+    }
+  `,
+};
+
+const focusSelector = (styles: string) => css`
+  @supports selector(:has(a, b)) {
+    &:not([aria-disabled='true']):focus-within:not(
+        :has(.${iconClassName}:focus)
+      ) {
+      ${styles}
+    }
+  }
+
+  /* Fallback for when "has" is unsupported */
+  @supports not selector(:has(a, b)) {
+    &:not([aria-disabled='true']):focus-within {
+      ${styles}
+    }
+  }
+`;
+
+export const inputWrapperFocusStyles: Record<Theme, string> = {
+  [Theme.Light]: focusSelector(`
+     {
+      box-shadow: ${focusRing.light.input};
+      border-color: ${palette.white};
+    }
+  `),
+  [Theme.Dark]: focusSelector(`
+     {
+      box-shadow: ${focusRing.dark.input};
+      border-color: ${palette.gray.dark4};
+    }
+  `),
+};
+
+/** Selector that is true if the icon element passed in is a button */
+const iconIsButtonSelector = `&:has(button.${iconClassName})`;
+
+export const inputWrapperSizeStyles: Record<Size, string> = {
+  [Size.XSmall]: css`
+    height: 22px;
+    padding-inline: 10px;
+
+    ${iconIsButtonSelector} {
+      padding-inline-end: 4px;
+    }
+  `,
+  [Size.Small]: css`
+    height: 28px;
+    padding-inline: 10px;
+
+    ${iconIsButtonSelector} {
+      padding-inline-end: 4px;
+    }
+  `,
+  [Size.Default]: css`
+    height: 36px;
+    padding-inline: 12px;
+
+    ${iconIsButtonSelector} {
+      padding-inline-end: 6px;
+    }
+  `,
+  [Size.Large]: css`
+    height: 48px;
+    padding-inline: 16px;
+
+    ${iconIsButtonSelector} {
+      padding-inline-end: 10px;
+    }
+  `,
+};
+
+export const inputWrapperStateStyles: Record<
+  FormFieldState,
+  Record<Theme, string>
+> = {
+  [FormFieldState.Error]: {
+    [Theme.Light]: css`
+      &:not([aria-disabled='true']) {
+        border-color: ${palette.red.base};
+
+        &:hover,
+        &:active {
+          &:not([aria-disabled='true']):not(:focus) {
+            box-shadow: ${hoverRing.light.red};
+          }
+        }
+      }
+    `,
+    [Theme.Dark]: css`
+      &:not([aria-disabled='true']) {
+        border-color: ${palette.red.light1};
+
+        &:hover,
+        &:active {
+          &:not([aria-disabled='true']):not(:focus) {
+            box-shadow: ${hoverRing.dark.red};
+          }
+        }
+      }
+    `,
+  },
+  [FormFieldState.Unset]: {
+    [Theme.Light]: css``,
+    [Theme.Dark]: css``,
+  },
+  [FormFieldState.Valid]: {
+    // TODO:
+    [Theme.Light]: css``,
+    [Theme.Dark]: css``,
+  },
+};
+
+export const inputWrapperDisabledStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    cursor: not-allowed;
+    background-color: ${palette.gray.light2};
+    border-color: ${palette.gray.light1};
+
+    & input {
+      cursor: not-allowed;
+      pointer-events: none;
+      color: ${palette.gray.base};
+
+      &::placeholder {
+        color: inherit;
+      }
+
+      &:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+          appearance: none;
+          border: 1px solid ${palette.gray.base};
+          -webkit-text-fill-color: ${palette.gray.base};
+          box-shadow: ${autofillShadowOverride(palette.gray.light2)};
+        }
+      }
+    }
+  `,
+  [Theme.Dark]: css`
+    cursor: not-allowed;
+    color: ${palette.gray.dark2};
+    background-color: ${palette.gray.dark3};
+    border-color: ${palette.gray.dark2};
+
+    & input {
+      cursor: not-allowed;
+      pointer-events: none;
+      color: ${palette.gray.dark2};
+
+      &::placeholder {
+        color: inherit;
+      }
+
+      &:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+          appearance: none;
+          border: 1px solid ${palette.gray.dark1};
+          -webkit-text-fill-color: ${palette.gray.dark1};
+          box-shadow: ${autofillShadowOverride(palette.gray.dark2)};
+        }
+      }
+    }
+  `,
+};
+
+export const childrenWrapperStyles = css`
+  width: 100%;
+`;
+
+export const iconStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.gray.base};
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.gray.base};
+  `,
+};
+
+export const errorIconStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.red.base};
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.red.light1};
+  `,
+};
diff --git a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx
index c705e1e0dc..d35d0d19a6 100644
--- a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx
+++ b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx
@@ -5,21 +5,22 @@ import Icon from '@leafygreen-ui/icon';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
 
+import { FormFieldState } from '../FormField.types';
+import { useFormFieldContext } from '../FormFieldContext/FormFieldContext';
+
 import {
   childrenWrapperStyles,
   errorIconStyles,
   iconClassName,
   iconStyles,
+  inputElementClassName,
   inputWrapperBaseStyles,
   inputWrapperDisabledStyles,
   inputWrapperFocusStyles,
   inputWrapperModeStyles,
   inputWrapperSizeStyles,
   inputWrapperStateStyles,
-} from '../FormField.styles';
-import { FormFieldState } from '../FormField.types';
-import { useFormFieldContext } from '../FormFieldContext/FormFieldContext';
-
+} from './FormFieldInput.styles';
 import { FormFieldInputProps } from './FormFieldInput.types';
 
 export const FormFieldInput = forwardRef<HTMLDivElement, FormFieldInputProps>(
@@ -27,7 +28,10 @@ export const FormFieldInput = forwardRef<HTMLDivElement, FormFieldInputProps>(
     const { theme } = useDarkMode();
     const { disabled, size, state, inputProps } = useFormFieldContext();
 
-    const renderedChildren = React.cloneElement(children, inputProps);
+    const renderedChildren = React.cloneElement(children, {
+      ...inputProps,
+      className: cx(inputElementClassName, children.props.className),
+    });
 
     return (
       <div

From ac5dbda81a3f04dc052375184c9e459b48d1d07e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 3 Oct 2023 14:59:40 -0400
Subject: [PATCH 164/351] add stories. add docs

---
 packages/form-field/package.json                         | 1 +
 packages/form-field/src/FormField.stories.tsx            | 9 +++++++++
 packages/form-field/src/FormField/FormField.tsx          | 8 ++++++++
 .../src/FormField/FormFieldInput/FormFieldInput.tsx      | 1 +
 packages/form-field/tsconfig.json                        | 3 +++
 5 files changed, 22 insertions(+)

diff --git a/packages/form-field/package.json b/packages/form-field/package.json
index e4d3e24baa..f0269e9cc4 100644
--- a/packages/form-field/package.json
+++ b/packages/form-field/package.json
@@ -27,6 +27,7 @@
     "@leafygreen-ui/leafygreen-provider": "^3.1.9"
   },
   "devDependencies": {
+    "@leafygreen-ui/button": "^21.0.7",
     "@leafygreen-ui/icon-button": "^15.0.18"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/form-field",
diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index 1eaa6c67df..87240834cd 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { StoryFn } from '@storybook/react';
 
+import Button from '@leafygreen-ui/button';
 import Icon, { glyphs } from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
@@ -120,4 +121,12 @@ export const WithIconButton: StoryFn<FormFieldStoryProps> = ({
   </FormField>
 );
 
+export const WithButtonInput: StoryFn<FormFieldStoryProps> = (
+  props: FormFieldStoryProps,
+) => (
+  <FormField {...props}>
+    <Button rightGlyph={<Icon glyph={props.glyph} />}>Click Me</Button>
+  </FormField>
+);
+
 export const Generated = () => <></>;
diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
index 85c70115ca..6fc62d3c3f 100644
--- a/packages/form-field/src/FormField/FormField.tsx
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -14,6 +14,14 @@ import { formFieldFontStyles, textContainerStyle } from './FormField.styles';
 import { type FormFieldProps, FormFieldState } from './FormField.types';
 import { useFormFieldProps } from './useFormFieldProps';
 
+/**
+ * Creates a form field element with the appropriate styles and attributes for each element.
+ *
+ * Use the {@link FormFieldInput} element to apply the appropriate
+ * interaction styles to the inner container element.
+ *
+ * See .stories file for examples
+ * */
 export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
   (
     {
diff --git a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx
index d35d0d19a6..1ef1584ca3 100644
--- a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx
+++ b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx
@@ -23,6 +23,7 @@ import {
 } from './FormFieldInput.styles';
 import { FormFieldInputProps } from './FormFieldInput.types';
 
+/** Applies styling around the input of a FormField element */
 export const FormFieldInput = forwardRef<HTMLDivElement, FormFieldInputProps>(
   ({ icon, className, children, ...rest }: FormFieldInputProps, fwdRef) => {
     const { theme } = useDarkMode();
diff --git a/packages/form-field/tsconfig.json b/packages/form-field/tsconfig.json
index 3b211e674b..510537789c 100644
--- a/packages/form-field/tsconfig.json
+++ b/packages/form-field/tsconfig.json
@@ -15,6 +15,9 @@
   ],
   "exclude": ["**/*.spec.*", "**/*.story.*"],
   "references": [
+    {
+      "path": "../button"
+    },
     {
       "path": "../emotion"
     },

From d1541f627db19f7aa842f482940362d50818497b Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 3 Oct 2023 15:06:14 -0400
Subject: [PATCH 165/351] improves button demo

---
 packages/form-field/src/FormField.stories.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index 87240834cd..b493566eb6 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -10,6 +10,7 @@ import { StoryMetaType } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 
 import { FormFieldProps, FormFieldState } from './FormField/FormField.types';
+import { useFormFieldContext } from './FormField/FormFieldContext/FormFieldContext';
 import { FormFieldInput } from './FormField/FormFieldInput';
 import { FormField } from '.';
 
@@ -121,11 +122,20 @@ export const WithIconButton: StoryFn<FormFieldStoryProps> = ({
   </FormField>
 );
 
+const DemoFormFieldButton = (props: FormFieldStoryProps) => {
+  const { inputProps } = useFormFieldContext();
+  return (
+    <Button rightGlyph={<Icon glyph={props.glyph} {...inputProps} />}>
+      Click Me
+    </Button>
+  );
+};
+
 export const WithButtonInput: StoryFn<FormFieldStoryProps> = (
   props: FormFieldStoryProps,
 ) => (
   <FormField {...props}>
-    <Button rightGlyph={<Icon glyph={props.glyph} />}>Click Me</Button>
+    <DemoFormFieldButton {...props} />
   </FormField>
 );
 

From fd2881555d2ad647962ecc166084c0af3d8655e9 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 3 Oct 2023 16:37:07 -0400
Subject: [PATCH 166/351] mv sub components

---
 packages/form-field/src/FormField.stories.tsx |  4 ++--
 .../src/FormField/FormField.spec.tsx          | 19 -------------------
 .../form-field/src/FormField/FormField.tsx    |  2 +-
 .../FormFieldInput/FormFieldInput.spec.tsx    |  8 --------
 .../FormFieldContext/FormFieldContext.tsx     |  4 ++--
 .../FormFieldInput/FormFieldInput.styles.ts   |  2 +-
 .../FormFieldInput/FormFieldInput.tsx         |  2 +-
 .../FormFieldInput/FormFieldInput.types.ts    |  2 +-
 .../{FormField => }/FormFieldInput/index.ts   |  0
 9 files changed, 8 insertions(+), 35 deletions(-)
 delete mode 100644 packages/form-field/src/FormField/FormFieldInput/FormFieldInput.spec.tsx
 rename packages/form-field/src/{FormField => }/FormFieldContext/FormFieldContext.tsx (84%)
 rename packages/form-field/src/{FormField => }/FormFieldInput/FormFieldInput.styles.ts (99%)
 rename packages/form-field/src/{FormField => }/FormFieldInput/FormFieldInput.tsx (97%)
 rename packages/form-field/src/{FormField => }/FormFieldInput/FormFieldInput.types.ts (74%)
 rename packages/form-field/src/{FormField => }/FormFieldInput/index.ts (100%)

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index b493566eb6..3c2138423b 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -10,8 +10,8 @@ import { StoryMetaType } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 
 import { FormFieldProps, FormFieldState } from './FormField/FormField.types';
-import { useFormFieldContext } from './FormField/FormFieldContext/FormFieldContext';
-import { FormFieldInput } from './FormField/FormFieldInput';
+import { useFormFieldContext } from './FormFieldContext/FormFieldContext';
+import { FormFieldInput } from './FormFieldInput';
 import { FormField } from '.';
 
 const meta: StoryMetaType<typeof FormField> = {
diff --git a/packages/form-field/src/FormField/FormField.spec.tsx b/packages/form-field/src/FormField/FormField.spec.tsx
index ce7ba50c62..db5f75722a 100644
--- a/packages/form-field/src/FormField/FormField.spec.tsx
+++ b/packages/form-field/src/FormField/FormField.spec.tsx
@@ -277,25 +277,6 @@ describe('packages/form-field', () => {
     expect(icon?.tagName).toEqual('svg');
   });
 
-  test('inputWrapperProps are passed through', () => {
-    const { queryByTestId } = render(
-      <FormField
-        label="Label"
-        inputWrapperProps={{
-          'data-testid': 'input-wrapper',
-          role: 'combobox',
-          className: 'input-class',
-        }}
-      >
-        <div />
-      </FormField>,
-    );
-    const wrapper = queryByTestId('input-wrapper');
-    expect(wrapper).toBeInTheDocument();
-    expect(wrapper).toHaveAttribute('role', 'combobox');
-    expect(wrapper?.classList.contains('input-class')).toBeTruthy();
-  });
-
   // eslint-disable-next-line jest/no-disabled-tests
   test.skip('Types', () => {
     render(
diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
index 6fc62d3c3f..64a070376d 100644
--- a/packages/form-field/src/FormField/FormField.tsx
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -9,7 +9,7 @@ import {
   useUpdatedBaseFontSize,
 } from '@leafygreen-ui/typography';
 
-import { FormFieldProvider } from './FormFieldContext/FormFieldContext';
+import { FormFieldProvider } from '../FormFieldContext/FormFieldContext';
 import { formFieldFontStyles, textContainerStyle } from './FormField.styles';
 import { type FormFieldProps, FormFieldState } from './FormField.types';
 import { useFormFieldProps } from './useFormFieldProps';
diff --git a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.spec.tsx b/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.spec.tsx
deleted file mode 100644
index e1f297b318..0000000000
--- a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.spec.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { FormFieldInput } from '.';
-
-describe('packages/form-field-input-wrapper', () => {
-  test('condition', () => {});
-});
diff --git a/packages/form-field/src/FormField/FormFieldContext/FormFieldContext.tsx b/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
similarity index 84%
rename from packages/form-field/src/FormField/FormFieldContext/FormFieldContext.tsx
rename to packages/form-field/src/FormFieldContext/FormFieldContext.tsx
index d663f62458..30d073ff49 100644
--- a/packages/form-field/src/FormField/FormFieldContext/FormFieldContext.tsx
+++ b/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
@@ -2,8 +2,8 @@ import React, { PropsWithChildren, useContext } from 'react';
 
 import { Size } from '@leafygreen-ui/tokens';
 
-import { FormFieldState } from '../FormField.types';
-import { FormFieldInputElementProps } from '../useFormFieldProps';
+import { FormFieldState } from '../FormField/FormField.types';
+import { FormFieldInputElementProps } from '../FormField/useFormFieldProps';
 
 interface FormFieldContextProps {
   disabled: boolean;
diff --git a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.styles.ts b/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts
similarity index 99%
rename from packages/form-field/src/FormField/FormFieldInput/FormFieldInput.styles.ts
rename to packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts
index 0a8b8b110a..eba9ed0426 100644
--- a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.styles.ts
+++ b/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts
@@ -11,7 +11,7 @@ import {
   transitionDuration,
 } from '@leafygreen-ui/tokens';
 
-import { FormFieldState } from '../FormField.types';
+import { FormFieldState } from '../FormField/FormField.types';
 
 export const inputElementClassName = createUniqueClassName('form-field-input');
 export const iconClassName = createUniqueClassName('form-field-icon');
diff --git a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx b/packages/form-field/src/FormFieldInput/FormFieldInput.tsx
similarity index 97%
rename from packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx
rename to packages/form-field/src/FormFieldInput/FormFieldInput.tsx
index 1ef1584ca3..7997952eee 100644
--- a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.tsx
+++ b/packages/form-field/src/FormFieldInput/FormFieldInput.tsx
@@ -5,7 +5,7 @@ import Icon from '@leafygreen-ui/icon';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
 
-import { FormFieldState } from '../FormField.types';
+import { FormFieldState } from '../FormField/FormField.types';
 import { useFormFieldContext } from '../FormFieldContext/FormFieldContext';
 
 import {
diff --git a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.types.ts b/packages/form-field/src/FormFieldInput/FormFieldInput.types.ts
similarity index 74%
rename from packages/form-field/src/FormField/FormFieldInput/FormFieldInput.types.ts
rename to packages/form-field/src/FormFieldInput/FormFieldInput.types.ts
index d16b587557..e4af4f5b8d 100644
--- a/packages/form-field/src/FormField/FormFieldInput/FormFieldInput.types.ts
+++ b/packages/form-field/src/FormFieldInput/FormFieldInput.types.ts
@@ -1,6 +1,6 @@
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
-import { FormFieldChildren } from '../FormField.types';
+import { FormFieldChildren } from '../FormField/FormField.types';
 
 export interface FormFieldInputProps extends HTMLElementProps<'div'> {
   children: FormFieldChildren;
diff --git a/packages/form-field/src/FormField/FormFieldInput/index.ts b/packages/form-field/src/FormFieldInput/index.ts
similarity index 100%
rename from packages/form-field/src/FormField/FormFieldInput/index.ts
rename to packages/form-field/src/FormFieldInput/index.ts

From 88033c5284f48b82c0edd30cbc6f39a07c7b121f Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 3 Oct 2023 16:46:56 -0400
Subject: [PATCH 167/351] reorg components. update tests

---
 .../src/{FormField => }/FormField.spec.tsx    | 120 ++++++++++++++----
 packages/form-field/src/FormField.stories.tsx |  11 +-
 .../src/FormFieldContext/FormFieldContext.tsx |   6 +-
 .../form-field/src/FormFieldContext/index.ts  |   7 +
 packages/form-field/src/index.ts              |   8 ++
 5 files changed, 120 insertions(+), 32 deletions(-)
 rename packages/form-field/src/{FormField => }/FormField.spec.tsx (76%)
 create mode 100644 packages/form-field/src/FormFieldContext/index.ts

diff --git a/packages/form-field/src/FormField/FormField.spec.tsx b/packages/form-field/src/FormField.spec.tsx
similarity index 76%
rename from packages/form-field/src/FormField/FormField.spec.tsx
rename to packages/form-field/src/FormField.spec.tsx
index db5f75722a..5375b56ef5 100644
--- a/packages/form-field/src/FormField/FormField.spec.tsx
+++ b/packages/form-field/src/FormField.spec.tsx
@@ -3,13 +3,20 @@ import { render } from '@testing-library/react';
 
 import Icon from '@leafygreen-ui/icon';
 
-import { FormField, FormFieldState } from '.';
+import {
+  FormField,
+  FormFieldInput,
+  FormFieldState,
+  useFormFieldContext,
+} from '.';
 
 describe('packages/form-field', () => {
   test('rest passed to outer element', () => {
     const { getByTestId } = render(
       <FormField label="Label" data-testid="form-field">
-        <div />
+        <FormFieldInput>
+          <div />
+        </FormFieldInput>
       </FormField>,
     );
     const formField = getByTestId('form-field');
@@ -19,7 +26,9 @@ describe('packages/form-field', () => {
   test('className passed to outer element', () => {
     const { getByTestId } = render(
       <FormField label="Label" data-testid="form-field" className="form-field">
-        <div />
+        <FormFieldInput>
+          <div />
+        </FormFieldInput>
       </FormField>,
     );
     const formField = getByTestId('form-field');
@@ -33,7 +42,9 @@ describe('packages/form-field', () => {
         description="Description"
         data-testid="form-field"
       >
-        <div />
+        <FormFieldInput>
+          <div />
+        </FormFieldInput>
       </FormField>,
     );
     const description = getByText('Description');
@@ -47,7 +58,9 @@ describe('packages/form-field', () => {
         description={<span data-testid="description-span">description</span>}
         data-testid="form-field"
       >
-        <div />
+        <FormFieldInput>
+          <div />
+        </FormFieldInput>
       </FormField>,
     );
     const descriptionSpan = queryByTestId('description-span');
@@ -58,7 +71,9 @@ describe('packages/form-field', () => {
   test('input has id,', () => {
     const { getByTestId } = render(
       <FormField label="Label" data-testid="form-field">
-        <div data-testid="input" />
+        <FormFieldInput>
+          <div data-testid="input" />
+        </FormFieldInput>
       </FormField>,
     );
     const input = getByTestId('input');
@@ -69,7 +84,9 @@ describe('packages/form-field', () => {
     test('label element has id & htmlFor', () => {
       const { getByText } = render(
         <FormField label="Label" data-testid="form-field">
-          <div />
+          <FormFieldInput>
+            <div />
+          </FormFieldInput>
         </FormField>,
       );
       const label = getByText('Label');
@@ -83,7 +100,9 @@ describe('packages/form-field', () => {
           label={<span data-testid="label-span">Label</span>}
           data-testid="form-field"
         >
-          <div />
+          <FormFieldInput>
+            <div />
+          </FormFieldInput>
         </FormField>,
       );
       const labelSpan = queryByTestId('label-span');
@@ -98,7 +117,9 @@ describe('packages/form-field', () => {
           description="Description"
           data-testid="form-field"
         >
-          <div data-testid="input" />
+          <FormFieldInput>
+            <div data-testid="input" />
+          </FormFieldInput>
         </FormField>,
       );
       const label = getByText('Label');
@@ -113,7 +134,9 @@ describe('packages/form-field', () => {
           description="Description"
           data-testid="form-field"
         >
-          <div data-testid="input" />
+          <FormFieldInput>
+            <div data-testid="input" />
+          </FormFieldInput>
         </FormField>,
       );
       const labelSpan = queryByTestId('label-span');
@@ -131,7 +154,9 @@ describe('packages/form-field', () => {
           description="Description"
           data-testid="form-field"
         >
-          <div data-testid="input" />
+          <FormFieldInput>
+            <div data-testid="input" />
+          </FormFieldInput>
         </FormField>,
       );
       const description = getByText('Description');
@@ -146,7 +171,9 @@ describe('packages/form-field', () => {
           description={<span data-testid="description-span">description</span>}
           data-testid="form-field"
         >
-          <div data-testid="input" />
+          <FormFieldInput>
+            <div data-testid="input" />
+          </FormFieldInput>
         </FormField>,
       );
       const descriptionSpan = queryByTestId('description-span');
@@ -160,7 +187,9 @@ describe('packages/form-field', () => {
     test('when aria-label is provided, input has that aria-label', () => {
       const { getByTestId } = render(
         <FormField aria-label="Label" data-testid="form-field">
-          <div data-testid="input" />
+          <FormFieldInput>
+            <div data-testid="input" />
+          </FormFieldInput>
         </FormField>,
       );
       const input = getByTestId('input');
@@ -170,7 +199,9 @@ describe('packages/form-field', () => {
     test('when aria-labelledby is provided, input has that aria-labelledby', () => {
       const { getByTestId } = render(
         <FormField aria-labelledby="label-123" data-testid="form-field">
-          <div data-testid="input" />
+          <FormFieldInput>
+            <div data-testid="input" />
+          </FormFieldInput>
         </FormField>,
       );
       const input = getByTestId('input');
@@ -186,7 +217,9 @@ describe('packages/form-field', () => {
           errorMessage="This is an error message"
           data-testid="form-field"
         >
-          <div data-testid="input" />
+          <FormFieldInput>
+            <div data-testid="input" />
+          </FormFieldInput>
         </FormField>,
       );
       const error = queryByText('This is an error message');
@@ -201,7 +234,9 @@ describe('packages/form-field', () => {
           state={FormFieldState.Error}
           data-testid="form-field"
         >
-          <div data-testid="input" />
+          <FormFieldInput>
+            <div data-testid="input" />
+          </FormFieldInput>
         </FormField>,
       );
       const error = queryByText('This is an error message');
@@ -216,7 +251,9 @@ describe('packages/form-field', () => {
           state={FormFieldState.Error}
           data-testid="form-field"
         >
-          <div data-testid="input" />
+          <FormFieldInput>
+            <div data-testid="input" />
+          </FormFieldInput>
         </FormField>,
       );
       const error = queryByText('This is an error message');
@@ -231,7 +268,9 @@ describe('packages/form-field', () => {
           state={FormFieldState.Error}
           data-testid="form-field"
         >
-          <div data-testid="input" />
+          <FormFieldInput>
+            <div data-testid="input" />
+          </FormFieldInput>
         </FormField>,
       );
       const input = getByTestId('input');
@@ -248,7 +287,9 @@ describe('packages/form-field', () => {
           state={FormFieldState.Error}
           data-testid="form-field"
         >
-          <div data-testid="input" />
+          <FormFieldInput>
+            <div data-testid="input" />
+          </FormFieldInput>
         </FormField>,
       );
       const input = getByTestId('input');
@@ -263,12 +304,10 @@ describe('packages/form-field', () => {
 
   test('Renders an icon', () => {
     const { queryByTestId } = render(
-      <FormField
-        label="Label"
-        icon={<Icon glyph="Beaker" data-testid="icon" />}
-        data-testid="form-field"
-      >
-        <div data-testid="input" />
+      <FormField label="Label" data-testid="form-field">
+        <FormFieldInput icon={<Icon glyph="Beaker" data-testid="icon" />}>
+          <div data-testid="input" />
+        </FormFieldInput>
       </FormField>,
     );
 
@@ -277,6 +316,37 @@ describe('packages/form-field', () => {
     expect(icon?.tagName).toEqual('svg');
   });
 
+  describe('custom children', () => {
+    const TestChild = () => {
+      const { inputProps } = useFormFieldContext();
+      return <div data-testid="child" {...inputProps} />;
+    };
+
+    test('custom child is rendered', () => {
+      const { queryByTestId } = render(
+        <FormField label="Label" data-testid="form-field">
+          <TestChild />
+        </FormField>,
+      );
+
+      const child = queryByTestId('child');
+      expect(child).toBeInTheDocument();
+    });
+
+    test('custom child is labelled by the label element', () => {
+      const { queryByTestId, getByText } = render(
+        <FormField label="Label" data-testid="form-field">
+          <TestChild />
+        </FormField>,
+      );
+      const label = getByText('Label');
+      const child = queryByTestId('child');
+      expect(child!.id).toBeDefined();
+      expect(child!.id).toEqual(label.getAttribute('for'));
+      expect(child!.getAttribute('aria-labelledby')).toEqual(label.id);
+    });
+  });
+
   // eslint-disable-next-line jest/no-disabled-tests
   test.skip('Types', () => {
     render(
diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index 3c2138423b..9b3319745e 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -9,10 +9,13 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 
-import { FormFieldProps, FormFieldState } from './FormField/FormField.types';
-import { useFormFieldContext } from './FormFieldContext/FormFieldContext';
-import { FormFieldInput } from './FormFieldInput';
-import { FormField } from '.';
+import {
+  FormField,
+  FormFieldInput,
+  FormFieldProps,
+  FormFieldState,
+  useFormFieldContext,
+} from '.';
 
 const meta: StoryMetaType<typeof FormField> = {
   title: 'Components/FormField',
diff --git a/packages/form-field/src/FormFieldContext/FormFieldContext.tsx b/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
index 30d073ff49..08ea16798c 100644
--- a/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
+++ b/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
@@ -5,20 +5,20 @@ import { Size } from '@leafygreen-ui/tokens';
 import { FormFieldState } from '../FormField/FormField.types';
 import { FormFieldInputElementProps } from '../FormField/useFormFieldProps';
 
-interface FormFieldContextProps {
+export interface FormFieldContextProps {
   disabled: boolean;
   size: Size;
   state: FormFieldState;
   inputProps?: FormFieldInputElementProps;
 }
 
-const defaultFormFieldContext = {
+export const defaultFormFieldContext = {
   disabled: false,
   size: Size.Default,
   state: FormFieldState.Unset,
 };
 
-const FormFieldContext = React.createContext<FormFieldContextProps>(
+export const FormFieldContext = React.createContext<FormFieldContextProps>(
   defaultFormFieldContext,
 );
 
diff --git a/packages/form-field/src/FormFieldContext/index.ts b/packages/form-field/src/FormFieldContext/index.ts
new file mode 100644
index 0000000000..9b8dfd5416
--- /dev/null
+++ b/packages/form-field/src/FormFieldContext/index.ts
@@ -0,0 +1,7 @@
+export {
+  defaultFormFieldContext,
+  FormFieldContext,
+  FormFieldContextProps,
+  FormFieldProvider,
+  useFormFieldContext,
+} from './FormFieldContext';
diff --git a/packages/form-field/src/index.ts b/packages/form-field/src/index.ts
index e4b6ffc72a..02e7140128 100644
--- a/packages/form-field/src/index.ts
+++ b/packages/form-field/src/index.ts
@@ -5,3 +5,11 @@ export {
   type FormFieldProps,
   FormFieldState,
 } from './FormField';
+export {
+  defaultFormFieldContext,
+  FormFieldContext,
+  type FormFieldContextProps,
+  FormFieldProvider,
+  useFormFieldContext,
+} from './FormFieldContext';
+export { FormFieldInput, type FormFieldInputProps } from './FormFieldInput';

From e8777ae6b227580e3e32d4ed175c546a9165ab26 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 3 Oct 2023 17:10:56 -0400
Subject: [PATCH 168/351] Address RA UI bugs

---
 packages/form-field/src/FormField.stories.tsx | 48 ++++++++++++--
 .../src/FormField/FormField.styles.ts         |  6 +-
 .../form-field/src/FormField/FormField.tsx    | 64 +++++++++++--------
 .../FormFieldInput/FormFieldInput.styles.ts   |  6 ++
 .../src/FormFieldInput/FormFieldInput.tsx     | 37 ++++++-----
 5 files changed, 110 insertions(+), 51 deletions(-)

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index 9b3319745e..6b0120c81b 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { StoryFn } from '@storybook/react';
 
 import Button from '@leafygreen-ui/button';
+import { css } from '@leafygreen-ui/emotion';
 import Icon, { glyphs } from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
@@ -12,19 +13,20 @@ import { Size } from '@leafygreen-ui/tokens';
 import {
   FormField,
   FormFieldInput,
+  FormFieldInputProps,
   FormFieldProps,
   FormFieldState,
   useFormFieldContext,
 } from '.';
 
-const meta: StoryMetaType<typeof FormField> = {
+type FormFieldStoryProps = FormFieldProps &
+  FormFieldInputProps & { glyph: string };
+
+const meta: StoryMetaType<typeof FormField, FormFieldStoryProps> = {
   title: 'Components/FormField',
   component: FormField,
   parameters: {
     default: 'Basic',
-    controls: {
-      exclude: ['inputWrapperProps', 'icon'],
-    },
     generate: {
       combineArgs: {
         darkMode: [false, true],
@@ -34,7 +36,12 @@ const meta: StoryMetaType<typeof FormField> = {
         state: Object.values(FormFieldState),
         disabled: [false, true],
       },
-      excludeCombinations: [{}],
+      excludeCombinations: [
+        {
+          disabled: true,
+          state: FormFieldState.Error,
+        },
+      ],
       args: {
         children: <input placeholder="placeholder" />,
       },
@@ -70,7 +77,6 @@ const meta: StoryMetaType<typeof FormField> = {
 
 export default meta;
 
-type FormFieldStoryProps = FormFieldProps & { glyph: string };
 export const Basic: StoryFn<FormFieldStoryProps> = ({
   label,
   description,
@@ -125,6 +131,34 @@ export const WithIconButton: StoryFn<FormFieldStoryProps> = ({
   </FormField>
 );
 
+export const Custom_TwoIcons: StoryFn<FormFieldStoryProps> = ({
+  glyph,
+  ...props
+}: FormFieldStoryProps) => (
+  <FormField {...props}>
+    <FormFieldInput
+      role="combobox"
+      tabIndex={-1}
+      icon={
+        <span
+          className={css`
+            display: flex;
+            align-items: center;
+            gap: 0;
+          `}
+        >
+          <IconButton aria-label="Icon">
+            <Icon glyph="XWithCircle" />
+          </IconButton>
+          <Icon glyph="CaretDown" />
+        </span>
+      }
+    >
+      <input placeholder="placeholder" />
+    </FormFieldInput>
+  </FormField>
+);
+
 const DemoFormFieldButton = (props: FormFieldStoryProps) => {
   const { inputProps } = useFormFieldContext();
   return (
@@ -134,7 +168,7 @@ const DemoFormFieldButton = (props: FormFieldStoryProps) => {
   );
 };
 
-export const WithButtonInput: StoryFn<FormFieldStoryProps> = (
+export const Custom_ButtonInput: StoryFn<FormFieldStoryProps> = (
   props: FormFieldStoryProps,
 ) => (
   <FormField {...props}>
diff --git a/packages/form-field/src/FormField/FormField.styles.ts b/packages/form-field/src/FormField/FormField.styles.ts
index 8f1493ad26..facd664527 100644
--- a/packages/form-field/src/FormField/FormField.styles.ts
+++ b/packages/form-field/src/FormField/FormField.styles.ts
@@ -12,8 +12,12 @@ export const formFieldFontStyles: Record<BaseFontSize, string> = {
   `,
 };
 
-export const textContainerStyle = css`
+export const labelTextContainerStyle = css`
   display: flex;
   flex-direction: column;
   margin-bottom: ${spacing[1]}px;
 `;
+
+export const errorTextContainerStyle = css`
+  margin-top: ${spacing[1]}px;
+`;
diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
index 64a070376d..3b59c6c4df 100644
--- a/packages/form-field/src/FormField/FormField.tsx
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
 import {
   Description,
@@ -9,8 +10,13 @@ import {
   useUpdatedBaseFontSize,
 } from '@leafygreen-ui/typography';
 
-import { FormFieldProvider } from '../FormFieldContext/FormFieldContext';
-import { formFieldFontStyles, textContainerStyle } from './FormField.styles';
+import { FormFieldProvider } from '../FormFieldContext';
+
+import {
+  errorTextContainerStyle,
+  formFieldFontStyles,
+  labelTextContainerStyle,
+} from './FormField.styles';
 import { type FormFieldProps, FormFieldState } from './FormField.types';
 import { useFormFieldProps } from './useFormFieldProps';
 
@@ -37,36 +43,42 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
     }: FormFieldProps,
     fwdRef,
   ) => {
-    const baseFontSize = useUpdatedBaseFontSize();
+    const baseFontSize = useUpdatedBaseFontSize(
+      size === Size.Large ? 16 : undefined,
+    );
 
     const { labelId, descriptionId, errorId, inputId, inputProps } =
       useFormFieldProps({ label, description, state, ...rest });
 
     return (
-      <FormFieldProvider value={{ disabled, size, state, inputProps }}>
-        <div
-          className={cx(formFieldFontStyles[baseFontSize], className)}
-          ref={fwdRef}
-          {...rest}
-        >
-          <div className={textContainerStyle}>
-            {label && (
-              <Label htmlFor={inputId} id={labelId} disabled={disabled}>
-                {label}
-              </Label>
-            )}
-            {description && (
-              <Description id={descriptionId} disabled={disabled}>
-                {description}
-              </Description>
-            )}
+      <LeafyGreenProvider baseFontSize={baseFontSize === 16 ? 16 : 14}>
+        <FormFieldProvider value={{ disabled, size, state, inputProps }}>
+          <div
+            className={cx(formFieldFontStyles[baseFontSize], className)}
+            ref={fwdRef}
+            {...rest}
+          >
+            <div className={labelTextContainerStyle}>
+              {label && (
+                <Label htmlFor={inputId} id={labelId} disabled={disabled}>
+                  {label}
+                </Label>
+              )}
+              {description && (
+                <Description id={descriptionId} disabled={disabled}>
+                  {description}
+                </Description>
+              )}
+            </div>
+            {children}
+            <div className={errorTextContainerStyle}>
+              {state === FormFieldState.Error && (
+                <Error id={errorId}>{errorMessage}</Error>
+              )}
+            </div>
           </div>
-          {children}
-          {state === FormFieldState.Error && (
-            <Error id={errorId}>{errorMessage}</Error>
-          )}
-        </div>
-      </FormFieldProvider>
+        </FormFieldProvider>
+      </LeafyGreenProvider>
     );
   },
 );
diff --git a/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts b/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts
index eba9ed0426..58b54130c9 100644
--- a/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts
+++ b/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts
@@ -302,6 +302,12 @@ export const childrenWrapperStyles = css`
   width: 100%;
 `;
 
+export const iconsWrapperStyles = css`
+  display: flex;
+  align-items: center;
+  gap: ${spacing[1]}px;
+`;
+
 export const iconStyles: Record<Theme, string> = {
   [Theme.Light]: css`
     color: ${palette.gray.base};
diff --git a/packages/form-field/src/FormFieldInput/FormFieldInput.tsx b/packages/form-field/src/FormFieldInput/FormFieldInput.tsx
index 7997952eee..69170eacfd 100644
--- a/packages/form-field/src/FormFieldInput/FormFieldInput.tsx
+++ b/packages/form-field/src/FormFieldInput/FormFieldInput.tsx
@@ -13,6 +13,7 @@ import {
   errorIconStyles,
   iconClassName,
   iconStyles,
+  iconsWrapperStyles,
   inputElementClassName,
   inputWrapperBaseStyles,
   inputWrapperDisabledStyles,
@@ -52,23 +53,25 @@ export const FormFieldInput = forwardRef<HTMLDivElement, FormFieldInputProps>(
         )}
       >
         <div className={childrenWrapperStyles}>{renderedChildren}</div>
-        {state === FormFieldState.Error && (
-          <Icon
-            role="presentation"
-            title="Error"
-            glyph="Warning"
-            className={errorIconStyles[theme]}
-          />
-        )}
-        {icon &&
-          React.cloneElement(icon, {
-            className: cx(
-              iconClassName,
-              iconStyles[theme],
-              icon.props.className,
-            ),
-            disabled,
-          })}
+        <div className={iconsWrapperStyles}>
+          {state === FormFieldState.Error && (
+            <Icon
+              role="presentation"
+              title="Error"
+              glyph="Warning"
+              className={errorIconStyles[theme]}
+            />
+          )}
+          {icon &&
+            React.cloneElement(icon, {
+              className: cx(
+                iconClassName,
+                iconStyles[theme],
+                icon.props.className,
+              ),
+              disabled,
+            })}
+        </div>
       </div>
     );
   },

From 595bc199beafd6058f002dd790a0d4f47e34f32a Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 3 Oct 2023 17:27:38 -0400
Subject: [PATCH 169/351] Update yarn.lock

---
 yarn.lock | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 4c4040c9e5..a00b7c8d3f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1413,6 +1413,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.21.0":
+  version "7.23.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
+  integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.20.7", "@babel/template@^7.22.5", "@babel/template@^7.3.3":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -2267,6 +2274,18 @@
     lodash "^4.17.21"
     prop-types "^15.7.2"
 
+"@leafygreen-ui/typography@^16.5.5":
+  version "16.5.5"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/typography/-/typography-16.5.5.tgz#65cc0ce7e39f5b8f72f9b9a4dbea80868ac09694"
+  integrity sha512-mErhTYM0C1PZaeADTkp5v/MAS6aEhavWHZ3otHthBSo/zwI5uAYnkreheiYElc66B/0bcOxCikLVkP3zaFnX2A==
+  dependencies:
+    "@leafygreen-ui/emotion" "^4.0.7"
+    "@leafygreen-ui/icon" "^11.22.2"
+    "@leafygreen-ui/lib" "^11.0.0"
+    "@leafygreen-ui/palette" "^4.0.7"
+    "@leafygreen-ui/polymorphic" "^1.3.6"
+    "@leafygreen-ui/tokens" "^2.1.4"
+
 "@manypkg/find-root@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@manypkg/find-root/-/find-root-1.1.0.tgz#a62d8ed1cd7e7d4c11d9d52a8397460b5d4ad29f"
@@ -6083,6 +6102,18 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
+date-fns-tz@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-2.0.0.tgz#1b14c386cb8bc16fc56fe333d4fc34ae1d1099d5"
+  integrity sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==
+
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 debug@2.6.9, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -10005,6 +10036,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+mockdate@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/mockdate/-/mockdate-3.0.5.tgz#789be686deb3149e7df2b663d2bc4392bc3284fb"
+  integrity sha512-iniQP4rj1FhBdBYS/+eQv7j1tadJ9lJtdzgOpvsOHng/GbcDh2Fhdeq+ZRldrPYdXvCyfFUmFeEwEGXZB5I/AQ==
+
 moo-color@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.3.tgz#d56435f8359c8284d83ac58016df7427febece74"
@@ -12406,6 +12442,11 @@ through@^2.3.8:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
+timezone-mock@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/timezone-mock/-/timezone-mock-1.3.6.tgz#44e4c5aeb57e6c07ae630a05c528fc4d9aab86f4"
+  integrity sha512-YcloWmZfLD9Li5m2VcobkCDNVaLMx8ohAb/97l/wYS3m+0TIEK5PFNMZZfRcusc6sFjIfxu8qcJT0CNnOdpqmg==
+
 tiny-emitter@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
@@ -13137,6 +13178,11 @@ webpack@5.88.0:
     watchpack "^2.4.0"
     webpack-sources "^3.2.3"
 
+weekstart@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/weekstart/-/weekstart-2.0.0.tgz#3925b0626b311b353097d81638bd0403a53d81f7"
+  integrity sha512-HjYc14IQUwDcnGICuc8tVtqAd6EFpoAQMqgrqcNtWWZB+F1b7iTq44GzwM1qvnH4upFgbhJsaNHuK93NOFheSg==
+
 whatwg-encoding@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz#e7635f597fd87020858626805a2729fa7698ac53"

From 01694aa074d516758964bdac333c5acc34418f07 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 3 Oct 2023 18:01:13 -0400
Subject: [PATCH 170/351] refactor DateFormField

---
 .../CalendarButton/CalendarButton.styles.ts   |  3 +
 .../CalendarButton/CalendarButton.tsx         | 25 ++++++++
 .../src/DateInput/CalendarButton/index.ts     |  1 +
 .../DateFormField/DateFormField.stories.tsx   | 53 ++++++++---------
 .../DateInput/DateFormField/DateFormField.tsx | 57 ++++++++++---------
 .../DateFormField/DateFormField.types.ts      |  6 +-
 packages/date-picker/src/DateInput/index.ts   |  1 -
 .../DatePickerInput/DatePickerInput.tsx       | 24 ++------
 .../DateRangeComponent.styles.ts              |  1 -
 .../DateRangeComponent/index.ts               |  3 +-
 .../DateRangeInput/DateRangeInput.tsx         | 20 ++++---
 .../DateRangeInput/DateRangeInput.types.ts    |  2 +-
 .../DateRangePicker/DateRangeInput/index.ts   |  3 +-
 .../DateRangePicker/DateRangePicker.styles.ts |  1 -
 .../date-picker/src/DateRangePicker/index.ts  |  3 +-
 15 files changed, 107 insertions(+), 96 deletions(-)
 create mode 100644 packages/date-picker/src/DateInput/CalendarButton/CalendarButton.styles.ts
 create mode 100644 packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
 create mode 100644 packages/date-picker/src/DateInput/CalendarButton/index.ts

diff --git a/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.styles.ts b/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.styles.ts
new file mode 100644
index 0000000000..f11767d057
--- /dev/null
+++ b/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.styles.ts
@@ -0,0 +1,3 @@
+import { css } from '@leafygreen-ui/emotion';
+
+export const iconButtonStyles = css``;
diff --git a/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx b/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
new file mode 100644
index 0000000000..0fff74a6de
--- /dev/null
+++ b/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+
+import { cx } from '@leafygreen-ui/emotion';
+import Icon from '@leafygreen-ui/icon';
+import IconButton, { BaseIconButtonProps } from '@leafygreen-ui/icon-button';
+
+import { iconButtonStyles } from './CalendarButton.styles';
+
+export const CalendarButton = forwardRef<
+  HTMLButtonElement,
+  BaseIconButtonProps
+>(({ className, ...rest }: BaseIconButtonProps) => {
+  return (
+    <IconButton
+      aria-label="Open calendar menu"
+      type="button"
+      className={cx(iconButtonStyles, className)}
+      {...rest}
+    >
+      <Icon glyph="Calendar" />
+    </IconButton>
+  );
+});
+
+CalendarButton.displayName = 'CalendarButton';
diff --git a/packages/date-picker/src/DateInput/CalendarButton/index.ts b/packages/date-picker/src/DateInput/CalendarButton/index.ts
new file mode 100644
index 0000000000..b4b4375473
--- /dev/null
+++ b/packages/date-picker/src/DateInput/CalendarButton/index.ts
@@ -0,0 +1 @@
+export { CalendarButton } from './CalendarButton';
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
index 7229c7ce19..da70bcd793 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { StoryFn } from '@storybook/react';
 
 import { css } from '@leafygreen-ui/emotion';
+import { FormFieldState } from '@leafygreen-ui/form-field';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
@@ -45,7 +46,7 @@ const meta: StoryMetaType<
         >
           <DatePickerProvider
             // @ts-expect-error - incomplete context value
-            value={{ size: ctx?.args.size, disabled: ctx?.args.disabled }}
+            value={{ ...ctx?.args }}
           >
             <Instance />
           </DatePickerProvider>
@@ -81,37 +82,29 @@ const meta: StoryMetaType<
 
 export default meta;
 
-const Template: StoryFn<typeof DateFormField> = ({
-  label,
-  description,
-  state,
-  errorMessage,
-}) => {
-  const inputId = 'input';
-  const descriptionId = 'descr';
-  const errorId = 'error';
-
+const Template: StoryFn<typeof DateFormField> = () => {
   return (
-    <DateFormField
-      label={label}
-      description={description}
-      state={state}
-      errorMessage={errorMessage}
+    <DatePickerProvider
+      value={{
+        label: 'Label',
+        description: 'Description',
+        state: FormFieldState.Error,
+        errorMessage: 'This is an error message',
+      }}
     >
-      <input
-        id={inputId}
-        aria-describedby={descriptionId + ' ' + errorId}
-        style={{
-          border: 'none',
-          outline: '1px solid green',
-          padding: 0,
-          margin: 0,
-          width: '100px',
-          fontFamily: 'inherit',
-        }}
-        placeholder="<placeholder>"
-      />
-    </DateFormField>
+      <DateFormField>
+        <input
+          style={{
+            border: 'none',
+            padding: 0,
+            margin: 0,
+            width: '100px',
+            fontFamily: 'inherit',
+          }}
+          placeholder="<placeholder>"
+        />
+      </DateFormField>
+    </DatePickerProvider>
   );
 };
 
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
index 3365772244..e07f021ddf 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { FormField } from '@leafygreen-ui/form-field';
-import Icon from '@leafygreen-ui/icon';
-import IconButton from '@leafygreen-ui/icon-button';
+import { FormField, FormFieldInput } from '@leafygreen-ui/form-field';
+
+import { useDatePickerContext } from '../../DatePickerContext';
+import { CalendarButton } from '../CalendarButton';
 
-import { iconButtonStyles } from './DateFormField.styles';
 import { DateFormFieldProps } from './DateFormField.types';
 
 /** A wrapper around `FormField` that sets the icon */
@@ -13,36 +13,39 @@ export const DateFormField = React.forwardRef<
   DateFormFieldProps
 >(
   (
-    {
-      children,
-      onIconButtonClick,
-      inputWrapperProps,
-      ...rest
-    }: DateFormFieldProps,
+    { children, onInputClick, onIconButtonClick, ...rest }: DateFormFieldProps,
     fwdRef,
   ) => {
+    const {
+      label,
+      description,
+      state,
+      errorMessage,
+      disabled,
+      isOpen,
+      menuId,
+    } = useDatePickerContext();
+
     return (
       <FormField
         ref={fwdRef}
-        icon={
-          <IconButton
-            aria-label="Open calendar menu"
-            className={iconButtonStyles}
-            onClick={onIconButtonClick}
-            type="button"
-            disabled={rest.disabled}
-          >
-            <Icon glyph="Calendar" />
-          </IconButton>
-        }
-        inputWrapperProps={{
-          ...inputWrapperProps,
-          role: 'combobox',
-          tabIndex: -1,
-        }}
+        label={label}
+        description={description}
+        disabled={disabled}
+        state={state}
+        errorMessage={errorMessage}
         {...rest}
       >
-        {children}
+        <FormFieldInput
+          role="combobox"
+          tabIndex={-1}
+          aria-expanded={isOpen}
+          aria-controls={menuId}
+          onClick={onInputClick}
+          icon={<CalendarButton onClick={onIconButtonClick} />}
+        >
+          {children}
+        </FormFieldInput>
       </FormField>
     );
   },
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts b/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
index fb5e4f38cb..1743e5df11 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
@@ -1,6 +1,7 @@
 import { MouseEventHandler } from 'react';
 
 import { FormFieldProps } from '@leafygreen-ui/form-field';
+import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 export const InputState = {
   Unset: 'unset',
@@ -9,7 +10,10 @@ export const InputState = {
 
 export type InputState = (typeof InputState)[keyof typeof InputState];
 
-export type DateFormFieldProps = FormFieldProps & {
+export type DateFormFieldProps = HTMLElementProps<'div'> & {
+  children: FormFieldProps['children'];
+  /** Callback fired when the input is clicked */
+  onInputClick?: MouseEventHandler<HTMLDivElement>;
   /** Fired then the calendar icon button is clicked */
   onIconButtonClick?: MouseEventHandler<HTMLButtonElement>;
 };
diff --git a/packages/date-picker/src/DateInput/index.ts b/packages/date-picker/src/DateInput/index.ts
index 0af14bdff2..eadb3a750a 100644
--- a/packages/date-picker/src/DateInput/index.ts
+++ b/packages/date-picker/src/DateInput/index.ts
@@ -1,2 +1 @@
-export { DateFormField, type DateFormFieldProps } from './DateFormField';
 export { DateInputBox, type DateInputBoxProps } from './DateInputBox';
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 25955d2422..1d73551549 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -7,7 +7,8 @@ import React, {
 
 import { keyMap } from '@leafygreen-ui/lib';
 
-import { DateFormField, DateInputBox } from '../../DateInput';
+import { DateInputBox } from '../../DateInput';
+import { DateFormField } from '../../DateInput/DateFormField';
 import { useDatePickerContext } from '../../DatePickerContext';
 import { useSegmentRefs } from '../../hooks/useSegmentRefs';
 import { isZeroLike } from '../../utils';
@@ -30,16 +31,8 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     }: DatePickerInputProps,
     fwdRef,
   ) => {
-    const {
-      label,
-      description,
-      menuId,
-      formatParts,
-      disabled,
-      isOpen,
-      setOpen,
-      setIsDirty,
-    } = useDatePickerContext();
+    const { formatParts, disabled, setOpen, setIsDirty } =
+      useDatePickerContext();
     const segmentRefs = useSegmentRefs();
 
     /** Called when the input, or any of its children, is clicked */
@@ -160,16 +153,9 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     return (
       <DateFormField
         ref={fwdRef}
-        label={label}
-        description={description}
-        disabled={disabled}
         onKeyDown={handleKeyDown}
+        onInputClick={handleInputClick}
         onBlur={handleInputBlur}
-        inputWrapperProps={{
-          onClick: handleInputClick,
-          'aria-expanded': isOpen,
-          'aria-controls': menuId,
-        }}
         {...rest}
       >
         <DateInputBox
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.styles.ts
index 928608f58d..356c065c34 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.styles.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.styles.ts
@@ -1,4 +1,3 @@
-
 import { css } from '@leafygreen-ui/emotion';
 
 export const baseStyles = css``;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeComponent/index.ts
index 69aa951a1e..f8d2242e4d 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/index.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/index.ts
@@ -1,3 +1,2 @@
-
-export  { DateRangeComponent } from './DateRangeComponent';
+export { DateRangeComponent } from './DateRangeComponent';
 export { DateRangeComponentProps } from './DateRangeComponent.types';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index 262ab4ebbe..30a97faf25 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 
-import { DateFormField, DateInputBox } from '../../DateInput';
-import { useDatePickerContext } from '../../DatePickerContext';
+import { DateInputBox } from '../../DateInput';
+import { DateFormField } from '../../DateInput/DateFormField';
 import { useSegmentRefs } from '../../hooks/useSegmentRefs';
 
 import { inputWrapperStyles } from './DateRangeInput.styles';
@@ -10,18 +10,20 @@ import { DateRangeInputProps } from './DateRangeInput.types';
 const EN_DASH = '–';
 
 export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
-  (_props: DateRangeInputProps) => {
-    const {
-      label,
-      description,
-      // formatParts, disabled, setOpen, setIsDirty
-    } = useDatePickerContext();
+  (_props: DateRangeInputProps, fwdRef) => {
+    // const {
+    //   label,
+    //   description,
+    //   isOpen,
+    //   menuId,
+    //   // formatParts, disabled, setOpen, setIsDirty
+    // } = useDatePickerContext();
 
     const startSegmentRefs = useSegmentRefs();
     const endSegmentRefs = useSegmentRefs();
 
     return (
-      <DateFormField label={label} description={description}>
+      <DateFormField ref={fwdRef}>
         <div className={inputWrapperStyles}>
           <DateInputBox segmentRefs={startSegmentRefs} />
           <span>{EN_DASH}</span>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
index 17ff6df75a..fdbfeeb41d 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
@@ -1 +1 @@
-export interface DateRangeInputProps {}
\ No newline at end of file
+export interface DateRangeInputProps {}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/index.ts
index e04609a059..ffa12d47f9 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/index.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/index.ts
@@ -1,3 +1,2 @@
-
-export  { DateRangeInput } from './DateRangeInput';
+export { DateRangeInput } from './DateRangeInput';
 export { DateRangeInputProps } from './DateRangeInput.types';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangePicker.styles.ts
index 928608f58d..356c065c34 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.styles.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.styles.ts
@@ -1,4 +1,3 @@
-
 import { css } from '@leafygreen-ui/emotion';
 
 export const baseStyles = css``;
diff --git a/packages/date-picker/src/DateRangePicker/index.ts b/packages/date-picker/src/DateRangePicker/index.ts
index ccb7711d7b..4b0004f344 100644
--- a/packages/date-picker/src/DateRangePicker/index.ts
+++ b/packages/date-picker/src/DateRangePicker/index.ts
@@ -1,3 +1,2 @@
-
-export  { DateRangePicker } from './DateRangePicker';
+export { DateRangePicker } from './DateRangePicker';
 export { DateRangePickerProps } from './DateRangePicker.types';

From e5e55595b8aed6a294aed14cea8282d9681c739a Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 3 Oct 2023 18:38:34 -0400
Subject: [PATCH 171/351] adds tests for getSegmentToFocus

---
 .../DatePickerInput/DatePickerInput.tsx       |  6 +-
 .../getSegmentToFocus.spec.ts                 | 94 +++++++++++++++++++
 .../index.ts                                  | 45 +++++----
 3 files changed, 120 insertions(+), 25 deletions(-)
 create mode 100644 packages/date-picker/src/DatePicker/utils/getSegmentToFocus/getSegmentToFocus.spec.ts
 rename packages/date-picker/src/DatePicker/utils/{focusRelevantSegment => getSegmentToFocus}/index.ts (58%)

diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 1d73551549..9370cdbc00 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -12,8 +12,8 @@ import { DateFormField } from '../../DateInput/DateFormField';
 import { useDatePickerContext } from '../../DatePickerContext';
 import { useSegmentRefs } from '../../hooks/useSegmentRefs';
 import { isZeroLike } from '../../utils';
-import { focusRelevantSegment } from '../utils/focusRelevantSegment';
 import { getRelativeSegment } from '../utils/getRelativeSegment';
+import { getSegmentToFocus } from '../utils/getSegmentToFocus';
 import { isElementInputSegment } from '../utils/isElementInputSegment';
 
 import { DatePickerInputProps } from './DatePickerInput.types';
@@ -40,11 +40,13 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       if (!disabled) {
         setOpen(true);
 
-        focusRelevantSegment({
+        const segmentToFocus = getSegmentToFocus({
           target,
           formatParts,
           segmentRefs,
         });
+
+        segmentToFocus?.focus();
       }
     };
 
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/getSegmentToFocus.spec.ts b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/getSegmentToFocus.spec.ts
new file mode 100644
index 0000000000..47f8b944e6
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/getSegmentToFocus.spec.ts
@@ -0,0 +1,94 @@
+import { createRef } from 'react';
+
+import { SegmentRefs } from '../../../hooks/useSegmentRefs';
+import { getFormatParts } from '../../../utils';
+
+import { getSegmentToFocus } from '.';
+
+describe('packages/date-picker/utils/getSegmentToFocus', () => {
+  const formatParts = getFormatParts('iso8601');
+
+  test('if target is a segment, return target', () => {
+    const target = document.createElement('input');
+
+    const segmentRefs: SegmentRefs = {
+      year: createRef(),
+      month: createRef(),
+      day: { current: target },
+    };
+
+    const segment = getSegmentToFocus({
+      target,
+      formatParts,
+      segmentRefs,
+    });
+
+    expect(segment).toBe(target);
+  });
+
+  test('if all inputs are filled, return the last input', () => {
+    const target = document.createElement('div');
+
+    const yearEl = document.createElement('input');
+    yearEl.value = '1993';
+    yearEl.id = 'year';
+    const monthEl = document.createElement('input');
+    monthEl.value = '12';
+    monthEl.id = 'month';
+    const dayEl = document.createElement('input');
+    dayEl.value = '26';
+    dayEl.id = 'day';
+
+    const segmentRefs: SegmentRefs = {
+      year: { current: yearEl },
+      month: { current: monthEl },
+      day: { current: dayEl },
+    };
+
+    const segment = getSegmentToFocus({
+      target,
+      formatParts,
+      segmentRefs,
+    });
+
+    expect(segment).toBe(dayEl);
+  });
+
+  test('if first input is filled, return second input', () => {
+    const target = document.createElement('div');
+
+    const yearEl = document.createElement('input');
+    yearEl.value = '1993';
+    yearEl.id = 'year';
+    const monthEl = document.createElement('input');
+    monthEl.id = 'month';
+    const dayEl = document.createElement('input');
+    dayEl.id = 'day';
+
+    const segmentRefs: SegmentRefs = {
+      year: { current: yearEl },
+      month: { current: monthEl },
+      day: { current: dayEl },
+    };
+
+    const segment = getSegmentToFocus({
+      target,
+      formatParts,
+      segmentRefs,
+    });
+
+    expect(segment).toBe(monthEl);
+  });
+
+  test('returns undefined for undefined input', () => {
+    const segment = getSegmentToFocus({
+      // @ts-expect-error
+      target: undefined,
+      formatParts: undefined,
+      // @ts-expect-error
+      segmentRefs: undefined,
+    });
+
+    expect(segment).toBeUndefined();
+  });
+});
diff --git a/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
similarity index 58%
rename from packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts
rename to packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
index b9b84b7bf6..93894cc243 100644
--- a/packages/date-picker/src/DatePicker/utils/focusRelevantSegment/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
@@ -2,13 +2,13 @@ import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
 import { DatePickerContextProps } from '../../../DatePickerContext';
-import { isDateSegment } from '../../../hooks/useDateSegments';
+import { DateSegment } from '../../../hooks/useDateSegments';
 import { SegmentRefs } from '../../../hooks/useSegmentRefs';
 
 interface FocusRelevantSegmentArgs {
   target: EventTarget;
   formatParts: DatePickerContextProps['formatParts'];
-  segmentRefs: SegmentRefs;
+  segmentRefs: SegmentRefs; //| Array<SegmentRefs>;
 }
 
 /**
@@ -19,11 +19,11 @@ interface FocusRelevantSegmentArgs {
  * 2) otherwise, if all segments are filled, focus the last one
  * 3) but, if some segments are empty, focus the first empty one
  */
-export const focusRelevantSegment = ({
+export const getSegmentToFocus = ({
   target,
   formatParts,
   segmentRefs,
-}: FocusRelevantSegmentArgs): void => {
+}: FocusRelevantSegmentArgs): HTMLElement | undefined | null => {
   if (
     isUndefined(target) ||
     isUndefined(formatParts) ||
@@ -34,39 +34,38 @@ export const focusRelevantSegment = ({
 
   const segmentRefsArray = Object.values(segmentRefs).map(r => r.current);
 
+  const isTargetASegment = segmentRefsArray.includes(
+    target as HTMLInputElement,
+  );
+
   // If we didn't explicitly click on an input segment...
-  if (!segmentRefsArray.includes(target as HTMLInputElement)) {
+  if (!isTargetASegment) {
+    const allSegmentsFilled = segmentRefsArray.every(el => el?.value);
     // filter out the literals from the format parts
     const formatSegments = formatParts.filter(part => part.type !== 'literal');
 
     // Check which segments are filled,
-    if (segmentRefsArray.every(el => el?.value)) {
+    if (allSegmentsFilled) {
       // if all are filled, focus the last one,
-      const keyOfLastSegment = (last(formatSegments) as Intl.DateTimeFormatPart)
-        .type;
-
-      if (isDateSegment(keyOfLastSegment)) {
-        const lastSegmentRef = segmentRefs[keyOfLastSegment];
-        lastSegmentRef?.current?.focus();
-      }
+      const lastSegmentPart = last(formatSegments) as Intl.DateTimeFormatPart;
+      const keyOfLastSegment = lastSegmentPart.type as DateSegment;
+      const lastSegmentRef = segmentRefs[keyOfLastSegment];
+      return lastSegmentRef.current;
     } else {
       // if 1+ are empty, focus the first empty one
       const emptySegmentKeys = formatSegments
         .map(p => p.type)
         .filter(type => {
-          if (isDateSegment(type)) {
-            const element = segmentRefs[type];
-            return !element?.current?.value;
-          }
+          const element = segmentRefs[type as DateSegment];
+          return !element?.current?.value;
         });
-      const firstEmptySegmentKey = emptySegmentKeys[0];
-
-      if (isDateSegment(firstEmptySegmentKey)) {
-        const firstEmptySegmentRef = segmentRefs[firstEmptySegmentKey];
-        firstEmptySegmentRef?.current?.focus();
-      }
+      const firstEmptySegmentKey = emptySegmentKeys[0] as DateSegment;
+      const firstEmptySegmentRef = segmentRefs[firstEmptySegmentKey];
+      return firstEmptySegmentRef.current;
     }
   }
+
   // otherwise, we clicked a specific segment,
   // so we focus on that segment (default behavior)
+  return target as HTMLInputElement;
 };

From c37b02e1436f45aaf7877d7869324d36401ab5cd Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 3 Oct 2023 19:09:41 -0400
Subject: [PATCH 172/351] creates getRangeSegmentToFocus

---
 .../utils/getSegmentToFocus/index.ts          | 20 +++---
 .../DateRangeInput/DateRangeInput.tsx         | 29 ++++++---
 .../utils/getRangeSegmentToFocus/index.ts     | 65 +++++++++++++++++++
 .../src/utils/getFirstEmptySegment/index.ts   | 27 ++++++++
 packages/date-picker/src/utils/index.ts       |  1 +
 5 files changed, 121 insertions(+), 21 deletions(-)
 create mode 100644 packages/date-picker/src/DateRangePicker/utils/getRangeSegmentToFocus/index.ts
 create mode 100644 packages/date-picker/src/utils/getFirstEmptySegment/index.ts

diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
index 93894cc243..b6b47d4af9 100644
--- a/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
@@ -4,11 +4,12 @@ import last from 'lodash/last';
 import { DatePickerContextProps } from '../../../DatePickerContext';
 import { DateSegment } from '../../../hooks/useDateSegments';
 import { SegmentRefs } from '../../../hooks/useSegmentRefs';
+import { getFirstEmptySegment } from '../../../utils';
 
-interface FocusRelevantSegmentArgs {
+interface GetSegmentToFocusProps {
   target: EventTarget;
   formatParts: DatePickerContextProps['formatParts'];
-  segmentRefs: SegmentRefs; //| Array<SegmentRefs>;
+  segmentRefs: SegmentRefs;
 }
 
 /**
@@ -23,7 +24,7 @@ export const getSegmentToFocus = ({
   target,
   formatParts,
   segmentRefs,
-}: FocusRelevantSegmentArgs): HTMLElement | undefined | null => {
+}: GetSegmentToFocusProps): HTMLElement | undefined | null => {
   if (
     isUndefined(target) ||
     isUndefined(formatParts) ||
@@ -53,15 +54,10 @@ export const getSegmentToFocus = ({
       return lastSegmentRef.current;
     } else {
       // if 1+ are empty, focus the first empty one
-      const emptySegmentKeys = formatSegments
-        .map(p => p.type)
-        .filter(type => {
-          const element = segmentRefs[type as DateSegment];
-          return !element?.current?.value;
-        });
-      const firstEmptySegmentKey = emptySegmentKeys[0] as DateSegment;
-      const firstEmptySegmentRef = segmentRefs[firstEmptySegmentKey];
-      return firstEmptySegmentRef.current;
+      return getFirstEmptySegment({
+        formatParts,
+        segmentRefs,
+      });
     }
   }
 
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index 30a97faf25..b6e401916c 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -1,8 +1,10 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, MouseEventHandler } from 'react';
 
 import { DateInputBox } from '../../DateInput';
 import { DateFormField } from '../../DateInput/DateFormField';
+import { useDatePickerContext } from '../../DatePickerContext';
 import { useSegmentRefs } from '../../hooks/useSegmentRefs';
+import { getRangeSegmentToFocus } from '../utils/getRangeSegmentToFocus';
 
 import { inputWrapperStyles } from './DateRangeInput.styles';
 import { DateRangeInputProps } from './DateRangeInput.types';
@@ -11,19 +13,28 @@ const EN_DASH = '–';
 
 export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
   (_props: DateRangeInputProps, fwdRef) => {
-    // const {
-    //   label,
-    //   description,
-    //   isOpen,
-    //   menuId,
-    //   // formatParts, disabled, setOpen, setIsDirty
-    // } = useDatePickerContext();
+    const { disabled, formatParts, setOpen } = useDatePickerContext();
 
     const startSegmentRefs = useSegmentRefs();
     const endSegmentRefs = useSegmentRefs();
 
+    /** Called when the input, or any of its children, is clicked */
+    const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
+      if (!disabled) {
+        setOpen(true);
+      }
+
+      const segmentToFocus = getRangeSegmentToFocus({
+        target,
+        formatParts,
+        segmentRefs: [startSegmentRefs, endSegmentRefs],
+      });
+
+      segmentToFocus?.focus();
+    };
+
     return (
-      <DateFormField ref={fwdRef}>
+      <DateFormField ref={fwdRef} onInputClick={handleInputClick}>
         <div className={inputWrapperStyles}>
           <DateInputBox segmentRefs={startSegmentRefs} />
           <span>{EN_DASH}</span>
diff --git a/packages/date-picker/src/DateRangePicker/utils/getRangeSegmentToFocus/index.ts b/packages/date-picker/src/DateRangePicker/utils/getRangeSegmentToFocus/index.ts
new file mode 100644
index 0000000000..3b9497002b
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/utils/getRangeSegmentToFocus/index.ts
@@ -0,0 +1,65 @@
+import isUndefined from 'lodash/isUndefined';
+import last from 'lodash/last';
+import { DatePickerContextProps } from 'src/DatePickerContext';
+
+import { DateSegment } from '../../../hooks/useDateSegments';
+import { SegmentRefs } from '../../../hooks/useSegmentRefs';
+import { getFirstEmptySegment } from '../../../utils';
+
+interface GetRangeSegmentToFocusProps {
+  target: EventTarget;
+  formatParts: DatePickerContextProps['formatParts'];
+  segmentRefs: [SegmentRefs, SegmentRefs];
+}
+
+/** Returns the range segment to focus on when the input is clicked */
+export const getRangeSegmentToFocus = ({
+  target,
+  formatParts,
+  segmentRefs: [startSegmentRefs, endSegmentRefs],
+}: GetRangeSegmentToFocusProps): HTMLElement | undefined | null => {
+  if (
+    isUndefined(target) ||
+    isUndefined(formatParts) ||
+    isUndefined(startSegmentRefs) ||
+    isUndefined(endSegmentRefs)
+  ) {
+    return;
+  }
+
+  const startSegmentsArray = Object.values(startSegmentRefs).map(
+    r => r.current,
+  );
+  const endSegmentsArray = Object.values(endSegmentRefs).map(r => r.current);
+  const segmentRefsArray = [...startSegmentsArray, ...endSegmentsArray];
+
+  const isTargetASegment = segmentRefsArray.includes(
+    target as HTMLInputElement,
+  );
+
+  if (!isTargetASegment) {
+    const formatSegments = formatParts.filter(part => part.type !== 'literal');
+    const allSegmentsFilled = segmentRefsArray.every(el => el?.value);
+
+    if (allSegmentsFilled) {
+      const lastSegmentPart = last(formatSegments) as Intl.DateTimeFormatPart;
+      const keyOfLastSegment = lastSegmentPart.type as DateSegment;
+      const lastSegmentRef = endSegmentRefs[keyOfLastSegment];
+      return lastSegmentRef.current;
+    } else {
+      const allStartSegmentsFilled = startSegmentsArray.every(el => el?.value);
+
+      if (allStartSegmentsFilled) {
+        return getFirstEmptySegment({
+          formatParts,
+          segmentRefs: endSegmentRefs,
+        });
+      } else {
+        return getFirstEmptySegment({
+          formatParts,
+          segmentRefs: startSegmentRefs,
+        });
+      }
+    }
+  }
+};
diff --git a/packages/date-picker/src/utils/getFirstEmptySegment/index.ts b/packages/date-picker/src/utils/getFirstEmptySegment/index.ts
new file mode 100644
index 0000000000..1f95d6a2ac
--- /dev/null
+++ b/packages/date-picker/src/utils/getFirstEmptySegment/index.ts
@@ -0,0 +1,27 @@
+import { DatePickerContextProps } from '../../DatePickerContext';
+import { DateSegment } from '../../hooks/useDateSegments';
+import { SegmentRefs } from '../../hooks/useSegmentRefs';
+
+/**
+ *
+ * @returns The first empty date segment for the given format
+ */
+export const getFirstEmptySegment = ({
+  formatParts,
+  segmentRefs,
+}: {
+  formatParts: Required<DatePickerContextProps>['formatParts'];
+  segmentRefs: SegmentRefs;
+}) => {
+  // if 1+ are empty, focus the first empty one
+  const formatSegments = formatParts.filter(part => part.type !== 'literal');
+  const emptySegmentKeys = formatSegments
+    .map(p => p.type)
+    .filter(type => {
+      const element = segmentRefs[type as DateSegment];
+      return !element?.current?.value;
+    });
+  const firstEmptySegmentKey = emptySegmentKeys[0] as DateSegment;
+  const firstEmptySegmentRef = segmentRefs[firstEmptySegmentKey];
+  return firstEmptySegmentRef.current;
+};
diff --git a/packages/date-picker/src/utils/index.ts b/packages/date-picker/src/utils/index.ts
index 5a54d18b0e..c45173d610 100644
--- a/packages/date-picker/src/utils/index.ts
+++ b/packages/date-picker/src/utils/index.ts
@@ -1,5 +1,6 @@
 export { cloneReverse } from './cloneReverse';
 export { getDaysInUTCMonth } from './getDaysInUTCMonth';
+export { getFirstEmptySegment } from './getFirstEmptySegment';
 export { getFirstOfMonth } from './getFirstOfMonth';
 export { getFormatParts } from './getFormatParts';
 export { getFullMonthLabel } from './getFullMonthLabel';

From 84f0eb017abb078aeb48f7ea13a1793bce80e2a8 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 3 Oct 2023 19:22:36 -0400
Subject: [PATCH 173/351] scaffolds keydown behavior

---
 .../DatePickerInput/DatePickerInput.tsx       |  4 +-
 .../DatePickerInput/DatePickerInput.types.ts  |  4 +-
 .../DateRangeInput/DateRangeInput.tsx         | 59 ++++++++++++++++++-
 .../DateRangeInput/DateRangeInput.types.ts    |  5 +-
 .../utils/getRelativeRangeSegment/index.ts    |  3 +
 packages/date-picker/src/utils/index.ts       |  1 +
 .../utils/isElementInputSegment/index.ts      |  2 +-
 7 files changed, 70 insertions(+), 8 deletions(-)
 create mode 100644 packages/date-picker/src/DateRangePicker/utils/getRelativeRangeSegment/index.ts
 rename packages/date-picker/src/{DatePicker => }/utils/isElementInputSegment/index.ts (86%)

diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 9370cdbc00..78ca1497ea 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -12,9 +12,9 @@ import { DateFormField } from '../../DateInput/DateFormField';
 import { useDatePickerContext } from '../../DatePickerContext';
 import { useSegmentRefs } from '../../hooks/useSegmentRefs';
 import { isZeroLike } from '../../utils';
+import { isElementInputSegment } from '../../utils/isElementInputSegment';
 import { getRelativeSegment } from '../utils/getRelativeSegment';
 import { getSegmentToFocus } from '../utils/getSegmentToFocus';
-import { isElementInputSegment } from '../utils/isElementInputSegment';
 
 import { DatePickerInputProps } from './DatePickerInput.types';
 
@@ -54,9 +54,9 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
       const { target: _target, key } = e;
       const target = _target as HTMLElement;
-      // if target is not a segment, do nothing
       const isSegment = isElementInputSegment(target, segmentRefs);
 
+      // if target is not a segment, do nothing
       if (!isSegment) return;
 
       const isInputEmpty = isZeroLike(target.value);
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index 408cbec601..2dd51e906d 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -8,8 +8,8 @@ import { DateInputBoxProps } from '../../DateInput';
 import { DatePickerProps } from '../DatePicker.types';
 
 export interface DatePickerInputProps
-  extends Pick<DateInputBoxProps, 'value' | 'setValue' | 'onSegmentChange'>,
-    Pick<DatePickerProps, 'handleValidation'>,
+  extends Pick<DateInputBoxProps, 'setValue' | 'onSegmentChange'>,
+    Pick<DatePickerProps, 'value' | 'handleValidation'>,
     HTMLElementProps<'div'> {
   /**
    * Click handler
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index b6e401916c..0fe07cf4f4 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -1,10 +1,18 @@
-import React, { forwardRef, MouseEventHandler } from 'react';
+import React, {
+  forwardRef,
+  KeyboardEventHandler,
+  MouseEventHandler,
+} from 'react';
+
+import { keyMap } from '@leafygreen-ui/lib';
 
 import { DateInputBox } from '../../DateInput';
 import { DateFormField } from '../../DateInput/DateFormField';
 import { useDatePickerContext } from '../../DatePickerContext';
 import { useSegmentRefs } from '../../hooks/useSegmentRefs';
+import { isElementInputSegment, isZeroLike } from '../../utils';
 import { getRangeSegmentToFocus } from '../utils/getRangeSegmentToFocus';
+import { getRelativeRangeSegment } from '../utils/getRelativeRangeSegment';
 
 import { inputWrapperStyles } from './DateRangeInput.styles';
 import { DateRangeInputProps } from './DateRangeInput.types';
@@ -12,7 +20,7 @@ import { DateRangeInputProps } from './DateRangeInput.types';
 const EN_DASH = '–';
 
 export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
-  (_props: DateRangeInputProps, fwdRef) => {
+  ({ start, end, handleValidation }: DateRangeInputProps, fwdRef) => {
     const { disabled, formatParts, setOpen } = useDatePickerContext();
 
     const startSegmentRefs = useSegmentRefs();
@@ -33,6 +41,53 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
       segmentToFocus?.focus();
     };
 
+    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
+      const { target: _target, key } = e;
+      const target = _target as HTMLElement;
+      const isSegment =
+        isElementInputSegment(target, startSegmentRefs) ||
+        isElementInputSegment(target, endSegmentRefs);
+
+      // if target is not a segment, do nothing
+      if (!isSegment) return;
+
+      const isInputEmpty = isZeroLike(target.value);
+      const cursorPosition = target.selectionEnd;
+
+      switch (key) {
+        case keyMap.ArrowLeft:
+          // TODO:
+          getRelativeRangeSegment();
+          break;
+        case keyMap.ArrowRight:
+          // TODO:
+          break;
+        case keyMap.ArrowDown:
+          // TODO:
+          break;
+        case keyMap.ArrowUp:
+          // TODO:
+          break;
+        case keyMap.Backspace: {
+          // TODO:
+          break;
+        }
+
+        case keyMap.Enter:
+          handleValidation?.([start || null, end || null]);
+          break;
+
+        case keyMap.Escape:
+          setOpen(false);
+          handleValidation?.([start || null, end || null]);
+          break;
+
+        default:
+          // any other keydown should open the menu
+          setOpen(true);
+      }
+    };
+
     return (
       <DateFormField ref={fwdRef} onInputClick={handleInputClick}>
         <div className={inputWrapperStyles}>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
index fdbfeeb41d..003152f17d 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
@@ -1 +1,4 @@
-export interface DateRangeInputProps {}
+import { DateRangePickerProps } from '../DateRangePicker.types';
+
+export interface DateRangeInputProps
+  extends Pick<DateRangePickerProps, 'start' | 'end' | 'handleValidation'> {}
diff --git a/packages/date-picker/src/DateRangePicker/utils/getRelativeRangeSegment/index.ts b/packages/date-picker/src/DateRangePicker/utils/getRelativeRangeSegment/index.ts
new file mode 100644
index 0000000000..b0228d89a8
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/utils/getRelativeRangeSegment/index.ts
@@ -0,0 +1,3 @@
+export const getRelativeRangeSegment = () => {
+  //TODO:
+};
diff --git a/packages/date-picker/src/utils/index.ts b/packages/date-picker/src/utils/index.ts
index c45173d610..ae08549a5a 100644
--- a/packages/date-picker/src/utils/index.ts
+++ b/packages/date-picker/src/utils/index.ts
@@ -12,6 +12,7 @@ export { getUTCDateString } from './getUTCDateString';
 export { getValueFormatter } from './getValueFormatter';
 export { getWeeksArray } from './getWeeksArray';
 export { isCurrentUTCDay } from './isCurrentUTCDay';
+export { isElementInputSegment } from './isElementInputSegment';
 export { isSameTZDay } from './isSameTZDay';
 export { isSameUTCDay } from './isSameUTCDay';
 export { isSameUTCMonth } from './isSameUTCMonth';
diff --git a/packages/date-picker/src/DatePicker/utils/isElementInputSegment/index.ts b/packages/date-picker/src/utils/isElementInputSegment/index.ts
similarity index 86%
rename from packages/date-picker/src/DatePicker/utils/isElementInputSegment/index.ts
rename to packages/date-picker/src/utils/isElementInputSegment/index.ts
index ffa8e37856..28ac985fb7 100644
--- a/packages/date-picker/src/DatePicker/utils/isElementInputSegment/index.ts
+++ b/packages/date-picker/src/utils/isElementInputSegment/index.ts
@@ -1,4 +1,4 @@
-import { SegmentRefs } from '../../../hooks/useSegmentRefs';
+import { SegmentRefs } from '../../hooks/useSegmentRefs';
 
 /**
  * Returns whether the given element is a segment

From 8607e562359f09e5dfe4fb5205ecbb919d95a12f Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 13:43:25 -0400
Subject: [PATCH 174/351] add darkMode prop. Update 'unset' -> 'default'

---
 packages/form-field/src/FormField.stories.tsx             | 2 +-
 packages/form-field/src/FormField/FormField.tsx           | 8 ++++++--
 packages/form-field/src/FormField/FormField.types.ts      | 7 ++++---
 .../form-field/src/FormFieldContext/FormFieldContext.tsx  | 2 +-
 .../src/FormFieldInput/FormFieldInput.styles.ts           | 2 +-
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index 6b0120c81b..eb04c42372 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -61,7 +61,7 @@ const meta: StoryMetaType<typeof FormField, FormFieldStoryProps> = {
     description: 'Description',
     errorMessage: 'This is a notification',
     size: Size.Default,
-    state: FormFieldState.Unset,
+    state: FormFieldState.Default,
     glyph: 'Beaker',
   },
   argTypes: {
diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
index 3b59c6c4df..2af8ac070f 100644
--- a/packages/form-field/src/FormField/FormField.tsx
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -34,11 +34,12 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
       label,
       description,
       children,
-      state = FormFieldState.Unset,
+      state = FormFieldState.Default,
       size = Size.Default,
       disabled = false,
       errorMessage,
       className,
+      darkMode,
       ...rest
     }: FormFieldProps,
     fwdRef,
@@ -51,7 +52,10 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
       useFormFieldProps({ label, description, state, ...rest });
 
     return (
-      <LeafyGreenProvider baseFontSize={baseFontSize === 16 ? 16 : 14}>
+      <LeafyGreenProvider
+        darkMode={darkMode}
+        baseFontSize={baseFontSize === 16 ? 16 : 14}
+      >
         <FormFieldProvider value={{ disabled, size, state, inputProps }}>
           <div
             className={cx(formFieldFontStyles[baseFontSize], className)}
diff --git a/packages/form-field/src/FormField/FormField.types.ts b/packages/form-field/src/FormField/FormField.types.ts
index 9b74d41916..c0e7b1abf7 100644
--- a/packages/form-field/src/FormField/FormField.types.ts
+++ b/packages/form-field/src/FormField/FormField.types.ts
@@ -1,8 +1,8 @@
-import { HTMLElementProps } from '@leafygreen-ui/lib';
+import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 
 export const FormFieldState = {
-  Unset: 'unset',
+  Default: 'default',
   Error: 'error',
   Valid: 'valid',
 } as const;
@@ -39,7 +39,8 @@ type AriaLabelProps =
     };
 
 export type FormFieldProps = Omit<HTMLElementProps<'div'>, 'children'> &
-  AriaLabelProps & {
+  AriaLabelProps &
+  DarkModeProps & {
     children: FormFieldChildren;
     description?: React.ReactNode;
     state?: FormFieldState;
diff --git a/packages/form-field/src/FormFieldContext/FormFieldContext.tsx b/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
index 08ea16798c..de9e706bff 100644
--- a/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
+++ b/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
@@ -15,7 +15,7 @@ export interface FormFieldContextProps {
 export const defaultFormFieldContext = {
   disabled: false,
   size: Size.Default,
-  state: FormFieldState.Unset,
+  state: FormFieldState.Default,
 };
 
 export const FormFieldContext = React.createContext<FormFieldContextProps>(
diff --git a/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts b/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts
index 58b54130c9..8b50bb2db9 100644
--- a/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts
+++ b/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts
@@ -231,7 +231,7 @@ export const inputWrapperStateStyles: Record<
       }
     `,
   },
-  [FormFieldState.Unset]: {
+  [FormFieldState.Default]: {
     [Theme.Light]: css``,
     [Theme.Dark]: css``,
   },

From 05f9f9e41e50695d843b800dc1f1bcc3e78d91d3 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 13:48:59 -0400
Subject: [PATCH 175/351] rm Valid state from SB

---
 packages/form-field/src/FormField.stories.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index eb04c42372..8adefb293d 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { StoryFn } from '@storybook/react';
+import { omit } from 'lodash';
 
 import Button from '@leafygreen-ui/button';
 import { css } from '@leafygreen-ui/emotion';
@@ -33,7 +34,7 @@ const meta: StoryMetaType<typeof FormField, FormFieldStoryProps> = {
         description: [undefined, 'Description'],
         icon: [undefined, <Icon glyph="Cloud" key="" />],
         size: Object.values(Size),
-        state: Object.values(FormFieldState),
+        state: omit(Object.values(FormFieldState), 'valid'),
         disabled: [false, true],
       },
       excludeCombinations: [
@@ -70,7 +71,10 @@ const meta: StoryMetaType<typeof FormField, FormFieldStoryProps> = {
     description: { control: 'text' },
     errorMessage: { control: 'text' },
     size: { control: 'select' },
-    state: { control: 'select' },
+    state: {
+      control: 'select',
+      options: omit(Object.values(FormFieldState), 'valid'),
+    },
     glyph: { control: 'select', options: Object.keys(glyphs) },
   },
 };

From 125bdaaea3db324619925cafc32d23ebacabbdf0 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 13:51:29 -0400
Subject: [PATCH 176/351] update Default -> None

---
 packages/form-field/src/FormField.stories.tsx                   | 2 +-
 packages/form-field/src/FormField/FormField.tsx                 | 2 +-
 packages/form-field/src/FormField/FormField.types.ts            | 2 +-
 packages/form-field/src/FormFieldContext/FormFieldContext.tsx   | 2 +-
 packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index 8adefb293d..a0a1c3f6d4 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -62,7 +62,7 @@ const meta: StoryMetaType<typeof FormField, FormFieldStoryProps> = {
     description: 'Description',
     errorMessage: 'This is a notification',
     size: Size.Default,
-    state: FormFieldState.Default,
+    state: FormFieldState.None,
     glyph: 'Beaker',
   },
   argTypes: {
diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
index 2af8ac070f..399f5ef1e4 100644
--- a/packages/form-field/src/FormField/FormField.tsx
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -34,7 +34,7 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
       label,
       description,
       children,
-      state = FormFieldState.Default,
+      state = FormFieldState.None,
       size = Size.Default,
       disabled = false,
       errorMessage,
diff --git a/packages/form-field/src/FormField/FormField.types.ts b/packages/form-field/src/FormField/FormField.types.ts
index c0e7b1abf7..6c8284ce01 100644
--- a/packages/form-field/src/FormField/FormField.types.ts
+++ b/packages/form-field/src/FormField/FormField.types.ts
@@ -2,7 +2,7 @@ import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 
 export const FormFieldState = {
-  Default: 'default',
+  None: 'none',
   Error: 'error',
   Valid: 'valid',
 } as const;
diff --git a/packages/form-field/src/FormFieldContext/FormFieldContext.tsx b/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
index de9e706bff..99339d0073 100644
--- a/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
+++ b/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
@@ -15,7 +15,7 @@ export interface FormFieldContextProps {
 export const defaultFormFieldContext = {
   disabled: false,
   size: Size.Default,
-  state: FormFieldState.Default,
+  state: FormFieldState.None,
 };
 
 export const FormFieldContext = React.createContext<FormFieldContextProps>(
diff --git a/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts b/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts
index 8b50bb2db9..664fd69f12 100644
--- a/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts
+++ b/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts
@@ -231,7 +231,7 @@ export const inputWrapperStateStyles: Record<
       }
     `,
   },
-  [FormFieldState.Default]: {
+  [FormFieldState.None]: {
     [Theme.Light]: css``,
     [Theme.Dark]: css``,
   },

From 882b76dfd09b92c91b1196650e36974445731e2e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 13:52:32 -0400
Subject: [PATCH 177/351] fix build

---
 packages/form-field/src/FormField.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index a0a1c3f6d4..f0c3e3ac6b 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { StoryFn } from '@storybook/react';
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 
 import Button from '@leafygreen-ui/button';
 import { css } from '@leafygreen-ui/emotion';

From 8a6c427f1bfb8eb5e86ba8a617d5e392c160dc3d Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 14:10:18 -0400
Subject: [PATCH 178/351] Rename to FormFieldInputContainer

---
 packages/form-field/src/FormField.stories.tsx | 26 +++++++++++--------
 .../src/FormFieldContext/FormFieldContext.tsx |  4 +++
 .../FormFieldInput/FormFieldInput.types.ts    |  8 ------
 .../form-field/src/FormFieldInput/index.ts    |  2 --
 .../FormFieldInputContainer.styles.ts}        |  0
 .../FormFieldInputContainer.tsx}              | 21 ++++++++++-----
 .../FormFieldInputContainer.types.ts          | 15 +++++++++++
 .../src/FormFieldInputContainer/index.ts      |  2 ++
 packages/form-field/src/index.ts              |  5 +++-
 9 files changed, 55 insertions(+), 28 deletions(-)
 delete mode 100644 packages/form-field/src/FormFieldInput/FormFieldInput.types.ts
 delete mode 100644 packages/form-field/src/FormFieldInput/index.ts
 rename packages/form-field/src/{FormFieldInput/FormFieldInput.styles.ts => FormFieldInputContainer/FormFieldInputContainer.styles.ts} (100%)
 rename packages/form-field/src/{FormFieldInput/FormFieldInput.tsx => FormFieldInputContainer/FormFieldInputContainer.tsx} (81%)
 create mode 100644 packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.types.ts
 create mode 100644 packages/form-field/src/FormFieldInputContainer/index.ts

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index f0c3e3ac6b..5cbd9bab4f 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -13,15 +13,15 @@ import { Size } from '@leafygreen-ui/tokens';
 
 import {
   FormField,
-  FormFieldInput,
-  FormFieldInputProps,
+  FormFieldInputContainer,
+  FormFieldInputContainerProps,
   FormFieldProps,
   FormFieldState,
   useFormFieldContext,
 } from '.';
 
 type FormFieldStoryProps = FormFieldProps &
-  FormFieldInputProps & { glyph: string };
+  FormFieldInputContainerProps & { glyph: string };
 
 const meta: StoryMetaType<typeof FormField, FormFieldStoryProps> = {
   title: 'Components/FormField',
@@ -49,9 +49,9 @@ const meta: StoryMetaType<typeof FormField, FormFieldStoryProps> = {
       decorator: (Instance, ctx) => (
         <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
           <Instance>
-            <FormFieldInput icon={ctx?.args.icon}>
+            <FormFieldInputContainer icon={ctx?.args.icon}>
               {ctx?.args.children}
-            </FormFieldInput>
+            </FormFieldInputContainer>
           </Instance>
         </LeafyGreenProvider>
       ),
@@ -98,9 +98,13 @@ export const Basic: StoryFn<FormFieldStoryProps> = ({
     disabled={disabled}
     {...rest}
   >
-    <FormFieldInput role="combobox" tabIndex={-1} icon={<Icon glyph={glyph} />}>
+    <FormFieldInputContainer
+      role="combobox"
+      tabIndex={-1}
+      icon={<Icon glyph={glyph} />}
+    >
       <input placeholder="placeholder" />
-    </FormFieldInput>
+    </FormFieldInputContainer>
   </FormField>
 );
 
@@ -121,7 +125,7 @@ export const WithIconButton: StoryFn<FormFieldStoryProps> = ({
     disabled={disabled}
     {...rest}
   >
-    <FormFieldInput
+    <FormFieldInputContainer
       role="combobox"
       tabIndex={-1}
       icon={
@@ -131,7 +135,7 @@ export const WithIconButton: StoryFn<FormFieldStoryProps> = ({
       }
     >
       <input placeholder="placeholder" />
-    </FormFieldInput>
+    </FormFieldInputContainer>
   </FormField>
 );
 
@@ -140,7 +144,7 @@ export const Custom_TwoIcons: StoryFn<FormFieldStoryProps> = ({
   ...props
 }: FormFieldStoryProps) => (
   <FormField {...props}>
-    <FormFieldInput
+    <FormFieldInputContainer
       role="combobox"
       tabIndex={-1}
       icon={
@@ -159,7 +163,7 @@ export const Custom_TwoIcons: StoryFn<FormFieldStoryProps> = ({
       }
     >
       <input placeholder="placeholder" />
-    </FormFieldInput>
+    </FormFieldInputContainer>
   </FormField>
 );
 
diff --git a/packages/form-field/src/FormFieldContext/FormFieldContext.tsx b/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
index 99339d0073..49d448119f 100644
--- a/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
+++ b/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
@@ -33,4 +33,8 @@ export const FormFieldProvider = ({
   </FormFieldContext.Provider>
 );
 
+/**
+ * Returns {@link FormFieldContextProps} used within the FormFieldInputContainer,
+ * or within and custom FormField children
+ */
 export const useFormFieldContext = () => useContext(FormFieldContext);
diff --git a/packages/form-field/src/FormFieldInput/FormFieldInput.types.ts b/packages/form-field/src/FormFieldInput/FormFieldInput.types.ts
deleted file mode 100644
index e4af4f5b8d..0000000000
--- a/packages/form-field/src/FormFieldInput/FormFieldInput.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { HTMLElementProps } from '@leafygreen-ui/lib';
-
-import { FormFieldChildren } from '../FormField/FormField.types';
-
-export interface FormFieldInputProps extends HTMLElementProps<'div'> {
-  children: FormFieldChildren;
-  icon?: React.ReactElement;
-}
diff --git a/packages/form-field/src/FormFieldInput/index.ts b/packages/form-field/src/FormFieldInput/index.ts
deleted file mode 100644
index 290dd4e09b..0000000000
--- a/packages/form-field/src/FormFieldInput/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { FormFieldInput } from './FormFieldInput';
-export { FormFieldInputProps } from './FormFieldInput.types';
diff --git a/packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts b/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.styles.ts
similarity index 100%
rename from packages/form-field/src/FormFieldInput/FormFieldInput.styles.ts
rename to packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.styles.ts
diff --git a/packages/form-field/src/FormFieldInput/FormFieldInput.tsx b/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.tsx
similarity index 81%
rename from packages/form-field/src/FormFieldInput/FormFieldInput.tsx
rename to packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.tsx
index 69170eacfd..e61eba0a58 100644
--- a/packages/form-field/src/FormFieldInput/FormFieldInput.tsx
+++ b/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.tsx
@@ -21,12 +21,21 @@ import {
   inputWrapperModeStyles,
   inputWrapperSizeStyles,
   inputWrapperStateStyles,
-} from './FormFieldInput.styles';
-import { FormFieldInputProps } from './FormFieldInput.types';
+} from './FormFieldInputContainer.styles';
+import { FormFieldInputContainerProps } from './FormFieldInputContainer.types';
 
-/** Applies styling around the input of a FormField element */
-export const FormFieldInput = forwardRef<HTMLDivElement, FormFieldInputProps>(
-  ({ icon, className, children, ...rest }: FormFieldInputProps, fwdRef) => {
+/**
+ * Applies styling around the `input` of a FormField element
+ * @internal
+ */
+export const FormFieldInputContainer = forwardRef<
+  HTMLDivElement,
+  FormFieldInputContainerProps
+>(
+  (
+    { icon, className, children, ...rest }: FormFieldInputContainerProps,
+    fwdRef,
+  ) => {
     const { theme } = useDarkMode();
     const { disabled, size, state, inputProps } = useFormFieldContext();
 
@@ -77,4 +86,4 @@ export const FormFieldInput = forwardRef<HTMLDivElement, FormFieldInputProps>(
   },
 );
 
-FormFieldInput.displayName = 'FormFieldInputWrapper';
+FormFieldInputContainer.displayName = 'FormFieldInputWrapper';
diff --git a/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.types.ts b/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.types.ts
new file mode 100644
index 0000000000..6188b8dc2d
--- /dev/null
+++ b/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.types.ts
@@ -0,0 +1,15 @@
+import { HTMLElementProps } from '@leafygreen-ui/lib';
+
+import { FormFieldChildren } from '../FormField/FormField.types';
+
+export interface FormFieldInputContainerProps extends HTMLElementProps<'div'> {
+  /**
+   * Must pass a single element in order to label the input element appropriately
+   */
+  children: FormFieldChildren;
+
+  /**
+   * The icon rendered on the right of the input box
+   */
+  icon?: React.ReactElement;
+}
diff --git a/packages/form-field/src/FormFieldInputContainer/index.ts b/packages/form-field/src/FormFieldInputContainer/index.ts
new file mode 100644
index 0000000000..b27aa2c610
--- /dev/null
+++ b/packages/form-field/src/FormFieldInputContainer/index.ts
@@ -0,0 +1,2 @@
+export { FormFieldInputContainer } from './FormFieldInputContainer';
+export { FormFieldInputContainerProps } from './FormFieldInputContainer.types';
diff --git a/packages/form-field/src/index.ts b/packages/form-field/src/index.ts
index 02e7140128..1f871bb92b 100644
--- a/packages/form-field/src/index.ts
+++ b/packages/form-field/src/index.ts
@@ -12,4 +12,7 @@ export {
   FormFieldProvider,
   useFormFieldContext,
 } from './FormFieldContext';
-export { FormFieldInput, type FormFieldInputProps } from './FormFieldInput';
+export {
+  FormFieldInputContainer,
+  type FormFieldInputContainerProps,
+} from './FormFieldInputContainer';

From e932e7fc1592df6d2f13e3c6968b55bd7490ffe5 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 14:56:40 -0400
Subject: [PATCH 179/351] fix tests

---
 packages/form-field/src/FormField.spec.tsx    | 80 ++++++++++---------
 .../src/FormFieldContext/FormFieldContext.tsx |  2 +-
 2 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/packages/form-field/src/FormField.spec.tsx b/packages/form-field/src/FormField.spec.tsx
index 5375b56ef5..336f8efd70 100644
--- a/packages/form-field/src/FormField.spec.tsx
+++ b/packages/form-field/src/FormField.spec.tsx
@@ -5,7 +5,7 @@ import Icon from '@leafygreen-ui/icon';
 
 import {
   FormField,
-  FormFieldInput,
+  FormFieldInputContainer,
   FormFieldState,
   useFormFieldContext,
 } from '.';
@@ -14,9 +14,9 @@ describe('packages/form-field', () => {
   test('rest passed to outer element', () => {
     const { getByTestId } = render(
       <FormField label="Label" data-testid="form-field">
-        <FormFieldInput>
+        <FormFieldInputContainer>
           <div />
-        </FormFieldInput>
+        </FormFieldInputContainer>
       </FormField>,
     );
     const formField = getByTestId('form-field');
@@ -26,9 +26,9 @@ describe('packages/form-field', () => {
   test('className passed to outer element', () => {
     const { getByTestId } = render(
       <FormField label="Label" data-testid="form-field" className="form-field">
-        <FormFieldInput>
+        <FormFieldInputContainer>
           <div />
-        </FormFieldInput>
+        </FormFieldInputContainer>
       </FormField>,
     );
     const formField = getByTestId('form-field');
@@ -42,9 +42,9 @@ describe('packages/form-field', () => {
         description="Description"
         data-testid="form-field"
       >
-        <FormFieldInput>
+        <FormFieldInputContainer>
           <div />
-        </FormFieldInput>
+        </FormFieldInputContainer>
       </FormField>,
     );
     const description = getByText('Description');
@@ -58,9 +58,9 @@ describe('packages/form-field', () => {
         description={<span data-testid="description-span">description</span>}
         data-testid="form-field"
       >
-        <FormFieldInput>
+        <FormFieldInputContainer>
           <div />
-        </FormFieldInput>
+        </FormFieldInputContainer>
       </FormField>,
     );
     const descriptionSpan = queryByTestId('description-span');
@@ -71,9 +71,9 @@ describe('packages/form-field', () => {
   test('input has id,', () => {
     const { getByTestId } = render(
       <FormField label="Label" data-testid="form-field">
-        <FormFieldInput>
+        <FormFieldInputContainer>
           <div data-testid="input" />
-        </FormFieldInput>
+        </FormFieldInputContainer>
       </FormField>,
     );
     const input = getByTestId('input');
@@ -84,9 +84,9 @@ describe('packages/form-field', () => {
     test('label element has id & htmlFor', () => {
       const { getByText } = render(
         <FormField label="Label" data-testid="form-field">
-          <FormFieldInput>
+          <FormFieldInputContainer>
             <div />
-          </FormFieldInput>
+          </FormFieldInputContainer>
         </FormField>,
       );
       const label = getByText('Label');
@@ -100,9 +100,9 @@ describe('packages/form-field', () => {
           label={<span data-testid="label-span">Label</span>}
           data-testid="form-field"
         >
-          <FormFieldInput>
+          <FormFieldInputContainer>
             <div />
-          </FormFieldInput>
+          </FormFieldInputContainer>
         </FormField>,
       );
       const labelSpan = queryByTestId('label-span');
@@ -117,9 +117,9 @@ describe('packages/form-field', () => {
           description="Description"
           data-testid="form-field"
         >
-          <FormFieldInput>
+          <FormFieldInputContainer>
             <div data-testid="input" />
-          </FormFieldInput>
+          </FormFieldInputContainer>
         </FormField>,
       );
       const label = getByText('Label');
@@ -134,9 +134,9 @@ describe('packages/form-field', () => {
           description="Description"
           data-testid="form-field"
         >
-          <FormFieldInput>
+          <FormFieldInputContainer>
             <div data-testid="input" />
-          </FormFieldInput>
+          </FormFieldInputContainer>
         </FormField>,
       );
       const labelSpan = queryByTestId('label-span');
@@ -154,9 +154,9 @@ describe('packages/form-field', () => {
           description="Description"
           data-testid="form-field"
         >
-          <FormFieldInput>
+          <FormFieldInputContainer>
             <div data-testid="input" />
-          </FormFieldInput>
+          </FormFieldInputContainer>
         </FormField>,
       );
       const description = getByText('Description');
@@ -171,9 +171,9 @@ describe('packages/form-field', () => {
           description={<span data-testid="description-span">description</span>}
           data-testid="form-field"
         >
-          <FormFieldInput>
+          <FormFieldInputContainer>
             <div data-testid="input" />
-          </FormFieldInput>
+          </FormFieldInputContainer>
         </FormField>,
       );
       const descriptionSpan = queryByTestId('description-span');
@@ -187,9 +187,9 @@ describe('packages/form-field', () => {
     test('when aria-label is provided, input has that aria-label', () => {
       const { getByTestId } = render(
         <FormField aria-label="Label" data-testid="form-field">
-          <FormFieldInput>
+          <FormFieldInputContainer>
             <div data-testid="input" />
-          </FormFieldInput>
+          </FormFieldInputContainer>
         </FormField>,
       );
       const input = getByTestId('input');
@@ -199,9 +199,9 @@ describe('packages/form-field', () => {
     test('when aria-labelledby is provided, input has that aria-labelledby', () => {
       const { getByTestId } = render(
         <FormField aria-labelledby="label-123" data-testid="form-field">
-          <FormFieldInput>
+          <FormFieldInputContainer>
             <div data-testid="input" />
-          </FormFieldInput>
+          </FormFieldInputContainer>
         </FormField>,
       );
       const input = getByTestId('input');
@@ -217,9 +217,9 @@ describe('packages/form-field', () => {
           errorMessage="This is an error message"
           data-testid="form-field"
         >
-          <FormFieldInput>
+          <FormFieldInputContainer>
             <div data-testid="input" />
-          </FormFieldInput>
+          </FormFieldInputContainer>
         </FormField>,
       );
       const error = queryByText('This is an error message');
@@ -234,9 +234,9 @@ describe('packages/form-field', () => {
           state={FormFieldState.Error}
           data-testid="form-field"
         >
-          <FormFieldInput>
+          <FormFieldInputContainer>
             <div data-testid="input" />
-          </FormFieldInput>
+          </FormFieldInputContainer>
         </FormField>,
       );
       const error = queryByText('This is an error message');
@@ -251,9 +251,9 @@ describe('packages/form-field', () => {
           state={FormFieldState.Error}
           data-testid="form-field"
         >
-          <FormFieldInput>
+          <FormFieldInputContainer>
             <div data-testid="input" />
-          </FormFieldInput>
+          </FormFieldInputContainer>
         </FormField>,
       );
       const error = queryByText('This is an error message');
@@ -268,9 +268,9 @@ describe('packages/form-field', () => {
           state={FormFieldState.Error}
           data-testid="form-field"
         >
-          <FormFieldInput>
+          <FormFieldInputContainer>
             <div data-testid="input" />
-          </FormFieldInput>
+          </FormFieldInputContainer>
         </FormField>,
       );
       const input = getByTestId('input');
@@ -287,9 +287,9 @@ describe('packages/form-field', () => {
           state={FormFieldState.Error}
           data-testid="form-field"
         >
-          <FormFieldInput>
+          <FormFieldInputContainer>
             <div data-testid="input" />
-          </FormFieldInput>
+          </FormFieldInputContainer>
         </FormField>,
       );
       const input = getByTestId('input');
@@ -305,9 +305,11 @@ describe('packages/form-field', () => {
   test('Renders an icon', () => {
     const { queryByTestId } = render(
       <FormField label="Label" data-testid="form-field">
-        <FormFieldInput icon={<Icon glyph="Beaker" data-testid="icon" />}>
+        <FormFieldInputContainer
+          icon={<Icon glyph="Beaker" data-testid="icon" />}
+        >
           <div data-testid="input" />
-        </FormFieldInput>
+        </FormFieldInputContainer>
       </FormField>,
     );
 
diff --git a/packages/form-field/src/FormFieldContext/FormFieldContext.tsx b/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
index 49d448119f..28fb425f18 100644
--- a/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
+++ b/packages/form-field/src/FormFieldContext/FormFieldContext.tsx
@@ -34,7 +34,7 @@ export const FormFieldProvider = ({
 );
 
 /**
- * Returns {@link FormFieldContextProps} used within the FormFieldInputContainer,
+ * Returns {@link FormFieldContextProps} to be used within the FormFieldInputContainer,
  * or within and custom FormField children
  */
 export const useFormFieldContext = () => useContext(FormFieldContext);

From 669499c610e938c3dcd97ab015cb6a4b7a7c9379 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 15:08:23 -0400
Subject: [PATCH 180/351] Refactors re FormField changes

---
 .../DateInput/DateFormField/DateFormField.stories.tsx    | 8 ++++----
 .../src/DateInput/DateFormField/DateFormField.tsx        | 6 +++---
 .../src/DateInput/DateFormField/DateFormField.types.ts   | 7 -------
 .../date-picker/src/DateInput/DateFormField/index.ts     | 5 +----
 .../src/DatePickerContext/DatePickerContext.utils.ts     | 4 ++--
 packages/date-picker/src/types.ts                        | 9 ++++++++-
 6 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
index da70bcd793..0125736668 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { StoryFn } from '@storybook/react';
 
 import { css } from '@leafygreen-ui/emotion';
-import { FormFieldState } from '@leafygreen-ui/form-field';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
@@ -11,6 +10,7 @@ import {
   DatePickerContextProps,
   DatePickerProvider,
 } from '../../DatePickerContext';
+import { DatePickerState } from '../../types';
 
 import { DateFormField } from './DateFormField';
 
@@ -30,7 +30,7 @@ const meta: StoryMetaType<
         darkMode: [false, true],
         label: ['Label', undefined],
         description: [undefined, 'Description'],
-        state: ['unset', 'error'],
+        state: Object.values(DatePickerState),
         disabled: [false, true],
       },
       excludeCombinations: [
@@ -72,7 +72,7 @@ const meta: StoryMetaType<
   args: {
     label: 'Label',
     description: 'Description',
-    state: 'error',
+    state: DatePickerState.Error,
     errorMessage: 'This is an error message',
   },
   argTypes: {
@@ -88,7 +88,7 @@ const Template: StoryFn<typeof DateFormField> = () => {
       value={{
         label: 'Label',
         description: 'Description',
-        state: FormFieldState.Error,
+        state: DatePickerState.Error,
         errorMessage: 'This is an error message',
       }}
     >
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
index e07f021ddf..578682c8f7 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { FormField, FormFieldInput } from '@leafygreen-ui/form-field';
+import { FormField, FormFieldInputContainer } from '@leafygreen-ui/form-field';
 
 import { useDatePickerContext } from '../../DatePickerContext';
 import { CalendarButton } from '../CalendarButton';
@@ -36,7 +36,7 @@ export const DateFormField = React.forwardRef<
         errorMessage={errorMessage}
         {...rest}
       >
-        <FormFieldInput
+        <FormFieldInputContainer
           role="combobox"
           tabIndex={-1}
           aria-expanded={isOpen}
@@ -45,7 +45,7 @@ export const DateFormField = React.forwardRef<
           icon={<CalendarButton onClick={onIconButtonClick} />}
         >
           {children}
-        </FormFieldInput>
+        </FormFieldInputContainer>
       </FormField>
     );
   },
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts b/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
index 1743e5df11..e1c4414330 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
@@ -3,13 +3,6 @@ import { MouseEventHandler } from 'react';
 import { FormFieldProps } from '@leafygreen-ui/form-field';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
-export const InputState = {
-  Unset: 'unset',
-  Error: 'error',
-} as const;
-
-export type InputState = (typeof InputState)[keyof typeof InputState];
-
 export type DateFormFieldProps = HTMLElementProps<'div'> & {
   children: FormFieldProps['children'];
   /** Callback fired when the input is clicked */
diff --git a/packages/date-picker/src/DateInput/DateFormField/index.ts b/packages/date-picker/src/DateInput/DateFormField/index.ts
index b5d07bcf35..6c423345b5 100644
--- a/packages/date-picker/src/DateInput/DateFormField/index.ts
+++ b/packages/date-picker/src/DateInput/DateFormField/index.ts
@@ -1,5 +1,2 @@
 export { DateFormField } from './DateFormField';
-export {
-  type DateFormFieldProps,
-  type InputState,
-} from './DateFormField.types';
+export { type DateFormFieldProps } from './DateFormField.types';
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
index 092e69b433..cce88a5463 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
@@ -4,7 +4,7 @@ import defaultTo from 'lodash/defaultTo';
 
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
-import { BaseDatePickerProps } from '../types';
+import { BaseDatePickerProps, DatePickerState } from '../types';
 import { getFormatParts, toDate } from '../utils';
 
 import {
@@ -50,7 +50,7 @@ export const defaultDatePickerContext: DatePickerContextProps = {
   isInRange: () => true,
   disabled: false,
   size: Size.Default,
-  state: 'unset',
+  state: DatePickerState.None,
   errorMessage: '',
   baseFontSize: BaseFontSize.Body1,
   darkMode: false,
diff --git a/packages/date-picker/src/types.ts b/packages/date-picker/src/types.ts
index 0cb518743b..7972a5d2b5 100644
--- a/packages/date-picker/src/types.ts
+++ b/packages/date-picker/src/types.ts
@@ -1,6 +1,13 @@
+import { omit } from 'lodash';
+
+import { FormFieldState } from '@leafygreen-ui/form-field';
 import { DarkModeProps } from '@leafygreen-ui/lib';
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
+export const DatePickerState = omit(FormFieldState, 'Valid');
+export type DatePickerState =
+  (typeof DatePickerState)[keyof typeof DatePickerState];
+
 export type DateType = Date | null;
 
 export interface BaseDatePickerProps extends DarkModeProps {
@@ -61,7 +68,7 @@ export interface BaseDatePickerProps extends DarkModeProps {
   /**
    * Whether to show an error message
    */
-  state?: 'unset' | 'error';
+  state?: DatePickerState;
 
   /**
    * A message to show in red underneath the input when in an error state

From 8120eab1e77d0df96344027087cb86a0ad767d3c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 15:27:19 -0400
Subject: [PATCH 181/351] scaffolds range menu

---
 .../DatePickerInput.stories.tsx               |  83 ++++++
 .../DateRangeInput/DateRangeInput.tsx         |   6 +-
 .../DateRangeMenu/DateRangeMenu.spec.tsx      |  11 +
 .../DateRangeMenu/DateRangeMenu.stories.tsx   | 239 ++++++++++++++++++
 .../DateRangeMenu/DateRangeMenu.styles.ts     |   4 +
 .../DateRangeMenu/DateRangeMenu.tsx           |   9 +
 .../DateRangeMenu/DateRangeMenu.types.ts      |   1 +
 .../DateRangePicker/DateRangeMenu/index.ts    |   3 +
 8 files changed, 355 insertions(+), 1 deletion(-)
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeInput/DatePickerInput.stories.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/index.ts

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DatePickerInput.stories.tsx
new file mode 100644
index 0000000000..c7a04a2f1e
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DatePickerInput.stories.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect, useState } from 'react';
+import { StoryFn } from '@storybook/react';
+import { isValid } from 'date-fns';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
+
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../../DatePickerContext';
+
+import { DateRangeInput } from './DateRangeInput';
+
+const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
+  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
+    <DatePickerProvider
+      value={{
+        ...ctx?.args,
+      }}
+    >
+      <Story />
+    </DatePickerProvider>
+  </LeafyGreenProvider>
+);
+
+const meta: StoryMetaType<typeof DateRangeInput, DatePickerContextProps> = {
+  title: 'Components/DatePicker/Range/DateRangeInput',
+  component: DateRangeInput,
+  decorators: [ProviderWrapper],
+  parameters: {
+    default: null,
+    controls: {
+      exclude: ['segmentRefs'],
+    },
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        // value: [null, new Date('1993-12-26')],
+        dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
+        size: Object.values(Size),
+      },
+      decorator: ProviderWrapper,
+    },
+  },
+  args: {
+    label: 'Label',
+    dateFormat: 'en-UK',
+    timeZone: 'Europe/London',
+  },
+  argTypes: {
+    // value: { control: 'date' },
+  },
+};
+
+export default meta;
+
+export const Basic: StoryFn<typeof DateRangeInput> = props => {
+  const [date, setDate] = useState<Date | null>(null);
+
+  // useEffect(() => {
+  //   if (props.value && isValid(new Date(props.value))) {
+  //     setDate(new Date(props.value));
+  //   }
+  // }, [props.value]);
+
+  const updateDate = (date: Date | null) => {
+    setDate(date);
+  };
+
+  return (
+    <>
+      <DateRangeInput
+        {...props}
+        // value={date} setValue={updateDate}
+      />
+    </>
+  );
+};
+
+export const Generated = () => {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index 0fe07cf4f4..fd26e76d13 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -89,7 +89,11 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
     };
 
     return (
-      <DateFormField ref={fwdRef} onInputClick={handleInputClick}>
+      <DateFormField
+        ref={fwdRef}
+        onKeyDown={handleKeyDown}
+        onInputClick={handleInputClick}
+      >
         <div className={inputWrapperStyles}>
           <DateInputBox segmentRefs={startSegmentRefs} />
           <span>{EN_DASH}</span>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
new file mode 100644
index 0000000000..f14bc52f79
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { DateRangeMenu } from '.';
+
+describe('packages/date-range-menu', () => {
+  test('condition', () => {
+
+  })
+})
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
new file mode 100644
index 0000000000..88fe41766d
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
@@ -0,0 +1,239 @@
+/* eslint-disable react-hooks/rules-of-hooks, react/prop-types */
+import React, { useRef, useState } from 'react';
+import { StoryFn, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+import { last, omit } from 'lodash';
+import MockDate from 'mockdate';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+import { transitionDuration } from '@leafygreen-ui/tokens';
+import { InlineCode } from '@leafygreen-ui/typography';
+
+import { Month } from '../../constants';
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../../DatePickerContext';
+import {
+  contextPropNames,
+  defaultDatePickerContext,
+} from '../../DatePickerContext/DatePickerContext.utils';
+import { newUTC, pickAndOmit } from '../../utils';
+
+import { DateRangeMenu } from './DateRangeMenu';
+import { DateRangeMenuProps } from './DateRangeMenu.types';
+
+const mockToday = newUTC(2023, Month.September, 14);
+type DecoratorArgs = DateRangeMenuProps & DatePickerContextProps;
+
+const MenuDecorator = (Story: StoryFn, ctx: any) => {
+  const [{ darkMode, ...contextProps }, { ...props }] = pickAndOmit(
+    ctx?.args as DecoratorArgs,
+    [...contextPropNames],
+  );
+
+  // Force `new Date()` to return `mockToday`
+  MockDate.set(mockToday);
+
+  return (
+    <LeafyGreenProvider darkMode={darkMode}>
+      <DatePickerProvider
+        value={{
+          ...defaultDatePickerContext,
+          ...contextProps,
+          initialOpen: true,
+        }}
+      >
+        <Story {...props} />
+      </DatePickerProvider>
+    </LeafyGreenProvider>
+  );
+};
+
+const meta: StoryMetaType<typeof DateRangeMenu, DecoratorArgs> = {
+  title: 'Components/DatePicker/Range/DateRangeMenu',
+  component: DateRangeMenu,
+  decorators: [MenuDecorator],
+  parameters: {
+    default: null,
+    chromatic: {
+      delay: transitionDuration.slower,
+    },
+  },
+  args: {
+    isOpen: true,
+    dateFormat: 'en-UK',
+    timeZone: 'Europe/London',
+    min: new Date('1996-10-14'),
+    max: new Date('2026-10-14'),
+  },
+  argTypes: {
+    value: { control: 'date' },
+  },
+};
+
+export default meta;
+
+type DateRangeMenuStoryType = StoryObj<typeof DateRangeMenu>;
+
+export const Basic: DateRangeMenuStoryType = {
+  render: args => {
+    const [value, setValue] = useState<Date | null>(null);
+
+    const props = omit(args, [...contextPropNames, 'isOpen']);
+    const refEl = useRef<HTMLDivElement>(null);
+    return (
+      <>
+        <code ref={refEl}>refEl</code>
+        <DateRangeMenu
+          {...props}
+          refEl={refEl}
+          value={value}
+          onCellClick={setValue}
+        />
+      </>
+    );
+  },
+};
+
+export const WithValue: DateRangeMenuStoryType = {
+  render: args => {
+    const props = omit(args, [...contextPropNames, 'isOpen']);
+    const refEl = useRef<HTMLDivElement>(null);
+    return (
+      <div style={{ minHeight: '50vh' }}>
+        <InlineCode ref={refEl}>refEl</InlineCode>
+        <DateRangeMenu
+          {...props}
+          refEl={refEl}
+          value={newUTC(2023, Month.September, 10)}
+          onCellClick={() => {}}
+        />
+      </div>
+    );
+  },
+};
+
+export const DarkMode: DateRangeMenuStoryType = {
+  ...WithValue,
+  args: {
+    // @ts-expect-error - DateRangeMenuStoryType does not include Context props
+    darkMode: true,
+  },
+};
+
+/**
+ * Chromatic Interaction tests
+ */
+// TODO:
+
+// type DateRangeMenuInteractionTestType = Omit<DateRangeMenuStoryType, 'play'> &
+//   Required<Pick<DateRangeMenuStoryType, 'play'>>;
+
+// export const InitialFocusToday: DateRangeMenuInteractionTestType = {
+//   ...Basic,
+//   play: async ctx => {
+//     const { findByRole } = within(ctx.canvasElement.parentElement!);
+//     await findByRole('listbox');
+//     userEvent.tab();
+//   },
+// };
+// export const InitialFocusValue: DateRangeMenuInteractionTestType = {
+//   ...WithValue,
+//   play: async ctx => {
+//     const { findByRole } = within(ctx.canvasElement.parentElement!);
+//     await findByRole('listbox');
+//     userEvent.tab();
+//   },
+// };
+
+// export const LeftArrowKey: DateRangeMenuInteractionTestType = {
+//   ...Basic,
+//   play: async ctx => {
+//     await InitialFocusToday.play(ctx);
+//     userEvent.keyboard('{arrowleft}');
+//   },
+// };
+
+// export const RightArrowKey: DateRangeMenuInteractionTestType = {
+//   ...Basic,
+//   play: async ctx => {
+//     await InitialFocusToday.play(ctx);
+//     userEvent.keyboard('{arrowright}');
+//   },
+// };
+
+// export const UpArrowKey: DateRangeMenuInteractionTestType = {
+//   ...Basic,
+//   play: async ctx => {
+//     await InitialFocusToday.play(ctx);
+//     userEvent.keyboard('{arrowup}');
+//   },
+// };
+
+// export const DownArrowKey: DateRangeMenuInteractionTestType = {
+//   ...Basic,
+//   play: async ctx => {
+//     await InitialFocusToday.play(ctx);
+//     userEvent.keyboard('{arrowdown}');
+//   },
+// };
+
+// export const UpToPrevMonth: DateRangeMenuInteractionTestType = {
+//   ...Basic,
+//   play: async ctx => {
+//     await InitialFocusToday.play(ctx);
+//     userEvent.keyboard('{arrowup}{arrowup}');
+//   },
+// };
+
+// export const DownToNextMonth: DateRangeMenuInteractionTestType = {
+//   ...Basic,
+//   play: async ctx => {
+//     await InitialFocusToday.play(ctx);
+//     userEvent.keyboard('{arrowdown}{arrowdown}{arrowdown}');
+//   },
+// };
+
+// export const OpenMonthMenu: DateRangeMenuInteractionTestType = {
+//   ...Basic,
+//   play: async ctx => {
+//     const canvas = within(ctx.canvasElement.parentElement!);
+//     await canvas.findByRole('listbox');
+//     const monthMenu = await canvas.findByLabelText('Select month');
+//     userEvent.click(monthMenu);
+//   },
+// };
+
+// export const SelectJanuary: DateRangeMenuInteractionTestType = {
+//   ...Basic,
+//   play: async ctx => {
+//     await OpenMonthMenu.play(ctx);
+//     const { findAllByRole } = within(ctx.canvasElement.parentElement!);
+//     const options = await findAllByRole('option');
+//     const Jan = options[0];
+//     userEvent.click(Jan);
+//   },
+// };
+
+// export const OpenYearMenu: DateRangeMenuInteractionTestType = {
+//   ...Basic,
+//   play: async ctx => {
+//     const canvas = within(ctx.canvasElement.parentElement!);
+//     await canvas.findByRole('listbox');
+//     const monthMenu = await canvas.findByLabelText('Select year');
+//     userEvent.click(monthMenu);
+//   },
+// };
+
+// export const Select2026: DateRangeMenuInteractionTestType = {
+//   ...Basic,
+//   play: async ctx => {
+//     await OpenYearMenu.play(ctx);
+//     const { findAllByRole } = within(ctx.canvasElement.parentElement!);
+//     const options = await findAllByRole('option');
+//     const _2026 = last(options);
+//     userEvent.click(_2026!);
+//   },
+// };
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts
new file mode 100644
index 0000000000..928608f58d
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts
@@ -0,0 +1,4 @@
+
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseStyles = css``;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
new file mode 100644
index 0000000000..d65e2b0ff6
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { DateRangeMenuProps } from './DateRangeMenu.types';
+
+// TODO: forwardRef
+export function DateRangeMenu({}: DateRangeMenuProps) {
+  return <div>your content here</div>;
+}
+
+DateRangeMenu.displayName = 'DateRangeMenu';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
new file mode 100644
index 0000000000..ceb9ef6f49
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
@@ -0,0 +1 @@
+export interface DateRangeMenuProps {}
\ No newline at end of file
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/index.ts
new file mode 100644
index 0000000000..cf65c781fb
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/index.ts
@@ -0,0 +1,3 @@
+
+export  { DateRangeMenu } from './DateRangeMenu';
+export { DateRangeMenuProps } from './DateRangeMenu.types';

From 00453d9135edd8573f450bae0316e9a716bb8746 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 15:31:58 -0400
Subject: [PATCH 182/351] renames icon -> contentEnd

---
 packages/form-field/src/FormField.stories.tsx | 41 ++++++++++++++++---
 .../FormFieldInputContainer.tsx               |  8 ++--
 .../FormFieldInputContainer.types.ts          |  4 +-
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index 5cbd9bab4f..564f851eee 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -32,7 +32,11 @@ const meta: StoryMetaType<typeof FormField, FormFieldStoryProps> = {
       combineArgs: {
         darkMode: [false, true],
         description: [undefined, 'Description'],
-        icon: [undefined, <Icon glyph="Cloud" key="" />],
+        contentEnd: [
+          undefined,
+          <Icon glyph="Cloud" key="" />,
+          <em key="">Optional</em>,
+        ],
         size: Object.values(Size),
         state: omit(Object.values(FormFieldState), 'valid'),
         disabled: [false, true],
@@ -49,7 +53,7 @@ const meta: StoryMetaType<typeof FormField, FormFieldStoryProps> = {
       decorator: (Instance, ctx) => (
         <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
           <Instance>
-            <FormFieldInputContainer icon={ctx?.args.icon}>
+            <FormFieldInputContainer contentEnd={ctx?.args.contentEnd}>
               {ctx?.args.children}
             </FormFieldInputContainer>
           </Instance>
@@ -101,7 +105,34 @@ export const Basic: StoryFn<FormFieldStoryProps> = ({
     <FormFieldInputContainer
       role="combobox"
       tabIndex={-1}
-      icon={<Icon glyph={glyph} />}
+      contentEnd={<Icon glyph={glyph} />}
+    >
+      <input placeholder="placeholder" />
+    </FormFieldInputContainer>
+  </FormField>
+);
+
+export const WithOptionalText: StoryFn<FormFieldStoryProps> = ({
+  label,
+  description,
+  state,
+  size,
+  disabled,
+  glyph: _,
+  ...rest
+}: FormFieldStoryProps) => (
+  <FormField
+    label={label}
+    description={description}
+    state={state}
+    size={size}
+    disabled={disabled}
+    {...rest}
+  >
+    <FormFieldInputContainer
+      role="combobox"
+      tabIndex={-1}
+      contentEnd={<em>Optional</em>}
     >
       <input placeholder="placeholder" />
     </FormFieldInputContainer>
@@ -128,7 +159,7 @@ export const WithIconButton: StoryFn<FormFieldStoryProps> = ({
     <FormFieldInputContainer
       role="combobox"
       tabIndex={-1}
-      icon={
+      contentEnd={
         <IconButton aria-label="Icon">
           <Icon glyph={glyph} />
         </IconButton>
@@ -147,7 +178,7 @@ export const Custom_TwoIcons: StoryFn<FormFieldStoryProps> = ({
     <FormFieldInputContainer
       role="combobox"
       tabIndex={-1}
-      icon={
+      contentEnd={
         <span
           className={css`
             display: flex;
diff --git a/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.tsx b/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.tsx
index e61eba0a58..b20164fde2 100644
--- a/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.tsx
+++ b/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.tsx
@@ -33,7 +33,7 @@ export const FormFieldInputContainer = forwardRef<
   FormFieldInputContainerProps
 >(
   (
-    { icon, className, children, ...rest }: FormFieldInputContainerProps,
+    { contentEnd, className, children, ...rest }: FormFieldInputContainerProps,
     fwdRef,
   ) => {
     const { theme } = useDarkMode();
@@ -71,12 +71,12 @@ export const FormFieldInputContainer = forwardRef<
               className={errorIconStyles[theme]}
             />
           )}
-          {icon &&
-            React.cloneElement(icon, {
+          {contentEnd &&
+            React.cloneElement(contentEnd, {
               className: cx(
                 iconClassName,
                 iconStyles[theme],
-                icon.props.className,
+                contentEnd.props.className,
               ),
               disabled,
             })}
diff --git a/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.types.ts b/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.types.ts
index 6188b8dc2d..1217028e3c 100644
--- a/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.types.ts
+++ b/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.types.ts
@@ -9,7 +9,7 @@ export interface FormFieldInputContainerProps extends HTMLElementProps<'div'> {
   children: FormFieldChildren;
 
   /**
-   * The icon rendered on the right of the input box
+   * The content rendered after the children
    */
-  icon?: React.ReactElement;
+  contentEnd?: React.ReactElement;
 }

From 6fd9da0e58ea21bf7974ea3b92c8f6357cf634b6 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 15:35:04 -0400
Subject: [PATCH 183/351] Update FormField.stories.tsx

---
 packages/form-field/src/FormField.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index 564f851eee..3d6c7217a3 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -38,7 +38,7 @@ const meta: StoryMetaType<typeof FormField, FormFieldStoryProps> = {
           <em key="">Optional</em>,
         ],
         size: Object.values(Size),
-        state: omit(Object.values(FormFieldState), 'valid'),
+        state: Object.values(omit(FormFieldState, 'Valid')),
         disabled: [false, true],
       },
       excludeCombinations: [

From da1297b676a5dc173bd95b474bc530cb02716fe0 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 15:35:33 -0400
Subject: [PATCH 184/351] Update FormField.stories.tsx

---
 packages/form-field/src/FormField.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/form-field/src/FormField.stories.tsx b/packages/form-field/src/FormField.stories.tsx
index 3d6c7217a3..14e793df9e 100644
--- a/packages/form-field/src/FormField.stories.tsx
+++ b/packages/form-field/src/FormField.stories.tsx
@@ -77,7 +77,7 @@ const meta: StoryMetaType<typeof FormField, FormFieldStoryProps> = {
     size: { control: 'select' },
     state: {
       control: 'select',
-      options: omit(Object.values(FormFieldState), 'valid'),
+      options: Object.values(omit(FormFieldState, 'Valid')),
     },
     glyph: { control: 'select', options: Object.keys(glyphs) },
   },

From 6cc638a363c0b8f46e4a29e790a506e80aae0925 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 15:41:38 -0400
Subject: [PATCH 185/351] Adds Base Font Size

---
 .../src/FormField/FormField.types.ts          | 41 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/form-field/src/FormField/FormField.types.ts b/packages/form-field/src/FormField/FormField.types.ts
index 6c8284ce01..35ed97fe5e 100644
--- a/packages/form-field/src/FormField/FormField.types.ts
+++ b/packages/form-field/src/FormField/FormField.types.ts
@@ -1,5 +1,5 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
-import { Size } from '@leafygreen-ui/tokens';
+import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
 export const FormFieldState = {
   None: 'none',
@@ -23,28 +23,67 @@ export type FormFieldChildren = React.ReactElement<FormFieldChildrenProps>;
 
 type AriaLabelProps =
   | {
+      /**
+       * The label rendered before the input
+       */
       label: React.ReactNode;
       'aria-label'?: string;
       'aria-labelledby'?: string;
     }
   | {
       label?: React.ReactNode;
+
+      /**
+       * A label for screen readers
+       */
       'aria-label': string;
       'aria-labelledby'?: string;
     }
   | {
       label?: React.ReactNode;
       'aria-label'?: string;
+
+      /**
+       * A reference to an external label element
+       */
       'aria-labelledby': string;
     };
 
 export type FormFieldProps = Omit<HTMLElementProps<'div'>, 'children'> &
   AriaLabelProps &
   DarkModeProps & {
+    /**
+     * `FormFieldInputContainer` component, or other custom input component
+     */
     children: FormFieldChildren;
+
+    /**
+     * A description for the form field
+     */
     description?: React.ReactNode;
+
+    /**
+     * The state of the component
+     */
     state?: FormFieldState;
+
+    /**
+     * The size of the component
+     */
     size?: Size;
+
+    /**
+     * Defines whether the component is disabled
+     */
     disabled?: boolean;
+
+    /**
+     * The message to display below the form field when in an error state
+     */
     errorMessage?: React.ReactNode;
+
+    /**
+     * Base font size of the component. Only effective when `size == 'default'`
+     */
+    baseFontSize?: BaseFontSize;
   };

From 548e22f898dfae11bb688616b3d5930325694495 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 15:43:59 -0400
Subject: [PATCH 186/351] Update DateFormField.tsx

---
 .../date-picker/src/DateInput/DateFormField/DateFormField.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
index 578682c8f7..9ebaa73e6e 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
@@ -42,7 +42,7 @@ export const DateFormField = React.forwardRef<
           aria-expanded={isOpen}
           aria-controls={menuId}
           onClick={onInputClick}
-          icon={<CalendarButton onClick={onIconButtonClick} />}
+          contentEnd={<CalendarButton onClick={onIconButtonClick} />}
         >
           {children}
         </FormFieldInputContainer>

From a33f001b7fbed3b5e4fc7201487b28e84c43c7c4 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 18:25:20 -0400
Subject: [PATCH 187/351] major range menu buildout

---
 packages/date-picker/package.json             |  9 +-
 .../CalendarGrid/CalendarGrid.styles.ts       |  4 +-
 .../Calendar/CalendarGrid/CalendarGrid.tsx    | 15 ++-
 .../src/Calendar/CalendarGrid/index.ts        |  1 +
 packages/date-picker/src/Calendar/index.ts    |  7 ++
 .../src/DatePicker/DatePicker.stories.tsx     |  2 +-
 .../DatePickerInput.stories.tsx               |  2 +-
 .../DatePickerMenu/DatePickerMenu.stories.tsx |  2 +-
 .../DatePickerMenu/DatePickerMenu.tsx         |  1 -
 .../DatePickerMenu/DatePickerMenu.types.ts    |  6 +-
 .../DatePickerMenuHeader/index.tsx            | 13 +--
 .../DatePickerContext/DatePickerContext.tsx   |  2 +-
 .../DateRangeComponent/DateRangeComponent.tsx |  2 +
 .../DateRangeComponent.types.ts               |  5 +-
 .../DatePickerInput.stories.tsx               |  2 +-
 .../DateRangeMenu/DateRangeMenu.stories.tsx   |  7 +-
 .../DateRangeMenu/DateRangeMenu.styles.ts     | 13 ++-
 .../DateRangeMenu/DateRangeMenu.tsx           | 47 ++++++++-
 .../DateRangeMenu/DateRangeMenu.types.ts      | 11 ++-
 .../DateRangeMenuCalendars.styles.ts          |  9 ++
 .../DateRangeMenuCalendars.tsx                | 82 ++++++++++++++++
 .../DateRangeMenuCalendars/index.ts           |  1 +
 .../DateRangeMenuContext.tsx                  | 38 ++++++++
 .../DateRangeMenuProvider.tsx                 | 50 ++++++++++
 .../DateRangeMenuContext/index.ts             |  9 ++
 .../DateRangeMenuFooter.styles.ts             | 18 ++++
 .../DateRangeMenuFooter.tsx                   | 22 +++++
 .../DateRangeMenuFooter/index.ts              |  1 +
 .../DateRangeMenuQuickSelection.styles.ts     | 19 ++++
 .../DateRangeMenuQuickSelection.tsx           | 96 +++++++++++++++++++
 .../QuickRangeButton.stories.tsx              | 37 +++++++
 .../QuickRangeButton.styles.ts                | 55 +++++++++++
 .../QuickRangeButton/QuickRangeButton.tsx     | 33 +++++++
 .../QuickRangeButton/index.ts                 |  1 +
 .../DateRangeMenuQuickSelection/index.ts      |  1 +
 .../DateRangePicker.stories.tsx               |  2 +-
 .../src/DateRangePicker/DateRangePicker.tsx   |  2 +
 packages/date-picker/src/constants.ts         | 12 +++
 packages/date-picker/src/types.ts             |  2 +-
 packages/date-picker/tsconfig.json            |  6 ++
 packages/hooks/src/index.ts                   |  2 +-
 41 files changed, 602 insertions(+), 47 deletions(-)
 create mode 100644 packages/date-picker/src/Calendar/index.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/index.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/index.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.styles.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/index.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.styles.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.stories.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.styles.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/index.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/index.ts

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 36efe6e4dd..a1516e5919 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -15,6 +15,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@leafygreen-ui/button": "^21.0.7",
     "@leafygreen-ui/emotion": "^4.0.7",
     "@leafygreen-ui/form-field": "^0.1.0",
     "@leafygreen-ui/hooks": "^8.0.0",
@@ -34,6 +35,10 @@
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": "^3.1.6"
   },
+  "devDependencies": {
+    "mockdate": "^3.0.5",
+    "timezone-mock": "^1.3.6"
+  },
   "resolutions": {
     "date-fns/@babel/runtime": "7.22.10",
     "date-fns-tz/@babel/runtime": "7.22.10"
@@ -45,9 +50,5 @@
   },
   "bugs": {
     "url": "https://jira.mongodb.org/projects/PD/summary"
-  },
-  "devDependencies": {
-    "mockdate": "^3.0.5",
-    "timezone-mock": "^1.3.6"
   }
 }
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts
index ac75fd189a..ed3e2b3bb1 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts
@@ -1,7 +1,9 @@
 import { css } from '@leafygreen-ui/emotion';
 import { fontWeights } from '@leafygreen-ui/tokens';
 
-export const baseStyles = css``;
+export const calendarGridStyles = css`
+  height: max-content;
+`;
 
 export const calendarHeaderCellStyles = css`
   font-weight: ${fontWeights.regular};
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index 8504bc6533..53d8a64f4d 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -2,20 +2,24 @@ import React, { forwardRef, useMemo } from 'react';
 import range from 'lodash/range';
 import { getWeekStartByLocale } from 'weekstart';
 
+import { cx } from '@leafygreen-ui/emotion';
 import { Disclaimer } from '@leafygreen-ui/typography';
 
 import { DaysOfWeek, daysPerWeek } from '../../constants';
 import { useDatePickerContext } from '../../DatePickerContext';
 import { getWeeksArray } from '../../utils';
 
-import { calendarHeaderCellStyles } from './CalendarGrid.styles';
+import {
+  calendarGridStyles,
+  calendarHeaderCellStyles,
+} from './CalendarGrid.styles';
 import { CalendarGridProps } from './CalendarGrid.types';
 
 /**
  * A simple table that renders the `CalendarCell` components passed as children
  */
 export const CalendarGrid = forwardRef<HTMLTableElement, CalendarGridProps>(
-  ({ month, children, ...rest }: CalendarGridProps, fwdRef) => {
+  ({ month, children, className, ...rest }: CalendarGridProps, fwdRef) => {
     const { dateFormat } = useDatePickerContext();
     const weekStartsOn = getWeekStartByLocale(dateFormat);
     const weeks = useMemo(
@@ -24,7 +28,12 @@ export const CalendarGrid = forwardRef<HTMLTableElement, CalendarGridProps>(
     );
 
     return (
-      <table {...rest} role="grid" ref={fwdRef}>
+      <table
+        {...rest}
+        role="grid"
+        ref={fwdRef}
+        className={cx(calendarGridStyles, className)}
+      >
         <thead>
           <tr role="row">
             {range(daysPerWeek).map(i => {
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/index.ts b/packages/date-picker/src/Calendar/CalendarGrid/index.ts
index 5ce25f839c..e5e190618e 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/index.ts
+++ b/packages/date-picker/src/Calendar/CalendarGrid/index.ts
@@ -1 +1,2 @@
 export { CalendarGrid } from './CalendarGrid';
+export { CalendarGridProps } from './CalendarGrid.types';
diff --git a/packages/date-picker/src/Calendar/index.ts b/packages/date-picker/src/Calendar/index.ts
new file mode 100644
index 0000000000..b068ea776a
--- /dev/null
+++ b/packages/date-picker/src/Calendar/index.ts
@@ -0,0 +1,7 @@
+export {
+  CalendarCell,
+  CalendarCellProps,
+  CalendarCellState,
+} from './CalendarCell';
+export { CalendarGrid, CalendarGridProps } from './CalendarGrid';
+export { MenuWrapper } from './MenuWrapper';
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index a20c83c9f2..3e4661cf33 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -29,7 +29,7 @@ const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
 );
 
 const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
-  title: 'Components/DatePicker/Single',
+  title: 'Components/DatePicker/DatePicker',
   component: DatePicker,
   decorators: [ProviderWrapper],
   parameters: {
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index e2bf91eea1..e90ed05179 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -27,7 +27,7 @@ const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
 );
 
 const meta: StoryMetaType<typeof DatePickerInput, DatePickerContextProps> = {
-  title: 'Components/DatePicker/Single/DatePickerInput',
+  title: 'Components/DatePicker/DatePicker/DatePickerInput',
   component: DatePickerInput,
   decorators: [ProviderWrapper],
   parameters: {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 1fb89c411a..243d323130 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -52,7 +52,7 @@ const MenuDecorator = (Story: StoryFn, ctx: any) => {
 };
 
 const meta: StoryMetaType<typeof DatePickerMenu, DecoratorArgs> = {
-  title: 'Components/DatePicker/Single/DatePickerMenu',
+  title: 'Components/DatePicker/DatePicker/DatePickerMenu',
   component: DatePickerMenu,
   decorators: [MenuDecorator],
   parameters: {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index b3b998322c..f64bee57c5 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -224,7 +224,6 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
             className={menuCalendarGridStyles}
             onKeyDown={handleCalendarKeyDown}
             aria-label={monthLabel}
-            // tabIndex={0}
           >
             {(day, i) => (
               <CalendarCell
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
index 690c3fa879..768d00d35d 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
@@ -2,16 +2,12 @@ import { HTMLElementProps } from '@leafygreen-ui/lib';
 import { PopoverProps } from '@leafygreen-ui/popover';
 import { PortalControlProps } from '@leafygreen-ui/popover';
 
-import { DateType } from '../../types';
 import { DatePickerProps } from '..';
 
 export type DatePickerMenuProps = PortalControlProps &
   Pick<PopoverProps, 'refEl'> &
-  Pick<DatePickerProps, 'handleValidation'> &
+  Pick<DatePickerProps, 'handleValidation' | 'value'> &
   HTMLElementProps<'div'> & {
-    /** The value of the component, provided in UTC time */
-    value?: DateType;
-
     /** Callback fired when a cell is clicked */
     onCellClick: (cellDate: Date) => void;
   };
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index 7e0194484a..c83b70d52c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -4,9 +4,9 @@ import range from 'lodash/range';
 
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
-import { DropdownWidthBasis, Option, Select } from '@leafygreen-ui/select';
+import { Option, Select } from '@leafygreen-ui/select';
 
-import { Months } from '../../../constants';
+import { Months, selectElementProps } from '../../../constants';
 import { useDatePickerContext } from '../../../DatePickerContext';
 import { isSameUTCMonth, setUTCMonth, setUTCYear } from '../../../utils';
 import {
@@ -19,15 +19,6 @@ interface DatePickerMenuHeaderProps {
   setMonth: (newMonth: Date) => void;
 }
 
-const selectElementProps = {
-  size: 'xsmall',
-  allowDeselect: false,
-  dropdownWidthBasis: DropdownWidthBasis.Option,
-  // using no portal so the select menus are included in the backdrop "foreground"
-  // there is currently no way to pass a ref into the Select portal to use in backdrop "foreground"
-  usePortal: false,
-} as const;
-
 /**
  * A helper component for DatePickerMenu.
  * Tests for this component are in DatePickerMenu
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
index 10cc07ae59..c42b47eaea 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
@@ -36,5 +36,5 @@ export const DatePickerProvider = ({
   );
 };
 
-/** A hook to access DatePickerContext value */
+/** A hook to access {@link DatePickerContextProps} */
 export const useDatePickerContext = () => useContext(DatePickerContext);
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
index 8a0079c0fd..4cfa488951 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 
 import { DateRangeInput } from '../DateRangeInput';
+import { DateRangeMenu } from '../DateRangeMenu';
 
 import { DateRangeComponentProps } from './DateRangeComponent.types';
 
@@ -11,6 +12,7 @@ export const DateRangeComponent = forwardRef<
   return (
     <>
       <DateRangeInput />
+      <DateRangeMenu />
     </>
   );
 });
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
index c094905cb8..d9c3abc30b 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
@@ -1,6 +1,7 @@
-import { DateRangeType } from '../DateRangePicker.types';
+import { DateRangePickerProps, DateRangeType } from '../DateRangePicker.types';
 
-export interface DateRangeComponentProps {
+export interface DateRangeComponentProps
+  extends Pick<DateRangePickerProps, 'showQuickSelection'> {
   range?: DateRangeType;
   setRange: (newVal?: DateRangeType | undefined) => void;
 }
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DatePickerInput.stories.tsx
index c7a04a2f1e..443877b230 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DatePickerInput.stories.tsx
@@ -27,7 +27,7 @@ const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
 );
 
 const meta: StoryMetaType<typeof DateRangeInput, DatePickerContextProps> = {
-  title: 'Components/DatePicker/Range/DateRangeInput',
+  title: 'Components/DatePicker/DateRangePicker/DateRangeInput',
   component: DateRangeInput,
   decorators: [ProviderWrapper],
   parameters: {
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
index 88fe41766d..09f966a86a 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
@@ -52,7 +52,7 @@ const MenuDecorator = (Story: StoryFn, ctx: any) => {
 };
 
 const meta: StoryMetaType<typeof DateRangeMenu, DecoratorArgs> = {
-  title: 'Components/DatePicker/Range/DateRangeMenu',
+  title: 'Components/DatePicker/DateRangePicker/DateRangeMenu',
   component: DateRangeMenu,
   decorators: [MenuDecorator],
   parameters: {
@@ -67,10 +67,9 @@ const meta: StoryMetaType<typeof DateRangeMenu, DecoratorArgs> = {
     timeZone: 'Europe/London',
     min: new Date('1996-10-14'),
     max: new Date('2026-10-14'),
+    showQuickSelection: true,
   },
-  argTypes: {
-    value: { control: 'date' },
-  },
+  argTypes: {},
 };
 
 export default meta;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts
index 928608f58d..1ce1788872 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts
@@ -1,4 +1,13 @@
-
 import { css } from '@leafygreen-ui/emotion';
 
-export const baseStyles = css``;
+export const rangeMenuWrapperStyles = css`
+  padding: 0; // needs to be set by inner content
+  z-index: 1;
+`;
+
+export const menuContentStyles = css`
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: max-content auto;
+  z-index: 1;
+`;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index d65e2b0ff6..375b913e91 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -1,9 +1,46 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
+
+import { spacing } from '@leafygreen-ui/tokens';
+
+import { MenuWrapper } from '../../Calendar/MenuWrapper';
+import { useDatePickerContext } from '../../DatePickerContext';
+
+import {
+  menuContentStyles,
+  rangeMenuWrapperStyles,
+} from './DateRangeMenu.styles';
 import { DateRangeMenuProps } from './DateRangeMenu.types';
+import { DateRangeMenuCalendars } from './DateRangeMenuCalendars';
+import { DateRangeMenuProvider } from './DateRangeMenuContext';
+import { DateRangeMenuFooter } from './DateRangeMenuFooter';
+import { DateRangeMenuQuickSelection } from './DateRangeMenuQuickSelection';
+
+export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
+  ({ start, end, showQuickSelection, ...rest }: DateRangeMenuProps, fwdRef) => {
+    const { isOpen } = useDatePickerContext();
+
+    // TODO: Focus trap
 
-// TODO: forwardRef
-export function DateRangeMenu({}: DateRangeMenuProps) {
-  return <div>your content here</div>;
-}
+    return (
+      <DateRangeMenuProvider start={start} end={end}>
+        <MenuWrapper
+          ref={fwdRef}
+          usePortal
+          role="listbox"
+          active={isOpen}
+          spacing={spacing[1]}
+          className={rangeMenuWrapperStyles}
+          {...rest}
+        >
+          <div className={menuContentStyles}>
+            {showQuickSelection && <DateRangeMenuQuickSelection />}
+            <DateRangeMenuCalendars />
+          </div>
+          <DateRangeMenuFooter />
+        </MenuWrapper>
+      </DateRangeMenuProvider>
+    );
+  },
+);
 
 DateRangeMenu.displayName = 'DateRangeMenu';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
index ceb9ef6f49..b843c12d46 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
@@ -1 +1,10 @@
-export interface DateRangeMenuProps {}
\ No newline at end of file
+import { PopoverProps, PortalControlProps } from '@leafygreen-ui/popover';
+
+import { DateRangePickerProps } from '../DateRangePicker.types';
+
+export type DateRangeMenuProps = PortalControlProps &
+  Pick<PopoverProps, 'refEl'> &
+  Pick<
+    DateRangePickerProps,
+    'start' | 'end' | 'showQuickSelection' | 'handleValidation' // TODO: Setter
+  > & {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
new file mode 100644
index 0000000000..bde34568cd
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
@@ -0,0 +1,9 @@
+import { css } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
+
+export const calendarsFrameStyles = css`
+  display: grid;
+  grid-auto-flow: column;
+  gap: ${spacing[4] * 2}px;
+  padding: ${spacing[2] + spacing[1]}px;
+`;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
new file mode 100644
index 0000000000..8ca4832488
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -0,0 +1,82 @@
+import React, { forwardRef } from 'react';
+
+import { Subtitle } from '@leafygreen-ui/typography';
+
+import { CalendarCell, CalendarGrid } from '../../../Calendar';
+import {
+  getFullMonthLabel,
+  getMonthName,
+  getUTCDateString,
+  isSameUTCDay,
+} from '../../../utils';
+import { useDateRangeMenuContext } from '../DateRangeMenuContext';
+
+import { calendarsFrameStyles } from './DateRangeMenuCalendars.styles';
+
+export const DateRangeMenuCalendars = forwardRef<HTMLDivElement, {}>(() => {
+  const {
+    startMonth,
+    // setStartMonth,
+    startCellRefs,
+    endMonth,
+    // setEndMonth,
+    endCellRefs,
+    today,
+  } = useDateRangeMenuContext();
+
+  return (
+    <div className={calendarsFrameStyles}>
+      {/* TODO: Month labels & chevrons */}
+      {/* <Subtitle>{getMonthName(startMonth.getUTCMonth()).long}</Subtitle>
+      <Subtitle>{getMonthName(endMonth.getUTCMonth()).long}</Subtitle> */}
+
+      <CalendarGrid
+        // ref={startCalendarRef}
+        month={startMonth}
+        // className={menuCalendarGridStyles}
+        // onKeyDown={handleCalendarKeyDown}
+        aria-label={getFullMonthLabel(startMonth)}
+      >
+        {(day, i) => (
+          <CalendarCell
+            key={i}
+            ref={startCellRefs(day.toISOString())}
+            aria-label={getUTCDateString(day)}
+            // isHighlighted={isSameUTCDay(day, highlight)}
+            isCurrent={isSameUTCDay(day, today)}
+            // state={getCellState(day)}
+            // onClick={cellClickHandlerForDay(day)}
+            data-iso={day.toISOString()}
+          >
+            {day.getUTCDate()}
+          </CalendarCell>
+        )}
+      </CalendarGrid>
+
+      <CalendarGrid
+        // ref={endCalendarRef}
+        month={endMonth}
+        // className={menuCalendarGridStyles}
+        // onKeyDown={handleCalendarKeyDown}
+        aria-label={getFullMonthLabel(endMonth)}
+      >
+        {(day, i) => (
+          <CalendarCell
+            key={i}
+            ref={endCellRefs(day.toISOString())}
+            aria-label={getUTCDateString(day)}
+            // isHighlighted={isSameUTCDay(day, highlight)}
+            isCurrent={isSameUTCDay(day, today)}
+            // state={getCellState(day)}
+            // onClick={cellClickHandlerForDay(day)}
+            data-iso={day.toISOString()}
+          >
+            {day.getUTCDate()}
+          </CalendarCell>
+        )}
+      </CalendarGrid>
+    </div>
+  );
+});
+
+DateRangeMenuCalendars.displayName = 'DateRangeMenuCalendars';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/index.ts
new file mode 100644
index 0000000000..ac8f9eed41
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/index.ts
@@ -0,0 +1 @@
+export { DateRangeMenuCalendars } from './DateRangeMenuCalendars';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
new file mode 100644
index 0000000000..25b70e5462
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
@@ -0,0 +1,38 @@
+import React, { createContext, useContext } from 'react';
+
+import { DynamicRefGetter } from '@leafygreen-ui/hooks';
+
+export interface DateRangeMenuContextProps {
+  /** The month displayed on the left */
+  startMonth: Date;
+
+  /** Setter for the start month */
+  setStartMonth: React.Dispatch<React.SetStateAction<Date>>;
+
+  /** A dynamic ref setter/getter for the start calendar cells */
+  startCellRefs: DynamicRefGetter<HTMLTableCellElement>;
+
+  /** The month displayed on the right */
+  endMonth: Date;
+
+  /** Setter for the end month */
+  setEndMonth: React.Dispatch<React.SetStateAction<Date>>;
+
+  /** A dynamic ref setter/getter for the end calendar cells */
+  endCellRefs: DynamicRefGetter<HTMLTableCellElement>;
+
+  /** Memoized reference for Date.now */
+  today?: Date;
+}
+
+export const DateRangeMenuContext = createContext<DateRangeMenuContextProps>({
+  startMonth: new Date(),
+  setStartMonth: () => {},
+  startCellRefs: (() => undefined) as DynamicRefGetter<HTMLTableCellElement>,
+  endMonth: new Date(),
+  setEndMonth: () => {},
+  endCellRefs: (() => undefined) as DynamicRefGetter<HTMLTableCellElement>,
+});
+
+/** Hook to access {@link DateRangeMenuContextProps} */
+export const useDateRangeMenuContext = () => useContext(DateRangeMenuContext);
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
new file mode 100644
index 0000000000..6081a20fcd
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
@@ -0,0 +1,50 @@
+import React, { PropsWithChildren, useMemo, useState } from 'react';
+import { addMonths } from 'date-fns';
+
+import { useDynamicRefs } from '@leafygreen-ui/hooks';
+
+import { getFirstOfMonth, setToUTCMidnight } from '../../../utils';
+import { DateRangeMenuProps } from '../DateRangeMenu.types';
+
+import { DateRangeMenuContext } from './DateRangeMenuContext';
+
+export interface DateRangeMenuProviderProps
+  extends Pick<DateRangeMenuProps, 'start' | 'end'>,
+    PropsWithChildren<{}> {}
+
+/**
+ * Receives the start & end dates
+ * and initializes the start & end display months
+ */
+export const DateRangeMenuProvider = ({
+  start,
+  end,
+  children,
+}: DateRangeMenuProviderProps) => {
+  const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
+  const thisMonth = useMemo(() => getFirstOfMonth(today), [today]);
+
+  const [startMonth, setStartMonth] = useState<Date>(start ?? thisMonth);
+  const [endMonth, setEndMonth] = useState<Date>(
+    end ?? addMonths(thisMonth, 1),
+  );
+
+  const startCellRefs = useDynamicRefs<HTMLTableCellElement>();
+  const endCellRefs = useDynamicRefs<HTMLTableCellElement>();
+
+  return (
+    <DateRangeMenuContext.Provider
+      value={{
+        startMonth,
+        setStartMonth,
+        startCellRefs,
+        endMonth,
+        setEndMonth,
+        endCellRefs,
+        today,
+      }}
+    >
+      {children}
+    </DateRangeMenuContext.Provider>
+  );
+};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/index.ts
new file mode 100644
index 0000000000..41fcc6a3fd
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/index.ts
@@ -0,0 +1,9 @@
+export {
+  DateRangeMenuContext,
+  DateRangeMenuContextProps,
+  useDateRangeMenuContext,
+} from './DateRangeMenuContext';
+export {
+  DateRangeMenuProvider,
+  DateRangeMenuProviderProps,
+} from './DateRangeMenuProvider';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.styles.ts
new file mode 100644
index 0000000000..0337561a15
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.styles.ts
@@ -0,0 +1,18 @@
+import { css } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
+import { spacing } from '@leafygreen-ui/tokens';
+
+export const footerStyles = css`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: ${spacing[2] + spacing[1]}px;
+  border-block-start: 1px solid ${palette.gray.light2};
+`;
+
+export const clearButtonStyles = css`
+  outline: none;
+  border: none;
+  background-color: unset;
+  z-index: 0;
+`;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
new file mode 100644
index 0000000000..62041ff92e
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Button, { Size, Variant } from '@leafygreen-ui/button';
+import { Link } from '@leafygreen-ui/typography';
+
+import { clearButtonStyles, footerStyles } from './DateRangeMenuFooter.styles';
+
+export const DateRangeMenuFooter = () => {
+  return (
+    <div className={footerStyles}>
+      <Link as="button" className={clearButtonStyles}>
+        Clear
+      </Link>
+      <div>
+        <Button size={Size.XSmall}>Cancel</Button>
+        <Button size={Size.XSmall} variant={Variant.Primary}>
+          Apply
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/index.ts
new file mode 100644
index 0000000000..4744d49ce2
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/index.ts
@@ -0,0 +1 @@
+export { DateRangeMenuFooter } from './DateRangeMenuFooter';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.styles.ts
new file mode 100644
index 0000000000..c336da459f
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.styles.ts
@@ -0,0 +1,19 @@
+import { css } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+import { spacing } from '@leafygreen-ui/tokens';
+
+export const quickSelectMenuStyles = css`
+  padding: ${spacing[4]}px;
+  // TODO: Fix the menu vs clear button z-index
+`;
+
+export const quickSelectMenuThemeStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    background-color: ${palette.gray.light3};
+    border-inline-end: 1px solid ${palette.gray.light2};
+  `,
+  [Theme.Dark]: css`
+    // TODO:
+  `,
+};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.tsx
new file mode 100644
index 0000000000..bc0572b600
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { forwardRef } from 'react';
+import { addMonths } from 'date-fns';
+import { range } from 'lodash';
+
+import { cx } from '@leafygreen-ui/emotion';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { Option, Select } from '@leafygreen-ui/select';
+import { Overline } from '@leafygreen-ui/typography';
+
+import { Months, selectElementProps } from '../../../constants';
+import { useDatePickerContext } from '../../../DatePickerContext';
+import { setUTCMonth, setUTCYear } from '../../../utils';
+import { useDateRangeMenuContext } from '../DateRangeMenuContext';
+
+import {
+  quickSelectMenuStyles,
+  quickSelectMenuThemeStyles,
+} from './DateRangeMenuQuickSelection.styles';
+import { QuickRangeButton } from './QuickRangeButton';
+
+export const DateRangeMenuQuickSelection = forwardRef<HTMLDivElement, {}>(
+  (_props, fwdRef) => {
+    const { theme } = useDarkMode();
+    const { min, max, isInRange } = useDatePickerContext();
+    const { startMonth, setStartMonth, setEndMonth } =
+      useDateRangeMenuContext();
+
+    // TODO: is this the right logic?
+    const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
+
+    const updateMonth = (newMonth: Date) => {
+      // TODO: refine this logic
+      if (isInRange(newMonth)) {
+        setStartMonth(newMonth);
+        setEndMonth(addMonths(newMonth, 1));
+      }
+    };
+
+    return (
+      <div
+        ref={fwdRef}
+        className={cx(quickSelectMenuStyles, quickSelectMenuThemeStyles[theme])}
+      >
+        <div>
+          <Select
+            {...selectElementProps}
+            aria-label="Select month"
+            value={startMonth.getUTCMonth().toString()}
+            onChange={m => {
+              const newMonth = setUTCMonth(startMonth, Number(m));
+              updateMonth(newMonth);
+            }}
+          >
+            {Months.map((m, i) => (
+              <Option value={i.toString()} key={m.short}>
+                {m.short}
+              </Option>
+            ))}
+          </Select>
+          <Select
+            {...selectElementProps}
+            aria-label="Select year"
+            value={startMonth.getUTCFullYear().toString()}
+            onChange={y => {
+              const newMonth = setUTCYear(startMonth, Number(y));
+              updateMonth(newMonth);
+            }}
+          >
+            {yearOptions.map(y => (
+              <Option value={y.toString()} key={y}>
+                {y}
+              </Option>
+            ))}
+          </Select>
+        </div>
+        <div>
+          <Overline>Quick Ranges:</Overline>
+          {/*
+           TODO: this functionality
+           Do we want to set these up in some config object?
+           */}
+          <QuickRangeButton>Today</QuickRangeButton>
+          <QuickRangeButton>Yesterday</QuickRangeButton>
+          <QuickRangeButton>Last 7 days</QuickRangeButton>
+          <QuickRangeButton>Last 30 days</QuickRangeButton>
+          <QuickRangeButton>Last 90 days</QuickRangeButton>
+          <QuickRangeButton>Last 12 months</QuickRangeButton>
+          <QuickRangeButton>All time</QuickRangeButton>
+        </div>
+      </div>
+    );
+  },
+);
+
+DateRangeMenuQuickSelection.displayName = 'DateRangeMenuQuickSelection';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.stories.tsx
new file mode 100644
index 0000000000..b696152851
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType, StoryType } from '@leafygreen-ui/lib';
+
+import { QuickRangeButton } from './QuickRangeButton';
+
+const meta: StoryMetaType<typeof QuickRangeButton> = {
+  title: 'Components/DatePicker/DateRangePicker/QuickRangeButton',
+  component: QuickRangeButton,
+  parameters: {
+    default: null,
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        'data-hover': [false, true],
+        'data-focus': [false, true],
+      },
+      decorator: (Instance, ctx) => (
+        <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
+          <Instance />
+        </LeafyGreenProvider>
+      ),
+      args: {
+        children: 'Last 12 months',
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const Basic: StoryType<typeof QuickRangeButton> = () => {
+  return <QuickRangeButton>Last 12 months</QuickRangeButton>;
+};
+
+export const Generated = () => <></>;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.styles.ts
new file mode 100644
index 0000000000..44bc927ef8
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.styles.ts
@@ -0,0 +1,55 @@
+import { css } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+import {
+  fontFamilies,
+  fontWeights,
+  spacing,
+  typeScales,
+} from '@leafygreen-ui/tokens';
+
+export const baseQuickRangeButtonStyles = css`
+  border: none;
+  outline: none;
+  background-color: unset;
+  display: block;
+  font-family: ${fontFamilies.default};
+  font-size: ${typeScales.body1.fontSize}px;
+  line-height: ${typeScales.body1.lineHeight}px;
+  font-weight: ${fontWeights.regular};
+  padding: 2px ${spacing[1]}px;
+  border-radius: ${spacing[2]}px;
+  cursor: pointer;
+`;
+
+const hoverSelector = `&:hover, &[data-hover="true"]`;
+const focusSelector = `&:focus-visible, &[data-focus="true"]`;
+
+export const baseQuickRangeButtonThemeStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.black};
+
+    ${hoverSelector} {
+      outline: 2px solid ${palette.gray.light2};
+    }
+
+    ${focusSelector} {
+      color: ${palette.blue.dark1};
+      outline: 2px solid ${palette.blue.light1};
+      font-weight: ${fontWeights.bold};
+    }
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.white};
+
+    ${hoverSelector} {
+      outline: 2px solid ${palette.gray.dark2};
+    }
+
+    ${focusSelector} {
+      color: ${palette.blue.light1};
+      outline: 2px solid ${palette.blue.light1};
+      font-weight: ${fontWeights.bold};
+    }
+  `,
+};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.tsx
new file mode 100644
index 0000000000..9d2d894bcc
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { forwardRef } from 'react';
+
+import { cx } from '@leafygreen-ui/emotion';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { HTMLElementProps } from '@leafygreen-ui/lib';
+
+import {
+  baseQuickRangeButtonStyles,
+  baseQuickRangeButtonThemeStyles,
+} from './QuickRangeButton.styles';
+
+export const QuickRangeButton = forwardRef<
+  HTMLButtonElement,
+  HTMLElementProps<'button'>
+>(({ children, className, ...rest }, fwdRef) => {
+  const { theme } = useDarkMode();
+  return (
+    <button
+      ref={fwdRef}
+      className={cx(
+        baseQuickRangeButtonStyles,
+        baseQuickRangeButtonThemeStyles[theme],
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+});
+
+QuickRangeButton.displayName = 'QuickRangeButton';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/index.ts
new file mode 100644
index 0000000000..52c37b06e4
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/index.ts
@@ -0,0 +1 @@
+export { QuickRangeButton } from './QuickRangeButton';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/index.ts
new file mode 100644
index 0000000000..900d132295
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/index.ts
@@ -0,0 +1 @@
+export { DateRangeMenuQuickSelection } from './DateRangeMenuQuickSelection';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
index 76a9c8171a..5beb7234db 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
@@ -30,7 +30,7 @@ const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
 );
 
 const meta: StoryMetaType<typeof DateRangePicker, DatePickerContextProps> = {
-  title: 'Components/DatePicker/Range',
+  title: 'Components/DatePicker/DateRangePicker',
   component: DateRangePicker,
   decorators: [ProviderWrapper],
   parameters: {
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
index 81dbd04319..4d0c6b32f9 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
@@ -15,6 +15,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
       end: endProp,
       initialEnd: initialEndProp,
       onRangeChange,
+      showQuickSelection,
       ...props
     }: DateRangePickerProps,
     fwdRef,
@@ -33,6 +34,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
           ref={fwdRef}
           range={range}
           setRange={setRange}
+          showQuickSelection={showQuickSelection}
           {...restProps}
         />
       </DatePickerProvider>
diff --git a/packages/date-picker/src/constants.ts b/packages/date-picker/src/constants.ts
index 263f7e3814..d6cc90fd70 100644
--- a/packages/date-picker/src/constants.ts
+++ b/packages/date-picker/src/constants.ts
@@ -1,5 +1,7 @@
 import range from 'lodash/range';
 
+import { DropdownWidthBasis } from '@leafygreen-ui/select';
+
 import { getMonthName } from './utils/getMonthName';
 
 // Compute the long & short form of each month index
@@ -37,3 +39,13 @@ export const DaysOfWeek = [
 ] as const;
 
 export type DaysOfWeek = (typeof DaysOfWeek)[number];
+
+/** Default props for the month & year select menus */
+export const selectElementProps = {
+  size: 'xsmall',
+  allowDeselect: false,
+  dropdownWidthBasis: DropdownWidthBasis.Option,
+  // using no portal so the select menus are included in the backdrop "foreground"
+  // there is currently no way to pass a ref into the Select portal to use in backdrop "foreground"
+  usePortal: false,
+} as const;
diff --git a/packages/date-picker/src/types.ts b/packages/date-picker/src/types.ts
index 7972a5d2b5..b127208654 100644
--- a/packages/date-picker/src/types.ts
+++ b/packages/date-picker/src/types.ts
@@ -1,4 +1,4 @@
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 
 import { FormFieldState } from '@leafygreen-ui/form-field';
 import { DarkModeProps } from '@leafygreen-ui/lib';
diff --git a/packages/date-picker/tsconfig.json b/packages/date-picker/tsconfig.json
index 8a43dbc9e5..fc67898510 100644
--- a/packages/date-picker/tsconfig.json
+++ b/packages/date-picker/tsconfig.json
@@ -15,6 +15,12 @@
   ],
   "exclude": ["**/*.spec.*", "**/*.story.*"],
   "references": [
+    {
+      "path": "../button"
+    },
+    {
+      "path": "../emotion"
+    },
     {
       "path": "../emotion"
     },
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index 6a75da1e8f..7475236db2 100644
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -2,7 +2,7 @@ export { useAutoScroll } from './useAutoScroll';
 export { default as useAvailableSpace } from './useAvailableSpace';
 export { useBackdropClick } from './useBackdropClick';
 export { useControlledValue } from './useControlledValue';
-export { useDynamicRefs } from './useDynamicRefs';
+export { type DynamicRefGetter, useDynamicRefs } from './useDynamicRefs';
 export { default as useEscapeKey } from './useEscapeKey';
 export { default as useEventListener } from './useEventListener';
 export { useForceRerender } from './useForceRerender';

From 784eb841251bad77859b081b16827d555ad78bfb Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 18:29:53 -0400
Subject: [PATCH 188/351] fix tests

---
 packages/form-field/src/FormField.spec.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/form-field/src/FormField.spec.tsx b/packages/form-field/src/FormField.spec.tsx
index 336f8efd70..37d566c4c8 100644
--- a/packages/form-field/src/FormField.spec.tsx
+++ b/packages/form-field/src/FormField.spec.tsx
@@ -306,7 +306,7 @@ describe('packages/form-field', () => {
     const { queryByTestId } = render(
       <FormField label="Label" data-testid="form-field">
         <FormFieldInputContainer
-          icon={<Icon glyph="Beaker" data-testid="icon" />}
+          contentEnd={<Icon glyph="Beaker" data-testid="icon" />}
         >
           <div data-testid="input" />
         </FormFieldInputContainer>
@@ -315,7 +315,21 @@ describe('packages/form-field', () => {
 
     const icon = queryByTestId('icon');
     expect(icon).toBeInTheDocument();
-    expect(icon?.tagName).toEqual('svg');
+    expect(icon?.tagName.toLowerCase()).toEqual('svg');
+  });
+
+  test('Renders other content', () => {
+    const { queryByText } = render(
+      <FormField label="Label" data-testid="form-field">
+        <FormFieldInputContainer contentEnd={<em>Optional</em>}>
+          <div data-testid="input" />
+        </FormFieldInputContainer>
+      </FormField>,
+    );
+
+    const em = queryByText('Optional');
+    expect(em).toBeInTheDocument();
+    expect(em?.tagName.toLowerCase()).toEqual('em');
   });
 
   describe('custom children', () => {

From 7c7d6f3401f902faee59de9b0036b634ba0b91a6 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 5 Oct 2023 18:30:38 -0400
Subject: [PATCH 189/351] Update package.json

---
 packages/form-field/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/form-field/package.json b/packages/form-field/package.json
index f0269e9cc4..66e5c88157 100644
--- a/packages/form-field/package.json
+++ b/packages/form-field/package.json
@@ -28,7 +28,8 @@
   },
   "devDependencies": {
     "@leafygreen-ui/button": "^21.0.7",
-    "@leafygreen-ui/icon-button": "^15.0.18"
+    "@leafygreen-ui/icon-button": "^15.0.18",
+    "lodash": "^4.17.21"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/form-field",
   "repository": {

From 559d1a50b4662f8b18607d89ce9b104df7967ac7 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 6 Oct 2023 13:00:03 -0400
Subject: [PATCH 190/351] bump dp deps

---
 packages/date-picker/package.json |  6 +++---
 yarn.lock                         | 12 ------------
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index a1516e5919..f44bd7f5be 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -23,10 +23,10 @@
     "@leafygreen-ui/icon-button": "^15.0.17",
     "@leafygreen-ui/lib": "^12.0.0",
     "@leafygreen-ui/palette": "^4.0.7",
-    "@leafygreen-ui/popover": "^11.0.17",
-    "@leafygreen-ui/select": "^10.3.15",
+    "@leafygreen-ui/popover": "^11.1.0",
+    "@leafygreen-ui/select": "^11.0.0",
     "@leafygreen-ui/tokens": "^2.2.0",
-    "@leafygreen-ui/typography": "^16.5.5",
+    "@leafygreen-ui/typography": "^17.0.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "polished": "^4.2.2",
diff --git a/yarn.lock b/yarn.lock
index a00b7c8d3f..346aa1d955 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2274,18 +2274,6 @@
     lodash "^4.17.21"
     prop-types "^15.7.2"
 
-"@leafygreen-ui/typography@^16.5.5":
-  version "16.5.5"
-  resolved "https://registry.yarnpkg.com/@leafygreen-ui/typography/-/typography-16.5.5.tgz#65cc0ce7e39f5b8f72f9b9a4dbea80868ac09694"
-  integrity sha512-mErhTYM0C1PZaeADTkp5v/MAS6aEhavWHZ3otHthBSo/zwI5uAYnkreheiYElc66B/0bcOxCikLVkP3zaFnX2A==
-  dependencies:
-    "@leafygreen-ui/emotion" "^4.0.7"
-    "@leafygreen-ui/icon" "^11.22.2"
-    "@leafygreen-ui/lib" "^11.0.0"
-    "@leafygreen-ui/palette" "^4.0.7"
-    "@leafygreen-ui/polymorphic" "^1.3.6"
-    "@leafygreen-ui/tokens" "^2.1.4"
-
 "@manypkg/find-root@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@manypkg/find-root/-/find-root-1.1.0.tgz#a62d8ed1cd7e7d4c11d9d52a8397460b5d4ad29f"

From a34a80d5498b4258c8b5021c9226d719adab732f Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 6 Oct 2023 13:10:33 -0400
Subject: [PATCH 191/351] updates tsdocs for shared components

---
 .../src/Calendar/CalendarCell/CalendarCell.tsx    |  6 ++++++
 .../src/Calendar/CalendarGrid/CalendarGrid.tsx    | 15 +++++++++++++++
 .../src/Calendar/MenuWrapper/MenuWrapper.tsx      |  2 +-
 .../DateInput/CalendarButton/CalendarButton.tsx   |  3 +++
 .../src/DateInput/DateFormField/DateFormField.tsx |  5 ++++-
 .../src/DateInput/DateInputBox/DateInputBox.tsx   |  5 ++++-
 .../DateInputSegment/DateInputSegment.tsx         |  8 +++++++-
 7 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
index 66fcd8d8d8..c2190b6a2a 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -17,6 +17,12 @@ import {
 } from './CalendarCell.styles';
 import { CalendarCellProps, CalendarCellState } from './CalendarCell.types';
 
+/**
+ * A single calendar cell.
+ *
+ * Renders the appropriate styles based on
+ * the provided state, current & highlight props
+ */
 export const CalendarCell = React.forwardRef<
   HTMLTableCellElement,
   CalendarCellProps
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index 53d8a64f4d..0c8de59508 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -17,6 +17,21 @@ import { CalendarGridProps } from './CalendarGrid.types';
 
 /**
  * A simple table that renders the `CalendarCell` components passed as children
+ *
+ * Accepts a mapped render function as children.
+ *
+ * Example usage:
+ * ```tsx
+ * // Renders the current month
+ * <CalendarGrid month={new Date()}>
+ *    {(day) => (
+ *      <CalendarCell>
+ *        {day.getUTCDate()}
+ *      </CalendarCell>
+ *    )}
+ * </CalendarGrid>
+ * ```
+ *
  */
 export const CalendarGrid = forwardRef<HTMLTableElement, CalendarGridProps>(
   ({ month, children, className, ...rest }: CalendarGridProps, fwdRef) => {
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
index 330d65001a..43e239c733 100644
--- a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
+++ b/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
@@ -8,7 +8,7 @@ import Popover, { PopoverProps } from '@leafygreen-ui/popover';
 import { menuStyles } from './MenuWrapper.styles';
 
 /**
- * A styled popover
+ * A simple styled popover component
  */
 export const MenuWrapper = forwardRef<
   HTMLDivElement,
diff --git a/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx b/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
index 0fff74a6de..9cd3ba00b4 100644
--- a/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
+++ b/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
@@ -6,6 +6,9 @@ import IconButton, { BaseIconButtonProps } from '@leafygreen-ui/icon-button';
 
 import { iconButtonStyles } from './CalendarButton.styles';
 
+/**
+ * The icon button on the right of the DatePicker form field
+ */
 export const CalendarButton = forwardRef<
   HTMLButtonElement,
   BaseIconButtonProps
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
index 9ebaa73e6e..43e41d2070 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
@@ -7,7 +7,10 @@ import { CalendarButton } from '../CalendarButton';
 
 import { DateFormFieldProps } from './DateFormField.types';
 
-/** A wrapper around `FormField` that sets the icon */
+/**
+ * A wrapper around `FormField` that sets the relevant
+ * attributes, styling & icon button
+ */
 export const DateFormField = React.forwardRef<
   HTMLDivElement,
   DateFormFieldProps
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index 15929b31bc..394bf9fa24 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -23,10 +23,13 @@ import { DateInputBoxProps } from './DateInputBox.types';
 /**
  * Renders a styled date input with appropriate segment order & separator characters.
  *
- * Uses vars value & dateFormat with `Intl.DateTimeFormat.prototype.formatToParts()`
+ * Depends on {@link DateInputSegment}
+ *
+ * Uses parameters `value` & `dateFormat` along with {@link Intl.DateTimeFormat.prototype.formatToParts}
  * to determine the segment order and separator characters.
  *
  * Provided value is assumed to be UTC.
+ *
  * Argument passed into `setValue` callback is also in UTC
  * @internal
  */
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index e2f03f5278..1a2e5106a9 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -25,6 +25,12 @@ import {
 } from './DateInputSegment.styles';
 import { DateInputSegmentProps } from './DateInputSegment.types';
 
+/**
+ * Renders a single date segment with the
+ * appropriate character padding/truncation.
+ *
+ * Only fires a change handler when the input is blurred
+ */
 export const DateInputSegment = React.forwardRef<
   HTMLInputElement,
   DateInputSegmentProps
@@ -68,7 +74,7 @@ export const DateInputSegment = React.forwardRef<
       setInternalValue(e.target.value);
     };
 
-    // When the user unfocuses the element, then we fire the change handler
+    // When the user un-focuses the element, then we fire the change handler
     const handleBlur: FocusEventHandler<HTMLInputElement> = e => {
       const formattedValue = formatValue(internalValue);
 

From d70bd9b22af26c92362bd148eb1e2dadd29b2c01 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 6 Oct 2023 13:30:14 -0400
Subject: [PATCH 192/351] rename QuickSelectionMenu

---
 .../src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx   | 4 ++--
 .../DateRangeMenu/DateRangeMenuQuickSelection/index.ts    | 1 -
 .../QuickRangeButton/QuickRangeButton.stories.tsx         | 0
 .../QuickRangeButton/QuickRangeButton.styles.ts           | 0
 .../QuickRangeButton/QuickRangeButton.tsx                 | 0
 .../QuickRangeButton/index.ts                             | 0
 .../QuickSelectionMenu.styles.ts}                         | 0
 .../QuickSelectionMenu.tsx}                               | 8 ++++----
 .../DateRangeMenu/QuickSelectionMenu/index.ts             | 1 +
 9 files changed, 7 insertions(+), 7 deletions(-)
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/index.ts
 rename packages/date-picker/src/DateRangePicker/DateRangeMenu/{DateRangeMenuQuickSelection => QuickSelectionMenu}/QuickRangeButton/QuickRangeButton.stories.tsx (100%)
 rename packages/date-picker/src/DateRangePicker/DateRangeMenu/{DateRangeMenuQuickSelection => QuickSelectionMenu}/QuickRangeButton/QuickRangeButton.styles.ts (100%)
 rename packages/date-picker/src/DateRangePicker/DateRangeMenu/{DateRangeMenuQuickSelection => QuickSelectionMenu}/QuickRangeButton/QuickRangeButton.tsx (100%)
 rename packages/date-picker/src/DateRangePicker/DateRangeMenu/{DateRangeMenuQuickSelection => QuickSelectionMenu}/QuickRangeButton/index.ts (100%)
 rename packages/date-picker/src/DateRangePicker/DateRangeMenu/{DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.styles.ts => QuickSelectionMenu/QuickSelectionMenu.styles.ts} (100%)
 rename packages/date-picker/src/DateRangePicker/DateRangeMenu/{DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.tsx => QuickSelectionMenu/QuickSelectionMenu.tsx} (93%)
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/index.ts

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index 375b913e91..860f384a6e 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -13,7 +13,7 @@ import { DateRangeMenuProps } from './DateRangeMenu.types';
 import { DateRangeMenuCalendars } from './DateRangeMenuCalendars';
 import { DateRangeMenuProvider } from './DateRangeMenuContext';
 import { DateRangeMenuFooter } from './DateRangeMenuFooter';
-import { DateRangeMenuQuickSelection } from './DateRangeMenuQuickSelection';
+import { QuickSelectionMenu } from './QuickSelectionMenu';
 
 export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
   ({ start, end, showQuickSelection, ...rest }: DateRangeMenuProps, fwdRef) => {
@@ -33,7 +33,7 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
           {...rest}
         >
           <div className={menuContentStyles}>
-            {showQuickSelection && <DateRangeMenuQuickSelection />}
+            {showQuickSelection && <QuickSelectionMenu />}
             <DateRangeMenuCalendars />
           </div>
           <DateRangeMenuFooter />
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/index.ts
deleted file mode 100644
index 900d132295..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DateRangeMenuQuickSelection } from './DateRangeMenuQuickSelection';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.stories.tsx
similarity index 100%
rename from packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.stories.tsx
rename to packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.stories.tsx
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.styles.ts
similarity index 100%
rename from packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.styles.ts
rename to packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.styles.ts
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
similarity index 100%
rename from packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/QuickRangeButton.tsx
rename to packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/index.ts
similarity index 100%
rename from packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/QuickRangeButton/index.ts
rename to packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/index.ts
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts
similarity index 100%
rename from packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.styles.ts
rename to packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
similarity index 93%
rename from packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.tsx
rename to packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
index bc0572b600..39b23a0d2b 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuQuickSelection/DateRangeMenuQuickSelection.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
@@ -13,13 +13,13 @@ import { useDatePickerContext } from '../../../DatePickerContext';
 import { setUTCMonth, setUTCYear } from '../../../utils';
 import { useDateRangeMenuContext } from '../DateRangeMenuContext';
 
+import { QuickRangeButton } from './QuickRangeButton';
 import {
   quickSelectMenuStyles,
   quickSelectMenuThemeStyles,
-} from './DateRangeMenuQuickSelection.styles';
-import { QuickRangeButton } from './QuickRangeButton';
+} from './QuickSelectionMenu.styles';
 
-export const DateRangeMenuQuickSelection = forwardRef<HTMLDivElement, {}>(
+export const QuickSelectionMenu = forwardRef<HTMLDivElement, {}>(
   (_props, fwdRef) => {
     const { theme } = useDarkMode();
     const { min, max, isInRange } = useDatePickerContext();
@@ -93,4 +93,4 @@ export const DateRangeMenuQuickSelection = forwardRef<HTMLDivElement, {}>(
   },
 );
 
-DateRangeMenuQuickSelection.displayName = 'DateRangeMenuQuickSelection';
+QuickSelectionMenu.displayName = 'DateRangeMenuQuickSelection';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/index.ts
new file mode 100644
index 0000000000..980234417b
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/index.ts
@@ -0,0 +1 @@
+export { QuickSelectionMenu } from './QuickSelectionMenu';

From 27f298405bb8b341f9dc20b3555b969b8cb18b29 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 6 Oct 2023 14:17:01 -0400
Subject: [PATCH 193/351] update range calendar menu styling

---
 .../DatePickerMenu/DatePickerMenu.tsx         |   2 +-
 .../DateRangeMenuCalendars.styles.ts          |  36 +++++-
 .../DateRangeMenuCalendars.tsx                | 118 ++++++++++--------
 3 files changed, 103 insertions(+), 53 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index f64bee57c5..1fb7c07652 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -44,7 +44,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
     const { isInRange, isOpen, setOpen } = useDatePickerContext();
 
-    // TODO:
+    // TODO: https://jira.mongodb.org/browse/LG-3666
     // useDynamicRefs may overflow if a user navigates to too many months.
     // consider purging the refs map within the hook
     const cellRefs = useDynamicRefs<HTMLTableCellElement>();
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
index bde34568cd..e86566cbb1 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
@@ -1,9 +1,39 @@
 import { css } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
 
+const calendarGapX = spacing[4] * 2;
+
 export const calendarsFrameStyles = css`
   display: grid;
-  grid-auto-flow: column;
-  gap: ${spacing[4] * 2}px;
-  padding: ${spacing[2] + spacing[1]}px;
+  grid-template-rows: 28px auto; // Size of icon-button
+  grid-template-areas: 'header' 'calendars';
+  gap: ${spacing[3]}px;
+  padding: ${spacing[4]}px;
+  padding-top: ${spacing[6]}px;
+`;
+
+export const calendarsContainerStyles = css`
+  grid-area: calendars;
+  display: flex;
+  gap: ${calendarGapX}px;
+  align-items: center;
+`;
+
+export const calendarHeadersContainerStyle = css`
+  grid-area: header;
+  display: flex;
+  gap: ${calendarGapX}px;
+  align-items: center;
+`;
+
+export const calendarHeaderStyles = css`
+  display: flex;
+
+  width: 100%;
+  align-items: center;
+
+  h6 {
+    width: 100%;
+    text-align: center;
+  }
 `;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index 8ca4832488..d7c2017e5c 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -1,17 +1,23 @@
 import React, { forwardRef } from 'react';
 
+import Icon from '@leafygreen-ui/icon';
+import IconButton from '@leafygreen-ui/icon-button';
 import { Subtitle } from '@leafygreen-ui/typography';
 
 import { CalendarCell, CalendarGrid } from '../../../Calendar';
 import {
   getFullMonthLabel,
-  getMonthName,
   getUTCDateString,
   isSameUTCDay,
 } from '../../../utils';
 import { useDateRangeMenuContext } from '../DateRangeMenuContext';
 
-import { calendarsFrameStyles } from './DateRangeMenuCalendars.styles';
+import {
+  calendarHeadersContainerStyle,
+  calendarHeaderStyles,
+  calendarsContainerStyles,
+  calendarsFrameStyles,
+} from './DateRangeMenuCalendars.styles';
 
 export const DateRangeMenuCalendars = forwardRef<HTMLDivElement, {}>(() => {
   const {
@@ -26,55 +32,69 @@ export const DateRangeMenuCalendars = forwardRef<HTMLDivElement, {}>(() => {
 
   return (
     <div className={calendarsFrameStyles}>
-      {/* TODO: Month labels & chevrons */}
-      {/* <Subtitle>{getMonthName(startMonth.getUTCMonth()).long}</Subtitle>
-      <Subtitle>{getMonthName(endMonth.getUTCMonth()).long}</Subtitle> */}
+      <div className={calendarsContainerStyles}>
+        <CalendarGrid
+          // ref={startCalendarRef}
+          month={startMonth}
+          // className={menuCalendarGridStyles}
+          // onKeyDown={handleCalendarKeyDown}
+          aria-label={getFullMonthLabel(startMonth)}
+        >
+          {(day, i) => (
+            <CalendarCell
+              key={i}
+              ref={startCellRefs(day.toISOString())}
+              aria-label={getUTCDateString(day)}
+              // isHighlighted={isSameUTCDay(day, highlight)}
+              isCurrent={isSameUTCDay(day, today)}
+              // state={getCellState(day)}
+              // onClick={cellClickHandlerForDay(day)}
+              data-iso={day.toISOString()}
+            >
+              {day.getUTCDate()}
+            </CalendarCell>
+          )}
+        </CalendarGrid>
+
+        <CalendarGrid
+          // ref={endCalendarRef}
+          month={endMonth}
+          // className={menuCalendarGridStyles}
+          // onKeyDown={handleCalendarKeyDown}
+          aria-label={getFullMonthLabel(endMonth)}
+        >
+          {(day, i) => (
+            <CalendarCell
+              key={i}
+              ref={endCellRefs(day.toISOString())}
+              aria-label={getUTCDateString(day)}
+              // isHighlighted={isSameUTCDay(day, highlight)}
+              isCurrent={isSameUTCDay(day, today)}
+              // state={getCellState(day)}
+              // onClick={cellClickHandlerForDay(day)}
+              data-iso={day.toISOString()}
+            >
+              {day.getUTCDate()}
+            </CalendarCell>
+          )}
+        </CalendarGrid>
+      </div>
 
-      <CalendarGrid
-        // ref={startCalendarRef}
-        month={startMonth}
-        // className={menuCalendarGridStyles}
-        // onKeyDown={handleCalendarKeyDown}
-        aria-label={getFullMonthLabel(startMonth)}
-      >
-        {(day, i) => (
-          <CalendarCell
-            key={i}
-            ref={startCellRefs(day.toISOString())}
-            aria-label={getUTCDateString(day)}
-            // isHighlighted={isSameUTCDay(day, highlight)}
-            isCurrent={isSameUTCDay(day, today)}
-            // state={getCellState(day)}
-            // onClick={cellClickHandlerForDay(day)}
-            data-iso={day.toISOString()}
-          >
-            {day.getUTCDate()}
-          </CalendarCell>
-        )}
-      </CalendarGrid>
+      <div className={calendarHeadersContainerStyle}>
+        <div className={calendarHeaderStyles}>
+          <IconButton aria-label="Previous month">
+            <Icon glyph="ChevronLeft" />
+          </IconButton>
+          <Subtitle>{getFullMonthLabel(startMonth)}</Subtitle>
+        </div>
 
-      <CalendarGrid
-        // ref={endCalendarRef}
-        month={endMonth}
-        // className={menuCalendarGridStyles}
-        // onKeyDown={handleCalendarKeyDown}
-        aria-label={getFullMonthLabel(endMonth)}
-      >
-        {(day, i) => (
-          <CalendarCell
-            key={i}
-            ref={endCellRefs(day.toISOString())}
-            aria-label={getUTCDateString(day)}
-            // isHighlighted={isSameUTCDay(day, highlight)}
-            isCurrent={isSameUTCDay(day, today)}
-            // state={getCellState(day)}
-            // onClick={cellClickHandlerForDay(day)}
-            data-iso={day.toISOString()}
-          >
-            {day.getUTCDate()}
-          </CalendarCell>
-        )}
-      </CalendarGrid>
+        <div className={calendarHeaderStyles}>
+          <Subtitle>{getFullMonthLabel(endMonth)}</Subtitle>
+          <IconButton aria-label="Next month">
+            <Icon glyph="ChevronRight" />
+          </IconButton>
+        </div>
+      </div>
     </div>
   );
 });

From c5b04e63118b20720b535b65f94cfd9c080f489f Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 6 Oct 2023 14:19:33 -0400
Subject: [PATCH 194/351] Create getFullMonthLabel.spec.ts

---
 .../getFullMonthLabel/getFullMonthLabel.spec.ts      | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 packages/date-picker/src/utils/getFullMonthLabel/getFullMonthLabel.spec.ts

diff --git a/packages/date-picker/src/utils/getFullMonthLabel/getFullMonthLabel.spec.ts b/packages/date-picker/src/utils/getFullMonthLabel/getFullMonthLabel.spec.ts
new file mode 100644
index 0000000000..e525fcf604
--- /dev/null
+++ b/packages/date-picker/src/utils/getFullMonthLabel/getFullMonthLabel.spec.ts
@@ -0,0 +1,12 @@
+import { Month } from '../../constants';
+import { newUTC } from '../newUTC';
+
+import { getFullMonthLabel } from '.';
+
+describe('packages/date-picker/utils/getMonthName', () => {
+  test('Jan', () => {
+    expect(getFullMonthLabel(newUTC(2023, Month.January, 5))).toEqual(
+      'January 2023',
+    );
+  });
+});

From 212fe72630472a38d1c9cf4d26438dc8b2eef36b Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 9 Oct 2023 11:09:10 -0400
Subject: [PATCH 195/351] update range menu spacing

---
 .../DatePicker/DatePickerMenu/DatePickerMenu.tsx |  2 +-
 .../DateRangeMenuCalendars.styles.ts             |  6 ++++--
 .../QuickSelectionMenu.styles.ts                 | 16 ++++++++++++++++
 .../QuickSelectionMenu/QuickSelectionMenu.tsx    |  6 ++++--
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 1fb7c07652..a961751b62 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -90,7 +90,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     };
 
     /**
-     * When month changes, after the DOM changes, focus the relevant cell \
+     * When month changes, after the DOM changes, focus the relevant cell
      */
     useLayoutEffect(() => {
       if (highlight && !isSameUTCDay(highlight, prevHighlight)) {
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
index e86566cbb1..c595a70974 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@leafygreen-ui/emotion';
-import { spacing } from '@leafygreen-ui/tokens';
+import { spacing, typeScales } from '@leafygreen-ui/tokens';
 
 const calendarGapX = spacing[4] * 2;
 
@@ -16,7 +16,7 @@ export const calendarsContainerStyles = css`
   grid-area: calendars;
   display: flex;
   gap: ${calendarGapX}px;
-  align-items: center;
+  align-items: start;
 `;
 
 export const calendarHeadersContainerStyle = css`
@@ -33,6 +33,8 @@ export const calendarHeaderStyles = css`
   align-items: center;
 
   h6 {
+    font-size: ${typeScales.body2.fontSize}px;
+    line-height: ${typeScales.body2.lineHeight}px;
     width: 100%;
     text-align: center;
   }
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts
index c336da459f..f1ee38c115 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts
@@ -4,6 +4,9 @@ import { palette } from '@leafygreen-ui/palette';
 import { spacing } from '@leafygreen-ui/tokens';
 
 export const quickSelectMenuStyles = css`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing[4]}px;
   padding: ${spacing[4]}px;
   // TODO: Fix the menu vs clear button z-index
 `;
@@ -17,3 +20,16 @@ export const quickSelectMenuThemeStyles: Record<Theme, string> = {
     // TODO:
   `,
 };
+
+export const quickSelectMenuMonthSelectContainerStyles = css`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing[2]}px;
+`;
+
+export const quickSelectMenuSelectionsContainerStyles = css`
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: ${spacing[2]}px;
+`;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
index 39b23a0d2b..c1a1179c51 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
@@ -15,6 +15,8 @@ import { useDateRangeMenuContext } from '../DateRangeMenuContext';
 
 import { QuickRangeButton } from './QuickRangeButton';
 import {
+  quickSelectMenuMonthSelectContainerStyles,
+  quickSelectMenuSelectionsContainerStyles,
   quickSelectMenuStyles,
   quickSelectMenuThemeStyles,
 } from './QuickSelectionMenu.styles';
@@ -42,7 +44,7 @@ export const QuickSelectionMenu = forwardRef<HTMLDivElement, {}>(
         ref={fwdRef}
         className={cx(quickSelectMenuStyles, quickSelectMenuThemeStyles[theme])}
       >
-        <div>
+        <div className={quickSelectMenuMonthSelectContainerStyles}>
           <Select
             {...selectElementProps}
             aria-label="Select month"
@@ -74,7 +76,7 @@ export const QuickSelectionMenu = forwardRef<HTMLDivElement, {}>(
             ))}
           </Select>
         </div>
-        <div>
+        <div className={quickSelectMenuSelectionsContainerStyles}>
           <Overline>Quick Ranges:</Overline>
           {/*
            TODO: this functionality

From 84a3d427eaa48213df43e2767da828de6df13f1a Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 9 Oct 2023 12:44:22 -0400
Subject: [PATCH 196/351] adds range rendering tests

---
 .../DateRangeComponent/DateRangeComponent.tsx |   4 +-
 .../DateRangeInput/DateRangeInput.tsx         |   3 +-
 .../DateRangePicker/DateRangePicker.spec.tsx  | 119 +++++++++++++++++-
 .../DateRangePicker.testutils.tsx             | 114 +++++++++++++++++
 4 files changed, 235 insertions(+), 5 deletions(-)
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
index 4cfa488951..ba856c94e9 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
@@ -8,10 +8,10 @@ import { DateRangeComponentProps } from './DateRangeComponent.types';
 export const DateRangeComponent = forwardRef<
   HTMLDivElement,
   DateRangeComponentProps
->((props: DateRangeComponentProps, fwdRef) => {
+>(({ ...rest }: DateRangeComponentProps, fwdRef) => {
   return (
     <>
-      <DateRangeInput />
+      <DateRangeInput ref={fwdRef} {...rest} />
       <DateRangeMenu />
     </>
   );
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index fd26e76d13..c88f605a3b 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -20,7 +20,7 @@ import { DateRangeInputProps } from './DateRangeInput.types';
 const EN_DASH = '–';
 
 export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
-  ({ start, end, handleValidation }: DateRangeInputProps, fwdRef) => {
+  ({ start, end, handleValidation, ...rest }: DateRangeInputProps, fwdRef) => {
     const { disabled, formatParts, setOpen } = useDatePickerContext();
 
     const startSegmentRefs = useSegmentRefs();
@@ -93,6 +93,7 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
         ref={fwdRef}
         onKeyDown={handleKeyDown}
         onInputClick={handleInputClick}
+        {...rest}
       >
         <div className={inputWrapperStyles}>
           <DateInputBox segmentRefs={startSegmentRefs} />
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index fe1ed2e9b2..1a1cb6a0cb 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -1,8 +1,123 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 
+import { Month } from '../constants';
+import { newUTC } from '../utils';
+
+import { renderDateRangePicker } from './DateRangePicker.testutils';
 import { DateRangePicker } from '.';
 
 describe('packages/date-picker/date-range-picker', () => {
-  test('condition', () => {});
+  describe('Rendering', () => {
+    /// Note: Many rendering tests should be handled by Chromatic
+
+    test('renders label', () => {
+      const { getByText } = render(<DateRangePicker label="Label" />);
+      const label = getByText('Label');
+      expect(label).toBeInTheDocument();
+    });
+
+    test('renders description', () => {
+      const { getByText } = render(
+        <DateRangePicker label="Label" description="Description" />,
+      );
+      const description = getByText('Description');
+      expect(description).toBeInTheDocument();
+    });
+
+    test('spreads rest to formField', () => {
+      const { getByTestId } = render(
+        <DateRangePicker label="Label" data-testid="lg-date-range-picker" />,
+      );
+      const formField = getByTestId('lg-date-range-picker');
+      expect(formField).toBeInTheDocument();
+    });
+
+    test('formField contains label & input elements', () => {
+      const { getByTestId, getByRole } = render(
+        <DateRangePicker label="Label" data-testid="lg-date-range-picker" />,
+      );
+      const formField = getByTestId('lg-date-range-picker');
+      const inputContainer = getByRole('combobox');
+      expect(formField.querySelector('label')).toBeInTheDocument();
+      expect(formField.querySelector('label')).toHaveTextContent('Label');
+      expect(inputContainer).toBeInTheDocument();
+    });
+
+    test('renders 6 inputs', () => {
+      const { inputElements } = renderDateRangePicker();
+      expect(inputElements).toHaveLength(6);
+    });
+
+    test('renders `start` & `end` prop', () => {
+      const { inputElements } = renderDateRangePicker({
+        start: newUTC(2023, Month.January, 5),
+        end: newUTC(2023, Month.February, 14),
+      });
+      expect(inputElements[0]).toEqual('05');
+      expect(inputElements[1]).toEqual('01');
+      expect(inputElements[2]).toEqual('2023');
+      expect(inputElements[3]).toEqual('14');
+      expect(inputElements[4]).toEqual('02');
+      expect(inputElements[5]).toEqual('2023');
+    });
+
+    test('renders `initialStart` & `initialEnd` prop', () => {
+      const { inputElements } = renderDateRangePicker({
+        initialStart: newUTC(2023, Month.July, 5),
+        initialEnd: newUTC(2023, Month.August, 10),
+      });
+      expect(inputElements[0]).toEqual('05');
+      expect(inputElements[1]).toEqual('07');
+      expect(inputElements[2]).toEqual('2023');
+      expect(inputElements[3]).toEqual('10');
+      expect(inputElements[4]).toEqual('08');
+      expect(inputElements[5]).toEqual('2023');
+    });
+
+    describe('Menu', () => {
+      test('menu is initially closed', () => {
+        const { getMenuElements } = renderDateRangePicker();
+        const { menuContainerEl } = getMenuElements();
+        expect(menuContainerEl).not.toBeInTheDocument();
+      });
+
+      test('menu is initially open when rendered with `initialOpen`', async () => {
+        const { getMenuElements } = renderDateRangePicker({
+          initialOpen: true,
+        });
+        const { menuContainerEl } = getMenuElements();
+        await waitFor(() => expect(menuContainerEl).toBeInTheDocument());
+      });
+
+      test('if no value is set, menu opens to current month', () => {
+        const { openMenu } = renderDateRangePicker();
+        const { calendarGrids } = openMenu();
+        expect(calendarGrids?.[0]).toHaveAttribute(
+          'aria-label',
+          'December 2023',
+        );
+        expect(calendarGrids?.[1]).toHaveAttribute(
+          'aria-label',
+          'January 2024',
+        );
+      });
+
+      test('if a value is set, menu opens to the month of that value', () => {
+        const { openMenu } = renderDateRangePicker({
+          start: newUTC(2023, Month.March, 10),
+        });
+        const { calendarGrids } = openMenu();
+        expect(calendarGrids?.[0]).toHaveAttribute('aria-label', 'March 2023');
+      });
+
+      test('renders the appropriate number of cells', () => {
+        const { openMenu } = renderDateRangePicker({
+          start: newUTC(2024, Month.February, 14),
+        });
+        const { calendarCells } = openMenu();
+        expect(calendarCells).toHaveLength(29 + 31);
+      });
+    });
+  });
 });
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
new file mode 100644
index 0000000000..bba0835bfc
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import {
+  getByRole as globalGetByRole,
+  render,
+  RenderResult,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { DateRangePicker, DateRangePickerProps } from '.';
+
+interface RenderDateRangePickerResult extends RenderResult {
+  formField: HTMLElement;
+  inputContainer: HTMLElement;
+  inputElements: Array<HTMLInputElement>;
+  calendarButton: HTMLButtonElement;
+  getMenuElements: () => RenderMenuResult;
+  openMenu: () => RenderMenuResult;
+}
+
+interface RenderMenuResult {
+  menuContainerEl: HTMLElement | null;
+  leftChevron: HTMLButtonElement | null;
+  rightChevron: HTMLButtonElement | null;
+  monthSelect: HTMLButtonElement | null;
+  yearSelect: HTMLButtonElement | null;
+  calendarGrids: Array<HTMLTableElement> | null;
+  calendarCells: Array<HTMLTableCellElement>;
+  todayCell: HTMLTableCellElement | null;
+}
+
+/**
+ * Renders a date picker for jest environments
+ */
+export const renderDateRangePicker = (
+  props?: Partial<DateRangePickerProps>,
+): RenderDateRangePickerResult => {
+  const defaultProps = { label: '' };
+  const result = render(
+    <DateRangePicker
+      data-testid="lg-date-picker"
+      {...defaultProps}
+      {...props}
+    />,
+  );
+
+  const formField = result.getByTestId('lg-date-picker');
+  const inputContainer = result.getByRole('combobox');
+
+  const inputElements = Array.from(inputContainer.querySelectorAll('input'));
+
+  const calendarButton = globalGetByRole(
+    inputContainer,
+    'button',
+  ) as HTMLButtonElement;
+
+  /**
+   * Returns relevant menu elements.
+   * Call this after the menu has been opened
+   */
+  function getMenuElements(): RenderMenuResult {
+    const menuContainerEl = result.queryByRole('listbox');
+
+    const calendarGrids = result.queryAllByRole(
+      'grid',
+    ) as Array<HTMLTableElement>;
+
+    const calendarCells = result.queryAllByRole(
+      'gridcell',
+    ) as Array<HTMLTableCellElement>;
+
+    // label text is tested in DatePickerMenu.spec
+    const leftChevron = result.queryByLabelText(
+      'Previous month',
+    ) as HTMLButtonElement;
+    const rightChevron = result.queryByLabelText(
+      'Next month',
+    ) as HTMLButtonElement;
+    const monthSelect = result.queryByLabelText(
+      'Select month',
+    ) as HTMLButtonElement;
+    const yearSelect = result.queryByLabelText(
+      'Select year',
+    ) as HTMLButtonElement;
+    const todayCell = menuContainerEl?.querySelector(
+      '[aria-current="true"]',
+    ) as HTMLTableCellElement;
+
+    return {
+      menuContainerEl,
+      calendarGrids,
+      calendarCells,
+      todayCell,
+      leftChevron,
+      rightChevron,
+      monthSelect,
+      yearSelect,
+    };
+  }
+
+  function openMenu(): RenderMenuResult {
+    userEvent.click(inputContainer);
+    return getMenuElements();
+  }
+
+  return {
+    ...result,
+    formField,
+    inputContainer,
+    inputElements,
+    calendarButton,
+    getMenuElements,
+    openMenu,
+  };
+};

From 1b552feb5ac5e0d900f641491e3fd4a27fde088c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 9 Oct 2023 13:39:44 -0400
Subject: [PATCH 197/351] outlines bulk of range tests

---
 .../src/DatePicker/DatePicker.spec.tsx        |   6 +-
 .../DatePickerInput/DatePickerInput.spec.tsx  |  17 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    |   6 +-
 .../DateRangeComponent.spec.tsx               |  65 ++++++-
 .../DateRangeInput/DateRangeInput.spec.tsx    |  25 ++-
 ...stories.tsx => DateRangeInput.stories.tsx} |   0
 .../DateRangePicker/DateRangePicker.spec.tsx  | 178 ++++++++++++++++++
 7 files changed, 281 insertions(+), 16 deletions(-)
 rename packages/date-picker/src/DateRangePicker/DateRangeInput/{DatePickerInput.stories.tsx => DateRangeInput.stories.tsx} (100%)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index fb642d36e3..a4f34016ed 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -15,7 +15,7 @@ import { newUTC } from '../utils/newUTC';
 import { renderDatePicker } from './DatePicker.testutils';
 import { DatePicker } from '.';
 
-const testToday = new Date(Date.UTC(2023, Month.December, 26));
+const testToday = newUTC(2023, Month.December, 26);
 
 describe('packages/date-picker', () => {
   beforeEach(() => {
@@ -551,7 +551,7 @@ describe('packages/date-picker', () => {
           expect(handleValidation).toHaveBeenCalledWith(undefined);
         });
 
-        test('if menu is closed, enter key on calendar button opens the menu', () => {
+        test('opens menu if calendar button is focused', () => {
           const { getMenuElements } = renderDatePicker();
           tabNTimes(3);
           userEvent.keyboard('{enter}');
@@ -559,7 +559,7 @@ describe('packages/date-picker', () => {
           expect(menuContainerEl).toBeInTheDocument();
         });
 
-        test('if month/year select is open, updates the displayed month', async () => {
+        test('if month/year select is focused, opens the select menu', async () => {
           const { openMenu, findAllByRole } = renderDatePicker();
           const { monthSelect } = openMenu();
           tabNTimes(6);
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 1502823a2a..860e464aee 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -8,7 +8,6 @@ import {
   DatePickerProviderProps,
 } from '../../DatePickerContext';
 import { defaultDatePickerContext } from '../../DatePickerContext/DatePickerContext.utils';
-import { SegmentRefs } from '../../hooks/useSegmentRefs';
 
 import { DatePickerInput, DatePickerInputProps } from '.';
 
@@ -16,15 +15,9 @@ const renderDatePickerInput = (
   props?: Omit<DatePickerInputProps, 'segmentRefs'>,
   context?: DatePickerProviderProps,
 ) => {
-  const segmentRefsMock: SegmentRefs = {
-    day: React.createRef(),
-    month: React.createRef(),
-    year: React.createRef(),
-  };
-
   const result = render(
     <DatePickerProvider value={{ ...defaultDatePickerContext, ...context }}>
-      <DatePickerInput {...props} segmentRefs={segmentRefsMock} />
+      <DatePickerInput {...props} />
     </DatePickerProvider>,
   );
 
@@ -66,6 +59,10 @@ describe('packages/date-picker/date-picker-input', () => {
         userEvent.type(monthInput, '{arrowleft}');
         expect(monthInput).toHaveFocus();
       });
+
+      test.todo(
+        'focuses the previous segment if the cursor is at the start of the input text',
+      );
     });
 
     describe('Right Arrow', () => {
@@ -82,6 +79,10 @@ describe('packages/date-picker/date-picker-input', () => {
         userEvent.type(monthInput, '{arrowright}');
         expect(monthInput).toHaveFocus();
       });
+
+      test.todo(
+        'focuses the next segment if the cursor is at the end of the input text',
+      );
     });
 
     describe('Backspace key', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 9527c70922..95b89ac4ef 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -129,16 +129,14 @@ describe('packages/date-picker/date-picker-menu', () => {
         expect(yearSelect).toHaveValue('2024');
       });
     });
-  });
 
-  describe('Keyboard navigation', () => {
     test('default highlight is on today', () => {
       const { todayCell } = renderDatePickerMenu();
       userEvent.tab();
       expect(todayCell).toHaveFocus();
     });
 
-    test('highlight starts on on current value when provided', () => {
+    test('highlight starts on current value when provided', () => {
       const { getCellWithValue } = renderDatePickerMenu({
         value: testValue,
       });
@@ -146,7 +144,9 @@ describe('packages/date-picker/date-picker-menu', () => {
       const valueCell = getCellWithValue(testValue);
       expect(valueCell).toHaveFocus();
     });
+  });
 
+  describe('Keyboard navigation', () => {
     describe('Arrow Keys', () => {
       test('left arrow moves focus to the previous day', async () => {
         const { getCellWithValue } = renderDatePickerMenu({
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx
index a808d7c1f2..20231bbd04 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx
@@ -1,8 +1,71 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
+import { Month } from '../../constants';
+
 import { DateRangeComponent } from '.';
 
+const testToday = new Date(Date.UTC(2023, Month.September, 10));
+
 describe('packages/date-picker/date-range-picker/date-range-component', () => {
-  test('condition', () => {});
+  describe('Rendering', () => {
+    test.todo('renders two calendar grids');
+    test.todo('left calendar is labelled as the current month');
+    test.todo('right calendar is labelled as the following month');
+    test.todo('chevrons have aria labels');
+
+    describe('rendered cells', () => {
+      test.todo('have correct `aria-label`');
+    });
+
+    describe('with quick select menu', () => {
+      test.todo('select menu triggers have aria labels');
+      test.todo('select menus have correct values');
+      test.todo('quick select buttons are rendered');
+    });
+
+    describe('when value is updated', () => {
+      test.todo('grid is labelled as the current month');
+      test.todo('select menus have correct values');
+    });
+
+    test.todo('default highlight is on today');
+    test.todo('highlight starts on start value when provided');
+    test.todo('highlight starts on end value when only end provided');
+  });
+
+  describe('Keyboard navigation', () => {
+    describe('Arrow Keys', () => {
+      test.todo('left arrow moves focus to the previous day');
+      test.todo('right arrow moves focus to the next day');
+      test.todo('up arrow moves focus to the previous week');
+      test.todo('down arrow moves focus to the next week');
+
+      describe('when next day would be out of range', () => {
+        const props = {
+          // value: testToday,
+        };
+
+        test.todo('left arrow does nothing');
+        test.todo('right arrow does nothing');
+        test.todo('up arrow does nothing');
+        test.todo('down arrow does nothing');
+      });
+
+      describe('update the displayed month', () => {
+        test.todo('left arrow updates displayed month to previous');
+        test.todo('right arrow updates displayed month to next');
+        test.todo('up arrow updates displayed month to previous');
+        test.todo('down arrow updates displayed month to next');
+        test.todo('does not update month when month does not need to change');
+      });
+
+      describe('when month should be updated', () => {
+        test.todo('left arrow focuses the previous day');
+        test.todo('right arrow focuses the next day');
+        test.todo('up arrow focuses the previous week');
+        test.todo('down arrow focuses the next week');
+      });
+    });
+  });
 });
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx
index e7ab2b16ac..5451ca576f 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx
@@ -4,5 +4,28 @@ import { render } from '@testing-library/react';
 import { DateRangeInput } from '.';
 
 describe('packages/date-picker/date-range-picker/date-range-input', () => {
-  test('condition', () => {});
+  describe('Keyboard interaction', () => {
+    // yyyy-mm-dd
+    describe('Left Arrow', () => {
+      test.todo('moves the cursor when the segment has a value');
+      test.todo('focuses the previous segment when the segment is empty');
+      test.todo(
+        'focuses the previous segment if the cursor is at the start of the input text',
+      );
+    });
+
+    describe('Right Arrow', () => {
+      test.todo('moves the cursor when the segment has a value');
+      test.todo('focuses the next segment when the segment is empty');
+      test.todo(
+        'focuses the next segment if the cursor is at the end of the input text',
+      );
+    });
+
+    describe('Backspace key', () => {
+      test.todo('deletes any value in the input');
+      test.todo('deletes the whole value on multiple presses');
+      test.todo('focuses the previous segment if current segment is empty');
+    });
+  });
 });
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.stories.tsx
similarity index 100%
rename from packages/date-picker/src/DateRangePicker/DateRangeInput/DatePickerInput.stories.tsx
rename to packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.stories.tsx
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 1a1cb6a0cb..3b3d3b00f8 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
+import range from 'lodash/range';
 
 import { Month } from '../constants';
 import { newUTC } from '../utils';
@@ -7,7 +8,14 @@ import { newUTC } from '../utils';
 import { renderDateRangePicker } from './DateRangePicker.testutils';
 import { DateRangePicker } from '.';
 
+const testToday = newUTC(2023, Month.December, 26);
+
 describe('packages/date-picker/date-range-picker', () => {
+  beforeEach(() => {
+    // Set the current time to midnight UTC on 2023-12-26
+    jest.useFakeTimers().setSystemTime(testToday);
+  });
+
   describe('Rendering', () => {
     /// Note: Many rendering tests should be handled by Chromatic
 
@@ -120,4 +128,174 @@ describe('packages/date-picker/date-range-picker', () => {
       });
     });
   });
+
+  describe('Interaction', () => {
+    describe('Mouse interaction', () => {
+      describe('Clicking the input', () => {
+        test.todo('opens the menu');
+        test.todo('focuses the clicked segment');
+        test.todo('focuses the first segment when all are empty');
+        test.todo('focuses the first empty segment in start input');
+        test.todo('focuses the first empty segment in end input');
+        test.todo('focuses the last segment when all are filled');
+      });
+
+      describe('Clicking a calendar cell', () => {
+        test.todo(
+          'if no value is set, fires a change handler for the start date',
+        );
+        test.todo(
+          'if only start value is set, fires change handler for the end date',
+        );
+        test.todo(
+          'if only end value is set, fires change handler for the start date',
+        );
+
+        describe('if a full range is set', () => {
+          test.todo('fires a change handler for start date');
+          test.todo('fires a change handler to clear the end date');
+        });
+      });
+
+      describe('Clicking the Apply button', () => {
+        test.todo('fires a change handler with the current input value');
+      });
+
+      describe('Clicking the Cancel button', () => {
+        test.todo('fires an onCancel handler');
+        test.todo('fires a change handler with the previous input value');
+      });
+
+      describe('Clicking the Clear button', () => {
+        test.todo('fires an onClear handler');
+        test.todo('fires a change handler with the to clear the range values');
+      });
+
+      describe('Clicking a Chevron', () => {
+        describe('Left', () => {
+          test.todo('does not close the menu');
+
+          test.todo('updates the displayed month to the previous');
+
+          test.todo(
+            'updates the displayed month to the previous, and updates year',
+          );
+        });
+
+        describe('Right', () => {
+          test.todo('does not close the menu');
+
+          test.todo('updates the displayed month to the next');
+
+          test.todo('updates the displayed month to the next and updates year');
+        });
+      });
+
+      describe('Month select menu', () => {
+        test.todo('menu opens over the calendar menu');
+
+        test.todo('selecting the month updates the calendar');
+      });
+
+      describe('Year select menu', () => {
+        test.todo('menu opens over the calendar menu');
+
+        test.todo('selecting the year updates the calendar');
+      });
+
+      describe('Clicking backdrop', () => {
+        test.todo('closes the menu');
+        test.todo('does not fire a change handler');
+      });
+    });
+
+    describe('Keyboard interaction', () => {
+      describe('Tab', () => {
+        test.todo('menu does not open on initial focus');
+
+        const closedTabStops = 3 + 3 + 1; // start + end + button
+        const basicMenuTabStops = closedTabStops + 3; // chevrons + cell
+        const quickSelectTabStops = basicMenuTabStops + 2 + 7; // selects + quick select buttons
+
+        describe('Tab order', () => {
+          describe.each(range(0, closedTabStops))('when menu is closed', n => {
+            test.todo(`Tab ${n} times`);
+          });
+
+          describe.each(range(0, basicMenuTabStops))(
+            'when basic menu is open',
+            n => {
+              test.todo(`Tab ${n} times`);
+            },
+          );
+
+          describe.each(range(0, quickSelectTabStops))(
+            'when quick select menu is open',
+            n => {
+              test.todo(`Tab ${n} times`);
+            },
+          );
+        });
+
+        test.todo('calls validation handler when last segment is unfocused');
+        test.todo('does not call validation handler when changing segment');
+      });
+
+      describe('Enter key', () => {
+        test.todo('if menu is closed, does not open the menu');
+        test.todo('opens menu if calendar button is focused');
+        test.todo('calls validation handler');
+        test.todo('if month/year select is focused, opens the select menu');
+        test.todo('if a cell is focused, fires a change handler');
+        test.todo('if a cell is focused, closes the menu');
+        test.todo('if a Chevron is focused, updates the displayed month');
+        test.todo('if Quick Select button is clicked, fires change handler');
+      });
+
+      describe('Escape key', () => {
+        test.todo('closes the menu');
+        test.todo('does not fire a change handler');
+        test.todo('fires a validation handler');
+        test.todo('focus remains in the input element');
+      });
+
+      /**
+       * Arrow Keys:
+       * Since arrow key behavior changes based on whether the input or menu is focused,
+       * many of these tests exist in the "DatePickerInput" and "DatePickerMenu" components
+       */
+    });
+
+    describe('Typing', () => {
+      test.todo('opens the menu');
+
+      describe('into start date', () => {
+        test.todo('updates segment value');
+        test.todo('does not fire range change handler');
+        test.todo('does not fire segment change handler');
+
+        describe('on un-focus/blur', () => {
+          test.todo('fires a change handler if the value is valid');
+          test.todo('does not fire a change handler if value is incomplete');
+          test.todo('fires a segment change handler');
+          test.todo('fires a validation handler when the value is first set');
+          test.todo('fires a validation handler when the value is updated');
+        });
+      });
+
+      describe('into end date', () => {
+        test.todo('updates segment value');
+        test.todo('does not fire range change handler');
+        test.todo('does not fire segment change handler');
+
+        describe('on un-focus/blur', () => {
+          test.todo('fires a change handler if the value is valid');
+          test.todo('does not fire a change handler if value is incomplete');
+          test.todo('fires a segment change handler');
+          test.todo('fires a validation handler when the value is first set');
+          test.todo('fires a validation handler when the value is updated');
+        });
+      });
+    });
+  });
 });

From e18c758d44e3ba6ed49df464b3aa3706dafdeabe Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 9 Oct 2023 14:13:49 -0400
Subject: [PATCH 198/351] refactor to value/onchange

---
 .../DateRangeComponent.types.ts               |  3 +-
 .../DateRangeInput/DateRangeInput.tsx         |  9 ++++--
 .../DateRangeInput/DateRangeInput.types.ts    |  5 +++-
 .../DateRangeMenu/DateRangeMenu.tsx           |  7 +++--
 .../DateRangeMenu/DateRangeMenu.types.ts      |  2 +-
 .../DateRangeMenuProvider.tsx                 |  9 +++---
 .../DateRangePicker/DateRangePicker.spec.tsx  | 16 +++++++----
 .../DateRangePicker.stories.tsx               | 19 ++-----------
 .../src/DateRangePicker/DateRangePicker.tsx   | 14 ++++------
 .../DateRangePicker/DateRangePicker.types.ts  | 28 +++++++++----------
 packages/date-picker/src/index.ts             |  2 ++
 packages/date-picker/src/types.ts             |  1 +
 12 files changed, 57 insertions(+), 58 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
index d9c3abc30b..6bf1d0996a 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
@@ -1,4 +1,5 @@
-import { DateRangePickerProps, DateRangeType } from '../DateRangePicker.types';
+import { DateRangeType } from '../../types';
+import { DateRangePickerProps } from '../DateRangePicker.types';
 
 export interface DateRangeComponentProps
   extends Pick<DateRangePickerProps, 'showQuickSelection'> {
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index c88f605a3b..7127d1da9c 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -20,7 +20,10 @@ import { DateRangeInputProps } from './DateRangeInput.types';
 const EN_DASH = '–';
 
 export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
-  ({ start, end, handleValidation, ...rest }: DateRangeInputProps, fwdRef) => {
+  (
+    { value, onChange, handleValidation, ...rest }: DateRangeInputProps,
+    fwdRef,
+  ) => {
     const { disabled, formatParts, setOpen } = useDatePickerContext();
 
     const startSegmentRefs = useSegmentRefs();
@@ -74,12 +77,12 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
         }
 
         case keyMap.Enter:
-          handleValidation?.([start || null, end || null]);
+          handleValidation?.(value);
           break;
 
         case keyMap.Escape:
           setOpen(false);
-          handleValidation?.([start || null, end || null]);
+          handleValidation?.(value);
           break;
 
         default:
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
index 003152f17d..76fb6ece75 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
@@ -1,4 +1,7 @@
 import { DateRangePickerProps } from '../DateRangePicker.types';
 
 export interface DateRangeInputProps
-  extends Pick<DateRangePickerProps, 'start' | 'end' | 'handleValidation'> {}
+  extends Pick<
+    DateRangePickerProps,
+    'value' | 'onChange' | 'handleValidation'
+  > {}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index 860f384a6e..48c96b3369 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -16,13 +16,16 @@ import { DateRangeMenuFooter } from './DateRangeMenuFooter';
 import { QuickSelectionMenu } from './QuickSelectionMenu';
 
 export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
-  ({ start, end, showQuickSelection, ...rest }: DateRangeMenuProps, fwdRef) => {
+  (
+    { value, onChange, showQuickSelection, ...rest }: DateRangeMenuProps,
+    fwdRef,
+  ) => {
     const { isOpen } = useDatePickerContext();
 
     // TODO: Focus trap
 
     return (
-      <DateRangeMenuProvider start={start} end={end}>
+      <DateRangeMenuProvider value={value}>
         <MenuWrapper
           ref={fwdRef}
           usePortal
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
index b843c12d46..5826640beb 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
@@ -6,5 +6,5 @@ export type DateRangeMenuProps = PortalControlProps &
   Pick<PopoverProps, 'refEl'> &
   Pick<
     DateRangePickerProps,
-    'start' | 'end' | 'showQuickSelection' | 'handleValidation' // TODO: Setter
+    'value' | 'onChange' | 'showQuickSelection' | 'handleValidation' // TODO: Setter
   > & {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
index 6081a20fcd..fd80b98333 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
@@ -9,7 +9,7 @@ import { DateRangeMenuProps } from '../DateRangeMenu.types';
 import { DateRangeMenuContext } from './DateRangeMenuContext';
 
 export interface DateRangeMenuProviderProps
-  extends Pick<DateRangeMenuProps, 'start' | 'end'>,
+  extends Pick<DateRangeMenuProps, 'value'>,
     PropsWithChildren<{}> {}
 
 /**
@@ -17,16 +17,15 @@ export interface DateRangeMenuProviderProps
  * and initializes the start & end display months
  */
 export const DateRangeMenuProvider = ({
-  start,
-  end,
+  value,
   children,
 }: DateRangeMenuProviderProps) => {
   const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
   const thisMonth = useMemo(() => getFirstOfMonth(today), [today]);
 
-  const [startMonth, setStartMonth] = useState<Date>(start ?? thisMonth);
+  const [startMonth, setStartMonth] = useState<Date>(value?.[0] ?? thisMonth);
   const [endMonth, setEndMonth] = useState<Date>(
-    end ?? addMonths(thisMonth, 1),
+    value?.[1] ?? addMonths(thisMonth, 1),
   );
 
   const startCellRefs = useDynamicRefs<HTMLTableCellElement>();
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 3b3d3b00f8..a1c051f3c0 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -59,8 +59,10 @@ describe('packages/date-picker/date-range-picker', () => {
 
     test('renders `start` & `end` prop', () => {
       const { inputElements } = renderDateRangePicker({
-        start: newUTC(2023, Month.January, 5),
-        end: newUTC(2023, Month.February, 14),
+        value: [
+          newUTC(2023, Month.January, 5),
+          newUTC(2023, Month.February, 14),
+        ],
       });
       expect(inputElements[0]).toEqual('05');
       expect(inputElements[1]).toEqual('01');
@@ -72,8 +74,10 @@ describe('packages/date-picker/date-range-picker', () => {
 
     test('renders `initialStart` & `initialEnd` prop', () => {
       const { inputElements } = renderDateRangePicker({
-        initialStart: newUTC(2023, Month.July, 5),
-        initialEnd: newUTC(2023, Month.August, 10),
+        initialValue: [
+          newUTC(2023, Month.July, 5),
+          newUTC(2023, Month.August, 10),
+        ],
       });
       expect(inputElements[0]).toEqual('05');
       expect(inputElements[1]).toEqual('07');
@@ -113,7 +117,7 @@ describe('packages/date-picker/date-range-picker', () => {
 
       test('if a value is set, menu opens to the month of that value', () => {
         const { openMenu } = renderDateRangePicker({
-          start: newUTC(2023, Month.March, 10),
+          value: [newUTC(2023, Month.March, 10), null],
         });
         const { calendarGrids } = openMenu();
         expect(calendarGrids?.[0]).toHaveAttribute('aria-label', 'March 2023');
@@ -121,7 +125,7 @@ describe('packages/date-picker/date-range-picker', () => {
 
       test('renders the appropriate number of cells', () => {
         const { openMenu } = renderDateRangePicker({
-          start: newUTC(2024, Month.February, 14),
+          value: [newUTC(2024, Month.February, 14), null],
         });
         const { calendarCells } = openMenu();
         expect(calendarCells).toHaveLength(29 + 31);
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
index 5beb7234db..cb2aafad29 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
@@ -12,10 +12,10 @@ import {
   DatePickerProvider,
 } from '../DatePickerContext';
 import { Locales, TimeZones } from '../testUtils';
+import { DateRangeType } from '../types';
 import { newUTC } from '../utils';
 
 import { DateRangePicker } from './DateRangePicker';
-import { DateRangeType } from './DateRangePicker.types';
 
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
   <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
@@ -80,22 +80,9 @@ const meta: StoryMetaType<typeof DateRangePicker, DatePickerContextProps> = {
 export default meta;
 
 export const Basic: StoryFn<typeof DateRangePicker> = props => {
-  const [start, setStart] = useState<Date | null | undefined>();
-  const [end, setEnd] = useState<Date | null | undefined>();
+  const [range, setRange] = useState<DateRangeType>();
 
-  const setRange = (range?: DateRangeType) => {
-    setStart(range?.[0]);
-    setEnd(range?.[1]);
-  };
-
-  return (
-    <DateRangePicker
-      {...props}
-      start={start}
-      end={end}
-      onRangeChange={setRange}
-    />
-  );
+  return <DateRangePicker {...props} value={range} onChange={setRange} />;
 };
 
 // export const Uncontrolled: StoryFn<typeof DateRangePicker> = props => {
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
index 4d0c6b32f9..dd76954281 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
@@ -10,11 +10,9 @@ import { DateRangePickerProps } from './DateRangePicker.types';
 export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
   (
     {
-      start: startProp,
-      initialStart: initialStartProp,
-      end: endProp,
-      initialEnd: initialEndProp,
-      onRangeChange,
+      value: rangeProp,
+      initialValue: initialProp,
+      onChange,
       showQuickSelection,
       ...props
     }: DateRangePickerProps,
@@ -23,9 +21,9 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
     const [contextProps, restProps] = pickAndOmit(props, contextPropNames);
 
     const { value: range, setValue: setRange } = useControlledValue(
-      [startProp || null, endProp || null],
-      onRangeChange,
-      [initialStartProp || null, initialEndProp || null],
+      rangeProp,
+      onChange,
+      initialProp,
     );
 
     return (
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts b/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts
index 61b6e5be45..4e0ae1ba90 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts
@@ -1,15 +1,12 @@
 import { MouseEventHandler } from 'react';
 
-import { BaseDatePickerProps, DateType } from '../types';
-
-export type DateRangeType = [DateType, DateType];
+import { BaseDatePickerProps, DateRangeType } from '../types';
 
 export interface DateRangePickerProps extends BaseDatePickerProps {
-  /** The selected start date */
-  start?: DateType;
-
-  /**  The selected end date */
-  end?: DateType;
+  /**
+   * The selected start & end date
+   */
+  value?: DateRangeType;
 
   /**
    * Callback fired when the “Apply” button is clicked, or when either the start or end date changes. If either start or end is unset, then that value will be null.
@@ -19,13 +16,14 @@ export interface DateRangePickerProps extends BaseDatePickerProps {
    *
    * Callback date arguments will be in Date objects in UTC time, or null
    */
-  onRangeChange?: (range?: DateRangeType) => void;
+  onChange?: (range?: DateRangeType) => void;
 
-  /** The initial selected start date. Ignored if `start` is provided */
-  initialStart?: DateType;
-
-  /** The initial selected end date. Ignored if `end` is provided */
-  initialEnd?: DateType;
+  /**
+   * The initial selected start & end dates.
+   *
+   * A given initial index is ignored if `range[x]` is defined
+   */
+  initialValue?: DateRangeType;
 
   // TODO: onSegmentChange: () => {};
 
@@ -37,7 +35,7 @@ export interface DateRangePickerProps extends BaseDatePickerProps {
    *
    * Callback date arguments will be in Date objects in UTC time, or null
    */
-  handleValidation?: (range: DateRangeType) => void;
+  handleValidation?: (range?: DateRangeType) => void;
 
   /** Callback fired when the “clear” button is clicked. */
   onClear?: MouseEventHandler;
diff --git a/packages/date-picker/src/index.ts b/packages/date-picker/src/index.ts
index adee6daa2b..fda2104d4f 100644
--- a/packages/date-picker/src/index.ts
+++ b/packages/date-picker/src/index.ts
@@ -1 +1,3 @@
 export { DatePicker, type DatePickerProps } from './DatePicker';
+export { DateRangePicker, type DateRangePickerProps } from './DateRangePicker';
+export { type DateRangeType, type DateType } from './types';
diff --git a/packages/date-picker/src/types.ts b/packages/date-picker/src/types.ts
index b127208654..ec8bde23e0 100644
--- a/packages/date-picker/src/types.ts
+++ b/packages/date-picker/src/types.ts
@@ -9,6 +9,7 @@ export type DatePickerState =
   (typeof DatePickerState)[keyof typeof DatePickerState];
 
 export type DateType = Date | null;
+export type DateRangeType = [DateType, DateType];
 
 export interface BaseDatePickerProps extends DarkModeProps {
   /**

From 2d870c493b21097d38feb7c975e07a52b8038e73 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 9 Oct 2023 14:38:40 -0400
Subject: [PATCH 199/351] update calendar rendering

---
 .../DateRangeComponent/DateRangeComponent.tsx | 21 ++++++++-----
 .../DateRangeComponent.types.ts               | 10 +++++--
 .../DateRangeInput/DateRangeInput.tsx         |  4 +--
 .../DateRangeMenuCalendars.tsx                | 23 +++++---------
 .../DateRangeMenuContext.tsx                  | 30 ++++++++++---------
 .../DateRangeMenuProvider.tsx                 | 15 +++++-----
 .../DateRangePicker/DateRangePicker.spec.tsx  | 26 ++++++++--------
 .../DateRangePicker.stories.tsx               | 11 ++++---
 .../src/DateRangePicker/DateRangePicker.tsx   |  6 ++--
 .../src/utils/addMonthsUTC/index.ts           |  7 +++++
 packages/date-picker/src/utils/index.ts       |  1 +
 11 files changed, 85 insertions(+), 69 deletions(-)
 create mode 100644 packages/date-picker/src/utils/addMonthsUTC/index.ts

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
index ba856c94e9..5a350ba2cf 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
@@ -8,13 +8,18 @@ import { DateRangeComponentProps } from './DateRangeComponent.types';
 export const DateRangeComponent = forwardRef<
   HTMLDivElement,
   DateRangeComponentProps
->(({ ...rest }: DateRangeComponentProps, fwdRef) => {
-  return (
-    <>
-      <DateRangeInput ref={fwdRef} {...rest} />
-      <DateRangeMenu />
-    </>
-  );
-});
+>(
+  (
+    { value, setValue, onCancel, onClear, ...rest }: DateRangeComponentProps,
+    fwdRef,
+  ) => {
+    return (
+      <>
+        <DateRangeInput value={value} ref={fwdRef} {...rest} />
+        <DateRangeMenu value={value} />
+      </>
+    );
+  },
+);
 
 DateRangeComponent.displayName = 'DateRangeComponent';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
index 6bf1d0996a..266e4887bf 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
@@ -1,8 +1,12 @@
+import { contextPropNames } from '../../DatePickerContext';
+import { useControlledValue } from '../../hooks/useControlledValue';
 import { DateRangeType } from '../../types';
 import { DateRangePickerProps } from '../DateRangePicker.types';
 
 export interface DateRangeComponentProps
-  extends Pick<DateRangePickerProps, 'showQuickSelection'> {
-  range?: DateRangeType;
-  setRange: (newVal?: DateRangeType | undefined) => void;
+  extends Omit<
+    DateRangePickerProps,
+    (typeof contextPropNames)[number] | 'onChange'
+  > {
+  setValue: ReturnType<typeof useControlledValue<DateRangeType>>['setValue'];
 }
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index 7127d1da9c..8e653af508 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -99,9 +99,9 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
         {...rest}
       >
         <div className={inputWrapperStyles}>
-          <DateInputBox segmentRefs={startSegmentRefs} />
+          <DateInputBox value={value?.[0]} segmentRefs={startSegmentRefs} />
           <span>{EN_DASH}</span>
-          <DateInputBox segmentRefs={endSegmentRefs} />
+          <DateInputBox value={value?.[1]} segmentRefs={endSegmentRefs} />
         </div>
       </DateFormField>
     );
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index d7c2017e5c..0c020e8c8a 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -20,25 +20,18 @@ import {
 } from './DateRangeMenuCalendars.styles';
 
 export const DateRangeMenuCalendars = forwardRef<HTMLDivElement, {}>(() => {
-  const {
-    startMonth,
-    // setStartMonth,
-    startCellRefs,
-    endMonth,
-    // setEndMonth,
-    endCellRefs,
-    today,
-  } = useDateRangeMenuContext();
+  const { month, nextMonth, startCellRefs, endCellRefs, today } =
+    useDateRangeMenuContext();
 
   return (
     <div className={calendarsFrameStyles}>
       <div className={calendarsContainerStyles}>
         <CalendarGrid
           // ref={startCalendarRef}
-          month={startMonth}
+          month={month}
           // className={menuCalendarGridStyles}
           // onKeyDown={handleCalendarKeyDown}
-          aria-label={getFullMonthLabel(startMonth)}
+          aria-label={getFullMonthLabel(month)}
         >
           {(day, i) => (
             <CalendarCell
@@ -58,10 +51,10 @@ export const DateRangeMenuCalendars = forwardRef<HTMLDivElement, {}>(() => {
 
         <CalendarGrid
           // ref={endCalendarRef}
-          month={endMonth}
+          month={nextMonth}
           // className={menuCalendarGridStyles}
           // onKeyDown={handleCalendarKeyDown}
-          aria-label={getFullMonthLabel(endMonth)}
+          aria-label={getFullMonthLabel(nextMonth)}
         >
           {(day, i) => (
             <CalendarCell
@@ -85,11 +78,11 @@ export const DateRangeMenuCalendars = forwardRef<HTMLDivElement, {}>(() => {
           <IconButton aria-label="Previous month">
             <Icon glyph="ChevronLeft" />
           </IconButton>
-          <Subtitle>{getFullMonthLabel(startMonth)}</Subtitle>
+          <Subtitle>{getFullMonthLabel(month)}</Subtitle>
         </div>
 
         <div className={calendarHeaderStyles}>
-          <Subtitle>{getFullMonthLabel(endMonth)}</Subtitle>
+          <Subtitle>{getFullMonthLabel(nextMonth)}</Subtitle>
           <IconButton aria-label="Next month">
             <Icon glyph="ChevronRight" />
           </IconButton>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
index 25b70e5462..8cb33e9a02 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
@@ -3,21 +3,24 @@ import React, { createContext, useContext } from 'react';
 import { DynamicRefGetter } from '@leafygreen-ui/hooks';
 
 export interface DateRangeMenuContextProps {
-  /** The month displayed on the left */
-  startMonth: Date;
+  /**
+   * The month displayed on the left
+   */
+  month: Date;
 
-  /** Setter for the start month */
-  setStartMonth: React.Dispatch<React.SetStateAction<Date>>;
+  /**
+   * Setter for the displayed month
+   */
+  setMonth: React.Dispatch<React.SetStateAction<Date>>;
+
+  /**
+   * The month displayed on the right
+   */
+  nextMonth: Date;
 
   /** A dynamic ref setter/getter for the start calendar cells */
   startCellRefs: DynamicRefGetter<HTMLTableCellElement>;
 
-  /** The month displayed on the right */
-  endMonth: Date;
-
-  /** Setter for the end month */
-  setEndMonth: React.Dispatch<React.SetStateAction<Date>>;
-
   /** A dynamic ref setter/getter for the end calendar cells */
   endCellRefs: DynamicRefGetter<HTMLTableCellElement>;
 
@@ -26,11 +29,10 @@ export interface DateRangeMenuContextProps {
 }
 
 export const DateRangeMenuContext = createContext<DateRangeMenuContextProps>({
-  startMonth: new Date(),
-  setStartMonth: () => {},
+  month: new Date(),
+  nextMonth: new Date(),
+  setMonth: () => {},
   startCellRefs: (() => undefined) as DynamicRefGetter<HTMLTableCellElement>,
-  endMonth: new Date(),
-  setEndMonth: () => {},
   endCellRefs: (() => undefined) as DynamicRefGetter<HTMLTableCellElement>,
 });
 
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
index fd80b98333..7d55d40a3c 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
@@ -4,6 +4,7 @@ import { addMonths } from 'date-fns';
 import { useDynamicRefs } from '@leafygreen-ui/hooks';
 
 import { getFirstOfMonth, setToUTCMidnight } from '../../../utils';
+import { addMonthsUTC } from '../../../utils';
 import { DateRangeMenuProps } from '../DateRangeMenu.types';
 
 import { DateRangeMenuContext } from './DateRangeMenuContext';
@@ -21,12 +22,11 @@ export const DateRangeMenuProvider = ({
   children,
 }: DateRangeMenuProviderProps) => {
   const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
-  const thisMonth = useMemo(() => getFirstOfMonth(today), [today]);
 
-  const [startMonth, setStartMonth] = useState<Date>(value?.[0] ?? thisMonth);
-  const [endMonth, setEndMonth] = useState<Date>(
-    value?.[1] ?? addMonths(thisMonth, 1),
+  const [month, setMonth] = useState<Date>(
+    getFirstOfMonth(value?.[0] ?? today),
   );
+  const nextMonth = useMemo<Date>(() => addMonthsUTC(month, 1), [month]);
 
   const startCellRefs = useDynamicRefs<HTMLTableCellElement>();
   const endCellRefs = useDynamicRefs<HTMLTableCellElement>();
@@ -34,11 +34,10 @@ export const DateRangeMenuProvider = ({
   return (
     <DateRangeMenuContext.Provider
       value={{
-        startMonth,
-        setStartMonth,
+        month,
+        nextMonth,
+        setMonth,
         startCellRefs,
-        endMonth,
-        setEndMonth,
         endCellRefs,
         today,
       }}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index a1c051f3c0..15413c7e6f 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -64,12 +64,13 @@ describe('packages/date-picker/date-range-picker', () => {
           newUTC(2023, Month.February, 14),
         ],
       });
-      expect(inputElements[0]).toEqual('05');
-      expect(inputElements[1]).toEqual('01');
-      expect(inputElements[2]).toEqual('2023');
-      expect(inputElements[3]).toEqual('14');
-      expect(inputElements[4]).toEqual('02');
-      expect(inputElements[5]).toEqual('2023');
+      expect(inputElements[0].value).toEqual('2023');
+      expect(inputElements[1].value).toEqual('01');
+      expect(inputElements[2].value).toEqual('05');
+
+      expect(inputElements[3].value).toEqual('2023');
+      expect(inputElements[4].value).toEqual('02');
+      expect(inputElements[5].value).toEqual('14');
     });
 
     test('renders `initialStart` & `initialEnd` prop', () => {
@@ -79,12 +80,13 @@ describe('packages/date-picker/date-range-picker', () => {
           newUTC(2023, Month.August, 10),
         ],
       });
-      expect(inputElements[0]).toEqual('05');
-      expect(inputElements[1]).toEqual('07');
-      expect(inputElements[2]).toEqual('2023');
-      expect(inputElements[3]).toEqual('10');
-      expect(inputElements[4]).toEqual('08');
-      expect(inputElements[5]).toEqual('2023');
+      expect(inputElements[0].value).toEqual('2023');
+      expect(inputElements[1].value).toEqual('07');
+      expect(inputElements[2].value).toEqual('05');
+
+      expect(inputElements[3].value).toEqual('2023');
+      expect(inputElements[4].value).toEqual('08');
+      expect(inputElements[5].value).toEqual('10');
     });
 
     describe('Menu', () => {
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
index cb2aafad29..d3019b94f6 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
@@ -80,13 +80,16 @@ const meta: StoryMetaType<typeof DateRangePicker, DatePickerContextProps> = {
 export default meta;
 
 export const Basic: StoryFn<typeof DateRangePicker> = props => {
-  const [range, setRange] = useState<DateRangeType>();
+  const [range, setRange] = useState<DateRangeType | undefined>([
+    newUTC(2023, Month.October, 14),
+    newUTC(2023, Month.December, 26),
+  ]);
 
   return <DateRangePicker {...props} value={range} onChange={setRange} />;
 };
 
-// export const Uncontrolled: StoryFn<typeof DateRangePicker> = props => {
-//   return <DateRangePicker {...props} />;
-// };
+export const Uncontrolled: StoryFn<typeof DateRangePicker> = props => {
+  return <DateRangePicker {...props} />;
+};
 
 // export const Generated = () => {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
index dd76954281..ef6b0236cb 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
@@ -20,7 +20,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
   ) => {
     const [contextProps, restProps] = pickAndOmit(props, contextPropNames);
 
-    const { value: range, setValue: setRange } = useControlledValue(
+    const { value, setValue } = useControlledValue(
       rangeProp,
       onChange,
       initialProp,
@@ -30,8 +30,8 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
       <DatePickerProvider value={contextProps}>
         <DateRangeComponent
           ref={fwdRef}
-          range={range}
-          setRange={setRange}
+          value={value}
+          setValue={setValue}
           showQuickSelection={showQuickSelection}
           {...restProps}
         />
diff --git a/packages/date-picker/src/utils/addMonthsUTC/index.ts b/packages/date-picker/src/utils/addMonthsUTC/index.ts
new file mode 100644
index 0000000000..361c3b4c57
--- /dev/null
+++ b/packages/date-picker/src/utils/addMonthsUTC/index.ts
@@ -0,0 +1,7 @@
+import { setUTCMonth } from '../setUTCMonth';
+
+export const addMonthsUTC = (date: Date, months: number): Date => {
+  const utcMonth = date.getUTCMonth();
+  const newDate = setUTCMonth(date, utcMonth + months);
+  return newDate;
+};
diff --git a/packages/date-picker/src/utils/index.ts b/packages/date-picker/src/utils/index.ts
index ae08549a5a..44e9fb8274 100644
--- a/packages/date-picker/src/utils/index.ts
+++ b/packages/date-picker/src/utils/index.ts
@@ -1,3 +1,4 @@
+export { addMonthsUTC } from './addMonthsUTC';
 export { cloneReverse } from './cloneReverse';
 export { getDaysInUTCMonth } from './getDaysInUTCMonth';
 export { getFirstEmptySegment } from './getFirstEmptySegment';

From 91aa96dd6be4f0b235ed9e271110eb0fd54afb8e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 9 Oct 2023 16:04:23 -0400
Subject: [PATCH 200/351] scaffold calendar handlers

---
 .../DatePickerMenu/DatePickerMenu.tsx         |  1 +
 .../DateRangeComponent/DateRangeComponent.tsx |  6 ++-
 .../DateRangeMenu/DateRangeMenu.tsx           | 14 +++++-
 .../DateRangeMenu/DateRangeMenu.types.ts      | 11 +++--
 .../DateRangeMenuCalendars.tsx                | 47 ++++++++++++++-----
 .../DateRangeMenuProvider.tsx                 |  1 -
 .../QuickSelectionMenu/QuickSelectionMenu.tsx | 17 +++----
 7 files changed, 67 insertions(+), 30 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index a961751b62..a076db927d 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -132,6 +132,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       }
     };
 
+    // Focus trap
     const handleWrapperTabKeyPress: KeyboardEventHandler<
       HTMLDivElement
     > = e => {
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
index 5a350ba2cf..32f084386e 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
@@ -16,7 +16,11 @@ export const DateRangeComponent = forwardRef<
     return (
       <>
         <DateRangeInput value={value} ref={fwdRef} {...rest} />
-        <DateRangeMenu value={value} />
+        <DateRangeMenu
+          value={value}
+          setValue={setValue}
+          onCellClick={() => {}}
+        />
       </>
     );
   },
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index 48c96b3369..2d30ddf309 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -17,7 +17,13 @@ import { QuickSelectionMenu } from './QuickSelectionMenu';
 
 export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
   (
-    { value, onChange, showQuickSelection, ...rest }: DateRangeMenuProps,
+    {
+      value,
+      setValue,
+      onCellClick,
+      showQuickSelection,
+      ...rest
+    }: DateRangeMenuProps,
     fwdRef,
   ) => {
     const { isOpen } = useDatePickerContext();
@@ -37,7 +43,11 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
         >
           <div className={menuContentStyles}>
             {showQuickSelection && <QuickSelectionMenu />}
-            <DateRangeMenuCalendars />
+            <DateRangeMenuCalendars
+              value={value}
+              setValue={setValue}
+              onCellClick={onCellClick}
+            />
           </div>
           <DateRangeMenuFooter />
         </MenuWrapper>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
index 5826640beb..536fd85d78 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
@@ -1,10 +1,13 @@
 import { PopoverProps, PortalControlProps } from '@leafygreen-ui/popover';
 
-import { DateRangePickerProps } from '../DateRangePicker.types';
+import { DateRangeComponentProps } from '../DateRangeComponent';
 
 export type DateRangeMenuProps = PortalControlProps &
   Pick<PopoverProps, 'refEl'> &
   Pick<
-    DateRangePickerProps,
-    'value' | 'onChange' | 'showQuickSelection' | 'handleValidation' // TODO: Setter
-  > & {};
+    DateRangeComponentProps,
+    'value' | 'setValue' | 'showQuickSelection' | 'handleValidation' // TODO: Setter
+  > & {
+    /** Callback fired when a cell is clicked */
+    onCellClick: (cellDate: Date) => void;
+  };
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index 0c020e8c8a..42cd0ca4c5 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -1,15 +1,21 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, KeyboardEventHandler } from 'react';
 
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import { Subtitle } from '@leafygreen-ui/typography';
 
-import { CalendarCell, CalendarGrid } from '../../../Calendar';
+import {
+  CalendarCell,
+  CalendarCellState,
+  CalendarGrid,
+} from '../../../Calendar';
+import { useDatePickerContext } from '../../../DatePickerContext';
 import {
   getFullMonthLabel,
   getUTCDateString,
   isSameUTCDay,
 } from '../../../utils';
+import { DateRangeMenuProps } from '../DateRangeMenu.types';
 import { useDateRangeMenuContext } from '../DateRangeMenuContext';
 
 import {
@@ -19,18 +25,37 @@ import {
   calendarsFrameStyles,
 } from './DateRangeMenuCalendars.styles';
 
-export const DateRangeMenuCalendars = forwardRef<HTMLDivElement, {}>(() => {
+export const DateRangeMenuCalendars = forwardRef<
+  HTMLDivElement,
+  DateRangeMenuProps
+>(({ onCellClick }) => {
+  const { isInRange } = useDatePickerContext();
+
   const { month, nextMonth, startCellRefs, endCellRefs, today } =
     useDateRangeMenuContext();
 
+  /** Creates a click handler for a specific cell date */
+  const cellClickHandlerForDay = (day: Date) => () => {
+    if (isInRange(day)) {
+      onCellClick(day);
+    }
+  };
+
+  /** Returns the current state of the cell */
+  const getCellState = (cellDay: Date | null): CalendarCellState => {
+    // TODO:
+    return CalendarCellState.Default;
+  };
+
+  /** Called on any keydown within the menu element */
+  const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {};
+
   return (
     <div className={calendarsFrameStyles}>
       <div className={calendarsContainerStyles}>
         <CalendarGrid
-          // ref={startCalendarRef}
           month={month}
-          // className={menuCalendarGridStyles}
-          // onKeyDown={handleCalendarKeyDown}
+          onKeyDown={handleCalendarKeyDown}
           aria-label={getFullMonthLabel(month)}
         >
           {(day, i) => (
@@ -40,8 +65,8 @@ export const DateRangeMenuCalendars = forwardRef<HTMLDivElement, {}>(() => {
               aria-label={getUTCDateString(day)}
               // isHighlighted={isSameUTCDay(day, highlight)}
               isCurrent={isSameUTCDay(day, today)}
-              // state={getCellState(day)}
-              // onClick={cellClickHandlerForDay(day)}
+              state={getCellState(day)}
+              onClick={cellClickHandlerForDay(day)}
               data-iso={day.toISOString()}
             >
               {day.getUTCDate()}
@@ -50,9 +75,7 @@ export const DateRangeMenuCalendars = forwardRef<HTMLDivElement, {}>(() => {
         </CalendarGrid>
 
         <CalendarGrid
-          // ref={endCalendarRef}
           month={nextMonth}
-          // className={menuCalendarGridStyles}
           // onKeyDown={handleCalendarKeyDown}
           aria-label={getFullMonthLabel(nextMonth)}
         >
@@ -63,8 +86,8 @@ export const DateRangeMenuCalendars = forwardRef<HTMLDivElement, {}>(() => {
               aria-label={getUTCDateString(day)}
               // isHighlighted={isSameUTCDay(day, highlight)}
               isCurrent={isSameUTCDay(day, today)}
-              // state={getCellState(day)}
-              // onClick={cellClickHandlerForDay(day)}
+              state={getCellState(day)}
+              onClick={cellClickHandlerForDay(day)}
               data-iso={day.toISOString()}
             >
               {day.getUTCDate()}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
index 7d55d40a3c..0ac66a949e 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
@@ -1,5 +1,4 @@
 import React, { PropsWithChildren, useMemo, useState } from 'react';
-import { addMonths } from 'date-fns';
 
 import { useDynamicRefs } from '@leafygreen-ui/hooks';
 
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
index c1a1179c51..2c6b078666 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { forwardRef } from 'react';
-import { addMonths } from 'date-fns';
-import { range } from 'lodash';
+import range from 'lodash/range';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
@@ -25,8 +24,7 @@ export const QuickSelectionMenu = forwardRef<HTMLDivElement, {}>(
   (_props, fwdRef) => {
     const { theme } = useDarkMode();
     const { min, max, isInRange } = useDatePickerContext();
-    const { startMonth, setStartMonth, setEndMonth } =
-      useDateRangeMenuContext();
+    const { month, setMonth } = useDateRangeMenuContext();
 
     // TODO: is this the right logic?
     const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
@@ -34,8 +32,7 @@ export const QuickSelectionMenu = forwardRef<HTMLDivElement, {}>(
     const updateMonth = (newMonth: Date) => {
       // TODO: refine this logic
       if (isInRange(newMonth)) {
-        setStartMonth(newMonth);
-        setEndMonth(addMonths(newMonth, 1));
+        setMonth(newMonth);
       }
     };
 
@@ -48,9 +45,9 @@ export const QuickSelectionMenu = forwardRef<HTMLDivElement, {}>(
           <Select
             {...selectElementProps}
             aria-label="Select month"
-            value={startMonth.getUTCMonth().toString()}
+            value={month.getUTCMonth().toString()}
             onChange={m => {
-              const newMonth = setUTCMonth(startMonth, Number(m));
+              const newMonth = setUTCMonth(month, Number(m));
               updateMonth(newMonth);
             }}
           >
@@ -63,9 +60,9 @@ export const QuickSelectionMenu = forwardRef<HTMLDivElement, {}>(
           <Select
             {...selectElementProps}
             aria-label="Select year"
-            value={startMonth.getUTCFullYear().toString()}
+            value={month.getUTCFullYear().toString()}
             onChange={y => {
-              const newMonth = setUTCYear(startMonth, Number(y));
+              const newMonth = setUTCYear(month, Number(y));
               updateMonth(newMonth);
             }}
           >

From 95ea4b6ab9904e24099bd33b799624bfa16087ce Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 9 Oct 2023 17:13:50 -0400
Subject: [PATCH 201/351] updates range input handlers

---
 .../DatePickerInput/DatePickerInput.tsx       | 12 +--
 .../utils/getRelativeSegment/index.ts         | 51 ++++-------
 .../DatePicker/utils/getSegmentKey/index.ts   |  5 +-
 .../index.ts                                  |  2 +
 .../DateRangeInput/DateRangeInput.tsx         | 62 +++++++++++--
 .../DateRangeMenuCalendars.tsx                | 71 +++++++++++----
 .../DateRangeMenuContext.tsx                  |  3 +-
 .../utils/getRelativeRangeSegment/index.ts    | 87 ++++++++++++++++++-
 8 files changed, 224 insertions(+), 69 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 78ca1497ea..67cce1a564 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -59,7 +59,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       // if target is not a segment, do nothing
       if (!isSegment) return;
 
-      const isInputEmpty = isZeroLike(target.value);
+      const isSegmentEmpty = isZeroLike(target.value);
       const cursorPosition = target.selectionEnd;
 
       switch (key) {
@@ -67,7 +67,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           // if input is empty,
           // or the cursor is at the beginning of the input
           // set focus to prev. input (if it exists)
-          if (isInputEmpty || cursorPosition === 0) {
+          if (isSegmentEmpty || cursorPosition === 0) {
             const segmentToFocus = getRelativeSegment('prev', {
               segment: target,
               formatParts,
@@ -85,7 +85,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           // if input is empty,
           // or the cursor is at the end of the input
           // set focus to next. input (if it exists)
-          if (isInputEmpty || cursorPosition === target.value.length) {
+          if (isSegmentEmpty || cursorPosition === target.value.length) {
             const segmentToFocus = getRelativeSegment('next', {
               segment: target,
               formatParts,
@@ -108,7 +108,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         }
 
         case keyMap.Backspace: {
-          if (isInputEmpty) {
+          if (isSegmentEmpty) {
             const segmentToFocus = getRelativeSegment('prev', {
               segment: target,
               formatParts,
@@ -139,13 +139,13 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
     /** Called when any child of DatePickerInput is blurred */
     const handleInputBlur: FocusEventHandler = e => {
-      const nextFocus = e.relatedTarget;
+      const nextFocus = e.relatedTarget as HTMLInputElement;
 
       // If the next focus is _not_ on a segment
       if (
         !Object.values(segmentRefs)
           .map(ref => ref.current)
-          .includes(nextFocus as HTMLInputElement)
+          .includes(nextFocus)
       ) {
         setIsDirty(true);
         handleValidation?.(value);
diff --git a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
index 51778ce06a..20b34c8461 100644
--- a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
@@ -2,9 +2,8 @@ import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
 import { DatePickerContextProps } from '../../../DatePickerContext';
+import { DateSegment } from '../../../hooks/useDateSegments';
 import { SegmentRefs } from '../../../hooks/useSegmentRefs';
-import { getSegmentKey } from '../getSegmentKey';
-import { getSegmentRefFromDateTimeFormatPart } from '../getSegmentRefFromDateTimeFormatPart';
 
 type RelativeDirection = 'next' | 'prev' | 'first' | 'last';
 interface GetRelativeSegmentContext {
@@ -32,24 +31,24 @@ export const getRelativeSegment = (
 
   // only the relevant segments, not separators
   const formatSegments = formatParts.filter(part => part.type !== 'literal');
+  const orderedSegmentRefs = formatSegments.map(
+    ({ type }) => segmentRefs[type as DateSegment],
+  );
+
+  const currentSegmentIndex: number | undefined = orderedSegmentRefs.findIndex(
+    ref => ref.current === segment,
+  );
 
   switch (direction) {
     case 'first': {
-      const firstSegmentRef = getSegmentRefFromDateTimeFormatPart(
-        formatSegments[0],
-        segmentRefs,
-      );
+      const firstSegmentRef = orderedSegmentRefs[0];
       return firstSegmentRef;
     }
 
     case 'last': {
-      const lastSegment = last(formatSegments);
+      const lastSegmentRef = last(orderedSegmentRefs);
 
-      if (lastSegment) {
-        const lastSegmentRef = getSegmentRefFromDateTimeFormatPart(
-          lastSegment,
-          segmentRefs,
-        );
+      if (lastSegmentRef) {
         return lastSegmentRef;
       }
 
@@ -57,22 +56,13 @@ export const getRelativeSegment = (
     }
 
     case 'next': {
-      const currentSegmentKey = getSegmentKey(segment, segmentRefs);
-
-      if (currentSegmentKey) {
-        const currentSegmentIndex = formatSegments.findIndex(
-          p => p.type === currentSegmentKey,
-        );
-
+      if (currentSegmentIndex) {
         const nextSegmentIndex = Math.min(
           currentSegmentIndex + 1,
-          formatSegments.length - 1,
+          orderedSegmentRefs.length - 1,
         );
 
-        const nextSegmentRef = getSegmentRefFromDateTimeFormatPart(
-          formatSegments[nextSegmentIndex],
-          segmentRefs,
-        );
+        const nextSegmentRef = orderedSegmentRefs[nextSegmentIndex];
         return nextSegmentRef;
       }
 
@@ -80,19 +70,10 @@ export const getRelativeSegment = (
     }
 
     case 'prev': {
-      const currentSegmentKey = getSegmentKey(segment, segmentRefs);
-
-      if (currentSegmentKey) {
-        const currentSegmentIndex = formatSegments.findIndex(
-          p => p.type === currentSegmentKey,
-        );
-
+      if (currentSegmentIndex) {
         const prevSegmentIndex = Math.max(currentSegmentIndex - 1, 0);
 
-        const prevSegmentRef = getSegmentRefFromDateTimeFormatPart(
-          formatSegments[prevSegmentIndex],
-          segmentRefs,
-        );
+        const prevSegmentRef = orderedSegmentRefs[prevSegmentIndex];
         return prevSegmentRef;
       }
 
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
index 329eb3cee3..1be0cef9e7 100644
--- a/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
@@ -1,6 +1,9 @@
 import { SegmentRefs } from '../../../hooks/useSegmentRefs';
 
-/** Returns the key of a given segment ref or element */
+/**
+ * Returns the key of a given segment ref or element
+ * @deprecated
+ */
 export const getSegmentKey = (
   segment: HTMLInputElement | React.RefObject<HTMLInputElement>,
   segmentRefs: SegmentRefs,
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
index 5b2755dcc7..c75967c46e 100644
--- a/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
@@ -6,6 +6,8 @@ import { SegmentRefs } from '../../../hooks/useSegmentRefs';
 /**
  * Given a {@link Intl.DateTimeFormatPart},
  * return the segmentRefs entry with the same type
+ *
+ * @deprecated
  */
 export const getSegmentRefFromDateTimeFormatPart = (
   formatPart: Intl.DateTimeFormatPart | undefined,
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index 8e653af508..ad64f65d6d 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -1,4 +1,5 @@
 import React, {
+  FocusEventHandler,
   forwardRef,
   KeyboardEventHandler,
   MouseEventHandler,
@@ -24,7 +25,8 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
     { value, onChange, handleValidation, ...rest }: DateRangeInputProps,
     fwdRef,
   ) => {
-    const { disabled, formatParts, setOpen } = useDatePickerContext();
+    const { disabled, formatParts, setOpen, setIsDirty } =
+      useDatePickerContext();
 
     const startSegmentRefs = useSegmentRefs();
     const endSegmentRefs = useSegmentRefs();
@@ -54,25 +56,51 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
       // if target is not a segment, do nothing
       if (!isSegment) return;
 
-      const isInputEmpty = isZeroLike(target.value);
+      const isSegmentEmpty = isZeroLike(target.value);
       const cursorPosition = target.selectionEnd;
 
+      const ctx = {
+        target,
+        formatParts,
+        rangeSegmentRefs: [startSegmentRefs, endSegmentRefs],
+      };
+
       switch (key) {
         case keyMap.ArrowLeft:
-          // TODO:
-          getRelativeRangeSegment();
+          // If the segment is empty,
+          // or if the cursor is at the beginning of the input,
+          // set focus to prev
+          if (isSegmentEmpty || cursorPosition === 0) {
+            const prevSegment = getRelativeRangeSegment('prev', ctx);
+
+            prevSegment?.current?.focus();
+          }
+
           break;
         case keyMap.ArrowRight:
-          // TODO:
+          // If the segment is empty,
+          // or if the cursor is at the end of the input,
+          // set focus to prev
+          if (isSegmentEmpty || cursorPosition === target.value.length) {
+            const nextSegment = getRelativeRangeSegment('next', ctx);
+
+            nextSegment?.current?.focus();
+          }
           break;
         case keyMap.ArrowDown:
-          // TODO:
-          break;
         case keyMap.ArrowUp:
-          // TODO:
+          {
+            // if decrementing the segment's value is in range
+            // decrement that segment value
+            // This is the default `input type=number` behavior
+          }
           break;
+
         case keyMap.Backspace: {
-          // TODO:
+          if (isSegmentEmpty) {
+            const prevSegment = getRelativeRangeSegment('prev', ctx);
+            prevSegment?.current?.focus();
+          }
           break;
         }
 
@@ -91,11 +119,27 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
       }
     };
 
+    /** Called when any child of DatePickerInput is blurred */
+    const handleInputBlur: FocusEventHandler = e => {
+      const nextFocus = e.relatedTarget as HTMLInputElement;
+
+      // If the next focus is _not_ on a segment
+      if (
+        ![startSegmentRefs, endSegmentRefs]
+          .flatMap(refs => Object.values(refs).map(ref => ref.current))
+          .includes(nextFocus)
+      ) {
+        setIsDirty(true);
+        handleValidation?.(value);
+      }
+    };
+
     return (
       <DateFormField
         ref={fwdRef}
         onKeyDown={handleKeyDown}
         onInputClick={handleInputClick}
+        onBlur={handleInputBlur}
         {...rest}
       >
         <div className={inputWrapperStyles}>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index 42cd0ca4c5..df1c3e4fe5 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, KeyboardEventHandler } from 'react';
+import React, { forwardRef, KeyboardEventHandler, useState } from 'react';
 
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
@@ -10,10 +10,12 @@ import {
   CalendarGrid,
 } from '../../../Calendar';
 import { useDatePickerContext } from '../../../DatePickerContext';
+import { DateType } from '../../../types';
 import {
   getFullMonthLabel,
   getUTCDateString,
   isSameUTCDay,
+  isSameUTCMonth,
 } from '../../../utils';
 import { DateRangeMenuProps } from '../DateRangeMenu.types';
 import { useDateRangeMenuContext } from '../DateRangeMenuContext';
@@ -28,11 +30,50 @@ import {
 export const DateRangeMenuCalendars = forwardRef<
   HTMLDivElement,
   DateRangeMenuProps
->(({ onCellClick }) => {
+>(({ value, onCellClick }) => {
   const { isInRange } = useDatePickerContext();
+  const {
+    month,
+    nextMonth,
+    setMonth: setDisplayMonth,
+    startCellRefs,
+    endCellRefs,
+    today,
+  } = useDateRangeMenuContext();
 
-  const { month, nextMonth, startCellRefs, endCellRefs, today } =
-    useDateRangeMenuContext();
+  const [highlight, setHighlight] = useState<DateType>(
+    value ? value[0] : today,
+  );
+
+  /** setDisplayMonth with side effects */
+  const updateMonth = (newMonth: Date) => {
+    if (isSameUTCMonth(newMonth, month)) {
+      return;
+    }
+
+    // const newHighlight = getNewHighlight(highlight, month, newMonth);
+    // const shouldUpdateHighlight = !isSameUTCDay(highlight, newHighlight);
+
+    // if (newHighlight && shouldUpdateHighlight) {
+    //   setHighlight(newHighlight);
+    // }
+
+    setDisplayMonth(newMonth);
+  };
+
+  /** setHighlight with side effects */
+  const updateHighlight = (newHighlight: Date) => {
+    // change month if nextHighlight is different than `month` or `nextMonth`
+    if (
+      !isSameUTCMonth(month, newHighlight) &&
+      !isSameUTCMonth(nextMonth, newHighlight)
+    ) {
+      setDisplayMonth(newHighlight);
+    }
+
+    // keep track of the highlighted cell
+    setHighlight(newHighlight);
+  };
 
   /** Creates a click handler for a specific cell date */
   const cellClickHandlerForDay = (day: Date) => () => {
@@ -48,22 +89,24 @@ export const DateRangeMenuCalendars = forwardRef<
   };
 
   /** Called on any keydown within the menu element */
-  const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {};
+  const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {
+    // TODO:
+  };
 
   return (
     <div className={calendarsFrameStyles}>
-      <div className={calendarsContainerStyles}>
-        <CalendarGrid
-          month={month}
-          onKeyDown={handleCalendarKeyDown}
-          aria-label={getFullMonthLabel(month)}
-        >
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div
+        className={calendarsContainerStyles}
+        onKeyDown={handleCalendarKeyDown}
+      >
+        <CalendarGrid month={month} aria-label={getFullMonthLabel(month)}>
           {(day, i) => (
             <CalendarCell
               key={i}
               ref={startCellRefs(day.toISOString())}
               aria-label={getUTCDateString(day)}
-              // isHighlighted={isSameUTCDay(day, highlight)}
+              isHighlighted={isSameUTCDay(day, highlight)}
               isCurrent={isSameUTCDay(day, today)}
               state={getCellState(day)}
               onClick={cellClickHandlerForDay(day)}
@@ -76,7 +119,6 @@ export const DateRangeMenuCalendars = forwardRef<
 
         <CalendarGrid
           month={nextMonth}
-          // onKeyDown={handleCalendarKeyDown}
           aria-label={getFullMonthLabel(nextMonth)}
         >
           {(day, i) => (
@@ -84,7 +126,7 @@ export const DateRangeMenuCalendars = forwardRef<
               key={i}
               ref={endCellRefs(day.toISOString())}
               aria-label={getUTCDateString(day)}
-              // isHighlighted={isSameUTCDay(day, highlight)}
+              isHighlighted={isSameUTCDay(day, highlight)}
               isCurrent={isSameUTCDay(day, today)}
               state={getCellState(day)}
               onClick={cellClickHandlerForDay(day)}
@@ -95,7 +137,6 @@ export const DateRangeMenuCalendars = forwardRef<
           )}
         </CalendarGrid>
       </div>
-
       <div className={calendarHeadersContainerStyle}>
         <div className={calendarHeaderStyles}>
           <IconButton aria-label="Previous month">
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
index 8cb33e9a02..81417937e9 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
@@ -25,7 +25,7 @@ export interface DateRangeMenuContextProps {
   endCellRefs: DynamicRefGetter<HTMLTableCellElement>;
 
   /** Memoized reference for Date.now */
-  today?: Date;
+  today: Date;
 }
 
 export const DateRangeMenuContext = createContext<DateRangeMenuContextProps>({
@@ -34,6 +34,7 @@ export const DateRangeMenuContext = createContext<DateRangeMenuContextProps>({
   setMonth: () => {},
   startCellRefs: (() => undefined) as DynamicRefGetter<HTMLTableCellElement>,
   endCellRefs: (() => undefined) as DynamicRefGetter<HTMLTableCellElement>,
+  today: new Date(),
 });
 
 /** Hook to access {@link DateRangeMenuContextProps} */
diff --git a/packages/date-picker/src/DateRangePicker/utils/getRelativeRangeSegment/index.ts b/packages/date-picker/src/DateRangePicker/utils/getRelativeRangeSegment/index.ts
index b0228d89a8..13f1bc40f0 100644
--- a/packages/date-picker/src/DateRangePicker/utils/getRelativeRangeSegment/index.ts
+++ b/packages/date-picker/src/DateRangePicker/utils/getRelativeRangeSegment/index.ts
@@ -1,3 +1,86 @@
-export const getRelativeRangeSegment = () => {
-  //TODO:
+import React from 'react';
+import isUndefined from 'lodash/isUndefined';
+import last from 'lodash/last';
+import { DateSegment } from 'src/hooks/useDateSegments';
+
+import { DatePickerContextProps } from '../../../DatePickerContext';
+import { SegmentRefs } from '../../../hooks/useSegmentRefs';
+
+type RelativeDirection = 'next' | 'prev' | 'first' | 'last';
+interface GetRelativeSegmentContext {
+  target: HTMLInputElement | React.RefObject<HTMLInputElement>;
+  formatParts: DatePickerContextProps['formatParts'];
+  rangeSegmentRefs: Array<SegmentRefs>;
+}
+
+export const getRelativeRangeSegment = (
+  direction: RelativeDirection,
+  { target, formatParts, rangeSegmentRefs }: GetRelativeSegmentContext,
+): React.RefObject<HTMLInputElement> | undefined => {
+  if (
+    isUndefined(direction) ||
+    isUndefined(target) ||
+    isUndefined(formatParts) ||
+    isUndefined(rangeSegmentRefs)
+  ) {
+    return;
+  }
+
+  // only the relevant segments, not separators
+  const formatSegments = formatParts.filter(part => part.type !== 'literal');
+
+  const orderedSegmentRefs = rangeSegmentRefs.flatMap(segmentRefs =>
+    formatSegments.map(({ type }) => segmentRefs[type as DateSegment]),
+  );
+
+  const currentSegmentIndex: number | undefined = orderedSegmentRefs.findIndex(
+    ref => ref.current === target,
+  );
+
+  switch (direction) {
+    case 'first': {
+      const firstSegmentRef = orderedSegmentRefs[0];
+      return firstSegmentRef;
+    }
+
+    case 'last': {
+      const lastSegmentRef = last(orderedSegmentRefs);
+
+      if (lastSegmentRef) {
+        return lastSegmentRef;
+      }
+
+      break;
+    }
+
+    case 'next': {
+      if (!isUndefined(currentSegmentIndex)) {
+        const nextSegmentIndex = Math.min(
+          currentSegmentIndex + 1,
+          orderedSegmentRefs.length - 1,
+        );
+
+        const nextSegmentRef = orderedSegmentRefs[nextSegmentIndex];
+
+        return nextSegmentRef;
+      }
+
+      break;
+    }
+
+    case 'prev': {
+      if (!isUndefined(currentSegmentIndex)) {
+        const prevSegmentIndex = Math.max(currentSegmentIndex - 1, 0);
+
+        const prevSegmentRef = orderedSegmentRefs[prevSegmentIndex];
+
+        return prevSegmentRef;
+      }
+
+      break;
+    }
+
+    default:
+      break;
+  }
 };

From b0aac8daec95bf346e66309e3f09dcd2586df668 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 9 Oct 2023 17:39:28 -0400
Subject: [PATCH 202/351] input handlers

---
 .../DateRangeComponent/DateRangeComponent.tsx | 53 +++++++++++++++++--
 .../DateRangeInput/DateRangeInput.tsx         | 35 +++++++-----
 .../DateRangeInput/DateRangeInput.types.ts    |  6 +--
 .../DateRangeMenu/DateRangeMenu.tsx           | 14 +----
 .../DateRangeMenu/DateRangeMenu.types.ts      |  5 +-
 .../DateRangeMenuCalendars.styles.ts          |  2 +-
 .../DateRangeMenuCalendars.tsx                |  4 +-
 7 files changed, 80 insertions(+), 39 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
index 32f084386e..4d5c342b17 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
@@ -1,5 +1,9 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 
+import { useBackdropClick, useForwardedRef } from '@leafygreen-ui/hooks';
+
+import { useDatePickerContext } from '../../DatePickerContext';
+import { DateRangeType } from '../../types';
 import { DateRangeInput } from '../DateRangeInput';
 import { DateRangeMenu } from '../DateRangeMenu';
 
@@ -10,16 +14,55 @@ export const DateRangeComponent = forwardRef<
   DateRangeComponentProps
 >(
   (
-    { value, setValue, onCancel, onClear, ...rest }: DateRangeComponentProps,
+    {
+      value,
+      setValue,
+      onCancel,
+      onClear,
+      showQuickSelection,
+      ...rest
+    }: DateRangeComponentProps,
     fwdRef,
   ) => {
+    const { isOpen, setOpen, isDirty, setIsDirty, menuId } =
+      useDatePickerContext();
+    const closeMenu = () => setOpen(false);
+
+    const formFieldRef = useForwardedRef(fwdRef, null);
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    /** setValue with possible side effects */
+    const updateValue = (newVal?: DateRangeType) => {
+      setValue(newVal);
+    };
+
+    useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
+
+    /** Called when the input's start or end value has changed */
+    const handleInputValueChange = (newRange?: DateRangeType) => {
+      // TODO: more logic here
+      updateValue(newRange);
+    };
+
+    /** Called when any calendar cell is clicked */
+    const handleCalendarValueChange = (newRange?: DateRangeType) => {
+      // TODO: more logic here
+      updateValue(newRange);
+    };
+
     return (
       <>
-        <DateRangeInput value={value} ref={fwdRef} {...rest} />
+        <DateRangeInput
+          value={value}
+          setValue={handleInputValueChange}
+          ref={formFieldRef}
+          {...rest}
+        />
         <DateRangeMenu
+          ref={menuRef}
+          refEl={formFieldRef}
           value={value}
-          setValue={setValue}
-          onCellClick={() => {}}
+          setValue={handleCalendarValueChange}
         />
       </>
     );
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index ad64f65d6d..f6b5727246 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -11,6 +11,7 @@ import { DateInputBox } from '../../DateInput';
 import { DateFormField } from '../../DateInput/DateFormField';
 import { useDatePickerContext } from '../../DatePickerContext';
 import { useSegmentRefs } from '../../hooks/useSegmentRefs';
+import { DateType } from '../../types';
 import { isElementInputSegment, isZeroLike } from '../../utils';
 import { getRangeSegmentToFocus } from '../utils/getRangeSegmentToFocus';
 import { getRelativeRangeSegment } from '../utils/getRelativeRangeSegment';
@@ -22,7 +23,7 @@ const EN_DASH = '–';
 
 export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
   (
-    { value, onChange, handleValidation, ...rest }: DateRangeInputProps,
+    { value, setValue, handleValidation, ...rest }: DateRangeInputProps,
     fwdRef,
   ) => {
     const { disabled, formatParts, setOpen, setIsDirty } =
@@ -67,9 +68,6 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
 
       switch (key) {
         case keyMap.ArrowLeft:
-          // If the segment is empty,
-          // or if the cursor is at the beginning of the input,
-          // set focus to prev
           if (isSegmentEmpty || cursorPosition === 0) {
             const prevSegment = getRelativeRangeSegment('prev', ctx);
 
@@ -78,9 +76,6 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
 
           break;
         case keyMap.ArrowRight:
-          // If the segment is empty,
-          // or if the cursor is at the end of the input,
-          // set focus to prev
           if (isSegmentEmpty || cursorPosition === target.value.length) {
             const nextSegment = getRelativeRangeSegment('next', ctx);
 
@@ -90,9 +85,7 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
         case keyMap.ArrowDown:
         case keyMap.ArrowUp:
           {
-            // if decrementing the segment's value is in range
-            // decrement that segment value
-            // This is the default `input type=number` behavior
+            // default number input behavior
           }
           break;
 
@@ -134,6 +127,16 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
       }
     };
 
+    const handleStartInputChange = (newStart: DateType) => {
+      const end = value ? value[0] : null;
+      setValue([newStart, end]);
+    };
+
+    const handleEndInputChange = (newEnd: DateType) => {
+      const start = value ? value[0] : null;
+      setValue([start, newEnd]);
+    };
+
     return (
       <DateFormField
         ref={fwdRef}
@@ -143,9 +146,17 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
         {...rest}
       >
         <div className={inputWrapperStyles}>
-          <DateInputBox value={value?.[0]} segmentRefs={startSegmentRefs} />
+          <DateInputBox
+            value={value?.[0]}
+            setValue={handleStartInputChange}
+            segmentRefs={startSegmentRefs}
+          />
           <span>{EN_DASH}</span>
-          <DateInputBox value={value?.[1]} segmentRefs={endSegmentRefs} />
+          <DateInputBox
+            value={value?.[1]}
+            setValue={handleEndInputChange}
+            segmentRefs={endSegmentRefs}
+          />
         </div>
       </DateFormField>
     );
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
index 76fb6ece75..3051dc4b49 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
@@ -1,7 +1,7 @@
-import { DateRangePickerProps } from '../DateRangePicker.types';
+import { DateRangeComponentProps } from '../DateRangeComponent';
 
 export interface DateRangeInputProps
   extends Pick<
-    DateRangePickerProps,
-    'value' | 'onChange' | 'handleValidation'
+    DateRangeComponentProps,
+    'value' | 'setValue' | 'handleValidation'
   > {}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index 2d30ddf309..ae9f249171 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -17,13 +17,7 @@ import { QuickSelectionMenu } from './QuickSelectionMenu';
 
 export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
   (
-    {
-      value,
-      setValue,
-      onCellClick,
-      showQuickSelection,
-      ...rest
-    }: DateRangeMenuProps,
+    { value, setValue, showQuickSelection, ...rest }: DateRangeMenuProps,
     fwdRef,
   ) => {
     const { isOpen } = useDatePickerContext();
@@ -43,11 +37,7 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
         >
           <div className={menuContentStyles}>
             {showQuickSelection && <QuickSelectionMenu />}
-            <DateRangeMenuCalendars
-              value={value}
-              setValue={setValue}
-              onCellClick={onCellClick}
-            />
+            <DateRangeMenuCalendars value={value} setValue={setValue} />
           </div>
           <DateRangeMenuFooter />
         </MenuWrapper>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
index 536fd85d78..49c4976dca 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
@@ -7,7 +7,4 @@ export type DateRangeMenuProps = PortalControlProps &
   Pick<
     DateRangeComponentProps,
     'value' | 'setValue' | 'showQuickSelection' | 'handleValidation' // TODO: Setter
-  > & {
-    /** Callback fired when a cell is clicked */
-    onCellClick: (cellDate: Date) => void;
-  };
+  > & {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
index c595a70974..b29b4b3965 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
@@ -9,7 +9,7 @@ export const calendarsFrameStyles = css`
   grid-template-areas: 'header' 'calendars';
   gap: ${spacing[3]}px;
   padding: ${spacing[4]}px;
-  padding-top: ${spacing[6]}px;
+  /* padding-top: ${spacing[6]}px; */
 `;
 
 export const calendarsContainerStyles = css`
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index df1c3e4fe5..50cf0bdfa3 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -30,7 +30,7 @@ import {
 export const DateRangeMenuCalendars = forwardRef<
   HTMLDivElement,
   DateRangeMenuProps
->(({ value, onCellClick }) => {
+>(({ value, setValue }) => {
   const { isInRange } = useDatePickerContext();
   const {
     month,
@@ -78,7 +78,7 @@ export const DateRangeMenuCalendars = forwardRef<
   /** Creates a click handler for a specific cell date */
   const cellClickHandlerForDay = (day: Date) => () => {
     if (isInRange(day)) {
-      onCellClick(day);
+      // TODO:
     }
   };
 

From 0524d78f92dea10dcb58967c5e9ff874139d3d62 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 9 Oct 2023 17:53:40 -0400
Subject: [PATCH 203/351] fills out input tests

---
 .../DateRangePicker/DateRangePicker.spec.tsx  | 55 ++++++++++++++++---
 1 file changed, 48 insertions(+), 7 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 15413c7e6f..f0ed8d5c92 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import range from 'lodash/range';
 
 import { Month } from '../constants';
@@ -138,12 +139,47 @@ describe('packages/date-picker/date-range-picker', () => {
   describe('Interaction', () => {
     describe('Mouse interaction', () => {
       describe('Clicking the input', () => {
-        test.todo('opens the menu');
-        test.todo('focuses the clicked segment');
-        test.todo('focuses the first segment when all are empty');
-        test.todo('focuses the first empty segment in start input');
-        test.todo('focuses the first empty segment in end input');
-        test.todo('focuses the last segment when all are filled');
+        test('opens the menu', () => {
+          const { inputContainer, getMenuElements } = renderDateRangePicker();
+          userEvent.click(inputContainer);
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).toBeInTheDocument();
+        });
+
+        test('focuses the clicked segment', () => {
+          const { inputElements } = renderDateRangePicker();
+          userEvent.click(inputElements[2]);
+          expect(document.activeElement).toBe(inputElements[2]);
+        });
+
+        test('focuses the first segment when all are empty', () => {
+          const { inputContainer, inputElements } = renderDateRangePicker();
+          userEvent.click(inputContainer);
+          expect(document.activeElement).toBe(inputElements[0]);
+        });
+
+        test('focuses the first empty segment in start input', () => {
+          const { inputContainer, inputElements } = renderDateRangePicker();
+          userEvent.type(inputElements[0], '01');
+          userEvent.click(inputContainer);
+          expect(document.activeElement).toBe(inputElements[1]);
+        });
+
+        test('focuses the first empty segment in end input', () => {
+          const { inputContainer, inputElements } = renderDateRangePicker({
+            value: [newUTC(2023, 1, 1), null],
+          });
+          userEvent.click(inputContainer);
+          expect(document.activeElement).toBe(inputElements[3]);
+        });
+
+        test('focuses the last segment when all are filled', () => {
+          const { inputContainer, inputElements } = renderDateRangePicker({
+            value: [newUTC(2023, 1, 1), newUTC(2023, 1, 14)],
+          });
+          userEvent.click(inputContainer);
+          expect(document.activeElement).toBe(inputElements[5]);
+        });
       });
 
       describe('Clicking a calendar cell', () => {
@@ -273,7 +309,12 @@ describe('packages/date-picker/date-range-picker', () => {
     });
 
     describe('Typing', () => {
-      test.todo('opens the menu');
+      test('opens the menu', () => {
+        const { inputElements, getMenuElements } = renderDateRangePicker();
+        userEvent.type(inputElements[0], '1');
+        const { menuContainerEl } = getMenuElements();
+        expect(menuContainerEl).toBeInTheDocument();
+      });
 
       describe('into start date', () => {
         test.todo('updates segment value');

From 4d97fe814f5c0609a74016f01dc052476d6f89db Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 10 Oct 2023 12:29:50 -0400
Subject: [PATCH 204/351] move typing tests

---
 .../DateRangePicker/DateRangePicker.spec.tsx  | 91 +++++++++++--------
 1 file changed, 54 insertions(+), 37 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index f0ed8d5c92..eeb63cfe00 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -136,6 +136,60 @@ describe('packages/date-picker/date-range-picker', () => {
     });
   });
 
+  describe('Typing', () => {
+    test('opens the menu', () => {
+      const { inputElements, getMenuElements } = renderDateRangePicker();
+      userEvent.type(inputElements[0], '1');
+      const { menuContainerEl } = getMenuElements();
+      expect(menuContainerEl).toBeInTheDocument();
+    });
+
+    describe('into start date', () => {
+      test('updates segment value', () => {
+        const { inputElements } = renderDateRangePicker();
+        userEvent.type(inputElements[0], '1');
+        expect(inputElements[0].value).toBe('1'); // Not '01' if not blurred
+      });
+      test('does not fire range change handler', () => {
+        const onChange = jest.fn();
+        const { inputElements } = renderDateRangePicker({ onChange });
+        userEvent.type(inputElements[0], '1');
+        expect(onChange).not.toHaveBeenCalled();
+      });
+
+      test.skip('does not fire segment change handler', () => {
+        const onSegmentChange = jest.fn();
+        const { inputElements } = renderDateRangePicker({
+          onSegmentChange,
+        });
+        userEvent.type(inputElements[0], '1');
+        expect(onSegmentChange).not.toHaveBeenCalled();
+      });
+
+      describe('on un-focus/blur', () => {
+        test.todo('fires a change handler if the value is valid');
+        test.todo('does not fire a change handler if value is incomplete');
+        test.todo('fires a segment change handler');
+        test.todo('fires a validation handler when the value is first set');
+        test.todo('fires a validation handler when the value is updated');
+      });
+    });
+
+    describe('into end date', () => {
+      test.todo('updates segment value');
+      test.todo('does not fire range change handler');
+      test.todo('does not fire segment change handler');
+
+      describe('on un-focus/blur', () => {
+        test.todo('fires a change handler if the value is valid');
+        test.todo('does not fire a change handler if value is incomplete');
+        test.todo('fires a segment change handler');
+        test.todo('fires a validation handler when the value is first set');
+        test.todo('fires a validation handler when the value is updated');
+      });
+    });
+  });
+
   describe('Interaction', () => {
     describe('Mouse interaction', () => {
       describe('Clicking the input', () => {
@@ -307,42 +361,5 @@ describe('packages/date-picker/date-range-picker', () => {
        * many of these tests exist in the "DatePickerInput" and "DatePickerMenu" components
        */
     });
-
-    describe('Typing', () => {
-      test('opens the menu', () => {
-        const { inputElements, getMenuElements } = renderDateRangePicker();
-        userEvent.type(inputElements[0], '1');
-        const { menuContainerEl } = getMenuElements();
-        expect(menuContainerEl).toBeInTheDocument();
-      });
-
-      describe('into start date', () => {
-        test.todo('updates segment value');
-        test.todo('does not fire range change handler');
-        test.todo('does not fire segment change handler');
-
-        describe('on un-focus/blur', () => {
-          test.todo('fires a change handler if the value is valid');
-          test.todo('does not fire a change handler if value is incomplete');
-          test.todo('fires a segment change handler');
-          test.todo('fires a validation handler when the value is first set');
-          test.todo('fires a validation handler when the value is updated');
-        });
-      });
-
-      describe('into end date', () => {
-        test.todo('updates segment value');
-        test.todo('does not fire range change handler');
-        test.todo('does not fire segment change handler');
-
-        describe('on un-focus/blur', () => {
-          test.todo('fires a change handler if the value is valid');
-          test.todo('does not fire a change handler if value is incomplete');
-          test.todo('fires a segment change handler');
-          test.todo('fires a validation handler when the value is first set');
-          test.todo('fires a validation handler when the value is updated');
-        });
-      });
-    });
   });
 });

From 6b4ce05033035d8848446735539a2b879d722026 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 10 Oct 2023 12:42:16 -0400
Subject: [PATCH 205/351] Renames onChange to onDateChange

---
 .../src/DatePicker/DatePicker.spec.tsx        | 75 ++++++++++---------
 .../src/DatePicker/DatePicker.stories.tsx     |  2 +-
 .../date-picker/src/DatePicker/DatePicker.tsx |  2 +-
 .../src/DatePicker/DatePicker.types.ts        |  6 +-
 4 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index a4f34016ed..5b65c5b1a4 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -207,23 +207,22 @@ describe('packages/date-picker', () => {
         });
       });
 
-      // TODO: Move these tests to DatePickerMenu
       describe('Clicking a Calendar cell', () => {
         test('fires a change handler', () => {
-          const onChange = jest.fn();
+          const onDateChange = jest.fn();
           const { openMenu } = renderDatePicker({
-            onChange,
+            onDateChange,
           });
           const { calendarCells } = openMenu();
           const firstCell = calendarCells?.[0];
           userEvent.click(firstCell);
-          expect(onChange).toHaveBeenCalled();
+          expect(onDateChange).toHaveBeenCalled();
         });
 
         test('does nothing if the cell is out-of-range', () => {
-          const onChange = jest.fn();
+          const onDateChange = jest.fn();
           const { openMenu } = renderDatePicker({
-            onChange,
+            onDateChange,
             value: new Date(Date.UTC(2023, Month.September, 15)),
             min: new Date(Date.UTC(2023, Month.September, 10)),
           });
@@ -231,7 +230,7 @@ describe('packages/date-picker', () => {
           const firstCell = calendarCells?.[0];
           userEvent.click(firstCell, {}, { skipPointerEventsCheck: true });
           expect(firstCell).toHaveAttribute('aria-disabled', 'true');
-          expect(onChange).not.toHaveBeenCalled();
+          expect(onDateChange).not.toHaveBeenCalled();
         });
 
         test('fires a validation handler', () => {
@@ -370,11 +369,11 @@ describe('packages/date-picker', () => {
         });
 
         test('does not fire a change handler', () => {
-          const onChange = jest.fn();
-          const { openMenu, container } = renderDatePicker({ onChange });
+          const onDateChange = jest.fn();
+          const { openMenu, container } = renderDatePicker({ onDateChange });
           openMenu();
           userEvent.click(container.parentElement!);
-          expect(onChange).not.toHaveBeenCalled();
+          expect(onDateChange).not.toHaveBeenCalled();
         });
       });
     });
@@ -570,13 +569,13 @@ describe('packages/date-picker', () => {
         });
 
         test('if a cell is focused, fires a change handler', () => {
-          const onChange = jest.fn();
-          const { openMenu } = renderDatePicker({ onChange });
+          const onDateChange = jest.fn();
+          const { openMenu } = renderDatePicker({ onDateChange });
           const { todayCell } = openMenu();
           tabNTimes(4);
           expect(todayCell).toHaveFocus();
           userEvent.type(todayCell!, '{enter}');
-          expect(onChange).toHaveBeenCalled();
+          expect(onDateChange).toHaveBeenCalled();
         });
 
         test('if a cell is focused, closes the menu', async () => {
@@ -600,16 +599,18 @@ describe('packages/date-picker', () => {
         });
 
         test('does not fire a change handler', () => {
-          const onChange = jest.fn();
-          const { openMenu } = renderDatePicker({ onChange });
+          const onDateChange = jest.fn();
+          const { openMenu } = renderDatePicker({ onDateChange });
           openMenu();
           userEvent.keyboard('{escape}');
-          expect(onChange).not.toHaveBeenCalled();
+          expect(onDateChange).not.toHaveBeenCalled();
         });
 
         test('focus remains in the input element', () => {
-          const onChange = jest.fn();
-          const { openMenu, inputContainer } = renderDatePicker({ onChange });
+          const onDateChange = jest.fn();
+          const { openMenu, inputContainer } = renderDatePicker({
+            onDateChange,
+          });
           openMenu();
           userEvent.keyboard('{escape}');
           expect(inputContainer.contains(document.activeElement)).toBeTruthy();
@@ -644,12 +645,12 @@ describe('packages/date-picker', () => {
         });
 
         test('does not fire a value change handler', () => {
-          const onChange = jest.fn();
+          const onDateChange = jest.fn();
           const { yearInput } = renderDatePicker({
-            onChange,
+            onDateChange,
           });
           userEvent.type(yearInput, '2023');
-          expect(onChange).not.toHaveBeenCalled();
+          expect(onDateChange).not.toHaveBeenCalled();
         });
 
         test('does not fire a segment change handler', () => {
@@ -664,13 +665,13 @@ describe('packages/date-picker', () => {
 
       describe('when a segment is unfocused/blurred', () => {
         test('does not fire a change handler if the value is incomplete', () => {
-          const onChange = jest.fn();
+          const onDateChange = jest.fn();
           const { yearInput } = renderDatePicker({
-            onChange,
+            onDateChange,
           });
           userEvent.type(yearInput, '2023');
           userEvent.tab();
-          expect(onChange).not.toHaveBeenCalled();
+          expect(onDateChange).not.toHaveBeenCalled();
         });
 
         test('fires a segment change handler', () => {
@@ -682,15 +683,15 @@ describe('packages/date-picker', () => {
         });
 
         test('fires a change handler when the value is a valid date', () => {
-          const onChange = jest.fn();
+          const onDateChange = jest.fn();
           const { yearInput, monthInput, dayInput } = renderDatePicker({
-            onChange,
+            onDateChange,
           });
           userEvent.type(yearInput, '2023');
           userEvent.type(monthInput, '12');
           userEvent.type(dayInput, '26');
           userEvent.tab();
-          expect(onChange).toHaveBeenCalledWith(
+          expect(onDateChange).toHaveBeenCalledWith(
             expect.objectContaining(newUTC(2023, Month.December, 26)),
           );
         });
@@ -727,22 +728,22 @@ describe('packages/date-picker', () => {
 
   describe('Controlled vs Uncontrolled', () => {
     test('(Controlled) fires a change handler if `value` is provided', async () => {
-      const onChange = jest.fn();
+      const onDateChange = jest.fn();
       const { openMenu } = renderDatePicker({
         value: new Date(),
-        onChange,
+        onDateChange,
       });
       const { calendarCells } = openMenu();
       const cell1 = calendarCells?.[0];
       userEvent.click(cell1);
-      await waitFor(() => expect(onChange).toHaveBeenCalled());
+      await waitFor(() => expect(onDateChange).toHaveBeenCalled());
     });
 
     test('(Controlled) does not change the value if `value` is provided', async () => {
-      const onChange = jest.fn();
+      const onDateChange = jest.fn();
       const { openMenu, dayInput, monthInput, yearInput } = renderDatePicker({
         value: new Date(),
-        onChange,
+        onDateChange,
       });
       const { calendarCells } = openMenu();
       const cell1 = calendarCells?.[0];
@@ -755,20 +756,20 @@ describe('packages/date-picker', () => {
     });
 
     test('(Uncontrolled) fires a change handler', async () => {
-      const onChange = jest.fn();
+      const onDateChange = jest.fn();
       const { openMenu } = renderDatePicker({
-        onChange,
+        onDateChange,
       });
       const { calendarCells } = openMenu();
       const cell1 = calendarCells?.[0];
       userEvent.click(cell1);
-      await waitFor(() => expect(onChange).toHaveBeenCalled());
+      await waitFor(() => expect(onDateChange).toHaveBeenCalled());
     });
 
     test('(Uncontrolled) changes the input value if `value` is not provided', async () => {
-      const onChange = jest.fn();
+      const onDateChange = jest.fn();
       const { openMenu, dayInput, monthInput, yearInput } = renderDatePicker({
-        onChange,
+        onDateChange,
         initialValue: new Date(),
       });
       const { calendarCells } = openMenu();
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index 3e4661cf33..6a8d92861b 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -80,7 +80,7 @@ export default meta;
 export const Basic: StoryFn<typeof DatePicker> = props => {
   const [value, setValue] = useState<Date | null | undefined>();
 
-  return <DatePicker {...props} value={value} onChange={setValue} />;
+  return <DatePicker {...props} value={value} onDateChange={setValue} />;
 };
 
 export const Uncontrolled: StoryFn<typeof DatePicker> = props => {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 5f82d8ad1a..ba47423faa 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -16,7 +16,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     {
       value: valueProp,
       initialValue: initialProp,
-      onChange: onChangeProp,
+      onDateChange: onChangeProp,
       ...props
     }: DatePickerProps,
     fwdRef,
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index f388a96dce..b2077ebbc6 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -9,11 +9,13 @@ export interface DatePickerProps extends BaseDatePickerProps {
 
   /**
    * Callback fired when the user makes a value change.
-   * Fired on click of a new date in the menu, or on keydown if the input contains a valid date
+   * Fired on click of a new date in the menu, or on keydown if the input contains a valid date.
+   *
+   * _Not_ fired when a date segment changes, but does not create a full date
    *
    * Callback date argument will be a Date object in ISO-8601 format, and in UTC time.
    */
-  onChange?: (value?: DateType) => void;
+  onDateChange?: (value?: DateType) => void;
 
   /** The initial selected date. Ignored if `value` is provided */
   initialValue?: DateType;

From 6adb71c7fb5189caa23970595604e2e844e43ce5 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 10 Oct 2023 15:08:41 -0400
Subject: [PATCH 206/351] Updates onSegmentChange to onChange

---
 .../CalendarButton/CalendarButton.tsx         |   3 +-
 .../DateInputBox/DateInputBox.spec.tsx        | 158 +++++++++---------
 .../DateInput/DateInputBox/DateInputBox.tsx   | 104 ++++++++----
 .../DateInputBox/DateInputBox.types.ts        |   8 +-
 .../DateInputSegment.spec.tsx                 | 134 ++-------------
 .../DateInputSegment/DateInputSegment.tsx     |  44 +----
 .../DateInputSegment.types.ts                 |   5 +-
 .../src/DatePicker/DatePicker.spec.tsx        |  20 ++-
 .../src/DatePicker/DatePicker.types.ts        |  12 +-
 .../DatePickerComponent.types.ts              |  12 +-
 .../DatePickerInput/DatePickerInput.tsx       |   4 +-
 .../DatePickerInput/DatePickerInput.types.ts  |  12 +-
 .../DatePickerContext.utils.ts                |   7 +-
 .../DateRangeMenu/DateRangeMenu.stories.tsx   |  14 +-
 .../useDateSegments/DateSegments.types.ts     |  15 +-
 .../hooks/useDateSegments/useDateSegments.ts  |  16 +-
 packages/date-picker/src/testUtils.ts         |   5 +
 .../src/utils/getSegmentsFromDate/index.ts    |  16 +-
 18 files changed, 266 insertions(+), 323 deletions(-)

diff --git a/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx b/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
index 9cd3ba00b4..d163eafad8 100644
--- a/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
+++ b/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
@@ -12,9 +12,10 @@ import { iconButtonStyles } from './CalendarButton.styles';
 export const CalendarButton = forwardRef<
   HTMLButtonElement,
   BaseIconButtonProps
->(({ className, ...rest }: BaseIconButtonProps) => {
+>(({ className, ...rest }: BaseIconButtonProps, fwdRef) => {
   return (
     <IconButton
+      ref={fwdRef}
       aria-label="Open calendar menu"
       type="button"
       className={cx(iconButtonStyles, className)}
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
index 27c3568ac7..d9203441d4 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -9,6 +9,7 @@ import {
 } from '../../DatePickerContext';
 import { defaultDatePickerContext } from '../../DatePickerContext/DatePickerContext.utils';
 import { SegmentRefs } from '../../hooks/useSegmentRefs';
+import { eventContainingTargetValue } from '../../testUtils';
 import { newUTC } from '../../utils';
 
 import { DateInputBox, type DateInputBoxProps } from '.';
@@ -51,6 +52,11 @@ const renderDateInputBox = (
 };
 
 describe('packages/date-picker/shared/date-input-box', () => {
+  const testContext = {
+    dateFormat: 'iso8601',
+    timeZone: 'UTC',
+  };
+
   describe('rendering', () => {
     describe.each(['day', 'month', 'year'])('%i', segment => {
       test('renders the correct aria attributes', () => {
@@ -91,7 +97,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
     test('renders an empty text box when no value is passed', () => {
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
         undefined,
-        { dateFormat: 'iso8601' },
+        testContext,
       );
       expect(dayInput).toHaveValue(null);
       expect(monthInput).toHaveValue(null);
@@ -100,129 +106,125 @@ describe('packages/date-picker/shared/date-input-box', () => {
 
     test('renders a filled text box when value is passed', () => {
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
-        { value: new Date('1993-12-26') },
-        { dateFormat: 'iso8601', timeZone: 'UTC' },
+        { value: newUTC(1993, Month.December, 26) },
+        testContext,
       );
 
-      expect(dayInput).toHaveValue(26);
-      expect(monthInput).toHaveValue(12);
-      expect(yearInput).toHaveValue(1993);
+      expect(dayInput.value).toBe('26');
+      expect(monthInput.value).toBe('12');
+      expect(yearInput.value).toBe('1993');
     });
   });
 
   describe('typing', () => {
     test('typing into a segment updates the segment value', () => {
-      const { dayInput } = renderDateInputBox(undefined, {
-        dateFormat: 'iso8601',
-        timeZone: 'UTC',
-      });
-
+      const { dayInput } = renderDateInputBox(undefined, testContext);
       userEvent.type(dayInput, '26');
-      expect(dayInput).toHaveValue(26);
+      expect(dayInput.value).toBe('26');
+    });
+
+    test('segment value is not immediately formatted', () => {
+      const { dayInput } = renderDateInputBox(undefined, testContext);
+      userEvent.type(dayInput, '2');
+      expect(dayInput.value).toBe('2');
+    });
+
+    test('deleting characters works as expected', () => {
+      const { dayInput, yearInput } = renderDateInputBox(
+        { value: newUTC(1993, Month.December, 26) },
+        testContext,
+      );
+      userEvent.type(dayInput, '{backspace}');
+      expect(dayInput.value).toBe('2');
+      userEvent.type(yearInput, '{backspace}');
+      expect(yearInput.value).toBe('199');
     });
 
-    test('typing into a segment does not fire the value change handler ', () => {
+    test('typing into a segment does not fire the value setter', () => {
       const setValue = jest.fn();
       const { dayInput } = renderDateInputBox(
         {
           value: null,
           setValue,
         },
-        {
-          dateFormat: 'iso8601',
-          timeZone: 'UTC',
-        },
+        testContext,
       );
 
       userEvent.type(dayInput, '26');
       expect(setValue).not.toHaveBeenCalled();
     });
 
-    test('typing into a segment does not immediately fire the segment change handler', () => {
-      const onSegmentChange = jest.fn();
+    test('typing into a segment fires the change handler', () => {
+      const onChange = jest.fn();
 
       const { yearInput } = renderDateInputBox(
         {
           value: null,
-          onSegmentChange,
-        },
-        {
-          dateFormat: 'iso8601',
-          timeZone: 'UTC',
+          onChange,
         },
+        testContext,
       );
       userEvent.type(yearInput, '1993');
 
-      expect(onSegmentChange).not.toHaveBeenCalled();
+      expect(onChange).toHaveBeenCalledWith(eventContainingTargetValue('1993'));
     });
 
-    test('only the segment change handler is fired when the input is blurred', () => {
-      const setValue = jest.fn();
-      const onSegmentChange = jest.fn();
-
-      const { yearInput } = renderDateInputBox(
-        {
-          value: null,
-          setValue,
-          onSegmentChange,
-        },
-        {
-          dateFormat: 'iso8601',
-          timeZone: 'UTC',
-        },
-      );
-
-      userEvent.type(yearInput, '1993');
-      userEvent.tab();
-      expect(setValue).not.toHaveBeenCalled();
-      expect(onSegmentChange).toHaveBeenCalledWith('year', 1993);
-    });
-
-    test('change handler is called when a complete date is entered, and is blurred', () => {
+    test('value setter is called when a complete date is entered', () => {
       const setValue = jest.fn();
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
         {
           value: null,
           setValue,
         },
-        {
-          dateFormat: 'iso8601',
-          timeZone: 'UTC',
-        },
+        testContext,
       );
       userEvent.type(yearInput, '1993');
       userEvent.type(monthInput, '12');
       userEvent.type(dayInput, '26');
-      expect(setValue).not.toHaveBeenCalled();
-      userEvent.tab();
       expect(setValue).toHaveBeenCalledWith(
         expect.objectContaining(newUTC(1993, Month.December, 26)),
       );
     });
 
-    test.todo(
-      'typing a complete segment value focuses the next segment',
-      // () => {
-      //   const { yearInput, monthInput } = renderDateInputBox(undefined, {
-      //     dateFormat: 'iso8601',
-      //     timeZone: 'UTC',
-      //   });
-      //   userEvent.type(yearInput, '1993');
-      //   expect(monthInput).toHaveFocus();
-      // },
-    );
-
-    test.todo(
-      'typing an incomplete segment does not focus the next segment',
-      // () => {
-      //   const { yearInput } = renderDateInputBox(undefined, {
-      //     dateFormat: 'iso8601',
-      //     timeZone: 'UTC',
-      //   });
-      //   userEvent.type(yearInput, '200');
-      //   expect(yearInput).toHaveFocus();
-      // },
-    );
+    test('value is only formatted on segment blur', () => {
+      const { dayInput } = renderDateInputBox(undefined, testContext);
+      userEvent.type(dayInput, '2');
+      userEvent.tab();
+      expect(dayInput.value).toBe('02');
+    });
+
+    // TODO:
+    describe.skip('Auto-focus', () => {
+      test('typing a complete segment value focuses the next segment', () => {
+        const { yearInput, monthInput } = renderDateInputBox(
+          undefined,
+          testContext,
+        );
+        userEvent.type(yearInput, '1993');
+        expect(monthInput).toHaveFocus();
+      });
+
+      test('typing an incomplete segment does not focus the next segment', () => {
+        const { monthInput } = renderDateInputBox(undefined, testContext);
+        userEvent.type(monthInput, '1');
+        expect(monthInput).toHaveFocus();
+      });
+
+      test('typing an incomplete value focuses the next segment if there are no valid second characters', () => {
+        const { monthInput, dayInput } = renderDateInputBox(
+          undefined,
+          testContext,
+        );
+        userEvent.type(monthInput, '2'); // There are no months that start with 2#
+        expect(dayInput).toHaveFocus();
+      });
+
+      test('value is formatted on auto-focus', () => {
+        const { monthInput } = renderDateInputBox(undefined, testContext);
+        userEvent.type(monthInput, '2'); // There are no months that start with 2#
+        expect(monthInput).toHaveValue('02');
+      });
+    });
   });
 
   describe('mouse interaction', () => {
@@ -260,7 +262,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
       });
     });
 
-    test('Tab moves focus', () => {
+    test('Tab moves focus to next segment', () => {
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
         undefined,
         { dateFormat: 'iso8601' },
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index 394bf9fa24..61bb6309e1 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -1,8 +1,13 @@
-import React from 'react';
+import React, {
+  ChangeEvent,
+  ChangeEventHandler,
+  FocusEventHandler,
+} from 'react';
 import { isSameDay } from 'date-fns';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
+import { createSyntheticEvent } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../DatePickerContext';
 import {
@@ -11,7 +16,7 @@ import {
   isDateSegment,
 } from '../../hooks/useDateSegments/DateSegments.types';
 import { useDateSegments } from '../../hooks/useDateSegments/useDateSegments';
-import { newDateFromSegments } from '../../utils';
+import { getValueFormatter, newDateFromSegments } from '../../utils';
 import { DateInputSegment } from '../DateInputSegment';
 
 import {
@@ -36,12 +41,12 @@ import { DateInputBoxProps } from './DateInputBox.types';
 export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
   (
     {
-      value,
-      setValue,
+      value: dateValue,
+      setValue: setDateValue,
       className,
       labelledBy,
       segmentRefs,
-      onSegmentChange,
+      onChange: onSegmentChange,
       ...rest
     }: DateInputBoxProps,
     fwdRef,
@@ -51,45 +56,83 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     const containerRef = useForwardedRef(fwdRef, null);
 
     /**
-     * When a segment is updated, update the external value
+     * Fires a synthetic change event
+     * and calls the provided `onChange` handler
      */
-    const onSegmentsUpdate = (newSegments: DateSegmentsState) => {
-      const { day, month, year } = newSegments;
-      /** New date in UTC */
-      const utcDate = newDateFromSegments({ day, month, year });
+    const triggerChangeEventForSegment = (segment: DateSegment) => {
+      const changeEvent = new Event('change');
+      const eventTarget = segmentRefs[segment].current;
+
+      if (eventTarget) {
+        const reactEvent = createSyntheticEvent(
+          changeEvent,
+          eventTarget,
+        ) as ChangeEvent<HTMLInputElement>;
+        onSegmentChange?.(reactEvent);
+      }
+    };
+
+    /**
+     * When a segment is updated,
+     * trigger a `change` event for the segment, and
+     * update the external Date value if necessary
+     */
+    const onSegmentsUpdate = (
+      newSegments: DateSegmentsState,
+      _prev?: DateSegmentsState,
+      updatedSegment?: DateSegment,
+    ) => {
+      const utcDate = newDateFromSegments(newSegments);
+
+      // Synthetically trigger the onChange event passed in from the parent
+      if (updatedSegment) {
+        triggerChangeEventForSegment(updatedSegment);
+      } else {
+        Object.keys(newSegments).forEach(seg => {
+          triggerChangeEventForSegment(seg as DateSegment);
+        });
+      }
 
-      // Only update the value iff all parts are set, and create a valid date.
       if (utcDate) {
-        /** Whether we need to update the external value */
-        const shouldUpdate = !value || !isSameDay(utcDate, value);
+        // Only update the value iff all parts are set, and create a valid date.
+        const shouldUpdate = !dateValue || !isSameDay(utcDate, dateValue);
 
         if (shouldUpdate) {
-          setValue?.(utcDate);
+          setDateValue?.(utcDate);
         }
-      } else if (!(day || month || year)) {
+      } else if (!(newSegments.day || newSegments.month || newSegments.year)) {
         // if no segment exists, set the external value to null
-        setValue?.(null);
+        setDateValue?.(null);
       }
     };
 
-    // Keep track of each date segment
-    const { segments, setSegment } = useDateSegments(value ?? null, {
+    /** Keep track of each date segment */
+    const { segments, setSegment } = useDateSegments(dateValue, {
       onUpdate: onSegmentsUpdate,
     });
 
-    /**
-     * Curried function that creates a callback function for each segment.
-     * Sets the segment value
-     */
-    const handleSegmentChange =
-      (segment: DateSegment) => (newValue: string) => {
-        const newSegmentValue = Number(newValue);
-        setSegment(segment, newSegmentValue);
-        onSegmentChange?.(segment, newSegmentValue);
-      };
+    /** fired when an individual segment value changes */
+    const handleSegmentChange: ChangeEventHandler<HTMLInputElement> = e => {
+      const segmentName = e.target.getAttribute('id');
+      const newValue = e.target.value;
+
+      if (isDateSegment(segmentName)) {
+        setSegment(segmentName, newValue);
+      }
+    };
+
+    const handleSegmentBlur: FocusEventHandler<HTMLInputElement> = e => {
+      const segmentName = e.target.getAttribute('id');
+      const newValue = e.target.value;
+
+      if (isDateSegment(segmentName)) {
+        const formatter = getValueFormatter(segmentName);
+        const formattedValue = formatter(newValue);
+        setSegment(segmentName, formattedValue);
+      }
+    };
 
     return (
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
         className={cx(segmentPartsWrapperStyles, className)}
         ref={containerRef}
@@ -110,7 +153,8 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
                 aria-labelledby={labelledBy}
                 segment={part.type}
                 value={segments[part.type]}
-                onChange={handleSegmentChange(part.type)}
+                onChange={handleSegmentChange}
+                onBlur={handleSegmentBlur}
               />
             );
           }
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
index 6dece53d6e..4ead06f630 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
@@ -1,6 +1,7 @@
+import { ChangeEventHandler } from 'react';
+
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
-import { DateSegment, DateSegmentValue } from '../../hooks/useDateSegments';
 import { SegmentRefs } from '../../hooks/useSegmentRefs';
 import { DateType } from '../../types';
 
@@ -20,10 +21,7 @@ export interface DateInputBoxProps
   /**
    * Callback fired when any segment changes, but not necessarily a full value
    */
-  onSegmentChange?: (
-    segment: DateSegment,
-    segmentValue: DateSegmentValue,
-  ) => void;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
 
   /**
    * id of the labelling element
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
index d145c5c0c7..50b09e9b35 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { eventContainingTargetValue } from '../../testUtils';
+
 import { DateInputSegment, type DateInputSegmentProps } from '.';
 
 const handler = jest.fn();
@@ -47,28 +49,18 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       });
 
       test('Rendering with a value sets the input value', () => {
-        const { input } = renderSegment({ segment: 'day', value: 12 });
+        const { input } = renderSegment({ segment: 'day', value: '12' });
         expect(input.value).toBe('12');
       });
 
-      test('values get appropriately padded', () => {
-        const { input } = renderSegment({ segment: 'day', value: 8 });
-        expect(input.value).toBe('08');
-      });
-
-      test('values get appropriately truncated', () => {
-        const { input } = renderSegment({ segment: 'day', value: 123 });
-        expect(input.value).toBe('23');
-      });
-
       test('rerendering updates the value', () => {
         const { input, rerender } = renderSegment({
           segment: 'day',
-          value: 12,
+          value: '12',
         });
 
         rerender(
-          <DateInputSegment segment="day" data-testid="testid" value={8} />,
+          <DateInputSegment segment="day" data-testid="testid" value={'08'} />,
         );
         expect(input.value).toBe('08');
       });
@@ -81,27 +73,21 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       });
 
       test('Rendering with a value sets the input value', () => {
-        const { input } = renderSegment({ segment: 'year', value: 2023 });
+        const { input } = renderSegment({ segment: 'year', value: '2023' });
         expect(input.value).toBe('2023');
       });
 
-      test('values get appropriately padded', () => {
-        const { input } = renderSegment({ segment: 'year', value: 123 });
-        expect(input.value).toBe('0123');
-      });
-
-      test('values get appropriately truncated', () => {
-        const { input } = renderSegment({ segment: 'year', value: 12031 });
-        expect(input.value).toBe('2031');
-      });
-
       test('rerendering updates the value', () => {
         const { input, rerender } = renderSegment({
           segment: 'year',
-          value: 2023,
+          value: '2023',
         });
         rerender(
-          <DateInputSegment segment="year" data-testid="testid" value={1993} />,
+          <DateInputSegment
+            segment="year"
+            data-testid="testid"
+            value={'1993'}
+          />,
         );
         expect(input.value).toBe('1993');
       });
@@ -109,22 +95,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
   });
 
   describe('Typing', () => {
-    test('does not immediately call the change handler', () => {
-      const result = render(
-        <DateInputSegment
-          segment="day"
-          data-testid="testid"
-          onChange={handler}
-        />,
-      );
-      const input = result.getByTestId('testid');
-      userEvent.type(input, '12');
-      expect(handler).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('When the input is unfocused (onBlur)', () => {
-    test('entering a number calls the change handler', () => {
+    test('calls the change handler', () => {
       const result = render(
         <DateInputSegment
           segment="day"
@@ -134,80 +105,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       );
       const input = result.getByTestId('testid');
       userEvent.type(input, '12');
-      userEvent.tab();
-      expect(handler).toHaveBeenCalledWith('12');
-    });
-
-    test('deleting a value calls the change handler', () => {
-      const result = render(
-        <DateInputSegment
-          segment="day"
-          data-testid="testid"
-          onChange={handler}
-          value={12}
-        />,
-      );
-      const input = result.getByTestId('testid');
-      userEvent.type(input, '{backspace}{backspace}');
-      userEvent.tab();
-      expect(handler).toHaveBeenCalledWith('');
-    });
-
-    test('entering the same value as previous does not call the handler', () => {
-      const result = render(
-        <DateInputSegment
-          segment="day"
-          data-testid="testid"
-          onChange={handler}
-          value={12}
-        />,
-      );
-      const input = result.getByTestId('testid');
-      userEvent.type(input, '{backspace}{backspace}12');
-      userEvent.tab();
-      expect(handler).not.toHaveBeenCalled();
-    });
-
-    test('entering letters does not call the handler', () => {
-      const result = render(
-        <DateInputSegment
-          segment="day"
-          data-testid="testid"
-          onChange={handler}
-        />,
-      );
-      const input = result.getByTestId('testid');
-      userEvent.type(input, 'abc');
-      userEvent.tab();
-      expect(handler).not.toHaveBeenCalled();
-    });
-
-    test('change handler is called with padded value', () => {
-      const result = render(
-        <DateInputSegment
-          segment="day"
-          data-testid="testid"
-          onChange={handler}
-        />,
-      );
-      const input = result.getByTestId('testid');
-      userEvent.type(input, '1');
-      userEvent.tab();
-      expect(handler).toHaveBeenCalledWith('01');
-    });
-
-    test('change handler is called with truncated value', () => {
-      const result = render(
-        <DateInputSegment
-          segment="day"
-          data-testid="testid"
-          onChange={handler}
-        />,
-      );
-      const input = result.getByTestId('testid');
-      userEvent.type(input, '123');
-      userEvent.tab();
-      expect(handler).toHaveBeenCalledWith('23');
+      expect(handler).toHaveBeenCalledWith(eventContainingTargetValue('12'));
     });
   });
 
@@ -222,7 +120,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
           segment="day"
           data-testid="testid"
           onChange={handler}
-          value={8}
+          value={'08'}
         />,
       );
       const input = result.getByTestId('testid');
@@ -236,7 +134,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
           segment="day"
           data-testid="testid"
           onChange={handler}
-          value={8}
+          value={'08'}
         />,
       );
       const input = result.getByTestId('testid');
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index 1a2e5106a9..6178983959 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -1,10 +1,4 @@
-import React, {
-  ChangeEventHandler,
-  FocusEventHandler,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import React from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
@@ -13,7 +7,6 @@ import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
 import { useDatePickerContext } from '../../DatePickerContext';
-import { getValueFormatter } from '../../utils';
 
 import { defaultMax, defaultMin, defaultPlaceholder } from './constants';
 import {
@@ -57,35 +50,6 @@ export const DateInputSegment = React.forwardRef<
     const baseFontSize = useUpdatedBaseFontSize();
     const { size, disabled } = useDatePickerContext();
 
-    const formatValue = useMemo(() => getValueFormatter(segment), [segment]);
-
-    // internally, keep track of the input value
-    const [internalValue, setInternalValue] = useState<string>(
-      formatValue(value),
-    );
-
-    // If the value changes externally, update the internal value
-    useEffect(() => {
-      setInternalValue(formatValue(value));
-    }, [formatValue, value]);
-
-    // On input element change, we update the internal value
-    const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
-      setInternalValue(e.target.value);
-    };
-
-    // When the user un-focuses the element, then we fire the change handler
-    const handleBlur: FocusEventHandler<HTMLInputElement> = e => {
-      const formattedValue = formatValue(internalValue);
-
-      // If the value has changed, call the change handler
-      if (formattedValue !== formatValue(value)) {
-        onChange?.(formattedValue);
-      }
-
-      onBlur?.(e);
-    };
-
     return (
       <input
         {...rest}
@@ -94,12 +58,12 @@ export const DateInputSegment = React.forwardRef<
         ref={inputRef}
         type="number"
         role="spinbutton"
-        value={internalValue}
+        value={value}
         min={min}
         max={max}
         placeholder={defaultPlaceholder[segment]}
-        onChange={handleChange}
-        onBlur={handleBlur}
+        onChange={onChange}
+        onBlur={onBlur}
         disabled={disabled}
         className={cx(
           baseStyles,
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
index 068ac6b3b3..6fe0a09502 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
@@ -7,7 +7,7 @@ import {
 
 export interface DateInputSegmentProps
   extends DarkModeProps,
-    Omit<HTMLElementProps<'input'>, 'onChange'> {
+    HTMLElementProps<'input'> {
   /** Which date segment this input represents. Determines the aria-label, and min/max values where relevant */
   segment: DateSegment;
 
@@ -19,7 +19,4 @@ export interface DateInputSegmentProps
 
   /** Optional maximum value. Defaults to 31 for day, 12 for month, 2038 for year */
   max?: number;
-
-  /** Callback fired when the value changes */
-  onChange?: (val: string) => void;
 }
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 5b65c5b1a4..128f07da92 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -9,7 +9,7 @@ import userEvent from '@testing-library/user-event';
 import { range } from 'lodash';
 
 import { Month } from '../constants';
-import { tabNTimes } from '../testUtils';
+import { eventContainingTargetValue, tabNTimes } from '../testUtils';
 import { newUTC } from '../utils/newUTC';
 
 import { renderDatePicker } from './DatePicker.testutils';
@@ -653,13 +653,15 @@ describe('packages/date-picker', () => {
           expect(onDateChange).not.toHaveBeenCalled();
         });
 
-        test('does not fire a segment change handler', () => {
-          const onSegmentChange = jest.fn();
+        test('fires a segment change handler', () => {
+          const onChange = jest.fn();
           const { yearInput } = renderDatePicker({
-            onSegmentChange,
+            onChange,
           });
           userEvent.type(yearInput, '2023');
-          expect(onSegmentChange).not.toHaveBeenCalled();
+          expect(onChange).toHaveBeenCalledWith(
+            eventContainingTargetValue('2023'),
+          );
         });
       });
 
@@ -675,11 +677,13 @@ describe('packages/date-picker', () => {
         });
 
         test('fires a segment change handler', () => {
-          const onSegmentChange = jest.fn();
-          const { yearInput } = renderDatePicker({ onSegmentChange });
+          const onChange = jest.fn();
+          const { yearInput } = renderDatePicker({ onChange });
           userEvent.type(yearInput, '2023');
           userEvent.tab();
-          expect(onSegmentChange).toHaveBeenCalledWith('year', 2023);
+          expect(onChange).toHaveBeenCalledWith(
+            eventContainingTargetValue('2023'),
+          );
         });
 
         test('fires a change handler when the value is a valid date', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index b2077ebbc6..f3c3aff259 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -1,4 +1,5 @@
-import { DateSegment, DateSegmentValue } from '../hooks/useDateSegments';
+import { ChangeEvent } from 'react';
+
 import { BaseDatePickerProps, DateType } from '../types';
 
 export interface DatePickerProps extends BaseDatePickerProps {
@@ -31,8 +32,9 @@ export interface DatePickerProps extends BaseDatePickerProps {
   /**
    * Callback fired when any segment changes, but not necessarily a full value
    */
-  onSegmentChange?: (
-    segment: DateSegment,
-    segmentValue: DateSegmentValue,
-  ) => void;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  // onSegmentChange?: (
+  //   segment: DateSegment,
+  //   segmentValue: DateSegmentValue,
+  // ) => void;
 }
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
index 18b88d9a77..c2f2975343 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
@@ -1,12 +1,14 @@
-import { contextPropNames } from '../../DatePickerContext/DatePickerContext.utils';
+import { ContextPropKeys } from '../../DatePickerContext/DatePickerContext.utils';
 import { useControlledValue } from '../../hooks/useControlledValue';
 import { DateType } from '../../types';
 import { DatePickerProps } from '../DatePicker.types';
 
+/**
+ * Extends {@link DatePickerProps},
+ * but omits props that are added to the context.
+ * Replaces `onDateChange` with a `setValue` setter function
+ */
 export interface DatePickerComponentProps
-  extends Omit<
-    DatePickerProps,
-    (typeof contextPropNames)[number] | 'onChange'
-  > {
+  extends Omit<DatePickerProps, ContextPropKeys | 'onDateChange'> {
   setValue: ReturnType<typeof useControlledValue<DateType>>['setValue'];
 }
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 67cce1a564..a993f02111 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -25,7 +25,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       setValue,
       onClick,
       onKeyDown,
-      onSegmentChange,
+      onChange: onSegmentChange,
       handleValidation,
       ...rest
     }: DatePickerInputProps,
@@ -164,7 +164,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           value={value}
           setValue={setValue}
           segmentRefs={segmentRefs}
-          onSegmentChange={onSegmentChange}
+          onChange={onSegmentChange}
         />
       </DateFormField>
     );
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index 2dd51e906d..706d2d999c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -3,14 +3,14 @@ import { MouseEventHandler } from 'react';
 // import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
-import { DateInputBoxProps } from '../../DateInput';
-// import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
-import { DatePickerProps } from '../DatePicker.types';
+import { DatePickerComponentProps } from '../DatePickerComponent';
 
 export interface DatePickerInputProps
-  extends Pick<DateInputBoxProps, 'setValue' | 'onSegmentChange'>,
-    Pick<DatePickerProps, 'value' | 'handleValidation'>,
-    HTMLElementProps<'div'> {
+  extends Pick<
+      DatePickerComponentProps,
+      'setValue' | 'value' | 'handleValidation' | 'onChange'
+    >,
+    Omit<HTMLElementProps<'div'>, 'onChange'> {
   /**
    * Click handler
    */
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
index cce88a5463..8b664b2893 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
@@ -16,10 +16,11 @@ export const MIN_DATE = new Date('12-31-1969');
 export const MAX_DATE = new Date('01-19-2038');
 export const TZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
+export type ContextPropKeys = keyof DatePickerProviderProps &
+  keyof BaseDatePickerProps;
+
 /** Prop names that are in both DatePickerProps and DatePickerProviderProps */
-export const contextPropNames: Array<
-  keyof DatePickerProviderProps & keyof BaseDatePickerProps
-> = [
+export const contextPropNames: Array<ContextPropKeys> = [
   'label',
   'description',
   'dateFormat',
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
index 09f966a86a..dd39821678 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
@@ -19,6 +19,7 @@ import {
   contextPropNames,
   defaultDatePickerContext,
 } from '../../DatePickerContext/DatePickerContext.utils';
+import { DateRangeType } from '../../types';
 import { newUTC, pickAndOmit } from '../../utils';
 
 import { DateRangeMenu } from './DateRangeMenu';
@@ -78,7 +79,7 @@ type DateRangeMenuStoryType = StoryObj<typeof DateRangeMenu>;
 
 export const Basic: DateRangeMenuStoryType = {
   render: args => {
-    const [value, setValue] = useState<Date | null>(null);
+    const [value, setValue] = useState<DateRangeType | undefined>();
 
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
@@ -89,7 +90,7 @@ export const Basic: DateRangeMenuStoryType = {
           {...props}
           refEl={refEl}
           value={value}
-          onCellClick={setValue}
+          setValue={setValue}
         />
       </>
     );
@@ -98,6 +99,11 @@ export const Basic: DateRangeMenuStoryType = {
 
 export const WithValue: DateRangeMenuStoryType = {
   render: args => {
+    const [value, setValue] = useState<DateRangeType | undefined>([
+      newUTC(2023, Month.September, 10),
+      null,
+    ]);
+
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
     return (
@@ -106,8 +112,8 @@ export const WithValue: DateRangeMenuStoryType = {
         <DateRangeMenu
           {...props}
           refEl={refEl}
-          value={newUTC(2023, Month.September, 10)}
-          onCellClick={() => {}}
+          value={value}
+          setValue={setValue}
         />
       </div>
     );
diff --git a/packages/date-picker/src/hooks/useDateSegments/DateSegments.types.ts b/packages/date-picker/src/hooks/useDateSegments/DateSegments.types.ts
index 13761de89e..45d71daab5 100644
--- a/packages/date-picker/src/hooks/useDateSegments/DateSegments.types.ts
+++ b/packages/date-picker/src/hooks/useDateSegments/DateSegments.types.ts
@@ -5,23 +5,26 @@ export const DateSegment = {
 } as const;
 export type DateSegment = (typeof DateSegment)[keyof typeof DateSegment];
 
-export type DateSegmentValue = number;
+export type DateSegmentValue = string;
 
 export type DateSegmentsState = Record<
   DateSegment,
   DateSegmentValue | undefined
 >;
 
-export function isDateSegment(str: string): str is DateSegment {
+export function isDateSegment(str: any): str is DateSegment {
+  if (typeof str !== 'string') return false;
   return ['day', 'month', 'year'].includes(str);
 }
 
-export type OnUpdateCallback = (value: DateSegmentsState) => void;
+/** Callback passed into the hook, called when any segment updates */
+export type OnUpdateCallback = (
+  value: DateSegmentsState,
+  previous?: DateSegmentsState,
+  updatedSegment?: DateSegment,
+) => void;
 
 export interface UseDateSegmentsOptions {
-  /** A formatter used to separate the date value into segments */
-  // timeZone: string;
-
   /** A callback fired when the segment values change */
   onUpdate?: OnUpdateCallback;
 }
diff --git a/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts b/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts
index 97b035f424..614c4c9b70 100644
--- a/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts
+++ b/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts
@@ -32,8 +32,8 @@ const dateSegmentsReducer = (
  * Returned segments are relative to the formatter time zone
  */
 export const useDateSegments = (
-  /** Provided date is relative to the client's time zone */
-  date: DateType,
+  /** Provided date is UTC */
+  date: DateType = null,
   { onUpdate }: UseDateSegmentsOptions,
 ): UseDateSegmentsReturnValue => {
   //
@@ -48,10 +48,10 @@ export const useDateSegments = (
   useEffect(() => {
     if (date && !(prevDate && isSameDay(date, prevDate))) {
       const newSegments = getSegmentsFromDate(date);
-      onUpdate?.(newSegments);
+      onUpdate?.(newSegments, { ...segments });
       dispatch(newSegments);
     }
-  }, [date, onUpdate, prevDate]);
+  }, [date, onUpdate, prevDate, segments]);
 
   /**
    * Custom dispatch that triggers the provided side effects, and updates state
@@ -60,9 +60,11 @@ export const useDateSegments = (
     // Calculate next state
     // then, execute any side effects based on the new state
     // finally, commit the new state
-    const nextState = dateSegmentsReducer(segments, { [segment]: value });
-    onUpdate?.(nextState);
-    dispatch({ [segment]: value });
+
+    const updateObject = { [segment]: value };
+    const nextState = dateSegmentsReducer(segments, updateObject);
+    onUpdate?.(nextState, { ...segments }, segment);
+    dispatch(updateObject);
   };
 
   return {
diff --git a/packages/date-picker/src/testUtils.ts b/packages/date-picker/src/testUtils.ts
index 8e27ac3d94..a1993b97f4 100644
--- a/packages/date-picker/src/testUtils.ts
+++ b/packages/date-picker/src/testUtils.ts
@@ -28,3 +28,8 @@ export const tabNTimes = (count: number) => {
     userEvent.tab();
   }
 };
+
+export const eventContainingTargetValue = (value: any) =>
+  expect.objectContaining({
+    target: expect.objectContaining({ value }),
+  });
diff --git a/packages/date-picker/src/utils/getSegmentsFromDate/index.ts b/packages/date-picker/src/utils/getSegmentsFromDate/index.ts
index 296efc5c04..7e1a19283b 100644
--- a/packages/date-picker/src/utils/getSegmentsFromDate/index.ts
+++ b/packages/date-picker/src/utils/getSegmentsFromDate/index.ts
@@ -1,4 +1,5 @@
-import { DateSegmentsState } from '../../hooks/useDateSegments/DateSegments.types';
+import { DateSegmentsState } from '../../hooks/useDateSegments';
+import { getValueFormatter } from '../getValueFormatter';
 
 /** Returns a single object with day, month & year segments */
 export const getSegmentsFromDate = (date: Date | null): DateSegmentsState => {
@@ -8,3 +9,16 @@ export const getSegmentsFromDate = (date: Date | null): DateSegmentsState => {
     year: date ? date.getUTCFullYear() : undefined,
   } as DateSegmentsState;
 };
+
+/** Returns a single object with _formatted_ day, month & year segments */
+export const getFormattedSegmentsFromDate = (
+  date: Date | null,
+): DateSegmentsState => {
+  const segments = getSegmentsFromDate(date);
+
+  return {
+    day: getValueFormatter('day')(segments['day']),
+    month: getValueFormatter('month')(segments['month']),
+    year: getValueFormatter('year')(segments['year']),
+  };
+};

From d6695b2fd45663062feffa43c1b6cac3ca82ffec Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Wed, 11 Oct 2023 11:55:31 -0400
Subject: [PATCH 207/351] LG-3675, LG-3676: Date Picker select width and menu
 width (#2013)

* switch to short month and add a fixed width

* remove table spacing

* rename var
---
 .../src/Calendar/CalendarGrid/CalendarGrid.styles.ts      | 5 +++++
 .../src/Calendar/CalendarGrid/CalendarGrid.tsx            | 8 +++++++-
 .../DatePicker/DatePickerMenu/DatePickerMenu.styles.ts    | 7 ++++++-
 .../DatePickerMenu/DatePickerMenuHeader/index.tsx         | 5 ++++-
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts
index ed3e2b3bb1..9786b3596c 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts
@@ -3,9 +3,14 @@ import { fontWeights } from '@leafygreen-ui/tokens';
 
 export const calendarGridStyles = css`
   height: max-content;
+  border-collapse: collapse;
 `;
 
 export const calendarHeaderCellStyles = css`
   font-weight: ${fontWeights.regular};
   text-transform: capitalize;
 `;
+
+export const calendarThStyles = css`
+  padding: 0;
+`;
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
index 0c8de59508..5b8eea5c25 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -12,6 +12,7 @@ import { getWeeksArray } from '../../utils';
 import {
   calendarGridStyles,
   calendarHeaderCellStyles,
+  calendarThStyles,
 } from './CalendarGrid.styles';
 import { CalendarGridProps } from './CalendarGrid.types';
 
@@ -55,7 +56,12 @@ export const CalendarGrid = forwardRef<HTMLTableElement, CalendarGridProps>(
               const dayIndex = (i + weekStartsOn) % daysPerWeek;
               const day = DaysOfWeek[dayIndex];
               return (
-                <th role="columnheader" key={day.short} abbr={day.long}>
+                <th
+                  role="columnheader"
+                  key={day.short}
+                  abbr={day.long}
+                  className={calendarThStyles}
+                >
                   <Disclaimer className={calendarHeaderCellStyles}>
                     {day.short}
                   </Disclaimer>
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
index 731f27f83b..242ef409b5 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
@@ -3,7 +3,7 @@ import { contentClassName } from '@leafygreen-ui/popover';
 import { spacing } from '@leafygreen-ui/tokens';
 
 export const menuWrapperStyles = css`
-  width: 266px; // width of "September" select trigger
+  width: 244px;
 
   & > .${contentClassName} {
     width: 100%;
@@ -38,3 +38,8 @@ export const menuCalendarGridStyles = css`
   grid-area: calendar;
   margin: auto;
 `;
+
+// Hardcoding the width
+export const selectInputWidthStyles = css`
+  width: 68.5px;
+`;
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index c83b70d52c..65cb038730 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -12,6 +12,7 @@ import { isSameUTCMonth, setUTCMonth, setUTCYear } from '../../../utils';
 import {
   menuHeaderSelectContainerStyles,
   menuHeaderStyles,
+  selectInputWidthStyles,
 } from '../DatePickerMenu.styles';
 
 interface DatePickerMenuHeaderProps {
@@ -70,10 +71,11 @@ export const DatePickerMenuHeader = forwardRef<
             const newMonth = setUTCMonth(month, Number(m));
             updateMonth(newMonth);
           }}
+          className={selectInputWidthStyles}
         >
           {Months.map((m, i) => (
             <Option value={i.toString()} key={m.short}>
-              {m.long}
+              {m.short}
             </Option>
           ))}
         </Select>
@@ -85,6 +87,7 @@ export const DatePickerMenuHeader = forwardRef<
             const newMonth = setUTCYear(month, Number(y));
             updateMonth(newMonth);
           }}
+          className={selectInputWidthStyles}
         >
           {yearOptions.map(y => (
             <Option value={y.toString()} key={y}>

From 24f5be6cba7952cb4dfdaaf862ee9cba5343c4ec Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 11 Oct 2023 12:39:20 -0400
Subject: [PATCH 208/351] format segments on value update

---
 .../src/DatePicker/DatePicker.spec.tsx        | 24 +++++++++----------
 .../hooks/useDateSegments/useDateSegments.ts  |  6 ++---
 packages/date-picker/src/utils/index.ts       |  5 +++-
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 128f07da92..2d66f2274e 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -731,27 +731,27 @@ describe('packages/date-picker', () => {
   });
 
   describe('Controlled vs Uncontrolled', () => {
-    test('(Controlled) fires a change handler if `value` is provided', async () => {
+    test('(Controlled) Cell click fires a change handler if `value` is provided', async () => {
       const onDateChange = jest.fn();
       const { openMenu } = renderDatePicker({
         value: new Date(),
         onDateChange,
       });
       const { calendarCells } = openMenu();
-      const cell1 = calendarCells?.[0];
-      userEvent.click(cell1);
+      const firstCell = calendarCells?.[0];
+      userEvent.click(firstCell);
       await waitFor(() => expect(onDateChange).toHaveBeenCalled());
     });
 
-    test('(Controlled) does not change the value if `value` is provided', async () => {
+    test('(Controlled) Cell click does not change the value if `value` is provided', async () => {
       const onDateChange = jest.fn();
       const { openMenu, dayInput, monthInput, yearInput } = renderDatePicker({
         value: new Date(),
         onDateChange,
       });
       const { calendarCells } = openMenu();
-      const cell1 = calendarCells?.[0];
-      userEvent.click(cell1);
+      const firstCell = calendarCells?.[0];
+      userEvent.click(firstCell);
       await waitFor(() => {
         expect(dayInput.value).toEqual('26');
         expect(monthInput.value).toEqual('12');
@@ -759,26 +759,26 @@ describe('packages/date-picker', () => {
       });
     });
 
-    test('(Uncontrolled) fires a change handler', async () => {
+    test('(Uncontrolled) Cell click fires a change handler', async () => {
       const onDateChange = jest.fn();
       const { openMenu } = renderDatePicker({
         onDateChange,
       });
       const { calendarCells } = openMenu();
-      const cell1 = calendarCells?.[0];
-      userEvent.click(cell1);
+      const firstCell = calendarCells?.[0];
+      userEvent.click(firstCell);
       await waitFor(() => expect(onDateChange).toHaveBeenCalled());
     });
 
-    test('(Uncontrolled) changes the input value if `value` is not provided', async () => {
+    test('(Uncontrolled) Cell click changes the input value if `value` is not provided', async () => {
       const onDateChange = jest.fn();
       const { openMenu, dayInput, monthInput, yearInput } = renderDatePicker({
         onDateChange,
         initialValue: new Date(),
       });
       const { calendarCells } = openMenu();
-      const cell1 = calendarCells?.[0];
-      userEvent.click(cell1);
+      const firstCell = calendarCells?.[0];
+      userEvent.click(firstCell);
       await waitFor(() => {
         expect(dayInput.value).toEqual('01');
         expect(monthInput.value).toEqual('12');
diff --git a/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts b/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts
index 614c4c9b70..ae624c4542 100644
--- a/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts
+++ b/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts
@@ -4,7 +4,7 @@ import { isSameDay } from 'date-fns';
 import { usePrevious } from '@leafygreen-ui/hooks';
 
 import { DateType } from '../../types';
-import { getSegmentsFromDate } from '../../utils';
+import { getFormattedSegmentsFromDate } from '../../utils';
 
 import {
   DateSegment,
@@ -40,14 +40,14 @@ export const useDateSegments = (
   const [segments, dispatch] = useReducer(
     dateSegmentsReducer,
     date,
-    getSegmentsFromDate,
+    getFormattedSegmentsFromDate,
   );
   const prevDate = usePrevious(date);
 
   // If `date` prop changes, update the segments
   useEffect(() => {
     if (date && !(prevDate && isSameDay(date, prevDate))) {
-      const newSegments = getSegmentsFromDate(date);
+      const newSegments = getFormattedSegmentsFromDate(date);
       onUpdate?.(newSegments, { ...segments });
       dispatch(newSegments);
     }
diff --git a/packages/date-picker/src/utils/index.ts b/packages/date-picker/src/utils/index.ts
index 44e9fb8274..f9b746b021 100644
--- a/packages/date-picker/src/utils/index.ts
+++ b/packages/date-picker/src/utils/index.ts
@@ -8,7 +8,10 @@ export { getFullMonthLabel } from './getFullMonthLabel';
 export { getLastOfMonth } from './getLastOfMonth';
 export { getMonthName } from './getMonthName';
 export { getRemainingParts } from './getRemainingParts';
-export { getSegmentsFromDate } from './getSegmentsFromDate';
+export {
+  getFormattedSegmentsFromDate,
+  getSegmentsFromDate,
+} from './getSegmentsFromDate';
 export { getUTCDateString } from './getUTCDateString';
 export { getValueFormatter } from './getValueFormatter';
 export { getWeeksArray } from './getWeeksArray';

From 892e8c584ea2ea23fb91e970f39ba2a6b65194e0 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 11 Oct 2023 12:53:26 -0400
Subject: [PATCH 209/351] update Range picker with updated callbacks

---
 .../src/DatePicker/DatePicker.types.ts        |  6 +----
 .../DateRangeComponent.types.ts               |  2 +-
 .../DateRangeInput/DateRangeInput.tsx         | 10 +++++++-
 .../DateRangeInput/DateRangeInput.types.ts    |  9 +++++---
 .../DateRangeMenuCalendars.tsx                |  4 ++--
 .../DateRangePicker/DateRangePicker.spec.tsx  | 15 ++++++------
 .../src/DateRangePicker/DateRangePicker.tsx   |  4 ++--
 .../DateRangePicker/DateRangePicker.types.ts  | 23 +++++++++++++------
 8 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index f3c3aff259..a92b568f0e 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -30,11 +30,7 @@ export interface DatePickerProps extends BaseDatePickerProps {
   handleValidation?: (value?: DateType) => void;
 
   /**
-   * Callback fired when any segment changes, but not necessarily a full value
+   * Callback fired when any segment changes, (but not necessarily a full value)
    */
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-  // onSegmentChange?: (
-  //   segment: DateSegment,
-  //   segmentValue: DateSegmentValue,
-  // ) => void;
 }
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
index 266e4887bf..036ba75574 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
@@ -6,7 +6,7 @@ import { DateRangePickerProps } from '../DateRangePicker.types';
 export interface DateRangeComponentProps
   extends Omit<
     DateRangePickerProps,
-    (typeof contextPropNames)[number] | 'onChange'
+    (typeof contextPropNames)[number] | 'onRangeChange'
   > {
   setValue: ReturnType<typeof useControlledValue<DateRangeType>>['setValue'];
 }
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index f6b5727246..bcfc094618 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -23,7 +23,13 @@ const EN_DASH = '–';
 
 export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
   (
-    { value, setValue, handleValidation, ...rest }: DateRangeInputProps,
+    {
+      value,
+      setValue,
+      handleValidation,
+      onChange,
+      ...rest
+    }: DateRangeInputProps,
     fwdRef,
   ) => {
     const { disabled, formatParts, setOpen, setIsDirty } =
@@ -150,12 +156,14 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
             value={value?.[0]}
             setValue={handleStartInputChange}
             segmentRefs={startSegmentRefs}
+            onChange={onChange}
           />
           <span>{EN_DASH}</span>
           <DateInputBox
             value={value?.[1]}
             setValue={handleEndInputChange}
             segmentRefs={endSegmentRefs}
+            onChange={onChange}
           />
         </div>
       </DateFormField>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
index 3051dc4b49..89a314c9f6 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
@@ -1,7 +1,10 @@
+import { HTMLElementProps } from '@leafygreen-ui/lib';
+
 import { DateRangeComponentProps } from '../DateRangeComponent';
 
 export interface DateRangeInputProps
   extends Pick<
-    DateRangeComponentProps,
-    'value' | 'setValue' | 'handleValidation'
-  > {}
+      DateRangeComponentProps,
+      'value' | 'setValue' | 'handleValidation' | 'onChange'
+    >,
+    Omit<HTMLElementProps<'div'>, 'onChange'> {}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index 50cf0bdfa3..1f604c59f7 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -30,7 +30,7 @@ import {
 export const DateRangeMenuCalendars = forwardRef<
   HTMLDivElement,
   DateRangeMenuProps
->(({ value, setValue }) => {
+>(({ value, setValue }, fwdRef) => {
   const { isInRange } = useDatePickerContext();
   const {
     month,
@@ -94,7 +94,7 @@ export const DateRangeMenuCalendars = forwardRef<
   };
 
   return (
-    <div className={calendarsFrameStyles}>
+    <div ref={fwdRef} className={calendarsFrameStyles}>
       {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
         className={calendarsContainerStyles}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index eeb63cfe00..80cad95131 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import range from 'lodash/range';
 
 import { Month } from '../constants';
+import { eventContainingTargetValue } from '../testUtils';
 import { newUTC } from '../utils';
 
 import { renderDateRangePicker } from './DateRangePicker.testutils';
@@ -151,19 +152,19 @@ describe('packages/date-picker/date-range-picker', () => {
         expect(inputElements[0].value).toBe('1'); // Not '01' if not blurred
       });
       test('does not fire range change handler', () => {
-        const onChange = jest.fn();
-        const { inputElements } = renderDateRangePicker({ onChange });
+        const onRangeChange = jest.fn();
+        const { inputElements } = renderDateRangePicker({ onRangeChange });
         userEvent.type(inputElements[0], '1');
-        expect(onChange).not.toHaveBeenCalled();
+        expect(onRangeChange).not.toHaveBeenCalled();
       });
 
-      test.skip('does not fire segment change handler', () => {
-        const onSegmentChange = jest.fn();
+      test('fires segment change handler', () => {
+        const onChange = jest.fn();
         const { inputElements } = renderDateRangePicker({
-          onSegmentChange,
+          onChange,
         });
         userEvent.type(inputElements[0], '1');
-        expect(onSegmentChange).not.toHaveBeenCalled();
+        expect(onChange).toHaveBeenCalledWith(eventContainingTargetValue('1'));
       });
 
       describe('on un-focus/blur', () => {
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
index ef6b0236cb..a131b7ee83 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
@@ -12,7 +12,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
     {
       value: rangeProp,
       initialValue: initialProp,
-      onChange,
+      onRangeChange: onChangeProp,
       showQuickSelection,
       ...props
     }: DateRangePickerProps,
@@ -22,7 +22,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
 
     const { value, setValue } = useControlledValue(
       rangeProp,
-      onChange,
+      onChangeProp,
       initialProp,
     );
 
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts b/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts
index 4e0ae1ba90..dcb1b700df 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts
@@ -1,4 +1,4 @@
-import { MouseEventHandler } from 'react';
+import { ChangeEvent, MouseEventHandler } from 'react';
 
 import { BaseDatePickerProps, DateRangeType } from '../types';
 
@@ -16,7 +16,12 @@ export interface DateRangePickerProps extends BaseDatePickerProps {
    *
    * Callback date arguments will be in Date objects in UTC time, or null
    */
-  onChange?: (range?: DateRangeType) => void;
+  onRangeChange?: (range?: DateRangeType) => void;
+
+  /**
+   * Callback fired when any segment changes, (but not necessarily a full value)
+   */
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 
   /**
    * The initial selected start & end dates.
@@ -25,8 +30,6 @@ export interface DateRangePickerProps extends BaseDatePickerProps {
    */
   initialValue?: DateRangeType;
 
-  // TODO: onSegmentChange: () => {};
-
   /**
    * A callback fired when validation should run, based on our form validation guidelines.
    * Use this callback to compute the correct `state` value.
@@ -37,12 +40,18 @@ export interface DateRangePickerProps extends BaseDatePickerProps {
    */
   handleValidation?: (range?: DateRangeType) => void;
 
-  /** Callback fired when the “clear” button is clicked. */
+  /**
+   * Callback fired when the “clear” button is clicked.
+   */
   onClear?: MouseEventHandler;
 
-  /** Callback fired when the “cancel” button is clicked.  */
+  /**
+   * Callback fired when the “cancel” button is clicked.
+   */
   onCancel?: MouseEventHandler;
 
-  /** Whether or not to show the Quick Range Selection menu */
+  /**
+   * Whether or not to show the Quick Range Selection menu
+   */
   showQuickSelection?: boolean;
 }

From 09637ec9e91bc4cc5908d37517ec2b0502bbbb37 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 11 Oct 2023 13:21:57 -0400
Subject: [PATCH 210/351] update typing & validation handler tests

---
 .../src/DatePicker/DatePicker.spec.tsx        |   2 +-
 .../DateRangePicker/DateRangePicker.spec.tsx  | 110 ++++++++++++++----
 2 files changed, 89 insertions(+), 23 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 2d66f2274e..7ea6d0166d 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -665,7 +665,7 @@ describe('packages/date-picker', () => {
         });
       });
 
-      describe('when a segment is unfocused/blurred', () => {
+      describe('on un-focus/blur', () => {
         test('does not fire a change handler if the value is incomplete', () => {
           const onDateChange = jest.fn();
           const { yearInput } = renderDatePicker({
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 80cad95131..938ed19617 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -145,16 +145,22 @@ describe('packages/date-picker/date-range-picker', () => {
       expect(menuContainerEl).toBeInTheDocument();
     });
 
-    describe('into start date', () => {
+    describe.each([
+      ['start', 0],
+      ['end', 3],
+    ])('into %p input', (input, index) => {
       test('updates segment value', () => {
         const { inputElements } = renderDateRangePicker();
-        userEvent.type(inputElements[0], '1');
-        expect(inputElements[0].value).toBe('1'); // Not '01' if not blurred
+        const element = inputElements[index];
+        userEvent.type(element, '1');
+        expect(element.value).toBe('1'); // Not '01' if not blurred
       });
+
       test('does not fire range change handler', () => {
         const onRangeChange = jest.fn();
         const { inputElements } = renderDateRangePicker({ onRangeChange });
-        userEvent.type(inputElements[0], '1');
+        const element = inputElements[index];
+        userEvent.type(element, '1');
         expect(onRangeChange).not.toHaveBeenCalled();
       });
 
@@ -163,30 +169,90 @@ describe('packages/date-picker/date-range-picker', () => {
         const { inputElements } = renderDateRangePicker({
           onChange,
         });
-        userEvent.type(inputElements[0], '1');
+        const element = inputElements[index];
+        userEvent.type(element, '1');
         expect(onChange).toHaveBeenCalledWith(eventContainingTargetValue('1'));
       });
 
       describe('on un-focus/blur', () => {
-        test.todo('fires a change handler if the value is valid');
-        test.todo('does not fire a change handler if value is incomplete');
-        test.todo('fires a segment change handler');
-        test.todo('fires a validation handler when the value is first set');
-        test.todo('fires a validation handler when the value is updated');
-      });
-    });
+        test('does not fire a change handler if value is incomplete', () => {
+          const onRangeChange = jest.fn();
+          const { inputElements } = renderDateRangePicker({ onRangeChange });
+          const element = inputElements[index];
+          userEvent.type(element, '2023');
+          userEvent.tab();
+          expect(onRangeChange).not.toHaveBeenCalled();
+        });
 
-    describe('into end date', () => {
-      test.todo('updates segment value');
-      test.todo('does not fire range change handler');
-      test.todo('does not fire segment change handler');
+        test('fires a change handler if the value is valid', () => {
+          const onRangeChange = jest.fn();
+          const { inputElements } = renderDateRangePicker({ onRangeChange });
+          const year = inputElements[index];
+          const month = inputElements[index + 1];
+          const day = inputElements[index + 2];
+
+          userEvent.type(year, '2023');
+          userEvent.type(month, '12');
+          userEvent.type(day, '26');
+          userEvent.tab();
+          expect(onRangeChange).toHaveBeenCalledWith(
+            expect.arrayContaining([
+              expect.objectContaining(newUTC(2023, Month.December, 26)),
+            ]),
+          );
+        });
 
-      describe('on un-focus/blur', () => {
-        test.todo('fires a change handler if the value is valid');
-        test.todo('does not fire a change handler if value is incomplete');
-        test.todo('fires a segment change handler');
-        test.todo('fires a validation handler when the value is first set');
-        test.todo('fires a validation handler when the value is updated');
+        test('fires a segment change handler', () => {
+          const onChange = jest.fn();
+          const { inputElements } = renderDateRangePicker({
+            onChange,
+          });
+          const element = inputElements[index];
+          userEvent.type(element, '2023');
+          userEvent.tab();
+          expect(onChange).toHaveBeenCalledWith(
+            eventContainingTargetValue('2023'),
+          );
+        });
+
+        test('fires a validation handler when the value is first set', () => {
+          const handleValidation = jest.fn();
+          const { inputElements } = renderDateRangePicker({
+            handleValidation,
+          });
+          const year = inputElements[index];
+          const month = inputElements[index + 1];
+          const day = inputElements[index + 2];
+          userEvent.type(year, '2023');
+          userEvent.type(month, '12');
+          userEvent.type(day, '26');
+          userEvent.tab();
+
+          expect(handleValidation).toHaveBeenCalledWith(
+            expect.arrayContaining([
+              expect.objectContaining(newUTC(2023, Month.December, 26)),
+            ]),
+          );
+        });
+
+        test('fires a validation handler when the value is updated', () => {
+          const initialStart = newUTC(2023, Month.March, 10);
+          const initialEnd = newUTC(2023, Month.December, 26);
+          const handleValidation = jest.fn();
+          const { inputElements } = renderDateRangePicker({
+            value: [initialStart, initialEnd],
+            handleValidation,
+          });
+          const day = inputElements[index + 2];
+          userEvent.type(day, '15');
+
+          const expectedValue = expect.arrayContaining([
+            input === 'start' ? newUTC(2023, Month.March, 15) : initialStart,
+            input === 'end' ? newUTC(2023, Month.December, 15) : initialEnd,
+          ]);
+
+          expect(handleValidation).toHaveBeenCalledWith(expectedValue);
+        });
       });
     });
   });

From 5c71ebcf34b5c6c9e1d947f9d0466f4c7e580b41 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 11 Oct 2023 13:36:33 -0400
Subject: [PATCH 211/351] creates isSameUTCRange

---
 .../DatePickerComponent.tsx                   |  6 +-
 .../DateRangeComponent/DateRangeComponent.tsx | 12 +++-
 .../DateRangePicker/DateRangePicker.spec.tsx  | 71 ++++++++++---------
 packages/date-picker/src/utils/index.ts       |  1 +
 .../src/utils/isSameUTCRange/index.ts         | 15 ++++
 5 files changed, 65 insertions(+), 40 deletions(-)
 create mode 100644 packages/date-picker/src/utils/isSameUTCRange/index.ts

diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 5787bec0a9..3358a3da5c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -32,16 +32,14 @@ export const DatePickerComponent = forwardRef<
     useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
 
     /** Called when the input's Date value has changed */
-    const handleInputValueChange: DatePickerInputProps['setValue'] = (
-      inputVal: Date | null,
-    ) => {
+    const handleInputValueChange = (inputVal?: Date | null) => {
       if (!isSameUTCDay(inputVal, value)) {
         // When the value changes via the input element,
         // we only trigger validation if the component is dirty
         if (isDirty) {
           handleValidation?.(inputVal);
         }
-        updateValue(inputVal);
+        updateValue(inputVal || null);
       }
     };
 
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
index 4d5c342b17..265aa70764 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
@@ -4,6 +4,7 @@ import { useBackdropClick, useForwardedRef } from '@leafygreen-ui/hooks';
 
 import { useDatePickerContext } from '../../DatePickerContext';
 import { DateRangeType } from '../../types';
+import { isSameUTCRange } from '../../utils';
 import { DateRangeInput } from '../DateRangeInput';
 import { DateRangeMenu } from '../DateRangeMenu';
 
@@ -17,6 +18,7 @@ export const DateRangeComponent = forwardRef<
     {
       value,
       setValue,
+      handleValidation,
       onCancel,
       onClear,
       showQuickSelection,
@@ -40,8 +42,14 @@ export const DateRangeComponent = forwardRef<
 
     /** Called when the input's start or end value has changed */
     const handleInputValueChange = (newRange?: DateRangeType) => {
-      // TODO: more logic here
-      updateValue(newRange);
+      if (!isSameUTCRange(value, newRange)) {
+        // When the value changes via the input element,
+        // we only trigger validation if the component is dirty
+        if (isDirty) {
+          handleValidation?.(newRange);
+        }
+        updateValue(newRange);
+      }
     };
 
     /** Called when any calendar cell is clicked */
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 938ed19617..bcbf5683b4 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -215,43 +215,46 @@ describe('packages/date-picker/date-range-picker', () => {
           );
         });
 
-        test('fires a validation handler when the value is first set', () => {
-          const handleValidation = jest.fn();
-          const { inputElements } = renderDateRangePicker({
-            handleValidation,
+        // eslint-disable-next-line jest/no-disabled-tests
+        describe.skip('validation handler', () => {
+          test('fired when the value is first set', () => {
+            const handleValidation = jest.fn();
+            const { inputElements } = renderDateRangePicker({
+              handleValidation,
+            });
+            const year = inputElements[index];
+            const month = inputElements[index + 1];
+            const day = inputElements[index + 2];
+            userEvent.type(year, '2023');
+            userEvent.type(month, '12');
+            userEvent.type(day, '26');
+            userEvent.tab();
+
+            expect(handleValidation).toHaveBeenCalledWith(
+              expect.arrayContaining([
+                expect.objectContaining(newUTC(2023, Month.December, 26)),
+              ]),
+            );
           });
-          const year = inputElements[index];
-          const month = inputElements[index + 1];
-          const day = inputElements[index + 2];
-          userEvent.type(year, '2023');
-          userEvent.type(month, '12');
-          userEvent.type(day, '26');
-          userEvent.tab();
-
-          expect(handleValidation).toHaveBeenCalledWith(
-            expect.arrayContaining([
-              expect.objectContaining(newUTC(2023, Month.December, 26)),
-            ]),
-          );
-        });
 
-        test('fires a validation handler when the value is updated', () => {
-          const initialStart = newUTC(2023, Month.March, 10);
-          const initialEnd = newUTC(2023, Month.December, 26);
-          const handleValidation = jest.fn();
-          const { inputElements } = renderDateRangePicker({
-            value: [initialStart, initialEnd],
-            handleValidation,
+          test('fired when the value is updated', () => {
+            const initialStart = newUTC(2023, Month.March, 10);
+            const initialEnd = newUTC(2023, Month.December, 26);
+            const handleValidation = jest.fn();
+            const { inputElements } = renderDateRangePicker({
+              value: [initialStart, initialEnd],
+              handleValidation,
+            });
+            const day = inputElements[index + 2];
+            userEvent.type(day, '15');
+
+            const expectedValue = expect.arrayContaining([
+              input === 'start' ? newUTC(2023, Month.March, 15) : initialStart,
+              input === 'end' ? newUTC(2023, Month.December, 15) : initialEnd,
+            ]);
+
+            expect(handleValidation).toHaveBeenCalledWith(expectedValue);
           });
-          const day = inputElements[index + 2];
-          userEvent.type(day, '15');
-
-          const expectedValue = expect.arrayContaining([
-            input === 'start' ? newUTC(2023, Month.March, 15) : initialStart,
-            input === 'end' ? newUTC(2023, Month.December, 15) : initialEnd,
-          ]);
-
-          expect(handleValidation).toHaveBeenCalledWith(expectedValue);
         });
       });
     });
diff --git a/packages/date-picker/src/utils/index.ts b/packages/date-picker/src/utils/index.ts
index f9b746b021..e5acbe68b8 100644
--- a/packages/date-picker/src/utils/index.ts
+++ b/packages/date-picker/src/utils/index.ts
@@ -20,6 +20,7 @@ export { isElementInputSegment } from './isElementInputSegment';
 export { isSameTZDay } from './isSameTZDay';
 export { isSameUTCDay } from './isSameUTCDay';
 export { isSameUTCMonth } from './isSameUTCMonth';
+export { isSameUTCRange } from './isSameUTCRange';
 export { isTodayTZ } from './isTodayTZ';
 export { isValidDate } from './isValidDate';
 export { isValidLocale } from './isValidLocale';
diff --git a/packages/date-picker/src/utils/isSameUTCRange/index.ts b/packages/date-picker/src/utils/isSameUTCRange/index.ts
new file mode 100644
index 0000000000..2fb6b1f514
--- /dev/null
+++ b/packages/date-picker/src/utils/isSameUTCRange/index.ts
@@ -0,0 +1,15 @@
+import isUndefined from 'lodash/isUndefined';
+
+import { isSameUTCDay } from '../isSameUTCDay';
+
+export const isSameUTCRange = (
+  range1?: [Date | null, Date | null],
+  range2?: [Date | null, Date | null],
+): boolean => {
+  if (isUndefined(range1) || isUndefined(range2)) return false;
+
+  const [start1, end1] = range1;
+  const [start2, end2] = range2;
+
+  return isSameUTCDay(start1, start2) && isSameUTCDay(end1, end2);
+};

From b4c1471ad8ac76b8a2e5459311b58b5ee5663e84 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 11 Oct 2023 16:01:39 -0400
Subject: [PATCH 212/351] updates range picker test suite

---
 .../src/DatePicker/DatePicker.spec.tsx        |   4 +-
 .../DatePickerComponent.tsx                   |   2 +-
 .../DateRangeComponent/DateRangeComponent.tsx |   1 +
 .../DateRangeMenu/DateRangeMenu.types.ts      |   4 +-
 .../DateRangeMenuFooter.tsx                   |   2 +-
 .../QuickRangeButton/QuickRangeButton.tsx     |   1 +
 .../QuickSelectionMenu/QuickSelectionMenu.tsx |   1 +
 .../DateRangePicker/DateRangePicker.spec.tsx  | 573 +++++++++++++++---
 .../DateRangePicker.testutils.tsx             |  36 +-
 9 files changed, 542 insertions(+), 82 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 7ea6d0166d..f2aaf75d04 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -324,9 +324,7 @@ describe('packages/date-picker', () => {
         });
 
         test('selecting the month updates the calendar', async () => {
-          const { openMenu, findAllByRole } = renderDatePicker({
-            value: new Date(Date.UTC(2023, Month.December, 26)),
-          });
+          const { openMenu, findAllByRole } = renderDatePicker();
           const { monthSelect, calendarGrid } = openMenu();
           userEvent.click(monthSelect!);
           const options = await findAllByRole('option');
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 3358a3da5c..6972f9923a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -4,7 +4,7 @@ import { useBackdropClick, useForwardedRef } from '@leafygreen-ui/hooks';
 
 import { useDatePickerContext } from '../../DatePickerContext';
 import { isSameUTCDay } from '../../utils';
-import { DatePickerInput, DatePickerInputProps } from '../DatePickerInput';
+import { DatePickerInput } from '../DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
 
 import { DatePickerComponentProps } from './DatePickerComponent.types';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
index 265aa70764..823d913c64 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
@@ -69,6 +69,7 @@ export const DateRangeComponent = forwardRef<
         <DateRangeMenu
           ref={menuRef}
           refEl={formFieldRef}
+          id={menuId}
           value={value}
           setValue={handleCalendarValueChange}
         />
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
index 49c4976dca..447b34b3d7 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
@@ -1,3 +1,4 @@
+import { HTMLElementProps } from '@leafygreen-ui/lib';
 import { PopoverProps, PortalControlProps } from '@leafygreen-ui/popover';
 
 import { DateRangeComponentProps } from '../DateRangeComponent';
@@ -7,4 +8,5 @@ export type DateRangeMenuProps = PortalControlProps &
   Pick<
     DateRangeComponentProps,
     'value' | 'setValue' | 'showQuickSelection' | 'handleValidation' // TODO: Setter
-  > & {};
+  > &
+  HTMLElementProps<'div'> & {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
index 62041ff92e..e823518569 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
@@ -7,7 +7,7 @@ import { clearButtonStyles, footerStyles } from './DateRangeMenuFooter.styles';
 
 export const DateRangeMenuFooter = () => {
   return (
-    <div className={footerStyles}>
+    <div className={footerStyles} data-lg="date-range-picker-menu-footer">
       <Link as="button" className={clearButtonStyles}>
         Clear
       </Link>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
index 9d2d894bcc..d788bc9734 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
@@ -18,6 +18,7 @@ export const QuickRangeButton = forwardRef<
   return (
     <button
       ref={fwdRef}
+      data-lg="date-range-picker-quick-range-button"
       className={cx(
         baseQuickRangeButtonStyles,
         baseQuickRangeButtonThemeStyles[theme],
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
index 2c6b078666..417ea36655 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
@@ -40,6 +40,7 @@ export const QuickSelectionMenu = forwardRef<HTMLDivElement, {}>(
       <div
         ref={fwdRef}
         className={cx(quickSelectMenuStyles, quickSelectMenuThemeStyles[theme])}
+        data-lg="date-range-picker-quick-select-menu"
       >
         <div className={quickSelectMenuMonthSelectContainerStyles}>
           <Select
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index bcbf5683b4..1b4d8fbeed 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -1,11 +1,17 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
+import {
+  queryByText as globalQueryByText,
+  render,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import last from 'lodash/last';
 import range from 'lodash/range';
 
 import { Month } from '../constants';
-import { eventContainingTargetValue } from '../testUtils';
-import { newUTC } from '../utils';
+import { eventContainingTargetValue, tabNTimes } from '../testUtils';
+import { newUTC, setUTCDate } from '../utils';
 
 import { renderDateRangePicker } from './DateRangePicker.testutils';
 import { DateRangePicker } from '.';
@@ -108,7 +114,12 @@ describe('packages/date-picker/date-range-picker', () => {
 
       test('if no value is set, menu opens to current month', () => {
         const { openMenu } = renderDateRangePicker();
-        const { calendarGrids } = openMenu();
+        const { calendarGrids, menuContainerEl } = openMenu();
+
+        const headers = menuContainerEl?.querySelectorAll('h6');
+        expect(headers?.[0]).toHaveTextContent('December 2023');
+        expect(headers?.[1]).toHaveTextContent('January 2024');
+
         expect(calendarGrids?.[0]).toHaveAttribute(
           'aria-label',
           'December 2023',
@@ -123,8 +134,13 @@ describe('packages/date-picker/date-range-picker', () => {
         const { openMenu } = renderDateRangePicker({
           value: [newUTC(2023, Month.March, 10), null],
         });
-        const { calendarGrids } = openMenu();
+
+        const { calendarGrids, menuContainerEl } = openMenu();
+        const headers = menuContainerEl?.querySelectorAll('h6');
+        expect(headers?.[0]).toHaveTextContent('March 2023');
+        expect(headers?.[1]).toHaveTextContent('April 2023');
         expect(calendarGrids?.[0]).toHaveAttribute('aria-label', 'March 2023');
+        expect(calendarGrids?.[1]).toHaveAttribute('aria-label', 'April 2023');
       });
 
       test('renders the appropriate number of cells', () => {
@@ -306,99 +322,427 @@ describe('packages/date-picker/date-range-picker', () => {
         });
       });
 
-      describe('Clicking a calendar cell', () => {
-        test.todo(
-          'if no value is set, fires a change handler for the start date',
-        );
-        test.todo(
-          'if only start value is set, fires change handler for the end date',
-        );
-        test.todo(
-          'if only end value is set, fires change handler for the start date',
-        );
-
-        describe('if a full range is set', () => {
-          test.todo('fires a change handler for start date');
-          test.todo('fires a change handler to clear the end date');
+      describe('Clicking the Calendar button', () => {
+        test('opens the menu', () => {
+          const { calendarButton, getMenuElements } = renderDateRangePicker();
+          userEvent.click(calendarButton);
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).toBeInTheDocument();
         });
       });
 
-      describe('Clicking the Apply button', () => {
-        test.todo('fires a change handler with the current input value');
-      });
+      describe('Basic menu', () => {
+        describe('Clicking a calendar cell', () => {
+          test('if no value is set, fires a change handler to set the start date', () => {
+            const onRangeChange = jest.fn();
+            const { openMenu } = renderDateRangePicker({
+              value: [null, null],
+              onRangeChange,
+            });
+            const { calendarCells } = openMenu();
+            const firstCell = calendarCells[0];
+            userEvent.click(firstCell);
+            expect(onRangeChange).toHaveBeenCalledWith(
+              expect.arrayContaining([setUTCDate(testToday, 1), null]),
+            );
+          });
 
-      describe('Clicking the Cancel button', () => {
-        test.todo('fires an onCancel handler');
-        test.todo('fires a change handler with the previous input value');
-      });
+          test('if only start value is set, fires change handler to set the end date', () => {
+            const onRangeChange = jest.fn();
+            const startDate = newUTC(2023, Month.September, 10);
+            const { openMenu } = renderDateRangePicker({
+              value: [startDate, null],
+              onRangeChange,
+            });
+            const { calendarCells } = openMenu();
+            const lastCell = last(calendarCells);
+            userEvent.click(lastCell!);
 
-      describe('Clicking the Clear button', () => {
-        test.todo('fires an onClear handler');
-        test.todo('fires a change handler with the to clear the range values');
-      });
+            expect(onRangeChange).toHaveBeenCalledWith(
+              expect.arrayContaining([
+                startDate,
+                newUTC(2023, Month.October, 31),
+              ]),
+            );
+          });
 
-      describe('Clicking a Chevron', () => {
-        describe('Left', () => {
-          test.todo('does not close the menu');
+          test('if only end value is set, fires change handler to set the start date', () => {
+            const onRangeChange = jest.fn();
+            const endDate = newUTC(2023, Month.September, 10);
+            const { openMenu } = renderDateRangePicker({
+              value: [null, endDate],
+              onRangeChange,
+            });
+            const { calendarCells } = openMenu();
+            const firstCell = calendarCells[0];
+            userEvent.click(firstCell);
+            expect(onRangeChange).toHaveBeenCalledWith(
+              expect.arrayContaining([newUTC(2023, Month.August, 1), endDate]),
+            );
+          });
 
-          test.todo('updates the displayed month to the previous');
+          describe('if a full range is set', () => {
+            test('fires a change handler to set the start date & clear the end date', () => {
+              const onRangeChange = jest.fn();
+              const startDate = newUTC(2023, Month.September, 10);
+              const endDate = newUTC(2023, Month.October, 31);
+              const { openMenu } = renderDateRangePicker({
+                value: [startDate, endDate],
+                onRangeChange,
+              });
+              const { calendarCells } = openMenu();
+              const firstCell = calendarCells[0];
+              userEvent.click(firstCell);
+              expect(onRangeChange).toHaveBeenCalledWith(
+                expect.arrayContaining([
+                  newUTC(2023, Month.September, 1),
+                  null,
+                ]),
+              );
+            });
+          });
+        });
 
-          test.todo(
-            'updates the displayed month to the previous, and updates year',
-          );
+        describe('Clicking a Chevron', () => {
+          describe('Left', () => {
+            test('does not close the menu', () => {
+              const { openMenu } = renderDateRangePicker();
+              const { leftChevron, menuContainerEl } = openMenu();
+              userEvent.click(leftChevron!);
+              expect(menuContainerEl).toBeInTheDocument();
+            });
+
+            test('updates the displayed month to the previous', () => {
+              const { openMenu } = renderDateRangePicker();
+              const { leftChevron, menuContainerEl } = openMenu();
+              userEvent.click(leftChevron!);
+              const monthHeaders = menuContainerEl?.querySelectorAll('h6');
+              expect(monthHeaders?.[0]).toHaveTextContent('November 2023');
+              expect(monthHeaders?.[1]).toHaveTextContent('December 2023');
+            });
+          });
+
+          describe('Right', () => {
+            test('does not close the menu', () => {
+              const { openMenu } = renderDateRangePicker();
+              const { rightChevron, menuContainerEl } = openMenu();
+              userEvent.click(rightChevron!);
+              expect(menuContainerEl).toBeInTheDocument();
+            });
+
+            test('updates the displayed month to the next', () => {
+              const { openMenu } = renderDateRangePicker();
+              const { rightChevron, menuContainerEl } = openMenu();
+              userEvent.click(rightChevron!);
+              const monthHeaders = menuContainerEl?.querySelectorAll('h6');
+              expect(monthHeaders?.[0]).toHaveTextContent('January 2024');
+              expect(monthHeaders?.[1]).toHaveTextContent('February 2024');
+            });
+          });
         });
 
-        describe('Right', () => {
-          test.todo('does not close the menu');
+        describe('Clicking the Apply button', () => {
+          test('fires a change handler with the current input value', () => {
+            const start = newUTC(2023, Month.April, 1);
+            const end = newUTC(2023, Month.July, 5);
+            const onRangeChange = jest.fn();
+            const { inputElements, getMenuElements } = renderDateRangePicker({
+              onRangeChange,
+              value: [start, end],
+            });
+            userEvent.type(inputElements[2], '5');
+            const { menuFooter } = getMenuElements();
+            const applyButton = globalQueryByText(menuFooter!, 'Apply');
+            userEvent.click(applyButton!);
+            expect(onRangeChange).toHaveBeenCalledWith(
+              expect.arrayContaining([setUTCDate(start, 5), end]),
+            );
+          });
+        });
 
-          test.todo('updates the displayed month to the next');
+        describe('Clicking the Cancel button', () => {
+          test('fires an onCancel handler', () => {
+            const start = newUTC(2023, Month.April, 1);
+            const end = newUTC(2023, Month.July, 5);
+            const onCancel = jest.fn();
+            const { inputElements, getMenuElements } = renderDateRangePicker({
+              onCancel,
+              value: [start, end],
+            });
+            userEvent.type(inputElements[2], '5');
+            const { menuFooter } = getMenuElements();
+            const cancelButton = globalQueryByText(menuFooter!, 'Cancel');
+            userEvent.click(cancelButton!);
+            expect(onCancel).toHaveBeenCalled();
+          });
 
-          test.todo('updates the displayed month to the next and updates year');
+          test('fires a change handler with the previous input value', () => {
+            const start = newUTC(2023, Month.April, 1);
+            const end = newUTC(2023, Month.July, 5);
+            const onRangeChange = jest.fn();
+            const { inputElements, getMenuElements } = renderDateRangePicker({
+              onRangeChange,
+              value: [start, end],
+            });
+            userEvent.type(inputElements[2], '5');
+            const { menuFooter } = getMenuElements();
+            const cancelButton = globalQueryByText(menuFooter!, 'Cancel');
+            userEvent.click(cancelButton!);
+            expect(onRangeChange).toHaveBeenCalledWith(
+              expect.arrayContaining([start, end]),
+            );
+          });
+        });
+
+        describe('Clicking the Clear button', () => {
+          test('fires an onClear handler', () => {
+            const start = newUTC(2023, Month.April, 1);
+            const end = newUTC(2023, Month.July, 5);
+            const onClear = jest.fn();
+            const { openMenu } = renderDateRangePicker({
+              onClear,
+              value: [start, end],
+            });
+            const { menuFooter } = openMenu();
+            const clearButton = globalQueryByText(menuFooter!, 'Clear');
+            userEvent.click(clearButton!);
+            expect(onClear).toHaveBeenCalled();
+          });
+          test('fires a change handler with the to clear the range values', () => {
+            const start = newUTC(2023, Month.April, 1);
+            const end = newUTC(2023, Month.July, 5);
+            const onRangeChange = jest.fn();
+            const { openMenu } = renderDateRangePicker({
+              onRangeChange,
+              value: [start, end],
+            });
+            const { menuFooter } = openMenu();
+            const clearButton = globalQueryByText(menuFooter!, 'Clear');
+            userEvent.click(clearButton!);
+            expect(onRangeChange).toHaveBeenCalledWith(
+              expect.arrayContaining([null, null]),
+            );
+          });
         });
       });
 
-      describe('Month select menu', () => {
-        test.todo('menu opens over the calendar menu');
+      describe('Quick Select menu', () => {
+        describe('Month select menu', () => {
+          test('menu opens over the calendar menu', () => {
+            const { openMenu, queryAllByRole } = renderDateRangePicker({
+              showQuickSelection: true,
+            });
+            const { monthSelect, menuContainerEl } = openMenu();
+            userEvent.click(monthSelect!);
+            expect(menuContainerEl).toBeInTheDocument();
+            const listBoxes = queryAllByRole('listbox');
+            expect(listBoxes).toHaveLength(2);
+          });
 
-        test.todo('selecting the month updates the calendar');
-      });
+          test('selecting the month updates the calendar', async () => {
+            const { openMenu, findAllByRole } = renderDateRangePicker({
+              showQuickSelection: true,
+            });
+            const { monthSelect, calendarGrids } = openMenu();
+            userEvent.click(monthSelect!);
+            const options = await findAllByRole('option');
+            const Jan = options[0];
+            userEvent.click(Jan);
+            expect(calendarGrids?.[0]).toHaveAttribute(
+              'aria-label',
+              'January 2023',
+            );
+            expect(calendarGrids?.[1]).toHaveAttribute(
+              'aria-label',
+              'February 2023',
+            );
+          });
+        });
 
-      describe('Year select menu', () => {
-        test.todo('menu opens over the calendar menu');
+        describe('Year select menu', () => {
+          test('menu opens over the calendar menu', () => {
+            const { openMenu, queryAllByRole } = renderDateRangePicker({
+              showQuickSelection: true,
+            });
+            const { yearSelect, menuContainerEl } = openMenu();
+            userEvent.click(yearSelect!);
+            expect(menuContainerEl).toBeInTheDocument();
+            const listBoxes = queryAllByRole('listbox');
+            expect(listBoxes).toHaveLength(2);
+          });
 
-        test.todo('selecting the year updates the calendar');
+          test.todo('selecting the year updates the calendar', async () => {
+            const { openMenu, findAllByRole } = renderDateRangePicker({
+              showQuickSelection: true,
+            });
+            const { yearSelect, calendarGrids } = openMenu();
+            userEvent.click(yearSelect!);
+            const options = await findAllByRole('option');
+            const _1970 = options[1];
+            userEvent.click(_1970);
+            expect(calendarGrids?.[0]).toHaveAttribute(
+              'aria-label',
+              'December 1970',
+            );
+            expect(calendarGrids?.[1]).toHaveAttribute(
+              'aria-label',
+              'January 1971',
+            );
+          });
+        });
       });
 
       describe('Clicking backdrop', () => {
-        test.todo('closes the menu');
-        test.todo('does not fire a change handler');
+        test('closes the menu', async () => {
+          const { openMenu, container } = renderDateRangePicker();
+          const { menuContainerEl } = openMenu();
+          userEvent.click(container.parentElement!);
+          await waitForElementToBeRemoved(menuContainerEl);
+        });
+
+        test('does not fire a change handler', () => {
+          const onRangeChange = jest.fn();
+          const { openMenu, container } = renderDateRangePicker({
+            onRangeChange,
+          });
+          openMenu();
+          userEvent.click(container.parentElement!);
+          expect(onRangeChange).not.toHaveBeenCalled();
+        });
       });
     });
 
     describe('Keyboard interaction', () => {
       describe('Tab', () => {
-        test.todo('menu does not open on initial focus');
+        test('menu does not open on initial focus', () => {
+          const { inputContainer } = renderDateRangePicker();
+          tabNTimes(1);
+          expect(inputContainer.contains(document.activeElement)).toBeFalsy();
+        });
 
-        const closedTabStops = 3 + 3 + 1; // start + end + button
-        const basicMenuTabStops = closedTabStops + 3; // chevrons + cell
-        const quickSelectTabStops = basicMenuTabStops + 2 + 7; // selects + quick select buttons
+        const closedTabStops = 3 + 3 + 1; // = 7; start + end + button
+        const basicMenuTabStops = closedTabStops + 3; // = 10; chevrons + cell
+        const quickSelectTabStops = basicMenuTabStops + 2 + 7; // = 19; selects + quick select buttons
 
         describe('Tab order', () => {
           describe.each(range(0, closedTabStops))('when menu is closed', n => {
-            test.todo(`Tab ${n} times`);
+            test(`Tab ${n} times`, () => {
+              const { inputContainer, inputElements, calendarButton } =
+                renderDateRangePicker();
+              tabNTimes(n);
+
+              // initial tab & final tab do not have focus in the component
+              if (n === 0 || n === closedTabStops) {
+                expect(
+                  inputContainer.contains(document.activeElement),
+                ).toBeFalsy();
+              } else if (n === closedTabStops - 1) {
+                // second last tab focuses on button
+                expect(calendarButton).toHaveFocus();
+              } else {
+                // otherwise, tab focuses on the next input element
+                expect(inputElements[n - 1]).toHaveFocus();
+              }
+            });
           });
 
           describe.each(range(0, basicMenuTabStops))(
             'when basic menu is open',
             n => {
-              test.todo(`Tab ${n} times`);
+              test(`Tab ${n} times`, () => {
+                const { inputElements, calendarButton, openMenu } =
+                  renderDateRangePicker();
+                tabNTimes(n);
+
+                const { leftChevron, rightChevron, todayCell } = openMenu();
+
+                if (n <= 5) {
+                  // initial focus is on first input when the menu opens,
+                  // then follows inputs sequentially
+                  expect(inputElements[n]).toHaveFocus();
+                }
+
+                switch (n) {
+                  case 6:
+                    expect(calendarButton).toHaveFocus();
+                    break;
+                  case 7:
+                    expect(todayCell).toHaveFocus();
+                    break;
+                  case 8:
+                    expect(leftChevron).toHaveFocus();
+                    break;
+                  case 9:
+                    expect(rightChevron).toHaveFocus();
+                    break;
+                  case 10:
+                    // Focus is trapped within the menu
+                    expect(todayCell).toHaveFocus();
+                    break;
+                }
+              });
             },
           );
 
           describe.each(range(0, quickSelectTabStops))(
             'when quick select menu is open',
             n => {
-              test.todo(`Tab ${n} times`);
+              test(`Tab ${n} times`, () => {
+                const { inputElements, calendarButton, openMenu } =
+                  renderDateRangePicker({
+                    showQuickSelection: true,
+                  });
+                tabNTimes(n);
+
+                const {
+                  monthSelect,
+                  yearSelect,
+                  quickRangeButtons,
+                  leftChevron,
+                  rightChevron,
+                  todayCell,
+                } = openMenu();
+
+                if (n <= 5) {
+                  // initial focus is on first input when the menu opens,
+                  // then follows inputs sequentially
+                  expect(inputElements[n]).toHaveFocus();
+                }
+
+                switch (n) {
+                  case 6:
+                    expect(calendarButton).toHaveFocus();
+                    break;
+                  case 7:
+                    expect(todayCell).toHaveFocus();
+                    break;
+                  case 8:
+                    expect(monthSelect).toHaveFocus();
+                    break;
+                  case 9:
+                    expect(yearSelect).toHaveFocus();
+                    break;
+                  case 10:
+                  case 11:
+                  case 12:
+                  case 13:
+                  case 14:
+                  case 15:
+                  case 16:
+                    expect(quickRangeButtons[n + 10]).toHaveFocus();
+                    break;
+                  case 17:
+                    expect(leftChevron).toHaveFocus();
+                    break;
+                  case 18:
+                    expect(rightChevron).toHaveFocus();
+                    break;
+                  case 19:
+                    // Focus is trapped within the menu
+                    expect(todayCell).toHaveFocus();
+                    break;
+                }
+              });
             },
           );
         });
@@ -408,21 +752,112 @@ describe('packages/date-picker/date-range-picker', () => {
       });
 
       describe('Enter key', () => {
-        test.todo('if menu is closed, does not open the menu');
-        test.todo('opens menu if calendar button is focused');
-        test.todo('calls validation handler');
-        test.todo('if month/year select is focused, opens the select menu');
-        test.todo('if a cell is focused, fires a change handler');
-        test.todo('if a cell is focused, closes the menu');
-        test.todo('if a Chevron is focused, updates the displayed month');
-        test.todo('if Quick Select button is clicked, fires change handler');
+        test('if menu is closed, does not open the menu', () => {
+          const { inputElements, getMenuElements } = renderDateRangePicker();
+          userEvent.type(inputElements[0], '{enter}');
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).not.toBeInTheDocument();
+        });
+
+        test('opens menu if calendar button is focused', () => {
+          const { calendarButton, getMenuElements } = renderDateRangePicker();
+          userEvent.type(calendarButton, '{enter}');
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).toBeInTheDocument();
+        });
+
+        test('calls validation handler', () => {
+          const handleValidation = jest.fn();
+          const { inputElements } = renderDateRangePicker({
+            handleValidation,
+          });
+          userEvent.type(inputElements[0], '{enter}');
+          expect(handleValidation).toHaveBeenCalled();
+        });
+
+        test('if a cell is focused, fires a change handler', () => {
+          const onRangeChange = jest.fn();
+          const { openMenu } = renderDateRangePicker({ onRangeChange });
+          const { calendarCells } = openMenu();
+          const firstCell = calendarCells[0];
+          userEvent.type(firstCell, '{enter}');
+          expect(onRangeChange).toHaveBeenCalled();
+        });
+
+        test('if a cell is focused, closes the menu', async () => {
+          const { openMenu } = renderDateRangePicker();
+          const { calendarCells, menuContainerEl } = openMenu();
+          const firstCell = calendarCells[0];
+          userEvent.type(firstCell, '{enter}');
+          await waitForElementToBeRemoved(menuContainerEl);
+          expect(menuContainerEl).not.toBeInTheDocument();
+        });
+
+        test('if a Chevron is focused, updates the displayed month', () => {
+          const { openMenu } = renderDateRangePicker();
+          const { leftChevron, menuContainerEl } = openMenu();
+          userEvent.type(leftChevron!, '{enter}');
+          const monthHeaders = menuContainerEl?.querySelectorAll('h6');
+          expect(monthHeaders?.[0]).toHaveTextContent('November 2023');
+          expect(monthHeaders?.[1]).toHaveTextContent('December 2023');
+        });
+
+        test('if Quick Select button is clicked, fires change handler', () => {
+          const onRangeChange = jest.fn();
+          const { openMenu } = renderDateRangePicker({
+            showQuickSelection: true,
+            onRangeChange,
+          });
+          const { quickRangeButtons } = openMenu();
+          userEvent.type(quickRangeButtons?.[0]!, '{enter}');
+          expect(onRangeChange).toHaveBeenCalled(); // TODO: with
+        });
+
+        test('if month/year select is focused, opens the select menu', () => {
+          const { openMenu, queryAllByRole } = renderDateRangePicker({
+            showQuickSelection: true,
+          });
+          const { monthSelect } = openMenu();
+          userEvent.type(monthSelect!, '{enter}');
+          const listBoxes = queryAllByRole('listbox');
+          expect(listBoxes).toHaveLength(2);
+        });
       });
 
       describe('Escape key', () => {
-        test.todo('closes the menu');
-        test.todo('does not fire a change handler');
-        test.todo('fires a validation handler');
-        test.todo('focus remains in the input element');
+        test('closes the menu', async () => {
+          const { openMenu } = renderDateRangePicker();
+          const { menuContainerEl } = openMenu();
+          userEvent.keyboard('{escape}');
+          await waitForElementToBeRemoved(menuContainerEl);
+          expect(menuContainerEl).not.toBeInTheDocument();
+        });
+
+        test('does not fire a change handler', () => {
+          const onRangeChange = jest.fn();
+          const { openMenu } = renderDateRangePicker({ onRangeChange });
+          openMenu();
+          userEvent.keyboard('{escape}');
+          expect(onRangeChange).not.toHaveBeenCalled();
+        });
+
+        test('fires a validation handler', () => {
+          const handleValidation = jest.fn();
+          const { openMenu } = renderDateRangePicker({ handleValidation });
+          openMenu();
+          userEvent.keyboard('{escape}');
+          expect(handleValidation).toHaveBeenCalledWith([null, null]);
+        });
+
+        test('focus remains in the input element', () => {
+          const handleValidation = jest.fn();
+          const { openMenu, inputContainer } = renderDateRangePicker({
+            handleValidation,
+          });
+          openMenu();
+          userEvent.keyboard('{escape}');
+          expect(inputContainer.contains(document.activeElement)).toBeTruthy();
+        });
       });
 
       /**
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
index bba0835bfc..c8a6c55189 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
@@ -21,11 +21,14 @@ interface RenderMenuResult {
   menuContainerEl: HTMLElement | null;
   leftChevron: HTMLButtonElement | null;
   rightChevron: HTMLButtonElement | null;
-  monthSelect: HTMLButtonElement | null;
-  yearSelect: HTMLButtonElement | null;
   calendarGrids: Array<HTMLTableElement> | null;
   calendarCells: Array<HTMLTableCellElement>;
   todayCell: HTMLTableCellElement | null;
+  menuFooter: HTMLDivElement | null;
+  quickSelectMenu: HTMLDivElement | null;
+  monthSelect: HTMLButtonElement | null;
+  yearSelect: HTMLButtonElement | null;
+  quickRangeButtons: Array<HTMLButtonElement | null>;
 }
 
 /**
@@ -75,15 +78,31 @@ export const renderDateRangePicker = (
     const rightChevron = result.queryByLabelText(
       'Next month',
     ) as HTMLButtonElement;
+    const todayCell = menuContainerEl?.querySelector(
+      '[aria-current="true"]',
+    ) as HTMLTableCellElement;
+
+    // Footer
+    const menuFooter = menuContainerEl?.querySelector(
+      '[data-lg="date-range-picker-menu-footer"]',
+    ) as HTMLDivElement | null;
+
+    // Quick select menu
+    const quickSelectMenu = menuContainerEl?.querySelector(
+      '[data-lg="date-range-picker-quick-select-menu"]',
+    ) as HTMLDivElement | null;
     const monthSelect = result.queryByLabelText(
       'Select month',
-    ) as HTMLButtonElement;
+    ) as HTMLButtonElement | null;
     const yearSelect = result.queryByLabelText(
       'Select year',
-    ) as HTMLButtonElement;
-    const todayCell = menuContainerEl?.querySelector(
-      '[aria-current="true"]',
-    ) as HTMLTableCellElement;
+    ) as HTMLButtonElement | null;
+
+    const quickRangeButtons = Array.from(
+      quickSelectMenu?.querySelectorAll(
+        '[data-lg="date-range-picker-quick-range-button"]',
+      ) || [null],
+    ) as Array<HTMLButtonElement | null>;
 
     return {
       menuContainerEl,
@@ -92,8 +111,11 @@ export const renderDateRangePicker = (
       todayCell,
       leftChevron,
       rightChevron,
+      menuFooter,
+      quickSelectMenu,
       monthSelect,
       yearSelect,
+      quickRangeButtons,
     };
   }
 

From fd4854ec221863273f48cdce5f2606b0dd904c2a Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 11 Oct 2023 16:12:52 -0400
Subject: [PATCH 213/351] Update DateRangePicker.spec.tsx

---
 .../DateRangePicker/DateRangePicker.spec.tsx  | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 1b4d8fbeed..a6a2e2b883 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -571,7 +571,7 @@ describe('packages/date-picker/date-range-picker', () => {
             expect(listBoxes).toHaveLength(2);
           });
 
-          test.todo('selecting the year updates the calendar', async () => {
+          test('selecting the year updates the calendar', async () => {
             const { openMenu, findAllByRole } = renderDateRangePicker({
               showQuickSelection: true,
             });
@@ -620,11 +620,26 @@ describe('packages/date-picker/date-range-picker', () => {
           expect(inputContainer.contains(document.activeElement)).toBeFalsy();
         });
 
-        const closedTabStops = 3 + 3 + 1; // = 7; start + end + button
-        const basicMenuTabStops = closedTabStops + 3; // = 10; chevrons + cell
-        const quickSelectTabStops = basicMenuTabStops + 2 + 7; // = 19; selects + quick select buttons
+        test('calls validation handler when last segment is unfocused', () => {
+          const handleValidation = jest.fn();
+          const { inputElements } = renderDateRangePicker({ handleValidation });
+          userEvent.click(inputElements[5]);
+          userEvent.tab();
+          expect(handleValidation).toHaveBeenCalled();
+        });
+
+        test('does not call validation handler when changing segment', () => {
+          const handleValidation = jest.fn();
+          const { inputElements } = renderDateRangePicker({ handleValidation });
+          userEvent.click(inputElements[0]);
+          userEvent.tab();
+          expect(handleValidation).not.toHaveBeenCalled();
+        });
 
         describe('Tab order', () => {
+          const closedTabStops = 3 + 3 + 1; // = 7; start + end + button
+          const basicMenuTabStops = closedTabStops + 3; // = 10; chevrons + cell
+          const quickSelectTabStops = basicMenuTabStops + 2 + 7; // = 19; selects + quick select buttons
           describe.each(range(0, closedTabStops))('when menu is closed', n => {
             test(`Tab ${n} times`, () => {
               const { inputContainer, inputElements, calendarButton } =
@@ -746,9 +761,6 @@ describe('packages/date-picker/date-range-picker', () => {
             },
           );
         });
-
-        test.todo('calls validation handler when last segment is unfocused');
-        test.todo('does not call validation handler when changing segment');
       });
 
       describe('Enter key', () => {

From 37c5c3f92b61c2ed1cc0d17fe294a357928a2256 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 11 Oct 2023 18:46:21 -0400
Subject: [PATCH 214/351] over-engineering the tab stop tests

---
 .../DateRangeInput/DateRangeInput.tsx         |   2 +
 .../DateRangeMenu/DateRangeMenu.styles.ts     |  12 +
 .../DateRangeMenu/DateRangeMenu.tsx           |  16 +-
 .../DateRangeMenuCalendars.styles.ts          |   5 +
 .../DateRangeMenuCalendars.tsx                |   4 +-
 .../QuickRangeButton/QuickRangeButton.tsx     |   3 +-
 .../QuickSelectionMenu.styles.ts              |   6 +-
 .../QuickSelectionMenu/QuickSelectionMenu.tsx |   7 +-
 .../DateRangePicker/DateRangePicker.spec.tsx  | 206 +++++++-----------
 .../DateRangePicker.stories.tsx               |   2 +-
 .../DateRangePicker.testutils.tsx             |  90 +++++++-
 11 files changed, 219 insertions(+), 134 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index bcfc094618..fbf6931936 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -153,6 +153,7 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
       >
         <div className={inputWrapperStyles}>
           <DateInputBox
+            data-lg="date-range-input-start"
             value={value?.[0]}
             setValue={handleStartInputChange}
             segmentRefs={startSegmentRefs}
@@ -160,6 +161,7 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
           />
           <span>{EN_DASH}</span>
           <DateInputBox
+            data-lg="date-range-input-end"
             value={value?.[1]}
             setValue={handleEndInputChange}
             segmentRefs={endSegmentRefs}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts
index 1ce1788872..5ef89b0e6b 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts
@@ -1,5 +1,8 @@
 import { css } from '@leafygreen-ui/emotion';
 
+import { calendarsClassName } from './DateRangeMenuCalendars/DateRangeMenuCalendars.styles';
+import { quickSelectionClassName } from './QuickSelectionMenu/QuickSelectionMenu.styles';
+
 export const rangeMenuWrapperStyles = css`
   padding: 0; // needs to be set by inner content
   z-index: 1;
@@ -9,5 +12,14 @@ export const menuContentStyles = css`
   display: grid;
   grid-auto-flow: column;
   grid-template-columns: max-content auto;
+  grid-template-areas: 'quick-select calendars';
   z-index: 1;
+
+  & > .${quickSelectionClassName} {
+    grid-area: quick-select;
+  }
+
+  & > .${calendarsClassName} {
+    grid-area: calendars;
+  }
 `;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index ae9f249171..4d59c614ce 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -1,5 +1,6 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, KeyboardEventHandler } from 'react';
 
+import { keyMap } from '@leafygreen-ui/lib';
 import { spacing } from '@leafygreen-ui/tokens';
 
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
@@ -22,22 +23,31 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
   ) => {
     const { isOpen } = useDatePickerContext();
 
-    // TODO: Focus trap
+    // Focus trap
+    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
+      if (e.key === keyMap.Tab) {
+        const currentFocus = document.activeElement;
+
+        // if focus is on a cell, move focus to the footer
+      }
+    };
 
     return (
       <DateRangeMenuProvider value={value}>
         <MenuWrapper
+          data-lg="date-range-menu"
           ref={fwdRef}
           usePortal
           role="listbox"
           active={isOpen}
           spacing={spacing[1]}
           className={rangeMenuWrapperStyles}
+          onKeyDown={handleKeyDown}
           {...rest}
         >
           <div className={menuContentStyles}>
-            {showQuickSelection && <QuickSelectionMenu />}
             <DateRangeMenuCalendars value={value} setValue={setValue} />
+            {showQuickSelection && <QuickSelectionMenu />}
           </div>
           <DateRangeMenuFooter />
         </MenuWrapper>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
index b29b4b3965..f57c3924da 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
@@ -1,8 +1,13 @@
 import { css } from '@leafygreen-ui/emotion';
+import { createUniqueClassName } from '@leafygreen-ui/lib';
 import { spacing, typeScales } from '@leafygreen-ui/tokens';
 
 const calendarGapX = spacing[4] * 2;
 
+export const calendarsClassName = createUniqueClassName(
+  'date-range-menu-calendars',
+);
+
 export const calendarsFrameStyles = css`
   display: grid;
   grid-template-rows: 28px auto; // Size of icon-button
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index 1f604c59f7..5ae12146de 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -1,5 +1,6 @@
 import React, { forwardRef, KeyboardEventHandler, useState } from 'react';
 
+import { cx } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import { Subtitle } from '@leafygreen-ui/typography';
@@ -23,6 +24,7 @@ import { useDateRangeMenuContext } from '../DateRangeMenuContext';
 import {
   calendarHeadersContainerStyle,
   calendarHeaderStyles,
+  calendarsClassName,
   calendarsContainerStyles,
   calendarsFrameStyles,
 } from './DateRangeMenuCalendars.styles';
@@ -94,7 +96,7 @@ export const DateRangeMenuCalendars = forwardRef<
   };
 
   return (
-    <div ref={fwdRef} className={calendarsFrameStyles}>
+    <div ref={fwdRef} className={cx(calendarsClassName, calendarsFrameStyles)}>
       {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
         className={calendarsContainerStyles}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
index d788bc9734..d803fe7b71 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { HTMLElementProps } from '@leafygreen-ui/lib';
+import { getNodeTextContent, HTMLElementProps } from '@leafygreen-ui/lib';
 
 import {
   baseQuickRangeButtonStyles,
@@ -24,6 +24,7 @@ export const QuickRangeButton = forwardRef<
         baseQuickRangeButtonThemeStyles[theme],
         className,
       )}
+      aria-label={getNodeTextContent(children)}
       {...rest}
     >
       {children}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts
index f1ee38c115..0f0f2d9653 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts
@@ -1,8 +1,12 @@
 import { css } from '@leafygreen-ui/emotion';
-import { Theme } from '@leafygreen-ui/lib';
+import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 import { spacing } from '@leafygreen-ui/tokens';
 
+export const quickSelectionClassName = createUniqueClassName(
+  'date-range-quick-selection',
+);
+
 export const quickSelectMenuStyles = css`
   display: flex;
   flex-direction: column;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
index 417ea36655..1b3d902482 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
@@ -14,6 +14,7 @@ import { useDateRangeMenuContext } from '../DateRangeMenuContext';
 
 import { QuickRangeButton } from './QuickRangeButton';
 import {
+  quickSelectionClassName,
   quickSelectMenuMonthSelectContainerStyles,
   quickSelectMenuSelectionsContainerStyles,
   quickSelectMenuStyles,
@@ -39,7 +40,11 @@ export const QuickSelectionMenu = forwardRef<HTMLDivElement, {}>(
     return (
       <div
         ref={fwdRef}
-        className={cx(quickSelectMenuStyles, quickSelectMenuThemeStyles[theme])}
+        className={cx(
+          quickSelectionClassName,
+          quickSelectMenuStyles,
+          quickSelectMenuThemeStyles[theme],
+        )}
         data-lg="date-range-picker-quick-select-menu"
       >
         <div className={quickSelectMenuMonthSelectContainerStyles}>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index a6a2e2b883..fd716b7d86 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  cleanup,
   queryByText as globalQueryByText,
   render,
   waitFor,
@@ -13,8 +14,14 @@ import { Month } from '../constants';
 import { eventContainingTargetValue, tabNTimes } from '../testUtils';
 import { newUTC, setUTCDate } from '../utils';
 
-import { renderDateRangePicker } from './DateRangePicker.testutils';
+import {
+  ExpectedTabStop,
+  getExpectedTabStopSelector,
+  renderDateRangePicker,
+  RenderDateRangePickerResult,
+} from './DateRangePicker.testutils';
 import { DateRangePicker } from '.';
+import { element } from '@leafygreen-ui/lib/dist/typeIs';
 
 const testToday = newUTC(2023, Month.December, 26);
 
@@ -451,8 +458,7 @@ describe('packages/date-picker/date-range-picker', () => {
               value: [start, end],
             });
             userEvent.type(inputElements[2], '5');
-            const { menuFooter } = getMenuElements();
-            const applyButton = globalQueryByText(menuFooter!, 'Apply');
+            const { applyButton } = getMenuElements();
             userEvent.click(applyButton!);
             expect(onRangeChange).toHaveBeenCalledWith(
               expect.arrayContaining([setUTCDate(start, 5), end]),
@@ -470,8 +476,7 @@ describe('packages/date-picker/date-range-picker', () => {
               value: [start, end],
             });
             userEvent.type(inputElements[2], '5');
-            const { menuFooter } = getMenuElements();
-            const cancelButton = globalQueryByText(menuFooter!, 'Cancel');
+            const { cancelButton } = getMenuElements();
             userEvent.click(cancelButton!);
             expect(onCancel).toHaveBeenCalled();
           });
@@ -485,8 +490,7 @@ describe('packages/date-picker/date-range-picker', () => {
               value: [start, end],
             });
             userEvent.type(inputElements[2], '5');
-            const { menuFooter } = getMenuElements();
-            const cancelButton = globalQueryByText(menuFooter!, 'Cancel');
+            const { cancelButton } = getMenuElements();
             userEvent.click(cancelButton!);
             expect(onRangeChange).toHaveBeenCalledWith(
               expect.arrayContaining([start, end]),
@@ -503,8 +507,7 @@ describe('packages/date-picker/date-range-picker', () => {
               onClear,
               value: [start, end],
             });
-            const { menuFooter } = openMenu();
-            const clearButton = globalQueryByText(menuFooter!, 'Clear');
+            const { clearButton } = openMenu();
             userEvent.click(clearButton!);
             expect(onClear).toHaveBeenCalled();
           });
@@ -516,8 +519,7 @@ describe('packages/date-picker/date-range-picker', () => {
               onRangeChange,
               value: [start, end],
             });
-            const { menuFooter } = openMenu();
-            const clearButton = globalQueryByText(menuFooter!, 'Clear');
+            const { clearButton } = openMenu();
             userEvent.click(clearButton!);
             expect(onRangeChange).toHaveBeenCalledWith(
               expect.arrayContaining([null, null]),
@@ -636,130 +638,86 @@ describe('packages/date-picker/date-range-picker', () => {
           expect(handleValidation).not.toHaveBeenCalled();
         });
 
-        describe('Tab order', () => {
-          const closedTabStops = 3 + 3 + 1; // = 7; start + end + button
-          const basicMenuTabStops = closedTabStops + 3; // = 10; chevrons + cell
-          const quickSelectTabStops = basicMenuTabStops + 2 + 7; // = 19; selects + quick select buttons
-          describe.each(range(0, closedTabStops))('when menu is closed', n => {
-            test(`Tab ${n} times`, () => {
-              const { inputContainer, inputElements, calendarButton } =
-                renderDateRangePicker();
-              tabNTimes(n);
-
-              // initial tab & final tab do not have focus in the component
-              if (n === 0 || n === closedTabStops) {
-                expect(
-                  inputContainer.contains(document.activeElement),
-                ).toBeFalsy();
-              } else if (n === closedTabStops - 1) {
-                // second last tab focuses on button
-                expect(calendarButton).toHaveFocus();
-              } else {
-                // otherwise, tab focuses on the next input element
-                expect(inputElements[n - 1]).toHaveFocus();
-              }
+        describe.only('Tab order', () => {
+          describe('when menu is closed', () => {
+            const tabStops = getExpectedTabStopSelector('closed');
+            const testCases: Array<[number, string | null]> = tabStops.map(
+              (stop, n) => [n, stop],
+            );
+
+            describe.each(testCases)('Tab %i times', (n, selector) => {
+              let renderResult: RenderDateRangePickerResult;
+              let element: HTMLElement | null;
+
+              beforeEach(() => {
+                renderResult = renderDateRangePicker();
+                element = selector
+                  ? renderResult.container.querySelector(selector)
+                  : null;
+                tabNTimes(n);
+              });
+
+              test(`focus on ${selector}`, () => {
+                if (selector === null) {
+                  expect(
+                    renderResult.inputContainer.contains(
+                      document.activeElement,
+                    ),
+                  ).toBeFalsy();
+                } else {
+                  expect(element).toHaveFocus();
+                }
+              });
             });
           });
 
-          describe.each(range(0, basicMenuTabStops))(
-            'when basic menu is open',
-            n => {
-              test(`Tab ${n} times`, () => {
-                const { inputElements, calendarButton, openMenu } =
-                  renderDateRangePicker();
-                tabNTimes(n);
+          describe('when basic menu is open', () => {
+            const tabStops = getExpectedTabStopSelector('basic');
+            const testCases: Array<[number, string | null]> = tabStops.map(
+              (stop, n) => [n, stop],
+            );
 
-                const { leftChevron, rightChevron, todayCell } = openMenu();
+            describe.each(testCases)(`Tab %i times`, (n, selector) => {
+              let renderResult: RenderDateRangePickerResult;
+              let element: HTMLElement | null;
 
-                if (n <= 5) {
-                  // initial focus is on first input when the menu opens,
-                  // then follows inputs sequentially
-                  expect(inputElements[n]).toHaveFocus();
-                }
+              beforeEach(() => {
+                renderResult = renderDateRangePicker();
+                element = selector
+                  ? renderResult.container.querySelector(selector)
+                  : null;
+                tabNTimes(n);
+              });
 
-                switch (n) {
-                  case 6:
-                    expect(calendarButton).toHaveFocus();
-                    break;
-                  case 7:
-                    expect(todayCell).toHaveFocus();
-                    break;
-                  case 8:
-                    expect(leftChevron).toHaveFocus();
-                    break;
-                  case 9:
-                    expect(rightChevron).toHaveFocus();
-                    break;
-                  case 10:
-                    // Focus is trapped within the menu
-                    expect(todayCell).toHaveFocus();
-                    break;
-                }
+              test(`focus on ${selector}`, () => {
+                expect(element).toHaveFocus();
               });
-            },
-          );
+            });
+          });
 
-          describe.each(range(0, quickSelectTabStops))(
-            'when quick select menu is open',
-            n => {
-              test(`Tab ${n} times`, () => {
-                const { inputElements, calendarButton, openMenu } =
-                  renderDateRangePicker({
-                    showQuickSelection: true,
-                  });
-                tabNTimes(n);
+          describe('when quick-select menu is open', () => {
+            const tabStops = getExpectedTabStopSelector('quick-select');
+            const testCases: Array<[number, string | null]> = tabStops.map(
+              (stop, n) => [n, stop],
+            );
 
-                const {
-                  monthSelect,
-                  yearSelect,
-                  quickRangeButtons,
-                  leftChevron,
-                  rightChevron,
-                  todayCell,
-                } = openMenu();
-
-                if (n <= 5) {
-                  // initial focus is on first input when the menu opens,
-                  // then follows inputs sequentially
-                  expect(inputElements[n]).toHaveFocus();
-                }
+            describe.each(testCases)(`Tab %i times`, (n, selector) => {
+              let renderResult: RenderDateRangePickerResult;
+              let element: HTMLElement | null;
 
-                switch (n) {
-                  case 6:
-                    expect(calendarButton).toHaveFocus();
-                    break;
-                  case 7:
-                    expect(todayCell).toHaveFocus();
-                    break;
-                  case 8:
-                    expect(monthSelect).toHaveFocus();
-                    break;
-                  case 9:
-                    expect(yearSelect).toHaveFocus();
-                    break;
-                  case 10:
-                  case 11:
-                  case 12:
-                  case 13:
-                  case 14:
-                  case 15:
-                  case 16:
-                    expect(quickRangeButtons[n + 10]).toHaveFocus();
-                    break;
-                  case 17:
-                    expect(leftChevron).toHaveFocus();
-                    break;
-                  case 18:
-                    expect(rightChevron).toHaveFocus();
-                    break;
-                  case 19:
-                    // Focus is trapped within the menu
-                    expect(todayCell).toHaveFocus();
-                    break;
-                }
+              beforeEach(() => {
+                renderResult = renderDateRangePicker();
+                element = selector
+                  ? renderResult.container.querySelector(selector)
+                  : null;
+                tabNTimes(n);
               });
-            },
-          );
+
+              test(`focus on ${selector}`, () => {
+                expect(element).toHaveFocus();
+              });
+            });
+          });
         });
       });
 
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
index d3019b94f6..4cc70fb0ef 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
@@ -85,7 +85,7 @@ export const Basic: StoryFn<typeof DateRangePicker> = props => {
     newUTC(2023, Month.December, 26),
   ]);
 
-  return <DateRangePicker {...props} value={range} onChange={setRange} />;
+  return <DateRangePicker {...props} value={range} onRangeChange={setRange} />;
 };
 
 export const Uncontrolled: StoryFn<typeof DateRangePicker> = props => {
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
index c8a6c55189..023f8243d5 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
@@ -8,7 +8,7 @@ import userEvent from '@testing-library/user-event';
 
 import { DateRangePicker, DateRangePickerProps } from '.';
 
-interface RenderDateRangePickerResult extends RenderResult {
+export interface RenderDateRangePickerResult extends RenderResult {
   formField: HTMLElement;
   inputContainer: HTMLElement;
   inputElements: Array<HTMLInputElement>;
@@ -17,7 +17,7 @@ interface RenderDateRangePickerResult extends RenderResult {
   openMenu: () => RenderMenuResult;
 }
 
-interface RenderMenuResult {
+export interface RenderMenuResult {
   menuContainerEl: HTMLElement | null;
   leftChevron: HTMLButtonElement | null;
   rightChevron: HTMLButtonElement | null;
@@ -25,6 +25,9 @@ interface RenderMenuResult {
   calendarCells: Array<HTMLTableCellElement>;
   todayCell: HTMLTableCellElement | null;
   menuFooter: HTMLDivElement | null;
+  clearButton: HTMLButtonElement | null;
+  cancelButton: HTMLButtonElement | null;
+  applyButton: HTMLButtonElement | null;
   quickSelectMenu: HTMLDivElement | null;
   monthSelect: HTMLButtonElement | null;
   yearSelect: HTMLButtonElement | null;
@@ -86,6 +89,11 @@ export const renderDateRangePicker = (
     const menuFooter = menuContainerEl?.querySelector(
       '[data-lg="date-range-picker-menu-footer"]',
     ) as HTMLDivElement | null;
+    const clearButton = result.queryByText('Clear') as HTMLButtonElement | null;
+    const cancelButton = result.queryByText(
+      'Cancel',
+    ) as HTMLButtonElement | null;
+    const applyButton = result.queryByText('Apply') as HTMLButtonElement | null;
 
     // Quick select menu
     const quickSelectMenu = menuContainerEl?.querySelector(
@@ -112,6 +120,9 @@ export const renderDateRangePicker = (
       leftChevron,
       rightChevron,
       menuFooter,
+      clearButton,
+      cancelButton,
+      applyButton,
       quickSelectMenu,
       monthSelect,
       yearSelect,
@@ -134,3 +145,78 @@ export const renderDateRangePicker = (
     openMenu,
   };
 };
+
+export interface ExpectedTabStop {
+  name: string;
+  selector: string;
+}
+
+/**
+ * Returns the elements we expect to have focus after pressing `Tab` N times
+ */
+export const getExpectedTabStopSelector = (
+  menuState: 'closed' | 'basic' | 'quick-select',
+): Array<string | null> => {
+  switch (menuState) {
+    case 'closed': {
+      return [
+        null,
+        '[data-lg="date-range-input-start"] > input[aria-label="year"]',
+        '[data-lg="date-range-input-start"] > input[aria-label="month"]',
+        '[data-lg="date-range-input-start"] > input[aria-label="day"]',
+        '[data-lg="date-range-input-end"] > input[aria-label="year"]',
+        '[data-lg="date-range-input-end"] > input[aria-label="month"]',
+        '[data-lg="date-range-input-end"] > input[aria-label="day"]',
+        'button[aria-label="Open calendar menu"]',
+        null,
+      ];
+    }
+
+    case 'basic': {
+      return [
+        '[data-lg="date-range-input-start"] > input[aria-label="year"]',
+        '[data-lg="date-range-input-start"] > input[aria-label="month"]',
+        '[data-lg="date-range-input-start"] > input[aria-label="day"]',
+        '[data-lg="date-range-input-end"] > input[aria-label="year"]',
+        '[data-lg="date-range-input-end"] > input[aria-label="month"]',
+        '[data-lg="date-range-input-end"] > input[aria-label="day"]',
+        'button[aria-label="Open calendar menu"]',
+        `listbox[data-lg="date-range-menu"] table td[data-iso="${new Date().toISOString()}"]`,
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-menu-footer"] button:nth-child(1)',
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-menu-footer"] button:nth-child(2)',
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-menu-footer"] button:nth-child(3)',
+        'listbox[data-lg="date-range-menu"] button[aria-label="Previous month"]',
+        'listbox[data-lg="date-range-menu"] button[aria-label="Next month"]',
+        `listbox[data-lg="date-range-menu"] table td[data-iso="${new Date().toISOString()}"]`,
+      ];
+    }
+
+    case 'quick-select': {
+      return [
+        '[data-lg="date-range-input-start"] > input[aria-label="year"]',
+        '[data-lg="date-range-input-start"] > input[aria-label="month"]',
+        '[data-lg="date-range-input-start"] > input[aria-label="day"]',
+        '[data-lg="date-range-input-end"] > input[aria-label="year"]',
+        '[data-lg="date-range-input-end"] > input[aria-label="month"]',
+        '[data-lg="date-range-input-end"] > input[aria-label="day"]',
+        'button[aria-label="Open calendar menu"]',
+        `listbox[data-lg="date-range-menu"] table td[data-iso="${new Date().toISOString()}"]`,
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-menu-footer"] button:nth-child(1)',
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-menu-footer"] button:nth-child(2)',
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-menu-footer"] button:nth-child(3)',
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] button[aria-label="Select month"]',
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] button[aria-label="Select year"]',
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="Today"]',
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="Yesterday"]',
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="Last 7 days"]',
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="Last 30 days"]',
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="Last 90 days"]',
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="Last 12 months"]',
+        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="All time"]',
+        'listbox[data-lg="date-range-menu"] button[aria-label="Previous month"]',
+        'listbox[data-lg="date-range-menu"] button[aria-label="Next month"]',
+        `listbox[data-lg="date-range-menu"] table td[data-iso="${new Date().toISOString()}"]`,
+      ];
+    }
+  }
+};

From bb6e682e8323012c09bc5275781a5345c287264c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 12 Oct 2023 12:33:06 -0400
Subject: [PATCH 215/351] simplify tab stop tests

---
 .../CalendarButton/CalendarButton.tsx         |   2 +
 .../DateInputSegment/DateInputSegment.tsx     |   3 +
 .../DateRangeInput/DateRangeInput.tsx         |   4 +-
 .../DateRangePicker/DateRangePicker.spec.tsx  |  62 +++----
 .../DateRangePicker.testutils.tsx             | 163 +++++++++++-------
 5 files changed, 131 insertions(+), 103 deletions(-)

diff --git a/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx b/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
index d163eafad8..6580c732c4 100644
--- a/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
+++ b/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
@@ -6,6 +6,7 @@ import IconButton, { BaseIconButtonProps } from '@leafygreen-ui/icon-button';
 
 import { iconButtonStyles } from './CalendarButton.styles';
 
+const lgid = 'date-picker_calendar-button';
 /**
  * The icon button on the right of the DatePicker form field
  */
@@ -19,6 +20,7 @@ export const CalendarButton = forwardRef<
       aria-label="Open calendar menu"
       type="button"
       className={cx(iconButtonStyles, className)}
+      data-lg={lgid}
       {...rest}
     >
       <Icon glyph="Calendar" />
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index 6178983959..1e8f6248ad 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -18,6 +18,8 @@ import {
 } from './DateInputSegment.styles';
 import { DateInputSegmentProps } from './DateInputSegment.types';
 
+const lgid = 'date-picker_input-segment';
+
 /**
  * Renders a single date segment with the
  * appropriate character padding/truncation.
@@ -65,6 +67,7 @@ export const DateInputSegment = React.forwardRef<
         onChange={onChange}
         onBlur={onBlur}
         disabled={disabled}
+        data-lg={lgid}
         className={cx(
           baseStyles,
           fontSizeStyles[baseFontSize],
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index fbf6931936..a50bae506f 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -153,7 +153,7 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
       >
         <div className={inputWrapperStyles}>
           <DateInputBox
-            data-lg="date-range-input-start"
+            data-lg="date-range_start-input"
             value={value?.[0]}
             setValue={handleStartInputChange}
             segmentRefs={startSegmentRefs}
@@ -161,7 +161,7 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
           />
           <span>{EN_DASH}</span>
           <DateInputBox
-            data-lg="date-range-input-end"
+            data-lg="date-range_end-input"
             value={value?.[1]}
             setValue={handleEndInputChange}
             segmentRefs={endSegmentRefs}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index fd716b7d86..074be5a2df 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  cleanup,
   queryByText as globalQueryByText,
   render,
   waitFor,
@@ -8,20 +7,18 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import last from 'lodash/last';
-import range from 'lodash/range';
 
 import { Month } from '../constants';
 import { eventContainingTargetValue, tabNTimes } from '../testUtils';
 import { newUTC, setUTCDate } from '../utils';
 
 import {
-  ExpectedTabStop,
-  getExpectedTabStopSelector,
+  expectedTabStopLabels,
+  getTabStopElementMap,
   renderDateRangePicker,
   RenderDateRangePickerResult,
 } from './DateRangePicker.testutils';
 import { DateRangePicker } from '.';
-import { element } from '@leafygreen-ui/lib/dist/typeIs';
 
 const testToday = newUTC(2023, Month.December, 26);
 
@@ -638,82 +635,75 @@ describe('packages/date-picker/date-range-picker', () => {
           expect(handleValidation).not.toHaveBeenCalled();
         });
 
-        describe.only('Tab order', () => {
+        describe('Tab order', () => {
           describe('when menu is closed', () => {
-            const tabStops = getExpectedTabStopSelector('closed');
-            const testCases: Array<[number, string | null]> = tabStops.map(
-              (stop, n) => [n, stop],
-            );
+            const tabStops = expectedTabStopLabels['closed'];
+            const testCases: Array<[number, (typeof tabStops)[number]]> =
+              tabStops.map((stop, n) => [n, stop]);
 
-            describe.each(testCases)('Tab %i times', (n, selector) => {
+            describe.each(testCases)('Tab %i times', (n, label) => {
               let renderResult: RenderDateRangePickerResult;
               let element: HTMLElement | null;
 
               beforeEach(() => {
                 renderResult = renderDateRangePicker();
-                element = selector
-                  ? renderResult.container.querySelector(selector)
-                  : null;
+                element = getTabStopElementMap(renderResult)[label];
                 tabNTimes(n);
               });
 
-              test(`focus on ${selector}`, () => {
-                if (selector === null) {
+              test(`focus on ${label}`, () => {
+                if (element !== null) {
+                  expect(element).toHaveFocus();
+                } else {
                   expect(
                     renderResult.inputContainer.contains(
                       document.activeElement,
                     ),
                   ).toBeFalsy();
-                } else {
-                  expect(element).toHaveFocus();
                 }
               });
             });
           });
 
           describe('when basic menu is open', () => {
-            const tabStops = getExpectedTabStopSelector('basic');
-            const testCases: Array<[number, string | null]> = tabStops.map(
-              (stop, n) => [n, stop],
-            );
+            const tabStops = expectedTabStopLabels['basic'];
+            const testCases: Array<[number, (typeof tabStops)[number]]> =
+              tabStops.map((stop, n) => [n, stop]);
 
-            describe.each(testCases)(`Tab %i times`, (n, selector) => {
+            describe.each(testCases)(`Tab %i times`, (n, label) => {
               let renderResult: RenderDateRangePickerResult;
               let element: HTMLElement | null;
 
               beforeEach(() => {
                 renderResult = renderDateRangePicker();
-                element = selector
-                  ? renderResult.container.querySelector(selector)
-                  : null;
+                renderResult.openMenu();
+                element = getTabStopElementMap(renderResult)[label];
                 tabNTimes(n);
               });
 
-              test(`focus on ${selector}`, () => {
+              test(`focus on ${label}`, () => {
                 expect(element).toHaveFocus();
               });
             });
           });
 
           describe('when quick-select menu is open', () => {
-            const tabStops = getExpectedTabStopSelector('quick-select');
-            const testCases: Array<[number, string | null]> = tabStops.map(
-              (stop, n) => [n, stop],
-            );
+            const tabStops = expectedTabStopLabels['quick-select'];
+            const testCases: Array<[number, (typeof tabStops)[number]]> =
+              tabStops.map((stop, n) => [n, stop]);
 
-            describe.each(testCases)(`Tab %i times`, (n, selector) => {
+            describe.each(testCases)(`Tab %i times`, (n, label) => {
               let renderResult: RenderDateRangePickerResult;
               let element: HTMLElement | null;
 
               beforeEach(() => {
                 renderResult = renderDateRangePicker();
-                element = selector
-                  ? renderResult.container.querySelector(selector)
-                  : null;
+                renderResult.openMenu();
+                element = getTabStopElementMap(renderResult)[label];
                 tabNTimes(n);
               });
 
-              test(`focus on ${selector}`, () => {
+              test(`focus on ${label}`, () => {
                 expect(element).toHaveFocus();
               });
             });
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
index 023f8243d5..881068dac6 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
@@ -154,69 +154,102 @@ export interface ExpectedTabStop {
 /**
  * Returns the elements we expect to have focus after pressing `Tab` N times
  */
-export const getExpectedTabStopSelector = (
-  menuState: 'closed' | 'basic' | 'quick-select',
-): Array<string | null> => {
-  switch (menuState) {
-    case 'closed': {
-      return [
-        null,
-        '[data-lg="date-range-input-start"] > input[aria-label="year"]',
-        '[data-lg="date-range-input-start"] > input[aria-label="month"]',
-        '[data-lg="date-range-input-start"] > input[aria-label="day"]',
-        '[data-lg="date-range-input-end"] > input[aria-label="year"]',
-        '[data-lg="date-range-input-end"] > input[aria-label="month"]',
-        '[data-lg="date-range-input-end"] > input[aria-label="day"]',
-        'button[aria-label="Open calendar menu"]',
-        null,
-      ];
-    }
-
-    case 'basic': {
-      return [
-        '[data-lg="date-range-input-start"] > input[aria-label="year"]',
-        '[data-lg="date-range-input-start"] > input[aria-label="month"]',
-        '[data-lg="date-range-input-start"] > input[aria-label="day"]',
-        '[data-lg="date-range-input-end"] > input[aria-label="year"]',
-        '[data-lg="date-range-input-end"] > input[aria-label="month"]',
-        '[data-lg="date-range-input-end"] > input[aria-label="day"]',
-        'button[aria-label="Open calendar menu"]',
-        `listbox[data-lg="date-range-menu"] table td[data-iso="${new Date().toISOString()}"]`,
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-menu-footer"] button:nth-child(1)',
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-menu-footer"] button:nth-child(2)',
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-menu-footer"] button:nth-child(3)',
-        'listbox[data-lg="date-range-menu"] button[aria-label="Previous month"]',
-        'listbox[data-lg="date-range-menu"] button[aria-label="Next month"]',
-        `listbox[data-lg="date-range-menu"] table td[data-iso="${new Date().toISOString()}"]`,
-      ];
-    }
-
-    case 'quick-select': {
-      return [
-        '[data-lg="date-range-input-start"] > input[aria-label="year"]',
-        '[data-lg="date-range-input-start"] > input[aria-label="month"]',
-        '[data-lg="date-range-input-start"] > input[aria-label="day"]',
-        '[data-lg="date-range-input-end"] > input[aria-label="year"]',
-        '[data-lg="date-range-input-end"] > input[aria-label="month"]',
-        '[data-lg="date-range-input-end"] > input[aria-label="day"]',
-        'button[aria-label="Open calendar menu"]',
-        `listbox[data-lg="date-range-menu"] table td[data-iso="${new Date().toISOString()}"]`,
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-menu-footer"] button:nth-child(1)',
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-menu-footer"] button:nth-child(2)',
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-menu-footer"] button:nth-child(3)',
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] button[aria-label="Select month"]',
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] button[aria-label="Select year"]',
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="Today"]',
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="Yesterday"]',
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="Last 7 days"]',
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="Last 30 days"]',
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="Last 90 days"]',
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="Last 12 months"]',
-        'listbox[data-lg="date-range-menu"] [data-lg="date-range-picker-quick-select-menu"] [data-lg="date-range-picker-quick-range-button"] [aria-label="All time"]',
-        'listbox[data-lg="date-range-menu"] button[aria-label="Previous month"]',
-        'listbox[data-lg="date-range-menu"] button[aria-label="Next month"]',
-        `listbox[data-lg="date-range-menu"] table td[data-iso="${new Date().toISOString()}"]`,
-      ];
-    }
-  }
+export const expectedTabStopLabels = {
+  closed: [
+    'none',
+    'input > start date > year segment',
+    'input > start date > month segment',
+    'input > start date > day segment',
+    'input > end date > year segment',
+    'input > end date > month segment',
+    'input > end date > day segment',
+    'input > open menu button',
+    'none',
+  ],
+  basic: [
+    'input > start date > year segment',
+    'input > start date > month segment',
+    'input > start date > day segment',
+    'input > end date > year segment',
+    'input > end date > month segment',
+    'input > end date > day segment',
+    'input > open menu button',
+    `menu > today cell`,
+    'menu > footer > clear button',
+    'menu > footer > cancel button',
+    'menu > footer > apply button',
+    'menu > left chevron',
+    'menu > right chevron',
+    `menu > today cell`,
+  ],
+  'quick-select': [
+    'input > start date > year segment',
+    'input > start date > month segment',
+    'input > start date > day segment',
+    'input > end date > year segment',
+    'input > end date > month segment',
+    'input > end date > day segment',
+    'input > open menu button',
+    `menu > today cell`,
+    'menu > footer > clear button',
+    'menu > footer > cancel button',
+    'menu > footer > apply button',
+    'menu > quick select > month select',
+    'menu > quick select > year select',
+    'menu > quick select > quick range > Today',
+    'menu > quick select > quick range > Yesterday',
+    'menu > quick select > quick range > Last 7 days',
+    'menu > quick select > quick range > Last 30 days',
+    'menu > quick select > quick range > Last 90 days',
+    'menu > quick select > quick range > Last 12 months',
+    'menu > quick select > quick range > All time',
+    'menu > left chevron',
+    'menu > right chevron',
+    `menu > today cell`,
+  ],
+} as const;
+
+type TabStopLabel =
+  (typeof expectedTabStopLabels)[keyof typeof expectedTabStopLabels][number];
+
+export const getTabStopElementMap = (
+  renderResult: RenderDateRangePickerResult,
+): Record<TabStopLabel, HTMLElement | null> => {
+  const { inputElements, calendarButton, getMenuElements } = renderResult;
+  const {
+    todayCell,
+    clearButton,
+    cancelButton,
+    applyButton,
+    monthSelect,
+    yearSelect,
+    leftChevron,
+    rightChevron,
+    quickRangeButtons,
+  } = getMenuElements();
+  return {
+    none: null,
+    'input > start date > year segment': inputElements[0],
+    'input > start date > month segment': inputElements[1],
+    'input > start date > day segment': inputElements[2],
+    'input > end date > year segment': inputElements[3],
+    'input > end date > month segment': inputElements[4],
+    'input > end date > day segment': inputElements[5],
+    'input > open menu button': calendarButton,
+    'menu > today cell': todayCell,
+    'menu > footer > clear button': clearButton,
+    'menu > footer > cancel button': cancelButton,
+    'menu > footer > apply button': applyButton,
+    'menu > quick select > month select': monthSelect,
+    'menu > quick select > year select': yearSelect,
+    'menu > quick select > quick range > Today': quickRangeButtons[0],
+    'menu > quick select > quick range > Yesterday': quickRangeButtons[1],
+    'menu > quick select > quick range > Last 7 days': quickRangeButtons[2],
+    'menu > quick select > quick range > Last 30 days': quickRangeButtons[3],
+    'menu > quick select > quick range > Last 90 days': quickRangeButtons[4],
+    'menu > quick select > quick range > Last 12 months': quickRangeButtons[5],
+    'menu > quick select > quick range > All time': quickRangeButtons[6],
+    'menu > left chevron': leftChevron,
+    'menu > right chevron': rightChevron,
+  };
 };

From a35bdd641508a5e431e69630439428eb8d71f675 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Thu, 12 Oct 2023 13:57:40 -0400
Subject: [PATCH 216/351] update disabled / color (#2022)

---
 .../DateInput/DateInputBox/DateInputBox.styles.ts    | 11 +++++++++++
 .../src/DateInput/DateInputBox/DateInputBox.tsx      | 12 ++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
index e29b7b7c8d..63abb8fcc1 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
@@ -1,4 +1,6 @@
 import { css } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
 
 export const segmentPartsWrapperStyles = css`
   display: flex;
@@ -9,3 +11,12 @@ export const segmentPartsWrapperStyles = css`
 export const separatorLiteralStyles = css`
   user-select: none;
 `;
+
+export const separatorLiteralDisbledStyles: Record<Theme, string> = {
+  [Theme.Dark]: css`
+    color: ${palette.gray.dark2};
+  `,
+  [Theme.Light]: css`
+    color: ${palette.gray.base};
+  `,
+};
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index 61bb6309e1..53aae26c76 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -7,6 +7,7 @@ import { isSameDay } from 'date-fns';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { createSyntheticEvent } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../DatePickerContext';
@@ -21,6 +22,7 @@ import { DateInputSegment } from '../DateInputSegment';
 
 import {
   segmentPartsWrapperStyles,
+  separatorLiteralDisbledStyles,
   separatorLiteralStyles,
 } from './DateInputBox.styles';
 import { DateInputBoxProps } from './DateInputBox.types';
@@ -51,7 +53,8 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     }: DateInputBoxProps,
     fwdRef,
   ) => {
-    const { formatParts } = useDatePickerContext();
+    const { formatParts, disabled } = useDatePickerContext();
+    const { theme } = useDarkMode();
 
     const containerRef = useForwardedRef(fwdRef, null);
 
@@ -141,7 +144,12 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
         {formatParts?.map((part, i) => {
           if (part.type === 'literal') {
             return (
-              <span className={separatorLiteralStyles} key={'literal-' + i}>
+              <span
+                className={cx(separatorLiteralStyles, {
+                  [separatorLiteralDisbledStyles[theme]]: disabled,
+                })}
+                key={'literal-' + i}
+              >
                 {part.value}
               </span>
             );

From 19f5a582b9c9ed76c005d35fc238bc09887b463b Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 12 Oct 2023 14:45:51 -0400
Subject: [PATCH 217/351] adds focus handling

---
 .../DateRangeComponent/DateRangeComponent.tsx |   1 +
 .../DateRangeMenu/DateRangeMenu.tsx           |  90 ++++++-
 .../DateRangeMenuCalendars.tsx                | 243 +++++++++---------
 .../DateRangeMenuCalendars.types.ts           |  12 +
 .../DateRangeMenuContext.tsx                  |  10 -
 .../DateRangeMenuProvider.tsx                 |  14 +-
 .../DateRangeMenuFooter.tsx                   |  40 ++-
 .../QuickRangeButton/QuickRangeButton.tsx     |  15 +-
 .../QuickSelectionMenu/QuickSelectionMenu.tsx | 167 +++++++-----
 .../DateRangePicker/DateRangePicker.spec.tsx  |  17 +-
 .../DateRangePicker.stories.tsx               |  16 ++
 .../DateRangePicker.testutils.tsx             |  18 +-
 12 files changed, 397 insertions(+), 246 deletions(-)
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
index 823d913c64..aecde66f02 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
@@ -72,6 +72,7 @@ export const DateRangeComponent = forwardRef<
           id={menuId}
           value={value}
           setValue={handleCalendarValueChange}
+          showQuickSelection={showQuickSelection}
         />
       </>
     );
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index 4d59c614ce..8af97cd00f 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -1,10 +1,21 @@
-import React, { forwardRef, KeyboardEventHandler } from 'react';
+import React, {
+  FocusEventHandler,
+  forwardRef,
+  KeyboardEventHandler,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
+import { useDynamicRefs } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
+import { useForwardedRef } from '@leafygreen-ui/select/src/utils';
 import { spacing } from '@leafygreen-ui/tokens';
 
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
 import { useDatePickerContext } from '../../DatePickerContext';
+import { DateType } from '../../types';
+import { setToUTCMidnight } from '../../utils';
 
 import {
   menuContentStyles,
@@ -16,40 +27,99 @@ import { DateRangeMenuProvider } from './DateRangeMenuContext';
 import { DateRangeMenuFooter } from './DateRangeMenuFooter';
 import { QuickSelectionMenu } from './QuickSelectionMenu';
 
+const lgid = 'date-range_menu';
+
 export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
   (
     { value, setValue, showQuickSelection, ...rest }: DateRangeMenuProps,
     fwdRef,
   ) => {
+    const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
     const { isOpen } = useDatePickerContext();
+    const menuRef = useForwardedRef(fwdRef, null);
+    const calendarSectionRef = useRef<HTMLDivElement>(null);
+    const chevronRefs = useDynamicRefs<HTMLButtonElement>();
+    const calendarCellRefs = useDynamicRefs<HTMLTableCellElement>();
+    const footerButtonRefs = useDynamicRefs<HTMLButtonElement>();
+    const selectRefs = useDynamicRefs<HTMLButtonElement>();
+    const quickRangeButtonRefs = useDynamicRefs<HTMLButtonElement>();
+
+    // Keep track of the element the user is highlighting with the keyboard
+    const [highlight, setHighlight] = useState<DateType>(
+      value ? value[0] : today,
+    );
+
+    const getHighlightedCell = () => {
+      const highlightKey = highlight?.toISOString();
+      return highlightKey ? calendarCellRefs(highlightKey)?.current : undefined;
+    };
+
+    /** Triggered any time an element in the menu is focused */
+    const handleMenuFocus: FocusEventHandler<HTMLDivElement> = e => {
+      const element = e.target;
+      const previousFocus = e.relatedTarget;
 
-    // Focus trap
+      const isInitialMenuFocus =
+        menuRef.current?.contains(element) &&
+        !menuRef.current.contains(previousFocus);
+
+      if (isInitialMenuFocus) {
+        const highlightedCell = getHighlightedCell();
+        highlightedCell?.focus();
+      }
+    };
+
+    /** Triggered on any key down event */
     const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
       if (e.key === keyMap.Tab) {
-        const currentFocus = document.activeElement;
+        const currentFocus = e.target;
+
+        // Focus trap:
+        // if focus is on the "Apply" button, move focus to either
+        // left chevron or month select menu
+        if (currentFocus === footerButtonRefs('apply').current) {
+          const elementToFocus = showQuickSelection
+            ? selectRefs('month')
+            : chevronRefs('left');
 
-        // if focus is on a cell, move focus to the footer
+          elementToFocus.current?.focus();
+          e.preventDefault();
+        }
       }
     };
 
     return (
-      <DateRangeMenuProvider value={value}>
+      <DateRangeMenuProvider value={value} today={today}>
         <MenuWrapper
-          data-lg="date-range-menu"
-          ref={fwdRef}
+          data-lg={lgid}
+          ref={menuRef}
           usePortal
           role="listbox"
           active={isOpen}
           spacing={spacing[1]}
           className={rangeMenuWrapperStyles}
           onKeyDown={handleKeyDown}
+          onFocus={handleMenuFocus}
           {...rest}
         >
           <div className={menuContentStyles}>
-            <DateRangeMenuCalendars value={value} setValue={setValue} />
-            {showQuickSelection && <QuickSelectionMenu />}
+            {showQuickSelection && (
+              <QuickSelectionMenu
+                selectRefs={selectRefs}
+                quickRangeButtonRefs={quickRangeButtonRefs}
+              />
+            )}
+            <DateRangeMenuCalendars
+              ref={calendarSectionRef}
+              cellRefs={calendarCellRefs}
+              chevronRefs={chevronRefs}
+              value={value}
+              setValue={setValue}
+              highlight={highlight}
+              setHighlight={setHighlight}
+            />
           </div>
-          <DateRangeMenuFooter />
+          <DateRangeMenuFooter buttonRefs={footerButtonRefs} />
         </MenuWrapper>
       </DateRangeMenuProvider>
     );
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index 5ae12146de..5823eb84e4 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -18,7 +18,6 @@ import {
   isSameUTCDay,
   isSameUTCMonth,
 } from '../../../utils';
-import { DateRangeMenuProps } from '../DateRangeMenu.types';
 import { useDateRangeMenuContext } from '../DateRangeMenuContext';
 
 import {
@@ -28,134 +27,138 @@ import {
   calendarsContainerStyles,
   calendarsFrameStyles,
 } from './DateRangeMenuCalendars.styles';
+import { DateRangeMenuCalendarsProps } from './DateRangeMenuCalendars.types';
 
 export const DateRangeMenuCalendars = forwardRef<
   HTMLDivElement,
-  DateRangeMenuProps
->(({ value, setValue }, fwdRef) => {
-  const { isInRange } = useDatePickerContext();
-  const {
-    month,
-    nextMonth,
-    setMonth: setDisplayMonth,
-    startCellRefs,
-    endCellRefs,
-    today,
-  } = useDateRangeMenuContext();
-
-  const [highlight, setHighlight] = useState<DateType>(
-    value ? value[0] : today,
-  );
-
-  /** setDisplayMonth with side effects */
-  const updateMonth = (newMonth: Date) => {
-    if (isSameUTCMonth(newMonth, month)) {
-      return;
-    }
-
-    // const newHighlight = getNewHighlight(highlight, month, newMonth);
-    // const shouldUpdateHighlight = !isSameUTCDay(highlight, newHighlight);
-
-    // if (newHighlight && shouldUpdateHighlight) {
-    //   setHighlight(newHighlight);
-    // }
-
-    setDisplayMonth(newMonth);
-  };
-
-  /** setHighlight with side effects */
-  const updateHighlight = (newHighlight: Date) => {
-    // change month if nextHighlight is different than `month` or `nextMonth`
-    if (
-      !isSameUTCMonth(month, newHighlight) &&
-      !isSameUTCMonth(nextMonth, newHighlight)
-    ) {
-      setDisplayMonth(newHighlight);
-    }
-
-    // keep track of the highlighted cell
-    setHighlight(newHighlight);
-  };
-
-  /** Creates a click handler for a specific cell date */
-  const cellClickHandlerForDay = (day: Date) => () => {
-    if (isInRange(day)) {
+  DateRangeMenuCalendarsProps
+>(
+  (
+    { value, setValue, highlight, setHighlight, cellRefs, chevronRefs },
+    fwdRef,
+  ) => {
+    const { isInRange } = useDatePickerContext();
+    const {
+      month,
+      nextMonth,
+      setMonth: setDisplayMonth,
+      today,
+    } = useDateRangeMenuContext();
+
+    /** setDisplayMonth with side effects */
+    const updateMonth = (newMonth: Date) => {
+      if (isSameUTCMonth(newMonth, month)) {
+        return;
+      }
+
+      // const newHighlight = getNewHighlight(highlight, month, newMonth);
+      // const shouldUpdateHighlight = !isSameUTCDay(highlight, newHighlight);
+
+      // if (newHighlight && shouldUpdateHighlight) {
+      //   setHighlight(newHighlight);
+      // }
+
+      setDisplayMonth(newMonth);
+    };
+
+    /** setHighlight with side effects */
+    const updateHighlight = (newHighlight: Date) => {
+      // change month if nextHighlight is different than `month` or `nextMonth`
+      if (
+        !isSameUTCMonth(month, newHighlight) &&
+        !isSameUTCMonth(nextMonth, newHighlight)
+      ) {
+        setDisplayMonth(newHighlight);
+      }
+
+      // keep track of the highlighted cell
+      setHighlight(newHighlight);
+    };
+
+    /** Creates a click handler for a specific cell date */
+    const cellClickHandlerForDay = (day: Date) => () => {
+      if (isInRange(day)) {
+        // TODO:
+      }
+    };
+
+    /** Returns the current state of the cell */
+    const getCellState = (cellDay: Date | null): CalendarCellState => {
       // TODO:
-    }
-  };
-
-  /** Returns the current state of the cell */
-  const getCellState = (cellDay: Date | null): CalendarCellState => {
-    // TODO:
-    return CalendarCellState.Default;
-  };
-
-  /** Called on any keydown within the menu element */
-  const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {
-    // TODO:
-  };
-
-  return (
-    <div ref={fwdRef} className={cx(calendarsClassName, calendarsFrameStyles)}>
-      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      return CalendarCellState.Default;
+    };
+
+    /** Called on any keydown within the menu element */
+    const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {
+      // TODO:
+    };
+
+    return (
       <div
-        className={calendarsContainerStyles}
-        onKeyDown={handleCalendarKeyDown}
+        ref={fwdRef}
+        className={cx(calendarsClassName, calendarsFrameStyles)}
       >
-        <CalendarGrid month={month} aria-label={getFullMonthLabel(month)}>
-          {(day, i) => (
-            <CalendarCell
-              key={i}
-              ref={startCellRefs(day.toISOString())}
-              aria-label={getUTCDateString(day)}
-              isHighlighted={isSameUTCDay(day, highlight)}
-              isCurrent={isSameUTCDay(day, today)}
-              state={getCellState(day)}
-              onClick={cellClickHandlerForDay(day)}
-              data-iso={day.toISOString()}
-            >
-              {day.getUTCDate()}
-            </CalendarCell>
-          )}
-        </CalendarGrid>
-
-        <CalendarGrid
-          month={nextMonth}
-          aria-label={getFullMonthLabel(nextMonth)}
-        >
-          {(day, i) => (
-            <CalendarCell
-              key={i}
-              ref={endCellRefs(day.toISOString())}
-              aria-label={getUTCDateString(day)}
-              isHighlighted={isSameUTCDay(day, highlight)}
-              isCurrent={isSameUTCDay(day, today)}
-              state={getCellState(day)}
-              onClick={cellClickHandlerForDay(day)}
-              data-iso={day.toISOString()}
-            >
-              {day.getUTCDate()}
-            </CalendarCell>
-          )}
-        </CalendarGrid>
-      </div>
-      <div className={calendarHeadersContainerStyle}>
-        <div className={calendarHeaderStyles}>
-          <IconButton aria-label="Previous month">
-            <Icon glyph="ChevronLeft" />
-          </IconButton>
-          <Subtitle>{getFullMonthLabel(month)}</Subtitle>
+        <div className={calendarHeadersContainerStyle}>
+          <div className={calendarHeaderStyles}>
+            <IconButton aria-label="Previous month" ref={chevronRefs('left')}>
+              <Icon glyph="ChevronLeft" />
+            </IconButton>
+            <Subtitle>{getFullMonthLabel(month)}</Subtitle>
+          </div>
+
+          <div className={calendarHeaderStyles}>
+            <Subtitle>{getFullMonthLabel(nextMonth)}</Subtitle>
+            <IconButton aria-label="Next month" ref={chevronRefs('right')}>
+              <Icon glyph="ChevronRight" />
+            </IconButton>
+          </div>
         </div>
 
-        <div className={calendarHeaderStyles}>
-          <Subtitle>{getFullMonthLabel(nextMonth)}</Subtitle>
-          <IconButton aria-label="Next month">
-            <Icon glyph="ChevronRight" />
-          </IconButton>
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        <div
+          className={calendarsContainerStyles}
+          onKeyDown={handleCalendarKeyDown}
+        >
+          <CalendarGrid month={month} aria-label={getFullMonthLabel(month)}>
+            {(day, i) => (
+              <CalendarCell
+                key={i}
+                ref={cellRefs(day.toISOString())}
+                aria-label={getUTCDateString(day)}
+                isHighlighted={isSameUTCDay(day, highlight)}
+                isCurrent={isSameUTCDay(day, today)}
+                state={getCellState(day)}
+                onClick={cellClickHandlerForDay(day)}
+                data-iso={day.toISOString()}
+              >
+                {day.getUTCDate()}
+              </CalendarCell>
+            )}
+          </CalendarGrid>
+
+          <CalendarGrid
+            month={nextMonth}
+            aria-label={getFullMonthLabel(nextMonth)}
+          >
+            {(day, i) => (
+              <CalendarCell
+                key={i}
+                ref={cellRefs(day.toISOString())}
+                aria-label={getUTCDateString(day)}
+                isHighlighted={isSameUTCDay(day, highlight)}
+                isCurrent={isSameUTCDay(day, today)}
+                state={getCellState(day)}
+                onClick={cellClickHandlerForDay(day)}
+                data-iso={day.toISOString()}
+              >
+                {day.getUTCDate()}
+              </CalendarCell>
+            )}
+          </CalendarGrid>
         </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 
 DateRangeMenuCalendars.displayName = 'DateRangeMenuCalendars';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
new file mode 100644
index 0000000000..8019096a71
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
@@ -0,0 +1,12 @@
+import { DynamicRefGetter } from '@leafygreen-ui/hooks';
+
+import { DateType } from '../../../types';
+import { DateRangeMenuProps } from '../DateRangeMenu.types';
+
+export interface DateRangeMenuCalendarsProps
+  extends Pick<DateRangeMenuProps, 'value' | 'setValue'> {
+  highlight: DateType;
+  setHighlight: React.Dispatch<React.SetStateAction<DateType>>;
+  cellRefs: DynamicRefGetter<HTMLTableCellElement>;
+  chevronRefs: DynamicRefGetter<HTMLButtonElement>;
+}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
index 81417937e9..0f881c93f0 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
@@ -1,7 +1,5 @@
 import React, { createContext, useContext } from 'react';
 
-import { DynamicRefGetter } from '@leafygreen-ui/hooks';
-
 export interface DateRangeMenuContextProps {
   /**
    * The month displayed on the left
@@ -18,12 +16,6 @@ export interface DateRangeMenuContextProps {
    */
   nextMonth: Date;
 
-  /** A dynamic ref setter/getter for the start calendar cells */
-  startCellRefs: DynamicRefGetter<HTMLTableCellElement>;
-
-  /** A dynamic ref setter/getter for the end calendar cells */
-  endCellRefs: DynamicRefGetter<HTMLTableCellElement>;
-
   /** Memoized reference for Date.now */
   today: Date;
 }
@@ -32,8 +24,6 @@ export const DateRangeMenuContext = createContext<DateRangeMenuContextProps>({
   month: new Date(),
   nextMonth: new Date(),
   setMonth: () => {},
-  startCellRefs: (() => undefined) as DynamicRefGetter<HTMLTableCellElement>,
-  endCellRefs: (() => undefined) as DynamicRefGetter<HTMLTableCellElement>,
   today: new Date(),
 });
 
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
index 0ac66a949e..a65fb27dd9 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useMemo, useState } from 'react';
 
-import { useDynamicRefs } from '@leafygreen-ui/hooks';
-
 import { getFirstOfMonth, setToUTCMidnight } from '../../../utils';
 import { addMonthsUTC } from '../../../utils';
 import { DateRangeMenuProps } from '../DateRangeMenu.types';
@@ -10,7 +8,9 @@ import { DateRangeMenuContext } from './DateRangeMenuContext';
 
 export interface DateRangeMenuProviderProps
   extends Pick<DateRangeMenuProps, 'value'>,
-    PropsWithChildren<{}> {}
+    PropsWithChildren<{}> {
+  today: Date;
+}
 
 /**
  * Receives the start & end dates
@@ -18,26 +18,20 @@ export interface DateRangeMenuProviderProps
  */
 export const DateRangeMenuProvider = ({
   value,
+  today,
   children,
 }: DateRangeMenuProviderProps) => {
-  const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
-
   const [month, setMonth] = useState<Date>(
     getFirstOfMonth(value?.[0] ?? today),
   );
   const nextMonth = useMemo<Date>(() => addMonthsUTC(month, 1), [month]);
 
-  const startCellRefs = useDynamicRefs<HTMLTableCellElement>();
-  const endCellRefs = useDynamicRefs<HTMLTableCellElement>();
-
   return (
     <DateRangeMenuContext.Provider
       value={{
         month,
         nextMonth,
         setMonth,
-        startCellRefs,
-        endCellRefs,
         today,
       }}
     >
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
index e823518569..79a36fc2d4 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
@@ -1,22 +1,48 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import Button, { Size, Variant } from '@leafygreen-ui/button';
+import { DynamicRefGetter } from '@leafygreen-ui/hooks';
 import { Link } from '@leafygreen-ui/typography';
 
 import { clearButtonStyles, footerStyles } from './DateRangeMenuFooter.styles';
 
-export const DateRangeMenuFooter = () => {
+interface DateRangeMenuFooterProps {
+  buttonRefs: DynamicRefGetter<HTMLButtonElement>;
+}
+
+export const DateRangeMenuFooter = forwardRef<
+  HTMLDivElement,
+  DateRangeMenuFooterProps
+>(({ buttonRefs }: DateRangeMenuFooterProps, fwdRef) => {
   return (
-    <div className={footerStyles} data-lg="date-range-picker-menu-footer">
-      <Link as="button" className={clearButtonStyles}>
+    <div ref={fwdRef} className={footerStyles} data-lg="date-range_menu_footer">
+      <Link
+        ref={buttonRefs('clear')}
+        as="button"
+        className={clearButtonStyles}
+        aria-label="Clear selection"
+      >
         Clear
       </Link>
       <div>
-        <Button size={Size.XSmall}>Cancel</Button>
-        <Button size={Size.XSmall} variant={Variant.Primary}>
+        <Button
+          ref={buttonRefs('cancel')}
+          size={Size.XSmall}
+          aria-label="Cancel selection"
+        >
+          Cancel
+        </Button>
+        <Button
+          ref={buttonRefs('apply')}
+          size={Size.XSmall}
+          variant={Variant.Primary}
+          aria-label="Apply selection"
+        >
           Apply
         </Button>
       </div>
     </div>
   );
-};
+});
+
+DateRangeMenuFooter.displayName = 'DateRangeMenuFooter';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
index d803fe7b71..d12b4bd15c 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
@@ -10,24 +10,29 @@ import {
   baseQuickRangeButtonThemeStyles,
 } from './QuickRangeButton.styles';
 
+interface QuickRangeButtonProps
+  extends Omit<HTMLElementProps<'button'>, 'children'> {
+  label: string;
+}
+
 export const QuickRangeButton = forwardRef<
   HTMLButtonElement,
-  HTMLElementProps<'button'>
->(({ children, className, ...rest }, fwdRef) => {
+  QuickRangeButtonProps
+>(({ label, className, ...rest }, fwdRef) => {
   const { theme } = useDarkMode();
   return (
     <button
       ref={fwdRef}
-      data-lg="date-range-picker-quick-range-button"
+      data-lg="date-range_menu_quick-range-button"
       className={cx(
         baseQuickRangeButtonStyles,
         baseQuickRangeButtonThemeStyles[theme],
         className,
       )}
-      aria-label={getNodeTextContent(children)}
+      aria-label={getNodeTextContent(label)}
       {...rest}
     >
-      {children}
+      {label}
     </button>
   );
 });
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
index 1b3d902482..c20dd8ee79 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
 import range from 'lodash/range';
 
 import { cx } from '@leafygreen-ui/emotion';
+import { DynamicRefGetter } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Option, Select } from '@leafygreen-ui/select';
 import { Overline } from '@leafygreen-ui/typography';
@@ -21,81 +22,107 @@ import {
   quickSelectMenuThemeStyles,
 } from './QuickSelectionMenu.styles';
 
-export const QuickSelectionMenu = forwardRef<HTMLDivElement, {}>(
-  (_props, fwdRef) => {
-    const { theme } = useDarkMode();
-    const { min, max, isInRange } = useDatePickerContext();
-    const { month, setMonth } = useDateRangeMenuContext();
+interface QuickSelectionMenuProps {
+  selectRefs: DynamicRefGetter<HTMLButtonElement>;
+  quickRangeButtonRefs: DynamicRefGetter<HTMLButtonElement>;
+}
 
-    // TODO: is this the right logic?
-    const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
+export const QuickSelectionMenu = forwardRef<
+  HTMLDivElement,
+  QuickSelectionMenuProps
+>(({ selectRefs, quickRangeButtonRefs }, fwdRef) => {
+  const { theme } = useDarkMode();
+  const { min, max, isInRange } = useDatePickerContext();
+  const { month, setMonth } = useDateRangeMenuContext();
 
-    const updateMonth = (newMonth: Date) => {
-      // TODO: refine this logic
-      if (isInRange(newMonth)) {
-        setMonth(newMonth);
-      }
-    };
+  // TODO: is this the right logic?
+  const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
 
-    return (
-      <div
-        ref={fwdRef}
-        className={cx(
-          quickSelectionClassName,
-          quickSelectMenuStyles,
-          quickSelectMenuThemeStyles[theme],
-        )}
-        data-lg="date-range-picker-quick-select-menu"
-      >
-        <div className={quickSelectMenuMonthSelectContainerStyles}>
-          <Select
-            {...selectElementProps}
-            aria-label="Select month"
-            value={month.getUTCMonth().toString()}
-            onChange={m => {
-              const newMonth = setUTCMonth(month, Number(m));
-              updateMonth(newMonth);
-            }}
-          >
-            {Months.map((m, i) => (
-              <Option value={i.toString()} key={m.short}>
-                {m.short}
-              </Option>
-            ))}
-          </Select>
-          <Select
-            {...selectElementProps}
-            aria-label="Select year"
-            value={month.getUTCFullYear().toString()}
-            onChange={y => {
-              const newMonth = setUTCYear(month, Number(y));
-              updateMonth(newMonth);
-            }}
-          >
-            {yearOptions.map(y => (
-              <Option value={y.toString()} key={y}>
-                {y}
-              </Option>
-            ))}
-          </Select>
-        </div>
-        <div className={quickSelectMenuSelectionsContainerStyles}>
-          <Overline>Quick Ranges:</Overline>
-          {/*
+  const updateMonth = (newMonth: Date) => {
+    // TODO: refine this logic
+    if (isInRange(newMonth)) {
+      setMonth(newMonth);
+    }
+  };
+
+  return (
+    <div
+      ref={fwdRef}
+      className={cx(
+        quickSelectionClassName,
+        quickSelectMenuStyles,
+        quickSelectMenuThemeStyles[theme],
+      )}
+      data-lg="date-range_menu_quick-select"
+    >
+      <div className={quickSelectMenuMonthSelectContainerStyles}>
+        <Select
+          {...selectElementProps}
+          ref={selectRefs('month')}
+          aria-label="Select month"
+          value={month.getUTCMonth().toString()}
+          onChange={m => {
+            const newMonth = setUTCMonth(month, Number(m));
+            updateMonth(newMonth);
+          }}
+        >
+          {Months.map((m, i) => (
+            <Option value={i.toString()} key={m.short}>
+              {m.short}
+            </Option>
+          ))}
+        </Select>
+        <Select
+          {...selectElementProps}
+          ref={selectRefs('year')}
+          aria-label="Select year"
+          value={month.getUTCFullYear().toString()}
+          onChange={y => {
+            const newMonth = setUTCYear(month, Number(y));
+            updateMonth(newMonth);
+          }}
+        >
+          {yearOptions.map(y => (
+            <Option value={y.toString()} key={y}>
+              {y}
+            </Option>
+          ))}
+        </Select>
+      </div>
+      <div className={quickSelectMenuSelectionsContainerStyles}>
+        <Overline>Quick Ranges:</Overline>
+        {/*
            TODO: this functionality
            Do we want to set these up in some config object?
            */}
-          <QuickRangeButton>Today</QuickRangeButton>
-          <QuickRangeButton>Yesterday</QuickRangeButton>
-          <QuickRangeButton>Last 7 days</QuickRangeButton>
-          <QuickRangeButton>Last 30 days</QuickRangeButton>
-          <QuickRangeButton>Last 90 days</QuickRangeButton>
-          <QuickRangeButton>Last 12 months</QuickRangeButton>
-          <QuickRangeButton>All time</QuickRangeButton>
-        </div>
+        <QuickRangeButton ref={quickRangeButtonRefs('today')} label="Today" />
+        <QuickRangeButton
+          ref={quickRangeButtonRefs('yesterday')}
+          label="Yesterday"
+        />
+        <QuickRangeButton
+          ref={quickRangeButtonRefs('last7')}
+          label="Last 7 days"
+        />
+        <QuickRangeButton
+          ref={quickRangeButtonRefs('last30')}
+          label="Last 30 days"
+        />
+        <QuickRangeButton
+          ref={quickRangeButtonRefs('last90')}
+          label="Last 90 days"
+        />
+        <QuickRangeButton
+          ref={quickRangeButtonRefs('last12')}
+          label="Last 12 months"
+        />
+        <QuickRangeButton
+          ref={quickRangeButtonRefs('all-time')}
+          label="All time"
+        />
       </div>
-    );
-  },
-);
+    </div>
+  );
+});
 
-QuickSelectionMenu.displayName = 'DateRangeMenuQuickSelection';
+QuickSelectionMenu.displayName = 'QuickSelectionMenu';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 074be5a2df..7e028de719 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -651,7 +651,7 @@ describe('packages/date-picker/date-range-picker', () => {
                 tabNTimes(n);
               });
 
-              test(`focus on ${label}`, () => {
+              test(`focus on: ${label}`, () => {
                 if (element !== null) {
                   expect(element).toHaveFocus();
                 } else {
@@ -675,35 +675,38 @@ describe('packages/date-picker/date-range-picker', () => {
               let element: HTMLElement | null;
 
               beforeEach(() => {
-                renderResult = renderDateRangePicker();
+                renderResult = renderDateRangePicker({
+                  showQuickSelection: false,
+                });
                 renderResult.openMenu();
                 element = getTabStopElementMap(renderResult)[label];
                 tabNTimes(n);
               });
 
-              test(`focus on ${label}`, () => {
+              test(`focus on: ${label}`, () => {
                 expect(element).toHaveFocus();
               });
             });
           });
 
-          describe('when quick-select menu is open', () => {
+          describe.only('when quick-select menu is open', () => {
             const tabStops = expectedTabStopLabels['quick-select'];
             const testCases: Array<[number, (typeof tabStops)[number]]> =
               tabStops.map((stop, n) => [n, stop]);
 
             describe.each(testCases)(`Tab %i times`, (n, label) => {
-              let renderResult: RenderDateRangePickerResult;
               let element: HTMLElement | null;
 
               beforeEach(() => {
-                renderResult = renderDateRangePicker();
+                const renderResult = renderDateRangePicker({
+                  showQuickSelection: true,
+                });
                 renderResult.openMenu();
                 element = getTabStopElementMap(renderResult)[label];
                 tabNTimes(n);
               });
 
-              test(`focus on ${label}`, () => {
+              test(`focus on: ${label}`, () => {
                 expect(element).toHaveFocus();
               });
             });
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
index 4cc70fb0ef..a2a6b12c08 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
@@ -88,6 +88,22 @@ export const Basic: StoryFn<typeof DateRangePicker> = props => {
   return <DateRangePicker {...props} value={range} onRangeChange={setRange} />;
 };
 
+export const WithQuickSelection: StoryFn<typeof DateRangePicker> = props => {
+  const [range, setRange] = useState<DateRangeType | undefined>([
+    newUTC(2023, Month.October, 14),
+    newUTC(2023, Month.December, 26),
+  ]);
+
+  return (
+    <DateRangePicker
+      {...props}
+      value={range}
+      onRangeChange={setRange}
+      showQuickSelection
+    />
+  );
+};
+
 export const Uncontrolled: StoryFn<typeof DateRangePicker> = props => {
   return <DateRangePicker {...props} />;
 };
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
index 881068dac6..54f65116d8 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
@@ -87,17 +87,21 @@ export const renderDateRangePicker = (
 
     // Footer
     const menuFooter = menuContainerEl?.querySelector(
-      '[data-lg="date-range-picker-menu-footer"]',
+      '[data-lg="date-range_menu_footer"]',
     ) as HTMLDivElement | null;
-    const clearButton = result.queryByText('Clear') as HTMLButtonElement | null;
-    const cancelButton = result.queryByText(
-      'Cancel',
+    const clearButton = result.queryByLabelText(
+      'Clear selection',
+    ) as HTMLButtonElement | null;
+    const cancelButton = result.queryByLabelText(
+      'Cancel selection',
+    ) as HTMLButtonElement | null;
+    const applyButton = result.queryByLabelText(
+      'Apply selection',
     ) as HTMLButtonElement | null;
-    const applyButton = result.queryByText('Apply') as HTMLButtonElement | null;
 
     // Quick select menu
     const quickSelectMenu = menuContainerEl?.querySelector(
-      '[data-lg="date-range-picker-quick-select-menu"]',
+      '[data-lg="date-range_menu_quick-select"]',
     ) as HTMLDivElement | null;
     const monthSelect = result.queryByLabelText(
       'Select month',
@@ -108,7 +112,7 @@ export const renderDateRangePicker = (
 
     const quickRangeButtons = Array.from(
       quickSelectMenu?.querySelectorAll(
-        '[data-lg="date-range-picker-quick-range-button"]',
+        '[data-lg="date-range_menu_quick-range-button"]',
       ) || [null],
     ) as Array<HTMLButtonElement | null>;
 

From 6046dbcc0944238f4518a93ca09b63a53a23c26c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 12 Oct 2023 15:03:41 -0400
Subject: [PATCH 218/351] adds ref to Select component

---
 packages/select/src/MenuButton/MenuButton.tsx |    2 +-
 packages/select/src/Select/Select.spec.tsx    |    9 +-
 packages/select/src/Select/Select.tsx         | 1060 +++++++++--------
 packages/select/src/Select/Select.types.ts    |    4 +-
 packages/select/src/Select/index.ts           |    2 +-
 5 files changed, 553 insertions(+), 524 deletions(-)

diff --git a/packages/select/src/MenuButton/MenuButton.tsx b/packages/select/src/MenuButton/MenuButton.tsx
index cf488e3544..1a4bdd48b7 100644
--- a/packages/select/src/MenuButton/MenuButton.tsx
+++ b/packages/select/src/MenuButton/MenuButton.tsx
@@ -30,7 +30,7 @@ import { MenuButtonProps } from './MenuButton.types';
 /**
  * @internal
  */
-const MenuButton = React.forwardRef<HTMLElement, MenuButtonProps>(
+const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
   function MenuButton(
     {
       children,
diff --git a/packages/select/src/Select/Select.spec.tsx b/packages/select/src/Select/Select.spec.tsx
index 889827613b..816406f046 100644
--- a/packages/select/src/Select/Select.spec.tsx
+++ b/packages/select/src/Select/Select.spec.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { createRef, useState } from 'react';
 import { act } from 'react-dom/test-utils';
 import {
   fireEvent,
@@ -136,6 +136,13 @@ describe('packages/select', () => {
     expect(button).toHaveAttribute('aria-disabled', 'true');
   });
 
+  test('accepts a ref', () => {
+    const ref = createRef<HTMLDivElement>();
+    const { container } = render(<Select ref={ref} {...defaultProps} />);
+    expect(ref.current).toBeDefined();
+    expect(ref.current).toBe(container.firstElementChild);
+  });
+
   test('must render options in <Select>', () => {
     Context.within(Jest.spyContext(console, 'error'), spy => {
       spy.mockImplementation();
diff --git a/packages/select/src/Select/Select.tsx b/packages/select/src/Select/Select.tsx
index bc289185d7..fb2e2c27f0 100644
--- a/packages/select/src/Select/Select.tsx
+++ b/packages/select/src/Select/Select.tsx
@@ -1,9 +1,18 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  ComponentProps,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  WeakValidationMap,
+} from 'react';
 import PropTypes from 'prop-types';
 
 import { css, cx } from '@leafygreen-ui/emotion';
 import {
   useEventListener,
+  useForwardedRef,
   useIdAllocator,
   useViewportSize,
 } from '@leafygreen-ui/hooks';
@@ -43,563 +52,576 @@ import { DropdownWidthBasis, SelectProps, Size, State } from './Select.types';
  *
  * In a select input where there are less than 3-4 items, consider using radio boxes, or radio inputs instead.
  */
-export default function Select({
-  children,
-  darkMode: darkModeProp,
-  size = Size.Default,
-  disabled = false,
-  allowDeselect = true,
-  usePortal = true,
-  placeholder = 'Select',
-  errorMessage = '',
-  state = State.None,
-  dropdownWidthBasis = DropdownWidthBasis.Trigger,
-  baseFontSize = BaseFontSize.Body1,
-  id: idProp,
-  'aria-labelledby': ariaLabelledby,
-  'aria-label': ariaLabel,
-  className,
-  label,
-  description,
-  name,
-  defaultValue,
-  value,
-  onChange,
-  readOnly,
-  portalContainer,
-  scrollContainer,
-  portalClassName,
-  popoverZIndex,
-  __INTERNAL__menuButtonSlot__,
-  ...rest
-}: SelectProps) {
-  const id = useIdAllocator({ prefix: 'select', id: idProp });
-  const labelId = useMemo(
-    () => (ariaLabel && !label ? undefined : ariaLabelledby ?? `${id}-label`),
-    [ariaLabelledby, ariaLabel, label, id],
-  );
-
-  if (!label && !ariaLabelledby && !ariaLabel) {
-    console.error(
-      'For screen-reader accessibility, label, aria-label, or aria-labelledby must be provided to Select.',
+export const Select = forwardRef<HTMLDivElement, SelectProps>(
+  (
+    {
+      children,
+      darkMode: darkModeProp,
+      size = Size.Default,
+      disabled = false,
+      allowDeselect = true,
+      usePortal = true,
+      placeholder = 'Select',
+      errorMessage = '',
+      state = State.None,
+      dropdownWidthBasis = DropdownWidthBasis.Trigger,
+      baseFontSize = BaseFontSize.Body1,
+      id: idProp,
+      'aria-labelledby': ariaLabelledby,
+      'aria-label': ariaLabel,
+      className,
+      label,
+      description,
+      name,
+      defaultValue,
+      value,
+      onChange,
+      readOnly,
+      portalContainer,
+      scrollContainer,
+      portalClassName,
+      popoverZIndex,
+      __INTERNAL__menuButtonSlot__,
+      ...rest
+    },
+    fwdRef,
+  ) => {
+    const id = useIdAllocator({ prefix: 'select', id: idProp });
+    const labelId = useMemo(
+      () => (ariaLabel && !label ? undefined : ariaLabelledby ?? `${id}-label`),
+      [ariaLabelledby, ariaLabel, label, id],
     );
-  }
-
-  const { darkMode } = useDarkMode(darkModeProp);
 
-  const descriptionId = `${id}-description`;
-  const menuId = `${id}-menu`;
-
-  const [open, setOpen] = useState(false);
+    if (!label && !ariaLabelledby && !ariaLabel) {
+      console.error(
+        'For screen-reader accessibility, label, aria-label, or aria-labelledby must be provided to Select.',
+      );
+    }
 
-  const menuButtonRef = useStateRef<HTMLDivElement | null>(null);
-  const menuButtonId = useIdAllocator({ prefix: 'select' });
-  const listMenuRef = useStateRef<HTMLUListElement | null>(null);
+    const { darkMode } = useDarkMode(darkModeProp);
 
-  const sizeSet = sizeSets[size];
+    const descriptionId = `${id}-description`;
+    const menuId = `${id}-menu`;
 
-  const providerData = useMemo(() => {
-    return { size, open, disabled };
-  }, [size, open, disabled]);
+    const [open, setOpen] = useState(false);
 
-  useEffect(() => {
-    if (value !== undefined && onChange === undefined && readOnly !== true) {
-      console.warn(
-        'You provided a `value` prop to a form field without an `onChange` handler. ' +
-          'This will render a read-only field. ' +
-          'If the field should be mutable use `defaultValue`. ' +
-          'Otherwise, set either `onChange` or `readOnly`.',
-      );
-    }
-  }, [onChange, readOnly, value]);
-
-  /**
-   * Open / close state
-   */
-  const onOpen = useCallback(() => {
-    setOpen(true);
-  }, []);
-
-  const onClose = useCallback(() => {
-    setOpen(false);
-    menuButtonRef.current!.focus();
-  }, [menuButtonRef]);
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
+    const containerRef = useForwardedRef(fwdRef, null);
+    const menuButtonRef = useStateRef<HTMLButtonElement>(null);
+    const menuButtonId = useIdAllocator({ prefix: 'select' });
+    const listMenuRef = useStateRef<HTMLUListElement | null>(null);
 
-    const onClickOutside = (event: MouseEvent) => {
-      const stillFocused =
-        menuButtonRef.current!.contains(event.target as Node) ||
-        listMenuRef.current!.contains(event.target as Node);
-      setOpen(stillFocused);
-    };
+    const sizeSet = sizeSets[size];
 
-    document.addEventListener('mousedown', onClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', onClickOutside);
-    };
-  }, [listMenuRef, menuButtonRef, open]);
+    const providerData = useMemo(() => {
+      return { size, open, disabled };
+    }, [size, open, disabled]);
 
-  const initialUncontrolledSelectedOption = useMemo(() => {
-    let initialUncontrolledSelectedOption: OptionElement | null = null;
+    useEffect(() => {
+      if (value !== undefined && onChange === undefined && readOnly !== true) {
+        console.warn(
+          'You provided a `value` prop to a form field without an `onChange` handler. ' +
+            'This will render a read-only field. ' +
+            'If the field should be mutable use `defaultValue`. ' +
+            'Otherwise, set either `onChange` or `readOnly`.',
+        );
+      }
+    }, [onChange, readOnly, value]);
+
+    /**
+     * Open / close state
+     */
+    const onOpen = useCallback(() => {
+      setOpen(true);
+    }, []);
+
+    const onClose = useCallback(() => {
+      setOpen(false);
+      menuButtonRef.current!.focus();
+    }, [menuButtonRef]);
+
+    useEffect(() => {
+      if (!open) {
+        return;
+      }
 
-    if (value === undefined && defaultValue !== undefined) {
-      traverseSelectChildren(children, (option, group) => {
-        if (isOptionSelectable(option, group, defaultValue)) {
-          initialUncontrolledSelectedOption = option;
-        }
-      });
-    }
+      const onClickOutside = (event: MouseEvent) => {
+        const stillFocused =
+          menuButtonRef.current!.contains(event.target as Node) ||
+          listMenuRef.current!.contains(event.target as Node);
+        setOpen(stillFocused);
+      };
 
-    return initialUncontrolledSelectedOption;
-  }, [children, defaultValue, value]);
-
-  /**
-   * Selection
-   */
-
-  // We store the option element instance rather than just the value in order
-  // to differentiate between multiple options that have the same value.
-  const [uncontrolledSelectedOption, setUncontrolledSelectedOption] =
-    useState<OptionElement | null>(initialUncontrolledSelectedOption);
-
-  // If the option instances have changed we'll do our best to preserve
-  // the state by checking if any of the new option instances sufficiently
-  // match the current state and use it instead.
-  useEffect(() => {
-    if (uncontrolledSelectedOption !== null) {
-      setUncontrolledSelectedOption(
-        reconcileOption(children, uncontrolledSelectedOption) ??
-          initialUncontrolledSelectedOption,
-      );
-    }
-  }, [children, initialUncontrolledSelectedOption, uncontrolledSelectedOption]);
+      document.addEventListener('mousedown', onClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', onClickOutside);
+      };
+    }, [listMenuRef, menuButtonRef, open]);
 
-  const selectedOption = useMemo(() => {
-    if (value !== undefined) {
-      let selectedOption: OptionElement | null = null;
+    const initialUncontrolledSelectedOption = useMemo(() => {
+      let initialUncontrolledSelectedOption: OptionElement | null = null;
 
-      traverseSelectChildren(children, (option, group) => {
-        if (isOptionSelectable(option, group, value)) {
-          selectedOption = option;
-        }
-      });
-      return selectedOption;
-    } else {
-      return uncontrolledSelectedOption;
-    }
-  }, [children, uncontrolledSelectedOption, value]);
+      if (value === undefined && defaultValue !== undefined) {
+        traverseSelectChildren(children, (option, group) => {
+          if (isOptionSelectable(option, group, defaultValue)) {
+            initialUncontrolledSelectedOption = option;
+          }
+        });
+      }
 
-  const onSelect = useCallback(
-    (option: OptionElement | null, event: React.MouseEvent | KeyboardEvent) => {
-      if (value === undefined) {
-        setUncontrolledSelectedOption(option);
+      return initialUncontrolledSelectedOption;
+    }, [children, defaultValue, value]);
+
+    /**
+     * Selection
+     */
+
+    // We store the option element instance rather than just the value in order
+    // to differentiate between multiple options that have the same value.
+    const [uncontrolledSelectedOption, setUncontrolledSelectedOption] =
+      useState<OptionElement | null>(initialUncontrolledSelectedOption);
+
+    // If the option instances have changed we'll do our best to preserve
+    // the state by checking if any of the new option instances sufficiently
+    // match the current state and use it instead.
+    useEffect(() => {
+      if (uncontrolledSelectedOption !== null) {
+        setUncontrolledSelectedOption(
+          reconcileOption(children, uncontrolledSelectedOption) ??
+            initialUncontrolledSelectedOption,
+        );
       }
-      onChange?.(getOptionValue(option), event);
-      setFocusedOption(undefined);
-      onClose();
-    },
-    [onChange, onClose, value],
-  );
-
-  const getOptionClickHandler = useCallback(
-    (option: OptionElement | null, optionDisabled: boolean) => {
-      return (event: React.MouseEvent) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (!disabled && !optionDisabled) {
-          onSelect(option, event);
-          onClose();
+    }, [
+      children,
+      initialUncontrolledSelectedOption,
+      uncontrolledSelectedOption,
+    ]);
+
+    const selectedOption = useMemo(() => {
+      if (value !== undefined) {
+        let selectedOption: OptionElement | null = null;
+
+        traverseSelectChildren(children, (option, group) => {
+          if (isOptionSelectable(option, group, value)) {
+            selectedOption = option;
+          }
+        });
+        return selectedOption;
+      } else {
+        return uncontrolledSelectedOption;
+      }
+    }, [children, uncontrolledSelectedOption, value]);
+
+    const onSelect = useCallback(
+      (
+        option: OptionElement | null,
+        event: React.MouseEvent | KeyboardEvent,
+      ) => {
+        if (value === undefined) {
+          setUncontrolledSelectedOption(option);
         }
-      };
-    },
-    [disabled, onClose, onSelect],
-  );
-
-  /**
-   * Focus
-   */
+        onChange?.(getOptionValue(option), event);
+        setFocusedOption(undefined);
+        onClose();
+      },
+      [onChange, onClose, value],
+    );
 
-  const [focusedOption, setFocusedOption] = useState<
-    OptionElement | null | undefined
-  >();
+    const getOptionClickHandler = useCallback(
+      (option: OptionElement | null, optionDisabled: boolean) => {
+        return (event: React.MouseEvent) => {
+          event.preventDefault();
+          event.stopPropagation();
 
-  const enabledOptions = useMemo(() => {
-    const enabledOptions: Array<OptionElement | null> = [];
+          if (!disabled && !optionDisabled) {
+            onSelect(option, event);
+            onClose();
+          }
+        };
+      },
+      [disabled, onClose, onSelect],
+    );
 
-    if (allowDeselect) {
-      enabledOptions.push(null);
-    }
+    /**
+     * Focus
+     */
 
-    traverseSelectChildren(children, (option, group) => {
-      if (!isOptionDisabled(option, group)) {
-        enabledOptions.push(option);
-      }
-    });
+    const [focusedOption, setFocusedOption] = useState<
+      OptionElement | null | undefined
+    >();
 
-    return enabledOptions;
-  }, [children, allowDeselect]);
+    const enabledOptions = useMemo(() => {
+      const enabledOptions: Array<OptionElement | null> = [];
 
-  const onSelectFocusedOption = useCallback(
-    (event: KeyboardEvent) => {
-      if (focusedOption !== undefined) {
-        onSelect(focusedOption, event);
+      if (allowDeselect) {
+        enabledOptions.push(null);
       }
-    },
-    [focusedOption, onSelect],
-  );
-
-  const onFocusFirstOption = useCallback(() => {
-    setFocusedOption(enabledOptions[0]);
-  }, [enabledOptions]);
-
-  const onFocusLastOption = useCallback(() => {
-    setFocusedOption(enabledOptions[enabledOptions.length - 1]);
-  }, [enabledOptions]);
-
-  const onFocusPreviousOption = useCallback(() => {
-    if (
-      focusedOption === undefined ||
-      enabledOptions.indexOf(focusedOption) === 0
-    ) {
-      onFocusLastOption();
-    } else {
-      const index = enabledOptions.indexOf(focusedOption) - 1;
-      setFocusedOption(enabledOptions[index]);
-    }
-  }, [enabledOptions, focusedOption, onFocusLastOption]);
-
-  const onFocusNextOption = useCallback(() => {
-    if (
-      focusedOption === undefined ||
-      enabledOptions.indexOf(focusedOption) === enabledOptions.length - 1
-    ) {
-      onFocusFirstOption();
-    } else {
-      const index = enabledOptions.indexOf(focusedOption) + 1;
-
-      setFocusedOption(enabledOptions[index]);
-    }
-  }, [enabledOptions, focusedOption, onFocusFirstOption]);
 
-  const getOptionFocusHandler = useCallback(
-    (option: OptionElement | null, optionDisabled: boolean) => {
-      return (event: React.FocusEvent) => {
-        event.preventDefault();
-        event.stopPropagation();
+      traverseSelectChildren(children, (option, group) => {
+        if (!isOptionDisabled(option, group)) {
+          enabledOptions.push(option);
+        }
+      });
+
+      return enabledOptions;
+    }, [children, allowDeselect]);
 
-        if (!disabled && !optionDisabled) {
-          setFocusedOption(option);
+    const onSelectFocusedOption = useCallback(
+      (event: KeyboardEvent) => {
+        if (focusedOption !== undefined) {
+          onSelect(focusedOption, event);
         }
-      };
-    },
-    [disabled],
-  );
+      },
+      [focusedOption, onSelect],
+    );
 
-  const onKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      // No support for modifiers yet
-      if (event.ctrlKey || event.shiftKey || event.altKey) {
-        return;
+    const onFocusFirstOption = useCallback(() => {
+      setFocusedOption(enabledOptions[0]);
+    }, [enabledOptions]);
+
+    const onFocusLastOption = useCallback(() => {
+      setFocusedOption(enabledOptions[enabledOptions.length - 1]);
+    }, [enabledOptions]);
+
+    const onFocusPreviousOption = useCallback(() => {
+      if (
+        focusedOption === undefined ||
+        enabledOptions.indexOf(focusedOption) === 0
+      ) {
+        onFocusLastOption();
+      } else {
+        const index = enabledOptions.indexOf(focusedOption) - 1;
+        setFocusedOption(enabledOptions[index]);
+      }
+    }, [enabledOptions, focusedOption, onFocusLastOption]);
+
+    const onFocusNextOption = useCallback(() => {
+      if (
+        focusedOption === undefined ||
+        enabledOptions.indexOf(focusedOption) === enabledOptions.length - 1
+      ) {
+        onFocusFirstOption();
+      } else {
+        const index = enabledOptions.indexOf(focusedOption) + 1;
+
+        setFocusedOption(enabledOptions[index]);
       }
+    }, [enabledOptions, focusedOption, onFocusFirstOption]);
+
+    const getOptionFocusHandler = useCallback(
+      (option: OptionElement | null, optionDisabled: boolean) => {
+        return (event: React.FocusEvent) => {
+          event.preventDefault();
+          event.stopPropagation();
+
+          if (!disabled && !optionDisabled) {
+            setFocusedOption(option);
+          }
+        };
+      },
+      [disabled],
+    );
 
-      const isFocusInMenu = listMenuRef.current?.contains(
-        document.activeElement,
-      );
-      const isFocusOnButton = menuButtonRef.current?.contains(
-        document.activeElement,
-      );
-      const isFocusInComponent = isFocusOnButton || isFocusInMenu;
+    const onKeyDown = useCallback(
+      (event: KeyboardEvent) => {
+        // No support for modifiers yet
+        if (event.ctrlKey || event.shiftKey || event.altKey) {
+          return;
+        }
 
-      // We only respond to keypresses if the focus is in the component
-      if (isFocusInComponent) {
-        switch (event.key) {
-          case keyMap.Tab:
-          case keyMap.Escape:
-            onClose();
-            setFocusedOption(undefined);
-            break;
-          case keyMap.Enter:
-          case keyMap.Space:
-            if (open && !isFocusOnButton) {
-              // Default behavior is to use these keys to open the dropdown but we handle that manually
-              event.preventDefault();
-            }
-
-            onSelectFocusedOption(event);
-            break;
-          case keyMap.ArrowUp:
-            if (!open && isFocusOnButton) {
-              onOpen();
-            }
-            event.preventDefault(); // Prevents page scrolling
-            onFocusPreviousOption();
-            break;
-          case keyMap.ArrowDown:
-            if (!open && isFocusOnButton) {
-              onOpen();
-            }
-            event.preventDefault(); // Prevents page scrolling
-            onFocusNextOption();
-            break;
+        const isFocusInMenu = listMenuRef.current?.contains(
+          document.activeElement,
+        );
+        const isFocusOnButton = menuButtonRef.current?.contains(
+          document.activeElement,
+        );
+        const isFocusInComponent = isFocusOnButton || isFocusInMenu;
+
+        // We only respond to keypresses if the focus is in the component
+        if (isFocusInComponent) {
+          switch (event.key) {
+            case keyMap.Tab:
+            case keyMap.Escape:
+              onClose();
+              setFocusedOption(undefined);
+              break;
+            case keyMap.Enter:
+            case keyMap.Space:
+              if (open && !isFocusOnButton) {
+                // Default behavior is to use these keys to open the dropdown but we handle that manually
+                event.preventDefault();
+              }
+
+              onSelectFocusedOption(event);
+              break;
+            case keyMap.ArrowUp:
+              if (!open && isFocusOnButton) {
+                onOpen();
+              }
+              event.preventDefault(); // Prevents page scrolling
+              onFocusPreviousOption();
+              break;
+            case keyMap.ArrowDown:
+              if (!open && isFocusOnButton) {
+                onOpen();
+              }
+              event.preventDefault(); // Prevents page scrolling
+              onFocusNextOption();
+              break;
+          }
         }
-      }
-    },
-    [
-      listMenuRef,
-      menuButtonRef,
-      onClose,
-      open,
-      onSelectFocusedOption,
-      onFocusPreviousOption,
-      onFocusNextOption,
-      onOpen,
-    ],
-  );
-
-  useEventListener('keydown', onKeyDown);
-
-  /**
-   * Rendering
-   */
-
-  const viewportSize = useViewportSize();
-
-  const hasGlyphs = useMemo(() => {
-    let hasGlyphs = false;
-
-    traverseSelectChildren(children, option => {
-      hasGlyphs ||= option.props.glyph !== undefined;
-    });
-
-    return hasGlyphs;
-  }, [children]);
-
-  const canTriggerScrollIntoView = useMemo(
-    () =>
-      viewportSize !== null &&
-      listMenuRef.current !== null &&
-      focusedOption === undefined &&
-      open,
-    [focusedOption, listMenuRef, open, viewportSize],
-  );
-
-  const deselectionOption = useMemo(() => {
-    const selected = selectedOption === null;
+      },
+      [
+        listMenuRef,
+        menuButtonRef,
+        onClose,
+        open,
+        onSelectFocusedOption,
+        onFocusPreviousOption,
+        onFocusNextOption,
+        onOpen,
+      ],
+    );
 
-    return (
-      <InternalOption
-        className={undefined}
-        glyph={undefined}
-        selected={selected}
-        focused={focusedOption === null}
-        disabled={false}
-        onClick={getOptionClickHandler(null, false)}
-        onFocus={getOptionFocusHandler(null, false)}
-        hasGlyphs={false}
-        triggerScrollIntoView={selected && canTriggerScrollIntoView}
-      >
-        {placeholder}
-      </InternalOption>
+    useEventListener('keydown', onKeyDown);
+
+    /**
+     * Rendering
+     */
+
+    const viewportSize = useViewportSize();
+
+    const hasGlyphs = useMemo(() => {
+      let hasGlyphs = false;
+
+      traverseSelectChildren(children, option => {
+        hasGlyphs ||= option.props.glyph !== undefined;
+      });
+
+      return hasGlyphs;
+    }, [children]);
+
+    const canTriggerScrollIntoView = useMemo(
+      () =>
+        viewportSize !== null &&
+        listMenuRef.current !== null &&
+        focusedOption === undefined &&
+        open,
+      [focusedOption, listMenuRef, open, viewportSize],
     );
-  }, [
-    canTriggerScrollIntoView,
-    focusedOption,
-    getOptionClickHandler,
-    getOptionFocusHandler,
-    placeholder,
-    selectedOption,
-  ]);
-
-  const renderedChildren = useMemo(
-    () =>
-      convertToInternalElements(
-        children,
-        (option, group) => {
-          const selected = option === selectedOption;
-          const disabled = isOptionDisabled(option, group);
-
-          return {
-            ...option.props,
-            className: option.props.className,
-            glyph: option.props.glyph,
-            selected,
-            focused: option === focusedOption,
-            disabled,
-            children: option.props.children,
-            hasGlyphs,
-            onClick: getOptionClickHandler(option, disabled),
-            onFocus: getOptionFocusHandler(option, disabled),
-            triggerScrollIntoView: selected && canTriggerScrollIntoView,
-          };
-        },
-        () => {
-          console.error(
-            '`Select` instance received child that is not `Option` or `OptionGroup`.',
-          );
-        },
-      ),
-    [
+
+    const deselectionOption = useMemo(() => {
+      const selected = selectedOption === null;
+
+      return (
+        <InternalOption
+          className={undefined}
+          glyph={undefined}
+          selected={selected}
+          focused={focusedOption === null}
+          disabled={false}
+          onClick={getOptionClickHandler(null, false)}
+          onFocus={getOptionFocusHandler(null, false)}
+          hasGlyphs={false}
+          triggerScrollIntoView={selected && canTriggerScrollIntoView}
+        >
+          {placeholder}
+        </InternalOption>
+      );
+    }, [
       canTriggerScrollIntoView,
-      children,
       focusedOption,
       getOptionClickHandler,
       getOptionFocusHandler,
-      hasGlyphs,
+      placeholder,
       selectedOption,
-    ],
-  );
-
-  const popoverProps = {
-    popoverZIndex,
-    ...(usePortal
-      ? {
-          usePortal,
-          portalClassName,
-          portalContainer,
-          scrollContainer,
-        }
-      : { usePortal }),
-  };
-
-  return (
-    <LeafyGreenProvider darkMode={darkMode}>
-      <div className={cx(wrapperStyle, className)}>
-        {(label || description) && (
-          <div className={labelDescriptionContainerStyle}>
-            {label && (
-              <Label
-                htmlFor={menuButtonId}
-                id={labelId}
-                darkMode={darkMode}
-                disabled={disabled}
-                className={cx(
-                  {
-                    [largeLabelStyles]: size === Size.Large,
-                    [css`
-                      font-size: ${baseFontSize}px;
-                      line-height: 20px;
-                    `]: size === Size.Default,
-                  },
-                  css`
-                    // Prevent hover state from showing when hovering label
-                    pointer-events: none;
-                  `,
-                  css`
-                    ${MobileMediaQuery} {
-                      font-size: ${mobileSizeSet.label.text}px;
-                      line-height: ${mobileSizeSet.label.lineHeight}px;
-                    }
-                  `,
-                )}
-              >
-                {label}
-              </Label>
-            )}
-
-            {description && (
-              <Description
-                id={descriptionId}
-                darkMode={darkMode}
-                disabled={disabled}
-                className={cx(
-                  {
-                    [largeLabelStyles]: size === Size.Large,
-                    [css`
-                      font-size: ${baseFontSize}px;
-                      line-height: 20px;
-                    `]: size === Size.Default,
-                  },
-                  css`
-                    ${MobileMediaQuery} {
-                      font-size: ${mobileSizeSet.description.text}px;
-                      line-height: ${mobileSizeSet.description.lineHeight}px;
-                    }
-                  `,
-                )}
+    ]);
+
+    const renderedChildren = useMemo(
+      () =>
+        convertToInternalElements(
+          children,
+          (option, group) => {
+            const selected = option === selectedOption;
+            const disabled = isOptionDisabled(option, group);
+
+            return {
+              ...option.props,
+              className: option.props.className,
+              glyph: option.props.glyph,
+              selected,
+              focused: option === focusedOption,
+              disabled,
+              children: option.props.children,
+              hasGlyphs,
+              onClick: getOptionClickHandler(option, disabled),
+              onFocus: getOptionFocusHandler(option, disabled),
+              triggerScrollIntoView: selected && canTriggerScrollIntoView,
+            };
+          },
+          () => {
+            console.error(
+              '`Select` instance received child that is not `Option` or `OptionGroup`.',
+            );
+          },
+        ),
+      [
+        canTriggerScrollIntoView,
+        children,
+        focusedOption,
+        getOptionClickHandler,
+        getOptionFocusHandler,
+        hasGlyphs,
+        selectedOption,
+      ],
+    );
+
+    const popoverProps = {
+      popoverZIndex,
+      ...(usePortal
+        ? {
+            usePortal,
+            portalClassName,
+            portalContainer,
+            scrollContainer,
+          }
+        : { usePortal }),
+    };
+
+    return (
+      <LeafyGreenProvider darkMode={darkMode}>
+        <div ref={containerRef} className={cx(wrapperStyle, className)}>
+          {(label || description) && (
+            <div className={labelDescriptionContainerStyle}>
+              {label && (
+                <Label
+                  htmlFor={menuButtonId}
+                  id={labelId}
+                  darkMode={darkMode}
+                  disabled={disabled}
+                  className={cx(
+                    {
+                      [largeLabelStyles]: size === Size.Large,
+                      [css`
+                        font-size: ${baseFontSize}px;
+                        line-height: 20px;
+                      `]: size === Size.Default,
+                    },
+                    css`
+                      // Prevent hover state from showing when hovering label
+                      pointer-events: none;
+                    `,
+                    css`
+                      ${MobileMediaQuery} {
+                        font-size: ${mobileSizeSet.label.text}px;
+                        line-height: ${mobileSizeSet.label.lineHeight}px;
+                      }
+                    `,
+                  )}
+                >
+                  {label}
+                </Label>
+              )}
+
+              {description && (
+                <Description
+                  id={descriptionId}
+                  darkMode={darkMode}
+                  disabled={disabled}
+                  className={cx(
+                    {
+                      [largeLabelStyles]: size === Size.Large,
+                      [css`
+                        font-size: ${baseFontSize}px;
+                        line-height: 20px;
+                      `]: size === Size.Default,
+                    },
+                    css`
+                      ${MobileMediaQuery} {
+                        font-size: ${mobileSizeSet.description.text}px;
+                        line-height: ${mobileSizeSet.description.lineHeight}px;
+                      }
+                    `,
+                  )}
+                >
+                  {description}
+                </Description>
+              )}
+            </div>
+          )}
+
+          <SelectContext.Provider value={providerData}>
+            <MenuButton
+              {...rest}
+              id={menuButtonId}
+              ref={menuButtonRef}
+              name={name}
+              readOnly={readOnly}
+              value={getOptionValue(selectedOption)}
+              text={
+                selectedOption !== null
+                  ? selectedOption.props.children
+                  : placeholder
+              }
+              deselected={selectedOption === null}
+              onOpen={onOpen}
+              onClose={onClose}
+              aria-labelledby={labelId}
+              aria-label={!label && !ariaLabelledby ? ariaLabel : undefined}
+              aria-controls={menuId}
+              aria-expanded={open}
+              aria-describedby={descriptionId}
+              aria-invalid={state === State.Error}
+              aria-disabled={disabled}
+              errorMessage={errorMessage}
+              state={state}
+              baseFontSize={baseFontSize}
+              __INTERNAL__menuButtonSlot__={__INTERNAL__menuButtonSlot__}
+            >
+              <ListMenu
+                labelId={labelId}
+                id={menuId}
+                referenceElement={menuButtonRef}
+                ref={listMenuRef}
+                className={cx({
+                  [css`
+                    width: ${menuButtonRef.current?.clientWidth}px;
+                  `]: dropdownWidthBasis === DropdownWidthBasis.Trigger,
+                })}
+                dropdownWidthBasis={dropdownWidthBasis}
+                {...popoverProps}
               >
-                {description}
-              </Description>
-            )}
-          </div>
-        )}
-
-        <SelectContext.Provider value={providerData}>
-          <MenuButton
-            {...rest}
-            id={menuButtonId}
-            ref={menuButtonRef}
-            name={name}
-            readOnly={readOnly}
-            value={getOptionValue(selectedOption)}
-            text={
-              selectedOption !== null
-                ? selectedOption.props.children
-                : placeholder
-            }
-            deselected={selectedOption === null}
-            onOpen={onOpen}
-            onClose={onClose}
-            aria-labelledby={labelId}
-            aria-label={!label && !ariaLabelledby ? ariaLabel : undefined}
-            aria-controls={menuId}
-            aria-expanded={open}
-            aria-describedby={descriptionId}
-            aria-invalid={state === State.Error}
-            aria-disabled={disabled}
-            errorMessage={errorMessage}
-            state={state}
-            baseFontSize={baseFontSize}
-            __INTERNAL__menuButtonSlot__={__INTERNAL__menuButtonSlot__}
-          >
-            <ListMenu
-              labelId={labelId}
-              id={menuId}
-              referenceElement={menuButtonRef}
-              ref={listMenuRef}
-              className={cx({
-                [css`
-                  width: ${menuButtonRef.current?.clientWidth}px;
-                `]: dropdownWidthBasis === DropdownWidthBasis.Trigger,
-              })}
-              dropdownWidthBasis={dropdownWidthBasis}
-              {...popoverProps}
+                {allowDeselect && deselectionOption}
+                {renderedChildren}
+              </ListMenu>
+            </MenuButton>
+          </SelectContext.Provider>
+          {state === State.Error && errorMessage && (
+            <span
+              className={cx(
+                errorTextStyle({ darkMode, sizeSet }),
+                css`
+                  ${MobileMediaQuery} {
+                    font-size: ${mobileSizeSet.description.text}px;
+                    line-height: ${mobileSizeSet.description.lineHeight}px;
+                  }
+                `,
+                {
+                  [css`
+                    // Hide error text when menu is open,
+                    // so it doesn't peek around the menu corner
+                    color: transparent;
+                  `]: open,
+                },
+              )}
             >
-              {allowDeselect && deselectionOption}
-              {renderedChildren}
-            </ListMenu>
-          </MenuButton>
-        </SelectContext.Provider>
-        {state === State.Error && errorMessage && (
-          <span
-            className={cx(
-              errorTextStyle({ darkMode, sizeSet }),
-              css`
-                ${MobileMediaQuery} {
-                  font-size: ${mobileSizeSet.description.text}px;
-                  line-height: ${mobileSizeSet.description.lineHeight}px;
-                }
-              `,
-              {
-                [css`
-                  // Hide error text when menu is open,
-                  // so it doesn't peek around the menu corner
-                  color: transparent;
-                `]: open,
-              },
-            )}
-          >
-            {errorMessage}
-          </span>
-        )}
-      </div>
-    </LeafyGreenProvider>
-  );
-}
+              {errorMessage}
+            </span>
+          )}
+        </div>
+      </LeafyGreenProvider>
+    );
+  },
+);
 
 Select.displayName = 'Select';
 
@@ -623,4 +645,4 @@ Select.propTypes = {
   allowDeselect: PropTypes.bool,
   baseFontSize: PropTypes.oneOf(Object.values(BaseFontSize)),
   dropdownWidthBasis: PropTypes.oneOf(Object.values(DropdownWidthBasis)),
-};
+} as WeakValidationMap<ComponentProps<typeof Select>>;
diff --git a/packages/select/src/Select/Select.types.ts b/packages/select/src/Select/Select.types.ts
index cfb1c13ebe..324fdfaa31 100644
--- a/packages/select/src/Select/Select.types.ts
+++ b/packages/select/src/Select/Select.types.ts
@@ -25,7 +25,7 @@ export const DropdownWidthBasis = {
 export type DropdownWidthBasis =
   (typeof DropdownWidthBasis)[keyof typeof DropdownWidthBasis];
 
-interface BaseSelectProps
+export interface BaseSelectProps
   extends Omit<
       HTMLElementProps<'button', HTMLButtonElement>,
       'onChange' | 'onClick'
@@ -103,7 +103,7 @@ interface BaseSelectProps
     Record<string, any>;
 }
 
-interface LabelProp {
+export interface LabelProp {
   label: string;
   'aria-labelledby': string;
   'aria-label': string;
diff --git a/packages/select/src/Select/index.ts b/packages/select/src/Select/index.ts
index 38a3479ad3..42296fc636 100644
--- a/packages/select/src/Select/index.ts
+++ b/packages/select/src/Select/index.ts
@@ -1,4 +1,4 @@
-export { default as Select } from './Select';
+export { Select } from './Select';
 export {
   DropdownWidthBasis,
   type SelectProps,

From 01e58a58825d963f3f27fd67828b315685727dc0 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 12 Oct 2023 15:04:07 -0400
Subject: [PATCH 219/351] Create loud-trainers-sparkle.md

---
 .changeset/loud-trainers-sparkle.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/loud-trainers-sparkle.md

diff --git a/.changeset/loud-trainers-sparkle.md b/.changeset/loud-trainers-sparkle.md
new file mode 100644
index 0000000000..c31114d318
--- /dev/null
+++ b/.changeset/loud-trainers-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/select': minor
+---
+
+Allows Select to accept a ref

From bf961fa1ae2b85a07cd6722c0d4efd42d326836b Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 12 Oct 2023 15:17:43 -0400
Subject: [PATCH 220/351] adds example & tests to polymorphic

---
 .../src/Example/Polymorphic.example.tsx       |  15 +++
 .../polymorphic/src/Example/examples.spec.tsx | 120 +++++++++---------
 2 files changed, 76 insertions(+), 59 deletions(-)

diff --git a/packages/polymorphic/src/Example/Polymorphic.example.tsx b/packages/polymorphic/src/Example/Polymorphic.example.tsx
index b850f42833..74d659c072 100644
--- a/packages/polymorphic/src/Example/Polymorphic.example.tsx
+++ b/packages/polymorphic/src/Example/Polymorphic.example.tsx
@@ -68,6 +68,21 @@ export const ExampleInferred = InferredPolymorphic<ExampleProps>(
   'ExampleInferred',
 );
 
+/**
+ * @example
+ */
+export const ExampleInferredWithRef = InferredPolymorphic<ExampleProps>(
+  ({ as, title, children, ...rest }, ref) => {
+    const { Component } = useInferredPolymorphic(as, rest);
+    return (
+      <Component ref={ref} {...rest}>
+        {title || children}
+      </Component>
+    );
+  },
+  'ExampleInferred',
+);
+
 /**
  * A test mocking the Button component
  * @example
diff --git a/packages/polymorphic/src/Example/examples.spec.tsx b/packages/polymorphic/src/Example/examples.spec.tsx
index c80fae15cf..1a142d6cee 100644
--- a/packages/polymorphic/src/Example/examples.spec.tsx
+++ b/packages/polymorphic/src/Example/examples.spec.tsx
@@ -17,7 +17,7 @@ import {
   usePolymorphicRef,
 } from '..';
 
-import { ExampleProps } from './Polymorphic.example';
+import { ExampleInferredWithRef, ExampleProps } from './Polymorphic.example';
 import {
   AdvancedPolymorphic,
   AdvancedPolymorphicWithRef,
@@ -207,6 +207,7 @@ describe('Polymorphic/Example Higher-order Components', () => {
     ExamplePolymorphic,
     ExamplePolymorphicWithRef,
     ExampleInferred,
+    ExampleInferredWithRef,
     AdvancedPolymorphic,
     AdvancedPolymorphicWithRef,
   ])('Higher-Order Polymorphic Components', ExampleComponent => {
@@ -386,72 +387,73 @@ describe('Polymorphic/Example Higher-order Components', () => {
     });
   });
 
-  describe.each([ExamplePolymorphicWithRef, AdvancedPolymorphicWithRef])(
-    'Higher-Order Polymorphic Components with Ref',
-    ExampleComponent => {
-      describe(`${ExampleComponent.displayName!}`, () => {
-        test('ref is defined with default props', () => {
-          let testRef: React.MutableRefObject<HTMLDivElement | null>;
+  describe.each([
+    ExamplePolymorphicWithRef,
+    ExampleInferredWithRef,
+    AdvancedPolymorphicWithRef,
+  ])('Higher-Order Polymorphic Components with Ref', ExampleComponent => {
+    describe(`${ExampleComponent.displayName!}`, () => {
+      test('ref is defined with default props', () => {
+        let testRef: React.MutableRefObject<HTMLDivElement | null>;
+
+        const TestComponent = () => {
+          const myRef = usePolymorphicRef<'div'>();
+          testRef = myRef;
+          return <ExampleComponent ref={myRef} data-testid="hoc" />;
+        };
+
+        const { getByTestId } = render(<TestComponent />);
+        expect(getByTestId('hoc')).toBeInTheDocument();
+        expect(getByTestId('hoc').tagName.toLowerCase()).toBe('div');
+        expect(testRef!).toBeDefined();
+        expect(testRef!.current).toBeDefined();
+      });
 
-          const TestComponent = () => {
-            const myRef = usePolymorphicRef<'div'>();
-            testRef = myRef;
-            return <ExampleComponent ref={myRef} data-testid="hoc" />;
-          };
+      test('ref is defined as an HTML element', () => {
+        let testRef: React.MutableRefObject<HTMLAnchorElement | null>;
 
-          const { getByTestId } = render(<TestComponent />);
-          expect(getByTestId('hoc')).toBeInTheDocument();
-          expect(getByTestId('hoc').tagName.toLowerCase()).toBe('div');
-          expect(testRef!).toBeDefined();
-          expect(testRef!.current).toBeDefined();
-        });
-
-        test('ref is defined as an HTML element', () => {
-          let testRef: React.MutableRefObject<HTMLAnchorElement | null>;
-
-          const TestComponent = () => {
-            const myRef = usePolymorphicRef<'a'>();
-            testRef = myRef;
-            return (
-              <ExampleComponent
-                ref={myRef}
-                as="a"
-                href="mongodb.design"
-                data-testid="hoc"
-              />
-            );
-          };
+        const TestComponent = () => {
+          const myRef = usePolymorphicRef<'a'>();
+          testRef = myRef;
+          return (
+            <ExampleComponent
+              ref={myRef}
+              as="a"
+              href="mongodb.design"
+              data-testid="hoc"
+            />
+          );
+        };
 
-          const { getByTestId } = render(<TestComponent />);
-          expect(getByTestId('hoc')).toBeInTheDocument();
-          expect(getByTestId('hoc').tagName.toLowerCase()).toBe('a');
-          expect(testRef!).toBeDefined();
-          expect(testRef!.current).toBeDefined();
-        });
+        const { getByTestId } = render(<TestComponent />);
+        expect(getByTestId('hoc')).toBeInTheDocument();
+        expect(getByTestId('hoc').tagName.toLowerCase()).toBe('a');
+        expect(testRef!).toBeDefined();
+        expect(testRef!.current).toBeDefined();
+      });
 
-        test('ref is defined as a custom component', () => {
-          const { Wrapper, wrapperDidRender } = makeWrapperComponent();
+      test('ref is defined as a custom component', () => {
+        const { Wrapper, wrapperDidRender } = makeWrapperComponent();
 
-          let testRef: React.MutableRefObject<HTMLAnchorElement | null>;
+        let testRef: React.MutableRefObject<HTMLAnchorElement | null>;
 
-          const TestComponent = () => {
-            const myRef = usePolymorphicRef<'a'>();
-            testRef = myRef;
-            return (
-              <ExampleComponent ref={myRef} as={Wrapper} data-testid="hoc" />
-            );
-          };
+        const TestComponent = () => {
+          const myRef = usePolymorphicRef<'a'>();
+          testRef = myRef;
+          return (
+            <ExampleComponent ref={myRef} as={Wrapper} data-testid="hoc" />
+          );
+        };
 
-          const { getByTestId } = render(<TestComponent />);
-          expect(getByTestId('hoc')).toBeInTheDocument();
-          expect(getByTestId('hoc').tagName.toLowerCase()).toBe('span');
-          expect(wrapperDidRender).toHaveBeenCalled();
-          expect(testRef!).toBeDefined();
-          expect(testRef!.current).toBeDefined();
-        });
+        const { getByTestId } = render(<TestComponent />);
+        expect(getByTestId('hoc')).toBeInTheDocument();
+        expect(getByTestId('hoc').tagName.toLowerCase()).toBe('span');
+        expect(wrapperDidRender).toHaveBeenCalled();
+        expect(testRef!).toBeDefined();
+        expect(testRef!.current).toBeDefined();
       });
-    },
-  );
+    });
+  });
 
   /**
    * Ensure that any components that build on top of Polymorphic

From 5b728faad87118327f16d3fcbf19e1e04ceaf2dc Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 12 Oct 2023 15:17:56 -0400
Subject: [PATCH 221/351] allows Link to accept a ref

---
 packages/typography/src/Link/Link.spec.tsx | 12 ++++++++++-
 packages/typography/src/Link/Link.tsx      | 24 +++++++++++++---------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/typography/src/Link/Link.spec.tsx b/packages/typography/src/Link/Link.spec.tsx
index 0d4d43a2b5..a43e47ca91 100644
--- a/packages/typography/src/Link/Link.spec.tsx
+++ b/packages/typography/src/Link/Link.spec.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 
 import { InferredPolymorphicProps } from '@leafygreen-ui/polymorphic';
@@ -19,6 +19,16 @@ const renderLink = (props: LinkRenderProps) => {
 
 describe('packages/typography', () => {
   describe('Link', () => {
+    test('accepts a ref', () => {
+      const ref = createRef<HTMLAnchorElement>();
+      const { container } = render(
+        <Link ref={ref} href="http://mongodb.design">
+          Link
+        </Link>,
+      );
+      expect(ref.current).toBe(container.firstElementChild);
+    });
+
     describe('when the current host is different from the destination URL host', () => {
       test('and the "arrowAppearance" prop is set to hover', () => {
         renderLink({
diff --git a/packages/typography/src/Link/Link.tsx b/packages/typography/src/Link/Link.tsx
index bf5b5b4513..d4a4de6d99 100644
--- a/packages/typography/src/Link/Link.tsx
+++ b/packages/typography/src/Link/Link.tsx
@@ -36,16 +36,19 @@ const hasAnchorLikeProps = (
 };
 
 const Link = InferredPolymorphic<BaseLinkProps, 'span'>(
-  ({
-    children,
-    className,
-    arrowAppearance = ArrowAppearance.None,
-    hideExternalIcon = false,
-    baseFontSize,
-    darkMode: darkModeProp,
-    as,
-    ...rest
-  }) => {
+  (
+    {
+      children,
+      className,
+      arrowAppearance = ArrowAppearance.None,
+      hideExternalIcon = false,
+      baseFontSize,
+      darkMode: darkModeProp,
+      as,
+      ...rest
+    },
+    fwdRef,
+  ) => {
     const [currentHostname, setCurrentHostname] = useState('');
     useEffect(() => {
       setCurrentHostname(window.location.hostname);
@@ -114,6 +117,7 @@ const Link = InferredPolymorphic<BaseLinkProps, 'span'>(
           linkModeStyles[theme],
           className,
         )}
+        ref={fwdRef}
         {...defaultAnchorProps}
         {...rest}
       >

From fd7cf26e0bb620af085fc043c761d2b445e34300 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 12 Oct 2023 15:17:59 -0400
Subject: [PATCH 222/351] Create tidy-lemons-drop.md

---
 .changeset/tidy-lemons-drop.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tidy-lemons-drop.md

diff --git a/.changeset/tidy-lemons-drop.md b/.changeset/tidy-lemons-drop.md
new file mode 100644
index 0000000000..2fcddb251b
--- /dev/null
+++ b/.changeset/tidy-lemons-drop.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/typography': minor
+---
+
+Allows `Link` component to accept a ref

From ee42cd4171ff8e94284a2f707a498bc196061315 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 12 Oct 2023 15:52:21 -0400
Subject: [PATCH 223/351] updates ref to month select

---
 .../src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx   | 8 ++++----
 .../src/DateRangePicker/DateRangePicker.spec.tsx          | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index 8af97cd00f..7d3ff09d3a 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -72,18 +72,18 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
     /** Triggered on any key down event */
     const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
       if (e.key === keyMap.Tab) {
-        const currentFocus = e.target;
+        const currentFocus = document.activeElement;
 
         // Focus trap:
         // if focus is on the "Apply" button, move focus to either
         // left chevron or month select menu
         if (currentFocus === footerButtonRefs('apply').current) {
           const elementToFocus = showQuickSelection
-            ? selectRefs('month')
-            : chevronRefs('left');
+            ? selectRefs('month').current?.querySelector('button')
+            : chevronRefs('left').current;
 
-          elementToFocus.current?.focus();
           e.preventDefault();
+          elementToFocus?.focus();
         }
       }
     };
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 7e028de719..339ef751cd 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -689,7 +689,7 @@ describe('packages/date-picker/date-range-picker', () => {
             });
           });
 
-          describe.only('when quick-select menu is open', () => {
+          describe('when quick-select menu is open', () => {
             const tabStops = expectedTabStopLabels['quick-select'];
             const testCases: Array<[number, (typeof tabStops)[number]]> =
               tabStops.map((stop, n) => [n, stop]);

From 4be9c163d5d0654be8dd15605771151952b60200 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 12 Oct 2023 18:23:34 -0400
Subject: [PATCH 224/351] updates single date picker tab behavior

---
 .../date-picker/src/DatePicker/DatePicker.spec.tsx     |  9 ++++++++-
 .../src/DatePicker/DatePickerInput/DatePickerInput.tsx | 10 ++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index f2aaf75d04..1d7a63c26f 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -420,6 +420,13 @@ describe('packages/date-picker', () => {
           expect(menuContainerEl).not.toBeInTheDocument();
         });
 
+        test('menu does not open on subsequent keyboard focus', () => {
+          const { getMenuElements } = renderDatePicker();
+          tabNTimes(3);
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).not.toBeInTheDocument();
+        });
+
         describe('Tab order', () => {
           describe.each(range(0, 4))('when menu is closed', n => {
             test(`Tab ${n} times`, () => {
@@ -550,7 +557,7 @@ describe('packages/date-picker', () => {
 
         test('opens menu if calendar button is focused', () => {
           const { getMenuElements } = renderDatePicker();
-          tabNTimes(3);
+          tabNTimes(4);
           userEvent.keyboard('{enter}');
           const { menuContainerEl } = getMenuElements();
           expect(menuContainerEl).toBeInTheDocument();
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index a993f02111..6d68f29d98 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -50,6 +50,10 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       }
     };
 
+    const handleIconButtonClick: MouseEventHandler<HTMLButtonElement> = () => {
+      setOpen(true);
+    };
+
     /** Called on any keydown within the input element */
     const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
       const { target: _target, key } = e;
@@ -128,6 +132,11 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           handleValidation?.(value);
           break;
 
+        case keyMap.Tab:
+          // default behavior
+          // focus trap handled by parent
+          break;
+
         default:
           // any other keydown should open the menu
           setOpen(true);
@@ -158,6 +167,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         onKeyDown={handleKeyDown}
         onInputClick={handleInputClick}
         onBlur={handleInputBlur}
+        onIconButtonClick={handleIconButtonClick}
         {...rest}
       >
         <DateInputBox

From e5ec5086d37e71fbd658d3487a4526715e28930a Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 12 Oct 2023 20:01:12 -0400
Subject: [PATCH 225/351] adds cell hover range interaction

---
 .../src/DatePicker/DatePicker.spec.tsx        |  28 ++---
 .../DateRangeInput/DateRangeInput.tsx         |   5 +
 .../DateRangeMenu/DateRangeMenu.stories.tsx   |   2 +-
 .../DateRangeMenuCalendars.styles.ts          |   1 +
 .../DateRangeMenuCalendars.tsx                | 103 +++++++++++++++++-
 .../DateRangePicker/DateRangePicker.spec.tsx  |  63 +++++++----
 6 files changed, 160 insertions(+), 42 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 1d7a63c26f..7ebf4a7a37 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -427,6 +427,20 @@ describe('packages/date-picker', () => {
           expect(menuContainerEl).not.toBeInTheDocument();
         });
 
+        test('calls validation handler when last segment is unfocused', () => {
+          const handleValidation = jest.fn();
+          renderDatePicker({ handleValidation });
+          tabNTimes(5);
+          expect(handleValidation).toHaveBeenCalled();
+        });
+
+        test('does not call validation handler when changing segment focus', () => {
+          const handleValidation = jest.fn();
+          renderDatePicker({ handleValidation });
+          tabNTimes(2);
+          expect(handleValidation).not.toHaveBeenCalled();
+        });
+
         describe('Tab order', () => {
           describe.each(range(0, 4))('when menu is closed', n => {
             test(`Tab ${n} times`, () => {
@@ -522,20 +536,6 @@ describe('packages/date-picker', () => {
             });
           });
         });
-
-        test('calls validation handler when last segment is unfocused', () => {
-          const handleValidation = jest.fn();
-          renderDatePicker({ handleValidation });
-          tabNTimes(5);
-          expect(handleValidation).toHaveBeenCalled();
-        });
-
-        test('does not call validation handler when changing segment focus', () => {
-          const handleValidation = jest.fn();
-          renderDatePicker({ handleValidation });
-          tabNTimes(2);
-          expect(handleValidation).not.toHaveBeenCalled();
-        });
       });
 
       describe('Enter key', () => {
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index a50bae506f..9e20d65fb6 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -112,6 +112,11 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
           handleValidation?.(value);
           break;
 
+        case keyMap.Tab:
+          // default behavior
+          // focus trap handled by parent
+          break;
+
         default:
           // any other keydown should open the menu
           setOpen(true);
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
index dd39821678..2f92b1634c 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
@@ -100,7 +100,7 @@ export const Basic: DateRangeMenuStoryType = {
 export const WithValue: DateRangeMenuStoryType = {
   render: args => {
     const [value, setValue] = useState<DateRangeType | undefined>([
-      newUTC(2023, Month.September, 10),
+      newUTC(2023, Month.September, 14),
       null,
     ]);
 
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
index f57c3924da..d1ca8acd63 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
@@ -22,6 +22,7 @@ export const calendarsContainerStyles = css`
   display: flex;
   gap: ${calendarGapX}px;
   align-items: start;
+  height: fit-content;
 `;
 
 export const calendarHeadersContainerStyle = css`
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index 5823eb84e4..ba51c0f8d4 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -1,4 +1,12 @@
-import React, { forwardRef, KeyboardEventHandler, useState } from 'react';
+import React, {
+  forwardRef,
+  KeyboardEventHandler,
+  MouseEvent,
+  MouseEventHandler,
+  useState,
+} from 'react';
+import { isAfter, isBefore, isWithinInterval, max, min } from 'date-fns';
+import { isNull, isUndefined } from 'lodash';
 
 import { cx } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
@@ -29,6 +37,34 @@ import {
 } from './DateRangeMenuCalendars.styles';
 import { DateRangeMenuCalendarsProps } from './DateRangeMenuCalendars.types';
 
+// TODO: move to utils
+const minDate = (datesArray: Array<DateType>): Date | undefined => {
+  const filteredDates = datesArray.filter(d => !isNull(d)) as Array<Date>;
+
+  if (filteredDates.length > 0) {
+    return min(filteredDates);
+  }
+};
+
+// TODO: move to utils
+const maxDate = (datesArray: Array<DateType>): Date | undefined => {
+  const filteredDates = datesArray.filter(d => !isNull(d)) as Array<Date>;
+
+  if (filteredDates.length > 0) {
+    return max(filteredDates);
+  }
+};
+
+// TODO: move to utils
+const isOnOrBefore = (day: Date, dayToCompare: Date) => {
+  return isSameUTCDay(day, dayToCompare) || isBefore(day, dayToCompare);
+};
+
+// TODO: move to utils
+const isOnOrAfter = (day: Date, dayToCompare: Date) => {
+  return isSameUTCDay(day, dayToCompare) || isAfter(day, dayToCompare);
+};
+
 export const DateRangeMenuCalendars = forwardRef<
   HTMLDivElement,
   DateRangeMenuCalendarsProps
@@ -45,6 +81,8 @@ export const DateRangeMenuCalendars = forwardRef<
       today,
     } = useDateRangeMenuContext();
 
+    const [hoveredCell, setHover] = useState<DateType>(null);
+
     /** setDisplayMonth with side effects */
     const updateMonth = (newMonth: Date) => {
       if (isSameUTCMonth(newMonth, month)) {
@@ -83,8 +121,48 @@ export const DateRangeMenuCalendars = forwardRef<
     };
 
     /** Returns the current state of the cell */
-    const getCellState = (cellDay: Date | null): CalendarCellState => {
-      // TODO:
+    const getCellState = (cellDay: Date): CalendarCellState => {
+      if (!isInRange(cellDay)) {
+        return CalendarCellState.Disabled;
+      }
+
+      // if at least the start/end date is defined...
+      if (value && value.some(v => !isNull(v))) {
+        // for the purposes of visualizing the calendar,
+        // the range start is the earliest date of the hovered cell,
+        // or the start/end value
+        const rangeStart = minDate([...value, hoveredCell]);
+        // same for range end
+        const rangeEnd = maxDate([...value, hoveredCell]);
+
+        // if this cell is the first of `value`
+        // and it is _before_ the hovered cell
+        if (
+          isSameUTCDay(cellDay, minDate(value)) &&
+          (!hoveredCell || isOnOrBefore(cellDay, hoveredCell))
+        ) {
+          return CalendarCellState.Start;
+        }
+
+        // if this cell is the last of `value`
+        // and it is _after_ the hovered cell
+        if (
+          isSameUTCDay(cellDay, maxDate(value)) &&
+          (!hoveredCell || isOnOrAfter(cellDay, hoveredCell))
+        ) {
+          return CalendarCellState.End;
+        }
+
+        // otherwise if the current cell is within the range of start & end
+        if (
+          !isUndefined(rangeStart) &&
+          !isUndefined(rangeEnd) &&
+          isWithinInterval(cellDay, { start: rangeStart, end: rangeEnd })
+        ) {
+          return CalendarCellState.Range;
+        }
+      }
+
       return CalendarCellState.Default;
     };
 
@@ -93,6 +171,20 @@ export const DateRangeMenuCalendars = forwardRef<
       // TODO:
     };
 
+    const handleCellHover =
+      (day: Date): MouseEventHandler<HTMLTableCellElement> =>
+      e => {
+        setHover(day);
+      };
+
+    const handleCalendarMouseOut: MouseEventHandler<HTMLDivElement> = e => {
+      // TODO: improve this logiv
+      if (e.target === e.currentTarget) {
+        // ... if the calendar container is the event's target
+        setHover(null);
+      }
+    };
+
     return (
       <div
         ref={fwdRef}
@@ -114,10 +206,11 @@ export const DateRangeMenuCalendars = forwardRef<
           </div>
         </div>
 
-        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/mouse-events-have-key-events */}
         <div
           className={calendarsContainerStyles}
           onKeyDown={handleCalendarKeyDown}
+          onMouseOut={handleCalendarMouseOut}
         >
           <CalendarGrid month={month} aria-label={getFullMonthLabel(month)}>
             {(day, i) => (
@@ -129,6 +222,7 @@ export const DateRangeMenuCalendars = forwardRef<
                 isCurrent={isSameUTCDay(day, today)}
                 state={getCellState(day)}
                 onClick={cellClickHandlerForDay(day)}
+                onMouseEnter={handleCellHover(day)}
                 data-iso={day.toISOString()}
               >
                 {day.getUTCDate()}
@@ -149,6 +243,7 @@ export const DateRangeMenuCalendars = forwardRef<
                 isCurrent={isSameUTCDay(day, today)}
                 state={getCellState(day)}
                 onClick={cellClickHandlerForDay(day)}
+                onMouseEnter={handleCellHover(day)}
                 data-iso={day.toISOString()}
               >
                 {day.getUTCDate()}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 339ef751cd..572ed702d1 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -614,24 +614,30 @@ describe('packages/date-picker/date-range-picker', () => {
     describe('Keyboard interaction', () => {
       describe('Tab', () => {
         test('menu does not open on initial focus', () => {
-          const { inputContainer } = renderDateRangePicker();
+          const { getMenuElements } = renderDateRangePicker();
           tabNTimes(1);
-          expect(inputContainer.contains(document.activeElement)).toBeFalsy();
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).not.toBeInTheDocument();
+        });
+
+        test('menu does not open on subsequent focuses', () => {
+          const { getMenuElements } = renderDateRangePicker();
+          tabNTimes(5);
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).not.toBeInTheDocument();
         });
 
         test('calls validation handler when last segment is unfocused', () => {
           const handleValidation = jest.fn();
-          const { inputElements } = renderDateRangePicker({ handleValidation });
-          userEvent.click(inputElements[5]);
-          userEvent.tab();
+          renderDateRangePicker({ handleValidation });
+          tabNTimes(8);
           expect(handleValidation).toHaveBeenCalled();
         });
 
         test('does not call validation handler when changing segment', () => {
           const handleValidation = jest.fn();
-          const { inputElements } = renderDateRangePicker({ handleValidation });
-          userEvent.click(inputElements[0]);
-          userEvent.tab();
+          renderDateRangePicker({ handleValidation });
+          tabNTimes(1);
           expect(handleValidation).not.toHaveBeenCalled();
         });
 
@@ -716,42 +722,47 @@ describe('packages/date-picker/date-range-picker', () => {
 
       describe('Enter key', () => {
         test('if menu is closed, does not open the menu', () => {
-          const { inputElements, getMenuElements } = renderDateRangePicker();
-          userEvent.type(inputElements[0], '{enter}');
+          const { getMenuElements } = renderDateRangePicker();
+          userEvent.tab();
+          userEvent.keyboard('{enter}');
           const { menuContainerEl } = getMenuElements();
           expect(menuContainerEl).not.toBeInTheDocument();
         });
 
         test('opens menu if calendar button is focused', () => {
-          const { calendarButton, getMenuElements } = renderDateRangePicker();
-          userEvent.type(calendarButton, '{enter}');
+          const { getMenuElements } = renderDateRangePicker();
+          tabNTimes(7);
+          userEvent.keyboard('{enter}');
           const { menuContainerEl } = getMenuElements();
           expect(menuContainerEl).toBeInTheDocument();
         });
 
         test('calls validation handler', () => {
           const handleValidation = jest.fn();
-          const { inputElements } = renderDateRangePicker({
+          renderDateRangePicker({
             handleValidation,
           });
-          userEvent.type(inputElements[0], '{enter}');
+          tabNTimes(2);
+          userEvent.keyboard('{enter}');
           expect(handleValidation).toHaveBeenCalled();
         });
 
         test('if a cell is focused, fires a change handler', () => {
           const onRangeChange = jest.fn();
           const { openMenu } = renderDateRangePicker({ onRangeChange });
-          const { calendarCells } = openMenu();
-          const firstCell = calendarCells[0];
-          userEvent.type(firstCell, '{enter}');
+          const { todayCell } = openMenu();
+          tabNTimes(8);
+          expect(todayCell).toHaveFocus();
+          userEvent.keyboard('{enter}');
           expect(onRangeChange).toHaveBeenCalled();
         });
 
         test('if a cell is focused, closes the menu', async () => {
           const { openMenu } = renderDateRangePicker();
-          const { calendarCells, menuContainerEl } = openMenu();
-          const firstCell = calendarCells[0];
-          userEvent.type(firstCell, '{enter}');
+          const { todayCell, menuContainerEl } = openMenu();
+          tabNTimes(8);
+          expect(todayCell).toHaveFocus();
+          userEvent.keyboard('{enter}');
           await waitForElementToBeRemoved(menuContainerEl);
           expect(menuContainerEl).not.toBeInTheDocument();
         });
@@ -759,7 +770,9 @@ describe('packages/date-picker/date-range-picker', () => {
         test('if a Chevron is focused, updates the displayed month', () => {
           const { openMenu } = renderDateRangePicker();
           const { leftChevron, menuContainerEl } = openMenu();
-          userEvent.type(leftChevron!, '{enter}');
+          tabNTimes(11);
+          expect(leftChevron).toHaveFocus();
+          userEvent.keyboard('{enter}');
           const monthHeaders = menuContainerEl?.querySelectorAll('h6');
           expect(monthHeaders?.[0]).toHaveTextContent('November 2023');
           expect(monthHeaders?.[1]).toHaveTextContent('December 2023');
@@ -772,7 +785,9 @@ describe('packages/date-picker/date-range-picker', () => {
             onRangeChange,
           });
           const { quickRangeButtons } = openMenu();
-          userEvent.type(quickRangeButtons?.[0]!, '{enter}');
+          tabNTimes(13);
+          expect(quickRangeButtons?.[0]).toHaveFocus();
+          userEvent.keyboard('{enter}');
           expect(onRangeChange).toHaveBeenCalled(); // TODO: with
         });
 
@@ -781,7 +796,9 @@ describe('packages/date-picker/date-range-picker', () => {
             showQuickSelection: true,
           });
           const { monthSelect } = openMenu();
-          userEvent.type(monthSelect!, '{enter}');
+          tabNTimes(11);
+          expect(monthSelect).toHaveFocus();
+          userEvent.keyboard('{enter}');
           const listBoxes = queryAllByRole('listbox');
           expect(listBoxes).toHaveLength(2);
         });

From 2b3716b1b6d21ba4feb9110b61f5387124805866 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 13 Oct 2023 11:12:11 -0400
Subject: [PATCH 226/351] updates calendar cell styles

---
 .../CalendarCell/CalendarCell.stories.tsx     |  66 ++++-
 .../CalendarCell/CalendarCell.styles.ts       | 251 +++++++++---------
 .../Calendar/CalendarCell/CalendarCell.tsx    |  26 +-
 .../CalendarCell/CalendarCell.types.ts        |  22 +-
 .../src/Calendar/CalendarCell/index.ts        |   1 +
 .../DateRangeMenuCalendars.tsx                |  37 ++-
 .../DateRangeMenuProvider.tsx                 |   2 +-
 .../src/utils/isValidSegment/index.ts         |   4 +-
 .../src/utils/newDateFromSegments/index.ts    |   4 +-
 9 files changed, 246 insertions(+), 167 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
index 3e6c11106f..d2a094fe4d 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
@@ -10,7 +10,10 @@ import {
 } from '../../DatePickerContext';
 
 import { CalendarCell } from './CalendarCell';
-import { CalendarCellState } from './CalendarCell.types';
+import {
+  CalendarCellRangeState,
+  CalendarCellState,
+} from './CalendarCell.types';
 
 const meta: StoryMetaType<typeof CalendarCell, DatePickerContextProps> = {
   title: 'Components/DatePicker/Shared/CalendarCell',
@@ -18,12 +21,13 @@ const meta: StoryMetaType<typeof CalendarCell, DatePickerContextProps> = {
   parameters: {
     default: null,
     generate: {
+      storyNames: ['DefaultCells', 'ActiveCells', 'DisabledCells'],
       combineArgs: {
         darkMode: [false, true],
-        isHighlighted: [false, true],
         'data-hover': [false, true],
+        isHighlighted: [false, true],
         isCurrent: [false, true],
-        state: Object.values(CalendarCellState),
+        rangeState: Object.values(CalendarCellRangeState),
       },
       decorator: (Instance, ctx) => {
         const {
@@ -58,4 +62,58 @@ const Template: StoryFn<typeof CalendarCell> = props => (
 
 export const Basic = Template.bind({});
 
-export const Generated = () => {};
+// export const Generated = () => {};
+export const DefaultCells: StoryFn<typeof CalendarCell> = () => <></>;
+DefaultCells.parameters = {
+  generate: {
+    args: {
+      state: CalendarCellState.Default,
+    },
+
+    excludeCombinations: [
+      {
+        'data-hover': false,
+        rangeState: CalendarCellRangeState.Start,
+      },
+      {
+        'data-hover': false,
+        rangeState: CalendarCellRangeState.End,
+      },
+      {
+        'data-hover': true,
+        rangeState: CalendarCellRangeState.Range,
+      },
+    ],
+  },
+};
+
+export const ActiveCells: StoryFn<typeof CalendarCell> = () => <></>;
+ActiveCells.parameters = {
+  generate: {
+    args: {
+      state: CalendarCellState.Active,
+    },
+    excludeCombinations: [
+      {
+        rangeState: CalendarCellRangeState.Range,
+      },
+    ],
+  },
+};
+
+export const DisabledCells: StoryFn<typeof CalendarCell> = () => <></>;
+DisabledCells.parameters = {
+  generate: {
+    args: {
+      state: CalendarCellState.Disabled,
+    },
+    excludeCombinations: [
+      {
+        'data-hover': true,
+      },
+      {
+        isHighlighted: true,
+      },
+    ],
+  },
+};
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
index 96c75a7315..07b70a4498 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
@@ -9,7 +9,10 @@ import {
   typeScales,
 } from '@leafygreen-ui/tokens';
 
-import { CalendarCellState } from './CalendarCell.types';
+import {
+  CalendarCellRangeState,
+  CalendarCellState,
+} from './CalendarCell.types';
 
 const CELL_SIZE = 28;
 export const indicatorClassName = createUniqueClassName('calendar-cell');
@@ -51,12 +54,68 @@ const _baseActiveCellStyles: Record<Theme, string> = {
   `,
 };
 
+/**
+ * Base styles for each state
+ */
+export const calendarCellStateStyles: ThemedStateStyles = {
+  [Theme.Light]: {
+    [CalendarCellState.Default]: css`
+      color: ${palette.black};
+    `,
+    [CalendarCellState.Disabled]: css`
+      color: ${palette.gray.light1};
+      cursor: not-allowed;
+      pointer-events: none;
+    `,
+    [CalendarCellState.Active]: _baseActiveCellStyles[Theme.Light],
+  },
+  [Theme.Dark]: {
+    [CalendarCellState.Default]: css`
+      color: ${palette.gray.light2};
+    `,
+    [CalendarCellState.Disabled]: css`
+      color: ${palette.gray.dark1};
+      cursor: not-allowed;
+      pointer-events: none;
+    `,
+    [CalendarCellState.Active]: _baseActiveCellStyles[Theme.Dark],
+  },
+};
+
+/**
+ * Styles for the current date
+ */
+export const calendarCellCurrentStyles: ThemedStateStyles = {
+  [Theme.Light]: {
+    [CalendarCellState.Default]: css`
+      color: ${palette.blue.base};
+    `,
+    [CalendarCellState.Active]: css`
+      color: ${palette.white};
+    `,
+    [CalendarCellState.Disabled]: css``, // No additional styles
+  },
+  [Theme.Dark]: {
+    [CalendarCellState.Default]: css`
+      color: ${palette.blue.light1};
+    `,
+    [CalendarCellState.Active]: css`
+      color: ${palette.black};
+    `,
+    [CalendarCellState.Disabled]: css``, // No additional styles
+  },
+};
+
+/**
+ * Range styles
+ */
+
 const _baseRangeStartStyles = css`
-  &:before {
+  &:after {
     content: '';
     position: absolute;
     width: 50%;
-    left: 0;
+    right: 0;
     top: 0;
     bottom: 0;
     z-index: 0;
@@ -64,50 +123,39 @@ const _baseRangeStartStyles = css`
 `;
 
 const _baseRangeEndStyles = css`
-  &:after {
+  &:before {
     content: '';
     position: absolute;
     width: 50%;
-    right: 0;
+    left: 0;
     top: 0;
     bottom: 0;
     z-index: 0;
   }
 `;
 
-/**
- * Base styles for each state
- */
-export const calendarCellStateStyles: ThemedStateStyles = {
+export const calendarCellRangeStyles: Record<
+  Theme,
+  Record<CalendarCellRangeState, string>
+> = {
   [Theme.Light]: {
-    [CalendarCellState.Default]: css`
-      color: ${palette.black};
-    `,
-    [CalendarCellState.Disabled]: css`
-      color: ${palette.gray.light1};
-      cursor: not-allowed;
-      pointer-events: none;
-    `,
-    [CalendarCellState.Active]: _baseActiveCellStyles[Theme.Light],
-    [CalendarCellState.Start]: cx(
-      _baseActiveCellStyles[Theme.Light],
+    [CalendarCellRangeState.Start]: cx(
       _baseRangeStartStyles,
       css`
-        &:before {
+        &:after {
           background-color: ${palette.blue.light3};
         }
       `,
     ),
-    [CalendarCellState.End]: cx(
-      _baseActiveCellStyles[Theme.Light],
+    [CalendarCellRangeState.End]: cx(
       _baseRangeEndStyles,
       css`
-        &:after {
+        &:before {
           background-color: ${palette.blue.light3};
         }
       `,
     ),
-    [CalendarCellState.Range]: cx(
+    [CalendarCellRangeState.Range]: cx(
       _baseRangeStartStyles,
       _baseRangeEndStyles,
       css`
@@ -118,36 +166,26 @@ export const calendarCellStateStyles: ThemedStateStyles = {
         }
       `,
     ),
+    [CalendarCellRangeState.None]: css``,
   },
   [Theme.Dark]: {
-    [CalendarCellState.Default]: css`
-      color: ${palette.gray.light2};
-    `,
-    [CalendarCellState.Disabled]: css`
-      color: ${palette.gray.dark1};
-      cursor: not-allowed;
-      pointer-events: none;
-    `,
-    [CalendarCellState.Active]: _baseActiveCellStyles[Theme.Dark],
-    [CalendarCellState.Start]: cx(
-      _baseActiveCellStyles[Theme.Dark],
+    [CalendarCellRangeState.Start]: cx(
       _baseRangeStartStyles,
       css`
-        &:before {
+        &:after {
           background-color: ${palette.blue.dark3};
         }
       `,
     ),
-    [CalendarCellState.End]: cx(
-      _baseActiveCellStyles[Theme.Dark],
+    [CalendarCellRangeState.End]: cx(
       _baseRangeEndStyles,
       css`
-        &:after {
+        &:before {
           background-color: ${palette.blue.dark3};
         }
       `,
     ),
-    [CalendarCellState.Range]: cx(
+    [CalendarCellRangeState.Range]: cx(
       _baseRangeStartStyles,
       _baseRangeEndStyles,
       css`
@@ -158,48 +196,7 @@ export const calendarCellStateStyles: ThemedStateStyles = {
         }
       `,
     ),
-  },
-};
-
-/**
- * Styles for the current date
- */
-export const calendarCellCurrentStyles: ThemedStateStyles = {
-  [Theme.Light]: {
-    [CalendarCellState.Default]: css`
-      color: ${palette.blue.base};
-    `,
-    [CalendarCellState.Active]: css`
-      color: ${palette.white};
-    `,
-    [CalendarCellState.Start]: css`
-      color: ${palette.white};
-    `,
-    [CalendarCellState.End]: css`
-      color: ${palette.white};
-    `,
-    [CalendarCellState.Range]: css`
-      color: ${palette.blue.dark1};
-    `,
-    [CalendarCellState.Disabled]: css``, // No additional styles
-  },
-  [Theme.Dark]: {
-    [CalendarCellState.Default]: css`
-      color: ${palette.blue.light1};
-    `,
-    [CalendarCellState.Active]: css`
-      color: ${palette.black};
-    `,
-    [CalendarCellState.Start]: css`
-      color: ${palette.black};
-    `,
-    [CalendarCellState.End]: css`
-      color: ${palette.black};
-    `,
-    [CalendarCellState.Range]: css`
-      color: ${palette.blue.light1};
-    `,
-    [CalendarCellState.Disabled]: css``, // No additional styles
+    [CalendarCellRangeState.None]: css``,
   },
 };
 
@@ -236,68 +233,41 @@ export const calendarCellHighlightStyles: Record<Theme, string> = {
  * Hover Styles
  */
 const hoverSelector = '&:hover, &[data-hover="true"]';
-const _defaultThemeHoverStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
-    ${hoverSelector} {
-      color: ${palette.black};
-
-      & > .${indicatorClassName} {
-        background-color: ${palette.gray.light2};
-      }
-    }
-  `,
-  [Theme.Dark]: css`
-    ${hoverSelector} {
-      color: ${palette.white};
-
-      & > .${indicatorClassName} {
-        background-color: ${palette.gray.dark3};
-      }
-    }
-  `,
-};
-
-const _activeHoverStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
-    ${hoverSelector} {
-      & > .${indicatorClassName} {
-        background-color: ${palette.blue.dark2};
-      }
-    }
-  `,
-  [Theme.Dark]: css`
-    ${hoverSelector} {
-      & > .${indicatorClassName} {
-        background-color: ${palette.blue.light2};
-      }
-    }
-  `,
-};
 
 export const calendarCellHoverStyles: ThemedStateStyles = {
   [Theme.Light]: {
-    [CalendarCellState.Default]: _defaultThemeHoverStyles[Theme.Light],
-    [CalendarCellState.Active]: _activeHoverStyles[Theme.Light],
-    [CalendarCellState.Start]: _activeHoverStyles[Theme.Light],
-    [CalendarCellState.End]: _activeHoverStyles[Theme.Light],
-    [CalendarCellState.Range]: css`
+    [CalendarCellState.Default]: css`
       ${hoverSelector} {
+        color: ${palette.black};
+
         & > .${indicatorClassName} {
-          background-color: ${palette.blue.light2};
+          background-color: ${palette.gray.light2};
+        }
+      }
+    `,
+    [CalendarCellState.Active]: css`
+      ${hoverSelector} {
+        & > .${indicatorClassName} {
+          background-color: ${palette.blue.dark2};
         }
       }
     `,
     [CalendarCellState.Disabled]: css``,
   },
   [Theme.Dark]: {
-    [CalendarCellState.Default]: _defaultThemeHoverStyles[Theme.Dark],
-    [CalendarCellState.Active]: _activeHoverStyles[Theme.Dark],
-    [CalendarCellState.Start]: _activeHoverStyles[Theme.Dark],
-    [CalendarCellState.End]: _activeHoverStyles[Theme.Dark],
-    [CalendarCellState.Range]: css`
+    [CalendarCellState.Default]: css`
       ${hoverSelector} {
+        color: ${palette.white};
+
         & > .${indicatorClassName} {
-          background-color: ${palette.blue.dark2};
+          background-color: ${palette.gray.dark3};
+        }
+      }
+    `,
+    [CalendarCellState.Active]: css`
+      ${hoverSelector} {
+        & > .${indicatorClassName} {
+          background-color: ${palette.blue.light2};
         }
       }
     `,
@@ -305,6 +275,23 @@ export const calendarCellHoverStyles: ThemedStateStyles = {
   },
 };
 
+export const calendarCellRangeHoverStyles: Record<Theme, string> = {
+  [Theme.Light]: css`
+    ${hoverSelector} {
+      & > .${indicatorClassName} {
+        background-color: ${palette.blue.light2};
+      }
+    }
+  `,
+  [Theme.Dark]: css`
+    ${hoverSelector} {
+      & > .${indicatorClassName} {
+        background-color: ${palette.blue.dark2};
+      }
+    }
+  `,
+};
+
 export const currentStyles: Record<Theme, string> = {
   [Theme.Light]: css`
     color: ${palette.blue.base};
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
index c2190b6a2a..03b4d31466 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -8,6 +8,8 @@ import {
   calendarCellCurrentStyles,
   calendarCellHighlightStyles,
   calendarCellHoverStyles,
+  calendarCellRangeHoverStyles,
+  calendarCellRangeStyles,
   calendarCellStateStyles,
   calendarCellStyles,
   cellTextCurrentStyles,
@@ -15,7 +17,11 @@ import {
   indicatorBaseStyles,
   indicatorClassName,
 } from './CalendarCell.styles';
-import { CalendarCellProps, CalendarCellState } from './CalendarCell.types';
+import {
+  CalendarCellProps,
+  CalendarCellRangeState,
+  CalendarCellState,
+} from './CalendarCell.types';
 
 /**
  * A single calendar cell.
@@ -31,6 +37,7 @@ export const CalendarCell = React.forwardRef<
     {
       children,
       state = CalendarCellState.Default,
+      rangeState = CalendarCellRangeState.None,
       isCurrent,
       isHighlighted,
       className,
@@ -42,18 +49,13 @@ export const CalendarCell = React.forwardRef<
     const ref = useForwardedRef(fwdRef, null);
     const { theme } = useDarkMode();
 
-    const isFocusable = isHighlighted && state !== CalendarCellState.Disabled;
-
-    const isActive = (
-      [
-        CalendarCellState.Active,
-        CalendarCellState.Start,
-        CalendarCellState.End,
-      ] as Array<CalendarCellState>
-    ).includes(state);
+    const isDisabled = state === CalendarCellState.Disabled;
+    const isFocusable = isHighlighted && !isDisabled;
+    const isActive = state === CalendarCellState.Active;
+    const isInRange = rangeState !== CalendarCellRangeState.None;
 
     const handleClick: MouseEventHandler<HTMLTableCellElement> = e => {
-      if (state !== CalendarCellState.Disabled) {
+      if (!isDisabled) {
         onClick?.(e);
       }
     };
@@ -80,7 +82,9 @@ export const CalendarCell = React.forwardRef<
           calendarCellStateStyles[theme][state],
           calendarCellHoverStyles[theme][state],
           {
+            [calendarCellRangeStyles[theme][rangeState]]: !isDisabled,
             [calendarCellCurrentStyles[theme][state]]: isCurrent,
+            [calendarCellRangeHoverStyles[theme]]: isInRange && !isActive,
             [calendarCellHighlightStyles[theme]]: isFocusable,
           },
           className,
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
index ecc5e121e4..6293805716 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
@@ -1,23 +1,35 @@
 export const CalendarCellState = {
   Default: 'default',
   Active: 'active',
-  Start: 'start',
-  End: 'end',
-  Range: 'range',
   Disabled: 'disabled',
 } as const;
-
 export type CalendarCellState =
   (typeof CalendarCellState)[keyof typeof CalendarCellState];
 
+export const CalendarCellRangeState = {
+  None: 'none',
+  Start: 'start',
+  End: 'end',
+  Range: 'range',
+} as const;
+export type CalendarCellRangeState =
+  (typeof CalendarCellRangeState)[keyof typeof CalendarCellRangeState];
+
 export interface CalendarCellProps
   extends React.HTMLProps<HTMLTableCellElement> {
   /** The label for the calendar cell */
   ['aria-label']: string;
 
-  /** The current state of the cell */
+  /**
+   * The current state of the cell
+   */
   state?: CalendarCellState;
 
+  /**
+   * Whether the cell is in a selected range
+   */
+  rangeState?: CalendarCellRangeState;
+
   /** Whether the cell represents the current date */
   isCurrent?: boolean;
 
diff --git a/packages/date-picker/src/Calendar/CalendarCell/index.ts b/packages/date-picker/src/Calendar/CalendarCell/index.ts
index 901e7b4b2b..a9622017ac 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/index.ts
+++ b/packages/date-picker/src/Calendar/CalendarCell/index.ts
@@ -1,5 +1,6 @@
 export { CalendarCell } from './CalendarCell';
 export {
   type CalendarCellProps,
+  CalendarCellRangeState,
   CalendarCellState,
 } from './CalendarCell.types';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index ba51c0f8d4..cf472b2575 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -1,12 +1,12 @@
 import React, {
   forwardRef,
   KeyboardEventHandler,
-  MouseEvent,
   MouseEventHandler,
   useState,
 } from 'react';
 import { isAfter, isBefore, isWithinInterval, max, min } from 'date-fns';
-import { isNull, isUndefined } from 'lodash';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 
 import { cx } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
@@ -18,6 +18,7 @@ import {
   CalendarCellState,
   CalendarGrid,
 } from '../../../Calendar';
+import { CalendarCellRangeState } from '../../../Calendar/CalendarCell';
 import { useDatePickerContext } from '../../../DatePickerContext';
 import { DateType } from '../../../types';
 import {
@@ -126,6 +127,20 @@ export const DateRangeMenuCalendars = forwardRef<
         return CalendarCellState.Disabled;
       }
 
+      // if at least the start/end date is defined...
+      if (value && value.some(v => !isNull(v))) {
+        if (
+          isSameUTCDay(cellDay, minDate(value)) ||
+          isSameUTCDay(cellDay, maxDate(value))
+        ) {
+          return CalendarCellState.Active;
+        }
+      }
+
+      return CalendarCellState.Default;
+    };
+
+    const getCellRangeState = (cellDay: Date): CalendarCellRangeState => {
       // if at least the start/end date is defined...
       if (value && value.some(v => !isNull(v))) {
         // for the purposes of visualizing the calendar,
@@ -138,19 +153,19 @@ export const DateRangeMenuCalendars = forwardRef<
         // if this cell is the first of `value`
         // and it is _before_ the hovered cell
         if (
-          isSameUTCDay(cellDay, minDate(value)) &&
-          (!hoveredCell || isOnOrBefore(cellDay, hoveredCell))
+          isSameUTCDay(cellDay, rangeStart) //&&
+          // (!hoveredCell || isOnOrBefore(cellDay, hoveredCell))
         ) {
-          return CalendarCellState.Start;
+          return CalendarCellRangeState.Start;
         }
 
         // if this cell is the last of `value`
         // and it is _after_ the hovered cell
         if (
-          isSameUTCDay(cellDay, maxDate(value)) &&
-          (!hoveredCell || isOnOrAfter(cellDay, hoveredCell))
+          isSameUTCDay(cellDay, rangeEnd) // &&
+          // (!hoveredCell || isOnOrAfter(cellDay, hoveredCell))
         ) {
-          return CalendarCellState.End;
+          return CalendarCellRangeState.End;
         }
 
         // otherwise if the current cell is within the range of start & end
@@ -159,11 +174,11 @@ export const DateRangeMenuCalendars = forwardRef<
           !isUndefined(rangeEnd) &&
           isWithinInterval(cellDay, { start: rangeStart, end: rangeEnd })
         ) {
-          return CalendarCellState.Range;
+          return CalendarCellRangeState.Range;
         }
       }
 
-      return CalendarCellState.Default;
+      return CalendarCellRangeState.None;
     };
 
     /** Called on any keydown within the menu element */
@@ -221,6 +236,7 @@ export const DateRangeMenuCalendars = forwardRef<
                 isHighlighted={isSameUTCDay(day, highlight)}
                 isCurrent={isSameUTCDay(day, today)}
                 state={getCellState(day)}
+                rangeState={getCellRangeState(day)}
                 onClick={cellClickHandlerForDay(day)}
                 onMouseEnter={handleCellHover(day)}
                 data-iso={day.toISOString()}
@@ -242,6 +258,7 @@ export const DateRangeMenuCalendars = forwardRef<
                 isHighlighted={isSameUTCDay(day, highlight)}
                 isCurrent={isSameUTCDay(day, today)}
                 state={getCellState(day)}
+                rangeState={getCellRangeState(day)}
                 onClick={cellClickHandlerForDay(day)}
                 onMouseEnter={handleCellHover(day)}
                 data-iso={day.toISOString()}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
index a65fb27dd9..da961c97c6 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useMemo, useState } from 'react';
 
-import { getFirstOfMonth, setToUTCMidnight } from '../../../utils';
+import { getFirstOfMonth } from '../../../utils';
 import { addMonthsUTC } from '../../../utils';
 import { DateRangeMenuProps } from '../DateRangeMenu.types';
 
diff --git a/packages/date-picker/src/utils/isValidSegment/index.ts b/packages/date-picker/src/utils/isValidSegment/index.ts
index f1ae4edb83..87e6ea5e5e 100644
--- a/packages/date-picker/src/utils/isValidSegment/index.ts
+++ b/packages/date-picker/src/utils/isValidSegment/index.ts
@@ -8,7 +8,9 @@ import {
 /**
  * Returns whether a given value is a valid segment value
  */
-export const isValidSegment = (segment?: DateSegmentValue): segment is number =>
+export const isValidSegment = (
+  segment?: DateSegmentValue,
+): segment is DateSegmentValue =>
   !isUndefined(segment) && !isNaN(Number(segment)) && Number(segment) > 0;
 
 /**
diff --git a/packages/date-picker/src/utils/newDateFromSegments/index.ts b/packages/date-picker/src/utils/newDateFromSegments/index.ts
index 96634320dc..6a4192e64d 100644
--- a/packages/date-picker/src/utils/newDateFromSegments/index.ts
+++ b/packages/date-picker/src/utils/newDateFromSegments/index.ts
@@ -7,8 +7,6 @@ export const newDateFromSegments = (
 ): Date | undefined => {
   if (segments && Object.values(segments).every(isValidSegment)) {
     const { day, month, year } = segments;
-    return new Date(
-      Date.UTC(year as number, (month as number) - 1, day as number),
-    );
+    return new Date(Date.UTC(Number(year), Number(month) - 1, Number(day)));
   }
 };

From 4774a5a8d8f72c9526039d926764eb7bea24d75d Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 13 Oct 2023 11:18:40 -0400
Subject: [PATCH 227/351] mv funcs to utils

---
 .../DateRangeMenu/DateRangeMenu.stories.tsx   |  3 +-
 .../DateRangeMenuCalendars.tsx                | 32 ++-----------------
 packages/date-picker/src/utils/index.ts       |  4 +++
 .../src/utils/isOnOrAfter/index.ts            |  8 +++++
 .../src/utils/isOnOrBefore/index.ts           |  8 +++++
 .../date-picker/src/utils/maxDate/index.ts    | 16 ++++++++++
 .../date-picker/src/utils/minDate/index.ts    | 16 ++++++++++
 7 files changed, 56 insertions(+), 31 deletions(-)
 create mode 100644 packages/date-picker/src/utils/isOnOrAfter/index.ts
 create mode 100644 packages/date-picker/src/utils/isOnOrBefore/index.ts
 create mode 100644 packages/date-picker/src/utils/maxDate/index.ts
 create mode 100644 packages/date-picker/src/utils/minDate/index.ts

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
index 2f92b1634c..e052ab8561 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
@@ -1,8 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks, react/prop-types */
 import React, { useRef, useState } from 'react';
 import { StoryFn, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-import { last, omit } from 'lodash';
+import omit from 'lodash/omit';
 import MockDate from 'mockdate';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index cf472b2575..f8e6c68e7a 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -4,7 +4,7 @@ import React, {
   MouseEventHandler,
   useState,
 } from 'react';
-import { isAfter, isBefore, isWithinInterval, max, min } from 'date-fns';
+import { isWithinInterval } from 'date-fns';
 import isNull from 'lodash/isNull';
 import isUndefined from 'lodash/isUndefined';
 
@@ -26,6 +26,8 @@ import {
   getUTCDateString,
   isSameUTCDay,
   isSameUTCMonth,
+  maxDate,
+  minDate,
 } from '../../../utils';
 import { useDateRangeMenuContext } from '../DateRangeMenuContext';
 
@@ -38,34 +40,6 @@ import {
 } from './DateRangeMenuCalendars.styles';
 import { DateRangeMenuCalendarsProps } from './DateRangeMenuCalendars.types';
 
-// TODO: move to utils
-const minDate = (datesArray: Array<DateType>): Date | undefined => {
-  const filteredDates = datesArray.filter(d => !isNull(d)) as Array<Date>;
-
-  if (filteredDates.length > 0) {
-    return min(filteredDates);
-  }
-};
-
-// TODO: move to utils
-const maxDate = (datesArray: Array<DateType>): Date | undefined => {
-  const filteredDates = datesArray.filter(d => !isNull(d)) as Array<Date>;
-
-  if (filteredDates.length > 0) {
-    return max(filteredDates);
-  }
-};
-
-// TODO: move to utils
-const isOnOrBefore = (day: Date, dayToCompare: Date) => {
-  return isSameUTCDay(day, dayToCompare) || isBefore(day, dayToCompare);
-};
-
-// TODO: move to utils
-const isOnOrAfter = (day: Date, dayToCompare: Date) => {
-  return isSameUTCDay(day, dayToCompare) || isAfter(day, dayToCompare);
-};
-
 export const DateRangeMenuCalendars = forwardRef<
   HTMLDivElement,
   DateRangeMenuCalendarsProps
diff --git a/packages/date-picker/src/utils/index.ts b/packages/date-picker/src/utils/index.ts
index e5acbe68b8..07da11eea9 100644
--- a/packages/date-picker/src/utils/index.ts
+++ b/packages/date-picker/src/utils/index.ts
@@ -17,6 +17,8 @@ export { getValueFormatter } from './getValueFormatter';
 export { getWeeksArray } from './getWeeksArray';
 export { isCurrentUTCDay } from './isCurrentUTCDay';
 export { isElementInputSegment } from './isElementInputSegment';
+export { isOnOrAfter } from './isOnOrAfter';
+export { isOnOrBefore } from './isOnOrBefore';
 export { isSameTZDay } from './isSameTZDay';
 export { isSameUTCDay } from './isSameUTCDay';
 export { isSameUTCMonth } from './isSameUTCMonth';
@@ -26,6 +28,8 @@ export { isValidDate } from './isValidDate';
 export { isValidLocale } from './isValidLocale';
 export { isValidSegment } from './isValidSegment';
 export { isZeroLike } from './isZeroLike';
+export { maxDate } from './maxDate';
+export { minDate } from './minDate';
 export { newDateFromSegments } from './newDateFromSegments';
 export { newUTC } from './newUTC';
 export { pickAndOmit } from './pickAndOmit';
diff --git a/packages/date-picker/src/utils/isOnOrAfter/index.ts b/packages/date-picker/src/utils/isOnOrAfter/index.ts
new file mode 100644
index 0000000000..ccf012439b
--- /dev/null
+++ b/packages/date-picker/src/utils/isOnOrAfter/index.ts
@@ -0,0 +1,8 @@
+import { isAfter } from 'date-fns';
+
+import { isSameUTCDay } from '../isSameUTCDay';
+
+// TODO: tests
+export const isOnOrAfter = (day: Date, dayToCompare: Date) => {
+  return isSameUTCDay(day, dayToCompare) || isAfter(day, dayToCompare);
+};
diff --git a/packages/date-picker/src/utils/isOnOrBefore/index.ts b/packages/date-picker/src/utils/isOnOrBefore/index.ts
new file mode 100644
index 0000000000..46d816fdf0
--- /dev/null
+++ b/packages/date-picker/src/utils/isOnOrBefore/index.ts
@@ -0,0 +1,8 @@
+import { isBefore } from 'date-fns';
+
+import { isSameUTCDay } from '../isSameUTCDay';
+
+// TODO: tests
+export const isOnOrBefore = (day: Date, dayToCompare: Date) => {
+  return isSameUTCDay(day, dayToCompare) || isBefore(day, dayToCompare);
+};
diff --git a/packages/date-picker/src/utils/maxDate/index.ts b/packages/date-picker/src/utils/maxDate/index.ts
new file mode 100644
index 0000000000..dcd3ee08b6
--- /dev/null
+++ b/packages/date-picker/src/utils/maxDate/index.ts
@@ -0,0 +1,16 @@
+import { max } from 'date-fns';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
+
+// TODO: tests
+export const maxDate = (
+  datesArray: Array<Date | null | undefined>,
+): Date | undefined => {
+  const filteredDates = datesArray.filter(
+    d => !isNull(d) && !isUndefined(d),
+  ) as Array<Date>;
+
+  if (filteredDates.length > 0) {
+    return max(filteredDates);
+  }
+};
diff --git a/packages/date-picker/src/utils/minDate/index.ts b/packages/date-picker/src/utils/minDate/index.ts
new file mode 100644
index 0000000000..76b1ddbdb0
--- /dev/null
+++ b/packages/date-picker/src/utils/minDate/index.ts
@@ -0,0 +1,16 @@
+import { min } from 'date-fns';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
+
+// TODO: tests
+export const minDate = (
+  datesArray: Array<Date | null | undefined>,
+): Date | undefined => {
+  const filteredDates = datesArray.filter(
+    d => !isNull(d) && !isUndefined(d),
+  ) as Array<Date>;
+
+  if (filteredDates.length > 0) {
+    return min(filteredDates);
+  }
+};

From 3e45e3c178c506d2c243caf80becf8dbb698c0bb Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 13 Oct 2023 12:35:29 -0400
Subject: [PATCH 228/351] cleanup & add isDefined util

---
 .../DatePickerInput.stories.tsx               |  7 ++++--
 .../DateRangeMenu/DateRangeMenu.tsx           |  2 +-
 .../DateRangeMenuCalendars.tsx                | 23 +++++--------------
 .../QuickSelectionMenu/QuickSelectionMenu.tsx |  2 +-
 packages/date-picker/src/utils/index.ts       |  1 +
 .../date-picker/src/utils/isDefined/index.ts  |  7 ++++++
 6 files changed, 21 insertions(+), 21 deletions(-)
 create mode 100644 packages/date-picker/src/utils/isDefined/index.ts

diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index e90ed05179..1c149d71fd 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -2,6 +2,7 @@
 import React, { useEffect, useState } from 'react';
 import { StoryFn } from '@storybook/react';
 import { isValid } from 'date-fns';
+import { isUndefined } from 'lodash';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
@@ -66,8 +67,10 @@ export const Basic: StoryFn<typeof DatePickerInput> = props => {
     }
   }, [props.value]);
 
-  const updateDate = (date: Date | null) => {
-    setDate(date);
+  const updateDate = (date?: Date | null) => {
+    if (!isUndefined(date)) {
+      setDate(date);
+    }
   };
 
   return (
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index 7d3ff09d3a..4a143a386c 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -41,7 +41,7 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
     const chevronRefs = useDynamicRefs<HTMLButtonElement>();
     const calendarCellRefs = useDynamicRefs<HTMLTableCellElement>();
     const footerButtonRefs = useDynamicRefs<HTMLButtonElement>();
-    const selectRefs = useDynamicRefs<HTMLButtonElement>();
+    const selectRefs = useDynamicRefs<HTMLDivElement>();
     const quickRangeButtonRefs = useDynamicRefs<HTMLButtonElement>();
 
     // Keep track of the element the user is highlighting with the keyboard
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index f8e6c68e7a..16ce76853a 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -24,6 +24,7 @@ import { DateType } from '../../../types';
 import {
   getFullMonthLabel,
   getUTCDateString,
+  isDefined,
   isSameUTCDay,
   isSameUTCMonth,
   maxDate,
@@ -102,7 +103,7 @@ export const DateRangeMenuCalendars = forwardRef<
       }
 
       // if at least the start/end date is defined...
-      if (value && value.some(v => !isNull(v))) {
+      if (value && value.some(isDefined)) {
         if (
           isSameUTCDay(cellDay, minDate(value)) ||
           isSameUTCDay(cellDay, maxDate(value))
@@ -116,29 +117,17 @@ export const DateRangeMenuCalendars = forwardRef<
 
     const getCellRangeState = (cellDay: Date): CalendarCellRangeState => {
       // if at least the start/end date is defined...
-      if (value && value.some(v => !isNull(v))) {
+      if (value && value.some(isDefined)) {
         // for the purposes of visualizing the calendar,
-        // the range start is the earliest date of the hovered cell,
-        // or the start/end value
+        // the range start is the earliest/latest date of the start/end value or hovered cell,
         const rangeStart = minDate([...value, hoveredCell]);
-        // same for range end
         const rangeEnd = maxDate([...value, hoveredCell]);
 
-        // if this cell is the first of `value`
-        // and it is _before_ the hovered cell
-        if (
-          isSameUTCDay(cellDay, rangeStart) //&&
-          // (!hoveredCell || isOnOrBefore(cellDay, hoveredCell))
-        ) {
+        if (isSameUTCDay(cellDay, rangeStart)) {
           return CalendarCellRangeState.Start;
         }
 
-        // if this cell is the last of `value`
-        // and it is _after_ the hovered cell
-        if (
-          isSameUTCDay(cellDay, rangeEnd) // &&
-          // (!hoveredCell || isOnOrAfter(cellDay, hoveredCell))
-        ) {
+        if (isSameUTCDay(cellDay, rangeEnd)) {
           return CalendarCellRangeState.End;
         }
 
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
index c20dd8ee79..544a6962b4 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
@@ -23,7 +23,7 @@ import {
 } from './QuickSelectionMenu.styles';
 
 interface QuickSelectionMenuProps {
-  selectRefs: DynamicRefGetter<HTMLButtonElement>;
+  selectRefs: DynamicRefGetter<HTMLDivElement>;
   quickRangeButtonRefs: DynamicRefGetter<HTMLButtonElement>;
 }
 
diff --git a/packages/date-picker/src/utils/index.ts b/packages/date-picker/src/utils/index.ts
index 07da11eea9..5952a6c7e7 100644
--- a/packages/date-picker/src/utils/index.ts
+++ b/packages/date-picker/src/utils/index.ts
@@ -16,6 +16,7 @@ export { getUTCDateString } from './getUTCDateString';
 export { getValueFormatter } from './getValueFormatter';
 export { getWeeksArray } from './getWeeksArray';
 export { isCurrentUTCDay } from './isCurrentUTCDay';
+export { isDefined } from './isDefined';
 export { isElementInputSegment } from './isElementInputSegment';
 export { isOnOrAfter } from './isOnOrAfter';
 export { isOnOrBefore } from './isOnOrBefore';
diff --git a/packages/date-picker/src/utils/isDefined/index.ts b/packages/date-picker/src/utils/isDefined/index.ts
new file mode 100644
index 0000000000..6ae4c17ccd
--- /dev/null
+++ b/packages/date-picker/src/utils/isDefined/index.ts
@@ -0,0 +1,7 @@
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
+
+/** Whether the value is _not_ `null` or `undefined` */
+export const isDefined = (val: any): val is Exclude<any, null | undefined> => {
+  return !isUndefined(val) && !isNull(val);
+};

From 0a0ac5b685b13b192cff399c5f00d83aca854e35 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 13 Oct 2023 12:52:51 -0400
Subject: [PATCH 229/351] adds range-value setting logic

---
 .../DateRangeMenuCalendars.tsx                | 23 +++++++++++++++----
 .../date-picker/src/utils/maxDate/index.ts    |  8 +++----
 .../date-picker/src/utils/minDate/index.ts    |  8 +++----
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index 16ce76853a..462d7c1d29 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -20,7 +20,7 @@ import {
 } from '../../../Calendar';
 import { CalendarCellRangeState } from '../../../Calendar/CalendarCell';
 import { useDatePickerContext } from '../../../DatePickerContext';
-import { DateType } from '../../../types';
+import { DateRangeType, DateType } from '../../../types';
 import {
   getFullMonthLabel,
   getUTCDateString,
@@ -92,7 +92,20 @@ export const DateRangeMenuCalendars = forwardRef<
     /** Creates a click handler for a specific cell date */
     const cellClickHandlerForDay = (day: Date) => () => {
       if (isInRange(day)) {
-        // TODO:
+        // if no value is set, set the start date
+        if (!value || value.every(isNull)) {
+          setValue([day, null]);
+        } else if (value.some(isNull)) {
+          // if only one date is set, set both dates
+          const newRange: DateRangeType = [
+            minDate([...value, day]) ?? day,
+            maxDate([...value, day]) ?? day,
+          ];
+          setValue(newRange);
+        } else if (value.every(isDefined)) {
+          // if both values are set, set the start date & clear the end date
+          setValue([day, null]);
+        }
       }
     };
 
@@ -146,17 +159,17 @@ export const DateRangeMenuCalendars = forwardRef<
 
     /** Called on any keydown within the menu element */
     const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {
-      // TODO:
+      // TODO: Arrow keys
     };
 
     const handleCellHover =
       (day: Date): MouseEventHandler<HTMLTableCellElement> =>
-      e => {
+      _ => {
         setHover(day);
       };
 
     const handleCalendarMouseOut: MouseEventHandler<HTMLDivElement> = e => {
-      // TODO: improve this logiv
+      // TODO: improve this logic
       if (e.target === e.currentTarget) {
         // ... if the calendar container is the event's target
         setHover(null);
diff --git a/packages/date-picker/src/utils/maxDate/index.ts b/packages/date-picker/src/utils/maxDate/index.ts
index dcd3ee08b6..e8e7eb023a 100644
--- a/packages/date-picker/src/utils/maxDate/index.ts
+++ b/packages/date-picker/src/utils/maxDate/index.ts
@@ -1,14 +1,12 @@
 import { max } from 'date-fns';
-import isNull from 'lodash/isNull';
-import isUndefined from 'lodash/isUndefined';
+
+import { isDefined } from '../isDefined';
 
 // TODO: tests
 export const maxDate = (
   datesArray: Array<Date | null | undefined>,
 ): Date | undefined => {
-  const filteredDates = datesArray.filter(
-    d => !isNull(d) && !isUndefined(d),
-  ) as Array<Date>;
+  const filteredDates = datesArray.filter(isDefined) as Array<Date>;
 
   if (filteredDates.length > 0) {
     return max(filteredDates);
diff --git a/packages/date-picker/src/utils/minDate/index.ts b/packages/date-picker/src/utils/minDate/index.ts
index 76b1ddbdb0..dc33c66e35 100644
--- a/packages/date-picker/src/utils/minDate/index.ts
+++ b/packages/date-picker/src/utils/minDate/index.ts
@@ -1,14 +1,12 @@
 import { min } from 'date-fns';
-import isNull from 'lodash/isNull';
-import isUndefined from 'lodash/isUndefined';
+
+import { isDefined } from '../isDefined';
 
 // TODO: tests
 export const minDate = (
   datesArray: Array<Date | null | undefined>,
 ): Date | undefined => {
-  const filteredDates = datesArray.filter(
-    d => !isNull(d) && !isUndefined(d),
-  ) as Array<Date>;
+  const filteredDates = datesArray.filter(isDefined) as Array<Date>;
 
   if (filteredDates.length > 0) {
     return min(filteredDates);

From 3f4e42d913148c3bd56c2954d05c9278c13c1951 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 13 Oct 2023 13:08:25 -0400
Subject: [PATCH 230/351] adds arrow key functionality

---
 .../DateRangeMenuCalendars.tsx                | 97 ++++++++++++++-----
 .../DateRangeMenuCalendars.types.ts           |  2 +-
 2 files changed, 76 insertions(+), 23 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index 462d7c1d29..a75daacd6c 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -4,13 +4,14 @@ import React, {
   MouseEventHandler,
   useState,
 } from 'react';
-import { isWithinInterval } from 'date-fns';
+import { addDays, isWithinInterval, subDays } from 'date-fns';
 import isNull from 'lodash/isNull';
 import isUndefined from 'lodash/isUndefined';
 
 import { cx } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
+import { keyMap } from '@leafygreen-ui/lib';
 import { Subtitle } from '@leafygreen-ui/typography';
 
 import {
@@ -46,10 +47,18 @@ export const DateRangeMenuCalendars = forwardRef<
   DateRangeMenuCalendarsProps
 >(
   (
-    { value, setValue, highlight, setHighlight, cellRefs, chevronRefs },
+    {
+      value,
+      setValue,
+      handleValidation,
+      highlight,
+      setHighlight,
+      cellRefs,
+      chevronRefs,
+    },
     fwdRef,
   ) => {
-    const { isInRange } = useDatePickerContext();
+    const { isInRange, setOpen } = useDatePickerContext();
     const {
       month,
       nextMonth,
@@ -90,24 +99,26 @@ export const DateRangeMenuCalendars = forwardRef<
     };
 
     /** Creates a click handler for a specific cell date */
-    const cellClickHandlerForDay = (day: Date) => () => {
-      if (isInRange(day)) {
-        // if no value is set, set the start date
-        if (!value || value.every(isNull)) {
-          setValue([day, null]);
-        } else if (value.some(isNull)) {
-          // if only one date is set, set both dates
-          const newRange: DateRangeType = [
-            minDate([...value, day]) ?? day,
-            maxDate([...value, day]) ?? day,
-          ];
-          setValue(newRange);
-        } else if (value.every(isDefined)) {
-          // if both values are set, set the start date & clear the end date
-          setValue([day, null]);
+    const cellClickHandlerForDay =
+      (day: Date): MouseEventHandler<HTMLTableCellElement> =>
+      () => {
+        if (isInRange(day)) {
+          // if no value is set, set the start date
+          if (!value || value.every(isNull)) {
+            setValue([day, null]);
+          } else if (value.some(isNull)) {
+            // if only one date is set, set both dates
+            const newRange: DateRangeType = [
+              minDate([...value, day]) ?? day,
+              maxDate([...value, day]) ?? day,
+            ];
+            setValue(newRange);
+          } else if (value.every(isDefined)) {
+            // if both values are set, set the start date & clear the end date
+            setValue([day, null]);
+          }
         }
-      }
-    };
+      };
 
     /** Returns the current state of the cell */
     const getCellState = (cellDay: Date): CalendarCellState => {
@@ -158,8 +169,50 @@ export const DateRangeMenuCalendars = forwardRef<
     };
 
     /** Called on any keydown within the menu element */
-    const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {
-      // TODO: Arrow keys
+    const handleCalendarKeyDown: KeyboardEventHandler<
+      HTMLTableElement
+    > = event => {
+      const { key } = event;
+      const highlightStart = highlight || value?.[0] || value?.[1] || today;
+      let nextHighlight = highlightStart;
+
+      switch (key) {
+        case keyMap.ArrowLeft: {
+          nextHighlight = subDays(highlightStart, 1);
+          break;
+        }
+
+        case keyMap.ArrowRight: {
+          nextHighlight = addDays(highlightStart, 1);
+          break;
+        }
+
+        case keyMap.ArrowUp: {
+          nextHighlight = subDays(highlightStart, 7);
+          break;
+        }
+
+        case keyMap.ArrowDown: {
+          nextHighlight = addDays(highlightStart, 7);
+          break;
+        }
+
+        case keyMap.Escape:
+          setOpen(false);
+          handleValidation?.(value);
+          break;
+
+        default:
+          break;
+      }
+
+      // if nextHighlight is in range
+      if (isInRange(nextHighlight)) {
+        updateHighlight(nextHighlight);
+
+        // Prevent the parent keydown handler from being called
+        event.stopPropagation();
+      }
     };
 
     const handleCellHover =
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
index 8019096a71..926823626e 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
@@ -4,7 +4,7 @@ import { DateType } from '../../../types';
 import { DateRangeMenuProps } from '../DateRangeMenu.types';
 
 export interface DateRangeMenuCalendarsProps
-  extends Pick<DateRangeMenuProps, 'value' | 'setValue'> {
+  extends Pick<DateRangeMenuProps, 'value' | 'setValue' | 'handleValidation'> {
   highlight: DateType;
   setHighlight: React.Dispatch<React.SetStateAction<DateType>>;
   cellRefs: DynamicRefGetter<HTMLTableCellElement>;

From 9557a9be6c54266dac529222d78ebe898c3fd5bf Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 13 Oct 2023 13:27:31 -0400
Subject: [PATCH 231/351] adds chevron click functionality

---
 .../DatePickerMenu/DatePickerMenu.tsx         |  2 +-
 .../DateRangeMenuCalendars.tsx                | 47 +++++++++++++++++--
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index a076db927d..819c1d42b7 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -90,7 +90,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     };
 
     /**
-     * When month changes, after the DOM changes, focus the relevant cell
+     * When highlight changes, after the DOM changes, focus the relevant cell
      */
     useLayoutEffect(() => {
       if (highlight && !isSameUTCDay(highlight, prevHighlight)) {
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index a75daacd6c..269cc2269f 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -2,6 +2,7 @@ import React, {
   forwardRef,
   KeyboardEventHandler,
   MouseEventHandler,
+  useLayoutEffect,
   useState,
 } from 'react';
 import { addDays, isWithinInterval, subDays } from 'date-fns';
@@ -9,6 +10,7 @@ import isNull from 'lodash/isNull';
 import isUndefined from 'lodash/isUndefined';
 
 import { cx } from '@leafygreen-ui/emotion';
+import { usePrevious } from '@leafygreen-ui/hooks';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import { keyMap } from '@leafygreen-ui/lib';
@@ -30,6 +32,7 @@ import {
   isSameUTCMonth,
   maxDate,
   minDate,
+  setUTCMonth,
 } from '../../../utils';
 import { useDateRangeMenuContext } from '../DateRangeMenuContext';
 
@@ -67,8 +70,11 @@ export const DateRangeMenuCalendars = forwardRef<
     } = useDateRangeMenuContext();
 
     const [hoveredCell, setHover] = useState<DateType>(null);
+    const prevHighlight = usePrevious(highlight);
 
-    /** setDisplayMonth with side effects */
+    /**
+     * setDisplayMonth with side effects
+     */
     const updateMonth = (newMonth: Date) => {
       if (isSameUTCMonth(newMonth, month)) {
         return;
@@ -84,7 +90,9 @@ export const DateRangeMenuCalendars = forwardRef<
       setDisplayMonth(newMonth);
     };
 
-    /** setHighlight with side effects */
+    /**
+     * setHighlight with side effects
+     */
     const updateHighlight = (newHighlight: Date) => {
       // change month if nextHighlight is different than `month` or `nextMonth`
       if (
@@ -98,7 +106,19 @@ export const DateRangeMenuCalendars = forwardRef<
       setHighlight(newHighlight);
     };
 
-    /** Creates a click handler for a specific cell date */
+    /**
+     * When highlight changes, after the DOM changes, focus the relevant cell
+     */
+    useLayoutEffect(() => {
+      if (highlight && !isSameUTCDay(highlight, prevHighlight)) {
+        const highlightCellRef = cellRefs(highlight.toISOString());
+        highlightCellRef.current?.focus();
+      }
+    }, [cellRefs, highlight, prevHighlight]);
+
+    /**
+     * Creates a click handler for a specific cell date
+     */
     const cellClickHandlerForDay =
       (day: Date): MouseEventHandler<HTMLTableCellElement> =>
       () => {
@@ -229,6 +249,15 @@ export const DateRangeMenuCalendars = forwardRef<
       }
     };
 
+    const handleChevronClick =
+      (dir: 'left' | 'right'): MouseEventHandler<HTMLButtonElement> =>
+      () => {
+        const increment = dir === 'left' ? -1 : 1;
+        const newMonthIndex = month.getUTCMonth() + increment;
+        const newMonth = setUTCMonth(month, newMonthIndex);
+        updateMonth(newMonth);
+      };
+
     return (
       <div
         ref={fwdRef}
@@ -236,7 +265,11 @@ export const DateRangeMenuCalendars = forwardRef<
       >
         <div className={calendarHeadersContainerStyle}>
           <div className={calendarHeaderStyles}>
-            <IconButton aria-label="Previous month" ref={chevronRefs('left')}>
+            <IconButton
+              aria-label="Previous month"
+              ref={chevronRefs('left')}
+              onClick={handleChevronClick('left')}
+            >
               <Icon glyph="ChevronLeft" />
             </IconButton>
             <Subtitle>{getFullMonthLabel(month)}</Subtitle>
@@ -244,7 +277,11 @@ export const DateRangeMenuCalendars = forwardRef<
 
           <div className={calendarHeaderStyles}>
             <Subtitle>{getFullMonthLabel(nextMonth)}</Subtitle>
-            <IconButton aria-label="Next month" ref={chevronRefs('right')}>
+            <IconButton
+              aria-label="Next month"
+              ref={chevronRefs('right')}
+              onClick={handleChevronClick('right')}
+            >
               <Icon glyph="ChevronRight" />
             </IconButton>
           </div>

From 9c05c0a7900ff0ac6e68e5e900cd075c92d5329e Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Fri, 13 Oct 2023 13:29:43 -0400
Subject: [PATCH 232/351] add size to FormField (#2029)

---
 .../date-picker/src/DateInput/DateFormField/DateFormField.tsx   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
index 43e41d2070..276bc562e3 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
@@ -27,6 +27,7 @@ export const DateFormField = React.forwardRef<
       disabled,
       isOpen,
       menuId,
+      size,
     } = useDatePickerContext();
 
     return (
@@ -37,6 +38,7 @@ export const DateFormField = React.forwardRef<
         disabled={disabled}
         state={state}
         errorMessage={errorMessage}
+        size={size}
         {...rest}
       >
         <FormFieldInputContainer

From 7a7a786ca500feb5f4f565d6564a3d9c3b529280 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 16 Oct 2023 11:52:51 -0400
Subject: [PATCH 233/351] run .focus on next animation frame

---
 .../DateRangeMenuCalendars.tsx                | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index 269cc2269f..d7ffd3ece0 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -2,7 +2,6 @@ import React, {
   forwardRef,
   KeyboardEventHandler,
   MouseEventHandler,
-  useLayoutEffect,
   useState,
 } from 'react';
 import { addDays, isWithinInterval, subDays } from 'date-fns';
@@ -10,7 +9,6 @@ import isNull from 'lodash/isNull';
 import isUndefined from 'lodash/isUndefined';
 
 import { cx } from '@leafygreen-ui/emotion';
-import { usePrevious } from '@leafygreen-ui/hooks';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import { keyMap } from '@leafygreen-ui/lib';
@@ -70,7 +68,6 @@ export const DateRangeMenuCalendars = forwardRef<
     } = useDateRangeMenuContext();
 
     const [hoveredCell, setHover] = useState<DateType>(null);
-    const prevHighlight = usePrevious(highlight);
 
     /**
      * setDisplayMonth with side effects
@@ -103,18 +100,17 @@ export const DateRangeMenuCalendars = forwardRef<
       }
 
       // keep track of the highlighted cell
-      setHighlight(newHighlight);
-    };
 
-    /**
-     * When highlight changes, after the DOM changes, focus the relevant cell
-     */
-    useLayoutEffect(() => {
-      if (highlight && !isSameUTCDay(highlight, prevHighlight)) {
-        const highlightCellRef = cellRefs(highlight.toISOString());
-        highlightCellRef.current?.focus();
+      if (!isSameUTCDay(newHighlight, highlight)) {
+        setHighlight(newHighlight);
+
+        // After the DOM changes, focus the relevant cell
+        requestAnimationFrame(() => {
+          const highlightCellRef = cellRefs(newHighlight.toISOString());
+          highlightCellRef.current?.focus();
+        });
       }
-    }, [cellRefs, highlight, prevHighlight]);
+    };
 
     /**
      * Creates a click handler for a specific cell date

From 1fd5a00f75b20e5a4bde8e514d664bebe51edcf5 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 16 Oct 2023 14:52:51 -0400
Subject: [PATCH 234/351] update default calendar

---
 packages/date-picker/package.json             |   2 +
 .../DateInputBox/DateInputBox.styles.ts       |   2 +-
 .../DateInput/DateInputBox/DateInputBox.tsx   |  51 +++---
 .../DatePickerMenu/DatePickerMenu.stories.tsx |   4 +-
 .../DateRangeMenuProvider.tsx                 |   6 +-
 .../DateRangePicker/DateRangePicker.spec.tsx  |  32 +++-
 .../DateRangePicker.stories.tsx               |  63 ++++---
 .../utils/getInitialMonth/index.ts            |  19 ++
 packages/date-picker/src/testUtils.ts         |  39 ++++
 .../src/utils/doesSomeSegmentExist/index.ts   |   9 +
 packages/date-picker/src/utils/index.ts       |   3 +-
 .../date-picker/src/utils/isDefined/index.ts  |   4 +-
 .../date-picker/src/utils/isZeroLike/index.ts |   7 +-
 yarn.lock                                     | 173 +++++++++++++++++-
 14 files changed, 353 insertions(+), 61 deletions(-)
 create mode 100644 packages/date-picker/src/DateRangePicker/utils/getInitialMonth/index.ts
 create mode 100644 packages/date-picker/src/utils/doesSomeSegmentExist/index.ts

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index f44bd7f5be..23d324fda3 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -37,9 +37,11 @@
   },
   "devDependencies": {
     "mockdate": "^3.0.5",
+    "storybook-mock-date-decorator": "^1.0.1",
     "timezone-mock": "^1.3.6"
   },
   "resolutions": {
+    "storybook-mock-date-decorator/@babel/runtime": "7.22.10",
     "date-fns/@babel/runtime": "7.22.10",
     "date-fns-tz/@babel/runtime": "7.22.10"
   },
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
index 63abb8fcc1..00cdcea518 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
@@ -12,7 +12,7 @@ export const separatorLiteralStyles = css`
   user-select: none;
 `;
 
-export const separatorLiteralDisbledStyles: Record<Theme, string> = {
+export const separatorLiteralDisabledStyles: Record<Theme, string> = {
   [Theme.Dark]: css`
     color: ${palette.gray.dark2};
   `,
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index 53aae26c76..d27247dcfc 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -4,6 +4,7 @@ import React, {
   FocusEventHandler,
 } from 'react';
 import { isSameDay } from 'date-fns';
+import { isEqual } from 'lodash';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
@@ -17,12 +18,16 @@ import {
   isDateSegment,
 } from '../../hooks/useDateSegments/DateSegments.types';
 import { useDateSegments } from '../../hooks/useDateSegments/useDateSegments';
-import { getValueFormatter, newDateFromSegments } from '../../utils';
+import {
+  doesSomeSegmentExist,
+  getValueFormatter,
+  newDateFromSegments,
+} from '../../utils';
 import { DateInputSegment } from '../DateInputSegment';
 
 import {
   segmentPartsWrapperStyles,
-  separatorLiteralDisbledStyles,
+  separatorLiteralDisabledStyles,
   separatorLiteralStyles,
 } from './DateInputBox.styles';
 import { DateInputBoxProps } from './DateInputBox.types';
@@ -82,30 +87,34 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
      */
     const onSegmentsUpdate = (
       newSegments: DateSegmentsState,
-      _prev?: DateSegmentsState,
+      prevSegments?: DateSegmentsState,
       updatedSegment?: DateSegment,
     ) => {
       const utcDate = newDateFromSegments(newSegments);
+      const haveSegmentValuesChanged = !isEqual(newSegments, prevSegments);
+      const areAllSegmentsEmpty = !doesSomeSegmentExist(newSegments);
+
+      if (haveSegmentValuesChanged) {
+        // Synthetically trigger the onChange event passed in from the parent
+        if (updatedSegment) {
+          triggerChangeEventForSegment(updatedSegment);
+        } else {
+          Object.keys(newSegments).forEach(seg => {
+            triggerChangeEventForSegment(seg as DateSegment);
+          });
+        }
 
-      // Synthetically trigger the onChange event passed in from the parent
-      if (updatedSegment) {
-        triggerChangeEventForSegment(updatedSegment);
-      } else {
-        Object.keys(newSegments).forEach(seg => {
-          triggerChangeEventForSegment(seg as DateSegment);
-        });
-      }
-
-      if (utcDate) {
-        // Only update the value iff all parts are set, and create a valid date.
-        const shouldUpdate = !dateValue || !isSameDay(utcDate, dateValue);
+        if (utcDate) {
+          // Only update the value iff all parts are set, and create a valid date.
+          const shouldUpdate = !dateValue || !isSameDay(utcDate, dateValue);
 
-        if (shouldUpdate) {
-          setDateValue?.(utcDate);
+          if (shouldUpdate) {
+            setDateValue?.(utcDate);
+          }
+        } else if (haveSegmentValuesChanged && areAllSegmentsEmpty) {
+          // if no segment exists, set the external value to null
+          setDateValue?.(null);
         }
-      } else if (!(newSegments.day || newSegments.month || newSegments.year)) {
-        // if no segment exists, set the external value to null
-        setDateValue?.(null);
       }
     };
 
@@ -146,7 +155,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
             return (
               <span
                 className={cx(separatorLiteralStyles, {
-                  [separatorLiteralDisbledStyles[theme]]: disabled,
+                  [separatorLiteralDisabledStyles[theme]]: disabled,
                 })}
                 key={'literal-' + i}
               >
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 243d323130..26c738a05a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks, react/prop-types */
 import React, { useRef, useState } from 'react';
-import { StoryFn, StoryObj } from '@storybook/react';
+import { Decorator, StoryFn, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 import { last, omit } from 'lodash';
 import MockDate from 'mockdate';
@@ -27,7 +27,7 @@ import { DatePickerMenuProps } from './DatePickerMenu.types';
 const mockToday = newUTC(2023, Month.September, 14);
 type DecoratorArgs = DatePickerMenuProps & DatePickerContextProps;
 
-const MenuDecorator = (Story: StoryFn, ctx: any) => {
+const MenuDecorator: Decorator = (Story: StoryFn, ctx: any) => {
   const [{ darkMode, ...contextProps }, { ...props }] = pickAndOmit(
     ctx?.args as DecoratorArgs,
     [...contextPropNames],
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
index da961c97c6..5d22b42866 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useMemo, useState } from 'react';
 
-import { getFirstOfMonth } from '../../../utils';
 import { addMonthsUTC } from '../../../utils';
+import { getInitialMonth } from '../../utils/getInitialMonth';
 import { DateRangeMenuProps } from '../DateRangeMenu.types';
 
 import { DateRangeMenuContext } from './DateRangeMenuContext';
@@ -21,9 +21,7 @@ export const DateRangeMenuProvider = ({
   today,
   children,
 }: DateRangeMenuProviderProps) => {
-  const [month, setMonth] = useState<Date>(
-    getFirstOfMonth(value?.[0] ?? today),
-  );
+  const [month, setMonth] = useState<Date>(getInitialMonth(value, today));
   const nextMonth = useMemo<Date>(() => addMonthsUTC(month, 1), [month]);
 
   return (
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 572ed702d1..cc18e3b2cc 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  queryByText as globalQueryByText,
   render,
   waitFor,
   waitForElementToBeRemoved,
@@ -134,7 +133,7 @@ describe('packages/date-picker/date-range-picker', () => {
         );
       });
 
-      test('if a value is set, menu opens to the month of that value', () => {
+      test('if only a start value is set, menu opens to the month of that value', () => {
         const { openMenu } = renderDateRangePicker({
           value: [newUTC(2023, Month.March, 10), null],
         });
@@ -147,6 +146,35 @@ describe('packages/date-picker/date-range-picker', () => {
         expect(calendarGrids?.[1]).toHaveAttribute('aria-label', 'April 2023');
       });
 
+      test('if only an end value is set, menu opens to the month _before_ value', () => {
+        const { openMenu } = renderDateRangePicker({
+          value: [null, newUTC(2023, Month.March, 10)],
+        });
+
+        const { calendarGrids, menuContainerEl } = openMenu();
+        const headers = menuContainerEl?.querySelectorAll('h6');
+        expect(headers?.[0]).toHaveTextContent('February 2023');
+        expect(headers?.[1]).toHaveTextContent('March 2023');
+        expect(calendarGrids?.[0]).toHaveAttribute(
+          'aria-label',
+          'February 2023',
+        );
+        expect(calendarGrids?.[1]).toHaveAttribute('aria-label', 'March 2023');
+      });
+
+      test('if a full value is set, menu opens to the month of the start value', () => {
+        const { openMenu } = renderDateRangePicker({
+          value: [newUTC(2023, Month.March, 10), newUTC(2023, Month.April, 1)],
+        });
+
+        const { calendarGrids, menuContainerEl } = openMenu();
+        const headers = menuContainerEl?.querySelectorAll('h6');
+        expect(headers?.[0]).toHaveTextContent('March 2023');
+        expect(headers?.[1]).toHaveTextContent('April 2023');
+        expect(calendarGrids?.[0]).toHaveAttribute('aria-label', 'March 2023');
+        expect(calendarGrids?.[1]).toHaveAttribute('aria-label', 'April 2023');
+      });
+
       test('renders the appropriate number of cells', () => {
         const { openMenu } = renderDateRangePicker({
           value: [newUTC(2024, Month.February, 14), null],
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
index a2a6b12c08..7d2f4eb570 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useState } from 'react';
-import { StoryFn } from '@storybook/react';
+import { Decorator, StoryFn } from '@storybook/react';
+import { mockDateDecorator } from 'storybook-mock-date-decorator';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
@@ -11,30 +12,42 @@ import {
   DatePickerContextProps,
   DatePickerProvider,
 } from '../DatePickerContext';
-import { Locales, TimeZones } from '../testUtils';
+import {
+  getProviderPropsFromStoryContext,
+  Locales,
+  TimeZones,
+} from '../testUtils';
 import { DateRangeType } from '../types';
 import { newUTC } from '../utils';
 
 import { DateRangePicker } from './DateRangePicker';
 
-const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
-  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-    <DatePickerProvider
-      value={{
-        ...ctx?.args,
-      }}
-    >
-      <Story />
-    </DatePickerProvider>
-  </LeafyGreenProvider>
-);
+const ProviderWrapper: Decorator = (Story, ctx) => {
+  const { leafyGreenProviderProps, datePickerProviderProps, storyProps } =
+    getProviderPropsFromStoryContext(ctx);
+
+  return (
+    <LeafyGreenProvider {...leafyGreenProviderProps}>
+      <DatePickerProvider
+        value={{
+          ...datePickerProviderProps,
+        }}
+      >
+        <Story {...storyProps} />
+      </DatePickerProvider>
+    </LeafyGreenProvider>
+  );
+};
+
+const mockToday = newUTC(2023, Month.September, 14);
 
 const meta: StoryMetaType<typeof DateRangePicker, DatePickerContextProps> = {
   title: 'Components/DatePicker/DateRangePicker',
   component: DateRangePicker,
-  decorators: [ProviderWrapper],
+  decorators: [mockDateDecorator, ProviderWrapper],
   parameters: {
     default: null,
+    date: mockToday,
     controls: {
       exclude: [
         'handleValidation',
@@ -44,16 +57,6 @@ const meta: StoryMetaType<typeof DateRangePicker, DatePickerContextProps> = {
         'value',
       ],
     },
-    // generate: {
-    //   combineArgs: {
-    //     darkMode: [false, true],
-    //     value: [newUTC(2023, Month.December, 26)],
-    //     dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
-    //     timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
-    //     disabled: [false, true],
-    //   },
-    //   decorator: ProviderWrapper,
-    // },
   },
   args: {
     dateFormat: 'en-US',
@@ -85,7 +88,17 @@ export const Basic: StoryFn<typeof DateRangePicker> = props => {
     newUTC(2023, Month.December, 26),
   ]);
 
-  return <DateRangePicker {...props} value={range} onRangeChange={setRange} />;
+  const handleRangeChange = (range?: DateRangeType) => {
+    setRange(range);
+  };
+
+  return (
+    <DateRangePicker
+      {...props}
+      value={range}
+      onRangeChange={handleRangeChange}
+    />
+  );
 };
 
 export const WithQuickSelection: StoryFn<typeof DateRangePicker> = props => {
diff --git a/packages/date-picker/src/DateRangePicker/utils/getInitialMonth/index.ts b/packages/date-picker/src/DateRangePicker/utils/getInitialMonth/index.ts
new file mode 100644
index 0000000000..0d2bec068a
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/utils/getInitialMonth/index.ts
@@ -0,0 +1,19 @@
+import { DateRangeType } from '../../../types';
+import { addMonthsUTC, getFirstOfMonth, isDefined } from '../../../utils';
+
+export const getInitialMonth = (
+  value: DateRangeType | undefined,
+  today: Date,
+): Date => {
+  if (isDefined(value)) {
+    const [start, end] = value;
+    // `start` if it exists,
+    // otherwise one month before `end` if it exists,
+    // fallback to today
+    const initial = start ? start : end ? addMonthsUTC(end, -1) : today;
+
+    return getFirstOfMonth(initial);
+  }
+
+  return getFirstOfMonth(today);
+};
diff --git a/packages/date-picker/src/testUtils.ts b/packages/date-picker/src/testUtils.ts
index a1993b97f4..3e9275dc2b 100644
--- a/packages/date-picker/src/testUtils.ts
+++ b/packages/date-picker/src/testUtils.ts
@@ -1,6 +1,17 @@
+import { StoryContext } from '@storybook/react';
 import userEvent from '@testing-library/user-event';
 import { range } from 'lodash';
 
+import { LeafyGreenProviderProps } from '@leafygreen-ui/leafygreen-provider';
+
+import {
+  ContextPropKeys,
+  defaultDatePickerContext,
+} from './DatePickerContext/DatePickerContext.utils';
+import { contextPropNames, DatePickerProviderProps } from './DatePickerContext';
+import { BaseDatePickerProps } from './types';
+import { pickAndOmit } from './utils';
+
 /** Time zones used to test with */
 export const TimeZones = [
   'Pacific/Honolulu',
@@ -29,7 +40,35 @@ export const tabNTimes = (count: number) => {
   }
 };
 
+/** Returns a jest object containing the expected target value  */
 export const eventContainingTargetValue = (value: any) =>
   expect.objectContaining({
     target: expect.objectContaining({ value }),
   });
+
+interface ProviderPropsObject<T> {
+  leafyGreenProviderProps: LeafyGreenProviderProps;
+  datePickerProviderProps: DatePickerProviderProps;
+  storyProps: T;
+}
+
+export const getProviderPropsFromStoryContext = <P = BaseDatePickerProps>(
+  ctx: StoryContext<Partial<P & DatePickerProviderProps>>,
+): ProviderPropsObject<Partial<Omit<P, ContextPropKeys>>> => {
+  const [
+    { darkMode, baseFontSize, ...datePickerProviderProps },
+    { ...storyProps },
+  ] = pickAndOmit(ctx.args, [...contextPropNames]);
+
+  return {
+    leafyGreenProviderProps: {
+      darkMode,
+      baseFontSize: baseFontSize === 13 ? 14 : baseFontSize,
+    },
+    datePickerProviderProps: {
+      ...defaultDatePickerContext,
+      ...datePickerProviderProps,
+    },
+    storyProps,
+  };
+};
diff --git a/packages/date-picker/src/utils/doesSomeSegmentExist/index.ts b/packages/date-picker/src/utils/doesSomeSegmentExist/index.ts
new file mode 100644
index 0000000000..d461f8a9ee
--- /dev/null
+++ b/packages/date-picker/src/utils/doesSomeSegmentExist/index.ts
@@ -0,0 +1,9 @@
+import { DateSegmentsState } from '../../hooks/useDateSegments';
+import { isNotZeroLike } from '../isZeroLike';
+
+/**
+ * Returns whether at least one segment has a value
+ */
+export const doesSomeSegmentExist = (segments: DateSegmentsState) => {
+  return Object.values(segments).some(isNotZeroLike);
+};
diff --git a/packages/date-picker/src/utils/index.ts b/packages/date-picker/src/utils/index.ts
index 5952a6c7e7..10a1b881fc 100644
--- a/packages/date-picker/src/utils/index.ts
+++ b/packages/date-picker/src/utils/index.ts
@@ -1,5 +1,6 @@
 export { addMonthsUTC } from './addMonthsUTC';
 export { cloneReverse } from './cloneReverse';
+export { doesSomeSegmentExist } from './doesSomeSegmentExist';
 export { getDaysInUTCMonth } from './getDaysInUTCMonth';
 export { getFirstEmptySegment } from './getFirstEmptySegment';
 export { getFirstOfMonth } from './getFirstOfMonth';
@@ -28,7 +29,7 @@ export { isTodayTZ } from './isTodayTZ';
 export { isValidDate } from './isValidDate';
 export { isValidLocale } from './isValidLocale';
 export { isValidSegment } from './isValidSegment';
-export { isZeroLike } from './isZeroLike';
+export { isNotZeroLike, isZeroLike } from './isZeroLike';
 export { maxDate } from './maxDate';
 export { minDate } from './minDate';
 export { newDateFromSegments } from './newDateFromSegments';
diff --git a/packages/date-picker/src/utils/isDefined/index.ts b/packages/date-picker/src/utils/isDefined/index.ts
index 6ae4c17ccd..b8cc0d65a0 100644
--- a/packages/date-picker/src/utils/isDefined/index.ts
+++ b/packages/date-picker/src/utils/isDefined/index.ts
@@ -2,6 +2,8 @@ import isNull from 'lodash/isNull';
 import isUndefined from 'lodash/isUndefined';
 
 /** Whether the value is _not_ `null` or `undefined` */
-export const isDefined = (val: any): val is Exclude<any, null | undefined> => {
+export const isDefined = <T>(
+  val: T | null | undefined,
+): val is Exclude<T, null | undefined> => {
   return !isUndefined(val) && !isNull(val);
 };
diff --git a/packages/date-picker/src/utils/isZeroLike/index.ts b/packages/date-picker/src/utils/isZeroLike/index.ts
index 18afdb61dd..268dbf32ab 100644
--- a/packages/date-picker/src/utils/isZeroLike/index.ts
+++ b/packages/date-picker/src/utils/isZeroLike/index.ts
@@ -1,3 +1,8 @@
+import { isDefined } from '../isDefined';
+
 /** Returns whether the provided value is some form of zero value */
 export const isZeroLike = (val: any) =>
-  !val || isNaN(val) || ['', '0', '00', 0].includes(val);
+  !isDefined(val) || ['', '0', '00', 0].includes(val);
+
+/** Returns whether the provided value is _not_ some form of zero value */
+export const isNotZeroLike = (val: any) => !isZeroLike(val);
diff --git a/yarn.lock b/yarn.lock
index 346aa1d955..1507f85828 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2755,6 +2755,46 @@
     "@storybook/preview-api" "7.1.1"
     "@storybook/types" "7.1.1"
 
+"@storybook/addons@^6.4.19":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.16.tgz#07e8f2205f86fa4c9dada719e3e096cb468e3cdd"
+  integrity sha512-p3DqQi+8QRL5k7jXhXmJZLsE/GqHqyY6PcoA1oNTJr0try48uhTGUOYkgzmqtDaa/qPFO5LP+xCPzZXckGtquQ==
+  dependencies:
+    "@storybook/api" "6.5.16"
+    "@storybook/channels" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/core-events" "6.5.16"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/router" "6.5.16"
+    "@storybook/theming" "6.5.16"
+    "@types/webpack-env" "^1.16.0"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    regenerator-runtime "^0.13.7"
+
+"@storybook/api@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.16.tgz#897915b76de05587fd702951d5d836f708043662"
+  integrity sha512-HOsuT8iomqeTMQJrRx5U8nsC7lJTwRr1DhdD0SzlqL4c80S/7uuCy4IZvOt4sYQjOzW5fOo/kamcoBXyLproTA==
+  dependencies:
+    "@storybook/channels" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/core-events" "6.5.16"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/router" "6.5.16"
+    "@storybook/semver" "^7.3.2"
+    "@storybook/theming" "6.5.16"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    regenerator-runtime "^0.13.7"
+    store2 "^2.12.0"
+    telejson "^6.0.8"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/api@7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@storybook/api/-/api-7.1.1.tgz#b40504752198c3a647d34b52e66e7bc91fceba01"
@@ -2874,6 +2914,15 @@
     "@storybook/channels" "7.1.1"
     "@storybook/client-logger" "7.1.1"
 
+"@storybook/channels@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.16.tgz#3fb9a3b5666ecb951a2d0cf8b0699b084ef2d3c6"
+  integrity sha512-VylzaWQZaMozEwZPJdyJoz+0jpDa8GRyaqu9TGG6QGv+KU5POoZaGLDkRE7TzWkyyP0KQLo80K99MssZCpgSeg==
+  dependencies:
+    core-js "^3.8.2"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/channels@7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.1.1.tgz#c4a560ba7fe02837ef66d2d4128dbfbcbf1b7805"
@@ -2953,6 +3002,14 @@
     "@storybook/client-logger" "7.1.1"
     "@storybook/preview-api" "7.1.1"
 
+"@storybook/client-logger@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.16.tgz#955cc46b389e7151c9eb1585a75e6a0605af61a1"
+  integrity sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q==
+  dependencies:
+    core-js "^3.8.2"
+    global "^4.4.0"
+
 "@storybook/client-logger@7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.1.1.tgz#62b7760ab05977f831f1831d5842ab4a4501c585"
@@ -3037,6 +3094,13 @@
     resolve-from "^5.0.0"
     ts-dedent "^2.0.0"
 
+"@storybook/core-events@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.16.tgz#b1c265dac755007dae172d9d4b72656c9e5d7bb3"
+  integrity sha512-qMZQwmvzpH5F2uwNUllTPg6eZXr2OaYZQRRN8VZJiuorZzDNdAFmiVWMWdkThwmyLEJuQKXxqCL8lMj/7PPM+g==
+  dependencies:
+    core-js "^3.8.2"
+
 "@storybook/core-events@7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.1.1.tgz#c2c30085bd254a27cdbd266a8e7755876abf9361"
@@ -3129,6 +3193,13 @@
     recast "^0.23.1"
     ts-dedent "^2.0.0"
 
+"@storybook/csf@0.0.2--canary.4566f4d.1":
+  version "0.0.2--canary.4566f4d.1"
+  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz#dac52a21c40ef198554e71fe4d20d61e17f65327"
+  integrity sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==
+  dependencies:
+    lodash "^4.17.15"
+
 "@storybook/csf@^0.0.1":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
@@ -3389,6 +3460,17 @@
     type-fest "^3.11.0"
     util-deprecate "^1.0.2"
 
+"@storybook/router@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.16.tgz#28fb4d34e8219351a40bee1fc94dcacda6e1bd8b"
+  integrity sha512-ZgeP8a5YV/iuKbv31V8DjPxlV4AzorRiR8OuSt/KqaiYXNXlOoQDz/qMmiNcrshrfLpmkzoq7fSo4T8lWo2UwQ==
+  dependencies:
+    "@storybook/client-logger" "6.5.16"
+    core-js "^3.8.2"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/router@7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.1.1.tgz#43f9e275d3c0fdbc80b0858b4adf9233abe296d0"
@@ -3407,6 +3489,14 @@
     memoizerific "^1.11.3"
     qs "^6.10.0"
 
+"@storybook/semver@^7.3.2":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0"
+  integrity sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==
+  dependencies:
+    core-js "^3.6.5"
+    find-up "^4.1.0"
+
 "@storybook/store@7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@storybook/store/-/store-7.1.1.tgz#0f845c698cfe6584b0dde6a1fab125a9eed2eaec"
@@ -3438,6 +3528,16 @@
     "@testing-library/user-event" "^14.0.0"
     ts-dedent "^2.2.0"
 
+"@storybook/theming@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.16.tgz#b999bdb98945b605b93b9dfdf7408535b701e2aa"
+  integrity sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ==
+  dependencies:
+    "@storybook/client-logger" "6.5.16"
+    core-js "^3.8.2"
+    memoizerific "^1.11.3"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/theming@7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.1.1.tgz#5dc1bf43c7522aa6f4d24a01d361f0c2825f109c"
@@ -4043,6 +4143,11 @@
   dependencies:
     ci-info "^3.1.0"
 
+"@types/is-function@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.1.tgz#2d024eace950c836d9e3335a66b97960ae41d022"
+  integrity sha512-A79HEEiwXTFtfY+Bcbo58M2GRYzCr9itHWzbzHVFNEYCcoU/MMGwYYf721gBrnhpj1s6RGVVha/IgNFnR0Iw/Q==
+
 "@types/is-stream@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@types/is-stream/-/is-stream-1.1.0.tgz#b84d7bb207a210f2af9bed431dc0fbe9c4143be1"
@@ -4323,6 +4428,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.7.tgz#5b06ad6894b236a1d2bd6b2f07850ca5c59cf4d6"
   integrity sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==
 
+"@types/webpack-env@^1.16.0":
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.18.2.tgz#0264bc30c0c4a073118ce5b26c5ef143da4374df"
+  integrity sha512-BFqcTHHTrrI8EBmIzNAmLPP3IqtEG9J1IPFWbPeS/F0/TGNmo0pI5svOa7JbMF9vSCXQCvJWT2gxLJNVuf9blw==
+
 "@types/xml2json@^0.11.0":
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/@types/xml2json/-/xml2json-0.11.4.tgz#a08330f23ccf6e7697ab8d0ccebf0c31bf472534"
@@ -5885,6 +5995,11 @@ core-js-pure@^3.23.3:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.32.0.tgz#5d79f85da7a4373e9a06494ccbef995a4c639f8b"
   integrity sha512-qsev1H+dTNYpDUEURRuOXMvpdtAnNEvQWS/FMJ2Vb5AY8ZP4rAPQldkE27joykZPJTe0+IVgHZYh1P5Xu1/i1g==
 
+core-js@^3.6.5, core-js@^3.8.2:
+  version "3.33.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.33.0.tgz#70366dbf737134761edb017990cf5ce6c6369c40"
+  integrity sha512-HoZr92+ZjFEKar5HS6MC776gYslNOKHt75mEBKWKnPeFDpZ6nH5OeF3S6HFT1mUAUZKrzkez05VboaX8myjSuw==
+
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -6407,6 +6522,11 @@ dom-serializer@^2.0.0:
     domhandler "^5.0.2"
     entities "^4.2.0"
 
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
 domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
@@ -7670,6 +7790,14 @@ glob@^8.0.3:
     minimatch "^5.0.1"
     once "^1.3.0"
 
+global@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -8223,6 +8351,11 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-function@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
+  integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
+
 is-generator-fn@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
@@ -8329,7 +8462,7 @@ is-potential-custom-element-name@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
-is-regex@^1.1.4:
+is-regex@^1.1.2, is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
   integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
@@ -8456,6 +8589,11 @@ isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
+isobject@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
+  integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==
+
 istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
@@ -9929,6 +10067,13 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
+  dependencies:
+    dom-walk "^0.1.0"
+
 min-indent@^1.0.0, min-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -11407,7 +11552,7 @@ regenerator-runtime@0.14.0, regenerator-runtime@^0.14.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
   integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
 
-regenerator-runtime@^0.13.4:
+regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
@@ -12024,7 +12169,7 @@ stop-iteration-iterator@^1.0.0:
   dependencies:
     internal-slot "^1.0.4"
 
-store2@^2.14.2:
+store2@^2.12.0, store2@^2.14.2:
   version "2.14.2"
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068"
   integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==
@@ -12039,6 +12184,14 @@ storybook-addon-performance@0.17.1:
     "@xstate/react" "^3.0.1"
     xstate "^4.35.0"
 
+storybook-mock-date-decorator@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/storybook-mock-date-decorator/-/storybook-mock-date-decorator-1.0.1.tgz#e3ee68f73fbd84a7512ed8e30b539b9d7eb4a5a2"
+  integrity sha512-ZHrl8ZdB++g1d3VmPYzUqguqwiXc6HOF6eUrC4m2xjAtTq9aDhHKqAiQu90TMatrZwkMJULfHpmG2qPLl3fRQQ==
+  dependencies:
+    "@storybook/addons" "^6.4.19"
+    mockdate "^3.0.5"
+
 storybook@7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/storybook/-/storybook-7.1.1.tgz#37218a3ce4a093c92ade7ca2ac3190521f81f49f"
@@ -12339,6 +12492,20 @@ tar@^6.1.13:
     mkdirp "^1.0.3"
     yallist "^4.0.0"
 
+telejson@^6.0.8:
+  version "6.0.8"
+  resolved "https://registry.yarnpkg.com/telejson/-/telejson-6.0.8.tgz#1c432db7e7a9212c1fbd941c3e5174ec385148f7"
+  integrity sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==
+  dependencies:
+    "@types/is-function" "^1.0.0"
+    global "^4.4.0"
+    is-function "^1.0.2"
+    is-regex "^1.1.2"
+    is-symbol "^1.0.3"
+    isobject "^4.0.0"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+
 telejson@^7.0.3:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/telejson/-/telejson-7.1.0.tgz#1ef7a0dd57eeb52cde933126f61bcc296c170f52"

From 436e5065d2ff6b3f7e7cb61c5180b1ad6abfaeb9 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 16 Oct 2023 15:41:08 -0400
Subject: [PATCH 235/351] on apply, cancel clear

---
 .../DateRangeComponent/DateRangeComponent.tsx |  2 +
 .../DateRangeMenu/DateRangeMenu.tsx           | 40 +++++++++-
 .../DateRangeMenu/DateRangeMenu.types.ts      |  7 +-
 .../DateRangeMenuFooter.tsx                   | 73 +++++++++++--------
 .../DateRangePicker/DateRangePicker.spec.tsx  |  7 +-
 .../DateRangePicker.stories.tsx               |  6 +-
 6 files changed, 97 insertions(+), 38 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
index aecde66f02..8bcc7292dd 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
@@ -72,6 +72,8 @@ export const DateRangeComponent = forwardRef<
           id={menuId}
           value={value}
           setValue={handleCalendarValueChange}
+          onCancel={onCancel}
+          onClear={onClear}
           showQuickSelection={showQuickSelection}
         />
       </>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index 4a143a386c..46cd20a7c3 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -2,6 +2,7 @@ import React, {
   FocusEventHandler,
   forwardRef,
   KeyboardEventHandler,
+  MouseEventHandler,
   useMemo,
   useRef,
   useState,
@@ -31,11 +32,18 @@ const lgid = 'date-range_menu';
 
 export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
   (
-    { value, setValue, showQuickSelection, ...rest }: DateRangeMenuProps,
+    {
+      value,
+      setValue,
+      showQuickSelection,
+      onCancel,
+      onClear,
+      ...rest
+    }: DateRangeMenuProps,
     fwdRef,
   ) => {
     const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
-    const { isOpen } = useDatePickerContext();
+    const { isOpen, setOpen } = useDatePickerContext();
     const menuRef = useForwardedRef(fwdRef, null);
     const calendarSectionRef = useRef<HTMLDivElement>(null);
     const chevronRefs = useDynamicRefs<HTMLButtonElement>();
@@ -88,6 +96,27 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
       }
     };
 
+    /** Triggered when the Apply button is clicked */
+    const handleApply: MouseEventHandler<HTMLButtonElement> = _ => {
+      console.log('handle Apply');
+      setValue(value);
+      setOpen(false);
+    };
+
+    /** Triggered when the cancel button is clicked */
+    const handleCancel: MouseEventHandler<HTMLButtonElement> = e => {
+      setValue(value);
+      setOpen(false);
+      onCancel?.(e);
+    };
+
+    /** Triggered when the clear button is clicked */
+    const handleClear: MouseEventHandler<HTMLButtonElement> = e => {
+      setValue([null, null]);
+      // setOpen(false);
+      onClear?.(e);
+    };
+
     return (
       <DateRangeMenuProvider value={value} today={today}>
         <MenuWrapper
@@ -119,7 +148,12 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
               setHighlight={setHighlight}
             />
           </div>
-          <DateRangeMenuFooter buttonRefs={footerButtonRefs} />
+          <DateRangeMenuFooter
+            onApply={handleApply}
+            onCancel={handleCancel}
+            onClear={handleClear}
+            buttonRefs={footerButtonRefs}
+          />
         </MenuWrapper>
       </DateRangeMenuProvider>
     );
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
index 447b34b3d7..684a5f1f80 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
@@ -7,6 +7,11 @@ export type DateRangeMenuProps = PortalControlProps &
   Pick<PopoverProps, 'refEl'> &
   Pick<
     DateRangeComponentProps,
-    'value' | 'setValue' | 'showQuickSelection' | 'handleValidation' // TODO: Setter
+    | 'value'
+    | 'setValue'
+    | 'showQuickSelection'
+    | 'handleValidation'
+    | 'onCancel'
+    | 'onClear'
   > &
   HTMLElementProps<'div'> & {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
index 79a36fc2d4..09c1a1af8b 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, MouseEventHandler } from 'react';
 
 import Button, { Size, Variant } from '@leafygreen-ui/button';
 import { DynamicRefGetter } from '@leafygreen-ui/hooks';
@@ -7,42 +7,57 @@ import { Link } from '@leafygreen-ui/typography';
 import { clearButtonStyles, footerStyles } from './DateRangeMenuFooter.styles';
 
 interface DateRangeMenuFooterProps {
+  onApply: MouseEventHandler<HTMLButtonElement>;
+  onCancel: MouseEventHandler<HTMLButtonElement>;
+  onClear: MouseEventHandler<HTMLButtonElement>;
   buttonRefs: DynamicRefGetter<HTMLButtonElement>;
 }
 
 export const DateRangeMenuFooter = forwardRef<
   HTMLDivElement,
   DateRangeMenuFooterProps
->(({ buttonRefs }: DateRangeMenuFooterProps, fwdRef) => {
-  return (
-    <div ref={fwdRef} className={footerStyles} data-lg="date-range_menu_footer">
-      <Link
-        ref={buttonRefs('clear')}
-        as="button"
-        className={clearButtonStyles}
-        aria-label="Clear selection"
+>(
+  (
+    { onApply, onCancel, onClear, buttonRefs }: DateRangeMenuFooterProps,
+    fwdRef,
+  ) => {
+    return (
+      <div
+        ref={fwdRef}
+        className={footerStyles}
+        data-lg="date-range_menu_footer"
       >
-        Clear
-      </Link>
-      <div>
-        <Button
-          ref={buttonRefs('cancel')}
-          size={Size.XSmall}
-          aria-label="Cancel selection"
+        <Link
+          ref={buttonRefs('clear')}
+          as="button"
+          className={clearButtonStyles}
+          aria-label="Clear selection"
+          onClick={onClear}
         >
-          Cancel
-        </Button>
-        <Button
-          ref={buttonRefs('apply')}
-          size={Size.XSmall}
-          variant={Variant.Primary}
-          aria-label="Apply selection"
-        >
-          Apply
-        </Button>
+          Clear
+        </Link>
+        <div>
+          <Button
+            ref={buttonRefs('cancel')}
+            size={Size.XSmall}
+            aria-label="Cancel selection"
+            onClick={onCancel}
+          >
+            Cancel
+          </Button>
+          <Button
+            ref={buttonRefs('apply')}
+            size={Size.XSmall}
+            variant={Variant.Primary}
+            aria-label="Apply selection"
+            onClick={onApply}
+          >
+            Apply
+          </Button>
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 
 DateRangeMenuFooter.displayName = 'DateRangeMenuFooter';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index cc18e3b2cc..122b67ef6a 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -478,15 +478,14 @@ describe('packages/date-picker/date-range-picker', () => {
             const start = newUTC(2023, Month.April, 1);
             const end = newUTC(2023, Month.July, 5);
             const onRangeChange = jest.fn();
-            const { inputElements, getMenuElements } = renderDateRangePicker({
+            const { openMenu } = renderDateRangePicker({
               onRangeChange,
               value: [start, end],
             });
-            userEvent.type(inputElements[2], '5');
-            const { applyButton } = getMenuElements();
+            const { applyButton } = openMenu();
             userEvent.click(applyButton!);
             expect(onRangeChange).toHaveBeenCalledWith(
-              expect.arrayContaining([setUTCDate(start, 5), end]),
+              expect.arrayContaining([start, end]),
             );
           });
         });
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
index 7d2f4eb570..2b831381ed 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /* eslint-disable react/prop-types */
 import React, { useState } from 'react';
 import { Decorator, StoryFn } from '@storybook/react';
@@ -53,7 +54,9 @@ const meta: StoryMetaType<typeof DateRangePicker, DatePickerContextProps> = {
         'handleValidation',
         'initialValue',
         'onChange',
-        'onSegmentChange',
+        'onRangeChange',
+        'onCancel',
+        'onClear',
         'value',
       ],
     },
@@ -89,6 +92,7 @@ export const Basic: StoryFn<typeof DateRangePicker> = props => {
   ]);
 
   const handleRangeChange = (range?: DateRangeType) => {
+    console.log('Storybook: Range changed:', range);
     setRange(range);
   };
 

From 356c0a938f01d3bb1b6a7be82af254dd927e0a63 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 16 Oct 2023 16:37:31 -0400
Subject: [PATCH 236/351] adds close menu tests

---
 .../DateRangeMenu/DateRangeMenu.tsx           |  2 --
 .../DateRangePicker/DateRangePicker.spec.tsx  | 24 +++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index 46cd20a7c3..240aaf6f77 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -98,7 +98,6 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
 
     /** Triggered when the Apply button is clicked */
     const handleApply: MouseEventHandler<HTMLButtonElement> = _ => {
-      console.log('handle Apply');
       setValue(value);
       setOpen(false);
     };
@@ -113,7 +112,6 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
     /** Triggered when the clear button is clicked */
     const handleClear: MouseEventHandler<HTMLButtonElement> = e => {
       setValue([null, null]);
-      // setOpen(false);
       onClear?.(e);
     };
 
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 122b67ef6a..6940ea57ee 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -488,6 +488,14 @@ describe('packages/date-picker/date-range-picker', () => {
               expect.arrayContaining([start, end]),
             );
           });
+
+          test('closes menu', async () => {
+            const { openMenu } = renderDateRangePicker();
+            const { applyButton, menuContainerEl } = openMenu();
+            userEvent.click(applyButton!);
+            await waitForElementToBeRemoved(menuContainerEl);
+            expect(menuContainerEl).not.toBeInTheDocument();
+          });
         });
 
         describe('Clicking the Cancel button', () => {
@@ -520,6 +528,14 @@ describe('packages/date-picker/date-range-picker', () => {
               expect.arrayContaining([start, end]),
             );
           });
+
+          test('closes menu', async () => {
+            const { openMenu } = renderDateRangePicker();
+            const { cancelButton, menuContainerEl } = openMenu();
+            userEvent.click(cancelButton!);
+            await waitForElementToBeRemoved(menuContainerEl);
+            expect(menuContainerEl).not.toBeInTheDocument();
+          });
         });
 
         describe('Clicking the Clear button', () => {
@@ -535,6 +551,7 @@ describe('packages/date-picker/date-range-picker', () => {
             userEvent.click(clearButton!);
             expect(onClear).toHaveBeenCalled();
           });
+
           test('fires a change handler with the to clear the range values', () => {
             const start = newUTC(2023, Month.April, 1);
             const end = newUTC(2023, Month.July, 5);
@@ -549,6 +566,13 @@ describe('packages/date-picker/date-range-picker', () => {
               expect.arrayContaining([null, null]),
             );
           });
+
+          test('does not close the menu', () => {
+            const { openMenu } = renderDateRangePicker();
+            const { clearButton, menuContainerEl } = openMenu();
+            userEvent.click(clearButton!);
+            expect(menuContainerEl).toBeInTheDocument();
+          });
         });
       });
 

From 287add0ab878cfc721d36aa0930d7608b9d56160 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 16 Oct 2023 17:40:19 -0400
Subject: [PATCH 237/351] adds validation story

---
 .../DateRangePicker.stories.tsx               | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
index 2b831381ed..3d2a4a3396 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
@@ -18,7 +18,7 @@ import {
   Locales,
   TimeZones,
 } from '../testUtils';
-import { DateRangeType } from '../types';
+import { DatePickerState, DateRangeType } from '../types';
 import { newUTC } from '../utils';
 
 import { DateRangePicker } from './DateRangePicker';
@@ -92,7 +92,7 @@ export const Basic: StoryFn<typeof DateRangePicker> = props => {
   ]);
 
   const handleRangeChange = (range?: DateRangeType) => {
-    console.log('Storybook: Range changed:', range);
+    console.log('Storybook: Range changed', range);
     setRange(range);
   };
 
@@ -125,4 +125,38 @@ export const Uncontrolled: StoryFn<typeof DateRangePicker> = props => {
   return <DateRangePicker {...props} />;
 };
 
+export const WithValidation: StoryFn<typeof DateRangePicker> = props => {
+  const expectedDate = newUTC(2023, Month.December, 26);
+
+  const [state, setState] = useState<DatePickerState>(DatePickerState.None);
+  const [range, setRange] = useState<DateRangeType | undefined>([null, null]);
+
+  const handleRangeChange = (range?: DateRangeType) => {
+    console.log('Storybook: Range changed', range);
+    setRange(range);
+  };
+
+  const handleValidation = (range?: DateRangeType) => {
+    console.log('Storybook: Handling validation', range);
+
+    if (range && range[0] === expectedDate) {
+      setState(DatePickerState.None);
+    }
+    setState(DatePickerState.Error);
+  };
+
+  console.log(state);
+
+  return (
+    <DateRangePicker
+      {...props}
+      value={range}
+      state={state}
+      errorMessage={`Start date must be ${expectedDate.toUTCString()}`}
+      onRangeChange={handleRangeChange}
+      handleValidation={handleValidation}
+    />
+  );
+};
+
 // export const Generated = () => {};

From cbe9114a5e982e3d8c7c6975460bec3e897113a2 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 16 Oct 2023 17:44:42 -0400
Subject: [PATCH 238/351] adds calendar button click tests

---
 .../src/DateRangePicker/DateRangePicker.spec.tsx           | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 6940ea57ee..1d019fba6a 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -361,6 +361,13 @@ describe('packages/date-picker/date-range-picker', () => {
           const { menuContainerEl } = getMenuElements();
           expect(menuContainerEl).toBeInTheDocument();
         });
+
+        test('focuses on the highlighted cell', () => {
+          const { calendarButton, getMenuElements } = renderDateRangePicker();
+          userEvent.click(calendarButton);
+          const { todayCell } = getMenuElements();
+          expect(todayCell).toHaveFocus();
+        });
       });
 
       describe('Basic menu', () => {

From a4267237f1b0617f2b481fe99da8da2651682a45 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 16 Oct 2023 17:45:30 -0400
Subject: [PATCH 239/351] Update DateRangeMenuCalendars.types.ts

---
 .../DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
index 926823626e..a00441885a 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
@@ -1,10 +1,12 @@
 import { DynamicRefGetter } from '@leafygreen-ui/hooks';
+import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 import { DateType } from '../../../types';
 import { DateRangeMenuProps } from '../DateRangeMenu.types';
 
 export interface DateRangeMenuCalendarsProps
-  extends Pick<DateRangeMenuProps, 'value' | 'setValue' | 'handleValidation'> {
+  extends Pick<DateRangeMenuProps, 'value' | 'setValue' | 'handleValidation'>,
+    HTMLElementProps<'div'> {
   highlight: DateType;
   setHighlight: React.Dispatch<React.SetStateAction<DateType>>;
   cellRefs: DynamicRefGetter<HTMLTableCellElement>;

From aa363d6692533a3bd99047d3176a2caefa88e363 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 16 Oct 2023 18:05:08 -0400
Subject: [PATCH 240/351] corrects initial highlight when value = null array

---
 .../DateRangeMenu/DateRangeMenu.tsx           |  7 +++++--
 .../DateRangeMenuProvider.tsx                 |  9 +++++----
 .../DateRangePicker/DateRangePicker.spec.tsx  | 14 ++++++++++++--
 .../utils/getInitialHighlight/index.ts        | 19 +++++++++++++++++++
 4 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 packages/date-picker/src/DateRangePicker/utils/getInitialHighlight/index.ts

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index 240aaf6f77..1e6116e547 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -17,6 +17,8 @@ import { MenuWrapper } from '../../Calendar/MenuWrapper';
 import { useDatePickerContext } from '../../DatePickerContext';
 import { DateType } from '../../types';
 import { setToUTCMidnight } from '../../utils';
+import { getInitialHighlight } from '../utils/getInitialHighlight';
+import { getInitialMonth } from '../utils/getInitialMonth';
 
 import {
   menuContentStyles,
@@ -52,9 +54,10 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
     const selectRefs = useDynamicRefs<HTMLDivElement>();
     const quickRangeButtonRefs = useDynamicRefs<HTMLButtonElement>();
 
+    const [month, setMonth] = useState<Date>(getInitialMonth(value, today));
     // Keep track of the element the user is highlighting with the keyboard
     const [highlight, setHighlight] = useState<DateType>(
-      value ? value[0] : today,
+      getInitialHighlight(value, today, month),
     );
 
     const getHighlightedCell = () => {
@@ -116,7 +119,7 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
     };
 
     return (
-      <DateRangeMenuProvider value={value} today={today}>
+      <DateRangeMenuProvider month={month} setMonth={setMonth} today={today}>
         <MenuWrapper
           data-lg={lgid}
           ref={menuRef}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
index 5d22b42866..fe93fc2669 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
@@ -1,7 +1,6 @@
-import React, { PropsWithChildren, useMemo, useState } from 'react';
+import React, { PropsWithChildren, useMemo } from 'react';
 
 import { addMonthsUTC } from '../../../utils';
-import { getInitialMonth } from '../../utils/getInitialMonth';
 import { DateRangeMenuProps } from '../DateRangeMenu.types';
 
 import { DateRangeMenuContext } from './DateRangeMenuContext';
@@ -9,6 +8,8 @@ import { DateRangeMenuContext } from './DateRangeMenuContext';
 export interface DateRangeMenuProviderProps
   extends Pick<DateRangeMenuProps, 'value'>,
     PropsWithChildren<{}> {
+  month: Date;
+  setMonth: React.Dispatch<React.SetStateAction<Date>>;
   today: Date;
 }
 
@@ -17,11 +18,11 @@ export interface DateRangeMenuProviderProps
  * and initializes the start & end display months
  */
 export const DateRangeMenuProvider = ({
-  value,
+  month,
+  setMonth,
   today,
   children,
 }: DateRangeMenuProviderProps) => {
-  const [month, setMonth] = useState<Date>(getInitialMonth(value, today));
   const nextMonth = useMemo<Date>(() => addMonthsUTC(month, 1), [month]);
 
   return (
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 1d019fba6a..c0c6b10008 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -324,12 +324,20 @@ describe('packages/date-picker/date-range-picker', () => {
           expect(document.activeElement).toBe(inputElements[2]);
         });
 
-        test('focuses the first segment when all are empty', () => {
+        test('focuses the first segment when all are empty (`undefined`)', () => {
           const { inputContainer, inputElements } = renderDateRangePicker();
           userEvent.click(inputContainer);
           expect(document.activeElement).toBe(inputElements[0]);
         });
 
+        test('focuses the first segment when all are empty (`[null, null]`)', () => {
+          const { inputContainer, inputElements } = renderDateRangePicker({
+            value: [null, null],
+          });
+          userEvent.click(inputContainer);
+          expect(document.activeElement).toBe(inputElements[0]);
+        });
+
         test('focuses the first empty segment in start input', () => {
           const { inputContainer, inputElements } = renderDateRangePicker();
           userEvent.type(inputElements[0], '01');
@@ -337,7 +345,7 @@ describe('packages/date-picker/date-range-picker', () => {
           expect(document.activeElement).toBe(inputElements[1]);
         });
 
-        test('focuses the first empty segment in end input', () => {
+        test('focuses the first empty segment in end input when start value is set', () => {
           const { inputContainer, inputElements } = renderDateRangePicker({
             value: [newUTC(2023, 1, 1), null],
           });
@@ -699,6 +707,8 @@ describe('packages/date-picker/date-range-picker', () => {
           expect(handleValidation).not.toHaveBeenCalled();
         });
 
+        // TODO: Repeat these tests for values:
+        // `undefined`, `[null, null]` & `[Date, Date]`
         describe('Tab order', () => {
           describe('when menu is closed', () => {
             const tabStops = expectedTabStopLabels['closed'];
diff --git a/packages/date-picker/src/DateRangePicker/utils/getInitialHighlight/index.ts b/packages/date-picker/src/DateRangePicker/utils/getInitialHighlight/index.ts
new file mode 100644
index 0000000000..dadb7ef97e
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/utils/getInitialHighlight/index.ts
@@ -0,0 +1,19 @@
+import { DateRangeType } from '../../../types';
+import { isSameUTCMonth } from '../../../utils';
+
+export const getInitialHighlight = (
+  value: DateRangeType | undefined,
+  today: Date,
+  month: Date,
+): Date => {
+  if (value) {
+    const [start, end] = value;
+    // Could use ternary, but that's hard to read
+    if (start) return start;
+    if (end) return end;
+    if (isSameUTCMonth(today, month)) return today;
+    return month;
+  }
+
+  return today;
+};

From 266cb38d83f05e73d3fd077e6b46492d5f73728b Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Tue, 17 Oct 2023 10:43:30 -0400
Subject: [PATCH 241/351] fix isEqual import

---
 .../date-picker/src/DateInput/DateInputBox/DateInputBox.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
index d27247dcfc..b54c76725f 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
@@ -4,7 +4,7 @@ import React, {
   FocusEventHandler,
 } from 'react';
 import { isSameDay } from 'date-fns';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';

From b543241c8629e578f33a6d3c5dc39b07c946eeba Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Tue, 17 Oct 2023 11:01:36 -0400
Subject: [PATCH 242/351] LG-3677: Date Picker date selection on enter/space
 (#2015)

* add keyup on calendar cell

* add tests

* more tests

* remove console log

* remove comment and swap key for code

* switch to key

* update test, all test are failing

* fix imports
---
 .../CalendarCell/CalendarCell.spec.tsx        | 28 +++++++++++-
 .../Calendar/CalendarCell/CalendarCell.tsx    | 18 +++++++-
 .../CalendarCell/CalendarCell.types.ts        |  6 ++-
 .../src/DatePicker/DatePicker.spec.tsx        | 43 +++++++++++++++++++
 packages/lib/src/index.ts                     |  2 +-
 .../validate/src/dependencies/utils/index.ts  |  2 +-
 6 files changed, 93 insertions(+), 6 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
index 2206184f97..9aab52639b 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
@@ -39,7 +39,7 @@ describe('packages/date-picker/shared/calendar-cell', () => {
     expect(gridcell).toHaveAttribute('aria-disabled', 'true');
   });
 
-  test('receives click handlers', () => {
+  test('triggers click handler on click', () => {
     const clickHandler = jest.fn();
     const { queryByRole } = render(
       <TestCellWrapper>
@@ -51,6 +51,32 @@ describe('packages/date-picker/shared/calendar-cell', () => {
     expect(clickHandler).toHaveBeenCalled();
   });
 
+  test('triggers click handler on enter', () => {
+    const clickHandler = jest.fn();
+    const { queryByRole } = render(
+      <TestCellWrapper>
+        <CalendarCell aria-label="" onClick={clickHandler} />
+      </TestCellWrapper>,
+    );
+    const gridcell = queryByRole('gridcell');
+    gridcell!.focus();
+    userEvent.keyboard('[Enter]');
+    expect(clickHandler).toHaveBeenCalled();
+  });
+
+  test('triggers click handler on space', () => {
+    const clickHandler = jest.fn();
+    const { queryByRole } = render(
+      <TestCellWrapper>
+        <CalendarCell aria-label="" onClick={clickHandler} />
+      </TestCellWrapper>,
+    );
+    const gridcell = queryByRole('gridcell');
+    gridcell!.focus();
+    userEvent.keyboard('[Space]');
+    expect(clickHandler).toHaveBeenCalled();
+  });
+
   test('Does not fire click handler when disabled', () => {
     const clickHandler = jest.fn();
     const { queryByRole } = render(
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
index 03b4d31466..5ffbac0eab 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -1,8 +1,13 @@
-import React, { FocusEventHandler, MouseEventHandler } from 'react';
+import React, {
+  FocusEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+} from 'react';
 
 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 {
   calendarCellCurrentStyles,
@@ -56,7 +61,15 @@ export const CalendarCell = React.forwardRef<
 
     const handleClick: MouseEventHandler<HTMLTableCellElement> = e => {
       if (!isDisabled) {
-        onClick?.(e);
+        (onClick as MouseEventHandler<HTMLTableCellElement>)?.(e);
+      }
+    };
+
+    // td does not trigger `onClick` on enter/space so we have to listen on key up
+    const handleKeyUp: KeyboardEventHandler<HTMLTableCellElement> = e => {
+      if (!isDisabled && (e.key === keyMap.Enter || e.key === keyMap.Space)) {
+        (onClick as KeyboardEventHandler<HTMLTableCellElement>)?.(e);
+        // TODO: add focus back to input
       }
     };
 
@@ -90,6 +103,7 @@ export const CalendarCell = React.forwardRef<
           className,
         )}
         onClick={handleClick}
+        onKeyUp={handleKeyUp}
         onFocus={handleFocus}
         {...rest}
       >
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
index 6293805716..2861e33731 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
@@ -16,7 +16,7 @@ export type CalendarCellRangeState =
   (typeof CalendarCellRangeState)[keyof typeof CalendarCellRangeState];
 
 export interface CalendarCellProps
-  extends React.HTMLProps<HTMLTableCellElement> {
+  extends Omit<React.HTMLProps<HTMLTableCellElement>, 'onClick'> {
   /** The label for the calendar cell */
   ['aria-label']: string;
 
@@ -38,4 +38,8 @@ export interface CalendarCellProps
    * This is used to programmatically set highlight when using keyboard navigation
    */
   isHighlighted?: boolean;
+
+  onClick?:
+    | React.MouseEventHandler<HTMLTableCellElement>
+    | React.KeyboardEventHandler<HTMLTableCellElement>;
 }
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 7ebf4a7a37..423793cc96 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -332,6 +332,9 @@ describe('packages/date-picker', () => {
           userEvent.click(Jan);
           expect(calendarGrid).toHaveAttribute('aria-label', 'January 2023');
         });
+        test.todo(
+          'making a selection with enter does not close the datePicker menu',
+        );
       });
 
       describe('Year select menu', () => {
@@ -594,6 +597,46 @@ describe('packages/date-picker', () => {
         });
       });
 
+      describe('Space key', () => {
+        test('opens menu if calendar button is focused', () => {
+          const { getMenuElements } = renderDatePicker();
+          tabNTimes(3);
+          userEvent.keyboard('{space}');
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).toBeInTheDocument();
+        });
+
+        test('if month/year select is focused, opens the select menu', async () => {
+          const { openMenu, findAllByRole } = renderDatePicker();
+          const { monthSelect } = openMenu();
+          tabNTimes(6);
+          userEvent.keyboard('{space}');
+          expect(monthSelect).toHaveFocus();
+          const options = await findAllByRole('option');
+          expect(options.length).toBeGreaterThan(0);
+        });
+
+        test('if a cell is focused, fires a change handler', () => {
+          const onChange = jest.fn();
+          const { openMenu } = renderDatePicker({ onChange });
+          const { todayCell } = openMenu();
+          tabNTimes(4);
+          expect(todayCell).toHaveFocus();
+          userEvent.type(todayCell!, '{space}');
+          expect(onChange).toHaveBeenCalled();
+        });
+
+        test('if a cell is focused, closes the menu', async () => {
+          const { openMenu } = renderDatePicker();
+          const { todayCell, menuContainerEl } = openMenu();
+          tabNTimes(4);
+          userEvent.keyboard('{space}');
+          userEvent.type(todayCell!, '{space}');
+          await waitForElementToBeRemoved(menuContainerEl);
+          expect(menuContainerEl).not.toBeInTheDocument();
+        });
+      });
+
       describe('Escape key', () => {
         test('closes the menu', async () => {
           const { openMenu } = renderDatePicker();
diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
index b8ec7f4953..3f90d5c1ac 100644
--- a/packages/lib/src/index.ts
+++ b/packages/lib/src/index.ts
@@ -122,7 +122,7 @@ export const keyMap = {
   Delete: 'Delete',
   Enter: 'Enter',
   Escape: 'Escape',
-  Space: 'Space',
+  Space: ' ',
   Tab: 'Tab',
 } as const;
 
diff --git a/tools/validate/src/dependencies/utils/index.ts b/tools/validate/src/dependencies/utils/index.ts
index 6019741d9b..3c434496b4 100644
--- a/tools/validate/src/dependencies/utils/index.ts
+++ b/tools/validate/src/dependencies/utils/index.ts
@@ -2,7 +2,7 @@
 import chalk from 'chalk';
 import depcheck from 'depcheck';
 import { readFileSync, writeFileSync } from 'fs-extra';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 import path from 'path';
 
 import { ignoreFilePatterns, ignoreMatches } from '../config';

From a564ce0ef203bb69ede34062bafd5bb739f9e191 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Tue, 17 Oct 2023 13:26:23 -0400
Subject: [PATCH 243/351] update dark mode calendar cell hover color

---
 .../src/Calendar/CalendarCell/CalendarCell.styles.ts            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
index 07b70a4498..efa8e2606d 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
@@ -260,7 +260,7 @@ export const calendarCellHoverStyles: ThemedStateStyles = {
         color: ${palette.white};
 
         & > .${indicatorClassName} {
-          background-color: ${palette.gray.dark3};
+          background-color: ${palette.gray.dark2};
         }
       }
     `,

From 8c0b8d8917d4d55fe130ea9e3a1e9d02ceae2a1b Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Tue, 17 Oct 2023 14:58:26 -0400
Subject: [PATCH 244/351] add a check for tab presses inside
 handleCalendarKeyDown

---
 .../src/DatePicker/DatePickerMenu/DatePickerMenu.tsx       | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 819c1d42b7..3f56b22663 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -140,6 +140,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       // since focus-trap-react focuses the first element immediately on mount
       if (e.key === keyMap.Tab) {
         const currentFocus = document.activeElement;
+
         const highlightKey = highlight?.toISOString();
         const highlightedCellElement = highlightKey
           ? cellRefs(highlightKey)?.current
@@ -188,6 +189,11 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
           handleValidation?.(value);
           break;
 
+        // The isInRange check below prevents tab presses from propagating up so we add a switch case for tab presses where we can then call handleWrapperTabKeyPress which will handle trapping focus
+        case keyMap.Tab:
+          handleWrapperTabKeyPress(e);
+          break;
+
         default:
           break;
       }
@@ -195,7 +201,6 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       // if nextHighlight is in range
       if (isInRange(nextHighlight)) {
         updateHighlight(nextHighlight);
-
         // Prevent the parent keydown handler from being called
         e.stopPropagation();
       }

From 0caaa36d79e8b5f8ce22cc8fb1a45ce2dbe17503 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 17 Oct 2023 15:42:06 -0400
Subject: [PATCH 245/351] use data-testid instead of data-lg

---
 .../CalendarButton/CalendarButton.tsx         |  3 +--
 .../DateInputSegment/DateInputSegment.tsx     |  4 +---
 .../DateRangeMenuFooter.tsx                   |  5 ++++-
 .../QuickRangeButton/QuickRangeButton.tsx     |  2 +-
 .../QuickSelectionMenu/QuickSelectionMenu.tsx |  2 +-
 .../DateRangePicker.testutils.tsx             | 19 ++++++++++++++++---
 6 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx b/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
index 6580c732c4..d784b16ec9 100644
--- a/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
+++ b/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
@@ -6,7 +6,6 @@ import IconButton, { BaseIconButtonProps } from '@leafygreen-ui/icon-button';
 
 import { iconButtonStyles } from './CalendarButton.styles';
 
-const lgid = 'date-picker_calendar-button';
 /**
  * The icon button on the right of the DatePicker form field
  */
@@ -20,7 +19,7 @@ export const CalendarButton = forwardRef<
       aria-label="Open calendar menu"
       type="button"
       className={cx(iconButtonStyles, className)}
-      data-lg={lgid}
+      data-testid="lg-date_picker-input-calendar_button"
       {...rest}
     >
       <Icon glyph="Calendar" />
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
index 1e8f6248ad..26e0f5e3f9 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -18,8 +18,6 @@ import {
 } from './DateInputSegment.styles';
 import { DateInputSegmentProps } from './DateInputSegment.types';
 
-const lgid = 'date-picker_input-segment';
-
 /**
  * Renders a single date segment with the
  * appropriate character padding/truncation.
@@ -67,7 +65,7 @@ export const DateInputSegment = React.forwardRef<
         onChange={onChange}
         onBlur={onBlur}
         disabled={disabled}
-        data-lg={lgid}
+        data-testid="lg-date_picker_input-segment"
         className={cx(
           baseStyles,
           fontSizeStyles[baseFontSize],
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
index 09c1a1af8b..12d958e3db 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
@@ -25,7 +25,7 @@ export const DateRangeMenuFooter = forwardRef<
       <div
         ref={fwdRef}
         className={footerStyles}
-        data-lg="date-range_menu_footer"
+        data-testid="lg-date_picker-menu-footer"
       >
         <Link
           ref={buttonRefs('clear')}
@@ -33,6 +33,7 @@ export const DateRangeMenuFooter = forwardRef<
           className={clearButtonStyles}
           aria-label="Clear selection"
           onClick={onClear}
+          data-testid="lg-date_picker-menu-footer_button"
         >
           Clear
         </Link>
@@ -42,6 +43,7 @@ export const DateRangeMenuFooter = forwardRef<
             size={Size.XSmall}
             aria-label="Cancel selection"
             onClick={onCancel}
+            data-testid="lg-date_picker-menu-footer_button"
           >
             Cancel
           </Button>
@@ -51,6 +53,7 @@ export const DateRangeMenuFooter = forwardRef<
             variant={Variant.Primary}
             aria-label="Apply selection"
             onClick={onApply}
+            data-testid="lg-date_picker-menu-footer_button"
           >
             Apply
           </Button>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
index d12b4bd15c..f5508d68f8 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
@@ -23,7 +23,7 @@ export const QuickRangeButton = forwardRef<
   return (
     <button
       ref={fwdRef}
-      data-lg="date-range_menu_quick-range-button"
+      data-testid="lg-date_picker-menu-quick-range-button"
       className={cx(
         baseQuickRangeButtonStyles,
         baseQuickRangeButtonThemeStyles[theme],
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
index 544a6962b4..450969d4dc 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
@@ -53,7 +53,7 @@ export const QuickSelectionMenu = forwardRef<
         quickSelectMenuStyles,
         quickSelectMenuThemeStyles[theme],
       )}
-      data-lg="date-range_menu_quick-select"
+      data-testid="lg-date_picker-menu-quick_select"
     >
       <div className={quickSelectMenuMonthSelectContainerStyles}>
         <Select
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
index 54f65116d8..0d5ce6f3cd 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
@@ -15,6 +15,7 @@ export interface RenderDateRangePickerResult extends RenderResult {
   calendarButton: HTMLButtonElement;
   getMenuElements: () => RenderMenuResult;
   openMenu: () => RenderMenuResult;
+  rerenderWithProps: () => void;
 }
 
 export interface RenderMenuResult {
@@ -49,6 +50,17 @@ export const renderDateRangePicker = (
     />,
   );
 
+  function rerenderWithProps(newProps?: Partial<DateRangePickerProps>) {
+    return result?.rerender(
+      <DateRangePicker
+        data-testid="lg-date-picker"
+        {...defaultProps}
+        {...props}
+        {...newProps}
+      />,
+    );
+  }
+
   const formField = result.getByTestId('lg-date-picker');
   const inputContainer = result.getByRole('combobox');
 
@@ -87,7 +99,7 @@ export const renderDateRangePicker = (
 
     // Footer
     const menuFooter = menuContainerEl?.querySelector(
-      '[data-lg="date-range_menu_footer"]',
+      '[data-testid="lg-date_picker-menu-footer"]',
     ) as HTMLDivElement | null;
     const clearButton = result.queryByLabelText(
       'Clear selection',
@@ -101,7 +113,7 @@ export const renderDateRangePicker = (
 
     // Quick select menu
     const quickSelectMenu = menuContainerEl?.querySelector(
-      '[data-lg="date-range_menu_quick-select"]',
+      '[data-testid="lg-date_picker-menu-quick_select"]',
     ) as HTMLDivElement | null;
     const monthSelect = result.queryByLabelText(
       'Select month',
@@ -112,7 +124,7 @@ export const renderDateRangePicker = (
 
     const quickRangeButtons = Array.from(
       quickSelectMenu?.querySelectorAll(
-        '[data-lg="date-range_menu_quick-range-button"]',
+        '[data-testid="lg-date_picker-menu-quick-range-button"]',
       ) || [null],
     ) as Array<HTMLButtonElement | null>;
 
@@ -141,6 +153,7 @@ export const renderDateRangePicker = (
 
   return {
     ...result,
+    rerenderWithProps,
     formField,
     inputContainer,
     inputElements,

From 57be86d794449dc37961e36ee7bbcf9e97b57f37 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 17 Oct 2023 15:42:09 -0400
Subject: [PATCH 246/351] Speeds up tab tests

---
 .../DateRangePicker/DateRangePicker.spec.tsx  | 131 ++++++++++++------
 1 file changed, 87 insertions(+), 44 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index c0c6b10008..bf14196b95 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -712,20 +712,13 @@ describe('packages/date-picker/date-range-picker', () => {
         describe('Tab order', () => {
           describe('when menu is closed', () => {
             const tabStops = expectedTabStopLabels['closed'];
-            const testCases: Array<[number, (typeof tabStops)[number]]> =
-              tabStops.map((stop, n) => [n, stop]);
 
-            describe.each(testCases)('Tab %i times', (n, label) => {
-              let renderResult: RenderDateRangePickerResult;
-              let element: HTMLElement | null;
+            test('Tab N times focuses correct element', () => {
+              const renderResult = renderDateRangePicker();
 
-              beforeEach(() => {
-                renderResult = renderDateRangePicker();
-                element = getTabStopElementMap(renderResult)[label];
-                tabNTimes(n);
-              });
+              for (const label of tabStops) {
+                const element = getTabStopElementMap(renderResult)[label];
 
-              test(`focus on: ${label}`, () => {
                 if (element !== null) {
                   expect(element).toHaveFocus();
                 } else {
@@ -735,55 +728,105 @@ describe('packages/date-picker/date-range-picker', () => {
                     ),
                   ).toBeFalsy();
                 }
-              });
+
+                userEvent.tab();
+              }
             });
+
+            // const testCases: Array<[number, (typeof tabStops)[number]]> = tabStops.map((stop, n) => [n, stop]);
+            // describe.each(testCases)('Tab %i times', (n, label) => {
+            //   let renderResult: RenderDateRangePickerResult;
+            //   let element: HTMLElement | null;
+
+            //   beforeEach(() => {
+            //     renderResult = renderDateRangePicker();
+            //     element = getTabStopElementMap(renderResult)[label];
+            //     tabNTimes(n);
+            //   });
+
+            //   test(`focus on: ${label}`, () => {
+            //     if (element !== null) {
+            //       expect(element).toHaveFocus();
+            //     } else {
+            //       expect(
+            //         renderResult.inputContainer.contains(
+            //           document.activeElement,
+            //         ),
+            //       ).toBeFalsy();
+            //     }
+            //   });
+            // });
           });
 
           describe('when basic menu is open', () => {
-            const tabStops = expectedTabStopLabels['basic'];
-            const testCases: Array<[number, (typeof tabStops)[number]]> =
-              tabStops.map((stop, n) => [n, stop]);
-
-            describe.each(testCases)(`Tab %i times`, (n, label) => {
-              let renderResult: RenderDateRangePickerResult;
-              let element: HTMLElement | null;
-
-              beforeEach(() => {
-                renderResult = renderDateRangePicker({
-                  showQuickSelection: false,
-                });
-                renderResult.openMenu();
-                element = getTabStopElementMap(renderResult)[label];
-                tabNTimes(n);
+            const tabStops = expectedTabStopLabels['basic']; // array of label strings
+
+            test(`Tab N times focus on correct element`, () => {
+              const renderResult = renderDateRangePicker({
+                showQuickSelection: false,
               });
+              renderResult.openMenu();
 
-              test(`focus on: ${label}`, () => {
+              for (const label of tabStops) {
+                const element = getTabStopElementMap(renderResult)[label];
                 expect(element).toHaveFocus();
-              });
+                userEvent.tab();
+              }
             });
+            // const testCases: Array<[number, (typeof tabStops)[number]]> = tabStops.map((stop, n) => [n, stop]);
+
+            // describe.each(testCases)(`Tab %i times`, (n, label) => {
+            //   let renderResult: RenderDateRangePickerResult;
+            //   let element: HTMLElement | null;
+
+            //   beforeEach(() => {
+            //     renderResult = renderDateRangePicker({
+            //       showQuickSelection: false,
+            //     });
+            //     renderResult.openMenu();
+            //     element = getTabStopElementMap(renderResult)[label];
+            //     tabNTimes(n);
+            //   });
+
+            //   test(`focus on: ${label}`, () => {
+            //     expect(element).toHaveFocus();
+            //   });
+            // });
           });
 
           describe('when quick-select menu is open', () => {
             const tabStops = expectedTabStopLabels['quick-select'];
-            const testCases: Array<[number, (typeof tabStops)[number]]> =
-              tabStops.map((stop, n) => [n, stop]);
-
-            describe.each(testCases)(`Tab %i times`, (n, label) => {
-              let element: HTMLElement | null;
-
-              beforeEach(() => {
-                const renderResult = renderDateRangePicker({
-                  showQuickSelection: true,
-                });
-                renderResult.openMenu();
-                element = getTabStopElementMap(renderResult)[label];
-                tabNTimes(n);
+
+            test(`Tab N times focuses the correct element`, () => {
+              const renderResult = renderDateRangePicker({
+                showQuickSelection: true,
               });
+              renderResult.openMenu();
 
-              test(`focus on: ${label}`, () => {
+              for (const label of tabStops) {
+                const element = getTabStopElementMap(renderResult)[label];
                 expect(element).toHaveFocus();
-              });
+                userEvent.tab();
+              }
             });
+
+            // const testCases: Array<[number, (typeof tabStops)[number]]> = tabStops.map((stop, n) => [n, stop]);
+            // describe.each(testCases)(`Tab %i times`, (n, label) => {
+            //   let element: HTMLElement | null;
+
+            //   beforeEach(() => {
+            //     const renderResult = renderDateRangePicker({
+            //       showQuickSelection: true,
+            //     });
+            //     renderResult.openMenu();
+            //     element = getTabStopElementMap(renderResult)[label];
+            //     tabNTimes(n);
+            //   });
+
+            //   test(`focus on: ${label}`, () => {
+            //     expect(element).toHaveFocus();
+            //   });
+            // });
           });
         });
       });

From 5f39eacbcc1e5d04e208d3805a54757e0b818a1c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 17 Oct 2023 15:56:54 -0400
Subject: [PATCH 247/351] fixes some tests

---
 .../CalendarCell/CalendarCell.spec.tsx        |  2 +-
 .../DateInputSegment.spec.tsx                 | 42 +++++--------------
 .../DateRangePicker/DateRangePicker.spec.tsx  |  6 +--
 3 files changed, 14 insertions(+), 36 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
index 9aab52639b..123b27bfb5 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
@@ -73,7 +73,7 @@ describe('packages/date-picker/shared/calendar-cell', () => {
     );
     const gridcell = queryByRole('gridcell');
     gridcell!.focus();
-    userEvent.keyboard('[Space]');
+    userEvent.keyboard('{space}');
     expect(clickHandler).toHaveBeenCalled();
   });
 
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
index 50b09e9b35..11e270392a 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
+++ b/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
@@ -9,8 +9,8 @@ import { DateInputSegment, type DateInputSegmentProps } from '.';
 const handler = jest.fn();
 
 const renderSegment = (props: DateInputSegmentProps) => {
-  const result = render(<DateInputSegment data-testid="testid" {...props} />);
-  const input = result.getByTestId('testid');
+  const result = render(<DateInputSegment {...props} />);
+  const input = result.getByTestId('lg-date_picker_input-segment');
   return {
     ...result,
     input: input as HTMLInputElement,
@@ -59,9 +59,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
           value: '12',
         });
 
-        rerender(
-          <DateInputSegment segment="day" data-testid="testid" value={'08'} />,
-        );
+        rerender(<DateInputSegment segment="day" value={'08'} />);
         expect(input.value).toBe('08');
       });
     });
@@ -82,13 +80,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
           segment: 'year',
           value: '2023',
         });
-        rerender(
-          <DateInputSegment
-            segment="year"
-            data-testid="testid"
-            value={'1993'}
-          />,
-        );
+        rerender(<DateInputSegment segment="year" value={'1993'} />);
         expect(input.value).toBe('1993');
       });
     });
@@ -97,13 +89,9 @@ describe('packages/date-picker/shared/date-input-segment', () => {
   describe('Typing', () => {
     test('calls the change handler', () => {
       const result = render(
-        <DateInputSegment
-          segment="day"
-          data-testid="testid"
-          onChange={handler}
-        />,
+        <DateInputSegment segment="day" onChange={handler} />,
       );
-      const input = result.getByTestId('testid');
+      const input = result.getByTestId('lg-date_picker_input-segment');
       userEvent.type(input, '12');
       expect(handler).toHaveBeenCalledWith(eventContainingTargetValue('12'));
     });
@@ -116,28 +104,18 @@ describe('packages/date-picker/shared/date-input-segment', () => {
   describe.skip('Arrow Keys', () => {
     test('ArrowUp calls handler with +1', () => {
       const result = render(
-        <DateInputSegment
-          segment="day"
-          data-testid="testid"
-          onChange={handler}
-          value={'08'}
-        />,
+        <DateInputSegment segment="day" onChange={handler} value={'08'} />,
       );
-      const input = result.getByTestId('testid');
+      const input = result.getByTestId('lg-date_picker_input-segment');
       userEvent.type(input, '{arrowup}');
       expect(handler).toHaveBeenCalledWith('09');
     });
 
     test('ArrowDown calls handler with -1', () => {
       const result = render(
-        <DateInputSegment
-          segment="day"
-          data-testid="testid"
-          onChange={handler}
-          value={'08'}
-        />,
+        <DateInputSegment segment="day" onChange={handler} value={'08'} />,
       );
-      const input = result.getByTestId('testid');
+      const input = result.getByTestId('lg-date_picker_input-segment');
       userEvent.type(input, '{arrowdown}');
       expect(handler).toHaveBeenCalledWith('07');
     });
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index bf14196b95..639bd8ef8e 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -713,7 +713,7 @@ describe('packages/date-picker/date-range-picker', () => {
           describe('when menu is closed', () => {
             const tabStops = expectedTabStopLabels['closed'];
 
-            test('Tab N times focuses correct element', () => {
+            test('Tab order proceeds as expected', () => {
               const renderResult = renderDateRangePicker();
 
               for (const label of tabStops) {
@@ -761,7 +761,7 @@ describe('packages/date-picker/date-range-picker', () => {
           describe('when basic menu is open', () => {
             const tabStops = expectedTabStopLabels['basic']; // array of label strings
 
-            test(`Tab N times focus on correct element`, () => {
+            test(`Tab order proceeds as expected`, () => {
               const renderResult = renderDateRangePicker({
                 showQuickSelection: false,
               });
@@ -797,7 +797,7 @@ describe('packages/date-picker/date-range-picker', () => {
           describe('when quick-select menu is open', () => {
             const tabStops = expectedTabStopLabels['quick-select'];
 
-            test(`Tab N times focuses the correct element`, () => {
+            test(`Tab order proceeds as expected`, () => {
               const renderResult = renderDateRangePicker({
                 showQuickSelection: true,
               });

From f53b4b9af23483b3839a20b6f199611118b17300 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Wed, 18 Oct 2023 12:25:19 -0400
Subject: [PATCH 248/351] LG-3696: dp menu toggle (#2032)

* toggle the menu

* add tests

* update test name
---
 .../date-picker/src/DatePicker/DatePicker.spec.tsx | 14 +++++++++++++-
 .../DatePicker/DatePickerInput/DatePickerInput.tsx |  6 ++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 423793cc96..1467101d18 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -199,11 +199,23 @@ describe('packages/date-picker', () => {
       });
 
       describe('Clicking the Calendar button', () => {
-        test('opens the menu', () => {
+        test('toggles the menu open and close', async () => {
           const { calendarButton, getMenuElements } = renderDatePicker();
           userEvent.click(calendarButton);
           const { menuContainerEl } = getMenuElements();
           expect(menuContainerEl).toBeInTheDocument();
+          userEvent.click(calendarButton);
+          await waitFor(() => expect(menuContainerEl).not.toBeInTheDocument());
+        });
+
+        test('closes the menu when "initialOpen: true"', async () => {
+          const { calendarButton, getMenuElements } = renderDatePicker({
+            initialOpen: true,
+          });
+          const { menuContainerEl } = getMenuElements();
+          await waitFor(() => expect(menuContainerEl).toBeInTheDocument());
+          userEvent.click(calendarButton);
+          await waitFor(() => expect(menuContainerEl).not.toBeInTheDocument());
         });
       });
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 6d68f29d98..ebf8a426b2 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -50,8 +50,10 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       }
     };
 
-    const handleIconButtonClick: MouseEventHandler<HTMLButtonElement> = () => {
-      setOpen(true);
+    const handleIconButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
+      // Prevent the parent click handler from being called since clicks on the parent always opens the dropdown
+      e.stopPropagation();
+      setOpen(o => !o);
     };
 
     /** Called on any keydown within the input element */

From d551f8e638be90bc3e166666cd7872e07b617069 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Wed, 18 Oct 2023 13:38:39 -0400
Subject: [PATCH 249/351] remove pointer-events none from disabled calendar
 cell

---
 .../src/Calendar/CalendarCell/CalendarCell.styles.ts            | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
index efa8e2606d..421b497292 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
@@ -65,7 +65,6 @@ export const calendarCellStateStyles: ThemedStateStyles = {
     [CalendarCellState.Disabled]: css`
       color: ${palette.gray.light1};
       cursor: not-allowed;
-      pointer-events: none;
     `,
     [CalendarCellState.Active]: _baseActiveCellStyles[Theme.Light],
   },
@@ -76,7 +75,6 @@ export const calendarCellStateStyles: ThemedStateStyles = {
     [CalendarCellState.Disabled]: css`
       color: ${palette.gray.dark1};
       cursor: not-allowed;
-      pointer-events: none;
     `,
     [CalendarCellState.Active]: _baseActiveCellStyles[Theme.Dark],
   },

From 1abb26beeb7913ee6af3e37a78c10791709a03a0 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 18 Oct 2023 17:23:05 -0400
Subject: [PATCH 250/351] rearchitect range picker with context

---
 .../DateRangeComponent/DateRangeComponent.tsx |  52 +-
 .../DateRangeComponent.types.ts               |  16 +-
 .../DateRangeContext/DateRangeContext.tsx     |  72 +++
 .../DateRangeContext.types.ts                 |  36 ++
 .../DateRangePicker/DateRangeContext/index.ts |   1 +
 .../useDateRangeComponentRefs.tsx             |  36 ++
 .../DateRangeInput/DateRangeInput.tsx         |  54 +-
 .../DateRangeInput/DateRangeInput.types.ts    |   9 +-
 .../DateRangeMenu/DateRangeMenu.tsx           | 116 ++--
 .../DateRangeMenu/DateRangeMenu.types.ts      |  11 +-
 .../DateRangeMenuCalendars.tsx                | 503 +++++++++---------
 .../DateRangeMenuCalendars.types.ts           |  11 +-
 .../DateRangeMenuContext.tsx                  |  31 --
 .../DateRangeMenuProvider.tsx                 |  40 --
 .../DateRangeMenuContext/index.ts             |   9 -
 .../DateRangeMenuFooter.tsx                   |  87 ++-
 .../QuickSelectionMenu/QuickSelectionMenu.tsx |  35 +-
 .../src/DateRangePicker/DateRangePicker.tsx   |  19 +-
 18 files changed, 566 insertions(+), 572 deletions(-)
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.types.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeContext/index.ts
 create mode 100644 packages/date-picker/src/DateRangePicker/DateRangeContext/useDateRangeComponentRefs.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/index.ts

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
index 8bcc7292dd..f2df5ddd65 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
@@ -1,10 +1,9 @@
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef } from 'react';
 
-import { useBackdropClick, useForwardedRef } from '@leafygreen-ui/hooks';
+import { useBackdropClick } from '@leafygreen-ui/hooks';
 
 import { useDatePickerContext } from '../../DatePickerContext';
-import { DateRangeType } from '../../types';
-import { isSameUTCRange } from '../../utils';
+import { useDateRangeContext } from '../DateRangeContext';
 import { DateRangeInput } from '../DateRangeInput';
 import { DateRangeMenu } from '../DateRangeMenu';
 
@@ -16,8 +15,6 @@ export const DateRangeComponent = forwardRef<
 >(
   (
     {
-      value,
-      setValue,
       handleValidation,
       onCancel,
       onClear,
@@ -26,52 +23,21 @@ export const DateRangeComponent = forwardRef<
     }: DateRangeComponentProps,
     fwdRef,
   ) => {
-    const { isOpen, setOpen, isDirty, setIsDirty, menuId } =
-      useDatePickerContext();
-    const closeMenu = () => setOpen(false);
+    const { isOpen, setOpen, menuId } = useDatePickerContext();
 
-    const formFieldRef = useForwardedRef(fwdRef, null);
-    const menuRef = useRef<HTMLDivElement>(null);
+    const {
+      refs: { formFieldRef, menuRef },
+    } = useDateRangeContext();
 
-    /** setValue with possible side effects */
-    const updateValue = (newVal?: DateRangeType) => {
-      setValue(newVal);
-    };
-
-    useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
-
-    /** Called when the input's start or end value has changed */
-    const handleInputValueChange = (newRange?: DateRangeType) => {
-      if (!isSameUTCRange(value, newRange)) {
-        // When the value changes via the input element,
-        // we only trigger validation if the component is dirty
-        if (isDirty) {
-          handleValidation?.(newRange);
-        }
-        updateValue(newRange);
-      }
-    };
-
-    /** Called when any calendar cell is clicked */
-    const handleCalendarValueChange = (newRange?: DateRangeType) => {
-      // TODO: more logic here
-      updateValue(newRange);
-    };
+    useBackdropClick(() => setOpen(false), [formFieldRef, menuRef], isOpen);
 
     return (
       <>
-        <DateRangeInput
-          value={value}
-          setValue={handleInputValueChange}
-          ref={formFieldRef}
-          {...rest}
-        />
+        <DateRangeInput ref={formFieldRef} {...rest} />
         <DateRangeMenu
           ref={menuRef}
           refEl={formFieldRef}
           id={menuId}
-          value={value}
-          setValue={handleCalendarValueChange}
           onCancel={onCancel}
           onClear={onClear}
           showQuickSelection={showQuickSelection}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
index 036ba75574..7923477d99 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
@@ -1,12 +1,14 @@
-import { contextPropNames } from '../../DatePickerContext';
-import { useControlledValue } from '../../hooks/useControlledValue';
-import { DateRangeType } from '../../types';
+import { DatePickerContextProps } from '../../DatePickerContext';
+import { DateRangeContextProps } from '../DateRangeContext/DateRangeContext.types';
 import { DateRangePickerProps } from '../DateRangePicker.types';
 
+/**
+ * We pass into the component anything in
+ * DateRangePickerProps that is _not_ in
+ * DatePickerContext or DateRangeContext
+ */
 export interface DateRangeComponentProps
   extends Omit<
     DateRangePickerProps,
-    (typeof contextPropNames)[number] | 'onRangeChange'
-  > {
-  setValue: ReturnType<typeof useControlledValue<DateRangeType>>['setValue'];
-}
+    keyof (DatePickerContextProps & DateRangeContextProps)
+  > {}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx b/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx
new file mode 100644
index 0000000000..5692709873
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx
@@ -0,0 +1,72 @@
+import React, {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+
+import { DateType } from '../../types';
+import { addMonthsUTC, setToUTCMidnight } from '../../utils';
+import { getInitialHighlight } from '../utils/getInitialHighlight';
+import { getInitialMonth } from '../utils/getInitialMonth';
+
+import {
+  DateRangeContextProps,
+  DateRangeProviderProps,
+} from './DateRangeContext.types';
+import { useDateRangeComponentRefs } from './useDateRangeComponentRefs';
+
+/** A context for DateRange picker */
+const DateRangeContext = createContext<DateRangeContextProps>(
+  {} as DateRangeContextProps,
+);
+
+/** A hook to access DateRange picker context */
+export const useDateRangeContext = () => useContext(DateRangeContext);
+
+/**
+ * A provider for DateRange picker.
+ */
+export const DateRangeProvider = ({
+  children,
+  value,
+  setValue,
+  rootRef,
+}: PropsWithChildren<DateRangeProviderProps>) => {
+  const refs = useDateRangeComponentRefs(rootRef);
+  const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
+  const [month, setMonth] = useState<Date>(getInitialMonth(value, today));
+  const nextMonth = useMemo(() => addMonthsUTC(month, 1), [month]);
+
+  // Keep track of the element the user is highlighting with the keyboard
+  const [highlight, setHighlight] = useState<DateType>(
+    getInitialHighlight(value, today, month),
+  );
+
+  const getHighlightedCell = () => {
+    const highlightKey = highlight?.toISOString();
+    return highlightKey
+      ? refs.calendarCellRefs(highlightKey)?.current
+      : undefined;
+  };
+
+  return (
+    <DateRangeContext.Provider
+      value={{
+        refs,
+        today,
+        value,
+        setValue,
+        month,
+        nextMonth,
+        setMonth,
+        highlight,
+        setHighlight,
+        getHighlightedCell,
+      }}
+    >
+      {children}
+    </DateRangeContext.Provider>
+  );
+};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.types.ts
new file mode 100644
index 0000000000..634d67a0a6
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.types.ts
@@ -0,0 +1,36 @@
+import { DynamicRefGetter } from '@leafygreen-ui/hooks';
+
+import { SegmentRefs } from '../../hooks/useSegmentRefs';
+import { DateRangeType, DateType } from '../../types';
+
+export interface DateRangeComponentRefs {
+  formFieldRef: React.RefObject<HTMLDivElement>;
+  menuRef: React.RefObject<HTMLDivElement>;
+  startSegmentRefs: SegmentRefs;
+  endSegmentRefs: SegmentRefs;
+  calendarSectionRef: React.RefObject<HTMLDivElement>;
+  chevronRefs: DynamicRefGetter<HTMLButtonElement>;
+  calendarCellRefs: DynamicRefGetter<HTMLTableCellElement>;
+  footerButtonRefs: DynamicRefGetter<HTMLButtonElement>;
+  selectRefs: DynamicRefGetter<HTMLDivElement>;
+  quickRangeButtonRefs: DynamicRefGetter<HTMLButtonElement>;
+}
+
+export interface DateRangeContextProps {
+  refs: DateRangeComponentRefs;
+  today: Date;
+  value: DateRangeType | undefined;
+  setValue: (newVal: DateRangeType | undefined) => void;
+  month: Date;
+  nextMonth: Date;
+  setMonth: React.Dispatch<React.SetStateAction<Date>>;
+  highlight: DateType;
+  setHighlight: React.Dispatch<React.SetStateAction<DateType>>;
+  getHighlightedCell: () => HTMLTableCellElement | null | undefined;
+}
+
+export interface DateRangeProviderProps {
+  rootRef: React.ForwardedRef<HTMLDivElement | null>;
+  value: DateRangeType | undefined;
+  setValue: (newVal: DateRangeType | undefined) => void;
+}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeContext/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeContext/index.ts
new file mode 100644
index 0000000000..fc5c139750
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeContext/index.ts
@@ -0,0 +1 @@
+export { DateRangeProvider, useDateRangeContext } from './DateRangeContext';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeContext/useDateRangeComponentRefs.tsx b/packages/date-picker/src/DateRangePicker/DateRangeContext/useDateRangeComponentRefs.tsx
new file mode 100644
index 0000000000..04ec8f80e8
--- /dev/null
+++ b/packages/date-picker/src/DateRangePicker/DateRangeContext/useDateRangeComponentRefs.tsx
@@ -0,0 +1,36 @@
+import { useRef } from 'react';
+
+import { useDynamicRefs, useForwardedRef } from '@leafygreen-ui/hooks';
+
+import { useSegmentRefs } from '../../hooks/useSegmentRefs';
+
+import { DateRangeComponentRefs } from './DateRangeContext.types';
+
+/** Creates `ref` objects for any & all relevant component elements */
+export const useDateRangeComponentRefs = (
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+): DateRangeComponentRefs => {
+  const formFieldRef = useForwardedRef(forwardedRef, null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const startSegmentRefs = useSegmentRefs();
+  const endSegmentRefs = useSegmentRefs();
+  const calendarSectionRef = useRef<HTMLDivElement>(null);
+  const chevronRefs = useDynamicRefs<HTMLButtonElement>();
+  const calendarCellRefs = useDynamicRefs<HTMLTableCellElement>();
+  const footerButtonRefs = useDynamicRefs<HTMLButtonElement>();
+  const selectRefs = useDynamicRefs<HTMLDivElement>();
+  const quickRangeButtonRefs = useDynamicRefs<HTMLButtonElement>();
+
+  return {
+    formFieldRef,
+    menuRef,
+    startSegmentRefs,
+    endSegmentRefs,
+    calendarSectionRef,
+    chevronRefs,
+    calendarCellRefs,
+    footerButtonRefs,
+    selectRefs,
+    quickRangeButtonRefs,
+  };
+};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index 9e20d65fb6..5563951108 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -10,9 +10,9 @@ import { keyMap } from '@leafygreen-ui/lib';
 import { DateInputBox } from '../../DateInput';
 import { DateFormField } from '../../DateInput/DateFormField';
 import { useDatePickerContext } from '../../DatePickerContext';
-import { useSegmentRefs } from '../../hooks/useSegmentRefs';
-import { DateType } from '../../types';
-import { isElementInputSegment, isZeroLike } from '../../utils';
+import { DateRangeType, DateType } from '../../types';
+import { isElementInputSegment, isSameUTCRange, isZeroLike } from '../../utils';
+import { useDateRangeContext } from '../DateRangeContext';
 import { getRangeSegmentToFocus } from '../utils/getRangeSegmentToFocus';
 import { getRelativeRangeSegment } from '../utils/getRelativeRangeSegment';
 
@@ -22,21 +22,15 @@ import { DateRangeInputProps } from './DateRangeInput.types';
 const EN_DASH = '–';
 
 export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
-  (
-    {
-      value,
-      setValue,
-      handleValidation,
-      onChange,
-      ...rest
-    }: DateRangeInputProps,
-    fwdRef,
-  ) => {
-    const { disabled, formatParts, setOpen, setIsDirty } =
+  ({ handleValidation, onChange, ...rest }: DateRangeInputProps, fwdRef) => {
+    const { disabled, formatParts, setOpen, isDirty, setIsDirty } =
       useDatePickerContext();
 
-    const startSegmentRefs = useSegmentRefs();
-    const endSegmentRefs = useSegmentRefs();
+    const {
+      value,
+      setValue,
+      refs: { startSegmentRefs, endSegmentRefs },
+    } = useDateRangeContext();
 
     /** Called when the input, or any of its children, is clicked */
     const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
@@ -138,14 +132,35 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
       }
     };
 
+    const handleCalendarButtonClick: MouseEventHandler<
+      HTMLButtonElement
+    > = e => {
+      if (!disabled) {
+        e.stopPropagation();
+        setOpen(true);
+      }
+    };
+
+    /** Called when the input's start or end value has changed */
+    const updateValue = (newRange?: DateRangeType) => {
+      if (!isSameUTCRange(value, newRange)) {
+        // When the value changes via the input element,
+        // we only trigger validation if the component is dirty
+        if (isDirty) {
+          handleValidation?.(newRange);
+        }
+        setValue(newRange);
+      }
+    };
+
     const handleStartInputChange = (newStart: DateType) => {
-      const end = value ? value[0] : null;
-      setValue([newStart, end]);
+      const end = value ? value[1] : null;
+      updateValue([newStart, end]);
     };
 
     const handleEndInputChange = (newEnd: DateType) => {
       const start = value ? value[0] : null;
-      setValue([start, newEnd]);
+      updateValue([start, newEnd]);
     };
 
     return (
@@ -154,6 +169,7 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
         onKeyDown={handleKeyDown}
         onInputClick={handleInputClick}
         onBlur={handleInputBlur}
+        onIconButtonClick={handleCalendarButtonClick}
         {...rest}
       >
         <div className={inputWrapperStyles}>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
index 89a314c9f6..97b569ecb6 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
@@ -2,9 +2,10 @@ import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 import { DateRangeComponentProps } from '../DateRangeComponent';
 
+/**
+ * We pass into the Input specific properties of ComponentProps
+ * and any other `div` attributes
+ */
 export interface DateRangeInputProps
-  extends Pick<
-      DateRangeComponentProps,
-      'value' | 'setValue' | 'handleValidation' | 'onChange'
-    >,
+  extends Pick<DateRangeComponentProps, 'handleValidation' | 'onChange'>,
     Omit<HTMLElementProps<'div'>, 'onChange'> {}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index 1e6116e547..619d3cb1c4 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -3,22 +3,15 @@ import React, {
   forwardRef,
   KeyboardEventHandler,
   MouseEventHandler,
-  useMemo,
-  useRef,
-  useState,
 } from 'react';
 
-import { useDynamicRefs } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
-import { useForwardedRef } from '@leafygreen-ui/select/src/utils';
 import { spacing } from '@leafygreen-ui/tokens';
 
 import { MenuWrapper } from '../../Calendar/MenuWrapper';
 import { useDatePickerContext } from '../../DatePickerContext';
-import { DateType } from '../../types';
-import { setToUTCMidnight } from '../../utils';
-import { getInitialHighlight } from '../utils/getInitialHighlight';
-import { getInitialMonth } from '../utils/getInitialMonth';
+import { DateRangeType } from '../../types';
+import { useDateRangeContext } from '../DateRangeContext';
 
 import {
   menuContentStyles,
@@ -26,43 +19,28 @@ import {
 } from './DateRangeMenu.styles';
 import { DateRangeMenuProps } from './DateRangeMenu.types';
 import { DateRangeMenuCalendars } from './DateRangeMenuCalendars';
-import { DateRangeMenuProvider } from './DateRangeMenuContext';
 import { DateRangeMenuFooter } from './DateRangeMenuFooter';
 import { QuickSelectionMenu } from './QuickSelectionMenu';
 
-const lgid = 'date-range_menu';
-
 export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
   (
     {
-      value,
-      setValue,
       showQuickSelection,
       onCancel,
       onClear,
+      handleValidation,
       ...rest
     }: DateRangeMenuProps,
     fwdRef,
   ) => {
-    const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
+    // const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
     const { isOpen, setOpen } = useDatePickerContext();
-    const menuRef = useForwardedRef(fwdRef, null);
-    const calendarSectionRef = useRef<HTMLDivElement>(null);
-    const chevronRefs = useDynamicRefs<HTMLButtonElement>();
-    const calendarCellRefs = useDynamicRefs<HTMLTableCellElement>();
-    const footerButtonRefs = useDynamicRefs<HTMLButtonElement>();
-    const selectRefs = useDynamicRefs<HTMLDivElement>();
-    const quickRangeButtonRefs = useDynamicRefs<HTMLButtonElement>();
-
-    const [month, setMonth] = useState<Date>(getInitialMonth(value, today));
-    // Keep track of the element the user is highlighting with the keyboard
-    const [highlight, setHighlight] = useState<DateType>(
-      getInitialHighlight(value, today, month),
-    );
+    const { value, setValue, getHighlightedCell, refs } = useDateRangeContext();
 
-    const getHighlightedCell = () => {
-      const highlightKey = highlight?.toISOString();
-      return highlightKey ? calendarCellRefs(highlightKey)?.current : undefined;
+    /** Called when any calendar cell is clicked */
+    const updateValue = (newRange?: DateRangeType) => {
+      // TODO: more logic here
+      setValue(newRange);
     };
 
     /** Triggered any time an element in the menu is focused */
@@ -71,8 +49,8 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
       const previousFocus = e.relatedTarget;
 
       const isInitialMenuFocus =
-        menuRef.current?.contains(element) &&
-        !menuRef.current.contains(previousFocus);
+        refs.menuRef.current?.contains(element) &&
+        !refs.menuRef.current.contains(previousFocus);
 
       if (isInitialMenuFocus) {
         const highlightedCell = getHighlightedCell();
@@ -88,10 +66,10 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
         // Focus trap:
         // if focus is on the "Apply" button, move focus to either
         // left chevron or month select menu
-        if (currentFocus === footerButtonRefs('apply').current) {
+        if (currentFocus === refs.footerButtonRefs('apply').current) {
           const elementToFocus = showQuickSelection
-            ? selectRefs('month').current?.querySelector('button')
-            : chevronRefs('left').current;
+            ? refs.selectRefs('month').current?.querySelector('button')
+            : refs.chevronRefs('left').current;
 
           e.preventDefault();
           elementToFocus?.focus();
@@ -101,62 +79,48 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
 
     /** Triggered when the Apply button is clicked */
     const handleApply: MouseEventHandler<HTMLButtonElement> = _ => {
-      setValue(value);
+      updateValue(value);
       setOpen(false);
     };
 
     /** Triggered when the cancel button is clicked */
     const handleCancel: MouseEventHandler<HTMLButtonElement> = e => {
-      setValue(value);
+      updateValue(value);
       setOpen(false);
       onCancel?.(e);
     };
 
     /** Triggered when the clear button is clicked */
     const handleClear: MouseEventHandler<HTMLButtonElement> = e => {
-      setValue([null, null]);
+      updateValue([null, null]);
       onClear?.(e);
     };
 
     return (
-      <DateRangeMenuProvider month={month} setMonth={setMonth} today={today}>
-        <MenuWrapper
-          data-lg={lgid}
-          ref={menuRef}
-          usePortal
-          role="listbox"
-          active={isOpen}
-          spacing={spacing[1]}
-          className={rangeMenuWrapperStyles}
-          onKeyDown={handleKeyDown}
-          onFocus={handleMenuFocus}
-          {...rest}
-        >
-          <div className={menuContentStyles}>
-            {showQuickSelection && (
-              <QuickSelectionMenu
-                selectRefs={selectRefs}
-                quickRangeButtonRefs={quickRangeButtonRefs}
-              />
-            )}
-            <DateRangeMenuCalendars
-              ref={calendarSectionRef}
-              cellRefs={calendarCellRefs}
-              chevronRefs={chevronRefs}
-              value={value}
-              setValue={setValue}
-              highlight={highlight}
-              setHighlight={setHighlight}
-            />
-          </div>
-          <DateRangeMenuFooter
-            onApply={handleApply}
-            onCancel={handleCancel}
-            onClear={handleClear}
-            buttonRefs={footerButtonRefs}
+      <MenuWrapper
+        ref={refs.menuRef}
+        usePortal
+        role="listbox"
+        active={isOpen}
+        spacing={spacing[1]}
+        className={rangeMenuWrapperStyles}
+        onKeyDown={handleKeyDown}
+        onFocus={handleMenuFocus}
+        {...rest}
+      >
+        <div className={menuContentStyles}>
+          {showQuickSelection && <QuickSelectionMenu />}
+          <DateRangeMenuCalendars
+            ref={refs.calendarSectionRef}
+            handleValidation={handleValidation}
           />
-        </MenuWrapper>
-      </DateRangeMenuProvider>
+        </div>
+        <DateRangeMenuFooter
+          onApply={handleApply}
+          onCancel={handleCancel}
+          onClear={handleClear}
+        />
+      </MenuWrapper>
     );
   },
 );
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
index 684a5f1f80..e109d68f06 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
@@ -3,15 +3,14 @@ import { PopoverProps, PortalControlProps } from '@leafygreen-ui/popover';
 
 import { DateRangeComponentProps } from '../DateRangeComponent';
 
+/**
+ * Pass into the menu specific properties of ComponentProps
+ * and any other `div` attributes
+ */
 export type DateRangeMenuProps = PortalControlProps &
   Pick<PopoverProps, 'refEl'> &
   Pick<
     DateRangeComponentProps,
-    | 'value'
-    | 'setValue'
-    | 'showQuickSelection'
-    | 'handleValidation'
-    | 'onCancel'
-    | 'onClear'
+    'showQuickSelection' | 'handleValidation' | 'onCancel' | 'onClear'
   > &
   HTMLElementProps<'div'> & {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index d7ffd3ece0..b2f1ed5834 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -32,7 +32,7 @@ import {
   minDate,
   setUTCMonth,
 } from '../../../utils';
-import { useDateRangeMenuContext } from '../DateRangeMenuContext';
+import { useDateRangeContext } from '../../DateRangeContext';
 
 import {
   calendarHeadersContainerStyle,
@@ -46,293 +46,284 @@ import { DateRangeMenuCalendarsProps } from './DateRangeMenuCalendars.types';
 export const DateRangeMenuCalendars = forwardRef<
   HTMLDivElement,
   DateRangeMenuCalendarsProps
->(
-  (
-    {
-      value,
-      setValue,
-      handleValidation,
-      highlight,
-      setHighlight,
-      cellRefs,
-      chevronRefs,
-    },
-    fwdRef,
-  ) => {
-    const { isInRange, setOpen } = useDatePickerContext();
-    const {
-      month,
-      nextMonth,
-      setMonth: setDisplayMonth,
-      today,
-    } = useDateRangeMenuContext();
-
-    const [hoveredCell, setHover] = useState<DateType>(null);
-
-    /**
-     * setDisplayMonth with side effects
-     */
-    const updateMonth = (newMonth: Date) => {
-      if (isSameUTCMonth(newMonth, month)) {
-        return;
+>(({ handleValidation }, fwdRef) => {
+  const { isInRange, setOpen } = useDatePickerContext();
+  const {
+    refs,
+    value,
+    setValue,
+    highlight,
+    setHighlight,
+    month,
+    nextMonth,
+    setMonth: setDisplayMonth,
+    today,
+  } = useDateRangeContext();
+
+  const [hoveredCell, setHover] = useState<DateType>(null);
+
+  /**
+   * setDisplayMonth with side effects
+   */
+  const updateMonth = (newMonth: Date) => {
+    if (isSameUTCMonth(newMonth, month)) {
+      return;
+    }
+
+    // const newHighlight = getNewHighlight(highlight, month, newMonth);
+    // const shouldUpdateHighlight = !isSameUTCDay(highlight, newHighlight);
+
+    // if (newHighlight && shouldUpdateHighlight) {
+    //   setHighlight(newHighlight);
+    // }
+
+    setDisplayMonth(newMonth);
+  };
+
+  /**
+   * setHighlight with side effects
+   */
+  const updateHighlight = (newHighlight: Date) => {
+    // change month if nextHighlight is different than `month` or `nextMonth`
+    if (
+      !isSameUTCMonth(month, newHighlight) &&
+      !isSameUTCMonth(nextMonth, newHighlight)
+    ) {
+      setDisplayMonth(newHighlight);
+    }
+
+    // keep track of the highlighted cell
+
+    if (!isSameUTCDay(newHighlight, highlight)) {
+      setHighlight(newHighlight);
+
+      // After the DOM changes, focus the relevant cell
+      requestAnimationFrame(() => {
+        const highlightCellRef = refs.calendarCellRefs(
+          newHighlight.toISOString(),
+        );
+        highlightCellRef.current?.focus();
+      });
+    }
+  };
+
+  /**
+   * Creates a click handler for a specific cell date
+   */
+  const cellClickHandlerForDay =
+    (day: Date): MouseEventHandler<HTMLTableCellElement> =>
+    () => {
+      if (isInRange(day)) {
+        // if no value is set, set the start date
+        if (!value || value.every(isNull)) {
+          setValue([day, null]);
+        } else if (value.some(isNull)) {
+          // if only one date is set, set both dates
+          const newRange: DateRangeType = [
+            minDate([...value, day]) ?? day,
+            maxDate([...value, day]) ?? day,
+          ];
+          setValue(newRange);
+        } else if (value.every(isDefined)) {
+          // if both values are set, set the start date & clear the end date
+          setValue([day, null]);
+        }
       }
-
-      // const newHighlight = getNewHighlight(highlight, month, newMonth);
-      // const shouldUpdateHighlight = !isSameUTCDay(highlight, newHighlight);
-
-      // if (newHighlight && shouldUpdateHighlight) {
-      //   setHighlight(newHighlight);
-      // }
-
-      setDisplayMonth(newMonth);
     };
 
-    /**
-     * setHighlight with side effects
-     */
-    const updateHighlight = (newHighlight: Date) => {
-      // change month if nextHighlight is different than `month` or `nextMonth`
+  /** Returns the current state of the cell */
+  const getCellState = (cellDay: Date): CalendarCellState => {
+    if (!isInRange(cellDay)) {
+      return CalendarCellState.Disabled;
+    }
+
+    // if at least the start/end date is defined...
+    if (value && value.some(isDefined)) {
       if (
-        !isSameUTCMonth(month, newHighlight) &&
-        !isSameUTCMonth(nextMonth, newHighlight)
+        isSameUTCDay(cellDay, minDate(value)) ||
+        isSameUTCDay(cellDay, maxDate(value))
       ) {
-        setDisplayMonth(newHighlight);
+        return CalendarCellState.Active;
       }
+    }
 
-      // keep track of the highlighted cell
+    return CalendarCellState.Default;
+  };
 
-      if (!isSameUTCDay(newHighlight, highlight)) {
-        setHighlight(newHighlight);
+  const getCellRangeState = (cellDay: Date): CalendarCellRangeState => {
+    // if at least the start/end date is defined...
+    if (value && value.some(isDefined)) {
+      // for the purposes of visualizing the calendar,
+      // the range start is the earliest/latest date of the start/end value or hovered cell,
+      const rangeStart = minDate([...value, hoveredCell]);
+      const rangeEnd = maxDate([...value, hoveredCell]);
 
-        // After the DOM changes, focus the relevant cell
-        requestAnimationFrame(() => {
-          const highlightCellRef = cellRefs(newHighlight.toISOString());
-          highlightCellRef.current?.focus();
-        });
+      if (isSameUTCDay(cellDay, rangeStart)) {
+        return CalendarCellRangeState.Start;
       }
-    };
 
-    /**
-     * Creates a click handler for a specific cell date
-     */
-    const cellClickHandlerForDay =
-      (day: Date): MouseEventHandler<HTMLTableCellElement> =>
-      () => {
-        if (isInRange(day)) {
-          // if no value is set, set the start date
-          if (!value || value.every(isNull)) {
-            setValue([day, null]);
-          } else if (value.some(isNull)) {
-            // if only one date is set, set both dates
-            const newRange: DateRangeType = [
-              minDate([...value, day]) ?? day,
-              maxDate([...value, day]) ?? day,
-            ];
-            setValue(newRange);
-          } else if (value.every(isDefined)) {
-            // if both values are set, set the start date & clear the end date
-            setValue([day, null]);
-          }
-        }
-      };
-
-    /** Returns the current state of the cell */
-    const getCellState = (cellDay: Date): CalendarCellState => {
-      if (!isInRange(cellDay)) {
-        return CalendarCellState.Disabled;
+      if (isSameUTCDay(cellDay, rangeEnd)) {
+        return CalendarCellRangeState.End;
       }
 
-      // if at least the start/end date is defined...
-      if (value && value.some(isDefined)) {
-        if (
-          isSameUTCDay(cellDay, minDate(value)) ||
-          isSameUTCDay(cellDay, maxDate(value))
-        ) {
-          return CalendarCellState.Active;
-        }
+      // otherwise if the current cell is within the range of start & end
+      if (
+        !isUndefined(rangeStart) &&
+        !isUndefined(rangeEnd) &&
+        isWithinInterval(cellDay, { start: rangeStart, end: rangeEnd })
+      ) {
+        return CalendarCellRangeState.Range;
       }
-
-      return CalendarCellState.Default;
-    };
-
-    const getCellRangeState = (cellDay: Date): CalendarCellRangeState => {
-      // if at least the start/end date is defined...
-      if (value && value.some(isDefined)) {
-        // for the purposes of visualizing the calendar,
-        // the range start is the earliest/latest date of the start/end value or hovered cell,
-        const rangeStart = minDate([...value, hoveredCell]);
-        const rangeEnd = maxDate([...value, hoveredCell]);
-
-        if (isSameUTCDay(cellDay, rangeStart)) {
-          return CalendarCellRangeState.Start;
-        }
-
-        if (isSameUTCDay(cellDay, rangeEnd)) {
-          return CalendarCellRangeState.End;
-        }
-
-        // otherwise if the current cell is within the range of start & end
-        if (
-          !isUndefined(rangeStart) &&
-          !isUndefined(rangeEnd) &&
-          isWithinInterval(cellDay, { start: rangeStart, end: rangeEnd })
-        ) {
-          return CalendarCellRangeState.Range;
-        }
+    }
+
+    return CalendarCellRangeState.None;
+  };
+
+  /** Called on any keydown within the menu element */
+  const handleCalendarKeyDown: KeyboardEventHandler<
+    HTMLTableElement
+  > = event => {
+    const { key } = event;
+    const highlightStart = highlight || value?.[0] || value?.[1] || today;
+    let nextHighlight = highlightStart;
+
+    switch (key) {
+      case keyMap.ArrowLeft: {
+        nextHighlight = subDays(highlightStart, 1);
+        break;
       }
 
-      return CalendarCellRangeState.None;
-    };
-
-    /** Called on any keydown within the menu element */
-    const handleCalendarKeyDown: KeyboardEventHandler<
-      HTMLTableElement
-    > = event => {
-      const { key } = event;
-      const highlightStart = highlight || value?.[0] || value?.[1] || today;
-      let nextHighlight = highlightStart;
-
-      switch (key) {
-        case keyMap.ArrowLeft: {
-          nextHighlight = subDays(highlightStart, 1);
-          break;
-        }
+      case keyMap.ArrowRight: {
+        nextHighlight = addDays(highlightStart, 1);
+        break;
+      }
 
-        case keyMap.ArrowRight: {
-          nextHighlight = addDays(highlightStart, 1);
-          break;
-        }
+      case keyMap.ArrowUp: {
+        nextHighlight = subDays(highlightStart, 7);
+        break;
+      }
 
-        case keyMap.ArrowUp: {
-          nextHighlight = subDays(highlightStart, 7);
-          break;
-        }
+      case keyMap.ArrowDown: {
+        nextHighlight = addDays(highlightStart, 7);
+        break;
+      }
 
-        case keyMap.ArrowDown: {
-          nextHighlight = addDays(highlightStart, 7);
-          break;
-        }
+      case keyMap.Escape:
+        setOpen(false);
+        handleValidation?.(value);
+        break;
 
-        case keyMap.Escape:
-          setOpen(false);
-          handleValidation?.(value);
-          break;
+      default:
+        break;
+    }
 
-        default:
-          break;
-      }
+    // if nextHighlight is in range
+    if (isInRange(nextHighlight)) {
+      updateHighlight(nextHighlight);
 
-      // if nextHighlight is in range
-      if (isInRange(nextHighlight)) {
-        updateHighlight(nextHighlight);
+      // Prevent the parent keydown handler from being called
+      event.stopPropagation();
+    }
+  };
 
-        // Prevent the parent keydown handler from being called
-        event.stopPropagation();
-      }
+  const handleCellHover =
+    (day: Date): MouseEventHandler<HTMLTableCellElement> =>
+    _ => {
+      setHover(day);
     };
 
-    const handleCellHover =
-      (day: Date): MouseEventHandler<HTMLTableCellElement> =>
-      _ => {
-        setHover(day);
-      };
-
-    const handleCalendarMouseOut: MouseEventHandler<HTMLDivElement> = e => {
-      // TODO: improve this logic
-      if (e.target === e.currentTarget) {
-        // ... if the calendar container is the event's target
-        setHover(null);
-      }
+  const handleCalendarMouseOut: MouseEventHandler<HTMLDivElement> = e => {
+    // TODO: improve this logic
+    if (e.target === e.currentTarget) {
+      // ... if the calendar container is the event's target
+      setHover(null);
+    }
+  };
+
+  const handleChevronClick =
+    (dir: 'left' | 'right'): MouseEventHandler<HTMLButtonElement> =>
+    () => {
+      const increment = dir === 'left' ? -1 : 1;
+      const newMonthIndex = month.getUTCMonth() + increment;
+      const newMonth = setUTCMonth(month, newMonthIndex);
+      updateMonth(newMonth);
     };
 
-    const handleChevronClick =
-      (dir: 'left' | 'right'): MouseEventHandler<HTMLButtonElement> =>
-      () => {
-        const increment = dir === 'left' ? -1 : 1;
-        const newMonthIndex = month.getUTCMonth() + increment;
-        const newMonth = setUTCMonth(month, newMonthIndex);
-        updateMonth(newMonth);
-      };
+  return (
+    <div ref={fwdRef} className={cx(calendarsClassName, calendarsFrameStyles)}>
+      <div className={calendarHeadersContainerStyle}>
+        <div className={calendarHeaderStyles}>
+          <IconButton
+            aria-label="Previous month"
+            ref={refs.chevronRefs('left')}
+            onClick={handleChevronClick('left')}
+          >
+            <Icon glyph="ChevronLeft" />
+          </IconButton>
+          <Subtitle>{getFullMonthLabel(month)}</Subtitle>
+        </div>
+
+        <div className={calendarHeaderStyles}>
+          <Subtitle>{getFullMonthLabel(nextMonth)}</Subtitle>
+          <IconButton
+            aria-label="Next month"
+            ref={refs.chevronRefs('right')}
+            onClick={handleChevronClick('right')}
+          >
+            <Icon glyph="ChevronRight" />
+          </IconButton>
+        </div>
+      </div>
 
-    return (
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/mouse-events-have-key-events */}
       <div
-        ref={fwdRef}
-        className={cx(calendarsClassName, calendarsFrameStyles)}
+        className={calendarsContainerStyles}
+        onKeyDown={handleCalendarKeyDown}
+        onMouseOut={handleCalendarMouseOut}
       >
-        <div className={calendarHeadersContainerStyle}>
-          <div className={calendarHeaderStyles}>
-            <IconButton
-              aria-label="Previous month"
-              ref={chevronRefs('left')}
-              onClick={handleChevronClick('left')}
-            >
-              <Icon glyph="ChevronLeft" />
-            </IconButton>
-            <Subtitle>{getFullMonthLabel(month)}</Subtitle>
-          </div>
-
-          <div className={calendarHeaderStyles}>
-            <Subtitle>{getFullMonthLabel(nextMonth)}</Subtitle>
-            <IconButton
-              aria-label="Next month"
-              ref={chevronRefs('right')}
-              onClick={handleChevronClick('right')}
+        <CalendarGrid month={month} aria-label={getFullMonthLabel(month)}>
+          {(day, i) => (
+            <CalendarCell
+              key={i}
+              ref={refs.calendarCellRefs(day.toISOString())}
+              aria-label={getUTCDateString(day)}
+              isHighlighted={isSameUTCDay(day, highlight)}
+              isCurrent={isSameUTCDay(day, today)}
+              state={getCellState(day)}
+              rangeState={getCellRangeState(day)}
+              onClick={cellClickHandlerForDay(day)}
+              onMouseEnter={handleCellHover(day)}
+              data-iso={day.toISOString()}
             >
-              <Icon glyph="ChevronRight" />
-            </IconButton>
-          </div>
-        </div>
-
-        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/mouse-events-have-key-events */}
-        <div
-          className={calendarsContainerStyles}
-          onKeyDown={handleCalendarKeyDown}
-          onMouseOut={handleCalendarMouseOut}
+              {day.getUTCDate()}
+            </CalendarCell>
+          )}
+        </CalendarGrid>
+
+        <CalendarGrid
+          month={nextMonth}
+          aria-label={getFullMonthLabel(nextMonth)}
         >
-          <CalendarGrid month={month} aria-label={getFullMonthLabel(month)}>
-            {(day, i) => (
-              <CalendarCell
-                key={i}
-                ref={cellRefs(day.toISOString())}
-                aria-label={getUTCDateString(day)}
-                isHighlighted={isSameUTCDay(day, highlight)}
-                isCurrent={isSameUTCDay(day, today)}
-                state={getCellState(day)}
-                rangeState={getCellRangeState(day)}
-                onClick={cellClickHandlerForDay(day)}
-                onMouseEnter={handleCellHover(day)}
-                data-iso={day.toISOString()}
-              >
-                {day.getUTCDate()}
-              </CalendarCell>
-            )}
-          </CalendarGrid>
-
-          <CalendarGrid
-            month={nextMonth}
-            aria-label={getFullMonthLabel(nextMonth)}
-          >
-            {(day, i) => (
-              <CalendarCell
-                key={i}
-                ref={cellRefs(day.toISOString())}
-                aria-label={getUTCDateString(day)}
-                isHighlighted={isSameUTCDay(day, highlight)}
-                isCurrent={isSameUTCDay(day, today)}
-                state={getCellState(day)}
-                rangeState={getCellRangeState(day)}
-                onClick={cellClickHandlerForDay(day)}
-                onMouseEnter={handleCellHover(day)}
-                data-iso={day.toISOString()}
-              >
-                {day.getUTCDate()}
-              </CalendarCell>
-            )}
-          </CalendarGrid>
-        </div>
+          {(day, i) => (
+            <CalendarCell
+              key={i}
+              ref={refs.calendarCellRefs(day.toISOString())}
+              aria-label={getUTCDateString(day)}
+              isHighlighted={isSameUTCDay(day, highlight)}
+              isCurrent={isSameUTCDay(day, today)}
+              state={getCellState(day)}
+              rangeState={getCellRangeState(day)}
+              onClick={cellClickHandlerForDay(day)}
+              onMouseEnter={handleCellHover(day)}
+              data-iso={day.toISOString()}
+            >
+              {day.getUTCDate()}
+            </CalendarCell>
+          )}
+        </CalendarGrid>
       </div>
-    );
-  },
-);
+    </div>
+  );
+});
 
 DateRangeMenuCalendars.displayName = 'DateRangeMenuCalendars';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
index a00441885a..2907b1a275 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
@@ -1,14 +1,7 @@
-import { DynamicRefGetter } from '@leafygreen-ui/hooks';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
-import { DateType } from '../../../types';
 import { DateRangeMenuProps } from '../DateRangeMenu.types';
 
 export interface DateRangeMenuCalendarsProps
-  extends Pick<DateRangeMenuProps, 'value' | 'setValue' | 'handleValidation'>,
-    HTMLElementProps<'div'> {
-  highlight: DateType;
-  setHighlight: React.Dispatch<React.SetStateAction<DateType>>;
-  cellRefs: DynamicRefGetter<HTMLTableCellElement>;
-  chevronRefs: DynamicRefGetter<HTMLButtonElement>;
-}
+  extends Pick<DateRangeMenuProps, 'handleValidation'>,
+    HTMLElementProps<'div'> {}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
deleted file mode 100644
index 0f881c93f0..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuContext.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { createContext, useContext } from 'react';
-
-export interface DateRangeMenuContextProps {
-  /**
-   * The month displayed on the left
-   */
-  month: Date;
-
-  /**
-   * Setter for the displayed month
-   */
-  setMonth: React.Dispatch<React.SetStateAction<Date>>;
-
-  /**
-   * The month displayed on the right
-   */
-  nextMonth: Date;
-
-  /** Memoized reference for Date.now */
-  today: Date;
-}
-
-export const DateRangeMenuContext = createContext<DateRangeMenuContextProps>({
-  month: new Date(),
-  nextMonth: new Date(),
-  setMonth: () => {},
-  today: new Date(),
-});
-
-/** Hook to access {@link DateRangeMenuContextProps} */
-export const useDateRangeMenuContext = () => useContext(DateRangeMenuContext);
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
deleted file mode 100644
index fe93fc2669..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/DateRangeMenuProvider.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { PropsWithChildren, useMemo } from 'react';
-
-import { addMonthsUTC } from '../../../utils';
-import { DateRangeMenuProps } from '../DateRangeMenu.types';
-
-import { DateRangeMenuContext } from './DateRangeMenuContext';
-
-export interface DateRangeMenuProviderProps
-  extends Pick<DateRangeMenuProps, 'value'>,
-    PropsWithChildren<{}> {
-  month: Date;
-  setMonth: React.Dispatch<React.SetStateAction<Date>>;
-  today: Date;
-}
-
-/**
- * Receives the start & end dates
- * and initializes the start & end display months
- */
-export const DateRangeMenuProvider = ({
-  month,
-  setMonth,
-  today,
-  children,
-}: DateRangeMenuProviderProps) => {
-  const nextMonth = useMemo<Date>(() => addMonthsUTC(month, 1), [month]);
-
-  return (
-    <DateRangeMenuContext.Provider
-      value={{
-        month,
-        nextMonth,
-        setMonth,
-        today,
-      }}
-    >
-      {children}
-    </DateRangeMenuContext.Provider>
-  );
-};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/index.ts
deleted file mode 100644
index 41fcc6a3fd..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuContext/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export {
-  DateRangeMenuContext,
-  DateRangeMenuContextProps,
-  useDateRangeMenuContext,
-} from './DateRangeMenuContext';
-export {
-  DateRangeMenuProvider,
-  DateRangeMenuProviderProps,
-} from './DateRangeMenuProvider';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
index 12d958e3db..77b0237fba 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
@@ -1,66 +1,65 @@
 import React, { forwardRef, MouseEventHandler } from 'react';
 
 import Button, { Size, Variant } from '@leafygreen-ui/button';
-import { DynamicRefGetter } from '@leafygreen-ui/hooks';
 import { Link } from '@leafygreen-ui/typography';
 
+import { useDateRangeContext } from '../../../DateRangePicker/DateRangeContext';
+
 import { clearButtonStyles, footerStyles } from './DateRangeMenuFooter.styles';
 
 interface DateRangeMenuFooterProps {
   onApply: MouseEventHandler<HTMLButtonElement>;
   onCancel: MouseEventHandler<HTMLButtonElement>;
   onClear: MouseEventHandler<HTMLButtonElement>;
-  buttonRefs: DynamicRefGetter<HTMLButtonElement>;
 }
 
 export const DateRangeMenuFooter = forwardRef<
   HTMLDivElement,
   DateRangeMenuFooterProps
->(
-  (
-    { onApply, onCancel, onClear, buttonRefs }: DateRangeMenuFooterProps,
-    fwdRef,
-  ) => {
-    return (
-      <div
-        ref={fwdRef}
-        className={footerStyles}
-        data-testid="lg-date_picker-menu-footer"
+>(({ onApply, onCancel, onClear }: DateRangeMenuFooterProps, fwdRef) => {
+  const {
+    refs: { footerButtonRefs },
+  } = useDateRangeContext();
+
+  return (
+    <div
+      ref={fwdRef}
+      className={footerStyles}
+      data-testid="lg-date_picker-menu-footer"
+    >
+      <Link
+        ref={footerButtonRefs('clear')}
+        as="button"
+        className={clearButtonStyles}
+        aria-label="Clear selection"
+        onClick={onClear}
+        data-testid="lg-date_picker-menu-footer_button"
       >
-        <Link
-          ref={buttonRefs('clear')}
-          as="button"
-          className={clearButtonStyles}
-          aria-label="Clear selection"
-          onClick={onClear}
+        Clear
+      </Link>
+      <div>
+        <Button
+          ref={footerButtonRefs('cancel')}
+          size={Size.XSmall}
+          aria-label="Cancel selection"
+          onClick={onCancel}
+          data-testid="lg-date_picker-menu-footer_button"
+        >
+          Cancel
+        </Button>
+        <Button
+          ref={footerButtonRefs('apply')}
+          size={Size.XSmall}
+          variant={Variant.Primary}
+          aria-label="Apply selection"
+          onClick={onApply}
           data-testid="lg-date_picker-menu-footer_button"
         >
-          Clear
-        </Link>
-        <div>
-          <Button
-            ref={buttonRefs('cancel')}
-            size={Size.XSmall}
-            aria-label="Cancel selection"
-            onClick={onCancel}
-            data-testid="lg-date_picker-menu-footer_button"
-          >
-            Cancel
-          </Button>
-          <Button
-            ref={buttonRefs('apply')}
-            size={Size.XSmall}
-            variant={Variant.Primary}
-            aria-label="Apply selection"
-            onClick={onApply}
-            data-testid="lg-date_picker-menu-footer_button"
-          >
-            Apply
-          </Button>
-        </div>
+          Apply
+        </Button>
       </div>
-    );
-  },
-);
+    </div>
+  );
+});
 
 DateRangeMenuFooter.displayName = 'DateRangeMenuFooter';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
index 450969d4dc..9a81df3835 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
@@ -3,7 +3,6 @@ import { forwardRef } from 'react';
 import range from 'lodash/range';
 
 import { cx } from '@leafygreen-ui/emotion';
-import { DynamicRefGetter } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Option, Select } from '@leafygreen-ui/select';
 import { Overline } from '@leafygreen-ui/typography';
@@ -11,7 +10,7 @@ import { Overline } from '@leafygreen-ui/typography';
 import { Months, selectElementProps } from '../../../constants';
 import { useDatePickerContext } from '../../../DatePickerContext';
 import { setUTCMonth, setUTCYear } from '../../../utils';
-import { useDateRangeMenuContext } from '../DateRangeMenuContext';
+import { useDateRangeContext } from '../../DateRangeContext';
 
 import { QuickRangeButton } from './QuickRangeButton';
 import {
@@ -22,24 +21,21 @@ import {
   quickSelectMenuThemeStyles,
 } from './QuickSelectionMenu.styles';
 
-interface QuickSelectionMenuProps {
-  selectRefs: DynamicRefGetter<HTMLDivElement>;
-  quickRangeButtonRefs: DynamicRefGetter<HTMLButtonElement>;
-}
+interface QuickSelectionMenuProps {}
 
 export const QuickSelectionMenu = forwardRef<
   HTMLDivElement,
   QuickSelectionMenuProps
->(({ selectRefs, quickRangeButtonRefs }, fwdRef) => {
+>((_, fwdRef) => {
   const { theme } = useDarkMode();
   const { min, max, isInRange } = useDatePickerContext();
-  const { month, setMonth } = useDateRangeMenuContext();
+  const { month, setMonth, refs } = useDateRangeContext();
 
   // TODO: is this the right logic?
   const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
 
+  // TODO: refine this logic
   const updateMonth = (newMonth: Date) => {
-    // TODO: refine this logic
     if (isInRange(newMonth)) {
       setMonth(newMonth);
     }
@@ -58,7 +54,7 @@ export const QuickSelectionMenu = forwardRef<
       <div className={quickSelectMenuMonthSelectContainerStyles}>
         <Select
           {...selectElementProps}
-          ref={selectRefs('month')}
+          ref={refs.selectRefs('month')}
           aria-label="Select month"
           value={month.getUTCMonth().toString()}
           onChange={m => {
@@ -74,7 +70,7 @@ export const QuickSelectionMenu = forwardRef<
         </Select>
         <Select
           {...selectElementProps}
-          ref={selectRefs('year')}
+          ref={refs.selectRefs('year')}
           aria-label="Select year"
           value={month.getUTCFullYear().toString()}
           onChange={y => {
@@ -95,29 +91,32 @@ export const QuickSelectionMenu = forwardRef<
            TODO: this functionality
            Do we want to set these up in some config object?
            */}
-        <QuickRangeButton ref={quickRangeButtonRefs('today')} label="Today" />
         <QuickRangeButton
-          ref={quickRangeButtonRefs('yesterday')}
+          ref={refs.quickRangeButtonRefs('today')}
+          label="Today"
+        />
+        <QuickRangeButton
+          ref={refs.quickRangeButtonRefs('yesterday')}
           label="Yesterday"
         />
         <QuickRangeButton
-          ref={quickRangeButtonRefs('last7')}
+          ref={refs.quickRangeButtonRefs('last7')}
           label="Last 7 days"
         />
         <QuickRangeButton
-          ref={quickRangeButtonRefs('last30')}
+          ref={refs.quickRangeButtonRefs('last30')}
           label="Last 30 days"
         />
         <QuickRangeButton
-          ref={quickRangeButtonRefs('last90')}
+          ref={refs.quickRangeButtonRefs('last90')}
           label="Last 90 days"
         />
         <QuickRangeButton
-          ref={quickRangeButtonRefs('last12')}
+          ref={refs.quickRangeButtonRefs('last12')}
           label="Last 12 months"
         />
         <QuickRangeButton
-          ref={quickRangeButtonRefs('all-time')}
+          ref={refs.quickRangeButtonRefs('all-time')}
           label="All time"
         />
       </div>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
index a131b7ee83..307d4ae73f 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
@@ -5,6 +5,7 @@ import { useControlledValue } from '../hooks/useControlledValue';
 import { pickAndOmit } from '../utils';
 
 import { DateRangeComponent } from './DateRangeComponent';
+import { DateRangeProvider } from './DateRangeContext';
 import { DateRangePickerProps } from './DateRangePicker.types';
 
 export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
@@ -13,12 +14,14 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
       value: rangeProp,
       initialValue: initialProp,
       onRangeChange: onChangeProp,
-      showQuickSelection,
       ...props
     }: DateRangePickerProps,
     fwdRef,
   ) => {
-    const [contextProps, restProps] = pickAndOmit(props, contextPropNames);
+    const [datePickerContextProps, restProps] = pickAndOmit(
+      props,
+      contextPropNames,
+    );
 
     const { value, setValue } = useControlledValue(
       rangeProp,
@@ -27,14 +30,10 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
     );
 
     return (
-      <DatePickerProvider value={contextProps}>
-        <DateRangeComponent
-          ref={fwdRef}
-          value={value}
-          setValue={setValue}
-          showQuickSelection={showQuickSelection}
-          {...restProps}
-        />
+      <DatePickerProvider value={datePickerContextProps}>
+        <DateRangeProvider rootRef={fwdRef} value={value} setValue={setValue}>
+          <DateRangeComponent ref={fwdRef} {...restProps} />
+        </DateRangeProvider>
       </DatePickerProvider>
     );
   },

From f2be624a31bf3c64e6fb2cde9e8d75c94d2a9b0c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 18 Oct 2023 18:04:17 -0400
Subject: [PATCH 251/351] fixes build

---
 .../DateRangeComponent/DateRangeComponent.tsx | 68 +++++++--------
 .../DateRangeInput/DateRangeInput.stories.tsx | 24 +-----
 .../DateRangeMenu/DateRangeMenu.stories.tsx   | 82 ++++++++++---------
 .../DateRangeMenu/DateRangeMenu.tsx           |  2 +-
 .../QuickRangeButton.stories.tsx              |  2 +-
 .../src/DateRangePicker/DateRangePicker.tsx   |  2 +-
 6 files changed, 81 insertions(+), 99 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
index f2df5ddd65..deb88b048a 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { useBackdropClick } from '@leafygreen-ui/hooks';
 
@@ -9,42 +9,34 @@ import { DateRangeMenu } from '../DateRangeMenu';
 
 import { DateRangeComponentProps } from './DateRangeComponent.types';
 
-export const DateRangeComponent = forwardRef<
-  HTMLDivElement,
-  DateRangeComponentProps
->(
-  (
-    {
-      handleValidation,
-      onCancel,
-      onClear,
-      showQuickSelection,
-      ...rest
-    }: DateRangeComponentProps,
-    fwdRef,
-  ) => {
-    const { isOpen, setOpen, menuId } = useDatePickerContext();
-
-    const {
-      refs: { formFieldRef, menuRef },
-    } = useDateRangeContext();
-
-    useBackdropClick(() => setOpen(false), [formFieldRef, menuRef], isOpen);
-
-    return (
-      <>
-        <DateRangeInput ref={formFieldRef} {...rest} />
-        <DateRangeMenu
-          ref={menuRef}
-          refEl={formFieldRef}
-          id={menuId}
-          onCancel={onCancel}
-          onClear={onClear}
-          showQuickSelection={showQuickSelection}
-        />
-      </>
-    );
-  },
-);
+export const DateRangeComponent = ({
+  handleValidation,
+  onCancel,
+  onClear,
+  showQuickSelection,
+  ...rest
+}: DateRangeComponentProps) => {
+  const { isOpen, setOpen, menuId } = useDatePickerContext();
+
+  const {
+    refs: { formFieldRef, menuRef },
+  } = useDateRangeContext();
+
+  useBackdropClick(() => setOpen(false), [formFieldRef, menuRef], isOpen);
+
+  return (
+    <>
+      <DateRangeInput ref={formFieldRef} {...rest} />
+      <DateRangeMenu
+        ref={menuRef}
+        refEl={formFieldRef}
+        id={menuId}
+        onCancel={onCancel}
+        onClear={onClear}
+        showQuickSelection={showQuickSelection}
+      />
+    </>
+  );
+};
 
 DateRangeComponent.displayName = 'DateRangeComponent';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.stories.tsx
index 443877b230..62da0f1ab9 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.stories.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable react/prop-types */
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { StoryFn } from '@storybook/react';
-import { isValid } from 'date-fns';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
@@ -50,32 +49,15 @@ const meta: StoryMetaType<typeof DateRangeInput, DatePickerContextProps> = {
     dateFormat: 'en-UK',
     timeZone: 'Europe/London',
   },
-  argTypes: {
-    // value: { control: 'date' },
-  },
+  argTypes: {},
 };
 
 export default meta;
 
 export const Basic: StoryFn<typeof DateRangeInput> = props => {
-  const [date, setDate] = useState<Date | null>(null);
-
-  // useEffect(() => {
-  //   if (props.value && isValid(new Date(props.value))) {
-  //     setDate(new Date(props.value));
-  //   }
-  // }, [props.value]);
-
-  const updateDate = (date: Date | null) => {
-    setDate(date);
-  };
-
   return (
     <>
-      <DateRangeInput
-        {...props}
-        // value={date} setValue={updateDate}
-      />
+      <DateRangeInput {...props} />
     </>
   );
 };
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
index e052ab8561..3815aaa751 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks, react/prop-types */
-import React, { useRef, useState } from 'react';
-import { StoryFn, StoryObj } from '@storybook/react';
+import React, { useRef } from 'react';
+import { Decorator, StoryObj } from '@storybook/react';
 import omit from 'lodash/omit';
 import MockDate from 'mockdate';
 
@@ -18,20 +18,33 @@ import {
   contextPropNames,
   defaultDatePickerContext,
 } from '../../DatePickerContext/DatePickerContext.utils';
-import { DateRangeType } from '../../types';
-import { newUTC, pickAndOmit } from '../../utils';
+import { newUTC } from '../../utils';
+import { DateRangeProvider } from '../DateRangeContext';
+import { DateRangeContextProps } from '../DateRangeContext/DateRangeContext.types';
 
 import { DateRangeMenu } from './DateRangeMenu';
 import { DateRangeMenuProps } from './DateRangeMenu.types';
 
 const mockToday = newUTC(2023, Month.September, 14);
-type DecoratorArgs = DateRangeMenuProps & DatePickerContextProps;
 
-const MenuDecorator = (Story: StoryFn, ctx: any) => {
-  const [{ darkMode, ...contextProps }, { ...props }] = pickAndOmit(
-    ctx?.args as DecoratorArgs,
-    [...contextPropNames],
-  );
+type DateRangeMenuStoryProps = DateRangeMenuProps &
+  DateRangeContextProps &
+  DatePickerContextProps;
+
+type DateRangeMenuStoryType = StoryObj<DateRangeMenuStoryProps>;
+
+const MenuDecorator: Decorator<DateRangeMenuStoryProps> = (Story, ctx) => {
+  const {
+    darkMode,
+    value,
+    label,
+    description,
+    dateFormat,
+    timeZone,
+    min,
+    max,
+    ...args
+  } = ctx.args as DateRangeMenuStoryProps;
 
   // Force `new Date()` to return `mockToday`
   MockDate.set(mockToday);
@@ -41,19 +54,31 @@ const MenuDecorator = (Story: StoryFn, ctx: any) => {
       <DatePickerProvider
         value={{
           ...defaultDatePickerContext,
-          ...contextProps,
+          label,
+          description,
+          dateFormat,
+          timeZone,
+          min,
+          max,
           initialOpen: true,
         }}
       >
-        <Story {...props} />
+        <DateRangeProvider
+          rootRef={React.createRef()}
+          value={value}
+          setValue={() => {}}
+        >
+          <Story {...args} />
+        </DateRangeProvider>
       </DatePickerProvider>
     </LeafyGreenProvider>
   );
 };
 
-const meta: StoryMetaType<typeof DateRangeMenu, DecoratorArgs> = {
+const meta: StoryMetaType<typeof DateRangeMenu, DateRangeMenuStoryProps> = {
   title: 'Components/DatePicker/DateRangePicker/DateRangeMenu',
   component: DateRangeMenu,
+  // @ts-expect-error
   decorators: [MenuDecorator],
   parameters: {
     default: null,
@@ -74,46 +99,30 @@ const meta: StoryMetaType<typeof DateRangeMenu, DecoratorArgs> = {
 
 export default meta;
 
-type DateRangeMenuStoryType = StoryObj<typeof DateRangeMenu>;
-
 export const Basic: DateRangeMenuStoryType = {
-  render: args => {
-    const [value, setValue] = useState<DateRangeType | undefined>();
-
+  render: (args: DateRangeMenuProps) => {
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
     return (
       <>
         <code ref={refEl}>refEl</code>
-        <DateRangeMenu
-          {...props}
-          refEl={refEl}
-          value={value}
-          setValue={setValue}
-        />
+        <DateRangeMenu {...props} refEl={refEl} />
       </>
     );
   },
 };
 
 export const WithValue: DateRangeMenuStoryType = {
-  render: args => {
-    const [value, setValue] = useState<DateRangeType | undefined>([
-      newUTC(2023, Month.September, 14),
-      null,
-    ]);
-
+  args: {
+    value: [newUTC(2023, Month.September, 14), null],
+  },
+  render: (args: DateRangeMenuProps) => {
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
     return (
       <div style={{ minHeight: '50vh' }}>
         <InlineCode ref={refEl}>refEl</InlineCode>
-        <DateRangeMenu
-          {...props}
-          refEl={refEl}
-          value={value}
-          setValue={setValue}
-        />
+        <DateRangeMenu {...props} refEl={refEl} />
       </div>
     );
   },
@@ -122,7 +131,6 @@ export const WithValue: DateRangeMenuStoryType = {
 export const DarkMode: DateRangeMenuStoryType = {
   ...WithValue,
   args: {
-    // @ts-expect-error - DateRangeMenuStoryType does not include Context props
     darkMode: true,
   },
 };
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index 619d3cb1c4..04b508c835 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -98,7 +98,7 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
 
     return (
       <MenuWrapper
-        ref={refs.menuRef}
+        ref={fwdRef}
         usePortal
         role="listbox"
         active={isOpen}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.stories.tsx
index b696152851..a4a3a56576 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.stories.tsx
@@ -31,7 +31,7 @@ const meta: StoryMetaType<typeof QuickRangeButton> = {
 export default meta;
 
 export const Basic: StoryType<typeof QuickRangeButton> = () => {
-  return <QuickRangeButton>Last 12 months</QuickRangeButton>;
+  return <QuickRangeButton label="Last 12 months"></QuickRangeButton>;
 };
 
 export const Generated = () => <></>;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
index 307d4ae73f..c563aa5e9b 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
@@ -32,7 +32,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
     return (
       <DatePickerProvider value={datePickerContextProps}>
         <DateRangeProvider rootRef={fwdRef} value={value} setValue={setValue}>
-          <DateRangeComponent ref={fwdRef} {...restProps} />
+          <DateRangeComponent {...restProps} />
         </DateRangeProvider>
       </DatePickerProvider>
     );

From b4fc35c82030e0c6d21ad1f6401704847d00c819 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 18 Oct 2023 18:35:46 -0400
Subject: [PATCH 252/351] adds handlevalidation to context

---
 .../DateRangeComponent/DateRangeComponent.tsx |  1 -
 .../DateRangeContext/DateRangeContext.tsx     |  2 +
 .../DateRangeContext.types.ts                 |  5 +-
 .../DateRangeInput/DateRangeInput.tsx         | 23 ++++--
 .../DateRangeInput/DateRangeInput.types.ts    |  2 +-
 .../DateRangeMenu/DateRangeMenu.spec.tsx      |  9 +--
 .../DateRangeMenu/DateRangeMenu.tsx           | 23 +++---
 .../DateRangeMenu/DateRangeMenu.types.ts      |  5 +-
 .../DateRangeMenuCalendars.tsx                |  3 +-
 .../DateRangeMenuCalendars.types.ts           |  6 +-
 .../DateRangePicker/DateRangePicker.spec.tsx  | 79 +++----------------
 .../DateRangePicker.stories.tsx               |  2 -
 .../src/DateRangePicker/DateRangePicker.tsx   |  8 +-
 13 files changed, 60 insertions(+), 108 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
index deb88b048a..d4a47f5cc7 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
@@ -10,7 +10,6 @@ import { DateRangeMenu } from '../DateRangeMenu';
 import { DateRangeComponentProps } from './DateRangeComponent.types';
 
 export const DateRangeComponent = ({
-  handleValidation,
   onCancel,
   onClear,
   showQuickSelection,
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx b/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx
index 5692709873..e74fbfe5c4 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx
@@ -32,6 +32,7 @@ export const DateRangeProvider = ({
   children,
   value,
   setValue,
+  handleValidation,
   rootRef,
 }: PropsWithChildren<DateRangeProviderProps>) => {
   const refs = useDateRangeComponentRefs(rootRef);
@@ -58,6 +59,7 @@ export const DateRangeProvider = ({
         today,
         value,
         setValue,
+        handleValidation,
         month,
         nextMonth,
         setMonth,
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.types.ts
index 634d67a0a6..90793f5678 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.types.ts
@@ -2,6 +2,7 @@ import { DynamicRefGetter } from '@leafygreen-ui/hooks';
 
 import { SegmentRefs } from '../../hooks/useSegmentRefs';
 import { DateRangeType, DateType } from '../../types';
+import { DateRangePickerProps } from '../DateRangePicker.types';
 
 export interface DateRangeComponentRefs {
   formFieldRef: React.RefObject<HTMLDivElement>;
@@ -18,9 +19,10 @@ export interface DateRangeComponentRefs {
 
 export interface DateRangeContextProps {
   refs: DateRangeComponentRefs;
-  today: Date;
   value: DateRangeType | undefined;
   setValue: (newVal: DateRangeType | undefined) => void;
+  handleValidation: DateRangePickerProps['handleValidation'];
+  today: Date;
   month: Date;
   nextMonth: Date;
   setMonth: React.Dispatch<React.SetStateAction<Date>>;
@@ -33,4 +35,5 @@ export interface DateRangeProviderProps {
   rootRef: React.ForwardedRef<HTMLDivElement | null>;
   value: DateRangeType | undefined;
   setValue: (newVal: DateRangeType | undefined) => void;
+  handleValidation: DateRangePickerProps['handleValidation'];
 }
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
index 5563951108..0123f3523b 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
@@ -22,14 +22,16 @@ import { DateRangeInputProps } from './DateRangeInput.types';
 const EN_DASH = '–';
 
 export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
-  ({ handleValidation, onChange, ...rest }: DateRangeInputProps, fwdRef) => {
+  ({ onChange, ...rest }: DateRangeInputProps, fwdRef) => {
     const { disabled, formatParts, setOpen, isDirty, setIsDirty } =
       useDatePickerContext();
 
     const {
+      refs: { startSegmentRefs, endSegmentRefs },
       value,
       setValue,
-      refs: { startSegmentRefs, endSegmentRefs },
+      handleValidation,
+      getHighlightedCell,
     } = useDateRangeContext();
 
     /** Called when the input, or any of its children, is clicked */
@@ -121,12 +123,14 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
     const handleInputBlur: FocusEventHandler = e => {
       const nextFocus = e.relatedTarget as HTMLInputElement;
 
+      const segmentElements = [startSegmentRefs, endSegmentRefs].flatMap(refs =>
+        Object.values(refs).map(ref => ref.current),
+      );
+
+      const isNextFocusASegment = segmentElements.includes(nextFocus);
+
       // If the next focus is _not_ on a segment
-      if (
-        ![startSegmentRefs, endSegmentRefs]
-          .flatMap(refs => Object.values(refs).map(ref => ref.current))
-          .includes(nextFocus)
-      ) {
+      if (!isNextFocusASegment) {
         setIsDirty(true);
         handleValidation?.(value);
       }
@@ -138,6 +142,11 @@ export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
       if (!disabled) {
         e.stopPropagation();
         setOpen(true);
+        requestAnimationFrame(() => {
+          // once the menu is open
+          const highlightedCell = getHighlightedCell();
+          highlightedCell?.focus();
+        });
       }
     };
 
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
index 97b569ecb6..486b2c62cb 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
@@ -7,5 +7,5 @@ import { DateRangeComponentProps } from '../DateRangeComponent';
  * and any other `div` attributes
  */
 export interface DateRangeInputProps
-  extends Pick<DateRangeComponentProps, 'handleValidation' | 'onChange'>,
+  extends Pick<DateRangeComponentProps, 'onChange'>,
     Omit<HTMLElementProps<'div'>, 'onChange'> {}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
index f14bc52f79..fa8af545e9 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
@@ -1,11 +1,10 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { DateRangeMenu } from '.';
 
 describe('packages/date-range-menu', () => {
-  test('condition', () => {
-
-  })
-})
+  test.todo(
+    'Quick Select buttons fire a change handler with the correct payload',
+  );
+});
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
index 04b508c835..8ba9e4a283 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
@@ -3,6 +3,7 @@ import React, {
   forwardRef,
   KeyboardEventHandler,
   MouseEventHandler,
+  useEffect,
 } from 'react';
 
 import { keyMap } from '@leafygreen-ui/lib';
@@ -24,19 +25,20 @@ import { QuickSelectionMenu } from './QuickSelectionMenu';
 
 export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
   (
-    {
-      showQuickSelection,
-      onCancel,
-      onClear,
-      handleValidation,
-      ...rest
-    }: DateRangeMenuProps,
+    { showQuickSelection, onCancel, onClear, ...rest }: DateRangeMenuProps,
     fwdRef,
   ) => {
     // const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
-    const { isOpen, setOpen } = useDatePickerContext();
+    const { isOpen, setOpen, setIsDirty } = useDatePickerContext();
     const { value, setValue, getHighlightedCell, refs } = useDateRangeContext();
 
+    useEffect(() => {
+      // Once the menu opens, mark the input as dirty
+      if (isOpen) {
+        setIsDirty(true);
+      }
+    }, [setIsDirty, isOpen]);
+
     /** Called when any calendar cell is clicked */
     const updateValue = (newRange?: DateRangeType) => {
       // TODO: more logic here
@@ -110,10 +112,7 @@ export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
       >
         <div className={menuContentStyles}>
           {showQuickSelection && <QuickSelectionMenu />}
-          <DateRangeMenuCalendars
-            ref={refs.calendarSectionRef}
-            handleValidation={handleValidation}
-          />
+          <DateRangeMenuCalendars ref={refs.calendarSectionRef} />
         </div>
         <DateRangeMenuFooter
           onApply={handleApply}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
index e109d68f06..bbfef38409 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
@@ -9,8 +9,5 @@ import { DateRangeComponentProps } from '../DateRangeComponent';
  */
 export type DateRangeMenuProps = PortalControlProps &
   Pick<PopoverProps, 'refEl'> &
-  Pick<
-    DateRangeComponentProps,
-    'showQuickSelection' | 'handleValidation' | 'onCancel' | 'onClear'
-  > &
+  Pick<DateRangeComponentProps, 'showQuickSelection' | 'onCancel' | 'onClear'> &
   HTMLElementProps<'div'> & {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index b2f1ed5834..388ff5bddb 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -46,12 +46,13 @@ import { DateRangeMenuCalendarsProps } from './DateRangeMenuCalendars.types';
 export const DateRangeMenuCalendars = forwardRef<
   HTMLDivElement,
   DateRangeMenuCalendarsProps
->(({ handleValidation }, fwdRef) => {
+>((_, fwdRef) => {
   const { isInRange, setOpen } = useDatePickerContext();
   const {
     refs,
     value,
     setValue,
+    handleValidation,
     highlight,
     setHighlight,
     month,
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
index 2907b1a275..095e9ca085 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
@@ -1,7 +1,3 @@
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
-import { DateRangeMenuProps } from '../DateRangeMenu.types';
-
-export interface DateRangeMenuCalendarsProps
-  extends Pick<DateRangeMenuProps, 'handleValidation'>,
-    HTMLElementProps<'div'> {}
+export interface DateRangeMenuCalendarsProps extends HTMLElementProps<'div'> {}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 639bd8ef8e..a2f2c8c4da 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -15,7 +15,6 @@ import {
   expectedTabStopLabels,
   getTabStopElementMap,
   renderDateRangePicker,
-  RenderDateRangePickerResult,
 } from './DateRangePicker.testutils';
 import { DateRangePicker } from '.';
 
@@ -370,11 +369,13 @@ describe('packages/date-picker/date-range-picker', () => {
           expect(menuContainerEl).toBeInTheDocument();
         });
 
-        test('focuses on the highlighted cell', () => {
+        test('focuses on the highlighted cell', async () => {
           const { calendarButton, getMenuElements } = renderDateRangePicker();
           userEvent.click(calendarButton);
           const { todayCell } = getMenuElements();
-          expect(todayCell).toHaveFocus();
+          await waitFor(() => {
+            expect(todayCell).toHaveFocus();
+          });
         });
       });
 
@@ -732,30 +733,6 @@ describe('packages/date-picker/date-range-picker', () => {
                 userEvent.tab();
               }
             });
-
-            // const testCases: Array<[number, (typeof tabStops)[number]]> = tabStops.map((stop, n) => [n, stop]);
-            // describe.each(testCases)('Tab %i times', (n, label) => {
-            //   let renderResult: RenderDateRangePickerResult;
-            //   let element: HTMLElement | null;
-
-            //   beforeEach(() => {
-            //     renderResult = renderDateRangePicker();
-            //     element = getTabStopElementMap(renderResult)[label];
-            //     tabNTimes(n);
-            //   });
-
-            //   test(`focus on: ${label}`, () => {
-            //     if (element !== null) {
-            //       expect(element).toHaveFocus();
-            //     } else {
-            //       expect(
-            //         renderResult.inputContainer.contains(
-            //           document.activeElement,
-            //         ),
-            //       ).toBeFalsy();
-            //     }
-            //   });
-            // });
           });
 
           describe('when basic menu is open', () => {
@@ -773,25 +750,6 @@ describe('packages/date-picker/date-range-picker', () => {
                 userEvent.tab();
               }
             });
-            // const testCases: Array<[number, (typeof tabStops)[number]]> = tabStops.map((stop, n) => [n, stop]);
-
-            // describe.each(testCases)(`Tab %i times`, (n, label) => {
-            //   let renderResult: RenderDateRangePickerResult;
-            //   let element: HTMLElement | null;
-
-            //   beforeEach(() => {
-            //     renderResult = renderDateRangePicker({
-            //       showQuickSelection: false,
-            //     });
-            //     renderResult.openMenu();
-            //     element = getTabStopElementMap(renderResult)[label];
-            //     tabNTimes(n);
-            //   });
-
-            //   test(`focus on: ${label}`, () => {
-            //     expect(element).toHaveFocus();
-            //   });
-            // });
           });
 
           describe('when quick-select menu is open', () => {
@@ -809,24 +767,6 @@ describe('packages/date-picker/date-range-picker', () => {
                 userEvent.tab();
               }
             });
-
-            // const testCases: Array<[number, (typeof tabStops)[number]]> = tabStops.map((stop, n) => [n, stop]);
-            // describe.each(testCases)(`Tab %i times`, (n, label) => {
-            //   let element: HTMLElement | null;
-
-            //   beforeEach(() => {
-            //     const renderResult = renderDateRangePicker({
-            //       showQuickSelection: true,
-            //     });
-            //     renderResult.openMenu();
-            //     element = getTabStopElementMap(renderResult)[label];
-            //     tabNTimes(n);
-            //   });
-
-            //   test(`focus on: ${label}`, () => {
-            //     expect(element).toHaveFocus();
-            //   });
-            // });
           });
         });
       });
@@ -862,7 +802,7 @@ describe('packages/date-picker/date-range-picker', () => {
           const onRangeChange = jest.fn();
           const { openMenu } = renderDateRangePicker({ onRangeChange });
           const { todayCell } = openMenu();
-          tabNTimes(8);
+          tabNTimes(7);
           expect(todayCell).toHaveFocus();
           userEvent.keyboard('{enter}');
           expect(onRangeChange).toHaveBeenCalled();
@@ -871,7 +811,7 @@ describe('packages/date-picker/date-range-picker', () => {
         test('if a cell is focused, closes the menu', async () => {
           const { openMenu } = renderDateRangePicker();
           const { todayCell, menuContainerEl } = openMenu();
-          tabNTimes(8);
+          tabNTimes(7);
           expect(todayCell).toHaveFocus();
           userEvent.keyboard('{enter}');
           await waitForElementToBeRemoved(menuContainerEl);
@@ -932,12 +872,15 @@ describe('packages/date-picker/date-range-picker', () => {
           expect(onRangeChange).not.toHaveBeenCalled();
         });
 
-        test('fires a validation handler', () => {
+        test('fires a validation handler', async () => {
           const handleValidation = jest.fn();
           const { openMenu } = renderDateRangePicker({ handleValidation });
           openMenu();
+          userEvent.tab();
           userEvent.keyboard('{escape}');
-          expect(handleValidation).toHaveBeenCalledWith([null, null]);
+          await waitFor(() => {
+            expect(handleValidation).toHaveBeenCalledWith([null, null]);
+          });
         });
 
         test('focus remains in the input element', () => {
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
index 3d2a4a3396..a82b7502fd 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
@@ -145,8 +145,6 @@ export const WithValidation: StoryFn<typeof DateRangePicker> = props => {
     setState(DatePickerState.Error);
   };
 
-  console.log(state);
-
   return (
     <DateRangePicker
       {...props}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
index c563aa5e9b..476faf472f 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
@@ -14,6 +14,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
       value: rangeProp,
       initialValue: initialProp,
       onRangeChange: onChangeProp,
+      handleValidation,
       ...props
     }: DateRangePickerProps,
     fwdRef,
@@ -31,7 +32,12 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
 
     return (
       <DatePickerProvider value={datePickerContextProps}>
-        <DateRangeProvider rootRef={fwdRef} value={value} setValue={setValue}>
+        <DateRangeProvider
+          rootRef={fwdRef}
+          value={value}
+          setValue={setValue}
+          handleValidation={handleValidation}
+        >
           <DateRangeComponent {...restProps} />
         </DateRangeProvider>
       </DatePickerProvider>

From defa9e1f1e7dc14aac71f9bbfc926e6a5dc1305d Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 19 Oct 2023 13:46:14 -0400
Subject: [PATCH 253/351] moves min/max date to global constants

---
 .../DateInput/DateInputSegment/constants.ts   |   6 +-
 .../src/DatePicker/DatePicker.spec.tsx        |   2 +-
 .../DatePickerContext.utils.ts                |   3 +-
 .../DateRangePicker/DateRangePicker.spec.tsx  | 124 +++++++++---------
 packages/date-picker/src/constants.ts         |   3 +
 5 files changed, 72 insertions(+), 66 deletions(-)

diff --git a/packages/date-picker/src/DateInput/DateInputSegment/constants.ts b/packages/date-picker/src/DateInput/DateInputSegment/constants.ts
index 5248f4dd37..fd10be962b 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/constants.ts
+++ b/packages/date-picker/src/DateInput/DateInputSegment/constants.ts
@@ -1,15 +1,17 @@
+import { MAX_DATE, MIN_DATE } from '../../constants';
+
 /** The minimum number for each segment */
 export const defaultMin = {
   day: 1,
   month: 1,
-  year: 1970,
+  year: MIN_DATE.getUTCFullYear(),
 } as const;
 
 /** The maximum number for each segment */
 export const defaultMax = {
   day: 31,
   month: 12,
-  year: 2038,
+  year: MAX_DATE.getUTCFullYear(),
 } as const;
 
 /** The shorthand for each char */
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 1467101d18..118ed8113a 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -366,7 +366,7 @@ describe('packages/date-picker', () => {
           const { yearSelect, calendarGrid } = openMenu();
           userEvent.click(yearSelect!);
           const options = await findAllByRole('option');
-          const _1970 = options[1];
+          const _1970 = options[0];
 
           userEvent.click(_1970);
           expect(calendarGrid).toHaveAttribute('aria-label', 'December 1970');
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
index 8b664b2893..fd03e8264f 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
@@ -4,6 +4,7 @@ import defaultTo from 'lodash/defaultTo';
 
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
+import { MAX_DATE, MIN_DATE } from '../constants';
 import { BaseDatePickerProps, DatePickerState } from '../types';
 import { getFormatParts, toDate } from '../utils';
 
@@ -12,8 +13,6 @@ import {
   DatePickerProviderProps,
 } from './DatePickerContext.types';
 
-export const MIN_DATE = new Date('12-31-1969');
-export const MAX_DATE = new Date('01-19-2038');
 export const TZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
 export type ContextPropKeys = keyof DatePickerProviderProps &
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index a2f2c8c4da..1173bf4144 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -29,74 +29,76 @@ describe('packages/date-picker/date-range-picker', () => {
   describe('Rendering', () => {
     /// Note: Many rendering tests should be handled by Chromatic
 
-    test('renders label', () => {
-      const { getByText } = render(<DateRangePicker label="Label" />);
-      const label = getByText('Label');
-      expect(label).toBeInTheDocument();
-    });
-
-    test('renders description', () => {
-      const { getByText } = render(
-        <DateRangePicker label="Label" description="Description" />,
-      );
-      const description = getByText('Description');
-      expect(description).toBeInTheDocument();
-    });
-
-    test('spreads rest to formField', () => {
-      const { getByTestId } = render(
-        <DateRangePicker label="Label" data-testid="lg-date-range-picker" />,
-      );
-      const formField = getByTestId('lg-date-range-picker');
-      expect(formField).toBeInTheDocument();
-    });
+    describe('Input', () => {
+      test('renders label', () => {
+        const { getByText } = render(<DateRangePicker label="Label" />);
+        const label = getByText('Label');
+        expect(label).toBeInTheDocument();
+      });
 
-    test('formField contains label & input elements', () => {
-      const { getByTestId, getByRole } = render(
-        <DateRangePicker label="Label" data-testid="lg-date-range-picker" />,
-      );
-      const formField = getByTestId('lg-date-range-picker');
-      const inputContainer = getByRole('combobox');
-      expect(formField.querySelector('label')).toBeInTheDocument();
-      expect(formField.querySelector('label')).toHaveTextContent('Label');
-      expect(inputContainer).toBeInTheDocument();
-    });
+      test('renders description', () => {
+        const { getByText } = render(
+          <DateRangePicker label="Label" description="Description" />,
+        );
+        const description = getByText('Description');
+        expect(description).toBeInTheDocument();
+      });
 
-    test('renders 6 inputs', () => {
-      const { inputElements } = renderDateRangePicker();
-      expect(inputElements).toHaveLength(6);
-    });
+      test('spreads rest to formField', () => {
+        const { getByTestId } = render(
+          <DateRangePicker label="Label" data-testid="lg-date-range-picker" />,
+        );
+        const formField = getByTestId('lg-date-range-picker');
+        expect(formField).toBeInTheDocument();
+      });
 
-    test('renders `start` & `end` prop', () => {
-      const { inputElements } = renderDateRangePicker({
-        value: [
-          newUTC(2023, Month.January, 5),
-          newUTC(2023, Month.February, 14),
-        ],
+      test('formField contains label & input elements', () => {
+        const { getByTestId, getByRole } = render(
+          <DateRangePicker label="Label" data-testid="lg-date-range-picker" />,
+        );
+        const formField = getByTestId('lg-date-range-picker');
+        const inputContainer = getByRole('combobox');
+        expect(formField.querySelector('label')).toBeInTheDocument();
+        expect(formField.querySelector('label')).toHaveTextContent('Label');
+        expect(inputContainer).toBeInTheDocument();
       });
-      expect(inputElements[0].value).toEqual('2023');
-      expect(inputElements[1].value).toEqual('01');
-      expect(inputElements[2].value).toEqual('05');
 
-      expect(inputElements[3].value).toEqual('2023');
-      expect(inputElements[4].value).toEqual('02');
-      expect(inputElements[5].value).toEqual('14');
-    });
+      test('renders 6 inputs', () => {
+        const { inputElements } = renderDateRangePicker();
+        expect(inputElements).toHaveLength(6);
+      });
 
-    test('renders `initialStart` & `initialEnd` prop', () => {
-      const { inputElements } = renderDateRangePicker({
-        initialValue: [
-          newUTC(2023, Month.July, 5),
-          newUTC(2023, Month.August, 10),
-        ],
+      test('renders `start` & `end` prop', () => {
+        const { inputElements } = renderDateRangePicker({
+          value: [
+            newUTC(2023, Month.January, 5),
+            newUTC(2023, Month.February, 14),
+          ],
+        });
+        expect(inputElements[0].value).toEqual('2023');
+        expect(inputElements[1].value).toEqual('01');
+        expect(inputElements[2].value).toEqual('05');
+
+        expect(inputElements[3].value).toEqual('2023');
+        expect(inputElements[4].value).toEqual('02');
+        expect(inputElements[5].value).toEqual('14');
       });
-      expect(inputElements[0].value).toEqual('2023');
-      expect(inputElements[1].value).toEqual('07');
-      expect(inputElements[2].value).toEqual('05');
 
-      expect(inputElements[3].value).toEqual('2023');
-      expect(inputElements[4].value).toEqual('08');
-      expect(inputElements[5].value).toEqual('10');
+      test('renders `initialStart` & `initialEnd` prop', () => {
+        const { inputElements } = renderDateRangePicker({
+          initialValue: [
+            newUTC(2023, Month.July, 5),
+            newUTC(2023, Month.August, 10),
+          ],
+        });
+        expect(inputElements[0].value).toEqual('2023');
+        expect(inputElements[1].value).toEqual('07');
+        expect(inputElements[2].value).toEqual('05');
+
+        expect(inputElements[3].value).toEqual('2023');
+        expect(inputElements[4].value).toEqual('08');
+        expect(inputElements[5].value).toEqual('10');
+      });
     });
 
     describe('Menu', () => {
@@ -644,7 +646,7 @@ describe('packages/date-picker/date-range-picker', () => {
             const { yearSelect, calendarGrids } = openMenu();
             userEvent.click(yearSelect!);
             const options = await findAllByRole('option');
-            const _1970 = options[1];
+            const _1970 = options[0];
             userEvent.click(_1970);
             expect(calendarGrids?.[0]).toHaveAttribute(
               'aria-label',
diff --git a/packages/date-picker/src/constants.ts b/packages/date-picker/src/constants.ts
index d6cc90fd70..5b6103ea3c 100644
--- a/packages/date-picker/src/constants.ts
+++ b/packages/date-picker/src/constants.ts
@@ -28,6 +28,9 @@ export enum Month {
 
 export const daysPerWeek = 7 as const;
 
+export const MIN_DATE = new Date(Date.UTC(1970, Month.January, 1));
+export const MAX_DATE = new Date(Date.UTC(2038, Month.January, 19));
+
 export const DaysOfWeek = [
   { long: 'Sunday', short: 'su' },
   { long: 'Monday', short: 'mo' },

From 5bdba83e7106e536f708a282eb304e6c5dd6ab69 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 19 Oct 2023 13:46:17 -0400
Subject: [PATCH 254/351] adds quick range tests

---
 .../DateRangePicker/DateRangeContext/index.ts |   1 +
 .../DateRangeMenu/DateRangeMenu.spec.tsx      | 110 +++++++++++++++++-
 2 files changed, 107 insertions(+), 4 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeContext/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeContext/index.ts
index fc5c139750..44e3bb3894 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeContext/index.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeContext/index.ts
@@ -1 +1,2 @@
 export { DateRangeProvider, useDateRangeContext } from './DateRangeContext';
+export { DateRangeProviderProps } from './DateRangeContext.types';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
index fa8af545e9..542b5130a3 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
@@ -1,10 +1,112 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { subDays } from 'date-fns';
 
-import { DateRangeMenu } from '.';
+import { MIN_DATE, Month } from '../../constants';
+import { DatePickerProvider } from '../../DatePickerContext';
+import { DateRangeType } from '../../types';
+import { newUTC } from '../../utils';
+import {
+  DateRangeProvider,
+  type DateRangeProviderProps,
+} from '../DateRangeContext';
 
-describe('packages/date-range-menu', () => {
-  test.todo(
-    'Quick Select buttons fire a change handler with the correct payload',
+import { DateRangeMenu, type DateRangeMenuProps } from '.';
+
+const renderDateRangeMenu = (
+  props?: Partial<DateRangeMenuProps>,
+  context?: Partial<DateRangeProviderProps>,
+) => {
+  const defaultContext = {
+    value: undefined,
+    setValue: () => {},
+    handleValidation: () => {},
+    rootRef: {} as React.Ref<any>,
+  };
+
+  const results = render(
+    <DatePickerProvider value={{ label: '', initialOpen: true }}>
+      <DateRangeProvider {...defaultContext} {...context}>
+        <DateRangeMenu {...props} />
+      </DateRangeProvider>
+    </DatePickerProvider>,
   );
+
+  return {
+    ...results,
+  };
+};
+
+const testToday = newUTC(2023, Month.December, 26);
+
+describe('packages/date-picker/date-range-picker/menu', () => {
+  beforeEach(() => {
+    // Set the current time to midnight UTC on 2023-12-26
+    jest.useFakeTimers().setSystemTime(testToday);
+  });
+
+  const quickSelectButtonTestCases = [
+    ['Today', [testToday, testToday]],
+    ['Yesterday', [subDays(testToday, 1), subDays(testToday, 1)]],
+    ['Last 7 days', [subDays(testToday, 7), testToday]],
+    ['Last 30 days', [subDays(testToday, 30), testToday]],
+    ['Last 90 days', [subDays(testToday, 90), testToday]],
+    ['Last 12 months', [subDays(testToday, 365), testToday]],
+    ['All time', [MIN_DATE, testToday]],
+  ].map((arr, i) => [i, ...arr]) as Array<[number, string, DateRangeType]>;
+
+  describe('Rendering', () => {
+    describe('Quick select buttons', () => {
+      test('Renders correct label: %p', () => {
+        const { getAllByTestId } = renderDateRangeMenu({
+          showQuickSelection: true,
+        });
+        const quickSelectButtons = getAllByTestId(
+          'lg-date_picker-menu-quick-range-button',
+        );
+
+        for (let i = 0; i < quickSelectButtonTestCases.length; i++) {
+          expect(quickSelectButtons[i]).toHaveAttribute('aria-label', i);
+        }
+      });
+    });
+  });
+
+  describe('Mouse Interaction', () => {
+    describe('Quick Select', () => {
+      describe('Buttons fire the correct change & validation handlers', () => {
+        const onRangeChange = jest.fn();
+        const handleValidation = jest.fn();
+        let quickSelectButtons: Array<HTMLElement>;
+
+        beforeEach(() => {
+          onRangeChange.mockClear();
+          handleValidation.mockClear();
+          const { getAllByTestId } = renderDateRangeMenu(
+            { showQuickSelection: true },
+            { setValue: onRangeChange, handleValidation },
+          );
+          quickSelectButtons = getAllByTestId(
+            'lg-date_picker-menu-quick-range-button',
+          );
+        });
+
+        test.each(quickSelectButtonTestCases)(
+          '%p button',
+          (i, _label, payload) => {
+            userEvent.click(quickSelectButtons[i]);
+            expect(onRangeChange).toHaveBeenCalledWith(payload);
+            expect(handleValidation).toHaveBeenCalledWith(payload);
+          },
+        );
+      });
+    });
+  });
+
+  describe('Keyboard Interaction', () => {
+    describe('Arrow keys', () => {
+      test.todo('');
+    });
+  });
 });

From 3f7ef2b81c11251dc979039e460093d3369d0fae Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 19 Oct 2023 16:37:06 -0400
Subject: [PATCH 255/351] implements quick range buttons

---
 .../DateRangeContext/DateRangeContext.tsx     |   9 +-
 .../DateRangeMenu/DateRangeMenu.spec.tsx      |  91 ---------
 .../QuickSelectionMenu/QuickSelectionMenu.tsx | 111 +++++++----
 .../DateRangePicker/DateRangePicker.spec.tsx  | 175 ++++++++++++------
 .../DateRangePicker.testutils.tsx             |  23 +++
 5 files changed, 222 insertions(+), 187 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx b/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx
index e74fbfe5c4..458ea3d5dc 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx
@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 
-import { DateType } from '../../types';
+import { DateRangeType, DateType } from '../../types';
 import { addMonthsUTC, setToUTCMidnight } from '../../utils';
 import { getInitialHighlight } from '../utils/getInitialHighlight';
 import { getInitialMonth } from '../utils/getInitialMonth';
@@ -31,7 +31,7 @@ export const useDateRangeContext = () => useContext(DateRangeContext);
 export const DateRangeProvider = ({
   children,
   value,
-  setValue,
+  setValue: _setValue,
   handleValidation,
   rootRef,
 }: PropsWithChildren<DateRangeProviderProps>) => {
@@ -40,6 +40,11 @@ export const DateRangeProvider = ({
   const [month, setMonth] = useState<Date>(getInitialMonth(value, today));
   const nextMonth = useMemo(() => addMonthsUTC(month, 1), [month]);
 
+  /** Handle possible side effects here */
+  const setValue = (newRange?: DateRangeType) => {
+    _setValue(newRange);
+  };
+
   // Keep track of the element the user is highlighting with the keyboard
   const [highlight, setHighlight] = useState<DateType>(
     getInitialHighlight(value, today, month),
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
index 542b5130a3..4351732a0a 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
@@ -12,98 +12,7 @@ import {
   type DateRangeProviderProps,
 } from '../DateRangeContext';
 
-import { DateRangeMenu, type DateRangeMenuProps } from '.';
-
-const renderDateRangeMenu = (
-  props?: Partial<DateRangeMenuProps>,
-  context?: Partial<DateRangeProviderProps>,
-) => {
-  const defaultContext = {
-    value: undefined,
-    setValue: () => {},
-    handleValidation: () => {},
-    rootRef: {} as React.Ref<any>,
-  };
-
-  const results = render(
-    <DatePickerProvider value={{ label: '', initialOpen: true }}>
-      <DateRangeProvider {...defaultContext} {...context}>
-        <DateRangeMenu {...props} />
-      </DateRangeProvider>
-    </DatePickerProvider>,
-  );
-
-  return {
-    ...results,
-  };
-};
-
-const testToday = newUTC(2023, Month.December, 26);
-
 describe('packages/date-picker/date-range-picker/menu', () => {
-  beforeEach(() => {
-    // Set the current time to midnight UTC on 2023-12-26
-    jest.useFakeTimers().setSystemTime(testToday);
-  });
-
-  const quickSelectButtonTestCases = [
-    ['Today', [testToday, testToday]],
-    ['Yesterday', [subDays(testToday, 1), subDays(testToday, 1)]],
-    ['Last 7 days', [subDays(testToday, 7), testToday]],
-    ['Last 30 days', [subDays(testToday, 30), testToday]],
-    ['Last 90 days', [subDays(testToday, 90), testToday]],
-    ['Last 12 months', [subDays(testToday, 365), testToday]],
-    ['All time', [MIN_DATE, testToday]],
-  ].map((arr, i) => [i, ...arr]) as Array<[number, string, DateRangeType]>;
-
-  describe('Rendering', () => {
-    describe('Quick select buttons', () => {
-      test('Renders correct label: %p', () => {
-        const { getAllByTestId } = renderDateRangeMenu({
-          showQuickSelection: true,
-        });
-        const quickSelectButtons = getAllByTestId(
-          'lg-date_picker-menu-quick-range-button',
-        );
-
-        for (let i = 0; i < quickSelectButtonTestCases.length; i++) {
-          expect(quickSelectButtons[i]).toHaveAttribute('aria-label', i);
-        }
-      });
-    });
-  });
-
-  describe('Mouse Interaction', () => {
-    describe('Quick Select', () => {
-      describe('Buttons fire the correct change & validation handlers', () => {
-        const onRangeChange = jest.fn();
-        const handleValidation = jest.fn();
-        let quickSelectButtons: Array<HTMLElement>;
-
-        beforeEach(() => {
-          onRangeChange.mockClear();
-          handleValidation.mockClear();
-          const { getAllByTestId } = renderDateRangeMenu(
-            { showQuickSelection: true },
-            { setValue: onRangeChange, handleValidation },
-          );
-          quickSelectButtons = getAllByTestId(
-            'lg-date_picker-menu-quick-range-button',
-          );
-        });
-
-        test.each(quickSelectButtonTestCases)(
-          '%p button',
-          (i, _label, payload) => {
-            userEvent.click(quickSelectButtons[i]);
-            expect(onRangeChange).toHaveBeenCalledWith(payload);
-            expect(handleValidation).toHaveBeenCalledWith(payload);
-          },
-        );
-      });
-    });
-  });
-
   describe('Keyboard Interaction', () => {
     describe('Arrow keys', () => {
       test.todo('');
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
index 9a81df3835..7b5dc994f9 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
@@ -1,15 +1,28 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import { forwardRef } from 'react';
+import { addDays } from 'date-fns';
+import { isFinite } from 'lodash';
 import range from 'lodash/range';
+import { DateRangeType } from 'src/types';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Option, Select } from '@leafygreen-ui/select';
 import { Overline } from '@leafygreen-ui/typography';
 
-import { Months, selectElementProps } from '../../../constants';
+import {
+  MAX_DATE,
+  MIN_DATE,
+  Months,
+  selectElementProps,
+} from '../../../constants';
 import { useDatePickerContext } from '../../../DatePickerContext';
-import { setUTCMonth, setUTCYear } from '../../../utils';
+import {
+  isSameUTCMonth,
+  setToUTCMidnight,
+  setUTCMonth,
+  setUTCYear,
+} from '../../../utils';
 import { useDateRangeContext } from '../../DateRangeContext';
 
 import { QuickRangeButton } from './QuickRangeButton';
@@ -21,6 +34,22 @@ import {
   quickSelectMenuThemeStyles,
 } from './QuickSelectionMenu.styles';
 
+interface QuickRangeConfigObject {
+  id: string;
+  label: string;
+  relativeRange: [number, number];
+}
+
+const quickRangeButtonsConfig: Array<QuickRangeConfigObject> = [
+  { id: 'today', label: 'Today', relativeRange: [0, 0] },
+  { id: 'yesterday', label: 'Yesterday', relativeRange: [-1, -1] },
+  { id: 'last7', label: 'Last 7 days', relativeRange: [-7, 0] },
+  { id: 'last30', label: 'Last 30 days', relativeRange: [-30, 0] },
+  { id: 'last90', label: 'Last 90 days', relativeRange: [-90, 0] },
+  { id: 'last12', label: 'Last 12 months', relativeRange: [-365, 0] },
+  { id: 'all-time', label: 'All time', relativeRange: [-Infinity, 0] },
+];
+
 interface QuickSelectionMenuProps {}
 
 export const QuickSelectionMenu = forwardRef<
@@ -28,8 +57,9 @@ export const QuickSelectionMenu = forwardRef<
   QuickSelectionMenuProps
 >((_, fwdRef) => {
   const { theme } = useDarkMode();
-  const { min, max, isInRange } = useDatePickerContext();
-  const { month, setMonth, refs } = useDateRangeContext();
+  const { setOpen, min, max, isInRange } = useDatePickerContext();
+  const { setValue, handleValidation, month, setMonth, refs, today } =
+    useDateRangeContext();
 
   // TODO: is this the right logic?
   const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
@@ -41,6 +71,37 @@ export const QuickSelectionMenu = forwardRef<
     }
   };
 
+  const updateValue = (range?: DateRangeType) => {
+    // When the value changes,
+    if (range && range[0] && !isSameUTCMonth(range[0], month)) {
+      updateMonth(setToUTCMidnight(range[0]));
+    }
+
+    handleValidation?.(range);
+    setValue(range);
+  };
+
+  const quickRangeButtonHandler =
+    (id: string): MouseEventHandler<HTMLButtonElement> =>
+    () => {
+      const quickRange = quickRangeButtonsConfig.find(r => r.id === id);
+
+      if (quickRange) {
+        const relativeStart = quickRange.relativeRange[0];
+        const relativeEnd = quickRange.relativeRange[1];
+
+        const start = isFinite(relativeStart)
+          ? addDays(today, relativeStart)
+          : MIN_DATE;
+        const end = isFinite(relativeEnd)
+          ? addDays(today, relativeEnd)
+          : MAX_DATE;
+
+        updateValue([start, end]);
+        setOpen(false);
+      }
+    };
+
   return (
     <div
       ref={fwdRef}
@@ -87,38 +148,14 @@ export const QuickSelectionMenu = forwardRef<
       </div>
       <div className={quickSelectMenuSelectionsContainerStyles}>
         <Overline>Quick Ranges:</Overline>
-        {/*
-           TODO: this functionality
-           Do we want to set these up in some config object?
-           */}
-        <QuickRangeButton
-          ref={refs.quickRangeButtonRefs('today')}
-          label="Today"
-        />
-        <QuickRangeButton
-          ref={refs.quickRangeButtonRefs('yesterday')}
-          label="Yesterday"
-        />
-        <QuickRangeButton
-          ref={refs.quickRangeButtonRefs('last7')}
-          label="Last 7 days"
-        />
-        <QuickRangeButton
-          ref={refs.quickRangeButtonRefs('last30')}
-          label="Last 30 days"
-        />
-        <QuickRangeButton
-          ref={refs.quickRangeButtonRefs('last90')}
-          label="Last 90 days"
-        />
-        <QuickRangeButton
-          ref={refs.quickRangeButtonRefs('last12')}
-          label="Last 12 months"
-        />
-        <QuickRangeButton
-          ref={refs.quickRangeButtonRefs('all-time')}
-          label="All time"
-        />
+        {quickRangeButtonsConfig.map(({ id, label }) => (
+          <QuickRangeButton
+            key={id}
+            ref={refs.quickRangeButtonRefs(id)}
+            label={label}
+            onClick={quickRangeButtonHandler(id)}
+          />
+        ))}
       </div>
     </div>
   );
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 1173bf4144..774da9ef27 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -14,6 +14,7 @@ import { newUTC, setUTCDate } from '../utils';
 import {
   expectedTabStopLabels,
   getTabStopElementMap,
+  quickSelectButtonTestCases,
   renderDateRangePicker,
 } from './DateRangePicker.testutils';
 import { DateRangePicker } from '.';
@@ -117,7 +118,9 @@ describe('packages/date-picker/date-range-picker', () => {
       });
 
       test('if no value is set, menu opens to current month', () => {
-        const { openMenu } = renderDateRangePicker();
+        const { openMenu } = renderDateRangePicker({
+          // initialOpen: true,
+        });
         const { calendarGrids, menuContainerEl } = openMenu();
 
         const headers = menuContainerEl?.querySelectorAll('h6');
@@ -183,6 +186,26 @@ describe('packages/date-picker/date-range-picker', () => {
         const { calendarCells } = openMenu();
         expect(calendarCells).toHaveLength(29 + 31);
       });
+
+      describe('Quick select buttons', () => {
+        test.each(quickSelectButtonTestCases)(
+          'Renders correct label: $label',
+          ({ index, label }) => {
+            const { getAllByTestId } = renderDateRangePicker({
+              initialOpen: true,
+              showQuickSelection: true,
+            });
+            const quickSelectButtons = getAllByTestId(
+              'lg-date_picker-menu-quick-range-button',
+            );
+
+            expect(quickSelectButtons[index]).toHaveAttribute(
+              'aria-label',
+              label,
+            );
+          },
+        );
+      });
     });
   });
 
@@ -307,76 +330,85 @@ describe('packages/date-picker/date-range-picker', () => {
         });
       });
     });
+
+    // e.g. selected range is 2023-09-10 -> 2023-10-14
+    // change start date to 2024 or end date to 2023
+    // should reject input and revert
+    test.todo(
+      'Entering an invalid date into start/end rejects the input, and reverts to the previous value',
+    );
   });
 
   describe('Interaction', () => {
     describe('Mouse interaction', () => {
-      describe('Clicking the input', () => {
-        test('opens the menu', () => {
-          const { inputContainer, getMenuElements } = renderDateRangePicker();
-          userEvent.click(inputContainer);
-          const { menuContainerEl } = getMenuElements();
-          expect(menuContainerEl).toBeInTheDocument();
-        });
+      describe('Input', () => {
+        describe('Clicking the input', () => {
+          test('opens the menu', () => {
+            const { inputContainer, getMenuElements } = renderDateRangePicker();
+            userEvent.click(inputContainer);
+            const { menuContainerEl } = getMenuElements();
+            expect(menuContainerEl).toBeInTheDocument();
+          });
 
-        test('focuses the clicked segment', () => {
-          const { inputElements } = renderDateRangePicker();
-          userEvent.click(inputElements[2]);
-          expect(document.activeElement).toBe(inputElements[2]);
-        });
+          test('focuses the clicked segment', () => {
+            const { inputElements } = renderDateRangePicker();
+            userEvent.click(inputElements[2]);
+            expect(document.activeElement).toBe(inputElements[2]);
+          });
 
-        test('focuses the first segment when all are empty (`undefined`)', () => {
-          const { inputContainer, inputElements } = renderDateRangePicker();
-          userEvent.click(inputContainer);
-          expect(document.activeElement).toBe(inputElements[0]);
-        });
+          test('focuses the first segment when all are empty (`undefined`)', () => {
+            const { inputContainer, inputElements } = renderDateRangePicker();
+            userEvent.click(inputContainer);
+            expect(document.activeElement).toBe(inputElements[0]);
+          });
 
-        test('focuses the first segment when all are empty (`[null, null]`)', () => {
-          const { inputContainer, inputElements } = renderDateRangePicker({
-            value: [null, null],
+          test('focuses the first segment when all are empty (`[null, null]`)', () => {
+            const { inputContainer, inputElements } = renderDateRangePicker({
+              value: [null, null],
+            });
+            userEvent.click(inputContainer);
+            expect(document.activeElement).toBe(inputElements[0]);
           });
-          userEvent.click(inputContainer);
-          expect(document.activeElement).toBe(inputElements[0]);
-        });
 
-        test('focuses the first empty segment in start input', () => {
-          const { inputContainer, inputElements } = renderDateRangePicker();
-          userEvent.type(inputElements[0], '01');
-          userEvent.click(inputContainer);
-          expect(document.activeElement).toBe(inputElements[1]);
-        });
+          test('focuses the first empty segment in start input', () => {
+            const { inputContainer, inputElements } = renderDateRangePicker();
+            userEvent.type(inputElements[0], '01');
+            userEvent.click(inputContainer);
+            expect(document.activeElement).toBe(inputElements[1]);
+          });
 
-        test('focuses the first empty segment in end input when start value is set', () => {
-          const { inputContainer, inputElements } = renderDateRangePicker({
-            value: [newUTC(2023, 1, 1), null],
+          test('focuses the first empty segment in end input when start value is set', () => {
+            const { inputContainer, inputElements } = renderDateRangePicker({
+              value: [newUTC(2023, 1, 1), null],
+            });
+            userEvent.click(inputContainer);
+            expect(document.activeElement).toBe(inputElements[3]);
           });
-          userEvent.click(inputContainer);
-          expect(document.activeElement).toBe(inputElements[3]);
-        });
 
-        test('focuses the last segment when all are filled', () => {
-          const { inputContainer, inputElements } = renderDateRangePicker({
-            value: [newUTC(2023, 1, 1), newUTC(2023, 1, 14)],
+          test('focuses the last segment when all are filled', () => {
+            const { inputContainer, inputElements } = renderDateRangePicker({
+              value: [newUTC(2023, 1, 1), newUTC(2023, 1, 14)],
+            });
+            userEvent.click(inputContainer);
+            expect(document.activeElement).toBe(inputElements[5]);
           });
-          userEvent.click(inputContainer);
-          expect(document.activeElement).toBe(inputElements[5]);
         });
-      });
 
-      describe('Clicking the Calendar button', () => {
-        test('opens the menu', () => {
-          const { calendarButton, getMenuElements } = renderDateRangePicker();
-          userEvent.click(calendarButton);
-          const { menuContainerEl } = getMenuElements();
-          expect(menuContainerEl).toBeInTheDocument();
-        });
+        describe('Clicking the Calendar button', () => {
+          test('opens the menu', () => {
+            const { calendarButton, getMenuElements } = renderDateRangePicker();
+            userEvent.click(calendarButton);
+            const { menuContainerEl } = getMenuElements();
+            expect(menuContainerEl).toBeInTheDocument();
+          });
 
-        test('focuses on the highlighted cell', async () => {
-          const { calendarButton, getMenuElements } = renderDateRangePicker();
-          userEvent.click(calendarButton);
-          const { todayCell } = getMenuElements();
-          await waitFor(() => {
-            expect(todayCell).toHaveFocus();
+          test('focuses on the highlighted cell', async () => {
+            const { calendarButton, getMenuElements } = renderDateRangePicker();
+            userEvent.click(calendarButton);
+            const { todayCell } = getMenuElements();
+            await waitFor(() => {
+              expect(todayCell).toHaveFocus();
+            });
           });
         });
       });
@@ -658,9 +690,35 @@ describe('packages/date-picker/date-range-picker', () => {
             );
           });
         });
+
+        describe('Quick range buttons', () => {
+          test.each(quickSelectButtonTestCases)(
+            '$label button fires the correct change & validation handlers',
+            ({ index, expectedRange }) => {
+              const onRangeChange = jest.fn();
+              const handleValidation = jest.fn();
+              const { getAllByTestId } = renderDateRangePicker({
+                initialOpen: true,
+                showQuickSelection: true,
+                onRangeChange,
+                handleValidation,
+              });
+              const quickSelectButtons = getAllByTestId(
+                'lg-date_picker-menu-quick-range-button',
+              );
+              userEvent.click(quickSelectButtons[index]);
+              expect(onRangeChange).toHaveBeenCalledWith(expectedRange);
+              expect(handleValidation).toHaveBeenCalledWith(expectedRange);
+            },
+          );
+        });
+
+        test.todo(
+          'When value changes via quick ranges, update the displayed month',
+        );
       });
 
-      describe('Clicking backdrop', () => {
+      describe('Backdrop', () => {
         test('closes the menu', async () => {
           const { openMenu, container } = renderDateRangePicker();
           const { menuContainerEl } = openMenu();
@@ -876,7 +934,10 @@ describe('packages/date-picker/date-range-picker', () => {
 
         test('fires a validation handler', async () => {
           const handleValidation = jest.fn();
-          const { openMenu } = renderDateRangePicker({ handleValidation });
+          const { openMenu } = renderDateRangePicker({
+            handleValidation,
+            value: [null, null],
+          });
           openMenu();
           userEvent.tab();
           userEvent.keyboard('{escape}');
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
index 0d5ce6f3cd..7fadec0635 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
@@ -5,9 +5,32 @@ import {
   RenderResult,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { subDays } from 'date-fns';
+
+import { MIN_DATE, Month } from '../constants';
+import { newUTC } from '../utils';
 
 import { DateRangePicker, DateRangePickerProps } from '.';
 
+const testToday = newUTC(2023, Month.December, 26);
+
+/** Explicit test cases for quick range buttons */
+export const quickSelectButtonTestCases = [
+  { label: 'Today', expectedRange: [testToday, testToday] },
+  {
+    label: 'Yesterday',
+    expectedRange: [subDays(testToday, 1), subDays(testToday, 1)],
+  },
+  { label: 'Last 7 days', expectedRange: [subDays(testToday, 7), testToday] },
+  { label: 'Last 30 days', expectedRange: [subDays(testToday, 30), testToday] },
+  { label: 'Last 90 days', expectedRange: [subDays(testToday, 90), testToday] },
+  {
+    label: 'Last 12 months',
+    expectedRange: [subDays(testToday, 365), testToday],
+  },
+  { label: 'All time', expectedRange: [MIN_DATE, testToday] },
+].map((arr, index) => ({ index, ...arr }));
+
 export interface RenderDateRangePickerResult extends RenderResult {
   formField: HTMLElement;
   inputContainer: HTMLElement;

From 26803d3526b343b9fd91a7d6403080c91bff3f63 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 20 Oct 2023 12:55:37 -0400
Subject: [PATCH 256/351] completes todo test

---
 .../src/DatePicker/DatePicker.spec.tsx        | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 118ed8113a..46bfee8386 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -344,9 +344,18 @@ describe('packages/date-picker', () => {
           userEvent.click(Jan);
           expect(calendarGrid).toHaveAttribute('aria-label', 'January 2023');
         });
-        test.todo(
-          'making a selection with enter does not close the datePicker menu',
-        );
+
+        test('making a selection with enter does not close the datePicker menu', async () => {
+          const { openMenu, findAllByRole } = renderDatePicker();
+          const { monthSelect, menuContainerEl } = openMenu();
+          userEvent.click(monthSelect!);
+          await findAllByRole('option');
+          userEvent.keyboard('{arrowdown}');
+          userEvent.keyboard('{enter}');
+          await waitFor(() => {
+            expect(menuContainerEl).toBeInTheDocument();
+          });
+        });
       });
 
       describe('Year select menu', () => {
@@ -371,6 +380,18 @@ describe('packages/date-picker', () => {
           userEvent.click(_1970);
           expect(calendarGrid).toHaveAttribute('aria-label', 'December 1970');
         });
+
+        test('making a selection with enter does not close the datePicker menu', async () => {
+          const { openMenu, findAllByRole } = renderDatePicker();
+          const { yearSelect, menuContainerEl } = openMenu();
+          userEvent.click(yearSelect!);
+          await findAllByRole('option');
+          userEvent.keyboard('{arrowdown}');
+          userEvent.keyboard('{enter}');
+          await waitFor(() => {
+            expect(menuContainerEl).toBeInTheDocument();
+          });
+        });
       });
 
       describe('Clicking backdrop', () => {

From 119660af8e4b6084609a17119dfc5fe373f486df Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 20 Oct 2023 18:20:48 -0400
Subject: [PATCH 257/351] Adds missing tests

---
 .../Calendar/CalendarCell/CalendarCell.tsx    |   1 +
 .../DatePickerInput/DatePickerInput.spec.tsx  |   4 +-
 .../DateRangeComponent.spec.tsx               |  71 ---
 .../DateRangeMenu/DateRangeMenu.spec.tsx      | 209 ++++++-
 .../DateRangeMenuCalendars.tsx                |  13 +-
 .../DateRangePicker/DateRangeMenu/index.ts    |   3 +-
 .../DateRangePicker/DateRangePicker.spec.tsx  | 572 +++++++++++++-----
 .../DateRangePicker.testutils.tsx             |   4 +-
 8 files changed, 626 insertions(+), 251 deletions(-)
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx

diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
index 5ffbac0eab..b387822500 100644
--- a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
@@ -85,6 +85,7 @@ export const CalendarCell = React.forwardRef<
       <td
         ref={ref}
         role="gridcell"
+        data-testid="lg-date_picker-calendar_cell"
         data-highlighted={isHighlighted}
         aria-current={isCurrent}
         aria-selected={isActive}
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 860e464aee..a11bd8efd2 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -12,12 +12,12 @@ import { defaultDatePickerContext } from '../../DatePickerContext/DatePickerCont
 import { DatePickerInput, DatePickerInputProps } from '.';
 
 const renderDatePickerInput = (
-  props?: Omit<DatePickerInputProps, 'segmentRefs'>,
+  props?: Omit<DatePickerInputProps, 'segmentRefs' | 'setValue'>,
   context?: DatePickerProviderProps,
 ) => {
   const result = render(
     <DatePickerProvider value={{ ...defaultDatePickerContext, ...context }}>
-      <DatePickerInput {...props} />
+      <DatePickerInput {...props} setValue={() => {}} />
     </DatePickerProvider>,
   );
 
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx
deleted file mode 100644
index 20231bbd04..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.spec.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { Month } from '../../constants';
-
-import { DateRangeComponent } from '.';
-
-const testToday = new Date(Date.UTC(2023, Month.September, 10));
-
-describe('packages/date-picker/date-range-picker/date-range-component', () => {
-  describe('Rendering', () => {
-    test.todo('renders two calendar grids');
-    test.todo('left calendar is labelled as the current month');
-    test.todo('right calendar is labelled as the following month');
-    test.todo('chevrons have aria labels');
-
-    describe('rendered cells', () => {
-      test.todo('have correct `aria-label`');
-    });
-
-    describe('with quick select menu', () => {
-      test.todo('select menu triggers have aria labels');
-      test.todo('select menus have correct values');
-      test.todo('quick select buttons are rendered');
-    });
-
-    describe('when value is updated', () => {
-      test.todo('grid is labelled as the current month');
-      test.todo('select menus have correct values');
-    });
-
-    test.todo('default highlight is on today');
-    test.todo('highlight starts on start value when provided');
-    test.todo('highlight starts on end value when only end provided');
-  });
-
-  describe('Keyboard navigation', () => {
-    describe('Arrow Keys', () => {
-      test.todo('left arrow moves focus to the previous day');
-      test.todo('right arrow moves focus to the next day');
-      test.todo('up arrow moves focus to the previous week');
-      test.todo('down arrow moves focus to the next week');
-
-      describe('when next day would be out of range', () => {
-        const props = {
-          // value: testToday,
-        };
-
-        test.todo('left arrow does nothing');
-        test.todo('right arrow does nothing');
-        test.todo('up arrow does nothing');
-        test.todo('down arrow does nothing');
-      });
-
-      describe('update the displayed month', () => {
-        test.todo('left arrow updates displayed month to previous');
-        test.todo('right arrow updates displayed month to next');
-        test.todo('up arrow updates displayed month to previous');
-        test.todo('down arrow updates displayed month to next');
-        test.todo('does not update month when month does not need to change');
-      });
-
-      describe('when month should be updated', () => {
-        test.todo('left arrow focuses the previous day');
-        test.todo('right arrow focuses the next day');
-        test.todo('up arrow focuses the previous week');
-        test.todo('down arrow focuses the next week');
-      });
-    });
-  });
-});
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
index 4351732a0a..162064b6c4 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
@@ -1,21 +1,218 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { subDays } from 'date-fns';
+import { addDays, subDays } from 'date-fns';
 
-import { MIN_DATE, Month } from '../../constants';
-import { DatePickerProvider } from '../../DatePickerContext';
+import { Month } from '../../constants';
+import {
+  DatePickerProvider,
+  DatePickerProviderProps,
+  defaultDatePickerContext,
+} from '../../DatePickerContext';
 import { DateRangeType } from '../../types';
 import { newUTC } from '../../utils';
 import {
   DateRangeProvider,
   type DateRangeProviderProps,
 } from '../DateRangeContext';
+import { testToday } from '../DateRangePicker.testutils';
+
+import { DateRangeMenu, type DateRangeMenuProps } from '.';
+
+const renderDateRangeMenu = (args?: {
+  props?: DateRangeMenuProps;
+  rangeContext?: Partial<DateRangeProviderProps>;
+  datePickerContext?: Partial<DatePickerProviderProps>;
+}) => {
+  const results = render(
+    <DatePickerProvider
+      value={{
+        ...defaultDatePickerContext,
+        ...args?.datePickerContext,
+        initialOpen: true,
+      }}
+    >
+      <DateRangeProvider
+        value={undefined}
+        setValue={() => {}}
+        handleValidation={() => {}}
+        rootRef={React.createRef()}
+        {...args?.rangeContext}
+      >
+        <DateRangeMenu {...args?.props} />
+      </DateRangeProvider>
+    </DatePickerProvider>,
+  );
+
+  const calendarCells = results.getAllByTestId('lg-date_picker-calendar_cell');
+  const todayCell = calendarCells.find(
+    cell => cell.getAttribute('aria-current') === 'true',
+  );
+  const getCellForDate = (date: Date) =>
+    calendarCells.find(cell => cell.dataset.iso === date.toISOString());
+
+  return { ...results, calendarCells, todayCell, getCellForDate };
+};
 
 describe('packages/date-picker/date-range-picker/menu', () => {
-  describe('Keyboard Interaction', () => {
-    describe('Arrow keys', () => {
-      test.todo('');
+  beforeAll(() => {
+    // Set the current time to midnight UTC on 2023-12-26
+    jest.useFakeTimers().setSystemTime(testToday);
+  });
+
+  test('initial focus is on `today`', () => {
+    const { todayCell } = renderDateRangeMenu();
+    expect(todayCell).toHaveFocus();
+  });
+
+  describe('Keyboard navigation', () => {
+    describe('Arrow Keys', () => {
+      const initialStart = newUTC(2023, Month.September, 14);
+      const value = [initialStart, null] as DateRangeType;
+      const rangeContext = { value };
+
+      describe('default behavior', () => {
+        test('left arrow moves focus to the previous day', () => {
+          const { getCellForDate } = renderDateRangeMenu({ rangeContext });
+          userEvent.keyboard('{leftarrow}');
+          const focusedCell = getCellForDate(subDays(initialStart, 1));
+          expect(focusedCell).toHaveFocus();
+        });
+        test('right arrow moves focus to the next day', () => {
+          const { getCellForDate } = renderDateRangeMenu({ rangeContext });
+          userEvent.keyboard('{rightarrow}');
+          const focusedCell = getCellForDate(addDays(initialStart, 1));
+          expect(focusedCell).toHaveFocus();
+        });
+        test('up arrow moves focus to the previous week', () => {
+          const { getCellForDate } = renderDateRangeMenu({ rangeContext });
+          userEvent.keyboard('{uparrow}');
+          const focusedCell = getCellForDate(subDays(initialStart, 7));
+          expect(focusedCell).toHaveFocus();
+        });
+        test('down arrow moves focus to the next week', () => {
+          const { getCellForDate } = renderDateRangeMenu({ rangeContext });
+          userEvent.keyboard('{downarrow}');
+          const focusedCell = getCellForDate(addDays(initialStart, 7));
+          expect(focusedCell).toHaveFocus();
+        });
+      });
+
+      describe('when next day would be out of range', () => {
+        test('left arrow does nothing', () => {
+          const { getCellForDate } = renderDateRangeMenu({
+            rangeContext,
+            datePickerContext: { min: subDays(initialStart, 1) },
+          });
+          userEvent.keyboard('{leftarrow}');
+          const focusedCell = getCellForDate(initialStart);
+          expect(focusedCell).toHaveFocus();
+        });
+        test('right arrow does nothing', () => {
+          const { getCellForDate } = renderDateRangeMenu({
+            rangeContext,
+            datePickerContext: { max: addDays(initialStart, 1) },
+          });
+          userEvent.keyboard('{rightarrow}');
+          const focusedCell = getCellForDate(initialStart);
+          expect(focusedCell).toHaveFocus();
+        });
+        test('up arrow does nothing', () => {
+          const { getCellForDate } = renderDateRangeMenu({
+            rangeContext,
+            datePickerContext: { min: subDays(initialStart, 6) },
+          });
+          userEvent.keyboard('{uparrow}');
+          const focusedCell = getCellForDate(initialStart);
+          expect(focusedCell).toHaveFocus();
+        });
+        test('down arrow does nothing', () => {
+          const { getCellForDate } = renderDateRangeMenu({
+            rangeContext,
+            datePickerContext: { max: addDays(initialStart, 7) },
+          });
+          userEvent.keyboard('{downarrow}');
+          const focusedCell = getCellForDate(initialStart);
+          expect(focusedCell).toHaveFocus();
+        });
+      });
+
+      describe('update the displayed month', () => {
+        test('left arrow updates displayed month to previous', () => {
+          const { getAllByRole } = renderDateRangeMenu({
+            rangeContext: { value: [newUTC(2023, Month.September, 1), null] },
+          });
+          userEvent.keyboard('{leftarrow}');
+          const calendarGrids = getAllByRole('grid');
+          expect(calendarGrids[0]).toHaveAttribute('aria-label', 'August 2023');
+        });
+        test('right arrow updates displayed month to next', () => {
+          const { getAllByRole } = renderDateRangeMenu({
+            rangeContext: { value: [newUTC(2023, Month.September, 30), null] },
+          });
+          userEvent.keyboard('{rightarrow}');
+          const calendarGrids = getAllByRole('grid');
+          expect(calendarGrids[0]).toHaveAttribute(
+            'aria-label',
+            'October 2023',
+          );
+        });
+        test('up arrow updates displayed month to previous', () => {
+          const { getAllByRole } = renderDateRangeMenu({
+            rangeContext: { value: [newUTC(2023, Month.September, 6), null] },
+          });
+          userEvent.keyboard('{uparrow}');
+          const calendarGrids = getAllByRole('grid');
+          expect(calendarGrids[0]).toHaveAttribute('aria-label', 'August 2023');
+        });
+        test('down arrow updates displayed month to next', () => {
+          const { getAllByRole } = renderDateRangeMenu({
+            rangeContext: { value: [newUTC(2023, Month.September, 24), null] },
+          });
+          userEvent.keyboard('{downarrow}');
+          const calendarGrids = getAllByRole('grid');
+          expect(calendarGrids[0]).toHaveAttribute(
+            'aria-label',
+            'October 2023',
+          );
+        });
+        test.todo('does not update month when month does not need to change');
+      });
+
+      describe('when month should be updated', () => {
+        test('left arrow focuses the previous day', () => {
+          const { getCellForDate } = renderDateRangeMenu({
+            rangeContext: { value: [newUTC(2023, Month.September, 1), null] },
+          });
+          userEvent.keyboard('{leftarrow}');
+          const focusedCell = getCellForDate(newUTC(2023, Month.August, 31));
+          expect(focusedCell).toHaveFocus();
+        });
+        test('right arrow focuses the next day', () => {
+          const { getCellForDate } = renderDateRangeMenu({
+            rangeContext: { value: [newUTC(2023, Month.September, 30), null] },
+          });
+          userEvent.keyboard('{rightarrow}');
+          const focusedCell = getCellForDate(newUTC(2023, Month.October, 1));
+          expect(focusedCell).toHaveFocus();
+        });
+        test('up arrow focuses the previous week', () => {
+          const { getCellForDate } = renderDateRangeMenu({
+            rangeContext: { value: [newUTC(2023, Month.September, 6), null] },
+          });
+          userEvent.keyboard('{uparrow}');
+          const focusedCell = getCellForDate(newUTC(2023, Month.August, 31));
+          expect(focusedCell).toHaveFocus();
+        });
+        test('down arrow focuses the next week', () => {
+          const { getCellForDate } = renderDateRangeMenu({
+            rangeContext: { value: [newUTC(2023, Month.September, 24), null] },
+          });
+          userEvent.keyboard('{downarrow}');
+          const focusedCell = getCellForDate(newUTC(2023, Month.October, 1));
+          expect(focusedCell).toHaveFocus();
+        });
+      });
     });
   });
 });
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
index 388ff5bddb..d39bd7e180 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
@@ -2,6 +2,7 @@ import React, {
   forwardRef,
   KeyboardEventHandler,
   MouseEventHandler,
+  useLayoutEffect,
   useState,
 } from 'react';
 import { addDays, isWithinInterval, subDays } from 'date-fns';
@@ -9,6 +10,7 @@ import isNull from 'lodash/isNull';
 import isUndefined from 'lodash/isUndefined';
 
 import { cx } from '@leafygreen-ui/emotion';
+import { usePrevious } from '@leafygreen-ui/hooks';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import { keyMap } from '@leafygreen-ui/lib';
@@ -47,7 +49,7 @@ export const DateRangeMenuCalendars = forwardRef<
   HTMLDivElement,
   DateRangeMenuCalendarsProps
 >((_, fwdRef) => {
-  const { isInRange, setOpen } = useDatePickerContext();
+  const { isInRange, isOpen, setOpen } = useDatePickerContext();
   const {
     refs,
     value,
@@ -61,8 +63,17 @@ export const DateRangeMenuCalendars = forwardRef<
     today,
   } = useDateRangeContext();
 
+  const prevOpen = usePrevious(isOpen);
   const [hoveredCell, setHover] = useState<DateType>(null);
 
+  /** On initial open, focus the cell */
+  useLayoutEffect(() => {
+    if (highlight && isOpen && !prevOpen) {
+      const highlightCellRef = refs.calendarCellRefs(highlight.toISOString());
+      highlightCellRef.current?.focus();
+    }
+  }, [highlight, isOpen, prevOpen, refs]);
+
   /**
    * setDisplayMonth with side effects
    */
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/index.ts
index cf65c781fb..e66e2b00e5 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/index.ts
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/index.ts
@@ -1,3 +1,2 @@
-
-export  { DateRangeMenu } from './DateRangeMenu';
+export { DateRangeMenu } from './DateRangeMenu';
 export { DateRangeMenuProps } from './DateRangeMenu.types';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
index 774da9ef27..a9a5ef3880 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -3,13 +3,14 @@ import {
   render,
   waitFor,
   waitForElementToBeRemoved,
+  within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import last from 'lodash/last';
 
 import { Month } from '../constants';
 import { eventContainingTargetValue, tabNTimes } from '../testUtils';
-import { newUTC, setUTCDate } from '../utils';
+import { newUTC, setUTCDate, setUTCMonth } from '../utils';
 
 import {
   expectedTabStopLabels,
@@ -22,7 +23,7 @@ import { DateRangePicker } from '.';
 const testToday = newUTC(2023, Month.December, 26);
 
 describe('packages/date-picker/date-range-picker', () => {
-  beforeEach(() => {
+  beforeAll(() => {
     // Set the current time to midnight UTC on 2023-12-26
     jest.useFakeTimers().setSystemTime(testToday);
   });
@@ -117,77 +118,192 @@ describe('packages/date-picker/date-range-picker', () => {
         await waitFor(() => expect(menuContainerEl).toBeInTheDocument());
       });
 
-      test('if no value is set, menu opens to current month', () => {
-        const { openMenu } = renderDateRangePicker({
-          // initialOpen: true,
+      test('renders two calendar grids', () => {
+        const { getMenuElements } = renderDateRangePicker({
+          initialOpen: true,
         });
-        const { calendarGrids, menuContainerEl } = openMenu();
-
-        const headers = menuContainerEl?.querySelectorAll('h6');
-        expect(headers?.[0]).toHaveTextContent('December 2023');
-        expect(headers?.[1]).toHaveTextContent('January 2024');
+        const { calendarGrids } = getMenuElements();
+        expect(calendarGrids).toHaveLength(2);
+      });
 
-        expect(calendarGrids?.[0]).toHaveAttribute(
-          'aria-label',
-          'December 2023',
-        );
-        expect(calendarGrids?.[1]).toHaveAttribute(
-          'aria-label',
-          'January 2024',
-        );
+      test('chevrons have correct `aria-label`s', () => {
+        const { getMenuElements } = renderDateRangePicker({
+          initialOpen: true,
+        });
+        const { leftChevron, rightChevron } = getMenuElements();
+        expect(leftChevron).toHaveAttribute('aria-label', 'Previous month');
+        expect(rightChevron).toHaveAttribute('aria-label', 'Next month');
       });
 
-      test('if only a start value is set, menu opens to the month of that value', () => {
-        const { openMenu } = renderDateRangePicker({
-          value: [newUTC(2023, Month.March, 10), null],
+      describe('Displayed month', () => {
+        test('if no value is set, menu displays current month', () => {
+          const { getMenuElements } = renderDateRangePicker({
+            initialOpen: true,
+          });
+          const { calendarGrids, menuContainerEl } = getMenuElements();
+
+          const headers = menuContainerEl?.querySelectorAll('h6');
+          expect(headers?.[0]).toHaveTextContent('December 2023');
+          expect(headers?.[1]).toHaveTextContent('January 2024');
+
+          expect(calendarGrids?.[0]).toHaveAttribute(
+            'aria-label',
+            'December 2023',
+          );
+          expect(calendarGrids?.[1]).toHaveAttribute(
+            'aria-label',
+            'January 2024',
+          );
         });
 
-        const { calendarGrids, menuContainerEl } = openMenu();
-        const headers = menuContainerEl?.querySelectorAll('h6');
-        expect(headers?.[0]).toHaveTextContent('March 2023');
-        expect(headers?.[1]).toHaveTextContent('April 2023');
-        expect(calendarGrids?.[0]).toHaveAttribute('aria-label', 'March 2023');
-        expect(calendarGrids?.[1]).toHaveAttribute('aria-label', 'April 2023');
-      });
+        test('if only a start value is set, menu displays the month of that value', () => {
+          const { getMenuElements } = renderDateRangePicker({
+            initialOpen: true,
+            value: [newUTC(2023, Month.March, 10), null],
+          });
 
-      test('if only an end value is set, menu opens to the month _before_ value', () => {
-        const { openMenu } = renderDateRangePicker({
-          value: [null, newUTC(2023, Month.March, 10)],
+          const { calendarGrids, menuContainerEl } = getMenuElements();
+          const headers = menuContainerEl?.querySelectorAll('h6');
+          expect(headers?.[0]).toHaveTextContent('March 2023');
+          expect(headers?.[1]).toHaveTextContent('April 2023');
+          expect(calendarGrids?.[0]).toHaveAttribute(
+            'aria-label',
+            'March 2023',
+          );
+          expect(calendarGrids?.[1]).toHaveAttribute(
+            'aria-label',
+            'April 2023',
+          );
         });
 
-        const { calendarGrids, menuContainerEl } = openMenu();
-        const headers = menuContainerEl?.querySelectorAll('h6');
-        expect(headers?.[0]).toHaveTextContent('February 2023');
-        expect(headers?.[1]).toHaveTextContent('March 2023');
-        expect(calendarGrids?.[0]).toHaveAttribute(
-          'aria-label',
-          'February 2023',
-        );
-        expect(calendarGrids?.[1]).toHaveAttribute('aria-label', 'March 2023');
-      });
+        test('if only an end value is set, menu displays the month _before_ value', () => {
+          const { getMenuElements } = renderDateRangePicker({
+            initialOpen: true,
+            value: [null, newUTC(2023, Month.March, 10)],
+          });
 
-      test('if a full value is set, menu opens to the month of the start value', () => {
-        const { openMenu } = renderDateRangePicker({
-          value: [newUTC(2023, Month.March, 10), newUTC(2023, Month.April, 1)],
+          const { calendarGrids, menuContainerEl } = getMenuElements();
+          const headers = menuContainerEl?.querySelectorAll('h6');
+          expect(headers?.[0]).toHaveTextContent('February 2023');
+          expect(headers?.[1]).toHaveTextContent('March 2023');
+          expect(calendarGrids?.[0]).toHaveAttribute(
+            'aria-label',
+            'February 2023',
+          );
+          expect(calendarGrids?.[1]).toHaveAttribute(
+            'aria-label',
+            'March 2023',
+          );
         });
 
-        const { calendarGrids, menuContainerEl } = openMenu();
-        const headers = menuContainerEl?.querySelectorAll('h6');
-        expect(headers?.[0]).toHaveTextContent('March 2023');
-        expect(headers?.[1]).toHaveTextContent('April 2023');
-        expect(calendarGrids?.[0]).toHaveAttribute('aria-label', 'March 2023');
-        expect(calendarGrids?.[1]).toHaveAttribute('aria-label', 'April 2023');
+        test('if a full value is set, menu displays the month of the start value', () => {
+          const { getMenuElements } = renderDateRangePicker({
+            initialOpen: true,
+            value: [
+              newUTC(2023, Month.March, 10),
+              newUTC(2023, Month.April, 1),
+            ],
+          });
+
+          const { calendarGrids, menuContainerEl } = getMenuElements();
+          const headers = menuContainerEl?.querySelectorAll('h6');
+          expect(headers?.[0]).toHaveTextContent('March 2023');
+          expect(headers?.[1]).toHaveTextContent('April 2023');
+          expect(calendarGrids?.[0]).toHaveAttribute(
+            'aria-label',
+            'March 2023',
+          );
+          expect(calendarGrids?.[1]).toHaveAttribute(
+            'aria-label',
+            'April 2023',
+          );
+        });
+
+        test('month changes when value changes', () => {
+          const { getMenuElements, rerenderWithProps } = renderDateRangePicker({
+            initialOpen: true,
+          });
+
+          rerenderWithProps({
+            value: [
+              newUTC(2023, Month.July, 5),
+              newUTC(2023, Month.September, 10),
+            ],
+          });
+
+          const { calendarGrids } = getMenuElements();
+
+          expect(calendarGrids?.[0]).toHaveAttribute('aria-label', 'July 2023');
+          expect(calendarGrids?.[1]).toHaveAttribute(
+            'aria-label',
+            'August 2023',
+          );
+        });
       });
 
       test('renders the appropriate number of cells', () => {
-        const { openMenu } = renderDateRangePicker({
+        const { getMenuElements } = renderDateRangePicker({
+          initialOpen: true,
           value: [newUTC(2024, Month.February, 14), null],
         });
-        const { calendarCells } = openMenu();
+        const { calendarCells } = getMenuElements();
         expect(calendarCells).toHaveLength(29 + 31);
       });
 
-      describe('Quick select buttons', () => {
+      test('rendered cells have correct `aria-label`', () => {
+        const { getMenuElements } = renderDateRangePicker({
+          initialOpen: true,
+          value: [newUTC(2024, Month.February, 14), null],
+        });
+        const { calendarCells } = getMenuElements();
+        expect(calendarCells[0]).toHaveAttribute(
+          'aria-label',
+          'Thu Feb 01 2024',
+        );
+      });
+
+      describe('Quick select menu', () => {
+        describe('Month/Year select', () => {
+          test('render the correct text', () => {
+            const { getMenuElements } = renderDateRangePicker({
+              initialOpen: true,
+              showQuickSelection: true,
+            });
+            const { yearSelect, monthSelect } = getMenuElements();
+            expect(monthSelect).toHaveTextContent('Dec');
+            expect(yearSelect).toHaveTextContent('2023');
+          });
+
+          test('have correct `aria-label`s', () => {
+            const { getMenuElements } = renderDateRangePicker({
+              initialOpen: true,
+              showQuickSelection: true,
+            });
+            const { yearSelect, monthSelect } = getMenuElements();
+            expect(monthSelect).toHaveAttribute('aria-label', 'Select month');
+            expect(yearSelect).toHaveAttribute('aria-label', 'Select year');
+          });
+
+          test('update when the value changes', () => {
+            const { getMenuElements, rerenderWithProps } =
+              renderDateRangePicker({
+                initialOpen: true,
+                showQuickSelection: true,
+              });
+
+            rerenderWithProps({
+              value: [
+                newUTC(2024, Month.July, 5),
+                newUTC(2024, Month.September, 10),
+              ],
+            });
+
+            const { yearSelect, monthSelect } = getMenuElements();
+            expect(monthSelect).toHaveTextContent('July');
+            expect(yearSelect).toHaveTextContent('2024');
+          });
+        });
+
         test.each(quickSelectButtonTestCases)(
           'Renders correct label: $label',
           ({ index, label }) => {
@@ -209,137 +325,220 @@ describe('packages/date-picker/date-range-picker', () => {
     });
   });
 
-  describe('Typing', () => {
-    test('opens the menu', () => {
-      const { inputElements, getMenuElements } = renderDateRangePicker();
-      userEvent.type(inputElements[0], '1');
-      const { menuContainerEl } = getMenuElements();
-      expect(menuContainerEl).toBeInTheDocument();
-    });
-
-    describe.each([
-      ['start', 0],
-      ['end', 3],
-    ])('into %p input', (input, index) => {
-      test('updates segment value', () => {
-        const { inputElements } = renderDateRangePicker();
-        const element = inputElements[index];
-        userEvent.type(element, '1');
-        expect(element.value).toBe('1'); // Not '01' if not blurred
-      });
-
-      test('does not fire range change handler', () => {
-        const onRangeChange = jest.fn();
-        const { inputElements } = renderDateRangePicker({ onRangeChange });
-        const element = inputElements[index];
-        userEvent.type(element, '1');
-        expect(onRangeChange).not.toHaveBeenCalled();
+  describe('Interaction', () => {
+    describe('Typing', () => {
+      test('opens the menu', () => {
+        const { inputElements, getMenuElements } = renderDateRangePicker();
+        userEvent.type(inputElements[0], '1');
+        const { menuContainerEl } = getMenuElements();
+        expect(menuContainerEl).toBeInTheDocument();
       });
 
-      test('fires segment change handler', () => {
-        const onChange = jest.fn();
-        const { inputElements } = renderDateRangePicker({
-          onChange,
+      describe.each([
+        ['start', 0],
+        ['end', 3],
+      ])('into %p input', (input, index) => {
+        test('updates segment value', () => {
+          const { inputElements } = renderDateRangePicker();
+          const element = inputElements[index];
+          userEvent.type(element, '1');
+          expect(element.value).toBe('1'); // Not '01' if not blurred
         });
-        const element = inputElements[index];
-        userEvent.type(element, '1');
-        expect(onChange).toHaveBeenCalledWith(eventContainingTargetValue('1'));
-      });
 
-      describe('on un-focus/blur', () => {
-        test('does not fire a change handler if value is incomplete', () => {
+        test('does not fire range change handler', () => {
           const onRangeChange = jest.fn();
           const { inputElements } = renderDateRangePicker({ onRangeChange });
           const element = inputElements[index];
-          userEvent.type(element, '2023');
-          userEvent.tab();
+          userEvent.type(element, '1');
           expect(onRangeChange).not.toHaveBeenCalled();
         });
 
-        test('fires a change handler if the value is valid', () => {
-          const onRangeChange = jest.fn();
-          const { inputElements } = renderDateRangePicker({ onRangeChange });
-          const year = inputElements[index];
-          const month = inputElements[index + 1];
-          const day = inputElements[index + 2];
-
-          userEvent.type(year, '2023');
-          userEvent.type(month, '12');
-          userEvent.type(day, '26');
-          userEvent.tab();
-          expect(onRangeChange).toHaveBeenCalledWith(
-            expect.arrayContaining([
-              expect.objectContaining(newUTC(2023, Month.December, 26)),
-            ]),
-          );
-        });
-
-        test('fires a segment change handler', () => {
+        test('fires segment change handler', () => {
           const onChange = jest.fn();
           const { inputElements } = renderDateRangePicker({
             onChange,
           });
           const element = inputElements[index];
-          userEvent.type(element, '2023');
-          userEvent.tab();
+          userEvent.type(element, '1');
           expect(onChange).toHaveBeenCalledWith(
-            eventContainingTargetValue('2023'),
+            eventContainingTargetValue('1'),
           );
         });
 
-        // eslint-disable-next-line jest/no-disabled-tests
-        describe.skip('validation handler', () => {
-          test('fired when the value is first set', () => {
-            const handleValidation = jest.fn();
-            const { inputElements } = renderDateRangePicker({
-              handleValidation,
-            });
+        describe('on un-focus/blur', () => {
+          test('does not fire a change handler if value is incomplete', () => {
+            const onRangeChange = jest.fn();
+            const { inputElements } = renderDateRangePicker({ onRangeChange });
+            const element = inputElements[index];
+            userEvent.type(element, '2023');
+            userEvent.tab();
+            expect(onRangeChange).not.toHaveBeenCalled();
+          });
+
+          test('fires a change handler if the value is valid', () => {
+            const onRangeChange = jest.fn();
+            const { inputElements } = renderDateRangePicker({ onRangeChange });
             const year = inputElements[index];
             const month = inputElements[index + 1];
             const day = inputElements[index + 2];
+
             userEvent.type(year, '2023');
             userEvent.type(month, '12');
             userEvent.type(day, '26');
             userEvent.tab();
-
-            expect(handleValidation).toHaveBeenCalledWith(
+            expect(onRangeChange).toHaveBeenCalledWith(
               expect.arrayContaining([
                 expect.objectContaining(newUTC(2023, Month.December, 26)),
               ]),
             );
           });
 
-          test('fired when the value is updated', () => {
-            const initialStart = newUTC(2023, Month.March, 10);
-            const initialEnd = newUTC(2023, Month.December, 26);
-            const handleValidation = jest.fn();
+          test('fires a segment change handler', () => {
+            const onChange = jest.fn();
             const { inputElements } = renderDateRangePicker({
-              value: [initialStart, initialEnd],
-              handleValidation,
+              onChange,
             });
-            const day = inputElements[index + 2];
-            userEvent.type(day, '15');
+            const element = inputElements[index];
+            userEvent.type(element, '2023');
+            userEvent.tab();
+            expect(onChange).toHaveBeenCalledWith(
+              eventContainingTargetValue('2023'),
+            );
+          });
 
-            const expectedValue = expect.arrayContaining([
-              input === 'start' ? newUTC(2023, Month.March, 15) : initialStart,
-              input === 'end' ? newUTC(2023, Month.December, 15) : initialEnd,
-            ]);
+          // eslint-disable-next-line jest/no-disabled-tests
+          describe.skip('validation handler', () => {
+            test('fired when the value is first set', () => {
+              const handleValidation = jest.fn();
+              const { inputElements } = renderDateRangePicker({
+                handleValidation,
+              });
+              const year = inputElements[index];
+              const month = inputElements[index + 1];
+              const day = inputElements[index + 2];
+              userEvent.type(year, '2023');
+              userEvent.type(month, '12');
+              userEvent.type(day, '26');
+              userEvent.tab();
+
+              expect(handleValidation).toHaveBeenCalledWith(
+                expect.arrayContaining([
+                  expect.objectContaining(newUTC(2023, Month.December, 26)),
+                ]),
+              );
+            });
+
+            test('fired when the value is updated', () => {
+              const initialStart = newUTC(2023, Month.March, 10);
+              const initialEnd = newUTC(2023, Month.December, 26);
+              const handleValidation = jest.fn();
+              const { inputElements } = renderDateRangePicker({
+                value: [initialStart, initialEnd],
+                handleValidation,
+              });
+              const day = inputElements[index + 2];
+              userEvent.type(day, '15');
+
+              const expectedValue = expect.arrayContaining([
+                input === 'start'
+                  ? newUTC(2023, Month.March, 15)
+                  : initialStart,
+                input === 'end' ? newUTC(2023, Month.December, 15) : initialEnd,
+              ]);
 
-            expect(handleValidation).toHaveBeenCalledWith(expectedValue);
+              expect(handleValidation).toHaveBeenCalledWith(expectedValue);
+            });
           });
         });
       });
-    });
 
-    // e.g. selected range is 2023-09-10 -> 2023-10-14
-    // change start date to 2024 or end date to 2023
-    // should reject input and revert
-    test.todo(
-      'Entering an invalid date into start/end rejects the input, and reverts to the previous value',
-    );
-  });
+      describe('when entering a new value', () => {
+        const initialStart = newUTC(2023, Month.September, 2);
+        const initialEnd = newUTC(2023, Month.September, 10);
+
+        test('start date is updated', () => {
+          const onRangeChange = jest.fn();
+          const { inputElements } = renderDateRangePicker({
+            value: [initialStart, initialEnd],
+            onRangeChange,
+          });
+          const startMonthInput = inputElements[1];
+          userEvent.type(startMonthInput, '{delete}8');
+          userEvent.tab();
+          expect(onRangeChange).toHaveBeenCalledWith([
+            setUTCMonth(initialStart, Month.August),
+            initialEnd,
+          ]);
+        });
+
+        test('end date is updated', () => {
+          const onRangeChange = jest.fn();
+          const { inputElements } = renderDateRangePicker({
+            value: [initialStart, initialEnd],
+            onRangeChange,
+          });
+          const endMonthInput = inputElements[4];
+          userEvent.type(endMonthInput, '{delete}10');
+          userEvent.tab();
+          expect(onRangeChange).toHaveBeenCalledWith([
+            initialStart,
+            setUTCMonth(initialEnd, Month.October),
+          ]);
+        });
+
+        test('input is rejected if start date is invalid', () => {
+          const onRangeChange = jest.fn();
+          const { inputElements } = renderDateRangePicker({
+            value: [initialStart, initialEnd],
+            onRangeChange,
+          });
+          const startMonthInput = inputElements[2];
+          userEvent.type(startMonthInput, '1');
+          userEvent.tab();
+          expect(onRangeChange).not.toHaveBeenCalled();
+        });
+
+        test('input is rejected if end date is invalid', () => {
+          const onRangeChange = jest.fn();
+          const { inputElements } = renderDateRangePicker({
+            value: [initialStart, initialEnd],
+            onRangeChange,
+          });
+          const endMonthInput = inputElements[4];
+          userEvent.type(endMonthInput, '1');
+          userEvent.tab();
+          expect(onRangeChange).not.toHaveBeenCalled();
+        });
+
+        test('input is rejected if start date is after end date', () => {
+          const onRangeChange = jest.fn();
+          const { inputElements } = renderDateRangePicker({
+            value: [initialStart, initialEnd],
+            onRangeChange,
+          });
+          const startDayInput = inputElements[2];
+          userEvent.type(startDayInput, '1');
+          userEvent.tab();
+          expect(onRangeChange).not.toHaveBeenCalled();
+        });
+
+        test('input is rejected if end date is before start date', () => {
+          const onRangeChange = jest.fn();
+          const { inputElements } = renderDateRangePicker({
+            value: [
+              newUTC(2023, Month.September, 2),
+              newUTC(2023, Month.September, 10),
+            ],
+            onRangeChange,
+          });
+          const endDayInput = inputElements[5];
+          userEvent.type(endDayInput, '{backspace}');
+          userEvent.tab();
+          expect(onRangeChange).not.toHaveBeenCalled();
+        });
+      });
+    });
 
-  describe('Interaction', () => {
     describe('Mouse interaction', () => {
       describe('Input', () => {
         describe('Clicking the input', () => {
@@ -410,6 +609,33 @@ describe('packages/date-picker/date-range-picker', () => {
               expect(todayCell).toHaveFocus();
             });
           });
+
+          test('initial highlight on `start` value when provided', async () => {
+            const { calendarButton, getMenuElements } = renderDateRangePicker({
+              value: [newUTC(2023, Month.September, 10), null],
+            });
+            userEvent.click(calendarButton);
+            const { menuContainerEl } = getMenuElements();
+            const sep10Cell = within(menuContainerEl!).getByLabelText(
+              'Sun Sep 10 2023',
+            );
+            await waitFor(() => {
+              expect(sep10Cell).toHaveFocus();
+            });
+          });
+          test('initial highlight on `end` value when only end provided', async () => {
+            const { calendarButton, getMenuElements } = renderDateRangePicker({
+              value: [null, newUTC(2023, Month.September, 10)],
+            });
+            userEvent.click(calendarButton);
+            const { menuContainerEl } = getMenuElements();
+            const sep10Cell = within(menuContainerEl!).getByLabelText(
+              'Sun Sep 10 2023',
+            );
+            await waitFor(() => {
+              expect(sep10Cell).toHaveFocus();
+            });
+          });
         });
       });
 
@@ -463,25 +689,20 @@ describe('packages/date-picker/date-range-picker', () => {
             );
           });
 
-          describe('if a full range is set', () => {
-            test('fires a change handler to set the start date & clear the end date', () => {
-              const onRangeChange = jest.fn();
-              const startDate = newUTC(2023, Month.September, 10);
-              const endDate = newUTC(2023, Month.October, 31);
-              const { openMenu } = renderDateRangePicker({
-                value: [startDate, endDate],
-                onRangeChange,
-              });
-              const { calendarCells } = openMenu();
-              const firstCell = calendarCells[0];
-              userEvent.click(firstCell);
-              expect(onRangeChange).toHaveBeenCalledWith(
-                expect.arrayContaining([
-                  newUTC(2023, Month.September, 1),
-                  null,
-                ]),
-              );
+          test('if a full range is set, fires a change handler to set the start date & clear the end date', () => {
+            const onRangeChange = jest.fn();
+            const startDate = newUTC(2023, Month.September, 10);
+            const endDate = newUTC(2023, Month.October, 31);
+            const { openMenu } = renderDateRangePicker({
+              value: [startDate, endDate],
+              onRangeChange,
             });
+            const { calendarCells } = openMenu();
+            const firstCell = calendarCells[0];
+            userEvent.click(firstCell);
+            expect(onRangeChange).toHaveBeenCalledWith(
+              expect.arrayContaining([newUTC(2023, Month.September, 1), null]),
+            );
           });
         });
 
@@ -711,11 +932,28 @@ describe('packages/date-picker/date-range-picker', () => {
               expect(handleValidation).toHaveBeenCalledWith(expectedRange);
             },
           );
-        });
 
-        test.todo(
-          'When value changes via quick ranges, update the displayed month',
-        );
+          test('update the displayed calendars', () => {
+            const { getAllByTestId, getMenuElements } = renderDateRangePicker({
+              initialOpen: true,
+              showQuickSelection: true,
+            });
+            const quickSelectButtons = getAllByTestId(
+              'lg-date_picker-menu-quick-range-button',
+            );
+            const { calendarGrids } = getMenuElements();
+            const last90Button = quickSelectButtons[4];
+            userEvent.click(last90Button);
+            expect(calendarGrids?.[0]).toHaveAttribute(
+              'aria-label',
+              'September 2023',
+            );
+            expect(calendarGrids?.[1]).toHaveAttribute(
+              'aria-label',
+              'October 2023',
+            );
+          });
+        });
       });
 
       describe('Backdrop', () => {
@@ -740,14 +978,14 @@ describe('packages/date-picker/date-range-picker', () => {
 
     describe('Keyboard interaction', () => {
       describe('Tab', () => {
-        test('menu does not open on initial focus', () => {
+        test('menu does not open on initial input focus', () => {
           const { getMenuElements } = renderDateRangePicker();
           tabNTimes(1);
           const { menuContainerEl } = getMenuElements();
           expect(menuContainerEl).not.toBeInTheDocument();
         });
 
-        test('menu does not open on subsequent focuses', () => {
+        test('menu does not open on subsequent input focuses', () => {
           const { getMenuElements } = renderDateRangePicker();
           tabNTimes(5);
           const { menuContainerEl } = getMenuElements();
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
index 7fadec0635..0a5c352128 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
@@ -12,7 +12,7 @@ import { newUTC } from '../utils';
 
 import { DateRangePicker, DateRangePickerProps } from '.';
 
-const testToday = newUTC(2023, Month.December, 26);
+export const testToday = newUTC(2023, Month.December, 26);
 
 /** Explicit test cases for quick range buttons */
 export const quickSelectButtonTestCases = [
@@ -38,7 +38,7 @@ export interface RenderDateRangePickerResult extends RenderResult {
   calendarButton: HTMLButtonElement;
   getMenuElements: () => RenderMenuResult;
   openMenu: () => RenderMenuResult;
-  rerenderWithProps: () => void;
+  rerenderWithProps: (p?: Partial<DateRangePickerProps>) => void;
 }
 
 export interface RenderMenuResult {

From fe09c751b7c180c816b7f9b6b4d3362e4c695d79 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 20 Oct 2023 18:22:09 -0400
Subject: [PATCH 258/351] Update DateRangeMenu.spec.tsx

---
 .../DateRangeMenu/DateRangeMenu.spec.tsx             | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
index 162064b6c4..1aab587d19 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
@@ -176,7 +176,17 @@ describe('packages/date-picker/date-range-picker/menu', () => {
             'October 2023',
           );
         });
-        test.todo('does not update month when month does not need to change');
+        test('does not update month when month does not need to change', () => {
+          const { getAllByRole } = renderDateRangeMenu({
+            rangeContext: { value: [testToday, null] },
+          });
+          userEvent.keyboard('{downarrow}');
+          const calendarGrids = getAllByRole('grid');
+          expect(calendarGrids[0]).toHaveAttribute(
+            'aria-label',
+            'October 2023',
+          );
+        });
       });
 
       describe('when month should be updated', () => {

From 0874f3dbe5f3740649793e18e6aae6e236dbaed0 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 30 Oct 2023 11:19:47 -0400
Subject: [PATCH 259/351] fix build

---
 .../DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx   | 1 +
 .../DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
index 3815aaa751..ef223c3d01 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
@@ -67,6 +67,7 @@ const MenuDecorator: Decorator<DateRangeMenuStoryProps> = (Story, ctx) => {
           rootRef={React.createRef()}
           value={value}
           setValue={() => {}}
+          handleValidation={() => {}}
         >
           <Story {...args} />
         </DateRangeProvider>
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
index 7b5dc994f9..3066318169 100644
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
+++ b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
@@ -1,9 +1,9 @@
 import React, { MouseEventHandler } from 'react';
 import { forwardRef } from 'react';
 import { addDays } from 'date-fns';
-import { isFinite } from 'lodash';
+import isFinite from 'lodash/isFinite';
 import range from 'lodash/range';
-import { DateRangeType } from 'src/types';
+import { DateRangeType } from '../../../types';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';

From 4d49addb9ca2cbb397be567d029a0a17917209eb Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Tue, 31 Oct 2023 13:11:44 -0400
Subject: [PATCH 260/351] DatePicker prepare exports (#2051)

* updates build config & exports

* mv shared to shared

* update imports

* fix builds

* lint

* // eslint-disable-next-line jest/no-disabled-tests

* Update DateInputBox.spec.tsx

* mmv utils hooks to shared

* fix builds

* fix form-field dep version

* rm date range picker

* fix tests suites

* fix filename case

* fix dependencies

* rm exports from package.json
---
 packages/date-picker/package.json             |    7 +-
 packages/date-picker/rollup.config.mjs        |   14 +
 packages/date-picker/src/Calendar/index.ts    |    7 -
 .../DateInput/DateInputSegment/constants.ts   |   46 -
 packages/date-picker/src/DateInput/index.ts   |    1 -
 .../src/DatePicker/DatePicker.spec.tsx        |    9 +-
 .../src/DatePicker/DatePicker.stories.tsx     |    8 +-
 .../date-picker/src/DatePicker/DatePicker.tsx |   10 +-
 .../src/DatePicker/DatePicker.types.ts        |    2 +-
 .../DatePickerComponent.tsx                   |    4 +-
 .../DatePickerComponent.types.ts              |    6 +-
 .../DatePickerInput/DatePickerInput.spec.tsx  |    6 +-
 .../DatePickerInput.stories.tsx               |    2 +-
 .../DatePickerInput/DatePickerInput.tsx       |   10 +-
 .../DatePickerInput/DatePickerInput.types.ts  |    1 -
 .../DatePickerMenu/DatePickerMenu.spec.tsx    |    9 +-
 .../DatePickerMenu/DatePickerMenu.stories.tsx |   10 +-
 .../DatePickerMenu/DatePickerMenu.tsx         |   13 +-
 .../DatePickerMenuHeader/index.tsx            |    6 +-
 .../utils/getNewHighlight/index.ts            |    2 +-
 .../utils/getRelativeSegment/index.ts         |    5 +-
 .../DatePicker/utils/getSegmentKey/index.ts   |    2 +-
 .../index.ts                                  |    3 +-
 .../getSegmentToFocus.spec.ts                 |    4 +-
 .../utils/getSegmentToFocus/index.ts          |    7 +-
 .../DateRangeComponent.styles.ts              |    3 -
 .../DateRangeComponent/DateRangeComponent.tsx |   41 -
 .../DateRangeComponent.types.ts               |   14 -
 .../DateRangeComponent/index.ts               |    2 -
 .../DateRangeContext/DateRangeContext.tsx     |   79 --
 .../DateRangeContext.types.ts                 |   39 -
 .../DateRangePicker/DateRangeContext/index.ts |    2 -
 .../useDateRangeComponentRefs.tsx             |   36 -
 .../DateRangeInput/DateRangeInput.spec.tsx    |   31 -
 .../DateRangeInput/DateRangeInput.stories.tsx |   65 -
 .../DateRangeInput/DateRangeInput.styles.ts   |    6 -
 .../DateRangeInput/DateRangeInput.tsx         |  206 ---
 .../DateRangeInput/DateRangeInput.types.ts    |   11 -
 .../DateRangePicker/DateRangeInput/index.ts   |    2 -
 .../DateRangeMenu/DateRangeMenu.spec.tsx      |  228 ----
 .../DateRangeMenu/DateRangeMenu.stories.tsx   |  252 ----
 .../DateRangeMenu/DateRangeMenu.styles.ts     |   25 -
 .../DateRangeMenu/DateRangeMenu.tsx           |  127 --
 .../DateRangeMenu/DateRangeMenu.types.ts      |   13 -
 .../DateRangeMenuCalendars.styles.ts          |   47 -
 .../DateRangeMenuCalendars.tsx                |  341 -----
 .../DateRangeMenuCalendars.types.ts           |    3 -
 .../DateRangeMenuCalendars/index.ts           |    1 -
 .../DateRangeMenuFooter.styles.ts             |   18 -
 .../DateRangeMenuFooter.tsx                   |   65 -
 .../DateRangeMenuFooter/index.ts              |    1 -
 .../QuickRangeButton.stories.tsx              |   37 -
 .../QuickRangeButton.styles.ts                |   55 -
 .../QuickRangeButton/QuickRangeButton.tsx     |   40 -
 .../QuickRangeButton/index.ts                 |    1 -
 .../QuickSelectionMenu.styles.ts              |   39 -
 .../QuickSelectionMenu/QuickSelectionMenu.tsx |  164 ---
 .../DateRangeMenu/QuickSelectionMenu/index.ts |    1 -
 .../DateRangePicker/DateRangeMenu/index.ts    |    2 -
 .../DateRangePicker/DateRangePicker.spec.tsx  | 1205 -----------------
 .../DateRangePicker.stories.tsx               |  160 ---
 .../DateRangePicker/DateRangePicker.styles.ts |    3 -
 .../DateRangePicker.testutils.tsx             |  295 ----
 .../src/DateRangePicker/DateRangePicker.tsx   |   48 -
 .../DateRangePicker/DateRangePicker.types.ts  |   57 -
 .../date-picker/src/DateRangePicker/index.ts  |    2 -
 .../utils/getInitialHighlight/index.ts        |   19 -
 .../utils/getInitialMonth/index.ts            |   19 -
 .../utils/getRangeSegmentToFocus/index.ts     |   65 -
 .../utils/getRelativeRangeSegment/index.ts    |   86 --
 packages/date-picker/src/constants.ts         |   54 -
 .../date-picker/src/hooks/useFormat/index.ts  |   54 -
 packages/date-picker/src/index.ts             |    7 +-
 .../CalendarCell/CalendarCell.spec.tsx        |    0
 .../CalendarCell/CalendarCell.stories.tsx     |    0
 .../CalendarCell/CalendarCell.styles.ts       |    0
 .../Calendar/CalendarCell/CalendarCell.tsx    |    0
 .../CalendarCell/CalendarCell.types.ts        |    0
 .../Calendar/CalendarCell/index.ts            |    0
 .../CalendarGrid/CalendarGrid.spec.tsx        |    0
 .../CalendarGrid/CalendarGrid.stories.tsx     |    6 +-
 .../CalendarGrid/CalendarGrid.styles.ts       |    0
 .../Calendar/CalendarGrid/CalendarGrid.tsx    |    4 +-
 .../CalendarGrid/CalendarGrid.types.ts        |    0
 .../Calendar/CalendarGrid/index.ts            |    0
 .../src/shared/components/Calendar/index.ts   |    7 +
 .../CalendarButton/CalendarButton.styles.ts   |    0
 .../CalendarButton/CalendarButton.tsx         |    0
 .../DateInput/CalendarButton/index.ts         |    0
 .../DateFormField/DateFormField.spec.tsx      |    0
 .../DateFormField/DateFormField.stories.tsx   |    2 +-
 .../DateFormField/DateFormField.styles.ts     |    0
 .../DateInput/DateFormField/DateFormField.tsx |    0
 .../DateFormField/DateFormField.types.ts      |    0
 .../DateInput/DateFormField/index.ts          |    0
 .../DateInputBox/DateInputBox.spec.tsx        |   11 +-
 .../DateInputBox/DateInputBox.stories.tsx     |    4 +-
 .../DateInputBox/DateInputBox.styles.ts       |    0
 .../DateInput/DateInputBox/DateInputBox.tsx   |    8 +-
 .../DateInputBox/DateInputBox.types.ts        |    4 +-
 .../DateInput/DateInputBox/index.ts           |    0
 .../DateInputSegment.spec.tsx                 |    2 +-
 .../DateInputSegment.stories.tsx              |    0
 .../DateInputSegment.styles.ts                |    5 +-
 .../DateInputSegment/DateInputSegment.tsx     |    2 +-
 .../DateInputSegment.types.ts                 |    5 +-
 .../DateInput/DateInputSegment/index.ts       |    0
 .../src/shared/components/DateInput/index.ts  |    4 +
 .../DatePickerContext.spec.tsx                |    0
 .../DatePickerContext/DatePickerContext.tsx   |    0
 .../DatePickerContext.types.ts                |    2 +-
 .../DatePickerContext.utils.ts                |    6 +-
 .../components}/DatePickerContext/index.ts    |    5 +-
 .../MenuWrapper/MenuWrapper.spec.tsx          |    0
 .../MenuWrapper/MenuWrapper.styles.ts         |    0
 .../components}/MenuWrapper/MenuWrapper.tsx   |    0
 .../components}/MenuWrapper/index.ts          |    0
 .../src/shared/components/index.ts            |   18 +
 packages/date-picker/src/shared/constants.ts  |  122 ++
 .../date-picker/src/shared/hooks/index.ts     |    9 +
 .../hooks/useControlledValue/index.ts         |    0
 .../useControlledValue.spec.tsx               |    0
 .../useControlledValue/useControlledValue.ts  |    0
 .../useDateSegments/DateSegments.types.ts     |    0
 .../hooks/useDateSegments/index.ts            |    4 +-
 .../hooks/useDateSegments/useDateSegments.ts  |    0
 .../hooks/useSegmentRefs/index.ts             |    0
 .../hooks/useSegmentRefs/segmentRefs.types.ts |    0
 .../hooks/useSegmentRefs/useSegmentRefs.ts    |    0
 packages/date-picker/src/shared/index.ts      |    5 +
 .../date-picker/src/{ => shared}/types.ts     |    0
 .../{ => shared}/utils/addMonthsUTC/index.ts  |    0
 .../utils/cloneReverse/cloneReverse.spec.ts   |    0
 .../{ => shared}/utils/cloneReverse/index.ts  |    0
 .../utils/doesSomeSegmentExist/index.ts       |    0
 .../getDaysInUTCMonth.spec.ts                 |    0
 .../utils/getDaysInUTCMonth/index.ts          |    0
 .../utils/getFirstEmptySegment/index.ts       |    5 +-
 .../getFirstOfMonth/getFirstOfMonth.spec.ts   |    0
 .../utils/getFirstOfMonth/index.ts            |    0
 .../utils/getFormatParts/index.ts             |    0
 .../getFullMonthLabel.spec.ts                 |    0
 .../utils/getFullMonthLabel/index.ts          |    0
 .../getLastOfMonth/getLastOfMonth.spec.ts     |    0
 .../utils/getLastOfMonth/index.ts             |    0
 .../utils/getMonthName/getMonthName.spec.ts   |    0
 .../{ => shared}/utils/getMonthName/index.ts  |    0
 .../getRemainingParts.spec.ts                 |    0
 .../utils/getRemainingParts/index.ts          |    0
 .../getSegmentsFromDate.spec.ts               |    0
 .../utils/getSegmentsFromDate/index.ts        |    2 +-
 .../getUTCDateString/getUTCDateString.spec.ts |    0
 .../utils/getUTCDateString/index.ts           |    0
 .../utils/getValueFormatter/index.ts          |    7 +-
 .../getValueFormatter/valueFormatter.spec.ts  |    2 +-
 .../utils/getWeeksArray/getWeeksArray.spec.ts |    0
 .../{ => shared}/utils/getWeeksArray/index.ts |    0
 .../src/{ => shared}/utils/index.ts           |    0
 .../utils/isCurrentUTCDay/index.ts            |    0
 .../src/{ => shared}/utils/isDefined/index.ts |    0
 .../utils/isElementInputSegment/index.ts      |    2 +-
 .../{ => shared}/utils/isOnOrAfter/index.ts   |    0
 .../{ => shared}/utils/isOnOrBefore/index.ts  |    0
 .../{ => shared}/utils/isSameTZDay/index.ts   |    0
 .../utils/isSameTZDay/isSameTZDay.spec.ts     |    0
 .../{ => shared}/utils/isSameUTCDay/index.ts  |    0
 .../utils/isSameUTCDay/isSameUTCDay.spec.ts   |    0
 .../utils/isSameUTCMonth/index.ts             |    0
 .../isSameUTCMonth/isSameUTCMonth.spec.ts     |    0
 .../utils/isSameUTCRange/index.ts             |    0
 .../src/{ => shared}/utils/isTodayTZ/index.ts |    0
 .../utils/isTodayTZ/isTodayTZ.spec.ts         |    0
 .../{ => shared}/utils/isValidDate/index.ts   |    0
 .../utils/isValidDate/isValidDate.spec.ts     |    0
 .../{ => shared}/utils/isValidLocale/index.ts |    0
 .../utils/isValidLocale/isValidLocale.spec.ts |    0
 .../utils/isValidSegment/index.ts             |    5 +-
 .../isValidSegment/isValidSegment.spec.ts     |    0
 .../{ => shared}/utils/isZeroLike/index.ts    |    0
 .../src/{ => shared}/utils/maxDate/index.ts   |    0
 .../src/{ => shared}/utils/minDate/index.ts   |    0
 .../utils/newDateFromSegments/index.ts        |    2 +-
 .../newDateFromSegments.spec.ts               |    0
 .../src/{ => shared}/utils/newUTC/index.ts    |    0
 .../{ => shared}/utils/newUTC/newUTC.spec.ts  |    0
 .../{ => shared}/utils/pickAndOmit/index.ts   |    0
 .../utils/setToUTCMidnight/index.ts           |    0
 .../setToUTCMidnight/setToUTCMidnight.spec.ts |    0
 .../{ => shared}/utils/setUTCDate/index.ts    |    0
 .../{ => shared}/utils/setUTCMonth/index.ts   |    0
 .../utils/setUTCMonth/setUTCMonth.spec.ts     |    0
 .../{ => shared}/utils/setUTCYear/index.ts    |    0
 .../utils/testutils.ts}                       |    9 +-
 .../src/{ => shared}/utils/toDate/index.ts    |    0
 .../{ => shared}/utils/toDate/toDate.spec.ts  |    0
 packages/hooks/package.json                   |    5 +-
 yarn.lock                                     |   21 +
 197 files changed, 321 insertions(+), 4239 deletions(-)
 create mode 100644 packages/date-picker/rollup.config.mjs
 delete mode 100644 packages/date-picker/src/Calendar/index.ts
 delete mode 100644 packages/date-picker/src/DateInput/DateInputSegment/constants.ts
 delete mode 100644 packages/date-picker/src/DateInput/index.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.styles.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeComponent/index.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.types.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeContext/index.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeContext/useDateRangeComponentRefs.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.stories.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.styles.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeInput/index.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/index.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.styles.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/index.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.stories.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.styles.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/index.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/index.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangeMenu/index.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangePicker.styles.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
 delete mode 100644 packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/index.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/utils/getInitialHighlight/index.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/utils/getInitialMonth/index.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/utils/getRangeSegmentToFocus/index.ts
 delete mode 100644 packages/date-picker/src/DateRangePicker/utils/getRelativeRangeSegment/index.ts
 delete mode 100644 packages/date-picker/src/constants.ts
 delete mode 100644 packages/date-picker/src/hooks/useFormat/index.ts
 rename packages/date-picker/src/{ => shared/components}/Calendar/CalendarCell/CalendarCell.spec.tsx (100%)
 rename packages/date-picker/src/{ => shared/components}/Calendar/CalendarCell/CalendarCell.stories.tsx (100%)
 rename packages/date-picker/src/{ => shared/components}/Calendar/CalendarCell/CalendarCell.styles.ts (100%)
 rename packages/date-picker/src/{ => shared/components}/Calendar/CalendarCell/CalendarCell.tsx (100%)
 rename packages/date-picker/src/{ => shared/components}/Calendar/CalendarCell/CalendarCell.types.ts (100%)
 rename packages/date-picker/src/{ => shared/components}/Calendar/CalendarCell/index.ts (100%)
 rename packages/date-picker/src/{ => shared/components}/Calendar/CalendarGrid/CalendarGrid.spec.tsx (100%)
 rename packages/date-picker/src/{ => shared/components}/Calendar/CalendarGrid/CalendarGrid.stories.tsx (94%)
 rename packages/date-picker/src/{ => shared/components}/Calendar/CalendarGrid/CalendarGrid.styles.ts (100%)
 rename packages/date-picker/src/{ => shared/components}/Calendar/CalendarGrid/CalendarGrid.tsx (95%)
 rename packages/date-picker/src/{ => shared/components}/Calendar/CalendarGrid/CalendarGrid.types.ts (100%)
 rename packages/date-picker/src/{ => shared/components}/Calendar/CalendarGrid/index.ts (100%)
 create mode 100644 packages/date-picker/src/shared/components/Calendar/index.ts
 rename packages/date-picker/src/{ => shared/components}/DateInput/CalendarButton/CalendarButton.styles.ts (100%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/CalendarButton/CalendarButton.tsx (100%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/CalendarButton/index.ts (100%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateFormField/DateFormField.spec.tsx (100%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateFormField/DateFormField.stories.tsx (98%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateFormField/DateFormField.styles.ts (100%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateFormField/DateFormField.tsx (100%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateFormField/DateFormField.types.ts (100%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateFormField/index.ts (100%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateInputBox/DateInputBox.spec.tsx (96%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateInputBox/DateInputBox.stories.tsx (96%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateInputBox/DateInputBox.styles.ts (100%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateInputBox/DateInputBox.tsx (97%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateInputBox/DateInputBox.types.ts (86%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateInputBox/index.ts (100%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateInputSegment/DateInputSegment.spec.tsx (98%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateInputSegment/DateInputSegment.stories.tsx (100%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateInputSegment/DateInputSegment.styles.ts (93%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateInputSegment/DateInputSegment.tsx (96%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateInputSegment/DateInputSegment.types.ts (85%)
 rename packages/date-picker/src/{ => shared/components}/DateInput/DateInputSegment/index.ts (100%)
 create mode 100644 packages/date-picker/src/shared/components/DateInput/index.ts
 rename packages/date-picker/src/{ => shared/components}/DatePickerContext/DatePickerContext.spec.tsx (100%)
 rename packages/date-picker/src/{ => shared/components}/DatePickerContext/DatePickerContext.tsx (100%)
 rename packages/date-picker/src/{ => shared/components}/DatePickerContext/DatePickerContext.types.ts (95%)
 rename packages/date-picker/src/{ => shared/components}/DatePickerContext/DatePickerContext.utils.ts (92%)
 rename packages/date-picker/src/{ => shared/components}/DatePickerContext/index.ts (73%)
 rename packages/date-picker/src/{Calendar => shared/components}/MenuWrapper/MenuWrapper.spec.tsx (100%)
 rename packages/date-picker/src/{Calendar => shared/components}/MenuWrapper/MenuWrapper.styles.ts (100%)
 rename packages/date-picker/src/{Calendar => shared/components}/MenuWrapper/MenuWrapper.tsx (100%)
 rename packages/date-picker/src/{Calendar => shared/components}/MenuWrapper/index.ts (100%)
 create mode 100644 packages/date-picker/src/shared/components/index.ts
 create mode 100644 packages/date-picker/src/shared/constants.ts
 create mode 100644 packages/date-picker/src/shared/hooks/index.ts
 rename packages/date-picker/src/{ => shared}/hooks/useControlledValue/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/hooks/useControlledValue/useControlledValue.spec.tsx (100%)
 rename packages/date-picker/src/{ => shared}/hooks/useControlledValue/useControlledValue.ts (100%)
 rename packages/date-picker/src/{ => shared}/hooks/useDateSegments/DateSegments.types.ts (100%)
 rename packages/date-picker/src/{ => shared}/hooks/useDateSegments/index.ts (71%)
 rename packages/date-picker/src/{ => shared}/hooks/useDateSegments/useDateSegments.ts (100%)
 rename packages/date-picker/src/{ => shared}/hooks/useSegmentRefs/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/hooks/useSegmentRefs/segmentRefs.types.ts (100%)
 rename packages/date-picker/src/{ => shared}/hooks/useSegmentRefs/useSegmentRefs.ts (100%)
 create mode 100644 packages/date-picker/src/shared/index.ts
 rename packages/date-picker/src/{ => shared}/types.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/addMonthsUTC/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/cloneReverse/cloneReverse.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/cloneReverse/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/doesSomeSegmentExist/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getDaysInUTCMonth/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getFirstEmptySegment/index.ts (80%)
 rename packages/date-picker/src/{ => shared}/utils/getFirstOfMonth/getFirstOfMonth.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getFirstOfMonth/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getFormatParts/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getFullMonthLabel/getFullMonthLabel.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getFullMonthLabel/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getLastOfMonth/getLastOfMonth.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getLastOfMonth/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getMonthName/getMonthName.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getMonthName/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getRemainingParts/getRemainingParts.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getRemainingParts/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getSegmentsFromDate/index.ts (92%)
 rename packages/date-picker/src/{ => shared}/utils/getUTCDateString/getUTCDateString.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getUTCDateString/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getValueFormatter/index.ts (77%)
 rename packages/date-picker/src/{ => shared}/utils/getValueFormatter/valueFormatter.spec.ts (94%)
 rename packages/date-picker/src/{ => shared}/utils/getWeeksArray/getWeeksArray.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/getWeeksArray/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isCurrentUTCDay/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isDefined/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isElementInputSegment/index.ts (86%)
 rename packages/date-picker/src/{ => shared}/utils/isOnOrAfter/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isOnOrBefore/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isSameTZDay/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isSameTZDay/isSameTZDay.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isSameUTCDay/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isSameUTCDay/isSameUTCDay.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isSameUTCMonth/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isSameUTCMonth/isSameUTCMonth.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isSameUTCRange/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isTodayTZ/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isTodayTZ/isTodayTZ.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isValidDate/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isValidDate/isValidDate.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isValidLocale/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isValidLocale/isValidLocale.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isValidSegment/index.ts (84%)
 rename packages/date-picker/src/{ => shared}/utils/isValidSegment/isValidSegment.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/isZeroLike/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/maxDate/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/minDate/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/newDateFromSegments/index.ts (82%)
 rename packages/date-picker/src/{ => shared}/utils/newDateFromSegments/newDateFromSegments.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/newUTC/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/newUTC/newUTC.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/pickAndOmit/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/setToUTCMidnight/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/setToUTCMidnight/setToUTCMidnight.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/setUTCDate/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/setUTCMonth/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/setUTCMonth/setUTCMonth.spec.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/setUTCYear/index.ts (100%)
 rename packages/date-picker/src/{testUtils.ts => shared/utils/testutils.ts} (89%)
 rename packages/date-picker/src/{ => shared}/utils/toDate/index.ts (100%)
 rename packages/date-picker/src/{ => shared}/utils/toDate/toDate.spec.ts (100%)

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 23d324fda3..28617e1468 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -2,10 +2,10 @@
   "name": "@leafygreen-ui/date-picker",
   "version": "0.1.0",
   "description": "LeafyGreen UI Kit Date Picker",
+  "license": "Apache-2.0",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/index.d.ts",
-  "license": "Apache-2.0",
   "scripts": {
     "build": "lg build-package",
     "tsc": "lg build-ts",
@@ -15,9 +15,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@leafygreen-ui/button": "^21.0.7",
     "@leafygreen-ui/emotion": "^4.0.7",
-    "@leafygreen-ui/form-field": "^0.1.0",
+    "@leafygreen-ui/form-field": "^0.2.0",
     "@leafygreen-ui/hooks": "^8.0.0",
     "@leafygreen-ui/icon": "^11.23.0",
     "@leafygreen-ui/icon-button": "^15.0.17",
@@ -29,6 +28,7 @@
     "@leafygreen-ui/typography": "^17.0.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
+    "lodash": "^4.17.21",
     "polished": "^4.2.2",
     "weekstart": "^2.0.0"
   },
@@ -36,6 +36,7 @@
     "@leafygreen-ui/leafygreen-provider": "^3.1.6"
   },
   "devDependencies": {
+    "@leafygreen-ui/button": "^21.0.7",
     "mockdate": "^3.0.5",
     "storybook-mock-date-decorator": "^1.0.1",
     "timezone-mock": "^1.3.6"
diff --git a/packages/date-picker/rollup.config.mjs b/packages/date-picker/rollup.config.mjs
new file mode 100644
index 0000000000..f287595312
--- /dev/null
+++ b/packages/date-picker/rollup.config.mjs
@@ -0,0 +1,14 @@
+import {
+  esmConfig,
+  storiesConfig,
+  umdConfig,
+} from '@lg-tools/build/config/rollup.config.mjs';
+
+const sharedConfig = [esmConfig, umdConfig].map(config => ({
+  ...config,
+  input: 'src/shared/index.ts',
+}));
+
+const config = [esmConfig, umdConfig, ...sharedConfig];
+
+export default config;
diff --git a/packages/date-picker/src/Calendar/index.ts b/packages/date-picker/src/Calendar/index.ts
deleted file mode 100644
index b068ea776a..0000000000
--- a/packages/date-picker/src/Calendar/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export {
-  CalendarCell,
-  CalendarCellProps,
-  CalendarCellState,
-} from './CalendarCell';
-export { CalendarGrid, CalendarGridProps } from './CalendarGrid';
-export { MenuWrapper } from './MenuWrapper';
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/constants.ts b/packages/date-picker/src/DateInput/DateInputSegment/constants.ts
deleted file mode 100644
index fd10be962b..0000000000
--- a/packages/date-picker/src/DateInput/DateInputSegment/constants.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { MAX_DATE, MIN_DATE } from '../../constants';
-
-/** The minimum number for each segment */
-export const defaultMin = {
-  day: 1,
-  month: 1,
-  year: MIN_DATE.getUTCFullYear(),
-} as const;
-
-/** The maximum number for each segment */
-export const defaultMax = {
-  day: 31,
-  month: 12,
-  year: MAX_DATE.getUTCFullYear(),
-} as const;
-
-/** The shorthand for each char */
-export const placeholderChar = {
-  day: 'D',
-  month: 'M',
-  year: 'Y',
-};
-
-export const charsPerSegment = {
-  day: 2,
-  month: 2,
-  year: 4,
-};
-
-const makePlaceholder = (n: number, s: string) =>
-  new Array(n).fill(s).join('\u200B');
-
-/** The default placeholders for each segment */
-export const defaultPlaceholder = {
-  day: makePlaceholder(charsPerSegment.day, placeholderChar.day),
-  month: makePlaceholder(charsPerSegment.month, placeholderChar.month),
-  year: makePlaceholder(charsPerSegment.year, placeholderChar.year),
-} as const;
-
-/** The percentage of 1ch these specific characters take up */
-export const characterWidth = {
-  // // Standard font
-  D: 46 / 40,
-  M: 55 / 40,
-  Y: 50 / 40,
-} as const;
diff --git a/packages/date-picker/src/DateInput/index.ts b/packages/date-picker/src/DateInput/index.ts
deleted file mode 100644
index eadb3a750a..0000000000
--- a/packages/date-picker/src/DateInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DateInputBox, type DateInputBoxProps } from './DateInputBox';
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 46bfee8386..2db09b0f11 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -8,9 +8,12 @@ import {
 import userEvent from '@testing-library/user-event';
 import { range } from 'lodash';
 
-import { Month } from '../constants';
-import { eventContainingTargetValue, tabNTimes } from '../testUtils';
-import { newUTC } from '../utils/newUTC';
+import { Month } from '../shared/constants';
+import { newUTC } from '../shared/utils';
+import {
+  eventContainingTargetValue,
+  tabNTimes,
+} from '../shared/utils/testutils';
 
 import { renderDatePicker } from './DatePicker.testutils';
 import { DatePicker } from '.';
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index 6a8d92861b..e9135e81c5 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -6,13 +6,13 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 
-import { Month } from '../constants';
 import {
   DatePickerContextProps,
   DatePickerProvider,
-} from '../DatePickerContext';
-import { Locales, TimeZones } from '../testUtils';
-import { newUTC } from '../utils';
+} from '../shared/components/DatePickerContext';
+import { Month } from '../shared/constants';
+import { newUTC } from '../shared/utils';
+import { Locales, TimeZones } from '../shared/utils/testutils';
 
 import { DatePicker } from './DatePicker';
 
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index ba47423faa..a4eea83177 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -1,9 +1,11 @@
 import React, { forwardRef } from 'react';
 
-import { DatePickerProvider } from '../DatePickerContext';
-import { contextPropNames } from '../DatePickerContext/DatePickerContext.utils';
-import { useControlledValue } from '../hooks/useControlledValue';
-import { pickAndOmit } from '../utils';
+import {
+  contextPropNames,
+  DatePickerProvider,
+} from '../shared/components/DatePickerContext';
+import { useControlledValue } from '../shared/hooks';
+import { pickAndOmit } from '../shared/utils';
 
 import { DatePickerProps } from './DatePicker.types';
 import { DatePickerComponent } from './DatePickerComponent';
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index a92b568f0e..d74f8799ae 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -1,6 +1,6 @@
 import { ChangeEvent } from 'react';
 
-import { BaseDatePickerProps, DateType } from '../types';
+import { BaseDatePickerProps, DateType } from '../shared/types';
 
 export interface DatePickerProps extends BaseDatePickerProps {
   /**
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 6972f9923a..145205687c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -2,8 +2,8 @@ import React, { forwardRef, useRef } from 'react';
 
 import { useBackdropClick, useForwardedRef } from '@leafygreen-ui/hooks';
 
-import { useDatePickerContext } from '../../DatePickerContext';
-import { isSameUTCDay } from '../../utils';
+import { useDatePickerContext } from '../../shared/components/DatePickerContext';
+import { isSameUTCDay } from '../../shared/utils';
 import { DatePickerInput } from '../DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
index c2f2975343..4f8b039c96 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
@@ -1,6 +1,6 @@
-import { ContextPropKeys } from '../../DatePickerContext/DatePickerContext.utils';
-import { useControlledValue } from '../../hooks/useControlledValue';
-import { DateType } from '../../types';
+import { ContextPropKeys } from '../../shared/components/DatePickerContext';
+import { useControlledValue } from '../../shared/hooks';
+import { DateType } from '../../shared/types';
 import { DatePickerProps } from '../DatePicker.types';
 
 /**
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index a11bd8efd2..ae3e48149a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Month } from '../../constants';
 import {
   DatePickerProvider,
   DatePickerProviderProps,
-} from '../../DatePickerContext';
-import { defaultDatePickerContext } from '../../DatePickerContext/DatePickerContext.utils';
+  defaultDatePickerContext,
+} from '../../shared/components/DatePickerContext';
+import { Month } from '../../shared/constants';
 
 import { DatePickerInput, DatePickerInputProps } from '.';
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index 1c149d71fd..ea65d36224 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -11,7 +11,7 @@ import { Size } from '@leafygreen-ui/tokens';
 import {
   DatePickerContextProps,
   DatePickerProvider,
-} from '../../DatePickerContext';
+} from '../../shared/components/DatePickerContext';
 
 import { DatePickerInput } from './DatePickerInput';
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index ebf8a426b2..5f8783d20f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -7,12 +7,10 @@ import React, {
 
 import { keyMap } from '@leafygreen-ui/lib';
 
-import { DateInputBox } from '../../DateInput';
-import { DateFormField } from '../../DateInput/DateFormField';
-import { useDatePickerContext } from '../../DatePickerContext';
-import { useSegmentRefs } from '../../hooks/useSegmentRefs';
-import { isZeroLike } from '../../utils';
-import { isElementInputSegment } from '../../utils/isElementInputSegment';
+import { DateFormField, DateInputBox } from '../../shared/components/DateInput';
+import { useDatePickerContext } from '../../shared/components/DatePickerContext';
+import { useSegmentRefs } from '../../shared/hooks';
+import { isElementInputSegment, isZeroLike } from '../../shared/utils';
 import { getRelativeSegment } from '../utils/getRelativeSegment';
 import { getSegmentToFocus } from '../utils/getSegmentToFocus';
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index 706d2d999c..01bdc732e2 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -1,6 +1,5 @@
 import { MouseEventHandler } from 'react';
 
-// import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 import { DatePickerComponentProps } from '../DatePickerComponent';
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 95b89ac4ef..fddbf6a358 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -3,14 +3,13 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { addDays, subDays } from 'date-fns';
 
-import { Month } from '../../constants';
 import {
   DatePickerProvider,
   DatePickerProviderProps,
-} from '../../DatePickerContext';
-import { defaultDatePickerContext } from '../../DatePickerContext/DatePickerContext.utils';
-import { newUTC } from '../../utils/newUTC';
-import { setUTCDate } from '../../utils/setUTCDate';
+  defaultDatePickerContext,
+} from '../../shared/components/DatePickerContext';
+import { Month } from '../../shared/constants';
+import { newUTC, setUTCDate } from '../../shared/utils';
 
 import { DatePickerMenu, DatePickerMenuProps } from '.';
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 26c738a05a..88ebc4b5a3 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -10,16 +10,14 @@ import { StoryMetaType } from '@leafygreen-ui/lib';
 import { transitionDuration } from '@leafygreen-ui/tokens';
 import { InlineCode } from '@leafygreen-ui/typography';
 
-import { Month } from '../../constants';
 import {
+  contextPropNames,
   DatePickerContextProps,
   DatePickerProvider,
-} from '../../DatePickerContext';
-import {
-  contextPropNames,
   defaultDatePickerContext,
-} from '../../DatePickerContext/DatePickerContext.utils';
-import { newUTC, pickAndOmit } from '../../utils';
+} from '../../shared/components/DatePickerContext';
+import { Month } from '../../shared/constants';
+import { newUTC, pickAndOmit } from '../../shared/utils';
 
 import { DatePickerMenu } from './DatePickerMenu';
 import { DatePickerMenuProps } from './DatePickerMenu.types';
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 3f56b22663..329d5a13aa 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -14,10 +14,13 @@ import { keyMap } from '@leafygreen-ui/lib';
 import { useForwardedRef } from '@leafygreen-ui/select/src/utils';
 import { spacing } from '@leafygreen-ui/tokens';
 
-import { CalendarCell, CalendarCellState } from '../../Calendar/CalendarCell';
-import { CalendarGrid } from '../../Calendar/CalendarGrid';
-import { MenuWrapper } from '../../Calendar/MenuWrapper';
-import { useDatePickerContext } from '../../DatePickerContext';
+import {
+  CalendarCell,
+  CalendarCellState,
+  CalendarGrid,
+} from '../../shared/components/Calendar';
+import { useDatePickerContext } from '../../shared/components/DatePickerContext';
+import { MenuWrapper } from '../../shared/components/MenuWrapper';
 import {
   getFirstOfMonth,
   getFullMonthLabel,
@@ -25,7 +28,7 @@ import {
   isSameUTCDay,
   isSameUTCMonth,
   setToUTCMidnight,
-} from '../../utils';
+} from '../../shared/utils';
 
 import { getNewHighlight } from './utils/getNewHighlight';
 import {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index 65cb038730..80b4b4a4e3 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -6,9 +6,9 @@ import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import { Option, Select } from '@leafygreen-ui/select';
 
-import { Months, selectElementProps } from '../../../constants';
-import { useDatePickerContext } from '../../../DatePickerContext';
-import { isSameUTCMonth, setUTCMonth, setUTCYear } from '../../../utils';
+import { useDatePickerContext } from '../../../shared/components/DatePickerContext';
+import { Months, selectElementProps } from '../../../shared/constants';
+import { isSameUTCMonth, setUTCMonth, setUTCYear } from '../../../shared/utils';
 import {
   menuHeaderSelectContainerStyles,
   menuHeaderStyles,
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
index 85e49fc7e2..1717dd6c1d 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
@@ -4,7 +4,7 @@ import {
   getFirstOfMonth,
   getLastOfMonth,
   isSameUTCMonth,
-} from '../../../../utils';
+} from '../../../../shared/utils';
 
 export const getNewHighlight = (
   currentHighlight: Date | null,
diff --git a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
index 20b34c8461..65fefd0b68 100644
--- a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
@@ -1,9 +1,8 @@
 import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
-import { DatePickerContextProps } from '../../../DatePickerContext';
-import { DateSegment } from '../../../hooks/useDateSegments';
-import { SegmentRefs } from '../../../hooks/useSegmentRefs';
+import { DatePickerContextProps } from '../../../shared/components/DatePickerContext';
+import { DateSegment, SegmentRefs } from '../../../shared/hooks';
 
 type RelativeDirection = 'next' | 'prev' | 'first' | 'last';
 interface GetRelativeSegmentContext {
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
index 1be0cef9e7..f183924dac 100644
--- a/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
@@ -1,4 +1,4 @@
-import { SegmentRefs } from '../../../hooks/useSegmentRefs';
+import { SegmentRefs } from '../../../shared/hooks';
 
 /**
  * Returns the key of a given segment ref or element
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
index c75967c46e..b651317ba0 100644
--- a/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
@@ -1,7 +1,6 @@
 import isUndefined from 'lodash/isUndefined';
 
-import { isDateSegment } from '../../../hooks/useDateSegments';
-import { SegmentRefs } from '../../../hooks/useSegmentRefs';
+import { isDateSegment, SegmentRefs } from '../../../shared/hooks';
 
 /**
  * Given a {@link Intl.DateTimeFormatPart},
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/getSegmentToFocus.spec.ts b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/getSegmentToFocus.spec.ts
index 47f8b944e6..142e0fab86 100644
--- a/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/getSegmentToFocus.spec.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/getSegmentToFocus.spec.ts
@@ -1,7 +1,7 @@
 import { createRef } from 'react';
 
-import { SegmentRefs } from '../../../hooks/useSegmentRefs';
-import { getFormatParts } from '../../../utils';
+import { SegmentRefs } from '../../../shared/hooks';
+import { getFormatParts } from '../../../shared/utils';
 
 import { getSegmentToFocus } from '.';
 
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
index b6b47d4af9..f06a7a6eca 100644
--- a/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
@@ -1,10 +1,9 @@
 import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
-import { DatePickerContextProps } from '../../../DatePickerContext';
-import { DateSegment } from '../../../hooks/useDateSegments';
-import { SegmentRefs } from '../../../hooks/useSegmentRefs';
-import { getFirstEmptySegment } from '../../../utils';
+import { DatePickerContextProps } from '../../../shared/components/DatePickerContext';
+import { DateSegment, SegmentRefs } from '../../../shared/hooks';
+import { getFirstEmptySegment } from '../../../shared/utils';
 
 interface GetSegmentToFocusProps {
   target: EventTarget;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.styles.ts
deleted file mode 100644
index 356c065c34..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.styles.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { css } from '@leafygreen-ui/emotion';
-
-export const baseStyles = css``;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
deleted file mode 100644
index d4a47f5cc7..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-
-import { useBackdropClick } from '@leafygreen-ui/hooks';
-
-import { useDatePickerContext } from '../../DatePickerContext';
-import { useDateRangeContext } from '../DateRangeContext';
-import { DateRangeInput } from '../DateRangeInput';
-import { DateRangeMenu } from '../DateRangeMenu';
-
-import { DateRangeComponentProps } from './DateRangeComponent.types';
-
-export const DateRangeComponent = ({
-  onCancel,
-  onClear,
-  showQuickSelection,
-  ...rest
-}: DateRangeComponentProps) => {
-  const { isOpen, setOpen, menuId } = useDatePickerContext();
-
-  const {
-    refs: { formFieldRef, menuRef },
-  } = useDateRangeContext();
-
-  useBackdropClick(() => setOpen(false), [formFieldRef, menuRef], isOpen);
-
-  return (
-    <>
-      <DateRangeInput ref={formFieldRef} {...rest} />
-      <DateRangeMenu
-        ref={menuRef}
-        refEl={formFieldRef}
-        id={menuId}
-        onCancel={onCancel}
-        onClear={onClear}
-        showQuickSelection={showQuickSelection}
-      />
-    </>
-  );
-};
-
-DateRangeComponent.displayName = 'DateRangeComponent';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
deleted file mode 100644
index 7923477d99..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/DateRangeComponent.types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { DatePickerContextProps } from '../../DatePickerContext';
-import { DateRangeContextProps } from '../DateRangeContext/DateRangeContext.types';
-import { DateRangePickerProps } from '../DateRangePicker.types';
-
-/**
- * We pass into the component anything in
- * DateRangePickerProps that is _not_ in
- * DatePickerContext or DateRangeContext
- */
-export interface DateRangeComponentProps
-  extends Omit<
-    DateRangePickerProps,
-    keyof (DatePickerContextProps & DateRangeContextProps)
-  > {}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeComponent/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeComponent/index.ts
deleted file mode 100644
index f8d2242e4d..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeComponent/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { DateRangeComponent } from './DateRangeComponent';
-export { DateRangeComponentProps } from './DateRangeComponent.types';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx b/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx
deleted file mode 100644
index 458ea3d5dc..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, {
-  createContext,
-  PropsWithChildren,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
-
-import { DateRangeType, DateType } from '../../types';
-import { addMonthsUTC, setToUTCMidnight } from '../../utils';
-import { getInitialHighlight } from '../utils/getInitialHighlight';
-import { getInitialMonth } from '../utils/getInitialMonth';
-
-import {
-  DateRangeContextProps,
-  DateRangeProviderProps,
-} from './DateRangeContext.types';
-import { useDateRangeComponentRefs } from './useDateRangeComponentRefs';
-
-/** A context for DateRange picker */
-const DateRangeContext = createContext<DateRangeContextProps>(
-  {} as DateRangeContextProps,
-);
-
-/** A hook to access DateRange picker context */
-export const useDateRangeContext = () => useContext(DateRangeContext);
-
-/**
- * A provider for DateRange picker.
- */
-export const DateRangeProvider = ({
-  children,
-  value,
-  setValue: _setValue,
-  handleValidation,
-  rootRef,
-}: PropsWithChildren<DateRangeProviderProps>) => {
-  const refs = useDateRangeComponentRefs(rootRef);
-  const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
-  const [month, setMonth] = useState<Date>(getInitialMonth(value, today));
-  const nextMonth = useMemo(() => addMonthsUTC(month, 1), [month]);
-
-  /** Handle possible side effects here */
-  const setValue = (newRange?: DateRangeType) => {
-    _setValue(newRange);
-  };
-
-  // Keep track of the element the user is highlighting with the keyboard
-  const [highlight, setHighlight] = useState<DateType>(
-    getInitialHighlight(value, today, month),
-  );
-
-  const getHighlightedCell = () => {
-    const highlightKey = highlight?.toISOString();
-    return highlightKey
-      ? refs.calendarCellRefs(highlightKey)?.current
-      : undefined;
-  };
-
-  return (
-    <DateRangeContext.Provider
-      value={{
-        refs,
-        today,
-        value,
-        setValue,
-        handleValidation,
-        month,
-        nextMonth,
-        setMonth,
-        highlight,
-        setHighlight,
-        getHighlightedCell,
-      }}
-    >
-      {children}
-    </DateRangeContext.Provider>
-  );
-};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.types.ts
deleted file mode 100644
index 90793f5678..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeContext/DateRangeContext.types.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { DynamicRefGetter } from '@leafygreen-ui/hooks';
-
-import { SegmentRefs } from '../../hooks/useSegmentRefs';
-import { DateRangeType, DateType } from '../../types';
-import { DateRangePickerProps } from '../DateRangePicker.types';
-
-export interface DateRangeComponentRefs {
-  formFieldRef: React.RefObject<HTMLDivElement>;
-  menuRef: React.RefObject<HTMLDivElement>;
-  startSegmentRefs: SegmentRefs;
-  endSegmentRefs: SegmentRefs;
-  calendarSectionRef: React.RefObject<HTMLDivElement>;
-  chevronRefs: DynamicRefGetter<HTMLButtonElement>;
-  calendarCellRefs: DynamicRefGetter<HTMLTableCellElement>;
-  footerButtonRefs: DynamicRefGetter<HTMLButtonElement>;
-  selectRefs: DynamicRefGetter<HTMLDivElement>;
-  quickRangeButtonRefs: DynamicRefGetter<HTMLButtonElement>;
-}
-
-export interface DateRangeContextProps {
-  refs: DateRangeComponentRefs;
-  value: DateRangeType | undefined;
-  setValue: (newVal: DateRangeType | undefined) => void;
-  handleValidation: DateRangePickerProps['handleValidation'];
-  today: Date;
-  month: Date;
-  nextMonth: Date;
-  setMonth: React.Dispatch<React.SetStateAction<Date>>;
-  highlight: DateType;
-  setHighlight: React.Dispatch<React.SetStateAction<DateType>>;
-  getHighlightedCell: () => HTMLTableCellElement | null | undefined;
-}
-
-export interface DateRangeProviderProps {
-  rootRef: React.ForwardedRef<HTMLDivElement | null>;
-  value: DateRangeType | undefined;
-  setValue: (newVal: DateRangeType | undefined) => void;
-  handleValidation: DateRangePickerProps['handleValidation'];
-}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeContext/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeContext/index.ts
deleted file mode 100644
index 44e3bb3894..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeContext/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { DateRangeProvider, useDateRangeContext } from './DateRangeContext';
-export { DateRangeProviderProps } from './DateRangeContext.types';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeContext/useDateRangeComponentRefs.tsx b/packages/date-picker/src/DateRangePicker/DateRangeContext/useDateRangeComponentRefs.tsx
deleted file mode 100644
index 04ec8f80e8..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeContext/useDateRangeComponentRefs.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useRef } from 'react';
-
-import { useDynamicRefs, useForwardedRef } from '@leafygreen-ui/hooks';
-
-import { useSegmentRefs } from '../../hooks/useSegmentRefs';
-
-import { DateRangeComponentRefs } from './DateRangeContext.types';
-
-/** Creates `ref` objects for any & all relevant component elements */
-export const useDateRangeComponentRefs = (
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-): DateRangeComponentRefs => {
-  const formFieldRef = useForwardedRef(forwardedRef, null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const startSegmentRefs = useSegmentRefs();
-  const endSegmentRefs = useSegmentRefs();
-  const calendarSectionRef = useRef<HTMLDivElement>(null);
-  const chevronRefs = useDynamicRefs<HTMLButtonElement>();
-  const calendarCellRefs = useDynamicRefs<HTMLTableCellElement>();
-  const footerButtonRefs = useDynamicRefs<HTMLButtonElement>();
-  const selectRefs = useDynamicRefs<HTMLDivElement>();
-  const quickRangeButtonRefs = useDynamicRefs<HTMLButtonElement>();
-
-  return {
-    formFieldRef,
-    menuRef,
-    startSegmentRefs,
-    endSegmentRefs,
-    calendarSectionRef,
-    chevronRefs,
-    calendarCellRefs,
-    footerButtonRefs,
-    selectRefs,
-    quickRangeButtonRefs,
-  };
-};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx
deleted file mode 100644
index 5451ca576f..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.spec.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { DateRangeInput } from '.';
-
-describe('packages/date-picker/date-range-picker/date-range-input', () => {
-  describe('Keyboard interaction', () => {
-    // yyyy-mm-dd
-    describe('Left Arrow', () => {
-      test.todo('moves the cursor when the segment has a value');
-      test.todo('focuses the previous segment when the segment is empty');
-      test.todo(
-        'focuses the previous segment if the cursor is at the start of the input text',
-      );
-    });
-
-    describe('Right Arrow', () => {
-      test.todo('moves the cursor when the segment has a value');
-      test.todo('focuses the next segment when the segment is empty');
-      test.todo(
-        'focuses the next segment if the cursor is at the end of the input text',
-      );
-    });
-
-    describe('Backspace key', () => {
-      test.todo('deletes any value in the input');
-      test.todo('deletes the whole value on multiple presses');
-      test.todo('focuses the previous segment if current segment is empty');
-    });
-  });
-});
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.stories.tsx
deleted file mode 100644
index 62da0f1ab9..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.stories.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import { StoryFn } from '@storybook/react';
-
-import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
-import { StoryMetaType } from '@leafygreen-ui/lib';
-import { Size } from '@leafygreen-ui/tokens';
-
-import {
-  DatePickerContextProps,
-  DatePickerProvider,
-} from '../../DatePickerContext';
-
-import { DateRangeInput } from './DateRangeInput';
-
-const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
-  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-    <DatePickerProvider
-      value={{
-        ...ctx?.args,
-      }}
-    >
-      <Story />
-    </DatePickerProvider>
-  </LeafyGreenProvider>
-);
-
-const meta: StoryMetaType<typeof DateRangeInput, DatePickerContextProps> = {
-  title: 'Components/DatePicker/DateRangePicker/DateRangeInput',
-  component: DateRangeInput,
-  decorators: [ProviderWrapper],
-  parameters: {
-    default: null,
-    controls: {
-      exclude: ['segmentRefs'],
-    },
-    generate: {
-      combineArgs: {
-        darkMode: [false, true],
-        // value: [null, new Date('1993-12-26')],
-        dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
-        size: Object.values(Size),
-      },
-      decorator: ProviderWrapper,
-    },
-  },
-  args: {
-    label: 'Label',
-    dateFormat: 'en-UK',
-    timeZone: 'Europe/London',
-  },
-  argTypes: {},
-};
-
-export default meta;
-
-export const Basic: StoryFn<typeof DateRangeInput> = props => {
-  return (
-    <>
-      <DateRangeInput {...props} />
-    </>
-  );
-};
-
-export const Generated = () => {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.styles.ts
deleted file mode 100644
index 4382dcd017..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.styles.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { css } from '@leafygreen-ui/emotion';
-
-export const inputWrapperStyles = css`
-  display: flex;
-  gap: 12px;
-`;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
deleted file mode 100644
index 0123f3523b..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import React, {
-  FocusEventHandler,
-  forwardRef,
-  KeyboardEventHandler,
-  MouseEventHandler,
-} from 'react';
-
-import { keyMap } from '@leafygreen-ui/lib';
-
-import { DateInputBox } from '../../DateInput';
-import { DateFormField } from '../../DateInput/DateFormField';
-import { useDatePickerContext } from '../../DatePickerContext';
-import { DateRangeType, DateType } from '../../types';
-import { isElementInputSegment, isSameUTCRange, isZeroLike } from '../../utils';
-import { useDateRangeContext } from '../DateRangeContext';
-import { getRangeSegmentToFocus } from '../utils/getRangeSegmentToFocus';
-import { getRelativeRangeSegment } from '../utils/getRelativeRangeSegment';
-
-import { inputWrapperStyles } from './DateRangeInput.styles';
-import { DateRangeInputProps } from './DateRangeInput.types';
-
-const EN_DASH = '–';
-
-export const DateRangeInput = forwardRef<HTMLDivElement, DateRangeInputProps>(
-  ({ onChange, ...rest }: DateRangeInputProps, fwdRef) => {
-    const { disabled, formatParts, setOpen, isDirty, setIsDirty } =
-      useDatePickerContext();
-
-    const {
-      refs: { startSegmentRefs, endSegmentRefs },
-      value,
-      setValue,
-      handleValidation,
-      getHighlightedCell,
-    } = useDateRangeContext();
-
-    /** Called when the input, or any of its children, is clicked */
-    const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
-      if (!disabled) {
-        setOpen(true);
-      }
-
-      const segmentToFocus = getRangeSegmentToFocus({
-        target,
-        formatParts,
-        segmentRefs: [startSegmentRefs, endSegmentRefs],
-      });
-
-      segmentToFocus?.focus();
-    };
-
-    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
-      const { target: _target, key } = e;
-      const target = _target as HTMLElement;
-      const isSegment =
-        isElementInputSegment(target, startSegmentRefs) ||
-        isElementInputSegment(target, endSegmentRefs);
-
-      // if target is not a segment, do nothing
-      if (!isSegment) return;
-
-      const isSegmentEmpty = isZeroLike(target.value);
-      const cursorPosition = target.selectionEnd;
-
-      const ctx = {
-        target,
-        formatParts,
-        rangeSegmentRefs: [startSegmentRefs, endSegmentRefs],
-      };
-
-      switch (key) {
-        case keyMap.ArrowLeft:
-          if (isSegmentEmpty || cursorPosition === 0) {
-            const prevSegment = getRelativeRangeSegment('prev', ctx);
-
-            prevSegment?.current?.focus();
-          }
-
-          break;
-        case keyMap.ArrowRight:
-          if (isSegmentEmpty || cursorPosition === target.value.length) {
-            const nextSegment = getRelativeRangeSegment('next', ctx);
-
-            nextSegment?.current?.focus();
-          }
-          break;
-        case keyMap.ArrowDown:
-        case keyMap.ArrowUp:
-          {
-            // default number input behavior
-          }
-          break;
-
-        case keyMap.Backspace: {
-          if (isSegmentEmpty) {
-            const prevSegment = getRelativeRangeSegment('prev', ctx);
-            prevSegment?.current?.focus();
-          }
-          break;
-        }
-
-        case keyMap.Enter:
-          handleValidation?.(value);
-          break;
-
-        case keyMap.Escape:
-          setOpen(false);
-          handleValidation?.(value);
-          break;
-
-        case keyMap.Tab:
-          // default behavior
-          // focus trap handled by parent
-          break;
-
-        default:
-          // any other keydown should open the menu
-          setOpen(true);
-      }
-    };
-
-    /** Called when any child of DatePickerInput is blurred */
-    const handleInputBlur: FocusEventHandler = e => {
-      const nextFocus = e.relatedTarget as HTMLInputElement;
-
-      const segmentElements = [startSegmentRefs, endSegmentRefs].flatMap(refs =>
-        Object.values(refs).map(ref => ref.current),
-      );
-
-      const isNextFocusASegment = segmentElements.includes(nextFocus);
-
-      // If the next focus is _not_ on a segment
-      if (!isNextFocusASegment) {
-        setIsDirty(true);
-        handleValidation?.(value);
-      }
-    };
-
-    const handleCalendarButtonClick: MouseEventHandler<
-      HTMLButtonElement
-    > = e => {
-      if (!disabled) {
-        e.stopPropagation();
-        setOpen(true);
-        requestAnimationFrame(() => {
-          // once the menu is open
-          const highlightedCell = getHighlightedCell();
-          highlightedCell?.focus();
-        });
-      }
-    };
-
-    /** Called when the input's start or end value has changed */
-    const updateValue = (newRange?: DateRangeType) => {
-      if (!isSameUTCRange(value, newRange)) {
-        // When the value changes via the input element,
-        // we only trigger validation if the component is dirty
-        if (isDirty) {
-          handleValidation?.(newRange);
-        }
-        setValue(newRange);
-      }
-    };
-
-    const handleStartInputChange = (newStart: DateType) => {
-      const end = value ? value[1] : null;
-      updateValue([newStart, end]);
-    };
-
-    const handleEndInputChange = (newEnd: DateType) => {
-      const start = value ? value[0] : null;
-      updateValue([start, newEnd]);
-    };
-
-    return (
-      <DateFormField
-        ref={fwdRef}
-        onKeyDown={handleKeyDown}
-        onInputClick={handleInputClick}
-        onBlur={handleInputBlur}
-        onIconButtonClick={handleCalendarButtonClick}
-        {...rest}
-      >
-        <div className={inputWrapperStyles}>
-          <DateInputBox
-            data-lg="date-range_start-input"
-            value={value?.[0]}
-            setValue={handleStartInputChange}
-            segmentRefs={startSegmentRefs}
-            onChange={onChange}
-          />
-          <span>{EN_DASH}</span>
-          <DateInputBox
-            data-lg="date-range_end-input"
-            value={value?.[1]}
-            setValue={handleEndInputChange}
-            segmentRefs={endSegmentRefs}
-            onChange={onChange}
-          />
-        </div>
-      </DateFormField>
-    );
-  },
-);
-
-DateRangeInput.displayName = 'DateRangeInput';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
deleted file mode 100644
index 486b2c62cb..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/DateRangeInput.types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { HTMLElementProps } from '@leafygreen-ui/lib';
-
-import { DateRangeComponentProps } from '../DateRangeComponent';
-
-/**
- * We pass into the Input specific properties of ComponentProps
- * and any other `div` attributes
- */
-export interface DateRangeInputProps
-  extends Pick<DateRangeComponentProps, 'onChange'>,
-    Omit<HTMLElementProps<'div'>, 'onChange'> {}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeInput/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeInput/index.ts
deleted file mode 100644
index ffa12d47f9..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeInput/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { DateRangeInput } from './DateRangeInput';
-export { DateRangeInputProps } from './DateRangeInput.types';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
deleted file mode 100644
index 1aab587d19..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.spec.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { addDays, subDays } from 'date-fns';
-
-import { Month } from '../../constants';
-import {
-  DatePickerProvider,
-  DatePickerProviderProps,
-  defaultDatePickerContext,
-} from '../../DatePickerContext';
-import { DateRangeType } from '../../types';
-import { newUTC } from '../../utils';
-import {
-  DateRangeProvider,
-  type DateRangeProviderProps,
-} from '../DateRangeContext';
-import { testToday } from '../DateRangePicker.testutils';
-
-import { DateRangeMenu, type DateRangeMenuProps } from '.';
-
-const renderDateRangeMenu = (args?: {
-  props?: DateRangeMenuProps;
-  rangeContext?: Partial<DateRangeProviderProps>;
-  datePickerContext?: Partial<DatePickerProviderProps>;
-}) => {
-  const results = render(
-    <DatePickerProvider
-      value={{
-        ...defaultDatePickerContext,
-        ...args?.datePickerContext,
-        initialOpen: true,
-      }}
-    >
-      <DateRangeProvider
-        value={undefined}
-        setValue={() => {}}
-        handleValidation={() => {}}
-        rootRef={React.createRef()}
-        {...args?.rangeContext}
-      >
-        <DateRangeMenu {...args?.props} />
-      </DateRangeProvider>
-    </DatePickerProvider>,
-  );
-
-  const calendarCells = results.getAllByTestId('lg-date_picker-calendar_cell');
-  const todayCell = calendarCells.find(
-    cell => cell.getAttribute('aria-current') === 'true',
-  );
-  const getCellForDate = (date: Date) =>
-    calendarCells.find(cell => cell.dataset.iso === date.toISOString());
-
-  return { ...results, calendarCells, todayCell, getCellForDate };
-};
-
-describe('packages/date-picker/date-range-picker/menu', () => {
-  beforeAll(() => {
-    // Set the current time to midnight UTC on 2023-12-26
-    jest.useFakeTimers().setSystemTime(testToday);
-  });
-
-  test('initial focus is on `today`', () => {
-    const { todayCell } = renderDateRangeMenu();
-    expect(todayCell).toHaveFocus();
-  });
-
-  describe('Keyboard navigation', () => {
-    describe('Arrow Keys', () => {
-      const initialStart = newUTC(2023, Month.September, 14);
-      const value = [initialStart, null] as DateRangeType;
-      const rangeContext = { value };
-
-      describe('default behavior', () => {
-        test('left arrow moves focus to the previous day', () => {
-          const { getCellForDate } = renderDateRangeMenu({ rangeContext });
-          userEvent.keyboard('{leftarrow}');
-          const focusedCell = getCellForDate(subDays(initialStart, 1));
-          expect(focusedCell).toHaveFocus();
-        });
-        test('right arrow moves focus to the next day', () => {
-          const { getCellForDate } = renderDateRangeMenu({ rangeContext });
-          userEvent.keyboard('{rightarrow}');
-          const focusedCell = getCellForDate(addDays(initialStart, 1));
-          expect(focusedCell).toHaveFocus();
-        });
-        test('up arrow moves focus to the previous week', () => {
-          const { getCellForDate } = renderDateRangeMenu({ rangeContext });
-          userEvent.keyboard('{uparrow}');
-          const focusedCell = getCellForDate(subDays(initialStart, 7));
-          expect(focusedCell).toHaveFocus();
-        });
-        test('down arrow moves focus to the next week', () => {
-          const { getCellForDate } = renderDateRangeMenu({ rangeContext });
-          userEvent.keyboard('{downarrow}');
-          const focusedCell = getCellForDate(addDays(initialStart, 7));
-          expect(focusedCell).toHaveFocus();
-        });
-      });
-
-      describe('when next day would be out of range', () => {
-        test('left arrow does nothing', () => {
-          const { getCellForDate } = renderDateRangeMenu({
-            rangeContext,
-            datePickerContext: { min: subDays(initialStart, 1) },
-          });
-          userEvent.keyboard('{leftarrow}');
-          const focusedCell = getCellForDate(initialStart);
-          expect(focusedCell).toHaveFocus();
-        });
-        test('right arrow does nothing', () => {
-          const { getCellForDate } = renderDateRangeMenu({
-            rangeContext,
-            datePickerContext: { max: addDays(initialStart, 1) },
-          });
-          userEvent.keyboard('{rightarrow}');
-          const focusedCell = getCellForDate(initialStart);
-          expect(focusedCell).toHaveFocus();
-        });
-        test('up arrow does nothing', () => {
-          const { getCellForDate } = renderDateRangeMenu({
-            rangeContext,
-            datePickerContext: { min: subDays(initialStart, 6) },
-          });
-          userEvent.keyboard('{uparrow}');
-          const focusedCell = getCellForDate(initialStart);
-          expect(focusedCell).toHaveFocus();
-        });
-        test('down arrow does nothing', () => {
-          const { getCellForDate } = renderDateRangeMenu({
-            rangeContext,
-            datePickerContext: { max: addDays(initialStart, 7) },
-          });
-          userEvent.keyboard('{downarrow}');
-          const focusedCell = getCellForDate(initialStart);
-          expect(focusedCell).toHaveFocus();
-        });
-      });
-
-      describe('update the displayed month', () => {
-        test('left arrow updates displayed month to previous', () => {
-          const { getAllByRole } = renderDateRangeMenu({
-            rangeContext: { value: [newUTC(2023, Month.September, 1), null] },
-          });
-          userEvent.keyboard('{leftarrow}');
-          const calendarGrids = getAllByRole('grid');
-          expect(calendarGrids[0]).toHaveAttribute('aria-label', 'August 2023');
-        });
-        test('right arrow updates displayed month to next', () => {
-          const { getAllByRole } = renderDateRangeMenu({
-            rangeContext: { value: [newUTC(2023, Month.September, 30), null] },
-          });
-          userEvent.keyboard('{rightarrow}');
-          const calendarGrids = getAllByRole('grid');
-          expect(calendarGrids[0]).toHaveAttribute(
-            'aria-label',
-            'October 2023',
-          );
-        });
-        test('up arrow updates displayed month to previous', () => {
-          const { getAllByRole } = renderDateRangeMenu({
-            rangeContext: { value: [newUTC(2023, Month.September, 6), null] },
-          });
-          userEvent.keyboard('{uparrow}');
-          const calendarGrids = getAllByRole('grid');
-          expect(calendarGrids[0]).toHaveAttribute('aria-label', 'August 2023');
-        });
-        test('down arrow updates displayed month to next', () => {
-          const { getAllByRole } = renderDateRangeMenu({
-            rangeContext: { value: [newUTC(2023, Month.September, 24), null] },
-          });
-          userEvent.keyboard('{downarrow}');
-          const calendarGrids = getAllByRole('grid');
-          expect(calendarGrids[0]).toHaveAttribute(
-            'aria-label',
-            'October 2023',
-          );
-        });
-        test('does not update month when month does not need to change', () => {
-          const { getAllByRole } = renderDateRangeMenu({
-            rangeContext: { value: [testToday, null] },
-          });
-          userEvent.keyboard('{downarrow}');
-          const calendarGrids = getAllByRole('grid');
-          expect(calendarGrids[0]).toHaveAttribute(
-            'aria-label',
-            'October 2023',
-          );
-        });
-      });
-
-      describe('when month should be updated', () => {
-        test('left arrow focuses the previous day', () => {
-          const { getCellForDate } = renderDateRangeMenu({
-            rangeContext: { value: [newUTC(2023, Month.September, 1), null] },
-          });
-          userEvent.keyboard('{leftarrow}');
-          const focusedCell = getCellForDate(newUTC(2023, Month.August, 31));
-          expect(focusedCell).toHaveFocus();
-        });
-        test('right arrow focuses the next day', () => {
-          const { getCellForDate } = renderDateRangeMenu({
-            rangeContext: { value: [newUTC(2023, Month.September, 30), null] },
-          });
-          userEvent.keyboard('{rightarrow}');
-          const focusedCell = getCellForDate(newUTC(2023, Month.October, 1));
-          expect(focusedCell).toHaveFocus();
-        });
-        test('up arrow focuses the previous week', () => {
-          const { getCellForDate } = renderDateRangeMenu({
-            rangeContext: { value: [newUTC(2023, Month.September, 6), null] },
-          });
-          userEvent.keyboard('{uparrow}');
-          const focusedCell = getCellForDate(newUTC(2023, Month.August, 31));
-          expect(focusedCell).toHaveFocus();
-        });
-        test('down arrow focuses the next week', () => {
-          const { getCellForDate } = renderDateRangeMenu({
-            rangeContext: { value: [newUTC(2023, Month.September, 24), null] },
-          });
-          userEvent.keyboard('{downarrow}');
-          const focusedCell = getCellForDate(newUTC(2023, Month.October, 1));
-          expect(focusedCell).toHaveFocus();
-        });
-      });
-    });
-  });
-});
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
deleted file mode 100644
index ef223c3d01..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.stories.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks, react/prop-types */
-import React, { useRef } from 'react';
-import { Decorator, StoryObj } from '@storybook/react';
-import omit from 'lodash/omit';
-import MockDate from 'mockdate';
-
-import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
-import { StoryMetaType } from '@leafygreen-ui/lib';
-import { transitionDuration } from '@leafygreen-ui/tokens';
-import { InlineCode } from '@leafygreen-ui/typography';
-
-import { Month } from '../../constants';
-import {
-  DatePickerContextProps,
-  DatePickerProvider,
-} from '../../DatePickerContext';
-import {
-  contextPropNames,
-  defaultDatePickerContext,
-} from '../../DatePickerContext/DatePickerContext.utils';
-import { newUTC } from '../../utils';
-import { DateRangeProvider } from '../DateRangeContext';
-import { DateRangeContextProps } from '../DateRangeContext/DateRangeContext.types';
-
-import { DateRangeMenu } from './DateRangeMenu';
-import { DateRangeMenuProps } from './DateRangeMenu.types';
-
-const mockToday = newUTC(2023, Month.September, 14);
-
-type DateRangeMenuStoryProps = DateRangeMenuProps &
-  DateRangeContextProps &
-  DatePickerContextProps;
-
-type DateRangeMenuStoryType = StoryObj<DateRangeMenuStoryProps>;
-
-const MenuDecorator: Decorator<DateRangeMenuStoryProps> = (Story, ctx) => {
-  const {
-    darkMode,
-    value,
-    label,
-    description,
-    dateFormat,
-    timeZone,
-    min,
-    max,
-    ...args
-  } = ctx.args as DateRangeMenuStoryProps;
-
-  // Force `new Date()` to return `mockToday`
-  MockDate.set(mockToday);
-
-  return (
-    <LeafyGreenProvider darkMode={darkMode}>
-      <DatePickerProvider
-        value={{
-          ...defaultDatePickerContext,
-          label,
-          description,
-          dateFormat,
-          timeZone,
-          min,
-          max,
-          initialOpen: true,
-        }}
-      >
-        <DateRangeProvider
-          rootRef={React.createRef()}
-          value={value}
-          setValue={() => {}}
-          handleValidation={() => {}}
-        >
-          <Story {...args} />
-        </DateRangeProvider>
-      </DatePickerProvider>
-    </LeafyGreenProvider>
-  );
-};
-
-const meta: StoryMetaType<typeof DateRangeMenu, DateRangeMenuStoryProps> = {
-  title: 'Components/DatePicker/DateRangePicker/DateRangeMenu',
-  component: DateRangeMenu,
-  // @ts-expect-error
-  decorators: [MenuDecorator],
-  parameters: {
-    default: null,
-    chromatic: {
-      delay: transitionDuration.slower,
-    },
-  },
-  args: {
-    isOpen: true,
-    dateFormat: 'en-UK',
-    timeZone: 'Europe/London',
-    min: new Date('1996-10-14'),
-    max: new Date('2026-10-14'),
-    showQuickSelection: true,
-  },
-  argTypes: {},
-};
-
-export default meta;
-
-export const Basic: DateRangeMenuStoryType = {
-  render: (args: DateRangeMenuProps) => {
-    const props = omit(args, [...contextPropNames, 'isOpen']);
-    const refEl = useRef<HTMLDivElement>(null);
-    return (
-      <>
-        <code ref={refEl}>refEl</code>
-        <DateRangeMenu {...props} refEl={refEl} />
-      </>
-    );
-  },
-};
-
-export const WithValue: DateRangeMenuStoryType = {
-  args: {
-    value: [newUTC(2023, Month.September, 14), null],
-  },
-  render: (args: DateRangeMenuProps) => {
-    const props = omit(args, [...contextPropNames, 'isOpen']);
-    const refEl = useRef<HTMLDivElement>(null);
-    return (
-      <div style={{ minHeight: '50vh' }}>
-        <InlineCode ref={refEl}>refEl</InlineCode>
-        <DateRangeMenu {...props} refEl={refEl} />
-      </div>
-    );
-  },
-};
-
-export const DarkMode: DateRangeMenuStoryType = {
-  ...WithValue,
-  args: {
-    darkMode: true,
-  },
-};
-
-/**
- * Chromatic Interaction tests
- */
-// TODO:
-
-// type DateRangeMenuInteractionTestType = Omit<DateRangeMenuStoryType, 'play'> &
-//   Required<Pick<DateRangeMenuStoryType, 'play'>>;
-
-// export const InitialFocusToday: DateRangeMenuInteractionTestType = {
-//   ...Basic,
-//   play: async ctx => {
-//     const { findByRole } = within(ctx.canvasElement.parentElement!);
-//     await findByRole('listbox');
-//     userEvent.tab();
-//   },
-// };
-// export const InitialFocusValue: DateRangeMenuInteractionTestType = {
-//   ...WithValue,
-//   play: async ctx => {
-//     const { findByRole } = within(ctx.canvasElement.parentElement!);
-//     await findByRole('listbox');
-//     userEvent.tab();
-//   },
-// };
-
-// export const LeftArrowKey: DateRangeMenuInteractionTestType = {
-//   ...Basic,
-//   play: async ctx => {
-//     await InitialFocusToday.play(ctx);
-//     userEvent.keyboard('{arrowleft}');
-//   },
-// };
-
-// export const RightArrowKey: DateRangeMenuInteractionTestType = {
-//   ...Basic,
-//   play: async ctx => {
-//     await InitialFocusToday.play(ctx);
-//     userEvent.keyboard('{arrowright}');
-//   },
-// };
-
-// export const UpArrowKey: DateRangeMenuInteractionTestType = {
-//   ...Basic,
-//   play: async ctx => {
-//     await InitialFocusToday.play(ctx);
-//     userEvent.keyboard('{arrowup}');
-//   },
-// };
-
-// export const DownArrowKey: DateRangeMenuInteractionTestType = {
-//   ...Basic,
-//   play: async ctx => {
-//     await InitialFocusToday.play(ctx);
-//     userEvent.keyboard('{arrowdown}');
-//   },
-// };
-
-// export const UpToPrevMonth: DateRangeMenuInteractionTestType = {
-//   ...Basic,
-//   play: async ctx => {
-//     await InitialFocusToday.play(ctx);
-//     userEvent.keyboard('{arrowup}{arrowup}');
-//   },
-// };
-
-// export const DownToNextMonth: DateRangeMenuInteractionTestType = {
-//   ...Basic,
-//   play: async ctx => {
-//     await InitialFocusToday.play(ctx);
-//     userEvent.keyboard('{arrowdown}{arrowdown}{arrowdown}');
-//   },
-// };
-
-// export const OpenMonthMenu: DateRangeMenuInteractionTestType = {
-//   ...Basic,
-//   play: async ctx => {
-//     const canvas = within(ctx.canvasElement.parentElement!);
-//     await canvas.findByRole('listbox');
-//     const monthMenu = await canvas.findByLabelText('Select month');
-//     userEvent.click(monthMenu);
-//   },
-// };
-
-// export const SelectJanuary: DateRangeMenuInteractionTestType = {
-//   ...Basic,
-//   play: async ctx => {
-//     await OpenMonthMenu.play(ctx);
-//     const { findAllByRole } = within(ctx.canvasElement.parentElement!);
-//     const options = await findAllByRole('option');
-//     const Jan = options[0];
-//     userEvent.click(Jan);
-//   },
-// };
-
-// export const OpenYearMenu: DateRangeMenuInteractionTestType = {
-//   ...Basic,
-//   play: async ctx => {
-//     const canvas = within(ctx.canvasElement.parentElement!);
-//     await canvas.findByRole('listbox');
-//     const monthMenu = await canvas.findByLabelText('Select year');
-//     userEvent.click(monthMenu);
-//   },
-// };
-
-// export const Select2026: DateRangeMenuInteractionTestType = {
-//   ...Basic,
-//   play: async ctx => {
-//     await OpenYearMenu.play(ctx);
-//     const { findAllByRole } = within(ctx.canvasElement.parentElement!);
-//     const options = await findAllByRole('option');
-//     const _2026 = last(options);
-//     userEvent.click(_2026!);
-//   },
-// };
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts
deleted file mode 100644
index 5ef89b0e6b..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.styles.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { css } from '@leafygreen-ui/emotion';
-
-import { calendarsClassName } from './DateRangeMenuCalendars/DateRangeMenuCalendars.styles';
-import { quickSelectionClassName } from './QuickSelectionMenu/QuickSelectionMenu.styles';
-
-export const rangeMenuWrapperStyles = css`
-  padding: 0; // needs to be set by inner content
-  z-index: 1;
-`;
-
-export const menuContentStyles = css`
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: max-content auto;
-  grid-template-areas: 'quick-select calendars';
-  z-index: 1;
-
-  & > .${quickSelectionClassName} {
-    grid-area: quick-select;
-  }
-
-  & > .${calendarsClassName} {
-    grid-area: calendars;
-  }
-`;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
deleted file mode 100644
index 8ba9e4a283..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import React, {
-  FocusEventHandler,
-  forwardRef,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  useEffect,
-} from 'react';
-
-import { keyMap } from '@leafygreen-ui/lib';
-import { spacing } from '@leafygreen-ui/tokens';
-
-import { MenuWrapper } from '../../Calendar/MenuWrapper';
-import { useDatePickerContext } from '../../DatePickerContext';
-import { DateRangeType } from '../../types';
-import { useDateRangeContext } from '../DateRangeContext';
-
-import {
-  menuContentStyles,
-  rangeMenuWrapperStyles,
-} from './DateRangeMenu.styles';
-import { DateRangeMenuProps } from './DateRangeMenu.types';
-import { DateRangeMenuCalendars } from './DateRangeMenuCalendars';
-import { DateRangeMenuFooter } from './DateRangeMenuFooter';
-import { QuickSelectionMenu } from './QuickSelectionMenu';
-
-export const DateRangeMenu = forwardRef<HTMLDivElement, DateRangeMenuProps>(
-  (
-    { showQuickSelection, onCancel, onClear, ...rest }: DateRangeMenuProps,
-    fwdRef,
-  ) => {
-    // const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
-    const { isOpen, setOpen, setIsDirty } = useDatePickerContext();
-    const { value, setValue, getHighlightedCell, refs } = useDateRangeContext();
-
-    useEffect(() => {
-      // Once the menu opens, mark the input as dirty
-      if (isOpen) {
-        setIsDirty(true);
-      }
-    }, [setIsDirty, isOpen]);
-
-    /** Called when any calendar cell is clicked */
-    const updateValue = (newRange?: DateRangeType) => {
-      // TODO: more logic here
-      setValue(newRange);
-    };
-
-    /** Triggered any time an element in the menu is focused */
-    const handleMenuFocus: FocusEventHandler<HTMLDivElement> = e => {
-      const element = e.target;
-      const previousFocus = e.relatedTarget;
-
-      const isInitialMenuFocus =
-        refs.menuRef.current?.contains(element) &&
-        !refs.menuRef.current.contains(previousFocus);
-
-      if (isInitialMenuFocus) {
-        const highlightedCell = getHighlightedCell();
-        highlightedCell?.focus();
-      }
-    };
-
-    /** Triggered on any key down event */
-    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
-      if (e.key === keyMap.Tab) {
-        const currentFocus = document.activeElement;
-
-        // Focus trap:
-        // if focus is on the "Apply" button, move focus to either
-        // left chevron or month select menu
-        if (currentFocus === refs.footerButtonRefs('apply').current) {
-          const elementToFocus = showQuickSelection
-            ? refs.selectRefs('month').current?.querySelector('button')
-            : refs.chevronRefs('left').current;
-
-          e.preventDefault();
-          elementToFocus?.focus();
-        }
-      }
-    };
-
-    /** Triggered when the Apply button is clicked */
-    const handleApply: MouseEventHandler<HTMLButtonElement> = _ => {
-      updateValue(value);
-      setOpen(false);
-    };
-
-    /** Triggered when the cancel button is clicked */
-    const handleCancel: MouseEventHandler<HTMLButtonElement> = e => {
-      updateValue(value);
-      setOpen(false);
-      onCancel?.(e);
-    };
-
-    /** Triggered when the clear button is clicked */
-    const handleClear: MouseEventHandler<HTMLButtonElement> = e => {
-      updateValue([null, null]);
-      onClear?.(e);
-    };
-
-    return (
-      <MenuWrapper
-        ref={fwdRef}
-        usePortal
-        role="listbox"
-        active={isOpen}
-        spacing={spacing[1]}
-        className={rangeMenuWrapperStyles}
-        onKeyDown={handleKeyDown}
-        onFocus={handleMenuFocus}
-        {...rest}
-      >
-        <div className={menuContentStyles}>
-          {showQuickSelection && <QuickSelectionMenu />}
-          <DateRangeMenuCalendars ref={refs.calendarSectionRef} />
-        </div>
-        <DateRangeMenuFooter
-          onApply={handleApply}
-          onCancel={handleCancel}
-          onClear={handleClear}
-        />
-      </MenuWrapper>
-    );
-  },
-);
-
-DateRangeMenu.displayName = 'DateRangeMenu';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
deleted file mode 100644
index bbfef38409..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenu.types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { HTMLElementProps } from '@leafygreen-ui/lib';
-import { PopoverProps, PortalControlProps } from '@leafygreen-ui/popover';
-
-import { DateRangeComponentProps } from '../DateRangeComponent';
-
-/**
- * Pass into the menu specific properties of ComponentProps
- * and any other `div` attributes
- */
-export type DateRangeMenuProps = PortalControlProps &
-  Pick<PopoverProps, 'refEl'> &
-  Pick<DateRangeComponentProps, 'showQuickSelection' | 'onCancel' | 'onClear'> &
-  HTMLElementProps<'div'> & {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
deleted file mode 100644
index d1ca8acd63..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.styles.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { css } from '@leafygreen-ui/emotion';
-import { createUniqueClassName } from '@leafygreen-ui/lib';
-import { spacing, typeScales } from '@leafygreen-ui/tokens';
-
-const calendarGapX = spacing[4] * 2;
-
-export const calendarsClassName = createUniqueClassName(
-  'date-range-menu-calendars',
-);
-
-export const calendarsFrameStyles = css`
-  display: grid;
-  grid-template-rows: 28px auto; // Size of icon-button
-  grid-template-areas: 'header' 'calendars';
-  gap: ${spacing[3]}px;
-  padding: ${spacing[4]}px;
-  /* padding-top: ${spacing[6]}px; */
-`;
-
-export const calendarsContainerStyles = css`
-  grid-area: calendars;
-  display: flex;
-  gap: ${calendarGapX}px;
-  align-items: start;
-  height: fit-content;
-`;
-
-export const calendarHeadersContainerStyle = css`
-  grid-area: header;
-  display: flex;
-  gap: ${calendarGapX}px;
-  align-items: center;
-`;
-
-export const calendarHeaderStyles = css`
-  display: flex;
-
-  width: 100%;
-  align-items: center;
-
-  h6 {
-    font-size: ${typeScales.body2.fontSize}px;
-    line-height: ${typeScales.body2.lineHeight}px;
-    width: 100%;
-    text-align: center;
-  }
-`;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
deleted file mode 100644
index d39bd7e180..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.tsx
+++ /dev/null
@@ -1,341 +0,0 @@
-import React, {
-  forwardRef,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  useLayoutEffect,
-  useState,
-} from 'react';
-import { addDays, isWithinInterval, subDays } from 'date-fns';
-import isNull from 'lodash/isNull';
-import isUndefined from 'lodash/isUndefined';
-
-import { cx } from '@leafygreen-ui/emotion';
-import { usePrevious } from '@leafygreen-ui/hooks';
-import Icon from '@leafygreen-ui/icon';
-import IconButton from '@leafygreen-ui/icon-button';
-import { keyMap } from '@leafygreen-ui/lib';
-import { Subtitle } from '@leafygreen-ui/typography';
-
-import {
-  CalendarCell,
-  CalendarCellState,
-  CalendarGrid,
-} from '../../../Calendar';
-import { CalendarCellRangeState } from '../../../Calendar/CalendarCell';
-import { useDatePickerContext } from '../../../DatePickerContext';
-import { DateRangeType, DateType } from '../../../types';
-import {
-  getFullMonthLabel,
-  getUTCDateString,
-  isDefined,
-  isSameUTCDay,
-  isSameUTCMonth,
-  maxDate,
-  minDate,
-  setUTCMonth,
-} from '../../../utils';
-import { useDateRangeContext } from '../../DateRangeContext';
-
-import {
-  calendarHeadersContainerStyle,
-  calendarHeaderStyles,
-  calendarsClassName,
-  calendarsContainerStyles,
-  calendarsFrameStyles,
-} from './DateRangeMenuCalendars.styles';
-import { DateRangeMenuCalendarsProps } from './DateRangeMenuCalendars.types';
-
-export const DateRangeMenuCalendars = forwardRef<
-  HTMLDivElement,
-  DateRangeMenuCalendarsProps
->((_, fwdRef) => {
-  const { isInRange, isOpen, setOpen } = useDatePickerContext();
-  const {
-    refs,
-    value,
-    setValue,
-    handleValidation,
-    highlight,
-    setHighlight,
-    month,
-    nextMonth,
-    setMonth: setDisplayMonth,
-    today,
-  } = useDateRangeContext();
-
-  const prevOpen = usePrevious(isOpen);
-  const [hoveredCell, setHover] = useState<DateType>(null);
-
-  /** On initial open, focus the cell */
-  useLayoutEffect(() => {
-    if (highlight && isOpen && !prevOpen) {
-      const highlightCellRef = refs.calendarCellRefs(highlight.toISOString());
-      highlightCellRef.current?.focus();
-    }
-  }, [highlight, isOpen, prevOpen, refs]);
-
-  /**
-   * setDisplayMonth with side effects
-   */
-  const updateMonth = (newMonth: Date) => {
-    if (isSameUTCMonth(newMonth, month)) {
-      return;
-    }
-
-    // const newHighlight = getNewHighlight(highlight, month, newMonth);
-    // const shouldUpdateHighlight = !isSameUTCDay(highlight, newHighlight);
-
-    // if (newHighlight && shouldUpdateHighlight) {
-    //   setHighlight(newHighlight);
-    // }
-
-    setDisplayMonth(newMonth);
-  };
-
-  /**
-   * setHighlight with side effects
-   */
-  const updateHighlight = (newHighlight: Date) => {
-    // change month if nextHighlight is different than `month` or `nextMonth`
-    if (
-      !isSameUTCMonth(month, newHighlight) &&
-      !isSameUTCMonth(nextMonth, newHighlight)
-    ) {
-      setDisplayMonth(newHighlight);
-    }
-
-    // keep track of the highlighted cell
-
-    if (!isSameUTCDay(newHighlight, highlight)) {
-      setHighlight(newHighlight);
-
-      // After the DOM changes, focus the relevant cell
-      requestAnimationFrame(() => {
-        const highlightCellRef = refs.calendarCellRefs(
-          newHighlight.toISOString(),
-        );
-        highlightCellRef.current?.focus();
-      });
-    }
-  };
-
-  /**
-   * Creates a click handler for a specific cell date
-   */
-  const cellClickHandlerForDay =
-    (day: Date): MouseEventHandler<HTMLTableCellElement> =>
-    () => {
-      if (isInRange(day)) {
-        // if no value is set, set the start date
-        if (!value || value.every(isNull)) {
-          setValue([day, null]);
-        } else if (value.some(isNull)) {
-          // if only one date is set, set both dates
-          const newRange: DateRangeType = [
-            minDate([...value, day]) ?? day,
-            maxDate([...value, day]) ?? day,
-          ];
-          setValue(newRange);
-        } else if (value.every(isDefined)) {
-          // if both values are set, set the start date & clear the end date
-          setValue([day, null]);
-        }
-      }
-    };
-
-  /** Returns the current state of the cell */
-  const getCellState = (cellDay: Date): CalendarCellState => {
-    if (!isInRange(cellDay)) {
-      return CalendarCellState.Disabled;
-    }
-
-    // if at least the start/end date is defined...
-    if (value && value.some(isDefined)) {
-      if (
-        isSameUTCDay(cellDay, minDate(value)) ||
-        isSameUTCDay(cellDay, maxDate(value))
-      ) {
-        return CalendarCellState.Active;
-      }
-    }
-
-    return CalendarCellState.Default;
-  };
-
-  const getCellRangeState = (cellDay: Date): CalendarCellRangeState => {
-    // if at least the start/end date is defined...
-    if (value && value.some(isDefined)) {
-      // for the purposes of visualizing the calendar,
-      // the range start is the earliest/latest date of the start/end value or hovered cell,
-      const rangeStart = minDate([...value, hoveredCell]);
-      const rangeEnd = maxDate([...value, hoveredCell]);
-
-      if (isSameUTCDay(cellDay, rangeStart)) {
-        return CalendarCellRangeState.Start;
-      }
-
-      if (isSameUTCDay(cellDay, rangeEnd)) {
-        return CalendarCellRangeState.End;
-      }
-
-      // otherwise if the current cell is within the range of start & end
-      if (
-        !isUndefined(rangeStart) &&
-        !isUndefined(rangeEnd) &&
-        isWithinInterval(cellDay, { start: rangeStart, end: rangeEnd })
-      ) {
-        return CalendarCellRangeState.Range;
-      }
-    }
-
-    return CalendarCellRangeState.None;
-  };
-
-  /** Called on any keydown within the menu element */
-  const handleCalendarKeyDown: KeyboardEventHandler<
-    HTMLTableElement
-  > = event => {
-    const { key } = event;
-    const highlightStart = highlight || value?.[0] || value?.[1] || today;
-    let nextHighlight = highlightStart;
-
-    switch (key) {
-      case keyMap.ArrowLeft: {
-        nextHighlight = subDays(highlightStart, 1);
-        break;
-      }
-
-      case keyMap.ArrowRight: {
-        nextHighlight = addDays(highlightStart, 1);
-        break;
-      }
-
-      case keyMap.ArrowUp: {
-        nextHighlight = subDays(highlightStart, 7);
-        break;
-      }
-
-      case keyMap.ArrowDown: {
-        nextHighlight = addDays(highlightStart, 7);
-        break;
-      }
-
-      case keyMap.Escape:
-        setOpen(false);
-        handleValidation?.(value);
-        break;
-
-      default:
-        break;
-    }
-
-    // if nextHighlight is in range
-    if (isInRange(nextHighlight)) {
-      updateHighlight(nextHighlight);
-
-      // Prevent the parent keydown handler from being called
-      event.stopPropagation();
-    }
-  };
-
-  const handleCellHover =
-    (day: Date): MouseEventHandler<HTMLTableCellElement> =>
-    _ => {
-      setHover(day);
-    };
-
-  const handleCalendarMouseOut: MouseEventHandler<HTMLDivElement> = e => {
-    // TODO: improve this logic
-    if (e.target === e.currentTarget) {
-      // ... if the calendar container is the event's target
-      setHover(null);
-    }
-  };
-
-  const handleChevronClick =
-    (dir: 'left' | 'right'): MouseEventHandler<HTMLButtonElement> =>
-    () => {
-      const increment = dir === 'left' ? -1 : 1;
-      const newMonthIndex = month.getUTCMonth() + increment;
-      const newMonth = setUTCMonth(month, newMonthIndex);
-      updateMonth(newMonth);
-    };
-
-  return (
-    <div ref={fwdRef} className={cx(calendarsClassName, calendarsFrameStyles)}>
-      <div className={calendarHeadersContainerStyle}>
-        <div className={calendarHeaderStyles}>
-          <IconButton
-            aria-label="Previous month"
-            ref={refs.chevronRefs('left')}
-            onClick={handleChevronClick('left')}
-          >
-            <Icon glyph="ChevronLeft" />
-          </IconButton>
-          <Subtitle>{getFullMonthLabel(month)}</Subtitle>
-        </div>
-
-        <div className={calendarHeaderStyles}>
-          <Subtitle>{getFullMonthLabel(nextMonth)}</Subtitle>
-          <IconButton
-            aria-label="Next month"
-            ref={refs.chevronRefs('right')}
-            onClick={handleChevronClick('right')}
-          >
-            <Icon glyph="ChevronRight" />
-          </IconButton>
-        </div>
-      </div>
-
-      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/mouse-events-have-key-events */}
-      <div
-        className={calendarsContainerStyles}
-        onKeyDown={handleCalendarKeyDown}
-        onMouseOut={handleCalendarMouseOut}
-      >
-        <CalendarGrid month={month} aria-label={getFullMonthLabel(month)}>
-          {(day, i) => (
-            <CalendarCell
-              key={i}
-              ref={refs.calendarCellRefs(day.toISOString())}
-              aria-label={getUTCDateString(day)}
-              isHighlighted={isSameUTCDay(day, highlight)}
-              isCurrent={isSameUTCDay(day, today)}
-              state={getCellState(day)}
-              rangeState={getCellRangeState(day)}
-              onClick={cellClickHandlerForDay(day)}
-              onMouseEnter={handleCellHover(day)}
-              data-iso={day.toISOString()}
-            >
-              {day.getUTCDate()}
-            </CalendarCell>
-          )}
-        </CalendarGrid>
-
-        <CalendarGrid
-          month={nextMonth}
-          aria-label={getFullMonthLabel(nextMonth)}
-        >
-          {(day, i) => (
-            <CalendarCell
-              key={i}
-              ref={refs.calendarCellRefs(day.toISOString())}
-              aria-label={getUTCDateString(day)}
-              isHighlighted={isSameUTCDay(day, highlight)}
-              isCurrent={isSameUTCDay(day, today)}
-              state={getCellState(day)}
-              rangeState={getCellRangeState(day)}
-              onClick={cellClickHandlerForDay(day)}
-              onMouseEnter={handleCellHover(day)}
-              data-iso={day.toISOString()}
-            >
-              {day.getUTCDate()}
-            </CalendarCell>
-          )}
-        </CalendarGrid>
-      </div>
-    </div>
-  );
-});
-
-DateRangeMenuCalendars.displayName = 'DateRangeMenuCalendars';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
deleted file mode 100644
index 095e9ca085..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/DateRangeMenuCalendars.types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { HTMLElementProps } from '@leafygreen-ui/lib';
-
-export interface DateRangeMenuCalendarsProps extends HTMLElementProps<'div'> {}
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/index.ts
deleted file mode 100644
index ac8f9eed41..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuCalendars/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DateRangeMenuCalendars } from './DateRangeMenuCalendars';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.styles.ts
deleted file mode 100644
index 0337561a15..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.styles.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { css } from '@leafygreen-ui/emotion';
-import { palette } from '@leafygreen-ui/palette';
-import { spacing } from '@leafygreen-ui/tokens';
-
-export const footerStyles = css`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  padding: ${spacing[2] + spacing[1]}px;
-  border-block-start: 1px solid ${palette.gray.light2};
-`;
-
-export const clearButtonStyles = css`
-  outline: none;
-  border: none;
-  background-color: unset;
-  z-index: 0;
-`;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
deleted file mode 100644
index 77b0237fba..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/DateRangeMenuFooter.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { forwardRef, MouseEventHandler } from 'react';
-
-import Button, { Size, Variant } from '@leafygreen-ui/button';
-import { Link } from '@leafygreen-ui/typography';
-
-import { useDateRangeContext } from '../../../DateRangePicker/DateRangeContext';
-
-import { clearButtonStyles, footerStyles } from './DateRangeMenuFooter.styles';
-
-interface DateRangeMenuFooterProps {
-  onApply: MouseEventHandler<HTMLButtonElement>;
-  onCancel: MouseEventHandler<HTMLButtonElement>;
-  onClear: MouseEventHandler<HTMLButtonElement>;
-}
-
-export const DateRangeMenuFooter = forwardRef<
-  HTMLDivElement,
-  DateRangeMenuFooterProps
->(({ onApply, onCancel, onClear }: DateRangeMenuFooterProps, fwdRef) => {
-  const {
-    refs: { footerButtonRefs },
-  } = useDateRangeContext();
-
-  return (
-    <div
-      ref={fwdRef}
-      className={footerStyles}
-      data-testid="lg-date_picker-menu-footer"
-    >
-      <Link
-        ref={footerButtonRefs('clear')}
-        as="button"
-        className={clearButtonStyles}
-        aria-label="Clear selection"
-        onClick={onClear}
-        data-testid="lg-date_picker-menu-footer_button"
-      >
-        Clear
-      </Link>
-      <div>
-        <Button
-          ref={footerButtonRefs('cancel')}
-          size={Size.XSmall}
-          aria-label="Cancel selection"
-          onClick={onCancel}
-          data-testid="lg-date_picker-menu-footer_button"
-        >
-          Cancel
-        </Button>
-        <Button
-          ref={footerButtonRefs('apply')}
-          size={Size.XSmall}
-          variant={Variant.Primary}
-          aria-label="Apply selection"
-          onClick={onApply}
-          data-testid="lg-date_picker-menu-footer_button"
-        >
-          Apply
-        </Button>
-      </div>
-    </div>
-  );
-});
-
-DateRangeMenuFooter.displayName = 'DateRangeMenuFooter';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/index.ts
deleted file mode 100644
index 4744d49ce2..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/DateRangeMenuFooter/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DateRangeMenuFooter } from './DateRangeMenuFooter';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.stories.tsx
deleted file mode 100644
index a4a3a56576..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.stories.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-
-import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
-import { StoryMetaType, StoryType } from '@leafygreen-ui/lib';
-
-import { QuickRangeButton } from './QuickRangeButton';
-
-const meta: StoryMetaType<typeof QuickRangeButton> = {
-  title: 'Components/DatePicker/DateRangePicker/QuickRangeButton',
-  component: QuickRangeButton,
-  parameters: {
-    default: null,
-    generate: {
-      combineArgs: {
-        darkMode: [false, true],
-        'data-hover': [false, true],
-        'data-focus': [false, true],
-      },
-      decorator: (Instance, ctx) => (
-        <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-          <Instance />
-        </LeafyGreenProvider>
-      ),
-      args: {
-        children: 'Last 12 months',
-      },
-    },
-  },
-};
-
-export default meta;
-
-export const Basic: StoryType<typeof QuickRangeButton> = () => {
-  return <QuickRangeButton label="Last 12 months"></QuickRangeButton>;
-};
-
-export const Generated = () => <></>;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.styles.ts
deleted file mode 100644
index 44bc927ef8..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.styles.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { css } from '@leafygreen-ui/emotion';
-import { Theme } from '@leafygreen-ui/lib';
-import { palette } from '@leafygreen-ui/palette';
-import {
-  fontFamilies,
-  fontWeights,
-  spacing,
-  typeScales,
-} from '@leafygreen-ui/tokens';
-
-export const baseQuickRangeButtonStyles = css`
-  border: none;
-  outline: none;
-  background-color: unset;
-  display: block;
-  font-family: ${fontFamilies.default};
-  font-size: ${typeScales.body1.fontSize}px;
-  line-height: ${typeScales.body1.lineHeight}px;
-  font-weight: ${fontWeights.regular};
-  padding: 2px ${spacing[1]}px;
-  border-radius: ${spacing[2]}px;
-  cursor: pointer;
-`;
-
-const hoverSelector = `&:hover, &[data-hover="true"]`;
-const focusSelector = `&:focus-visible, &[data-focus="true"]`;
-
-export const baseQuickRangeButtonThemeStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
-    color: ${palette.black};
-
-    ${hoverSelector} {
-      outline: 2px solid ${palette.gray.light2};
-    }
-
-    ${focusSelector} {
-      color: ${palette.blue.dark1};
-      outline: 2px solid ${palette.blue.light1};
-      font-weight: ${fontWeights.bold};
-    }
-  `,
-  [Theme.Dark]: css`
-    color: ${palette.white};
-
-    ${hoverSelector} {
-      outline: 2px solid ${palette.gray.dark2};
-    }
-
-    ${focusSelector} {
-      color: ${palette.blue.light1};
-      outline: 2px solid ${palette.blue.light1};
-      font-weight: ${fontWeights.bold};
-    }
-  `,
-};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
deleted file mode 100644
index f5508d68f8..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/QuickRangeButton.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { forwardRef } from 'react';
-
-import { cx } from '@leafygreen-ui/emotion';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { getNodeTextContent, HTMLElementProps } from '@leafygreen-ui/lib';
-
-import {
-  baseQuickRangeButtonStyles,
-  baseQuickRangeButtonThemeStyles,
-} from './QuickRangeButton.styles';
-
-interface QuickRangeButtonProps
-  extends Omit<HTMLElementProps<'button'>, 'children'> {
-  label: string;
-}
-
-export const QuickRangeButton = forwardRef<
-  HTMLButtonElement,
-  QuickRangeButtonProps
->(({ label, className, ...rest }, fwdRef) => {
-  const { theme } = useDarkMode();
-  return (
-    <button
-      ref={fwdRef}
-      data-testid="lg-date_picker-menu-quick-range-button"
-      className={cx(
-        baseQuickRangeButtonStyles,
-        baseQuickRangeButtonThemeStyles[theme],
-        className,
-      )}
-      aria-label={getNodeTextContent(label)}
-      {...rest}
-    >
-      {label}
-    </button>
-  );
-});
-
-QuickRangeButton.displayName = 'QuickRangeButton';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/index.ts
deleted file mode 100644
index 52c37b06e4..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickRangeButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { QuickRangeButton } from './QuickRangeButton';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts
deleted file mode 100644
index 0f0f2d9653..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.styles.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { css } from '@leafygreen-ui/emotion';
-import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
-import { palette } from '@leafygreen-ui/palette';
-import { spacing } from '@leafygreen-ui/tokens';
-
-export const quickSelectionClassName = createUniqueClassName(
-  'date-range-quick-selection',
-);
-
-export const quickSelectMenuStyles = css`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing[4]}px;
-  padding: ${spacing[4]}px;
-  // TODO: Fix the menu vs clear button z-index
-`;
-
-export const quickSelectMenuThemeStyles: Record<Theme, string> = {
-  [Theme.Light]: css`
-    background-color: ${palette.gray.light3};
-    border-inline-end: 1px solid ${palette.gray.light2};
-  `,
-  [Theme.Dark]: css`
-    // TODO:
-  `,
-};
-
-export const quickSelectMenuMonthSelectContainerStyles = css`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing[2]}px;
-`;
-
-export const quickSelectMenuSelectionsContainerStyles = css`
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: ${spacing[2]}px;
-`;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
deleted file mode 100644
index 3066318169..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/QuickSelectionMenu.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import React, { MouseEventHandler } from 'react';
-import { forwardRef } from 'react';
-import { addDays } from 'date-fns';
-import isFinite from 'lodash/isFinite';
-import range from 'lodash/range';
-import { DateRangeType } from '../../../types';
-
-import { cx } from '@leafygreen-ui/emotion';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { Option, Select } from '@leafygreen-ui/select';
-import { Overline } from '@leafygreen-ui/typography';
-
-import {
-  MAX_DATE,
-  MIN_DATE,
-  Months,
-  selectElementProps,
-} from '../../../constants';
-import { useDatePickerContext } from '../../../DatePickerContext';
-import {
-  isSameUTCMonth,
-  setToUTCMidnight,
-  setUTCMonth,
-  setUTCYear,
-} from '../../../utils';
-import { useDateRangeContext } from '../../DateRangeContext';
-
-import { QuickRangeButton } from './QuickRangeButton';
-import {
-  quickSelectionClassName,
-  quickSelectMenuMonthSelectContainerStyles,
-  quickSelectMenuSelectionsContainerStyles,
-  quickSelectMenuStyles,
-  quickSelectMenuThemeStyles,
-} from './QuickSelectionMenu.styles';
-
-interface QuickRangeConfigObject {
-  id: string;
-  label: string;
-  relativeRange: [number, number];
-}
-
-const quickRangeButtonsConfig: Array<QuickRangeConfigObject> = [
-  { id: 'today', label: 'Today', relativeRange: [0, 0] },
-  { id: 'yesterday', label: 'Yesterday', relativeRange: [-1, -1] },
-  { id: 'last7', label: 'Last 7 days', relativeRange: [-7, 0] },
-  { id: 'last30', label: 'Last 30 days', relativeRange: [-30, 0] },
-  { id: 'last90', label: 'Last 90 days', relativeRange: [-90, 0] },
-  { id: 'last12', label: 'Last 12 months', relativeRange: [-365, 0] },
-  { id: 'all-time', label: 'All time', relativeRange: [-Infinity, 0] },
-];
-
-interface QuickSelectionMenuProps {}
-
-export const QuickSelectionMenu = forwardRef<
-  HTMLDivElement,
-  QuickSelectionMenuProps
->((_, fwdRef) => {
-  const { theme } = useDarkMode();
-  const { setOpen, min, max, isInRange } = useDatePickerContext();
-  const { setValue, handleValidation, month, setMonth, refs, today } =
-    useDateRangeContext();
-
-  // TODO: is this the right logic?
-  const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
-
-  // TODO: refine this logic
-  const updateMonth = (newMonth: Date) => {
-    if (isInRange(newMonth)) {
-      setMonth(newMonth);
-    }
-  };
-
-  const updateValue = (range?: DateRangeType) => {
-    // When the value changes,
-    if (range && range[0] && !isSameUTCMonth(range[0], month)) {
-      updateMonth(setToUTCMidnight(range[0]));
-    }
-
-    handleValidation?.(range);
-    setValue(range);
-  };
-
-  const quickRangeButtonHandler =
-    (id: string): MouseEventHandler<HTMLButtonElement> =>
-    () => {
-      const quickRange = quickRangeButtonsConfig.find(r => r.id === id);
-
-      if (quickRange) {
-        const relativeStart = quickRange.relativeRange[0];
-        const relativeEnd = quickRange.relativeRange[1];
-
-        const start = isFinite(relativeStart)
-          ? addDays(today, relativeStart)
-          : MIN_DATE;
-        const end = isFinite(relativeEnd)
-          ? addDays(today, relativeEnd)
-          : MAX_DATE;
-
-        updateValue([start, end]);
-        setOpen(false);
-      }
-    };
-
-  return (
-    <div
-      ref={fwdRef}
-      className={cx(
-        quickSelectionClassName,
-        quickSelectMenuStyles,
-        quickSelectMenuThemeStyles[theme],
-      )}
-      data-testid="lg-date_picker-menu-quick_select"
-    >
-      <div className={quickSelectMenuMonthSelectContainerStyles}>
-        <Select
-          {...selectElementProps}
-          ref={refs.selectRefs('month')}
-          aria-label="Select month"
-          value={month.getUTCMonth().toString()}
-          onChange={m => {
-            const newMonth = setUTCMonth(month, Number(m));
-            updateMonth(newMonth);
-          }}
-        >
-          {Months.map((m, i) => (
-            <Option value={i.toString()} key={m.short}>
-              {m.short}
-            </Option>
-          ))}
-        </Select>
-        <Select
-          {...selectElementProps}
-          ref={refs.selectRefs('year')}
-          aria-label="Select year"
-          value={month.getUTCFullYear().toString()}
-          onChange={y => {
-            const newMonth = setUTCYear(month, Number(y));
-            updateMonth(newMonth);
-          }}
-        >
-          {yearOptions.map(y => (
-            <Option value={y.toString()} key={y}>
-              {y}
-            </Option>
-          ))}
-        </Select>
-      </div>
-      <div className={quickSelectMenuSelectionsContainerStyles}>
-        <Overline>Quick Ranges:</Overline>
-        {quickRangeButtonsConfig.map(({ id, label }) => (
-          <QuickRangeButton
-            key={id}
-            ref={refs.quickRangeButtonRefs(id)}
-            label={label}
-            onClick={quickRangeButtonHandler(id)}
-          />
-        ))}
-      </div>
-    </div>
-  );
-});
-
-QuickSelectionMenu.displayName = 'QuickSelectionMenu';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/index.ts
deleted file mode 100644
index 980234417b..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/QuickSelectionMenu/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { QuickSelectionMenu } from './QuickSelectionMenu';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangeMenu/index.ts b/packages/date-picker/src/DateRangePicker/DateRangeMenu/index.ts
deleted file mode 100644
index e66e2b00e5..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangeMenu/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { DateRangeMenu } from './DateRangeMenu';
-export { DateRangeMenuProps } from './DateRangeMenu.types';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
deleted file mode 100644
index a9a5ef3880..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.spec.tsx
+++ /dev/null
@@ -1,1205 +0,0 @@
-import React from 'react';
-import {
-  render,
-  waitFor,
-  waitForElementToBeRemoved,
-  within,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import last from 'lodash/last';
-
-import { Month } from '../constants';
-import { eventContainingTargetValue, tabNTimes } from '../testUtils';
-import { newUTC, setUTCDate, setUTCMonth } from '../utils';
-
-import {
-  expectedTabStopLabels,
-  getTabStopElementMap,
-  quickSelectButtonTestCases,
-  renderDateRangePicker,
-} from './DateRangePicker.testutils';
-import { DateRangePicker } from '.';
-
-const testToday = newUTC(2023, Month.December, 26);
-
-describe('packages/date-picker/date-range-picker', () => {
-  beforeAll(() => {
-    // Set the current time to midnight UTC on 2023-12-26
-    jest.useFakeTimers().setSystemTime(testToday);
-  });
-
-  describe('Rendering', () => {
-    /// Note: Many rendering tests should be handled by Chromatic
-
-    describe('Input', () => {
-      test('renders label', () => {
-        const { getByText } = render(<DateRangePicker label="Label" />);
-        const label = getByText('Label');
-        expect(label).toBeInTheDocument();
-      });
-
-      test('renders description', () => {
-        const { getByText } = render(
-          <DateRangePicker label="Label" description="Description" />,
-        );
-        const description = getByText('Description');
-        expect(description).toBeInTheDocument();
-      });
-
-      test('spreads rest to formField', () => {
-        const { getByTestId } = render(
-          <DateRangePicker label="Label" data-testid="lg-date-range-picker" />,
-        );
-        const formField = getByTestId('lg-date-range-picker');
-        expect(formField).toBeInTheDocument();
-      });
-
-      test('formField contains label & input elements', () => {
-        const { getByTestId, getByRole } = render(
-          <DateRangePicker label="Label" data-testid="lg-date-range-picker" />,
-        );
-        const formField = getByTestId('lg-date-range-picker');
-        const inputContainer = getByRole('combobox');
-        expect(formField.querySelector('label')).toBeInTheDocument();
-        expect(formField.querySelector('label')).toHaveTextContent('Label');
-        expect(inputContainer).toBeInTheDocument();
-      });
-
-      test('renders 6 inputs', () => {
-        const { inputElements } = renderDateRangePicker();
-        expect(inputElements).toHaveLength(6);
-      });
-
-      test('renders `start` & `end` prop', () => {
-        const { inputElements } = renderDateRangePicker({
-          value: [
-            newUTC(2023, Month.January, 5),
-            newUTC(2023, Month.February, 14),
-          ],
-        });
-        expect(inputElements[0].value).toEqual('2023');
-        expect(inputElements[1].value).toEqual('01');
-        expect(inputElements[2].value).toEqual('05');
-
-        expect(inputElements[3].value).toEqual('2023');
-        expect(inputElements[4].value).toEqual('02');
-        expect(inputElements[5].value).toEqual('14');
-      });
-
-      test('renders `initialStart` & `initialEnd` prop', () => {
-        const { inputElements } = renderDateRangePicker({
-          initialValue: [
-            newUTC(2023, Month.July, 5),
-            newUTC(2023, Month.August, 10),
-          ],
-        });
-        expect(inputElements[0].value).toEqual('2023');
-        expect(inputElements[1].value).toEqual('07');
-        expect(inputElements[2].value).toEqual('05');
-
-        expect(inputElements[3].value).toEqual('2023');
-        expect(inputElements[4].value).toEqual('08');
-        expect(inputElements[5].value).toEqual('10');
-      });
-    });
-
-    describe('Menu', () => {
-      test('menu is initially closed', () => {
-        const { getMenuElements } = renderDateRangePicker();
-        const { menuContainerEl } = getMenuElements();
-        expect(menuContainerEl).not.toBeInTheDocument();
-      });
-
-      test('menu is initially open when rendered with `initialOpen`', async () => {
-        const { getMenuElements } = renderDateRangePicker({
-          initialOpen: true,
-        });
-        const { menuContainerEl } = getMenuElements();
-        await waitFor(() => expect(menuContainerEl).toBeInTheDocument());
-      });
-
-      test('renders two calendar grids', () => {
-        const { getMenuElements } = renderDateRangePicker({
-          initialOpen: true,
-        });
-        const { calendarGrids } = getMenuElements();
-        expect(calendarGrids).toHaveLength(2);
-      });
-
-      test('chevrons have correct `aria-label`s', () => {
-        const { getMenuElements } = renderDateRangePicker({
-          initialOpen: true,
-        });
-        const { leftChevron, rightChevron } = getMenuElements();
-        expect(leftChevron).toHaveAttribute('aria-label', 'Previous month');
-        expect(rightChevron).toHaveAttribute('aria-label', 'Next month');
-      });
-
-      describe('Displayed month', () => {
-        test('if no value is set, menu displays current month', () => {
-          const { getMenuElements } = renderDateRangePicker({
-            initialOpen: true,
-          });
-          const { calendarGrids, menuContainerEl } = getMenuElements();
-
-          const headers = menuContainerEl?.querySelectorAll('h6');
-          expect(headers?.[0]).toHaveTextContent('December 2023');
-          expect(headers?.[1]).toHaveTextContent('January 2024');
-
-          expect(calendarGrids?.[0]).toHaveAttribute(
-            'aria-label',
-            'December 2023',
-          );
-          expect(calendarGrids?.[1]).toHaveAttribute(
-            'aria-label',
-            'January 2024',
-          );
-        });
-
-        test('if only a start value is set, menu displays the month of that value', () => {
-          const { getMenuElements } = renderDateRangePicker({
-            initialOpen: true,
-            value: [newUTC(2023, Month.March, 10), null],
-          });
-
-          const { calendarGrids, menuContainerEl } = getMenuElements();
-          const headers = menuContainerEl?.querySelectorAll('h6');
-          expect(headers?.[0]).toHaveTextContent('March 2023');
-          expect(headers?.[1]).toHaveTextContent('April 2023');
-          expect(calendarGrids?.[0]).toHaveAttribute(
-            'aria-label',
-            'March 2023',
-          );
-          expect(calendarGrids?.[1]).toHaveAttribute(
-            'aria-label',
-            'April 2023',
-          );
-        });
-
-        test('if only an end value is set, menu displays the month _before_ value', () => {
-          const { getMenuElements } = renderDateRangePicker({
-            initialOpen: true,
-            value: [null, newUTC(2023, Month.March, 10)],
-          });
-
-          const { calendarGrids, menuContainerEl } = getMenuElements();
-          const headers = menuContainerEl?.querySelectorAll('h6');
-          expect(headers?.[0]).toHaveTextContent('February 2023');
-          expect(headers?.[1]).toHaveTextContent('March 2023');
-          expect(calendarGrids?.[0]).toHaveAttribute(
-            'aria-label',
-            'February 2023',
-          );
-          expect(calendarGrids?.[1]).toHaveAttribute(
-            'aria-label',
-            'March 2023',
-          );
-        });
-
-        test('if a full value is set, menu displays the month of the start value', () => {
-          const { getMenuElements } = renderDateRangePicker({
-            initialOpen: true,
-            value: [
-              newUTC(2023, Month.March, 10),
-              newUTC(2023, Month.April, 1),
-            ],
-          });
-
-          const { calendarGrids, menuContainerEl } = getMenuElements();
-          const headers = menuContainerEl?.querySelectorAll('h6');
-          expect(headers?.[0]).toHaveTextContent('March 2023');
-          expect(headers?.[1]).toHaveTextContent('April 2023');
-          expect(calendarGrids?.[0]).toHaveAttribute(
-            'aria-label',
-            'March 2023',
-          );
-          expect(calendarGrids?.[1]).toHaveAttribute(
-            'aria-label',
-            'April 2023',
-          );
-        });
-
-        test('month changes when value changes', () => {
-          const { getMenuElements, rerenderWithProps } = renderDateRangePicker({
-            initialOpen: true,
-          });
-
-          rerenderWithProps({
-            value: [
-              newUTC(2023, Month.July, 5),
-              newUTC(2023, Month.September, 10),
-            ],
-          });
-
-          const { calendarGrids } = getMenuElements();
-
-          expect(calendarGrids?.[0]).toHaveAttribute('aria-label', 'July 2023');
-          expect(calendarGrids?.[1]).toHaveAttribute(
-            'aria-label',
-            'August 2023',
-          );
-        });
-      });
-
-      test('renders the appropriate number of cells', () => {
-        const { getMenuElements } = renderDateRangePicker({
-          initialOpen: true,
-          value: [newUTC(2024, Month.February, 14), null],
-        });
-        const { calendarCells } = getMenuElements();
-        expect(calendarCells).toHaveLength(29 + 31);
-      });
-
-      test('rendered cells have correct `aria-label`', () => {
-        const { getMenuElements } = renderDateRangePicker({
-          initialOpen: true,
-          value: [newUTC(2024, Month.February, 14), null],
-        });
-        const { calendarCells } = getMenuElements();
-        expect(calendarCells[0]).toHaveAttribute(
-          'aria-label',
-          'Thu Feb 01 2024',
-        );
-      });
-
-      describe('Quick select menu', () => {
-        describe('Month/Year select', () => {
-          test('render the correct text', () => {
-            const { getMenuElements } = renderDateRangePicker({
-              initialOpen: true,
-              showQuickSelection: true,
-            });
-            const { yearSelect, monthSelect } = getMenuElements();
-            expect(monthSelect).toHaveTextContent('Dec');
-            expect(yearSelect).toHaveTextContent('2023');
-          });
-
-          test('have correct `aria-label`s', () => {
-            const { getMenuElements } = renderDateRangePicker({
-              initialOpen: true,
-              showQuickSelection: true,
-            });
-            const { yearSelect, monthSelect } = getMenuElements();
-            expect(monthSelect).toHaveAttribute('aria-label', 'Select month');
-            expect(yearSelect).toHaveAttribute('aria-label', 'Select year');
-          });
-
-          test('update when the value changes', () => {
-            const { getMenuElements, rerenderWithProps } =
-              renderDateRangePicker({
-                initialOpen: true,
-                showQuickSelection: true,
-              });
-
-            rerenderWithProps({
-              value: [
-                newUTC(2024, Month.July, 5),
-                newUTC(2024, Month.September, 10),
-              ],
-            });
-
-            const { yearSelect, monthSelect } = getMenuElements();
-            expect(monthSelect).toHaveTextContent('July');
-            expect(yearSelect).toHaveTextContent('2024');
-          });
-        });
-
-        test.each(quickSelectButtonTestCases)(
-          'Renders correct label: $label',
-          ({ index, label }) => {
-            const { getAllByTestId } = renderDateRangePicker({
-              initialOpen: true,
-              showQuickSelection: true,
-            });
-            const quickSelectButtons = getAllByTestId(
-              'lg-date_picker-menu-quick-range-button',
-            );
-
-            expect(quickSelectButtons[index]).toHaveAttribute(
-              'aria-label',
-              label,
-            );
-          },
-        );
-      });
-    });
-  });
-
-  describe('Interaction', () => {
-    describe('Typing', () => {
-      test('opens the menu', () => {
-        const { inputElements, getMenuElements } = renderDateRangePicker();
-        userEvent.type(inputElements[0], '1');
-        const { menuContainerEl } = getMenuElements();
-        expect(menuContainerEl).toBeInTheDocument();
-      });
-
-      describe.each([
-        ['start', 0],
-        ['end', 3],
-      ])('into %p input', (input, index) => {
-        test('updates segment value', () => {
-          const { inputElements } = renderDateRangePicker();
-          const element = inputElements[index];
-          userEvent.type(element, '1');
-          expect(element.value).toBe('1'); // Not '01' if not blurred
-        });
-
-        test('does not fire range change handler', () => {
-          const onRangeChange = jest.fn();
-          const { inputElements } = renderDateRangePicker({ onRangeChange });
-          const element = inputElements[index];
-          userEvent.type(element, '1');
-          expect(onRangeChange).not.toHaveBeenCalled();
-        });
-
-        test('fires segment change handler', () => {
-          const onChange = jest.fn();
-          const { inputElements } = renderDateRangePicker({
-            onChange,
-          });
-          const element = inputElements[index];
-          userEvent.type(element, '1');
-          expect(onChange).toHaveBeenCalledWith(
-            eventContainingTargetValue('1'),
-          );
-        });
-
-        describe('on un-focus/blur', () => {
-          test('does not fire a change handler if value is incomplete', () => {
-            const onRangeChange = jest.fn();
-            const { inputElements } = renderDateRangePicker({ onRangeChange });
-            const element = inputElements[index];
-            userEvent.type(element, '2023');
-            userEvent.tab();
-            expect(onRangeChange).not.toHaveBeenCalled();
-          });
-
-          test('fires a change handler if the value is valid', () => {
-            const onRangeChange = jest.fn();
-            const { inputElements } = renderDateRangePicker({ onRangeChange });
-            const year = inputElements[index];
-            const month = inputElements[index + 1];
-            const day = inputElements[index + 2];
-
-            userEvent.type(year, '2023');
-            userEvent.type(month, '12');
-            userEvent.type(day, '26');
-            userEvent.tab();
-            expect(onRangeChange).toHaveBeenCalledWith(
-              expect.arrayContaining([
-                expect.objectContaining(newUTC(2023, Month.December, 26)),
-              ]),
-            );
-          });
-
-          test('fires a segment change handler', () => {
-            const onChange = jest.fn();
-            const { inputElements } = renderDateRangePicker({
-              onChange,
-            });
-            const element = inputElements[index];
-            userEvent.type(element, '2023');
-            userEvent.tab();
-            expect(onChange).toHaveBeenCalledWith(
-              eventContainingTargetValue('2023'),
-            );
-          });
-
-          // eslint-disable-next-line jest/no-disabled-tests
-          describe.skip('validation handler', () => {
-            test('fired when the value is first set', () => {
-              const handleValidation = jest.fn();
-              const { inputElements } = renderDateRangePicker({
-                handleValidation,
-              });
-              const year = inputElements[index];
-              const month = inputElements[index + 1];
-              const day = inputElements[index + 2];
-              userEvent.type(year, '2023');
-              userEvent.type(month, '12');
-              userEvent.type(day, '26');
-              userEvent.tab();
-
-              expect(handleValidation).toHaveBeenCalledWith(
-                expect.arrayContaining([
-                  expect.objectContaining(newUTC(2023, Month.December, 26)),
-                ]),
-              );
-            });
-
-            test('fired when the value is updated', () => {
-              const initialStart = newUTC(2023, Month.March, 10);
-              const initialEnd = newUTC(2023, Month.December, 26);
-              const handleValidation = jest.fn();
-              const { inputElements } = renderDateRangePicker({
-                value: [initialStart, initialEnd],
-                handleValidation,
-              });
-              const day = inputElements[index + 2];
-              userEvent.type(day, '15');
-
-              const expectedValue = expect.arrayContaining([
-                input === 'start'
-                  ? newUTC(2023, Month.March, 15)
-                  : initialStart,
-                input === 'end' ? newUTC(2023, Month.December, 15) : initialEnd,
-              ]);
-
-              expect(handleValidation).toHaveBeenCalledWith(expectedValue);
-            });
-          });
-        });
-      });
-
-      describe('when entering a new value', () => {
-        const initialStart = newUTC(2023, Month.September, 2);
-        const initialEnd = newUTC(2023, Month.September, 10);
-
-        test('start date is updated', () => {
-          const onRangeChange = jest.fn();
-          const { inputElements } = renderDateRangePicker({
-            value: [initialStart, initialEnd],
-            onRangeChange,
-          });
-          const startMonthInput = inputElements[1];
-          userEvent.type(startMonthInput, '{delete}8');
-          userEvent.tab();
-          expect(onRangeChange).toHaveBeenCalledWith([
-            setUTCMonth(initialStart, Month.August),
-            initialEnd,
-          ]);
-        });
-
-        test('end date is updated', () => {
-          const onRangeChange = jest.fn();
-          const { inputElements } = renderDateRangePicker({
-            value: [initialStart, initialEnd],
-            onRangeChange,
-          });
-          const endMonthInput = inputElements[4];
-          userEvent.type(endMonthInput, '{delete}10');
-          userEvent.tab();
-          expect(onRangeChange).toHaveBeenCalledWith([
-            initialStart,
-            setUTCMonth(initialEnd, Month.October),
-          ]);
-        });
-
-        test('input is rejected if start date is invalid', () => {
-          const onRangeChange = jest.fn();
-          const { inputElements } = renderDateRangePicker({
-            value: [initialStart, initialEnd],
-            onRangeChange,
-          });
-          const startMonthInput = inputElements[2];
-          userEvent.type(startMonthInput, '1');
-          userEvent.tab();
-          expect(onRangeChange).not.toHaveBeenCalled();
-        });
-
-        test('input is rejected if end date is invalid', () => {
-          const onRangeChange = jest.fn();
-          const { inputElements } = renderDateRangePicker({
-            value: [initialStart, initialEnd],
-            onRangeChange,
-          });
-          const endMonthInput = inputElements[4];
-          userEvent.type(endMonthInput, '1');
-          userEvent.tab();
-          expect(onRangeChange).not.toHaveBeenCalled();
-        });
-
-        test('input is rejected if start date is after end date', () => {
-          const onRangeChange = jest.fn();
-          const { inputElements } = renderDateRangePicker({
-            value: [initialStart, initialEnd],
-            onRangeChange,
-          });
-          const startDayInput = inputElements[2];
-          userEvent.type(startDayInput, '1');
-          userEvent.tab();
-          expect(onRangeChange).not.toHaveBeenCalled();
-        });
-
-        test('input is rejected if end date is before start date', () => {
-          const onRangeChange = jest.fn();
-          const { inputElements } = renderDateRangePicker({
-            value: [
-              newUTC(2023, Month.September, 2),
-              newUTC(2023, Month.September, 10),
-            ],
-            onRangeChange,
-          });
-          const endDayInput = inputElements[5];
-          userEvent.type(endDayInput, '{backspace}');
-          userEvent.tab();
-          expect(onRangeChange).not.toHaveBeenCalled();
-        });
-      });
-    });
-
-    describe('Mouse interaction', () => {
-      describe('Input', () => {
-        describe('Clicking the input', () => {
-          test('opens the menu', () => {
-            const { inputContainer, getMenuElements } = renderDateRangePicker();
-            userEvent.click(inputContainer);
-            const { menuContainerEl } = getMenuElements();
-            expect(menuContainerEl).toBeInTheDocument();
-          });
-
-          test('focuses the clicked segment', () => {
-            const { inputElements } = renderDateRangePicker();
-            userEvent.click(inputElements[2]);
-            expect(document.activeElement).toBe(inputElements[2]);
-          });
-
-          test('focuses the first segment when all are empty (`undefined`)', () => {
-            const { inputContainer, inputElements } = renderDateRangePicker();
-            userEvent.click(inputContainer);
-            expect(document.activeElement).toBe(inputElements[0]);
-          });
-
-          test('focuses the first segment when all are empty (`[null, null]`)', () => {
-            const { inputContainer, inputElements } = renderDateRangePicker({
-              value: [null, null],
-            });
-            userEvent.click(inputContainer);
-            expect(document.activeElement).toBe(inputElements[0]);
-          });
-
-          test('focuses the first empty segment in start input', () => {
-            const { inputContainer, inputElements } = renderDateRangePicker();
-            userEvent.type(inputElements[0], '01');
-            userEvent.click(inputContainer);
-            expect(document.activeElement).toBe(inputElements[1]);
-          });
-
-          test('focuses the first empty segment in end input when start value is set', () => {
-            const { inputContainer, inputElements } = renderDateRangePicker({
-              value: [newUTC(2023, 1, 1), null],
-            });
-            userEvent.click(inputContainer);
-            expect(document.activeElement).toBe(inputElements[3]);
-          });
-
-          test('focuses the last segment when all are filled', () => {
-            const { inputContainer, inputElements } = renderDateRangePicker({
-              value: [newUTC(2023, 1, 1), newUTC(2023, 1, 14)],
-            });
-            userEvent.click(inputContainer);
-            expect(document.activeElement).toBe(inputElements[5]);
-          });
-        });
-
-        describe('Clicking the Calendar button', () => {
-          test('opens the menu', () => {
-            const { calendarButton, getMenuElements } = renderDateRangePicker();
-            userEvent.click(calendarButton);
-            const { menuContainerEl } = getMenuElements();
-            expect(menuContainerEl).toBeInTheDocument();
-          });
-
-          test('focuses on the highlighted cell', async () => {
-            const { calendarButton, getMenuElements } = renderDateRangePicker();
-            userEvent.click(calendarButton);
-            const { todayCell } = getMenuElements();
-            await waitFor(() => {
-              expect(todayCell).toHaveFocus();
-            });
-          });
-
-          test('initial highlight on `start` value when provided', async () => {
-            const { calendarButton, getMenuElements } = renderDateRangePicker({
-              value: [newUTC(2023, Month.September, 10), null],
-            });
-            userEvent.click(calendarButton);
-            const { menuContainerEl } = getMenuElements();
-            const sep10Cell = within(menuContainerEl!).getByLabelText(
-              'Sun Sep 10 2023',
-            );
-            await waitFor(() => {
-              expect(sep10Cell).toHaveFocus();
-            });
-          });
-          test('initial highlight on `end` value when only end provided', async () => {
-            const { calendarButton, getMenuElements } = renderDateRangePicker({
-              value: [null, newUTC(2023, Month.September, 10)],
-            });
-            userEvent.click(calendarButton);
-            const { menuContainerEl } = getMenuElements();
-            const sep10Cell = within(menuContainerEl!).getByLabelText(
-              'Sun Sep 10 2023',
-            );
-            await waitFor(() => {
-              expect(sep10Cell).toHaveFocus();
-            });
-          });
-        });
-      });
-
-      describe('Basic menu', () => {
-        describe('Clicking a calendar cell', () => {
-          test('if no value is set, fires a change handler to set the start date', () => {
-            const onRangeChange = jest.fn();
-            const { openMenu } = renderDateRangePicker({
-              value: [null, null],
-              onRangeChange,
-            });
-            const { calendarCells } = openMenu();
-            const firstCell = calendarCells[0];
-            userEvent.click(firstCell);
-            expect(onRangeChange).toHaveBeenCalledWith(
-              expect.arrayContaining([setUTCDate(testToday, 1), null]),
-            );
-          });
-
-          test('if only start value is set, fires change handler to set the end date', () => {
-            const onRangeChange = jest.fn();
-            const startDate = newUTC(2023, Month.September, 10);
-            const { openMenu } = renderDateRangePicker({
-              value: [startDate, null],
-              onRangeChange,
-            });
-            const { calendarCells } = openMenu();
-            const lastCell = last(calendarCells);
-            userEvent.click(lastCell!);
-
-            expect(onRangeChange).toHaveBeenCalledWith(
-              expect.arrayContaining([
-                startDate,
-                newUTC(2023, Month.October, 31),
-              ]),
-            );
-          });
-
-          test('if only end value is set, fires change handler to set the start date', () => {
-            const onRangeChange = jest.fn();
-            const endDate = newUTC(2023, Month.September, 10);
-            const { openMenu } = renderDateRangePicker({
-              value: [null, endDate],
-              onRangeChange,
-            });
-            const { calendarCells } = openMenu();
-            const firstCell = calendarCells[0];
-            userEvent.click(firstCell);
-            expect(onRangeChange).toHaveBeenCalledWith(
-              expect.arrayContaining([newUTC(2023, Month.August, 1), endDate]),
-            );
-          });
-
-          test('if a full range is set, fires a change handler to set the start date & clear the end date', () => {
-            const onRangeChange = jest.fn();
-            const startDate = newUTC(2023, Month.September, 10);
-            const endDate = newUTC(2023, Month.October, 31);
-            const { openMenu } = renderDateRangePicker({
-              value: [startDate, endDate],
-              onRangeChange,
-            });
-            const { calendarCells } = openMenu();
-            const firstCell = calendarCells[0];
-            userEvent.click(firstCell);
-            expect(onRangeChange).toHaveBeenCalledWith(
-              expect.arrayContaining([newUTC(2023, Month.September, 1), null]),
-            );
-          });
-        });
-
-        describe('Clicking a Chevron', () => {
-          describe('Left', () => {
-            test('does not close the menu', () => {
-              const { openMenu } = renderDateRangePicker();
-              const { leftChevron, menuContainerEl } = openMenu();
-              userEvent.click(leftChevron!);
-              expect(menuContainerEl).toBeInTheDocument();
-            });
-
-            test('updates the displayed month to the previous', () => {
-              const { openMenu } = renderDateRangePicker();
-              const { leftChevron, menuContainerEl } = openMenu();
-              userEvent.click(leftChevron!);
-              const monthHeaders = menuContainerEl?.querySelectorAll('h6');
-              expect(monthHeaders?.[0]).toHaveTextContent('November 2023');
-              expect(monthHeaders?.[1]).toHaveTextContent('December 2023');
-            });
-          });
-
-          describe('Right', () => {
-            test('does not close the menu', () => {
-              const { openMenu } = renderDateRangePicker();
-              const { rightChevron, menuContainerEl } = openMenu();
-              userEvent.click(rightChevron!);
-              expect(menuContainerEl).toBeInTheDocument();
-            });
-
-            test('updates the displayed month to the next', () => {
-              const { openMenu } = renderDateRangePicker();
-              const { rightChevron, menuContainerEl } = openMenu();
-              userEvent.click(rightChevron!);
-              const monthHeaders = menuContainerEl?.querySelectorAll('h6');
-              expect(monthHeaders?.[0]).toHaveTextContent('January 2024');
-              expect(monthHeaders?.[1]).toHaveTextContent('February 2024');
-            });
-          });
-        });
-
-        describe('Clicking the Apply button', () => {
-          test('fires a change handler with the current input value', () => {
-            const start = newUTC(2023, Month.April, 1);
-            const end = newUTC(2023, Month.July, 5);
-            const onRangeChange = jest.fn();
-            const { openMenu } = renderDateRangePicker({
-              onRangeChange,
-              value: [start, end],
-            });
-            const { applyButton } = openMenu();
-            userEvent.click(applyButton!);
-            expect(onRangeChange).toHaveBeenCalledWith(
-              expect.arrayContaining([start, end]),
-            );
-          });
-
-          test('closes menu', async () => {
-            const { openMenu } = renderDateRangePicker();
-            const { applyButton, menuContainerEl } = openMenu();
-            userEvent.click(applyButton!);
-            await waitForElementToBeRemoved(menuContainerEl);
-            expect(menuContainerEl).not.toBeInTheDocument();
-          });
-        });
-
-        describe('Clicking the Cancel button', () => {
-          test('fires an onCancel handler', () => {
-            const start = newUTC(2023, Month.April, 1);
-            const end = newUTC(2023, Month.July, 5);
-            const onCancel = jest.fn();
-            const { inputElements, getMenuElements } = renderDateRangePicker({
-              onCancel,
-              value: [start, end],
-            });
-            userEvent.type(inputElements[2], '5');
-            const { cancelButton } = getMenuElements();
-            userEvent.click(cancelButton!);
-            expect(onCancel).toHaveBeenCalled();
-          });
-
-          test('fires a change handler with the previous input value', () => {
-            const start = newUTC(2023, Month.April, 1);
-            const end = newUTC(2023, Month.July, 5);
-            const onRangeChange = jest.fn();
-            const { inputElements, getMenuElements } = renderDateRangePicker({
-              onRangeChange,
-              value: [start, end],
-            });
-            userEvent.type(inputElements[2], '5');
-            const { cancelButton } = getMenuElements();
-            userEvent.click(cancelButton!);
-            expect(onRangeChange).toHaveBeenCalledWith(
-              expect.arrayContaining([start, end]),
-            );
-          });
-
-          test('closes menu', async () => {
-            const { openMenu } = renderDateRangePicker();
-            const { cancelButton, menuContainerEl } = openMenu();
-            userEvent.click(cancelButton!);
-            await waitForElementToBeRemoved(menuContainerEl);
-            expect(menuContainerEl).not.toBeInTheDocument();
-          });
-        });
-
-        describe('Clicking the Clear button', () => {
-          test('fires an onClear handler', () => {
-            const start = newUTC(2023, Month.April, 1);
-            const end = newUTC(2023, Month.July, 5);
-            const onClear = jest.fn();
-            const { openMenu } = renderDateRangePicker({
-              onClear,
-              value: [start, end],
-            });
-            const { clearButton } = openMenu();
-            userEvent.click(clearButton!);
-            expect(onClear).toHaveBeenCalled();
-          });
-
-          test('fires a change handler with the to clear the range values', () => {
-            const start = newUTC(2023, Month.April, 1);
-            const end = newUTC(2023, Month.July, 5);
-            const onRangeChange = jest.fn();
-            const { openMenu } = renderDateRangePicker({
-              onRangeChange,
-              value: [start, end],
-            });
-            const { clearButton } = openMenu();
-            userEvent.click(clearButton!);
-            expect(onRangeChange).toHaveBeenCalledWith(
-              expect.arrayContaining([null, null]),
-            );
-          });
-
-          test('does not close the menu', () => {
-            const { openMenu } = renderDateRangePicker();
-            const { clearButton, menuContainerEl } = openMenu();
-            userEvent.click(clearButton!);
-            expect(menuContainerEl).toBeInTheDocument();
-          });
-        });
-      });
-
-      describe('Quick Select menu', () => {
-        describe('Month select menu', () => {
-          test('menu opens over the calendar menu', () => {
-            const { openMenu, queryAllByRole } = renderDateRangePicker({
-              showQuickSelection: true,
-            });
-            const { monthSelect, menuContainerEl } = openMenu();
-            userEvent.click(monthSelect!);
-            expect(menuContainerEl).toBeInTheDocument();
-            const listBoxes = queryAllByRole('listbox');
-            expect(listBoxes).toHaveLength(2);
-          });
-
-          test('selecting the month updates the calendar', async () => {
-            const { openMenu, findAllByRole } = renderDateRangePicker({
-              showQuickSelection: true,
-            });
-            const { monthSelect, calendarGrids } = openMenu();
-            userEvent.click(monthSelect!);
-            const options = await findAllByRole('option');
-            const Jan = options[0];
-            userEvent.click(Jan);
-            expect(calendarGrids?.[0]).toHaveAttribute(
-              'aria-label',
-              'January 2023',
-            );
-            expect(calendarGrids?.[1]).toHaveAttribute(
-              'aria-label',
-              'February 2023',
-            );
-          });
-        });
-
-        describe('Year select menu', () => {
-          test('menu opens over the calendar menu', () => {
-            const { openMenu, queryAllByRole } = renderDateRangePicker({
-              showQuickSelection: true,
-            });
-            const { yearSelect, menuContainerEl } = openMenu();
-            userEvent.click(yearSelect!);
-            expect(menuContainerEl).toBeInTheDocument();
-            const listBoxes = queryAllByRole('listbox');
-            expect(listBoxes).toHaveLength(2);
-          });
-
-          test('selecting the year updates the calendar', async () => {
-            const { openMenu, findAllByRole } = renderDateRangePicker({
-              showQuickSelection: true,
-            });
-            const { yearSelect, calendarGrids } = openMenu();
-            userEvent.click(yearSelect!);
-            const options = await findAllByRole('option');
-            const _1970 = options[0];
-            userEvent.click(_1970);
-            expect(calendarGrids?.[0]).toHaveAttribute(
-              'aria-label',
-              'December 1970',
-            );
-            expect(calendarGrids?.[1]).toHaveAttribute(
-              'aria-label',
-              'January 1971',
-            );
-          });
-        });
-
-        describe('Quick range buttons', () => {
-          test.each(quickSelectButtonTestCases)(
-            '$label button fires the correct change & validation handlers',
-            ({ index, expectedRange }) => {
-              const onRangeChange = jest.fn();
-              const handleValidation = jest.fn();
-              const { getAllByTestId } = renderDateRangePicker({
-                initialOpen: true,
-                showQuickSelection: true,
-                onRangeChange,
-                handleValidation,
-              });
-              const quickSelectButtons = getAllByTestId(
-                'lg-date_picker-menu-quick-range-button',
-              );
-              userEvent.click(quickSelectButtons[index]);
-              expect(onRangeChange).toHaveBeenCalledWith(expectedRange);
-              expect(handleValidation).toHaveBeenCalledWith(expectedRange);
-            },
-          );
-
-          test('update the displayed calendars', () => {
-            const { getAllByTestId, getMenuElements } = renderDateRangePicker({
-              initialOpen: true,
-              showQuickSelection: true,
-            });
-            const quickSelectButtons = getAllByTestId(
-              'lg-date_picker-menu-quick-range-button',
-            );
-            const { calendarGrids } = getMenuElements();
-            const last90Button = quickSelectButtons[4];
-            userEvent.click(last90Button);
-            expect(calendarGrids?.[0]).toHaveAttribute(
-              'aria-label',
-              'September 2023',
-            );
-            expect(calendarGrids?.[1]).toHaveAttribute(
-              'aria-label',
-              'October 2023',
-            );
-          });
-        });
-      });
-
-      describe('Backdrop', () => {
-        test('closes the menu', async () => {
-          const { openMenu, container } = renderDateRangePicker();
-          const { menuContainerEl } = openMenu();
-          userEvent.click(container.parentElement!);
-          await waitForElementToBeRemoved(menuContainerEl);
-        });
-
-        test('does not fire a change handler', () => {
-          const onRangeChange = jest.fn();
-          const { openMenu, container } = renderDateRangePicker({
-            onRangeChange,
-          });
-          openMenu();
-          userEvent.click(container.parentElement!);
-          expect(onRangeChange).not.toHaveBeenCalled();
-        });
-      });
-    });
-
-    describe('Keyboard interaction', () => {
-      describe('Tab', () => {
-        test('menu does not open on initial input focus', () => {
-          const { getMenuElements } = renderDateRangePicker();
-          tabNTimes(1);
-          const { menuContainerEl } = getMenuElements();
-          expect(menuContainerEl).not.toBeInTheDocument();
-        });
-
-        test('menu does not open on subsequent input focuses', () => {
-          const { getMenuElements } = renderDateRangePicker();
-          tabNTimes(5);
-          const { menuContainerEl } = getMenuElements();
-          expect(menuContainerEl).not.toBeInTheDocument();
-        });
-
-        test('calls validation handler when last segment is unfocused', () => {
-          const handleValidation = jest.fn();
-          renderDateRangePicker({ handleValidation });
-          tabNTimes(8);
-          expect(handleValidation).toHaveBeenCalled();
-        });
-
-        test('does not call validation handler when changing segment', () => {
-          const handleValidation = jest.fn();
-          renderDateRangePicker({ handleValidation });
-          tabNTimes(1);
-          expect(handleValidation).not.toHaveBeenCalled();
-        });
-
-        // TODO: Repeat these tests for values:
-        // `undefined`, `[null, null]` & `[Date, Date]`
-        describe('Tab order', () => {
-          describe('when menu is closed', () => {
-            const tabStops = expectedTabStopLabels['closed'];
-
-            test('Tab order proceeds as expected', () => {
-              const renderResult = renderDateRangePicker();
-
-              for (const label of tabStops) {
-                const element = getTabStopElementMap(renderResult)[label];
-
-                if (element !== null) {
-                  expect(element).toHaveFocus();
-                } else {
-                  expect(
-                    renderResult.inputContainer.contains(
-                      document.activeElement,
-                    ),
-                  ).toBeFalsy();
-                }
-
-                userEvent.tab();
-              }
-            });
-          });
-
-          describe('when basic menu is open', () => {
-            const tabStops = expectedTabStopLabels['basic']; // array of label strings
-
-            test(`Tab order proceeds as expected`, () => {
-              const renderResult = renderDateRangePicker({
-                showQuickSelection: false,
-              });
-              renderResult.openMenu();
-
-              for (const label of tabStops) {
-                const element = getTabStopElementMap(renderResult)[label];
-                expect(element).toHaveFocus();
-                userEvent.tab();
-              }
-            });
-          });
-
-          describe('when quick-select menu is open', () => {
-            const tabStops = expectedTabStopLabels['quick-select'];
-
-            test(`Tab order proceeds as expected`, () => {
-              const renderResult = renderDateRangePicker({
-                showQuickSelection: true,
-              });
-              renderResult.openMenu();
-
-              for (const label of tabStops) {
-                const element = getTabStopElementMap(renderResult)[label];
-                expect(element).toHaveFocus();
-                userEvent.tab();
-              }
-            });
-          });
-        });
-      });
-
-      describe('Enter key', () => {
-        test('if menu is closed, does not open the menu', () => {
-          const { getMenuElements } = renderDateRangePicker();
-          userEvent.tab();
-          userEvent.keyboard('{enter}');
-          const { menuContainerEl } = getMenuElements();
-          expect(menuContainerEl).not.toBeInTheDocument();
-        });
-
-        test('opens menu if calendar button is focused', () => {
-          const { getMenuElements } = renderDateRangePicker();
-          tabNTimes(7);
-          userEvent.keyboard('{enter}');
-          const { menuContainerEl } = getMenuElements();
-          expect(menuContainerEl).toBeInTheDocument();
-        });
-
-        test('calls validation handler', () => {
-          const handleValidation = jest.fn();
-          renderDateRangePicker({
-            handleValidation,
-          });
-          tabNTimes(2);
-          userEvent.keyboard('{enter}');
-          expect(handleValidation).toHaveBeenCalled();
-        });
-
-        test('if a cell is focused, fires a change handler', () => {
-          const onRangeChange = jest.fn();
-          const { openMenu } = renderDateRangePicker({ onRangeChange });
-          const { todayCell } = openMenu();
-          tabNTimes(7);
-          expect(todayCell).toHaveFocus();
-          userEvent.keyboard('{enter}');
-          expect(onRangeChange).toHaveBeenCalled();
-        });
-
-        test('if a cell is focused, closes the menu', async () => {
-          const { openMenu } = renderDateRangePicker();
-          const { todayCell, menuContainerEl } = openMenu();
-          tabNTimes(7);
-          expect(todayCell).toHaveFocus();
-          userEvent.keyboard('{enter}');
-          await waitForElementToBeRemoved(menuContainerEl);
-          expect(menuContainerEl).not.toBeInTheDocument();
-        });
-
-        test('if a Chevron is focused, updates the displayed month', () => {
-          const { openMenu } = renderDateRangePicker();
-          const { leftChevron, menuContainerEl } = openMenu();
-          tabNTimes(11);
-          expect(leftChevron).toHaveFocus();
-          userEvent.keyboard('{enter}');
-          const monthHeaders = menuContainerEl?.querySelectorAll('h6');
-          expect(monthHeaders?.[0]).toHaveTextContent('November 2023');
-          expect(monthHeaders?.[1]).toHaveTextContent('December 2023');
-        });
-
-        test('if Quick Select button is clicked, fires change handler', () => {
-          const onRangeChange = jest.fn();
-          const { openMenu } = renderDateRangePicker({
-            showQuickSelection: true,
-            onRangeChange,
-          });
-          const { quickRangeButtons } = openMenu();
-          tabNTimes(13);
-          expect(quickRangeButtons?.[0]).toHaveFocus();
-          userEvent.keyboard('{enter}');
-          expect(onRangeChange).toHaveBeenCalled(); // TODO: with
-        });
-
-        test('if month/year select is focused, opens the select menu', () => {
-          const { openMenu, queryAllByRole } = renderDateRangePicker({
-            showQuickSelection: true,
-          });
-          const { monthSelect } = openMenu();
-          tabNTimes(11);
-          expect(monthSelect).toHaveFocus();
-          userEvent.keyboard('{enter}');
-          const listBoxes = queryAllByRole('listbox');
-          expect(listBoxes).toHaveLength(2);
-        });
-      });
-
-      describe('Escape key', () => {
-        test('closes the menu', async () => {
-          const { openMenu } = renderDateRangePicker();
-          const { menuContainerEl } = openMenu();
-          userEvent.keyboard('{escape}');
-          await waitForElementToBeRemoved(menuContainerEl);
-          expect(menuContainerEl).not.toBeInTheDocument();
-        });
-
-        test('does not fire a change handler', () => {
-          const onRangeChange = jest.fn();
-          const { openMenu } = renderDateRangePicker({ onRangeChange });
-          openMenu();
-          userEvent.keyboard('{escape}');
-          expect(onRangeChange).not.toHaveBeenCalled();
-        });
-
-        test('fires a validation handler', async () => {
-          const handleValidation = jest.fn();
-          const { openMenu } = renderDateRangePicker({
-            handleValidation,
-            value: [null, null],
-          });
-          openMenu();
-          userEvent.tab();
-          userEvent.keyboard('{escape}');
-          await waitFor(() => {
-            expect(handleValidation).toHaveBeenCalledWith([null, null]);
-          });
-        });
-
-        test('focus remains in the input element', () => {
-          const handleValidation = jest.fn();
-          const { openMenu, inputContainer } = renderDateRangePicker({
-            handleValidation,
-          });
-          openMenu();
-          userEvent.keyboard('{escape}');
-          expect(inputContainer.contains(document.activeElement)).toBeTruthy();
-        });
-      });
-
-      /**
-       * Arrow Keys:
-       * Since arrow key behavior changes based on whether the input or menu is focused,
-       * many of these tests exist in the "DatePickerInput" and "DatePickerMenu" components
-       */
-    });
-  });
-});
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
deleted file mode 100644
index a82b7502fd..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.stories.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-/* eslint-disable no-console */
-/* eslint-disable react/prop-types */
-import React, { useState } from 'react';
-import { Decorator, StoryFn } from '@storybook/react';
-import { mockDateDecorator } from 'storybook-mock-date-decorator';
-
-import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
-import { StoryMetaType } from '@leafygreen-ui/lib';
-import { Size } from '@leafygreen-ui/tokens';
-
-import { Month } from '../constants';
-import {
-  DatePickerContextProps,
-  DatePickerProvider,
-} from '../DatePickerContext';
-import {
-  getProviderPropsFromStoryContext,
-  Locales,
-  TimeZones,
-} from '../testUtils';
-import { DatePickerState, DateRangeType } from '../types';
-import { newUTC } from '../utils';
-
-import { DateRangePicker } from './DateRangePicker';
-
-const ProviderWrapper: Decorator = (Story, ctx) => {
-  const { leafyGreenProviderProps, datePickerProviderProps, storyProps } =
-    getProviderPropsFromStoryContext(ctx);
-
-  return (
-    <LeafyGreenProvider {...leafyGreenProviderProps}>
-      <DatePickerProvider
-        value={{
-          ...datePickerProviderProps,
-        }}
-      >
-        <Story {...storyProps} />
-      </DatePickerProvider>
-    </LeafyGreenProvider>
-  );
-};
-
-const mockToday = newUTC(2023, Month.September, 14);
-
-const meta: StoryMetaType<typeof DateRangePicker, DatePickerContextProps> = {
-  title: 'Components/DatePicker/DateRangePicker',
-  component: DateRangePicker,
-  decorators: [mockDateDecorator, ProviderWrapper],
-  parameters: {
-    default: null,
-    date: mockToday,
-    controls: {
-      exclude: [
-        'handleValidation',
-        'initialValue',
-        'onChange',
-        'onRangeChange',
-        'onCancel',
-        'onClear',
-        'value',
-      ],
-    },
-  },
-  args: {
-    dateFormat: 'en-US',
-    label: 'Pick a Range',
-    description: 'Coordinated Universal Time',
-    min: newUTC(1996, Month.October, 14),
-    max: newUTC(2026, Month.October, 14),
-    size: Size.Default,
-    timeZone: 'America/New_York',
-  },
-  argTypes: {
-    baseFontSize: { control: 'select' },
-    dateFormat: { control: 'select', options: Locales },
-    description: { control: 'text' },
-    label: { control: 'text' },
-    min: { control: 'date' },
-    max: { control: 'date' },
-    size: { control: 'select' },
-    state: { control: 'select' },
-    timeZone: { control: 'select', options: TimeZones },
-  },
-};
-
-export default meta;
-
-export const Basic: StoryFn<typeof DateRangePicker> = props => {
-  const [range, setRange] = useState<DateRangeType | undefined>([
-    newUTC(2023, Month.October, 14),
-    newUTC(2023, Month.December, 26),
-  ]);
-
-  const handleRangeChange = (range?: DateRangeType) => {
-    console.log('Storybook: Range changed', range);
-    setRange(range);
-  };
-
-  return (
-    <DateRangePicker
-      {...props}
-      value={range}
-      onRangeChange={handleRangeChange}
-    />
-  );
-};
-
-export const WithQuickSelection: StoryFn<typeof DateRangePicker> = props => {
-  const [range, setRange] = useState<DateRangeType | undefined>([
-    newUTC(2023, Month.October, 14),
-    newUTC(2023, Month.December, 26),
-  ]);
-
-  return (
-    <DateRangePicker
-      {...props}
-      value={range}
-      onRangeChange={setRange}
-      showQuickSelection
-    />
-  );
-};
-
-export const Uncontrolled: StoryFn<typeof DateRangePicker> = props => {
-  return <DateRangePicker {...props} />;
-};
-
-export const WithValidation: StoryFn<typeof DateRangePicker> = props => {
-  const expectedDate = newUTC(2023, Month.December, 26);
-
-  const [state, setState] = useState<DatePickerState>(DatePickerState.None);
-  const [range, setRange] = useState<DateRangeType | undefined>([null, null]);
-
-  const handleRangeChange = (range?: DateRangeType) => {
-    console.log('Storybook: Range changed', range);
-    setRange(range);
-  };
-
-  const handleValidation = (range?: DateRangeType) => {
-    console.log('Storybook: Handling validation', range);
-
-    if (range && range[0] === expectedDate) {
-      setState(DatePickerState.None);
-    }
-    setState(DatePickerState.Error);
-  };
-
-  return (
-    <DateRangePicker
-      {...props}
-      value={range}
-      state={state}
-      errorMessage={`Start date must be ${expectedDate.toUTCString()}`}
-      onRangeChange={handleRangeChange}
-      handleValidation={handleValidation}
-    />
-  );
-};
-
-// export const Generated = () => {};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.styles.ts b/packages/date-picker/src/DateRangePicker/DateRangePicker.styles.ts
deleted file mode 100644
index 356c065c34..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.styles.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { css } from '@leafygreen-ui/emotion';
-
-export const baseStyles = css``;
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
deleted file mode 100644
index 0a5c352128..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.testutils.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-import React from 'react';
-import {
-  getByRole as globalGetByRole,
-  render,
-  RenderResult,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { subDays } from 'date-fns';
-
-import { MIN_DATE, Month } from '../constants';
-import { newUTC } from '../utils';
-
-import { DateRangePicker, DateRangePickerProps } from '.';
-
-export const testToday = newUTC(2023, Month.December, 26);
-
-/** Explicit test cases for quick range buttons */
-export const quickSelectButtonTestCases = [
-  { label: 'Today', expectedRange: [testToday, testToday] },
-  {
-    label: 'Yesterday',
-    expectedRange: [subDays(testToday, 1), subDays(testToday, 1)],
-  },
-  { label: 'Last 7 days', expectedRange: [subDays(testToday, 7), testToday] },
-  { label: 'Last 30 days', expectedRange: [subDays(testToday, 30), testToday] },
-  { label: 'Last 90 days', expectedRange: [subDays(testToday, 90), testToday] },
-  {
-    label: 'Last 12 months',
-    expectedRange: [subDays(testToday, 365), testToday],
-  },
-  { label: 'All time', expectedRange: [MIN_DATE, testToday] },
-].map((arr, index) => ({ index, ...arr }));
-
-export interface RenderDateRangePickerResult extends RenderResult {
-  formField: HTMLElement;
-  inputContainer: HTMLElement;
-  inputElements: Array<HTMLInputElement>;
-  calendarButton: HTMLButtonElement;
-  getMenuElements: () => RenderMenuResult;
-  openMenu: () => RenderMenuResult;
-  rerenderWithProps: (p?: Partial<DateRangePickerProps>) => void;
-}
-
-export interface RenderMenuResult {
-  menuContainerEl: HTMLElement | null;
-  leftChevron: HTMLButtonElement | null;
-  rightChevron: HTMLButtonElement | null;
-  calendarGrids: Array<HTMLTableElement> | null;
-  calendarCells: Array<HTMLTableCellElement>;
-  todayCell: HTMLTableCellElement | null;
-  menuFooter: HTMLDivElement | null;
-  clearButton: HTMLButtonElement | null;
-  cancelButton: HTMLButtonElement | null;
-  applyButton: HTMLButtonElement | null;
-  quickSelectMenu: HTMLDivElement | null;
-  monthSelect: HTMLButtonElement | null;
-  yearSelect: HTMLButtonElement | null;
-  quickRangeButtons: Array<HTMLButtonElement | null>;
-}
-
-/**
- * Renders a date picker for jest environments
- */
-export const renderDateRangePicker = (
-  props?: Partial<DateRangePickerProps>,
-): RenderDateRangePickerResult => {
-  const defaultProps = { label: '' };
-  const result = render(
-    <DateRangePicker
-      data-testid="lg-date-picker"
-      {...defaultProps}
-      {...props}
-    />,
-  );
-
-  function rerenderWithProps(newProps?: Partial<DateRangePickerProps>) {
-    return result?.rerender(
-      <DateRangePicker
-        data-testid="lg-date-picker"
-        {...defaultProps}
-        {...props}
-        {...newProps}
-      />,
-    );
-  }
-
-  const formField = result.getByTestId('lg-date-picker');
-  const inputContainer = result.getByRole('combobox');
-
-  const inputElements = Array.from(inputContainer.querySelectorAll('input'));
-
-  const calendarButton = globalGetByRole(
-    inputContainer,
-    'button',
-  ) as HTMLButtonElement;
-
-  /**
-   * Returns relevant menu elements.
-   * Call this after the menu has been opened
-   */
-  function getMenuElements(): RenderMenuResult {
-    const menuContainerEl = result.queryByRole('listbox');
-
-    const calendarGrids = result.queryAllByRole(
-      'grid',
-    ) as Array<HTMLTableElement>;
-
-    const calendarCells = result.queryAllByRole(
-      'gridcell',
-    ) as Array<HTMLTableCellElement>;
-
-    // label text is tested in DatePickerMenu.spec
-    const leftChevron = result.queryByLabelText(
-      'Previous month',
-    ) as HTMLButtonElement;
-    const rightChevron = result.queryByLabelText(
-      'Next month',
-    ) as HTMLButtonElement;
-    const todayCell = menuContainerEl?.querySelector(
-      '[aria-current="true"]',
-    ) as HTMLTableCellElement;
-
-    // Footer
-    const menuFooter = menuContainerEl?.querySelector(
-      '[data-testid="lg-date_picker-menu-footer"]',
-    ) as HTMLDivElement | null;
-    const clearButton = result.queryByLabelText(
-      'Clear selection',
-    ) as HTMLButtonElement | null;
-    const cancelButton = result.queryByLabelText(
-      'Cancel selection',
-    ) as HTMLButtonElement | null;
-    const applyButton = result.queryByLabelText(
-      'Apply selection',
-    ) as HTMLButtonElement | null;
-
-    // Quick select menu
-    const quickSelectMenu = menuContainerEl?.querySelector(
-      '[data-testid="lg-date_picker-menu-quick_select"]',
-    ) as HTMLDivElement | null;
-    const monthSelect = result.queryByLabelText(
-      'Select month',
-    ) as HTMLButtonElement | null;
-    const yearSelect = result.queryByLabelText(
-      'Select year',
-    ) as HTMLButtonElement | null;
-
-    const quickRangeButtons = Array.from(
-      quickSelectMenu?.querySelectorAll(
-        '[data-testid="lg-date_picker-menu-quick-range-button"]',
-      ) || [null],
-    ) as Array<HTMLButtonElement | null>;
-
-    return {
-      menuContainerEl,
-      calendarGrids,
-      calendarCells,
-      todayCell,
-      leftChevron,
-      rightChevron,
-      menuFooter,
-      clearButton,
-      cancelButton,
-      applyButton,
-      quickSelectMenu,
-      monthSelect,
-      yearSelect,
-      quickRangeButtons,
-    };
-  }
-
-  function openMenu(): RenderMenuResult {
-    userEvent.click(inputContainer);
-    return getMenuElements();
-  }
-
-  return {
-    ...result,
-    rerenderWithProps,
-    formField,
-    inputContainer,
-    inputElements,
-    calendarButton,
-    getMenuElements,
-    openMenu,
-  };
-};
-
-export interface ExpectedTabStop {
-  name: string;
-  selector: string;
-}
-
-/**
- * Returns the elements we expect to have focus after pressing `Tab` N times
- */
-export const expectedTabStopLabels = {
-  closed: [
-    'none',
-    'input > start date > year segment',
-    'input > start date > month segment',
-    'input > start date > day segment',
-    'input > end date > year segment',
-    'input > end date > month segment',
-    'input > end date > day segment',
-    'input > open menu button',
-    'none',
-  ],
-  basic: [
-    'input > start date > year segment',
-    'input > start date > month segment',
-    'input > start date > day segment',
-    'input > end date > year segment',
-    'input > end date > month segment',
-    'input > end date > day segment',
-    'input > open menu button',
-    `menu > today cell`,
-    'menu > footer > clear button',
-    'menu > footer > cancel button',
-    'menu > footer > apply button',
-    'menu > left chevron',
-    'menu > right chevron',
-    `menu > today cell`,
-  ],
-  'quick-select': [
-    'input > start date > year segment',
-    'input > start date > month segment',
-    'input > start date > day segment',
-    'input > end date > year segment',
-    'input > end date > month segment',
-    'input > end date > day segment',
-    'input > open menu button',
-    `menu > today cell`,
-    'menu > footer > clear button',
-    'menu > footer > cancel button',
-    'menu > footer > apply button',
-    'menu > quick select > month select',
-    'menu > quick select > year select',
-    'menu > quick select > quick range > Today',
-    'menu > quick select > quick range > Yesterday',
-    'menu > quick select > quick range > Last 7 days',
-    'menu > quick select > quick range > Last 30 days',
-    'menu > quick select > quick range > Last 90 days',
-    'menu > quick select > quick range > Last 12 months',
-    'menu > quick select > quick range > All time',
-    'menu > left chevron',
-    'menu > right chevron',
-    `menu > today cell`,
-  ],
-} as const;
-
-type TabStopLabel =
-  (typeof expectedTabStopLabels)[keyof typeof expectedTabStopLabels][number];
-
-export const getTabStopElementMap = (
-  renderResult: RenderDateRangePickerResult,
-): Record<TabStopLabel, HTMLElement | null> => {
-  const { inputElements, calendarButton, getMenuElements } = renderResult;
-  const {
-    todayCell,
-    clearButton,
-    cancelButton,
-    applyButton,
-    monthSelect,
-    yearSelect,
-    leftChevron,
-    rightChevron,
-    quickRangeButtons,
-  } = getMenuElements();
-  return {
-    none: null,
-    'input > start date > year segment': inputElements[0],
-    'input > start date > month segment': inputElements[1],
-    'input > start date > day segment': inputElements[2],
-    'input > end date > year segment': inputElements[3],
-    'input > end date > month segment': inputElements[4],
-    'input > end date > day segment': inputElements[5],
-    'input > open menu button': calendarButton,
-    'menu > today cell': todayCell,
-    'menu > footer > clear button': clearButton,
-    'menu > footer > cancel button': cancelButton,
-    'menu > footer > apply button': applyButton,
-    'menu > quick select > month select': monthSelect,
-    'menu > quick select > year select': yearSelect,
-    'menu > quick select > quick range > Today': quickRangeButtons[0],
-    'menu > quick select > quick range > Yesterday': quickRangeButtons[1],
-    'menu > quick select > quick range > Last 7 days': quickRangeButtons[2],
-    'menu > quick select > quick range > Last 30 days': quickRangeButtons[3],
-    'menu > quick select > quick range > Last 90 days': quickRangeButtons[4],
-    'menu > quick select > quick range > Last 12 months': quickRangeButtons[5],
-    'menu > quick select > quick range > All time': quickRangeButtons[6],
-    'menu > left chevron': leftChevron,
-    'menu > right chevron': rightChevron,
-  };
-};
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
deleted file mode 100644
index 476faf472f..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import { contextPropNames, DatePickerProvider } from '../DatePickerContext';
-import { useControlledValue } from '../hooks/useControlledValue';
-import { pickAndOmit } from '../utils';
-
-import { DateRangeComponent } from './DateRangeComponent';
-import { DateRangeProvider } from './DateRangeContext';
-import { DateRangePickerProps } from './DateRangePicker.types';
-
-export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
-  (
-    {
-      value: rangeProp,
-      initialValue: initialProp,
-      onRangeChange: onChangeProp,
-      handleValidation,
-      ...props
-    }: DateRangePickerProps,
-    fwdRef,
-  ) => {
-    const [datePickerContextProps, restProps] = pickAndOmit(
-      props,
-      contextPropNames,
-    );
-
-    const { value, setValue } = useControlledValue(
-      rangeProp,
-      onChangeProp,
-      initialProp,
-    );
-
-    return (
-      <DatePickerProvider value={datePickerContextProps}>
-        <DateRangeProvider
-          rootRef={fwdRef}
-          value={value}
-          setValue={setValue}
-          handleValidation={handleValidation}
-        >
-          <DateRangeComponent {...restProps} />
-        </DateRangeProvider>
-      </DatePickerProvider>
-    );
-  },
-);
-
-DateRangePicker.displayName = 'DateRangePicker';
diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts b/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts
deleted file mode 100644
index dcb1b700df..0000000000
--- a/packages/date-picker/src/DateRangePicker/DateRangePicker.types.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { ChangeEvent, MouseEventHandler } from 'react';
-
-import { BaseDatePickerProps, DateRangeType } from '../types';
-
-export interface DateRangePickerProps extends BaseDatePickerProps {
-  /**
-   * The selected start & end date
-   */
-  value?: DateRangeType;
-
-  /**
-   * Callback fired when the “Apply” button is clicked, or when either the start or end date changes. If either start or end is unset, then that value will be null.
-   *
-   * Parameter `range[0]` represents the start date,
-   * and `range[1]` represents the end date.
-   *
-   * Callback date arguments will be in Date objects in UTC time, or null
-   */
-  onRangeChange?: (range?: DateRangeType) => void;
-
-  /**
-   * Callback fired when any segment changes, (but not necessarily a full value)
-   */
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-
-  /**
-   * The initial selected start & end dates.
-   *
-   * A given initial index is ignored if `range[x]` is defined
-   */
-  initialValue?: DateRangeType;
-
-  /**
-   * A callback fired when validation should run, based on our form validation guidelines.
-   * Use this callback to compute the correct `state` value.
-   *
-   * Parameter `range[0]` represents the start date, and `range[1]` represents the end date.
-   *
-   * Callback date arguments will be in Date objects in UTC time, or null
-   */
-  handleValidation?: (range?: DateRangeType) => void;
-
-  /**
-   * Callback fired when the “clear” button is clicked.
-   */
-  onClear?: MouseEventHandler;
-
-  /**
-   * Callback fired when the “cancel” button is clicked.
-   */
-  onCancel?: MouseEventHandler;
-
-  /**
-   * Whether or not to show the Quick Range Selection menu
-   */
-  showQuickSelection?: boolean;
-}
diff --git a/packages/date-picker/src/DateRangePicker/index.ts b/packages/date-picker/src/DateRangePicker/index.ts
deleted file mode 100644
index 4b0004f344..0000000000
--- a/packages/date-picker/src/DateRangePicker/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { DateRangePicker } from './DateRangePicker';
-export { DateRangePickerProps } from './DateRangePicker.types';
diff --git a/packages/date-picker/src/DateRangePicker/utils/getInitialHighlight/index.ts b/packages/date-picker/src/DateRangePicker/utils/getInitialHighlight/index.ts
deleted file mode 100644
index dadb7ef97e..0000000000
--- a/packages/date-picker/src/DateRangePicker/utils/getInitialHighlight/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { DateRangeType } from '../../../types';
-import { isSameUTCMonth } from '../../../utils';
-
-export const getInitialHighlight = (
-  value: DateRangeType | undefined,
-  today: Date,
-  month: Date,
-): Date => {
-  if (value) {
-    const [start, end] = value;
-    // Could use ternary, but that's hard to read
-    if (start) return start;
-    if (end) return end;
-    if (isSameUTCMonth(today, month)) return today;
-    return month;
-  }
-
-  return today;
-};
diff --git a/packages/date-picker/src/DateRangePicker/utils/getInitialMonth/index.ts b/packages/date-picker/src/DateRangePicker/utils/getInitialMonth/index.ts
deleted file mode 100644
index 0d2bec068a..0000000000
--- a/packages/date-picker/src/DateRangePicker/utils/getInitialMonth/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { DateRangeType } from '../../../types';
-import { addMonthsUTC, getFirstOfMonth, isDefined } from '../../../utils';
-
-export const getInitialMonth = (
-  value: DateRangeType | undefined,
-  today: Date,
-): Date => {
-  if (isDefined(value)) {
-    const [start, end] = value;
-    // `start` if it exists,
-    // otherwise one month before `end` if it exists,
-    // fallback to today
-    const initial = start ? start : end ? addMonthsUTC(end, -1) : today;
-
-    return getFirstOfMonth(initial);
-  }
-
-  return getFirstOfMonth(today);
-};
diff --git a/packages/date-picker/src/DateRangePicker/utils/getRangeSegmentToFocus/index.ts b/packages/date-picker/src/DateRangePicker/utils/getRangeSegmentToFocus/index.ts
deleted file mode 100644
index 3b9497002b..0000000000
--- a/packages/date-picker/src/DateRangePicker/utils/getRangeSegmentToFocus/index.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import isUndefined from 'lodash/isUndefined';
-import last from 'lodash/last';
-import { DatePickerContextProps } from 'src/DatePickerContext';
-
-import { DateSegment } from '../../../hooks/useDateSegments';
-import { SegmentRefs } from '../../../hooks/useSegmentRefs';
-import { getFirstEmptySegment } from '../../../utils';
-
-interface GetRangeSegmentToFocusProps {
-  target: EventTarget;
-  formatParts: DatePickerContextProps['formatParts'];
-  segmentRefs: [SegmentRefs, SegmentRefs];
-}
-
-/** Returns the range segment to focus on when the input is clicked */
-export const getRangeSegmentToFocus = ({
-  target,
-  formatParts,
-  segmentRefs: [startSegmentRefs, endSegmentRefs],
-}: GetRangeSegmentToFocusProps): HTMLElement | undefined | null => {
-  if (
-    isUndefined(target) ||
-    isUndefined(formatParts) ||
-    isUndefined(startSegmentRefs) ||
-    isUndefined(endSegmentRefs)
-  ) {
-    return;
-  }
-
-  const startSegmentsArray = Object.values(startSegmentRefs).map(
-    r => r.current,
-  );
-  const endSegmentsArray = Object.values(endSegmentRefs).map(r => r.current);
-  const segmentRefsArray = [...startSegmentsArray, ...endSegmentsArray];
-
-  const isTargetASegment = segmentRefsArray.includes(
-    target as HTMLInputElement,
-  );
-
-  if (!isTargetASegment) {
-    const formatSegments = formatParts.filter(part => part.type !== 'literal');
-    const allSegmentsFilled = segmentRefsArray.every(el => el?.value);
-
-    if (allSegmentsFilled) {
-      const lastSegmentPart = last(formatSegments) as Intl.DateTimeFormatPart;
-      const keyOfLastSegment = lastSegmentPart.type as DateSegment;
-      const lastSegmentRef = endSegmentRefs[keyOfLastSegment];
-      return lastSegmentRef.current;
-    } else {
-      const allStartSegmentsFilled = startSegmentsArray.every(el => el?.value);
-
-      if (allStartSegmentsFilled) {
-        return getFirstEmptySegment({
-          formatParts,
-          segmentRefs: endSegmentRefs,
-        });
-      } else {
-        return getFirstEmptySegment({
-          formatParts,
-          segmentRefs: startSegmentRefs,
-        });
-      }
-    }
-  }
-};
diff --git a/packages/date-picker/src/DateRangePicker/utils/getRelativeRangeSegment/index.ts b/packages/date-picker/src/DateRangePicker/utils/getRelativeRangeSegment/index.ts
deleted file mode 100644
index 13f1bc40f0..0000000000
--- a/packages/date-picker/src/DateRangePicker/utils/getRelativeRangeSegment/index.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react';
-import isUndefined from 'lodash/isUndefined';
-import last from 'lodash/last';
-import { DateSegment } from 'src/hooks/useDateSegments';
-
-import { DatePickerContextProps } from '../../../DatePickerContext';
-import { SegmentRefs } from '../../../hooks/useSegmentRefs';
-
-type RelativeDirection = 'next' | 'prev' | 'first' | 'last';
-interface GetRelativeSegmentContext {
-  target: HTMLInputElement | React.RefObject<HTMLInputElement>;
-  formatParts: DatePickerContextProps['formatParts'];
-  rangeSegmentRefs: Array<SegmentRefs>;
-}
-
-export const getRelativeRangeSegment = (
-  direction: RelativeDirection,
-  { target, formatParts, rangeSegmentRefs }: GetRelativeSegmentContext,
-): React.RefObject<HTMLInputElement> | undefined => {
-  if (
-    isUndefined(direction) ||
-    isUndefined(target) ||
-    isUndefined(formatParts) ||
-    isUndefined(rangeSegmentRefs)
-  ) {
-    return;
-  }
-
-  // only the relevant segments, not separators
-  const formatSegments = formatParts.filter(part => part.type !== 'literal');
-
-  const orderedSegmentRefs = rangeSegmentRefs.flatMap(segmentRefs =>
-    formatSegments.map(({ type }) => segmentRefs[type as DateSegment]),
-  );
-
-  const currentSegmentIndex: number | undefined = orderedSegmentRefs.findIndex(
-    ref => ref.current === target,
-  );
-
-  switch (direction) {
-    case 'first': {
-      const firstSegmentRef = orderedSegmentRefs[0];
-      return firstSegmentRef;
-    }
-
-    case 'last': {
-      const lastSegmentRef = last(orderedSegmentRefs);
-
-      if (lastSegmentRef) {
-        return lastSegmentRef;
-      }
-
-      break;
-    }
-
-    case 'next': {
-      if (!isUndefined(currentSegmentIndex)) {
-        const nextSegmentIndex = Math.min(
-          currentSegmentIndex + 1,
-          orderedSegmentRefs.length - 1,
-        );
-
-        const nextSegmentRef = orderedSegmentRefs[nextSegmentIndex];
-
-        return nextSegmentRef;
-      }
-
-      break;
-    }
-
-    case 'prev': {
-      if (!isUndefined(currentSegmentIndex)) {
-        const prevSegmentIndex = Math.max(currentSegmentIndex - 1, 0);
-
-        const prevSegmentRef = orderedSegmentRefs[prevSegmentIndex];
-
-        return prevSegmentRef;
-      }
-
-      break;
-    }
-
-    default:
-      break;
-  }
-};
diff --git a/packages/date-picker/src/constants.ts b/packages/date-picker/src/constants.ts
deleted file mode 100644
index 5b6103ea3c..0000000000
--- a/packages/date-picker/src/constants.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import range from 'lodash/range';
-
-import { DropdownWidthBasis } from '@leafygreen-ui/select';
-
-import { getMonthName } from './utils/getMonthName';
-
-// Compute the long & short form of each month index
-export const Months: Array<{
-  long: string;
-  short: string;
-}> = range(12).map(m => getMonthName(m));
-
-/** Maps the month name to its index */
-export enum Month {
-  January,
-  February,
-  March,
-  April,
-  May,
-  June,
-  July,
-  August,
-  September,
-  October,
-  November,
-  December,
-}
-
-export const daysPerWeek = 7 as const;
-
-export const MIN_DATE = new Date(Date.UTC(1970, Month.January, 1));
-export const MAX_DATE = new Date(Date.UTC(2038, Month.January, 19));
-
-export const DaysOfWeek = [
-  { long: 'Sunday', short: 'su' },
-  { long: 'Monday', short: 'mo' },
-  { long: 'Tuesday', short: 'tu' },
-  { long: 'Wednesday', short: 'we' },
-  { long: 'Thursday', short: 'th' },
-  { long: 'Friday', short: 'fr' },
-  { long: 'Saturday', short: 'sa' },
-] as const;
-
-export type DaysOfWeek = (typeof DaysOfWeek)[number];
-
-/** Default props for the month & year select menus */
-export const selectElementProps = {
-  size: 'xsmall',
-  allowDeselect: false,
-  dropdownWidthBasis: DropdownWidthBasis.Option,
-  // using no portal so the select menus are included in the backdrop "foreground"
-  // there is currently no way to pass a ref into the Select portal to use in backdrop "foreground"
-  usePortal: false,
-} as const;
diff --git a/packages/date-picker/src/hooks/useFormat/index.ts b/packages/date-picker/src/hooks/useFormat/index.ts
deleted file mode 100644
index 29860ed9a2..0000000000
--- a/packages/date-picker/src/hooks/useFormat/index.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-
-import { consoleOnce } from '@leafygreen-ui/lib';
-
-import { isValidLocale } from '../../utils';
-
-const now = new Date();
-const ISO = 'iso8601';
-const IsoFormatParts: Array<Intl.DateTimeFormatPart> = [
-  { type: 'year', value: '' },
-  { type: 'literal', value: '-' },
-  { type: 'month', value: '' },
-  { type: 'literal', value: '-' },
-  { type: 'day', value: '' },
-];
-
-/**
- * Hook that returns an Intl.DateTimeFormat object for the provided format string
- * @deprecated
- */
-export const useFormatter = (format: string) => {
-  const [formatter, setFormatter] = useState<Intl.DateTimeFormat | undefined>(
-    isValidLocale(format) ? Intl.DateTimeFormat(format) : undefined,
-  );
-
-  useEffect(() => {
-    if (isValidLocale(format)) {
-      setFormatter(Intl.DateTimeFormat(format));
-    } else {
-      if (format !== ISO) {
-        consoleOnce.error('Invalid dateFormat', format);
-      }
-    }
-  }, [format]);
-
-  return formatter;
-};
-
-/**
- * @deprecated
- */
-export const useFormatParts = (
-  format: string,
-): Array<Intl.DateTimeFormatPart> | undefined => {
-  const formatter = useFormatter(format);
-
-  const formatParts = useMemo(() => formatter?.formatToParts(now), [formatter]);
-
-  if (format === ISO) {
-    return IsoFormatParts;
-  }
-
-  return formatParts;
-};
diff --git a/packages/date-picker/src/index.ts b/packages/date-picker/src/index.ts
index fda2104d4f..d63a67e382 100644
--- a/packages/date-picker/src/index.ts
+++ b/packages/date-picker/src/index.ts
@@ -1,3 +1,6 @@
 export { DatePicker, type DatePickerProps } from './DatePicker';
-export { DateRangePicker, type DateRangePickerProps } from './DateRangePicker';
-export { type DateRangeType, type DateType } from './types';
+export * from './shared/components';
+export * from './shared/constants';
+export * from './shared/hooks';
+export * from './shared/types';
+export * from './shared/utils';
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.spec.tsx
similarity index 100%
rename from packages/date-picker/src/Calendar/CalendarCell/CalendarCell.spec.tsx
rename to packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.spec.tsx
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.stories.tsx
similarity index 100%
rename from packages/date-picker/src/Calendar/CalendarCell/CalendarCell.stories.tsx
rename to packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.stories.tsx
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.styles.ts
similarity index 100%
rename from packages/date-picker/src/Calendar/CalendarCell/CalendarCell.styles.ts
rename to packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.styles.ts
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
similarity index 100%
rename from packages/date-picker/src/Calendar/CalendarCell/CalendarCell.tsx
rename to packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
diff --git a/packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.types.ts
similarity index 100%
rename from packages/date-picker/src/Calendar/CalendarCell/CalendarCell.types.ts
rename to packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.types.ts
diff --git a/packages/date-picker/src/Calendar/CalendarCell/index.ts b/packages/date-picker/src/shared/components/Calendar/CalendarCell/index.ts
similarity index 100%
rename from packages/date-picker/src/Calendar/CalendarCell/index.ts
rename to packages/date-picker/src/shared/components/Calendar/CalendarCell/index.ts
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.spec.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.spec.tsx
similarity index 100%
rename from packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.spec.tsx
rename to packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.spec.tsx
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
similarity index 94%
rename from packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
rename to packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index fecdace289..e00c7f61bc 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -5,14 +5,14 @@ import { StoryFn } from '@storybook/react';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
-import { Month } from '../../constants';
+import { Month } from '../../../constants';
+import { isTodayTZ, newUTC } from '../../../utils';
+import { Locales, TimeZones } from '../../../utils/testutils';
 import {
   DatePickerContextProps,
   DatePickerProvider,
   useDatePickerContext,
 } from '../../DatePickerContext';
-import { Locales, TimeZones } from '../../testUtils';
-import { isTodayTZ, newUTC } from '../../utils';
 import { CalendarCell } from '../CalendarCell/CalendarCell';
 
 import { CalendarGrid } from './CalendarGrid';
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.styles.ts
similarity index 100%
rename from packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.styles.ts
rename to packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.styles.ts
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
similarity index 95%
rename from packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
rename to packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
index 5b8eea5c25..4f54b4f513 100644
--- a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -5,9 +5,9 @@ import { getWeekStartByLocale } from 'weekstart';
 import { cx } from '@leafygreen-ui/emotion';
 import { Disclaimer } from '@leafygreen-ui/typography';
 
-import { DaysOfWeek, daysPerWeek } from '../../constants';
+import { DaysOfWeek, daysPerWeek } from '../../../constants';
+import { getWeeksArray } from '../../../utils';
 import { useDatePickerContext } from '../../DatePickerContext';
-import { getWeeksArray } from '../../utils';
 
 import {
   calendarGridStyles,
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.types.ts
similarity index 100%
rename from packages/date-picker/src/Calendar/CalendarGrid/CalendarGrid.types.ts
rename to packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.types.ts
diff --git a/packages/date-picker/src/Calendar/CalendarGrid/index.ts b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/index.ts
similarity index 100%
rename from packages/date-picker/src/Calendar/CalendarGrid/index.ts
rename to packages/date-picker/src/shared/components/Calendar/CalendarGrid/index.ts
diff --git a/packages/date-picker/src/shared/components/Calendar/index.ts b/packages/date-picker/src/shared/components/Calendar/index.ts
new file mode 100644
index 0000000000..0150c00993
--- /dev/null
+++ b/packages/date-picker/src/shared/components/Calendar/index.ts
@@ -0,0 +1,7 @@
+export {
+  CalendarCell,
+  type CalendarCellProps,
+  CalendarCellRangeState,
+  CalendarCellState,
+} from './CalendarCell';
+export { CalendarGrid, type CalendarGridProps } from './CalendarGrid';
diff --git a/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.styles.ts b/packages/date-picker/src/shared/components/DateInput/CalendarButton/CalendarButton.styles.ts
similarity index 100%
rename from packages/date-picker/src/DateInput/CalendarButton/CalendarButton.styles.ts
rename to packages/date-picker/src/shared/components/DateInput/CalendarButton/CalendarButton.styles.ts
diff --git a/packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx b/packages/date-picker/src/shared/components/DateInput/CalendarButton/CalendarButton.tsx
similarity index 100%
rename from packages/date-picker/src/DateInput/CalendarButton/CalendarButton.tsx
rename to packages/date-picker/src/shared/components/DateInput/CalendarButton/CalendarButton.tsx
diff --git a/packages/date-picker/src/DateInput/CalendarButton/index.ts b/packages/date-picker/src/shared/components/DateInput/CalendarButton/index.ts
similarity index 100%
rename from packages/date-picker/src/DateInput/CalendarButton/index.ts
rename to packages/date-picker/src/shared/components/DateInput/CalendarButton/index.ts
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.spec.tsx
similarity index 100%
rename from packages/date-picker/src/DateInput/DateFormField/DateFormField.spec.tsx
rename to packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.spec.tsx
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
similarity index 98%
rename from packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
rename to packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
index 0125736668..d7540c2d24 100644
--- a/packages/date-picker/src/DateInput/DateFormField/DateFormField.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
@@ -6,11 +6,11 @@ import { css } from '@leafygreen-ui/emotion';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
+import { DatePickerState } from '../../../types';
 import {
   DatePickerContextProps,
   DatePickerProvider,
 } from '../../DatePickerContext';
-import { DatePickerState } from '../../types';
 
 import { DateFormField } from './DateFormField';
 
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.styles.ts
similarity index 100%
rename from packages/date-picker/src/DateInput/DateFormField/DateFormField.styles.ts
rename to packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.styles.ts
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
similarity index 100%
rename from packages/date-picker/src/DateInput/DateFormField/DateFormField.tsx
rename to packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
diff --git a/packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.types.ts
similarity index 100%
rename from packages/date-picker/src/DateInput/DateFormField/DateFormField.types.ts
rename to packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.types.ts
diff --git a/packages/date-picker/src/DateInput/DateFormField/index.ts b/packages/date-picker/src/shared/components/DateInput/DateFormField/index.ts
similarity index 100%
rename from packages/date-picker/src/DateInput/DateFormField/index.ts
rename to packages/date-picker/src/shared/components/DateInput/DateFormField/index.ts
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
similarity index 96%
rename from packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
rename to packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
index d9203441d4..90e5ac653d 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -2,15 +2,15 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Month } from '../../constants';
+import { Month } from '../../../constants';
+import { SegmentRefs } from '../../../hooks';
+import { newUTC } from '../../../utils';
+import { eventContainingTargetValue } from '../../../utils/testutils';
 import {
   DatePickerProvider,
   DatePickerProviderProps,
+  defaultDatePickerContext,
 } from '../../DatePickerContext';
-import { defaultDatePickerContext } from '../../DatePickerContext/DatePickerContext.utils';
-import { SegmentRefs } from '../../hooks/useSegmentRefs';
-import { eventContainingTargetValue } from '../../testUtils';
-import { newUTC } from '../../utils';
 
 import { DateInputBox, type DateInputBoxProps } from '.';
 
@@ -194,6 +194,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
     });
 
     // TODO:
+    // eslint-disable-next-line jest/no-disabled-tests
     describe.skip('Auto-focus', () => {
       test('typing a complete segment value focuses the next segment', () => {
         const { yearInput, monthInput } = renderDateInputBox(
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
similarity index 96%
rename from packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
rename to packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
index bdf4c923a5..6349f2350c 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -6,12 +6,12 @@ import { isValid } from 'date-fns';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType, StoryType } from '@leafygreen-ui/lib';
 
-import { Month } from '../../constants';
+import { Month } from '../../../constants';
+import { newUTC } from '../../../utils';
 import {
   DatePickerContextProps,
   DatePickerProvider,
 } from '../../DatePickerContext';
-import { newUTC } from '../../utils';
 
 import { DateInputBox } from './DateInputBox';
 
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.styles.ts
similarity index 100%
rename from packages/date-picker/src/DateInput/DateInputBox/DateInputBox.styles.ts
rename to packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.styles.ts
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
similarity index 97%
rename from packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
rename to packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index b54c76725f..b669254953 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -11,18 +11,18 @@ import { useForwardedRef } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { createSyntheticEvent } from '@leafygreen-ui/lib';
 
-import { useDatePickerContext } from '../../DatePickerContext';
 import {
   DateSegment,
   DateSegmentsState,
   isDateSegment,
-} from '../../hooks/useDateSegments/DateSegments.types';
-import { useDateSegments } from '../../hooks/useDateSegments/useDateSegments';
+  useDateSegments,
+} from '../../../hooks';
 import {
   doesSomeSegmentExist,
   getValueFormatter,
   newDateFromSegments,
-} from '../../utils';
+} from '../../../utils';
+import { useDatePickerContext } from '../../DatePickerContext';
 import { DateInputSegment } from '../DateInputSegment';
 
 import {
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
similarity index 86%
rename from packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
rename to packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
index 4ead06f630..e6d02353d8 100644
--- a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
@@ -2,8 +2,8 @@ import { ChangeEventHandler } from 'react';
 
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
-import { SegmentRefs } from '../../hooks/useSegmentRefs';
-import { DateType } from '../../types';
+import { SegmentRefs } from '../../../hooks';
+import { DateType } from '../../../types';
 
 export interface DateInputBoxProps
   extends Omit<HTMLElementProps<'div'>, 'onChange'> {
diff --git a/packages/date-picker/src/DateInput/DateInputBox/index.ts b/packages/date-picker/src/shared/components/DateInput/DateInputBox/index.ts
similarity index 100%
rename from packages/date-picker/src/DateInput/DateInputBox/index.ts
rename to packages/date-picker/src/shared/components/DateInput/DateInputBox/index.ts
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.spec.tsx
similarity index 98%
rename from packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
rename to packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.spec.tsx
index 11e270392a..c237ea1fc8 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.spec.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { eventContainingTargetValue } from '../../testUtils';
+import { eventContainingTargetValue } from '../../../utils/testutils';
 
 import { DateInputSegment, type DateInputSegmentProps } from '.';
 
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
similarity index 100%
rename from packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.stories.tsx
rename to packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.styles.ts
similarity index 93%
rename from packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts
rename to packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.styles.ts
index 64feeb79d8..0709d7be20 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.styles.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.styles.ts
@@ -8,9 +8,8 @@ import {
   typeScales,
 } from '@leafygreen-ui/tokens';
 
-import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
-
-import { characterWidth, charsPerSegment } from './constants';
+import { characterWidth, charsPerSegment } from '../../../constants';
+import { DateSegment } from '../../../hooks';
 
 export const baseStyles = css`
   font-family: ${fontFamilies.default};
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
similarity index 96%
rename from packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
rename to packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
index 26e0f5e3f9..7b2505cddb 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -6,9 +6,9 @@ import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
+import { defaultMax, defaultMin, defaultPlaceholder } from '../../../constants';
 import { useDatePickerContext } from '../../DatePickerContext';
 
-import { defaultMax, defaultMin, defaultPlaceholder } from './constants';
 import {
   baseStyles,
   fontSizeStyles,
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts
similarity index 85%
rename from packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
rename to packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts
index 6fe0a09502..6c9ecdd40c 100644
--- a/packages/date-picker/src/DateInput/DateInputSegment/DateInputSegment.types.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts
@@ -1,9 +1,6 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
-import {
-  DateSegment,
-  DateSegmentValue,
-} from '../../hooks/useDateSegments/DateSegments.types';
+import { DateSegment, DateSegmentValue } from '../../../hooks';
 
 export interface DateInputSegmentProps
   extends DarkModeProps,
diff --git a/packages/date-picker/src/DateInput/DateInputSegment/index.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/index.ts
similarity index 100%
rename from packages/date-picker/src/DateInput/DateInputSegment/index.ts
rename to packages/date-picker/src/shared/components/DateInput/DateInputSegment/index.ts
diff --git a/packages/date-picker/src/shared/components/DateInput/index.ts b/packages/date-picker/src/shared/components/DateInput/index.ts
new file mode 100644
index 0000000000..74de023c3c
--- /dev/null
+++ b/packages/date-picker/src/shared/components/DateInput/index.ts
@@ -0,0 +1,4 @@
+export { CalendarButton } from './CalendarButton';
+export { DateFormField } from './DateFormField';
+export { DateInputBox, type DateInputBoxProps } from './DateInputBox';
+export { DateInputSegment } from './DateInputSegment';
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.spec.tsx b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
similarity index 100%
rename from packages/date-picker/src/DatePickerContext/DatePickerContext.spec.tsx
rename to packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
similarity index 100%
rename from packages/date-picker/src/DatePickerContext/DatePickerContext.tsx
rename to packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
similarity index 95%
rename from packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
rename to packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
index 1c8f64f3ab..2e56146a7b 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
@@ -1,4 +1,4 @@
-import { BaseDatePickerProps } from '../types';
+import { BaseDatePickerProps } from '../../types';
 
 /** The props expected to pass int the provider */
 export interface DatePickerProviderProps extends BaseDatePickerProps {}
diff --git a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
similarity index 92%
rename from packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
rename to packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
index fd03e8264f..fb5f4b0cfb 100644
--- a/packages/date-picker/src/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
@@ -4,9 +4,9 @@ import defaultTo from 'lodash/defaultTo';
 
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
-import { MAX_DATE, MIN_DATE } from '../constants';
-import { BaseDatePickerProps, DatePickerState } from '../types';
-import { getFormatParts, toDate } from '../utils';
+import { MAX_DATE, MIN_DATE } from '../../constants';
+import { BaseDatePickerProps, DatePickerState } from '../../types';
+import { getFormatParts, toDate } from '../../utils';
 
 import {
   DatePickerContextProps,
diff --git a/packages/date-picker/src/DatePickerContext/index.ts b/packages/date-picker/src/shared/components/DatePickerContext/index.ts
similarity index 73%
rename from packages/date-picker/src/DatePickerContext/index.ts
rename to packages/date-picker/src/shared/components/DatePickerContext/index.ts
index 5bb1570bc0..08fe7b4bed 100644
--- a/packages/date-picker/src/DatePickerContext/index.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/index.ts
@@ -4,10 +4,11 @@ export {
   useDatePickerContext,
 } from './DatePickerContext';
 export {
-  DatePickerContextProps,
-  DatePickerProviderProps,
+  type DatePickerContextProps,
+  type DatePickerProviderProps,
 } from './DatePickerContext.types';
 export {
+  type ContextPropKeys,
   contextPropNames,
   defaultDatePickerContext,
 } from './DatePickerContext.utils';
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.spec.tsx
similarity index 100%
rename from packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.spec.tsx
rename to packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.spec.tsx
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.styles.ts b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.styles.ts
similarity index 100%
rename from packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.styles.ts
rename to packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.styles.ts
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
similarity index 100%
rename from packages/date-picker/src/Calendar/MenuWrapper/MenuWrapper.tsx
rename to packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
diff --git a/packages/date-picker/src/Calendar/MenuWrapper/index.ts b/packages/date-picker/src/shared/components/MenuWrapper/index.ts
similarity index 100%
rename from packages/date-picker/src/Calendar/MenuWrapper/index.ts
rename to packages/date-picker/src/shared/components/MenuWrapper/index.ts
diff --git a/packages/date-picker/src/shared/components/index.ts b/packages/date-picker/src/shared/components/index.ts
new file mode 100644
index 0000000000..009742c5d1
--- /dev/null
+++ b/packages/date-picker/src/shared/components/index.ts
@@ -0,0 +1,18 @@
+export {
+  CalendarCell,
+  type CalendarCellProps,
+  CalendarCellState,
+  CalendarGrid,
+  type CalendarGridProps,
+} from './Calendar';
+export { DateInputBox, type DateInputBoxProps } from './DateInput';
+export {
+  contextPropNames,
+  DatePickerContext,
+  type DatePickerContextProps,
+  DatePickerProvider,
+  type DatePickerProviderProps,
+  defaultDatePickerContext,
+  useDatePickerContext,
+} from './DatePickerContext';
+export { MenuWrapper } from './MenuWrapper';
diff --git a/packages/date-picker/src/shared/constants.ts b/packages/date-picker/src/shared/constants.ts
new file mode 100644
index 0000000000..8f991397e4
--- /dev/null
+++ b/packages/date-picker/src/shared/constants.ts
@@ -0,0 +1,122 @@
+import padStart from 'lodash/padStart';
+import range from 'lodash/range';
+
+import { DropdownWidthBasis } from '@leafygreen-ui/select';
+
+/** Days in a week */
+export const daysPerWeek = 7 as const;
+
+/** Enumerates month names to the 0-indexed value */
+export enum Month {
+  January,
+  February,
+  March,
+  April,
+  May,
+  June,
+  July,
+  August,
+  September,
+  October,
+  November,
+  December,
+}
+
+/** The default earliest selectable date */
+export const MIN_DATE = new Date(Date.UTC(1970, Month.January, 1));
+
+/** The default latest selectable date */
+export const MAX_DATE = new Date(Date.UTC(2038, Month.January, 19));
+
+/**
+ * Long & short form of each month index
+ */
+export const Months: Array<{
+  long: string;
+  short: string;
+}> = range(12).map((monthIndex: number) => {
+  const str = `2023-${padStart((monthIndex + 1).toString(), 2, '0')}-15`;
+  const month = new Date(str);
+  return {
+    long: month.toLocaleString('default', { month: 'long' }),
+    short: month.toLocaleString('default', { month: 'short' }),
+  };
+});
+
+/** Long & short form for each Day of the week */
+export const DaysOfWeek = [
+  { long: 'Sunday', short: 'su' },
+  { long: 'Monday', short: 'mo' },
+  { long: 'Tuesday', short: 'tu' },
+  { long: 'Wednesday', short: 'we' },
+  { long: 'Thursday', short: 'th' },
+  { long: 'Friday', short: 'fr' },
+  { long: 'Saturday', short: 'sa' },
+] as const;
+export type DaysOfWeek = (typeof DaysOfWeek)[number];
+
+/**
+ * The minimum number for each segment
+ */
+export const defaultMin = {
+  day: 1,
+  month: 1,
+  year: MIN_DATE.getUTCFullYear(),
+} as const;
+
+/**
+ * The maximum number for each segment
+ */
+export const defaultMax = {
+  day: 31,
+  month: 12,
+  year: MAX_DATE.getUTCFullYear(),
+} as const;
+
+/**
+ * The shorthand for each char
+ */
+export const placeholderChar = {
+  day: 'D',
+  month: 'M',
+  year: 'Y',
+};
+
+/**
+ * The number of characters per input segment
+ */
+export const charsPerSegment = {
+  day: 2,
+  month: 2,
+  year: 4,
+};
+
+const _makePlaceholder = (n: number, s: string) =>
+  new Array(n).fill(s).join('\u200B');
+
+/**
+ * The default placeholders for each segment
+ */
+export const defaultPlaceholder = {
+  day: _makePlaceholder(charsPerSegment.day, placeholderChar.day),
+  month: _makePlaceholder(charsPerSegment.month, placeholderChar.month),
+  year: _makePlaceholder(charsPerSegment.year, placeholderChar.year),
+} as const;
+
+/** The percentage of 1ch these specific characters take up */
+export const characterWidth = {
+  // // Standard font
+  D: 46 / 40,
+  M: 55 / 40,
+  Y: 50 / 40,
+} as const;
+
+/** Default props for the month & year select menus */
+export const selectElementProps = {
+  size: 'xsmall',
+  allowDeselect: false,
+  dropdownWidthBasis: DropdownWidthBasis.Option,
+  // using no portal so the select menus are included in the backdrop "foreground"
+  // there is currently no way to pass a ref into the Select portal to use in backdrop "foreground"
+  usePortal: false,
+} as const;
diff --git a/packages/date-picker/src/shared/hooks/index.ts b/packages/date-picker/src/shared/hooks/index.ts
new file mode 100644
index 0000000000..0b3c3e87f0
--- /dev/null
+++ b/packages/date-picker/src/shared/hooks/index.ts
@@ -0,0 +1,9 @@
+export { useControlledValue } from './useControlledValue';
+export {
+  DateSegment,
+  type DateSegmentsState,
+  type DateSegmentValue,
+  isDateSegment,
+  useDateSegments,
+} from './useDateSegments';
+export { type SegmentRefs, useSegmentRefs } from './useSegmentRefs';
diff --git a/packages/date-picker/src/hooks/useControlledValue/index.ts b/packages/date-picker/src/shared/hooks/useControlledValue/index.ts
similarity index 100%
rename from packages/date-picker/src/hooks/useControlledValue/index.ts
rename to packages/date-picker/src/shared/hooks/useControlledValue/index.ts
diff --git a/packages/date-picker/src/hooks/useControlledValue/useControlledValue.spec.tsx b/packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.spec.tsx
similarity index 100%
rename from packages/date-picker/src/hooks/useControlledValue/useControlledValue.spec.tsx
rename to packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.spec.tsx
diff --git a/packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts b/packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.ts
similarity index 100%
rename from packages/date-picker/src/hooks/useControlledValue/useControlledValue.ts
rename to packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.ts
diff --git a/packages/date-picker/src/hooks/useDateSegments/DateSegments.types.ts b/packages/date-picker/src/shared/hooks/useDateSegments/DateSegments.types.ts
similarity index 100%
rename from packages/date-picker/src/hooks/useDateSegments/DateSegments.types.ts
rename to packages/date-picker/src/shared/hooks/useDateSegments/DateSegments.types.ts
diff --git a/packages/date-picker/src/hooks/useDateSegments/index.ts b/packages/date-picker/src/shared/hooks/useDateSegments/index.ts
similarity index 71%
rename from packages/date-picker/src/hooks/useDateSegments/index.ts
rename to packages/date-picker/src/shared/hooks/useDateSegments/index.ts
index 516d0812d4..8caa6ce048 100644
--- a/packages/date-picker/src/hooks/useDateSegments/index.ts
+++ b/packages/date-picker/src/shared/hooks/useDateSegments/index.ts
@@ -1,7 +1,7 @@
 export {
   DateSegment,
-  DateSegmentsState,
-  DateSegmentValue,
+  type DateSegmentsState,
+  type DateSegmentValue,
   isDateSegment,
 } from './DateSegments.types';
 export { useDateSegments } from './useDateSegments';
diff --git a/packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts b/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts
similarity index 100%
rename from packages/date-picker/src/hooks/useDateSegments/useDateSegments.ts
rename to packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts
diff --git a/packages/date-picker/src/hooks/useSegmentRefs/index.ts b/packages/date-picker/src/shared/hooks/useSegmentRefs/index.ts
similarity index 100%
rename from packages/date-picker/src/hooks/useSegmentRefs/index.ts
rename to packages/date-picker/src/shared/hooks/useSegmentRefs/index.ts
diff --git a/packages/date-picker/src/hooks/useSegmentRefs/segmentRefs.types.ts b/packages/date-picker/src/shared/hooks/useSegmentRefs/segmentRefs.types.ts
similarity index 100%
rename from packages/date-picker/src/hooks/useSegmentRefs/segmentRefs.types.ts
rename to packages/date-picker/src/shared/hooks/useSegmentRefs/segmentRefs.types.ts
diff --git a/packages/date-picker/src/hooks/useSegmentRefs/useSegmentRefs.ts b/packages/date-picker/src/shared/hooks/useSegmentRefs/useSegmentRefs.ts
similarity index 100%
rename from packages/date-picker/src/hooks/useSegmentRefs/useSegmentRefs.ts
rename to packages/date-picker/src/shared/hooks/useSegmentRefs/useSegmentRefs.ts
diff --git a/packages/date-picker/src/shared/index.ts b/packages/date-picker/src/shared/index.ts
new file mode 100644
index 0000000000..e7f8eabcbf
--- /dev/null
+++ b/packages/date-picker/src/shared/index.ts
@@ -0,0 +1,5 @@
+export * from './components';
+export * from './constants';
+export * from './hooks';
+export * from './types';
+export * from './utils';
diff --git a/packages/date-picker/src/types.ts b/packages/date-picker/src/shared/types.ts
similarity index 100%
rename from packages/date-picker/src/types.ts
rename to packages/date-picker/src/shared/types.ts
diff --git a/packages/date-picker/src/utils/addMonthsUTC/index.ts b/packages/date-picker/src/shared/utils/addMonthsUTC/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/addMonthsUTC/index.ts
rename to packages/date-picker/src/shared/utils/addMonthsUTC/index.ts
diff --git a/packages/date-picker/src/utils/cloneReverse/cloneReverse.spec.ts b/packages/date-picker/src/shared/utils/cloneReverse/cloneReverse.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/cloneReverse/cloneReverse.spec.ts
rename to packages/date-picker/src/shared/utils/cloneReverse/cloneReverse.spec.ts
diff --git a/packages/date-picker/src/utils/cloneReverse/index.ts b/packages/date-picker/src/shared/utils/cloneReverse/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/cloneReverse/index.ts
rename to packages/date-picker/src/shared/utils/cloneReverse/index.ts
diff --git a/packages/date-picker/src/utils/doesSomeSegmentExist/index.ts b/packages/date-picker/src/shared/utils/doesSomeSegmentExist/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/doesSomeSegmentExist/index.ts
rename to packages/date-picker/src/shared/utils/doesSomeSegmentExist/index.ts
diff --git a/packages/date-picker/src/utils/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts b/packages/date-picker/src/shared/utils/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts
rename to packages/date-picker/src/shared/utils/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts
diff --git a/packages/date-picker/src/utils/getDaysInUTCMonth/index.ts b/packages/date-picker/src/shared/utils/getDaysInUTCMonth/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/getDaysInUTCMonth/index.ts
rename to packages/date-picker/src/shared/utils/getDaysInUTCMonth/index.ts
diff --git a/packages/date-picker/src/utils/getFirstEmptySegment/index.ts b/packages/date-picker/src/shared/utils/getFirstEmptySegment/index.ts
similarity index 80%
rename from packages/date-picker/src/utils/getFirstEmptySegment/index.ts
rename to packages/date-picker/src/shared/utils/getFirstEmptySegment/index.ts
index 1f95d6a2ac..1ca88b7eb9 100644
--- a/packages/date-picker/src/utils/getFirstEmptySegment/index.ts
+++ b/packages/date-picker/src/shared/utils/getFirstEmptySegment/index.ts
@@ -1,6 +1,5 @@
-import { DatePickerContextProps } from '../../DatePickerContext';
-import { DateSegment } from '../../hooks/useDateSegments';
-import { SegmentRefs } from '../../hooks/useSegmentRefs';
+import { DatePickerContextProps } from '../../components/DatePickerContext';
+import { DateSegment, SegmentRefs } from '../../hooks';
 
 /**
  *
diff --git a/packages/date-picker/src/utils/getFirstOfMonth/getFirstOfMonth.spec.ts b/packages/date-picker/src/shared/utils/getFirstOfMonth/getFirstOfMonth.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/getFirstOfMonth/getFirstOfMonth.spec.ts
rename to packages/date-picker/src/shared/utils/getFirstOfMonth/getFirstOfMonth.spec.ts
diff --git a/packages/date-picker/src/utils/getFirstOfMonth/index.ts b/packages/date-picker/src/shared/utils/getFirstOfMonth/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/getFirstOfMonth/index.ts
rename to packages/date-picker/src/shared/utils/getFirstOfMonth/index.ts
diff --git a/packages/date-picker/src/utils/getFormatParts/index.ts b/packages/date-picker/src/shared/utils/getFormatParts/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/getFormatParts/index.ts
rename to packages/date-picker/src/shared/utils/getFormatParts/index.ts
diff --git a/packages/date-picker/src/utils/getFullMonthLabel/getFullMonthLabel.spec.ts b/packages/date-picker/src/shared/utils/getFullMonthLabel/getFullMonthLabel.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/getFullMonthLabel/getFullMonthLabel.spec.ts
rename to packages/date-picker/src/shared/utils/getFullMonthLabel/getFullMonthLabel.spec.ts
diff --git a/packages/date-picker/src/utils/getFullMonthLabel/index.ts b/packages/date-picker/src/shared/utils/getFullMonthLabel/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/getFullMonthLabel/index.ts
rename to packages/date-picker/src/shared/utils/getFullMonthLabel/index.ts
diff --git a/packages/date-picker/src/utils/getLastOfMonth/getLastOfMonth.spec.ts b/packages/date-picker/src/shared/utils/getLastOfMonth/getLastOfMonth.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/getLastOfMonth/getLastOfMonth.spec.ts
rename to packages/date-picker/src/shared/utils/getLastOfMonth/getLastOfMonth.spec.ts
diff --git a/packages/date-picker/src/utils/getLastOfMonth/index.ts b/packages/date-picker/src/shared/utils/getLastOfMonth/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/getLastOfMonth/index.ts
rename to packages/date-picker/src/shared/utils/getLastOfMonth/index.ts
diff --git a/packages/date-picker/src/utils/getMonthName/getMonthName.spec.ts b/packages/date-picker/src/shared/utils/getMonthName/getMonthName.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/getMonthName/getMonthName.spec.ts
rename to packages/date-picker/src/shared/utils/getMonthName/getMonthName.spec.ts
diff --git a/packages/date-picker/src/utils/getMonthName/index.ts b/packages/date-picker/src/shared/utils/getMonthName/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/getMonthName/index.ts
rename to packages/date-picker/src/shared/utils/getMonthName/index.ts
diff --git a/packages/date-picker/src/utils/getRemainingParts/getRemainingParts.spec.ts b/packages/date-picker/src/shared/utils/getRemainingParts/getRemainingParts.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/getRemainingParts/getRemainingParts.spec.ts
rename to packages/date-picker/src/shared/utils/getRemainingParts/getRemainingParts.spec.ts
diff --git a/packages/date-picker/src/utils/getRemainingParts/index.ts b/packages/date-picker/src/shared/utils/getRemainingParts/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/getRemainingParts/index.ts
rename to packages/date-picker/src/shared/utils/getRemainingParts/index.ts
diff --git a/packages/date-picker/src/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts b/packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
rename to packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
diff --git a/packages/date-picker/src/utils/getSegmentsFromDate/index.ts b/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts
similarity index 92%
rename from packages/date-picker/src/utils/getSegmentsFromDate/index.ts
rename to packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts
index 7e1a19283b..fc3d1a65f5 100644
--- a/packages/date-picker/src/utils/getSegmentsFromDate/index.ts
+++ b/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts
@@ -1,4 +1,4 @@
-import { DateSegmentsState } from '../../hooks/useDateSegments';
+import { DateSegmentsState } from '../../hooks';
 import { getValueFormatter } from '../getValueFormatter';
 
 /** Returns a single object with day, month & year segments */
diff --git a/packages/date-picker/src/utils/getUTCDateString/getUTCDateString.spec.ts b/packages/date-picker/src/shared/utils/getUTCDateString/getUTCDateString.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/getUTCDateString/getUTCDateString.spec.ts
rename to packages/date-picker/src/shared/utils/getUTCDateString/getUTCDateString.spec.ts
diff --git a/packages/date-picker/src/utils/getUTCDateString/index.ts b/packages/date-picker/src/shared/utils/getUTCDateString/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/getUTCDateString/index.ts
rename to packages/date-picker/src/shared/utils/getUTCDateString/index.ts
diff --git a/packages/date-picker/src/utils/getValueFormatter/index.ts b/packages/date-picker/src/shared/utils/getValueFormatter/index.ts
similarity index 77%
rename from packages/date-picker/src/utils/getValueFormatter/index.ts
rename to packages/date-picker/src/shared/utils/getValueFormatter/index.ts
index d2ee3a7432..f0facacedb 100644
--- a/packages/date-picker/src/utils/getValueFormatter/index.ts
+++ b/packages/date-picker/src/shared/utils/getValueFormatter/index.ts
@@ -1,9 +1,12 @@
 import padStart from 'lodash/padStart';
 
-import { charsPerSegment } from '../../DateInput/DateInputSegment/constants';
-import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
+import { charsPerSegment } from '../../constants';
+import { DateSegment } from '../../hooks';
 import { isZeroLike } from '../isZeroLike';
 
+/**
+ * @returns a value formatter function for the provided date segment
+ */
 export const getValueFormatter =
   (segment: DateSegment) => (val: string | number | undefined) => {
     // If the value is any form of zero, we set it to an empty string
diff --git a/packages/date-picker/src/utils/getValueFormatter/valueFormatter.spec.ts b/packages/date-picker/src/shared/utils/getValueFormatter/valueFormatter.spec.ts
similarity index 94%
rename from packages/date-picker/src/utils/getValueFormatter/valueFormatter.spec.ts
rename to packages/date-picker/src/shared/utils/getValueFormatter/valueFormatter.spec.ts
index 461e531f34..0dd09ce2a2 100644
--- a/packages/date-picker/src/utils/getValueFormatter/valueFormatter.spec.ts
+++ b/packages/date-picker/src/shared/utils/getValueFormatter/valueFormatter.spec.ts
@@ -1,4 +1,4 @@
-import { DateSegment } from '../../hooks/useDateSegments/DateSegments.types';
+import { DateSegment } from '../../shared/hooks/useDateSegments/DateSegments.types';
 
 import { getValueFormatter } from '.';
 
diff --git a/packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts b/packages/date-picker/src/shared/utils/getWeeksArray/getWeeksArray.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/getWeeksArray/getWeeksArray.spec.ts
rename to packages/date-picker/src/shared/utils/getWeeksArray/getWeeksArray.spec.ts
diff --git a/packages/date-picker/src/utils/getWeeksArray/index.ts b/packages/date-picker/src/shared/utils/getWeeksArray/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/getWeeksArray/index.ts
rename to packages/date-picker/src/shared/utils/getWeeksArray/index.ts
diff --git a/packages/date-picker/src/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/index.ts
rename to packages/date-picker/src/shared/utils/index.ts
diff --git a/packages/date-picker/src/utils/isCurrentUTCDay/index.ts b/packages/date-picker/src/shared/utils/isCurrentUTCDay/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isCurrentUTCDay/index.ts
rename to packages/date-picker/src/shared/utils/isCurrentUTCDay/index.ts
diff --git a/packages/date-picker/src/utils/isDefined/index.ts b/packages/date-picker/src/shared/utils/isDefined/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isDefined/index.ts
rename to packages/date-picker/src/shared/utils/isDefined/index.ts
diff --git a/packages/date-picker/src/utils/isElementInputSegment/index.ts b/packages/date-picker/src/shared/utils/isElementInputSegment/index.ts
similarity index 86%
rename from packages/date-picker/src/utils/isElementInputSegment/index.ts
rename to packages/date-picker/src/shared/utils/isElementInputSegment/index.ts
index 28ac985fb7..4bacd83464 100644
--- a/packages/date-picker/src/utils/isElementInputSegment/index.ts
+++ b/packages/date-picker/src/shared/utils/isElementInputSegment/index.ts
@@ -1,4 +1,4 @@
-import { SegmentRefs } from '../../hooks/useSegmentRefs';
+import { SegmentRefs } from '../../hooks';
 
 /**
  * Returns whether the given element is a segment
diff --git a/packages/date-picker/src/utils/isOnOrAfter/index.ts b/packages/date-picker/src/shared/utils/isOnOrAfter/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isOnOrAfter/index.ts
rename to packages/date-picker/src/shared/utils/isOnOrAfter/index.ts
diff --git a/packages/date-picker/src/utils/isOnOrBefore/index.ts b/packages/date-picker/src/shared/utils/isOnOrBefore/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isOnOrBefore/index.ts
rename to packages/date-picker/src/shared/utils/isOnOrBefore/index.ts
diff --git a/packages/date-picker/src/utils/isSameTZDay/index.ts b/packages/date-picker/src/shared/utils/isSameTZDay/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isSameTZDay/index.ts
rename to packages/date-picker/src/shared/utils/isSameTZDay/index.ts
diff --git a/packages/date-picker/src/utils/isSameTZDay/isSameTZDay.spec.ts b/packages/date-picker/src/shared/utils/isSameTZDay/isSameTZDay.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/isSameTZDay/isSameTZDay.spec.ts
rename to packages/date-picker/src/shared/utils/isSameTZDay/isSameTZDay.spec.ts
diff --git a/packages/date-picker/src/utils/isSameUTCDay/index.ts b/packages/date-picker/src/shared/utils/isSameUTCDay/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isSameUTCDay/index.ts
rename to packages/date-picker/src/shared/utils/isSameUTCDay/index.ts
diff --git a/packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts b/packages/date-picker/src/shared/utils/isSameUTCDay/isSameUTCDay.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/isSameUTCDay/isSameUTCDay.spec.ts
rename to packages/date-picker/src/shared/utils/isSameUTCDay/isSameUTCDay.spec.ts
diff --git a/packages/date-picker/src/utils/isSameUTCMonth/index.ts b/packages/date-picker/src/shared/utils/isSameUTCMonth/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isSameUTCMonth/index.ts
rename to packages/date-picker/src/shared/utils/isSameUTCMonth/index.ts
diff --git a/packages/date-picker/src/utils/isSameUTCMonth/isSameUTCMonth.spec.ts b/packages/date-picker/src/shared/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
rename to packages/date-picker/src/shared/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
diff --git a/packages/date-picker/src/utils/isSameUTCRange/index.ts b/packages/date-picker/src/shared/utils/isSameUTCRange/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isSameUTCRange/index.ts
rename to packages/date-picker/src/shared/utils/isSameUTCRange/index.ts
diff --git a/packages/date-picker/src/utils/isTodayTZ/index.ts b/packages/date-picker/src/shared/utils/isTodayTZ/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isTodayTZ/index.ts
rename to packages/date-picker/src/shared/utils/isTodayTZ/index.ts
diff --git a/packages/date-picker/src/utils/isTodayTZ/isTodayTZ.spec.ts b/packages/date-picker/src/shared/utils/isTodayTZ/isTodayTZ.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/isTodayTZ/isTodayTZ.spec.ts
rename to packages/date-picker/src/shared/utils/isTodayTZ/isTodayTZ.spec.ts
diff --git a/packages/date-picker/src/utils/isValidDate/index.ts b/packages/date-picker/src/shared/utils/isValidDate/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isValidDate/index.ts
rename to packages/date-picker/src/shared/utils/isValidDate/index.ts
diff --git a/packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts b/packages/date-picker/src/shared/utils/isValidDate/isValidDate.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts
rename to packages/date-picker/src/shared/utils/isValidDate/isValidDate.spec.ts
diff --git a/packages/date-picker/src/utils/isValidLocale/index.ts b/packages/date-picker/src/shared/utils/isValidLocale/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isValidLocale/index.ts
rename to packages/date-picker/src/shared/utils/isValidLocale/index.ts
diff --git a/packages/date-picker/src/utils/isValidLocale/isValidLocale.spec.ts b/packages/date-picker/src/shared/utils/isValidLocale/isValidLocale.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/isValidLocale/isValidLocale.spec.ts
rename to packages/date-picker/src/shared/utils/isValidLocale/isValidLocale.spec.ts
diff --git a/packages/date-picker/src/utils/isValidSegment/index.ts b/packages/date-picker/src/shared/utils/isValidSegment/index.ts
similarity index 84%
rename from packages/date-picker/src/utils/isValidSegment/index.ts
rename to packages/date-picker/src/shared/utils/isValidSegment/index.ts
index 87e6ea5e5e..4892c42716 100644
--- a/packages/date-picker/src/utils/isValidSegment/index.ts
+++ b/packages/date-picker/src/shared/utils/isValidSegment/index.ts
@@ -1,9 +1,6 @@
 import isUndefined from 'lodash/isUndefined';
 
-import {
-  DateSegment,
-  DateSegmentValue,
-} from '../../hooks/useDateSegments/DateSegments.types';
+import { DateSegment, DateSegmentValue } from '../../hooks';
 
 /**
  * Returns whether a given value is a valid segment value
diff --git a/packages/date-picker/src/utils/isValidSegment/isValidSegment.spec.ts b/packages/date-picker/src/shared/utils/isValidSegment/isValidSegment.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/isValidSegment/isValidSegment.spec.ts
rename to packages/date-picker/src/shared/utils/isValidSegment/isValidSegment.spec.ts
diff --git a/packages/date-picker/src/utils/isZeroLike/index.ts b/packages/date-picker/src/shared/utils/isZeroLike/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/isZeroLike/index.ts
rename to packages/date-picker/src/shared/utils/isZeroLike/index.ts
diff --git a/packages/date-picker/src/utils/maxDate/index.ts b/packages/date-picker/src/shared/utils/maxDate/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/maxDate/index.ts
rename to packages/date-picker/src/shared/utils/maxDate/index.ts
diff --git a/packages/date-picker/src/utils/minDate/index.ts b/packages/date-picker/src/shared/utils/minDate/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/minDate/index.ts
rename to packages/date-picker/src/shared/utils/minDate/index.ts
diff --git a/packages/date-picker/src/utils/newDateFromSegments/index.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
similarity index 82%
rename from packages/date-picker/src/utils/newDateFromSegments/index.ts
rename to packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
index 6a4192e64d..d0b18a86de 100644
--- a/packages/date-picker/src/utils/newDateFromSegments/index.ts
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
@@ -1,4 +1,4 @@
-import { DateSegmentsState } from '../../hooks/useDateSegments/DateSegments.types';
+import { DateSegmentsState } from '../../hooks';
 import { isValidSegment } from '../isValidSegment';
 
 /** Constructs a date object in UTC from day, month, year segments */
diff --git a/packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/newDateFromSegments/newDateFromSegments.spec.ts
rename to packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
diff --git a/packages/date-picker/src/utils/newUTC/index.ts b/packages/date-picker/src/shared/utils/newUTC/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/newUTC/index.ts
rename to packages/date-picker/src/shared/utils/newUTC/index.ts
diff --git a/packages/date-picker/src/utils/newUTC/newUTC.spec.ts b/packages/date-picker/src/shared/utils/newUTC/newUTC.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/newUTC/newUTC.spec.ts
rename to packages/date-picker/src/shared/utils/newUTC/newUTC.spec.ts
diff --git a/packages/date-picker/src/utils/pickAndOmit/index.ts b/packages/date-picker/src/shared/utils/pickAndOmit/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/pickAndOmit/index.ts
rename to packages/date-picker/src/shared/utils/pickAndOmit/index.ts
diff --git a/packages/date-picker/src/utils/setToUTCMidnight/index.ts b/packages/date-picker/src/shared/utils/setToUTCMidnight/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/setToUTCMidnight/index.ts
rename to packages/date-picker/src/shared/utils/setToUTCMidnight/index.ts
diff --git a/packages/date-picker/src/utils/setToUTCMidnight/setToUTCMidnight.spec.ts b/packages/date-picker/src/shared/utils/setToUTCMidnight/setToUTCMidnight.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/setToUTCMidnight/setToUTCMidnight.spec.ts
rename to packages/date-picker/src/shared/utils/setToUTCMidnight/setToUTCMidnight.spec.ts
diff --git a/packages/date-picker/src/utils/setUTCDate/index.ts b/packages/date-picker/src/shared/utils/setUTCDate/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/setUTCDate/index.ts
rename to packages/date-picker/src/shared/utils/setUTCDate/index.ts
diff --git a/packages/date-picker/src/utils/setUTCMonth/index.ts b/packages/date-picker/src/shared/utils/setUTCMonth/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/setUTCMonth/index.ts
rename to packages/date-picker/src/shared/utils/setUTCMonth/index.ts
diff --git a/packages/date-picker/src/utils/setUTCMonth/setUTCMonth.spec.ts b/packages/date-picker/src/shared/utils/setUTCMonth/setUTCMonth.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/setUTCMonth/setUTCMonth.spec.ts
rename to packages/date-picker/src/shared/utils/setUTCMonth/setUTCMonth.spec.ts
diff --git a/packages/date-picker/src/utils/setUTCYear/index.ts b/packages/date-picker/src/shared/utils/setUTCYear/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/setUTCYear/index.ts
rename to packages/date-picker/src/shared/utils/setUTCYear/index.ts
diff --git a/packages/date-picker/src/testUtils.ts b/packages/date-picker/src/shared/utils/testutils.ts
similarity index 89%
rename from packages/date-picker/src/testUtils.ts
rename to packages/date-picker/src/shared/utils/testutils.ts
index 3e9275dc2b..1fa0c249ca 100644
--- a/packages/date-picker/src/testUtils.ts
+++ b/packages/date-picker/src/shared/utils/testutils.ts
@@ -6,11 +6,12 @@ import { LeafyGreenProviderProps } from '@leafygreen-ui/leafygreen-provider';
 
 import {
   ContextPropKeys,
+  contextPropNames,
+  DatePickerProviderProps,
   defaultDatePickerContext,
-} from './DatePickerContext/DatePickerContext.utils';
-import { contextPropNames, DatePickerProviderProps } from './DatePickerContext';
-import { BaseDatePickerProps } from './types';
-import { pickAndOmit } from './utils';
+} from '../components/DatePickerContext';
+import { BaseDatePickerProps } from '../types';
+import { pickAndOmit } from '../utils';
 
 /** Time zones used to test with */
 export const TimeZones = [
diff --git a/packages/date-picker/src/utils/toDate/index.ts b/packages/date-picker/src/shared/utils/toDate/index.ts
similarity index 100%
rename from packages/date-picker/src/utils/toDate/index.ts
rename to packages/date-picker/src/shared/utils/toDate/index.ts
diff --git a/packages/date-picker/src/utils/toDate/toDate.spec.ts b/packages/date-picker/src/shared/utils/toDate/toDate.spec.ts
similarity index 100%
rename from packages/date-picker/src/utils/toDate/toDate.spec.ts
rename to packages/date-picker/src/shared/utils/toDate/toDate.spec.ts
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index e751be0f90..737920190b 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -22,7 +22,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@leafygreen-ui/lib": "^11.0.0",
+    "@leafygreen-ui/lib": "^13.0.0",
     "lodash": "^4.17.21"
   },
   "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0",
@@ -35,7 +35,6 @@
     "url": "https://jira.mongodb.org/projects/PD/summary"
   },
   "devDependencies": {
-    "@leafygreen-ui/emotion": "^4.0.7",
-    "@leafygreen-ui/lib": "^13.0.0"
+    "@leafygreen-ui/emotion": "^4.0.7"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 1507f85828..c0eba1ac83 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2274,6 +2274,27 @@
     lodash "^4.17.21"
     prop-types "^15.7.2"
 
+"@leafygreen-ui/lib@^12.0.0":
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/lib/-/lib-12.0.0.tgz#1ab22c541435e6c0060e21d7097dd65892da24a1"
+  integrity sha512-nhaxi4oBesnizxO0YK7XwcmiLL9U5QuN7lkZdWGDdmoJgNNL+aRju4W5vmZc7vcazSHfr3gAL+NFAGaAuopyRA==
+  dependencies:
+    "@storybook/csf" "^0.1.0"
+    lodash "^4.17.21"
+    prop-types "^15.7.2"
+
+"@leafygreen-ui/typography@^17.0.0":
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/typography/-/typography-17.0.2.tgz#39b984d6725dbe38e191ac3cf383e77fd7cd2501"
+  integrity sha512-wx+kk5VNMOCTenrIG2AcgAKHt9TiLhSTirZARv0J6l4VOgnO+Mkbh3sqd4mk0EOBCAFmsBR3WqwQh00JXU8Htw==
+  dependencies:
+    "@leafygreen-ui/emotion" "^4.0.7"
+    "@leafygreen-ui/icon" "^11.22.2"
+    "@leafygreen-ui/lib" "^12.0.0"
+    "@leafygreen-ui/palette" "^4.0.7"
+    "@leafygreen-ui/polymorphic" "^1.3.6"
+    "@leafygreen-ui/tokens" "^2.1.4"
+
 "@manypkg/find-root@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@manypkg/find-root/-/find-root-1.1.0.tgz#a62d8ed1cd7e7d4c11d9d52a8397460b5d4ad29f"

From f1e2076bc8c1ac773a55d9151c216230ae066cad Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Tue, 31 Oct 2023 15:59:59 -0400
Subject: [PATCH 261/351] Adam/date picker/input auto focus (#2057)

* cleanup

* fixes date picker input auto-advance

* fixes getRelativeSegment tests
---
 packages/date-picker/package.json             |   4 +-
 .../src/DatePicker/DatePicker.spec.tsx        |  77 +++++++++++++
 .../DatePickerInput/DatePickerInput.tsx       |  53 ++++++++-
 .../getRelativeSegment.spec.tsx               | 101 ++++++++++++++++++
 .../utils/getRelativeSegment/index.ts         |  34 +++---
 .../DateInputSegment/DateInputSegment.tsx     |   1 +
 packages/date-picker/src/shared/types.ts      |   7 +-
 .../date-picker/src/shared/utils/index.ts     |   4 +-
 .../utils/isExplicitSegmentValue/index.ts     |  27 +++++
 .../isExplicitSegmentValue.spec.ts            |  26 +++++
 .../src/shared/utils/isValidSegment/index.ts  |   2 +-
 .../isValidSegment/isValidSegment.spec.ts     |  20 ++--
 .../utils/isValidValueForSegment/index.ts     |  15 +++
 .../isValidValueForSegment.spec.ts            |  31 ++++++
 .../shared/utils/newDateFromSegments/index.ts |  13 ++-
 .../newDateFromSegments.spec.ts               |  10 +-
 yarn.lock                                     |  21 ----
 17 files changed, 384 insertions(+), 62 deletions(-)
 create mode 100644 packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
 create mode 100644 packages/date-picker/src/shared/utils/isExplicitSegmentValue/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/isExplicitSegmentValue/isExplicitSegmentValue.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/isValidValueForSegment/isValidValueForSegment.spec.ts

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 28617e1468..dcb02652f7 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -20,12 +20,12 @@
     "@leafygreen-ui/hooks": "^8.0.0",
     "@leafygreen-ui/icon": "^11.23.0",
     "@leafygreen-ui/icon-button": "^15.0.17",
-    "@leafygreen-ui/lib": "^12.0.0",
+    "@leafygreen-ui/lib": "^13.0.0",
     "@leafygreen-ui/palette": "^4.0.7",
     "@leafygreen-ui/popover": "^11.1.0",
     "@leafygreen-ui/select": "^11.0.0",
     "@leafygreen-ui/tokens": "^2.2.0",
-    "@leafygreen-ui/typography": "^17.0.0",
+    "@leafygreen-ui/typography": "^18.0.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "lodash": "^4.17.21",
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 2db09b0f11..800f43fe4a 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -747,6 +747,83 @@ describe('packages/date-picker', () => {
             eventContainingTargetValue('2023'),
           );
         });
+
+        describe('auto-advance focus', () => {
+          describe('ISO format', () => {
+            const dateFormat = 'iso8601';
+            test('when year value is explicit, focus advances to month', () => {
+              const { yearInput, monthInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(yearInput, '1999');
+              expect(monthInput).toHaveFocus();
+            });
+            test('when year value is ambiguous, focus does not advance', () => {
+              const { yearInput } = renderDatePicker({ dateFormat });
+              userEvent.type(yearInput, '2');
+              expect(yearInput).toHaveFocus();
+            });
+            test('when year value is out-of-range, focus does not advance', () => {
+              const { yearInput } = renderDatePicker({ dateFormat });
+              userEvent.type(yearInput, '1945');
+              expect(yearInput).toHaveFocus();
+            });
+
+            test('when month value is explicit, focus advances to day', () => {
+              const { monthInput, dayInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(monthInput, '5');
+              expect(dayInput).toHaveFocus();
+            });
+            test('when month value is ambiguous, focus does not advance', () => {
+              const { monthInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(monthInput, '1');
+              expect(monthInput).toHaveFocus();
+            });
+          });
+
+          describe('en-US format', () => {
+            const dateFormat = 'en-US';
+            test('when month value is explicit, focus advances to day', () => {
+              const { monthInput, dayInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(monthInput, '5');
+              expect(dayInput).toHaveFocus();
+            });
+            test('when month value is ambiguous, focus does not advance', () => {
+              const { monthInput } = renderDatePicker({ dateFormat });
+              userEvent.type(monthInput, '1');
+              expect(monthInput).toHaveFocus();
+            });
+
+            test('when day value is explicit, focus advances to year', () => {
+              const { dayInput, yearInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(dayInput, '5');
+              expect(yearInput).toHaveFocus();
+            });
+            test('when day value is ambiguous, focus does not advance', () => {
+              const { dayInput } = renderDatePicker({ dateFormat });
+              userEvent.type(dayInput, '2');
+              expect(dayInput).toHaveFocus();
+            });
+
+            test('when year value is ambiguous, focus does not update', () => {
+              const { monthInput, dayInput, yearInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(monthInput, '5');
+              userEvent.type(dayInput, '5');
+              userEvent.type(yearInput, '2');
+              expect(yearInput).toHaveFocus();
+            });
+          });
+        });
       });
 
       describe('on un-focus/blur', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 5f8783d20f..1ff9e60d91 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -1,4 +1,5 @@
 import React, {
+  ChangeEventHandler,
   FocusEventHandler,
   forwardRef,
   KeyboardEventHandler,
@@ -10,7 +11,13 @@ import { keyMap } from '@leafygreen-ui/lib';
 import { DateFormField, DateInputBox } from '../../shared/components/DateInput';
 import { useDatePickerContext } from '../../shared/components/DatePickerContext';
 import { useSegmentRefs } from '../../shared/hooks';
-import { isElementInputSegment, isZeroLike } from '../../shared/utils';
+import {
+  isElementInputSegment,
+  isExplicitSegmentValue,
+  isValidSegmentName,
+  isValidValueForSegment,
+  isZeroLike,
+} from '../../shared/utils';
 import { getRelativeSegment } from '../utils/getRelativeSegment';
 import { getSegmentToFocus } from '../utils/getSegmentToFocus';
 
@@ -29,11 +36,14 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     }: DatePickerInputProps,
     fwdRef,
   ) => {
-    const { formatParts, disabled, setOpen, setIsDirty } =
+    const { formatParts, disabled, setOpen, isDirty, setIsDirty } =
       useDatePickerContext();
     const segmentRefs = useSegmentRefs();
 
-    /** Called when the input, or any of its children, is clicked */
+    /**
+     * Called when the input, or any of its children, is clicked.
+     * Opens the menu and focuses the appropriate segment
+     */
     const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
       if (!disabled) {
         setOpen(true);
@@ -48,6 +58,10 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       }
     };
 
+    /**
+     * Called when the calendar button is clicked.
+     * Opens the menu
+     */
     const handleIconButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
       // Prevent the parent click handler from being called since clicks on the parent always opens the dropdown
       e.stopPropagation();
@@ -146,7 +160,10 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       onKeyDown?.(e);
     };
 
-    /** Called when any child of DatePickerInput is blurred */
+    /**
+     * Called when any child of DatePickerInput is blurred.
+     * Calls the validation handler.
+     */
     const handleInputBlur: FocusEventHandler = e => {
       const nextFocus = e.relatedTarget as HTMLInputElement;
 
@@ -161,6 +178,32 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       }
     };
 
+    /**
+     * Called when any segment changes
+     */
+    const handleSegmentChange: ChangeEventHandler<HTMLInputElement> = e => {
+      const segment = e.target.dataset['segment'];
+      const segmentValue = e.target.value;
+
+      if (isValidSegmentName(segment)) {
+        if (
+          isValidValueForSegment(segment, segmentValue) &&
+          isExplicitSegmentValue(segment, segmentValue)
+        ) {
+          const nextSegment = getRelativeSegment('next', {
+            segment: segmentRefs[segment],
+            formatParts,
+            segmentRefs,
+          });
+
+          nextSegment?.current?.focus();
+        } else if (!isValidValueForSegment(segment, segmentValue) && isDirty) {
+          handleValidation?.(value);
+        }
+      }
+      onSegmentChange?.(e);
+    };
+
     return (
       <DateFormField
         ref={fwdRef}
@@ -174,7 +217,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           value={value}
           setValue={setValue}
           segmentRefs={segmentRefs}
-          onChange={onSegmentChange}
+          onChange={handleSegmentChange}
         />
       </DateFormField>
     );
diff --git a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
new file mode 100644
index 0000000000..b1983f48e6
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { SegmentRefs } from '../../../shared/hooks';
+
+import { getRelativeSegment } from '.';
+
+const renderTestComponent = () => {
+  const segmentRefs: SegmentRefs = {
+    day: React.createRef<HTMLInputElement>(),
+    month: React.createRef<HTMLInputElement>(),
+    year: React.createRef<HTMLInputElement>(),
+  };
+
+  const result = render(
+    <>
+      <input id="day" ref={segmentRefs.day} />
+      <input id="month" ref={segmentRefs.month} />
+      <input id="year" ref={segmentRefs.year} />
+    </>,
+  );
+
+  return {
+    ...result,
+    segmentRefs,
+  };
+};
+
+describe('packages/date-picker/utils/getRelativeSegment', () => {
+  const formatParts: Array<Intl.DateTimeFormatPart> = [
+    { type: 'year', value: '2023' },
+    { type: 'literal', value: '-' },
+    { type: 'month', value: '10' },
+    { type: 'literal', value: '-' },
+    { type: 'day', value: '31' },
+  ];
+
+  let segmentRefs: SegmentRefs;
+  beforeEach(() => {
+    segmentRefs = renderTestComponent().segmentRefs;
+  });
+
+  test('next from year => month', () => {
+    expect(
+      getRelativeSegment('next', {
+        segment: segmentRefs.year,
+        formatParts,
+        segmentRefs,
+      }),
+    ).toBe(segmentRefs.month);
+  });
+  test('next from month => day', () => {
+    expect(
+      getRelativeSegment('next', {
+        segment: segmentRefs.month,
+        formatParts,
+        segmentRefs,
+      }),
+    ).toBe(segmentRefs.day);
+  });
+
+  test('prev from day => month', () => {
+    expect(
+      getRelativeSegment('prev', {
+        segment: segmentRefs.day,
+        formatParts,
+        segmentRefs,
+      }),
+    ).toBe(segmentRefs.month);
+  });
+
+  test('prev from month => year', () => {
+    expect(
+      getRelativeSegment('prev', {
+        segment: segmentRefs.month,
+        formatParts,
+        segmentRefs,
+      }),
+    ).toBe(segmentRefs.year);
+  });
+
+  test('first = year', () => {
+    expect(
+      getRelativeSegment('first', {
+        segment: segmentRefs.day,
+        formatParts,
+        segmentRefs,
+      }),
+    ).toBe(segmentRefs.year);
+  });
+
+  test('last = day', () => {
+    expect(
+      getRelativeSegment('first', {
+        segment: segmentRefs.year,
+        formatParts,
+        segmentRefs,
+      }),
+    ).toBe(segmentRefs.day);
+  });
+});
diff --git a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
index 65fefd0b68..0800258a81 100644
--- a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
@@ -29,25 +29,31 @@ export const getRelativeSegment = (
   }
 
   // only the relevant segments, not separators
-  const formatSegments = formatParts.filter(part => part.type !== 'literal');
-  const orderedSegmentRefs = formatSegments.map(
-    ({ type }) => segmentRefs[type as DateSegment],
-  );
+  const formatSegments: Array<DateSegment> = formatParts
+    .filter(part => part.type !== 'literal')
+    .map(part => part.type as DateSegment);
 
-  const currentSegmentIndex: number | undefined = orderedSegmentRefs.findIndex(
-    ref => ref.current === segment,
+  /** The index of the reference segment relative to formatParts */
+  const currentSegmentIndex: number | undefined = formatSegments.findIndex(
+    segmentName => segmentRefs[segmentName] === segment,
   );
 
+  const getRefAtIndex = (index: number) => {
+    const segmentName = formatSegments[index];
+    return segmentRefs[segmentName];
+  };
+
   switch (direction) {
     case 'first': {
-      const firstSegmentRef = orderedSegmentRefs[0];
+      const firstSegmentRef = getRefAtIndex(0);
       return firstSegmentRef;
     }
 
     case 'last': {
-      const lastSegmentRef = last(orderedSegmentRefs);
+      const lastSegmentName = last(formatSegments);
 
-      if (lastSegmentRef) {
+      if (lastSegmentName) {
+        const lastSegmentRef = segmentRefs[lastSegmentName];
         return lastSegmentRef;
       }
 
@@ -55,13 +61,13 @@ export const getRelativeSegment = (
     }
 
     case 'next': {
-      if (currentSegmentIndex) {
+      if (!isUndefined(currentSegmentIndex)) {
         const nextSegmentIndex = Math.min(
           currentSegmentIndex + 1,
-          orderedSegmentRefs.length - 1,
+          formatSegments.length - 1,
         );
 
-        const nextSegmentRef = orderedSegmentRefs[nextSegmentIndex];
+        const nextSegmentRef = getRefAtIndex(nextSegmentIndex);
         return nextSegmentRef;
       }
 
@@ -69,10 +75,10 @@ export const getRelativeSegment = (
     }
 
     case 'prev': {
-      if (currentSegmentIndex) {
+      if (!isUndefined(currentSegmentIndex)) {
         const prevSegmentIndex = Math.max(currentSegmentIndex - 1, 0);
 
-        const prevSegmentRef = orderedSegmentRefs[prevSegmentIndex];
+        const prevSegmentRef = getRefAtIndex(prevSegmentIndex);
         return prevSegmentRef;
       }
 
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 7b2505cddb..cbcabe09d0 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -66,6 +66,7 @@ export const DateInputSegment = React.forwardRef<
         onBlur={onBlur}
         disabled={disabled}
         data-testid="lg-date_picker_input-segment"
+        data-segment={segment}
         className={cx(
           baseStyles,
           fontSizeStyles[baseFontSize],
diff --git a/packages/date-picker/src/shared/types.ts b/packages/date-picker/src/shared/types.ts
index ec8bde23e0..7949caf16b 100644
--- a/packages/date-picker/src/shared/types.ts
+++ b/packages/date-picker/src/shared/types.ts
@@ -36,7 +36,12 @@ export interface BaseDatePickerProps extends DarkModeProps {
    *
    * @default 'iso8601'
    */
-  dateFormat?: 'en-US' | 'en-UK' | 'iso8601' | string;
+  dateFormat?:
+    | 'en-US'
+    | 'en-UK'
+    | 'iso8601'
+    | `${string}-${string}`
+    | Intl.Locale;
 
   /**
    * A valid IANA timezone string, or UTC offset.
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index 10a1b881fc..a60707eb9a 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -19,6 +19,7 @@ export { getWeeksArray } from './getWeeksArray';
 export { isCurrentUTCDay } from './isCurrentUTCDay';
 export { isDefined } from './isDefined';
 export { isElementInputSegment } from './isElementInputSegment';
+export { isExplicitSegmentValue } from './isExplicitSegmentValue';
 export { isOnOrAfter } from './isOnOrAfter';
 export { isOnOrBefore } from './isOnOrBefore';
 export { isSameTZDay } from './isSameTZDay';
@@ -28,7 +29,8 @@ export { isSameUTCRange } from './isSameUTCRange';
 export { isTodayTZ } from './isTodayTZ';
 export { isValidDate } from './isValidDate';
 export { isValidLocale } from './isValidLocale';
-export { isValidSegment } from './isValidSegment';
+export { isValidSegmentName, isValidSegmentValue } from './isValidSegment';
+export { isValidValueForSegment } from './isValidValueForSegment';
 export { isNotZeroLike, isZeroLike } from './isZeroLike';
 export { maxDate } from './maxDate';
 export { minDate } from './minDate';
diff --git a/packages/date-picker/src/shared/utils/isExplicitSegmentValue/index.ts b/packages/date-picker/src/shared/utils/isExplicitSegmentValue/index.ts
new file mode 100644
index 0000000000..166f9f02a9
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/isExplicitSegmentValue/index.ts
@@ -0,0 +1,27 @@
+import { charsPerSegment } from '../../constants';
+import { DateSegment, DateSegmentValue } from '../../hooks';
+import { isValidValueForSegment } from '../isValidValueForSegment';
+
+/**
+ * Returns whether the provided value is an explicit, unique value for a given segment.
+ * Contrast this with an ambiguous segment value:
+ * Explicit: Day = 5, 02
+ * Ambiguous: Day = 2 (could be 20-29)
+ */
+export const isExplicitSegmentValue = (
+  segment: DateSegment,
+  value: DateSegmentValue,
+): boolean => {
+  if (!isValidValueForSegment(segment, value)) return false;
+
+  switch (segment) {
+    case DateSegment.Day:
+      return value.length === charsPerSegment.day || Number(value) >= 4;
+
+    case DateSegment.Month:
+      return value.length === charsPerSegment.month || Number(value) >= 2;
+
+    case DateSegment.Year:
+      return value.length === charsPerSegment.year;
+  }
+};
diff --git a/packages/date-picker/src/shared/utils/isExplicitSegmentValue/isExplicitSegmentValue.spec.ts b/packages/date-picker/src/shared/utils/isExplicitSegmentValue/isExplicitSegmentValue.spec.ts
new file mode 100644
index 0000000000..48422da9c0
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/isExplicitSegmentValue/isExplicitSegmentValue.spec.ts
@@ -0,0 +1,26 @@
+import { isExplicitSegmentValue } from '.';
+
+describe('packages/date-picker/utils/isExplicitSegmentValue', () => {
+  test('day', () => {
+    expect(isExplicitSegmentValue('day', '1')).toBe(false);
+    expect(isExplicitSegmentValue('day', '01')).toBe(true);
+    expect(isExplicitSegmentValue('day', '4')).toBe(true);
+    expect(isExplicitSegmentValue('day', '10')).toBe(true);
+    expect(isExplicitSegmentValue('day', '22')).toBe(true);
+    expect(isExplicitSegmentValue('day', '31')).toBe(true);
+  });
+
+  test('month', () => {
+    expect(isExplicitSegmentValue('month', '1')).toBe(false);
+    expect(isExplicitSegmentValue('month', '01')).toBe(true);
+    expect(isExplicitSegmentValue('month', '2')).toBe(true);
+    expect(isExplicitSegmentValue('month', '12')).toBe(true);
+  });
+
+  test('year', () => {
+    expect(isExplicitSegmentValue('year', '1')).toBe(false);
+    expect(isExplicitSegmentValue('year', '1970')).toBe(true);
+    expect(isExplicitSegmentValue('year', '2000')).toBe(true);
+    expect(isExplicitSegmentValue('year', '0001')).toBe(false);
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/isValidSegment/index.ts b/packages/date-picker/src/shared/utils/isValidSegment/index.ts
index 4892c42716..8799712099 100644
--- a/packages/date-picker/src/shared/utils/isValidSegment/index.ts
+++ b/packages/date-picker/src/shared/utils/isValidSegment/index.ts
@@ -5,7 +5,7 @@ import { DateSegment, DateSegmentValue } from '../../hooks';
 /**
  * Returns whether a given value is a valid segment value
  */
-export const isValidSegment = (
+export const isValidSegmentValue = (
   segment?: DateSegmentValue,
 ): segment is DateSegmentValue =>
   !isUndefined(segment) && !isNaN(Number(segment)) && Number(segment) > 0;
diff --git a/packages/date-picker/src/shared/utils/isValidSegment/isValidSegment.spec.ts b/packages/date-picker/src/shared/utils/isValidSegment/isValidSegment.spec.ts
index 4dad662d5c..0993fec4be 100644
--- a/packages/date-picker/src/shared/utils/isValidSegment/isValidSegment.spec.ts
+++ b/packages/date-picker/src/shared/utils/isValidSegment/isValidSegment.spec.ts
@@ -1,38 +1,38 @@
-import { isValidSegment, isValidSegmentName } from '.';
+import { isValidSegmentName, isValidSegmentValue } from '.';
 
 describe('packages/date-picker/utils/isValidSegment', () => {
   describe('isValidSegment', () => {
     test('undefined returns false', () => {
-      expect(isValidSegment()).toBeFalsy();
+      expect(isValidSegmentValue()).toBeFalsy();
     });
 
     test('a string returns false', () => {
-      // @ts-expect-error
-      expect(isValidSegment('')).toBeFalsy();
+      expect(isValidSegmentValue('')).toBeFalsy();
     });
 
     test('NaN returns false', () => {
-      expect(isValidSegment(NaN)).toBeFalsy();
+      /// @ts-expect-error
+      expect(isValidSegmentValue(NaN)).toBeFalsy();
     });
 
     test('0 returns false', () => {
-      expect(isValidSegment(0)).toBeFalsy();
+      expect(isValidSegmentValue('0')).toBeFalsy();
     });
 
     test('negative returns false', () => {
-      expect(isValidSegment(-1)).toBeFalsy();
+      expect(isValidSegmentValue('-1')).toBeFalsy();
     });
 
     test('1970 returns true', () => {
-      expect(isValidSegment(1970)).toBeTruthy();
+      expect(isValidSegmentValue('1970')).toBeTruthy();
     });
 
     test('1 returns true', () => {
-      expect(isValidSegment(1)).toBeTruthy();
+      expect(isValidSegmentValue('1')).toBeTruthy();
     });
 
     test('2038 returns true', () => {
-      expect(isValidSegment(2038)).toBeTruthy();
+      expect(isValidSegmentValue('2038')).toBeTruthy();
     });
   });
 
diff --git a/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts b/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
new file mode 100644
index 0000000000..6ba061f49a
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
@@ -0,0 +1,15 @@
+import { inRange } from 'lodash';
+
+import { defaultMax, defaultMin } from '../../constants';
+import { DateSegment, DateSegmentValue } from '../../hooks';
+import { isValidSegmentName, isValidSegmentValue } from '../isValidSegment';
+
+/** Returns whether a value is valid for a given segment type */
+export const isValidValueForSegment = (
+  segment: DateSegment,
+  value: DateSegmentValue,
+): boolean => {
+  if (!(isValidSegmentValue(value) && isValidSegmentName(segment)))
+    return false;
+  return inRange(Number(value), defaultMin[segment], defaultMax[segment] + 1);
+};
diff --git a/packages/date-picker/src/shared/utils/isValidValueForSegment/isValidValueForSegment.spec.ts b/packages/date-picker/src/shared/utils/isValidValueForSegment/isValidValueForSegment.spec.ts
new file mode 100644
index 0000000000..2c0c5ff810
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/isValidValueForSegment/isValidValueForSegment.spec.ts
@@ -0,0 +1,31 @@
+import { isValidValueForSegment } from '.';
+
+describe('packages/date-picker/utils/isValidSegmentValue', () => {
+  test('day', () => {
+    expect(isValidValueForSegment('day', '1')).toBe(true);
+    expect(isValidValueForSegment('day', '15')).toBe(true);
+    expect(isValidValueForSegment('day', '31')).toBe(true);
+
+    expect(isValidValueForSegment('day', '0')).toBe(false);
+    expect(isValidValueForSegment('day', '32')).toBe(false);
+  });
+
+  test('month', () => {
+    expect(isValidValueForSegment('month', '1')).toBe(true);
+    expect(isValidValueForSegment('month', '9')).toBe(true);
+    expect(isValidValueForSegment('month', '12')).toBe(true);
+
+    expect(isValidValueForSegment('month', '0')).toBe(false);
+    expect(isValidValueForSegment('month', '28')).toBe(false);
+  });
+
+  test('year', () => {
+    expect(isValidValueForSegment('year', '1970')).toBe(true);
+    expect(isValidValueForSegment('year', '2000')).toBe(true);
+    expect(isValidValueForSegment('year', '2038')).toBe(true);
+
+    expect(isValidValueForSegment('year', '200')).toBe(false);
+    expect(isValidValueForSegment('year', '1945')).toBe(false);
+    expect(isValidValueForSegment('year', '2048')).toBe(false);
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
index d0b18a86de..9f7cb12728 100644
--- a/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
@@ -1,11 +1,20 @@
 import { DateSegmentsState } from '../../hooks';
-import { isValidSegment } from '../isValidSegment';
+import { isValidSegmentName, isValidSegmentValue } from '../isValidSegment';
+import { isValidValueForSegment } from '../isValidValueForSegment';
 
 /** Constructs a date object in UTC from day, month, year segments */
 export const newDateFromSegments = (
   segments: DateSegmentsState,
 ): Date | undefined => {
-  if (segments && Object.values(segments).every(isValidSegment)) {
+  if (
+    segments &&
+    Object.entries(segments).every(
+      ([key, value]) =>
+        isValidSegmentName(key) &&
+        isValidSegmentValue(value) &&
+        isValidValueForSegment(key, value),
+    )
+  ) {
     const { day, month, year } = segments;
     return new Date(Date.UTC(Number(year), Number(month) - 1, Number(day)));
   }
diff --git a/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
index c3f5c475f7..e58c0882c6 100644
--- a/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
@@ -3,9 +3,9 @@ import { newDateFromSegments } from '.';
 describe('packages/date=picker/utils/newDateFromSegments', () => {
   test('returns the date in UTC', () => {
     const newDate = newDateFromSegments({
-      day: 1,
-      month: 1,
-      year: 2023,
+      day: '1',
+      month: '1',
+      year: '2023',
     });
     expect(newDate?.toISOString()).toEqual('2023-01-01T00:00:00.000Z');
   });
@@ -13,8 +13,8 @@ describe('packages/date=picker/utils/newDateFromSegments', () => {
   test('returns undefined if any segment is undefined', () => {
     const newDate = newDateFromSegments({
       day: undefined,
-      month: 1,
-      year: 2023,
+      month: '1',
+      year: '2023',
     });
 
     expect(newDate).toBeUndefined();
diff --git a/yarn.lock b/yarn.lock
index c0eba1ac83..1507f85828 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2274,27 +2274,6 @@
     lodash "^4.17.21"
     prop-types "^15.7.2"
 
-"@leafygreen-ui/lib@^12.0.0":
-  version "12.0.0"
-  resolved "https://registry.yarnpkg.com/@leafygreen-ui/lib/-/lib-12.0.0.tgz#1ab22c541435e6c0060e21d7097dd65892da24a1"
-  integrity sha512-nhaxi4oBesnizxO0YK7XwcmiLL9U5QuN7lkZdWGDdmoJgNNL+aRju4W5vmZc7vcazSHfr3gAL+NFAGaAuopyRA==
-  dependencies:
-    "@storybook/csf" "^0.1.0"
-    lodash "^4.17.21"
-    prop-types "^15.7.2"
-
-"@leafygreen-ui/typography@^17.0.0":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/@leafygreen-ui/typography/-/typography-17.0.2.tgz#39b984d6725dbe38e191ac3cf383e77fd7cd2501"
-  integrity sha512-wx+kk5VNMOCTenrIG2AcgAKHt9TiLhSTirZARv0J6l4VOgnO+Mkbh3sqd4mk0EOBCAFmsBR3WqwQh00JXU8Htw==
-  dependencies:
-    "@leafygreen-ui/emotion" "^4.0.7"
-    "@leafygreen-ui/icon" "^11.22.2"
-    "@leafygreen-ui/lib" "^12.0.0"
-    "@leafygreen-ui/palette" "^4.0.7"
-    "@leafygreen-ui/polymorphic" "^1.3.6"
-    "@leafygreen-ui/tokens" "^2.1.4"
-
 "@manypkg/find-root@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@manypkg/find-root/-/find-root-1.1.0.tgz#a62d8ed1cd7e7d4c11d9d52a8397460b5d4ad29f"

From 0c323bdf4fcbed0ffada28d546d506f6193bc1ad Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 31 Oct 2023 16:03:04 -0400
Subject: [PATCH 262/351] Update getRelativeSegment.spec.tsx

---
 .../utils/getRelativeSegment/getRelativeSegment.spec.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
index b1983f48e6..eb1292d296 100644
--- a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
+++ b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
@@ -91,7 +91,7 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
 
   test('last = day', () => {
     expect(
-      getRelativeSegment('first', {
+      getRelativeSegment('last', {
         segment: segmentRefs.year,
         formatParts,
         segmentRefs,

From 9d47c70828c15e135e3c38be18dffc3bd933ae5c Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Wed, 1 Nov 2023 16:26:31 -0400
Subject: [PATCH 263/351] LG-3699, LG-3723: DP keyboard interactions [WIP]
 (#2052)

* WIP

* comments

* update comments

* WIP test

* bump lib

* WIP test

* passing test

* comments

* remove param

* clean up
---
 .changeset/late-ducks-jump.md                 |   6 +
 .../src/DatePicker/DatePicker.spec.tsx        |  44 +++++
 .../DatePickerMenu/DatePickerMenu.tsx         |  11 +-
 .../DatePickerMenuHeader/index.tsx            | 184 ++++++++++--------
 .../Calendar/CalendarCell/CalendarCell.tsx    |   6 +-
 .../components/MenuWrapper/MenuWrapper.tsx    |   8 +-
 .../src/PopoverContext.spec.tsx               |   6 +-
 packages/popover/src/Popover.tsx              |   2 +-
 8 files changed, 178 insertions(+), 89 deletions(-)
 create mode 100644 .changeset/late-ducks-jump.md

diff --git a/.changeset/late-ducks-jump.md b/.changeset/late-ducks-jump.md
new file mode 100644
index 0000000000..14841b4b10
--- /dev/null
+++ b/.changeset/late-ducks-jump.md
@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/popover': patch
+---
+
+
+Uses `onEnter` in favor of `onEntering` callback in `<Transition/>` since `OnEntering` does not fire inside tests
\ No newline at end of file
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 800f43fe4a..e558c6b7b3 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -631,6 +631,28 @@ describe('packages/date-picker', () => {
           await waitForElementToBeRemoved(menuContainerEl);
           expect(menuContainerEl).not.toBeInTheDocument();
         });
+
+        describe('chevron', () => {
+          test('if left chevron is focused, does not close the menu', async () => {
+            const { openMenu, getMenuElements } = renderDatePicker();
+            const { leftChevron } = openMenu();
+            tabNTimes(5);
+            expect(leftChevron).toHaveFocus();
+            userEvent.keyboard('{enter}');
+            const { menuContainerEl } = getMenuElements();
+            expect(menuContainerEl).toBeInTheDocument();
+          });
+
+          test('if right chevron is focused, does not close the menu', async () => {
+            const { openMenu, getMenuElements } = renderDatePicker();
+            const { rightChevron } = openMenu();
+            tabNTimes(8);
+            expect(rightChevron).toHaveFocus();
+            userEvent.keyboard('{enter}');
+            const { menuContainerEl } = getMenuElements();
+            expect(menuContainerEl).toBeInTheDocument();
+          });
+        });
       });
 
       describe('Space key', () => {
@@ -707,6 +729,28 @@ describe('packages/date-picker', () => {
           userEvent.keyboard('{escape}');
           expect(handleValidation).toHaveBeenCalledWith(undefined);
         });
+
+        test('does not close the main menu if a select menu is open and focus is in the select menu', async () => {
+          const { openMenu, queryAllByRole, findAllByRole } =
+            renderDatePicker();
+          const { monthSelect, menuContainerEl } = openMenu();
+
+          monthSelect?.focus();
+          expect(monthSelect).toHaveFocus();
+          userEvent.keyboard('{enter}');
+          userEvent.keyboard('{arrowdown}');
+          const options = await findAllByRole('option');
+          const firstOption = options[0];
+          expect(firstOption).toHaveFocus();
+          const listBoxes = queryAllByRole('listbox');
+          expect(listBoxes).toHaveLength(2);
+          const selectMenu = listBoxes[1];
+          userEvent.keyboard('{escape}');
+          await waitFor(() => {
+            expect(menuContainerEl).toBeInTheDocument();
+            expect(selectMenu).not.toBeInTheDocument();
+          });
+        });
       });
 
       /**
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 329d5a13aa..aaeb6e8def 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -9,9 +9,12 @@ import React, {
 } from 'react';
 import { addDays, subDays } from 'date-fns';
 
-import { useDynamicRefs, usePrevious } from '@leafygreen-ui/hooks';
+import {
+  useDynamicRefs,
+  useForwardedRef,
+  usePrevious,
+} from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
-import { useForwardedRef } from '@leafygreen-ui/select/src/utils';
 import { spacing } from '@leafygreen-ui/tokens';
 
 import {
@@ -160,7 +163,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       }
     };
 
-    /** Called on any keydown within the menu element */
+    /** Called on any keydown within the CalendarGrid element */
     const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {
       const { key } = e;
       const highlightStart = highlight || value || today;
@@ -253,6 +256,8 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
             ref={headerRef}
             month={month}
             setMonth={updateMonth}
+            handleValidation={handleValidation}
+            value={value}
           />
         </div>
       </MenuWrapper>
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index 80b4b4a4e3..af8027f301 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -1,24 +1,31 @@
-import React, { forwardRef } from 'react';
+import React, {
+  forwardRef,
+  KeyboardEventHandler,
+  MouseEventHandler,
+} from 'react';
 import { isBefore } from 'date-fns';
 import range from 'lodash/range';
 
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
+import { usePopoverContext } from '@leafygreen-ui/leafygreen-provider';
+import { keyMap } from '@leafygreen-ui/lib';
 import { Option, Select } from '@leafygreen-ui/select';
 
 import { useDatePickerContext } from '../../../shared/components/DatePickerContext';
 import { Months, selectElementProps } from '../../../shared/constants';
 import { isSameUTCMonth, setUTCMonth, setUTCYear } from '../../../shared/utils';
+import { DatePickerProps } from '../../DatePicker.types';
 import {
   menuHeaderSelectContainerStyles,
   menuHeaderStyles,
   selectInputWidthStyles,
 } from '../DatePickerMenu.styles';
 
-interface DatePickerMenuHeaderProps {
+type DatePickerMenuHeaderProps = {
   month: Date;
   setMonth: (newMonth: Date) => void;
-}
+} & Pick<DatePickerProps, 'handleValidation' | 'value'>;
 
 /**
  * A helper component for DatePickerMenu.
@@ -28,86 +35,109 @@ interface DatePickerMenuHeaderProps {
 export const DatePickerMenuHeader = forwardRef<
   HTMLDivElement,
   DatePickerMenuHeaderProps
->(({ month, setMonth }: DatePickerMenuHeaderProps, fwdRef) => {
-  const { min, max, isInRange } = useDatePickerContext();
+>(
+  (
+    { month, setMonth, value, handleValidation }: DatePickerMenuHeaderProps,
+    fwdRef,
+  ) => {
+    const { min, max, isInRange, setOpen } = useDatePickerContext();
+    const { isPopoverOpen } = usePopoverContext();
 
-  const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
+    const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
 
-  const updateMonth = (newMonth: Date) => {
-    // TODO: may need to update this function to check if the months are in range
-    // (could cause errors when the min date is near the end of the month)
-    if (isInRange(newMonth)) {
-      setMonth(newMonth);
-    } else if (isBefore(newMonth, min)) {
-      // if the selected month is not in range,
-      // set the month to the first or last possible month
-      setMonth(min);
-    } else {
-      setMonth(max);
-    }
-  };
+    const updateMonth = (newMonth: Date) => {
+      // TODO: may need to update this function to check if the months are in range
+      // (could cause errors when the min date is near the end of the month)
+      if (isInRange(newMonth)) {
+        setMonth(newMonth);
+      } else if (isBefore(newMonth, min)) {
+        // if the selected month is not in range,
+        // set the month to the first or last possible month
+        setMonth(min);
+      } else {
+        setMonth(max);
+      }
+    };
 
-  const prevMonth = month.getUTCMonth() - 1;
-  const nextMonth = month.getUTCMonth() + 1;
+    /**
+     * Calls the `updateMonth` helper with the appropriate month when a Chevron is clicked
+     */
+    const handleChevronClick =
+      (dir: 'left' | 'right'): MouseEventHandler<HTMLButtonElement> =>
+      e => {
+        e.stopPropagation();
+        e.preventDefault();
+        const increment = dir === 'left' ? -1 : 1;
+        const newMonthIndex = month.getUTCMonth() + increment;
+        const newMonth = setUTCMonth(month, newMonthIndex);
+        updateMonth(newMonth);
+      };
 
-  return (
-    <div ref={fwdRef} className={menuHeaderStyles}>
-      <IconButton
-        aria-label="Previous month"
-        disabled={isSameUTCMonth(month, min)}
-        onClick={() => {
-          const newMonth = setUTCMonth(month, prevMonth);
-          updateMonth(newMonth);
-        }}
-      >
-        <Icon glyph="ChevronLeft" />
-      </IconButton>
-      <div className={menuHeaderSelectContainerStyles}>
-        <Select
-          {...selectElementProps}
-          aria-label="Select month"
-          value={month.getUTCMonth().toString()}
-          onChange={m => {
-            const newMonth = setUTCMonth(month, Number(m));
-            updateMonth(newMonth);
-          }}
-          className={selectInputWidthStyles}
+    /**
+     * Ensure that the date picker menu will not close when a select menu is open, focus is inside the select menu, and the ESC key is pressed.
+     */
+    const handleEcsPress: KeyboardEventHandler<HTMLDivElement> = e => {
+      // `isPopoverOpen` updated value is not accessible in `<DatePickerMenu>` since the `<PopoverProvider>` is inside `<MenuWrapper>`
+      if (!isPopoverOpen && e.key === keyMap.Escape) {
+        setOpen(false);
+        handleValidation?.(value);
+      }
+    };
+
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div ref={fwdRef} className={menuHeaderStyles} onKeyDown={handleEcsPress}>
+        <IconButton
+          aria-label="Previous month"
+          disabled={isSameUTCMonth(month, min)}
+          onClick={handleChevronClick('left')}
         >
-          {Months.map((m, i) => (
-            <Option value={i.toString()} key={m.short}>
-              {m.short}
-            </Option>
-          ))}
-        </Select>
-        <Select
-          {...selectElementProps}
-          aria-label="Select year"
-          value={month.getUTCFullYear().toString()}
-          onChange={y => {
-            const newMonth = setUTCYear(month, Number(y));
-            updateMonth(newMonth);
-          }}
-          className={selectInputWidthStyles}
+          <Icon glyph="ChevronLeft" />
+        </IconButton>
+        <div className={menuHeaderSelectContainerStyles}>
+          <Select
+            {...selectElementProps}
+            aria-label="Select month"
+            value={month.getUTCMonth().toString()}
+            onChange={m => {
+              const newMonth = setUTCMonth(month, Number(m));
+              updateMonth(newMonth);
+            }}
+            className={selectInputWidthStyles}
+          >
+            {Months.map((m, i) => (
+              <Option value={i.toString()} key={m.short}>
+                {m.short}
+              </Option>
+            ))}
+          </Select>
+          <Select
+            {...selectElementProps}
+            aria-label="Select year"
+            value={month.getUTCFullYear().toString()}
+            onChange={y => {
+              const newMonth = setUTCYear(month, Number(y));
+              updateMonth(newMonth);
+            }}
+            className={selectInputWidthStyles}
+          >
+            {yearOptions.map(y => (
+              <Option value={y.toString()} key={y}>
+                {y}
+              </Option>
+            ))}
+          </Select>
+        </div>
+        <IconButton
+          aria-label="Next month"
+          disabled={isSameUTCMonth(month, max)}
+          onClick={handleChevronClick('right')}
         >
-          {yearOptions.map(y => (
-            <Option value={y.toString()} key={y}>
-              {y}
-            </Option>
-          ))}
-        </Select>
+          <Icon glyph="ChevronRight" />
+        </IconButton>
       </div>
-      <IconButton
-        aria-label="Next month"
-        disabled={isSameUTCMonth(month, max)}
-        onClick={() => {
-          const newMonth = setUTCMonth(month, nextMonth);
-          updateMonth(newMonth);
-        }}
-      >
-        <Icon glyph="ChevronRight" />
-      </IconButton>
-    </div>
-  );
-});
+    );
+  },
+);
 
 DatePickerMenuHeader.displayName = 'DatePickerMenuHeader';
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
index b387822500..94db3d5111 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
@@ -65,8 +65,8 @@ export const CalendarCell = React.forwardRef<
       }
     };
 
-    // td does not trigger `onClick` on enter/space so we have to listen on key up
-    const handleKeyUp: KeyboardEventHandler<HTMLTableCellElement> = e => {
+    // td does not trigger `onClick` on enter/space so we have to listen on key down
+    const handleKeyDown: KeyboardEventHandler<HTMLTableCellElement> = e => {
       if (!isDisabled && (e.key === keyMap.Enter || e.key === keyMap.Space)) {
         (onClick as KeyboardEventHandler<HTMLTableCellElement>)?.(e);
         // TODO: add focus back to input
@@ -104,7 +104,7 @@ export const CalendarCell = React.forwardRef<
           className,
         )}
         onClick={handleClick}
-        onKeyUp={handleKeyUp}
+        onKeyDown={handleKeyDown}
         onFocus={handleFocus}
         {...rest}
       >
diff --git a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
index 43e239c733..cb78742cc5 100644
--- a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
+++ b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
@@ -1,7 +1,10 @@
 import React, { forwardRef } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import {
+  PopoverProvider,
+  useDarkMode,
+} from '@leafygreen-ui/leafygreen-provider';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 import Popover, { PopoverProps } from '@leafygreen-ui/popover';
 
@@ -26,7 +29,8 @@ export const MenuWrapper = forwardRef<
         className={cx(menuStyles[theme], className)}
         {...props}
       >
-        {children}
+        {/* Adding the provider inside of <Popover /> to keep track of only the select menus inside this popover */}
+        <PopoverProvider>{children}</PopoverProvider>
       </Popover>
     );
   },
diff --git a/packages/leafygreen-provider/src/PopoverContext.spec.tsx b/packages/leafygreen-provider/src/PopoverContext.spec.tsx
index 756e77a449..b591acfade 100644
--- a/packages/leafygreen-provider/src/PopoverContext.spec.tsx
+++ b/packages/leafygreen-provider/src/PopoverContext.spec.tsx
@@ -53,7 +53,7 @@ describe('packages/leafygreen-provider/PopoverContext', () => {
   });
 });
 
-function renderUsePopoverContext() {
+function renderTestComponent() {
   const utils = render(<TestContextComponent />);
   const testChild = utils.getByTestId(childTestID);
   return { ...utils, testChild };
@@ -61,12 +61,12 @@ function renderUsePopoverContext() {
 
 describe('usePopoverContext', () => {
   test('when child is not a descendent of PopoverProvider, isPopoverOpen is false', () => {
-    const { testChild } = renderUsePopoverContext();
+    const { testChild } = renderTestComponent();
     expect(testChild.textContent).toBe('false');
   });
 
   test('when child is not a descendent of PopoverProvider, isPopoverOpen is false when setIsPopoverOpen sets isPopoverOpen to true', () => {
-    const { testChild, getByTestId } = renderUsePopoverContext();
+    const { testChild, getByTestId } = renderTestComponent();
 
     // The button's click handler fires setIsPopoverOpen(true)
     fireEvent.click(getByTestId(buttonTestId));
diff --git a/packages/popover/src/Popover.tsx b/packages/popover/src/Popover.tsx
index 1fa7c6d132..e8df1e2e1d 100644
--- a/packages/popover/src/Popover.tsx
+++ b/packages/popover/src/Popover.tsx
@@ -279,7 +279,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         mountOnEnter
         unmountOnExit
         appear
-        onEntered={() => setIsPopoverOpen(true)}
+        onEnter={() => setIsPopoverOpen(true)}
         onExit={() => setIsPopoverOpen(false)}
       >
         {state => (

From d9a44c98534540efc0b8ed24d45fa33357a2ac1c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 1 Nov 2023 16:57:40 -0400
Subject: [PATCH 264/351] Update types.ts

---
 packages/date-picker/src/shared/types.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/date-picker/src/shared/types.ts b/packages/date-picker/src/shared/types.ts
index 7949caf16b..c569cbf4b8 100644
--- a/packages/date-picker/src/shared/types.ts
+++ b/packages/date-picker/src/shared/types.ts
@@ -36,12 +36,7 @@ export interface BaseDatePickerProps extends DarkModeProps {
    *
    * @default 'iso8601'
    */
-  dateFormat?:
-    | 'en-US'
-    | 'en-UK'
-    | 'iso8601'
-    | `${string}-${string}`
-    | Intl.Locale;
+  dateFormat?: 'en-US' | 'en-UK' | 'iso8601' | `${string}-${string}`;
 
   /**
    * A valid IANA timezone string, or UTC offset.

From 6c88db4ef91c71a4beecfc098dc988d997a6584e Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Mon, 6 Nov 2023 14:14:20 -0500
Subject: [PATCH 265/351] DatePicker: Highlight, tab & focus (#2063)

* updates tab order tests

* test default focus on menu open

* SingleDateContext

* converts tests & stories to use context

* add refs to context

* focus highlighted cell on cal button click

* updates highlight cell focus logic

* fixes failing tests

* update context props api

* fix tests & stories - provider api

* Adds new workflow tests

* set focus on transition end

* Popover lifecycle callbacks [LG-3734] (#2067)

* LG-3699, LG-3723: DP keyboard interactions [WIP] (#2052)

* WIP

* comments

* update comments

* WIP test

* bump lib

* WIP test

* passing test

* comments

* remove param

* clean up

* creates utilities

* Adds popover Transition lifecycle hooks

* Create quiet-eggs-carry.md

* mv Popover content

* mv PopoverContext content

* set isPopoverOpen in onEntered & onExited CBs

* Update PopoverContext.spec.tsx

* Update Popover.spec.tsx

* Update Popover.spec.tsx

* use transitionDuration in Popover timeout

* extends div props in Popover

* user renderHook from RTL/react-hooks

* adds type specs

* use PopoverComponentProps

* Update package.json

* Update Popover.spec.tsx

* Update Popover.tsx

---------

Co-authored-by: Shaneeza <shaneeza.ali@mongodb.com>

* updates tab order tests

* test default focus on menu open

* SingleDateContext

* converts tests & stories to use context

* add refs to context

* focus highlighted cell on cal button click

* updates highlight cell focus logic

* fixes failing tests

* update context props api

* fix tests & stories - provider api

* Adds new workflow tests

* set focus on transition end

* fix async tests. Move esc key handling.

* use fireEvent.transitionEnd in tests.

* setMonth on value change

* update to use async findMenuElements

* rename to queryCellByDate

* adds waitForMenuToOpen

* adds `onExited` handler fired when menu closed

* adds test cases to calendar cell

* close menu on click/enter press of current value

* describe.each

* add side effects fn

* use single open/close/toggle setters

* update getInitialHighlight logic

* fix ts

---------

Co-authored-by: Shaneeza <shaneeza.ali@mongodb.com>
---
 .../src/DatePicker/DatePicker.spec.tsx        | 748 ++++++++++--------
 .../src/DatePicker/DatePicker.stories.tsx     |   6 +-
 .../src/DatePicker/DatePicker.testutils.tsx   | 210 +++--
 .../date-picker/src/DatePicker/DatePicker.tsx |  13 +-
 .../DatePickerComponent.tsx                   | 126 ++-
 .../DatePickerComponent.types.ts              |   9 +-
 .../DatePickerInput/DatePickerInput.spec.tsx  |  23 +-
 .../DatePickerInput.stories.tsx               |  31 +-
 .../DatePickerInput/DatePickerInput.tsx       |  48 +-
 .../DatePickerInput/DatePickerInput.types.ts  |   7 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 186 +++--
 .../DatePickerMenu/DatePickerMenu.stories.tsx |  45 +-
 .../DatePickerMenu/DatePickerMenu.tsx         | 120 +--
 .../DatePickerMenu/DatePickerMenu.types.ts    |  10 +-
 .../DatePickerMenuHeader/index.tsx            | 187 +++--
 .../SingleDateContext/SingleDateContext.tsx   | 180 +++++
 .../SingleDateContext.types.ts                |  90 +++
 .../src/DatePicker/SingleDateContext/index.ts |   5 +
 .../useDatePickerComponentRefs.ts             |  25 +
 .../getInitialHighlight.spec.ts               |  18 +
 .../utils/getInitialHighlight/index.ts        |  10 +
 .../getRelativeSegment.spec.tsx               | 203 +++--
 .../utils/getRelativeSegment/index.ts         |  11 +-
 .../CalendarCell/CalendarCell.spec.tsx        | 165 ++--
 .../CalendarCell/CalendarCell.styles.ts       |   6 +-
 .../CalendarGrid/CalendarGrid.stories.tsx     |  14 +-
 .../DateFormField/DateFormField.stories.tsx   |   4 +-
 .../DateInput/DateFormField/DateFormField.tsx |  12 +-
 .../DateFormField/DateFormField.types.ts      |   3 +
 .../DateInputBox/DateInputBox.spec.tsx        |   4 +-
 .../DateInputBox/DateInputBox.stories.tsx     |   6 +-
 .../DatePickerContext/DatePickerContext.tsx   |   8 +-
 .../DatePickerContext.types.ts                |   6 +-
 .../components/MenuWrapper/MenuWrapper.tsx    |  12 +-
 .../shared/components/MenuWrapper/index.ts    |   1 +
 .../src/shared/components/index.ts            |   2 +-
 packages/date-picker/src/shared/types.ts      |   2 +-
 .../utils/getISODate/getISODate.spec.ts       |  14 +
 .../src/shared/utils/getISODate/index.ts      |  14 +
 .../date-picker/src/shared/utils/index.ts     |   1 +
 40 files changed, 1656 insertions(+), 929 deletions(-)
 create mode 100644 packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
 create mode 100644 packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
 create mode 100644 packages/date-picker/src/DatePicker/SingleDateContext/index.ts
 create mode 100644 packages/date-picker/src/DatePicker/SingleDateContext/useDatePickerComponentRefs.ts
 create mode 100644 packages/date-picker/src/DatePicker/utils/getInitialHighlight/getInitialHighlight.spec.ts
 create mode 100644 packages/date-picker/src/DatePicker/utils/getInitialHighlight/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/getISODate/getISODate.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/getISODate/index.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index e558c6b7b3..3a8a4836cd 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1,12 +1,14 @@
-/* eslint-disable jest/no-disabled-tests */
 import React from 'react';
 import {
+  fireEvent,
+  // prettyDOM,
   render,
   waitFor,
   waitForElementToBeRemoved,
+  within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { range } from 'lodash';
+import { addDays, subDays } from 'date-fns';
 
 import { Month } from '../shared/constants';
 import { newUTC } from '../shared/utils';
@@ -15,7 +17,11 @@ import {
   tabNTimes,
 } from '../shared/utils/testutils';
 
-import { renderDatePicker } from './DatePicker.testutils';
+import {
+  expectedTabStopLabels,
+  findTabStopElementMap,
+  renderDatePicker,
+} from './DatePicker.testutils';
 import { DatePicker } from '.';
 
 const testToday = newUTC(2023, Month.December, 26);
@@ -29,133 +35,135 @@ describe('packages/date-picker', () => {
   describe('Rendering', () => {
     /// Note: Many rendering tests should be handled by Chromatic
 
-    test('renders label', () => {
-      const { getByText } = render(<DatePicker label="Label" />);
-      const label = getByText('Label');
-      expect(label).toBeInTheDocument();
-    });
+    describe('Input', () => {
+      test('renders label', () => {
+        const { getByText } = render(<DatePicker label="Label" />);
+        const label = getByText('Label');
+        expect(label).toBeInTheDocument();
+      });
 
-    test('renders description', () => {
-      const { getByText } = render(
-        <DatePicker label="Label" description="Description" />,
-      );
-      const description = getByText('Description');
-      expect(description).toBeInTheDocument();
-    });
+      test('renders description', () => {
+        const { getByText } = render(
+          <DatePicker label="Label" description="Description" />,
+        );
+        const description = getByText('Description');
+        expect(description).toBeInTheDocument();
+      });
 
-    test('spreads rest to formField', () => {
-      const { getByTestId } = render(
-        <DatePicker label="Label" data-testid="lg-date-picker" />,
-      );
-      const formField = getByTestId('lg-date-picker');
-      expect(formField).toBeInTheDocument();
-    });
+      test('spreads rest to formField', () => {
+        const { getByTestId } = render(
+          <DatePicker label="Label" data-testid="lg-date-picker" />,
+        );
+        const formField = getByTestId('lg-date-picker');
+        expect(formField).toBeInTheDocument();
+      });
 
-    test('formField contains label & input elements', () => {
-      const { getByTestId, getByRole } = render(
-        <DatePicker label="Label" data-testid="lg-date-picker" />,
-      );
-      const formField = getByTestId('lg-date-picker');
-      const inputContainer = getByRole('combobox');
-      expect(formField.querySelector('label')).toBeInTheDocument();
-      expect(formField.querySelector('label')).toHaveTextContent('Label');
-      expect(inputContainer).toBeInTheDocument();
-    });
+      test('formField contains label & input elements', () => {
+        const { getByTestId, getByRole } = render(
+          <DatePicker label="Label" data-testid="lg-date-picker" />,
+        );
+        const formField = getByTestId('lg-date-picker');
+        const inputContainer = getByRole('combobox');
+        expect(formField.querySelector('label')).toBeInTheDocument();
+        expect(formField.querySelector('label')).toHaveTextContent('Label');
+        expect(inputContainer).toBeInTheDocument();
+      });
 
-    test('renders 3 inputs', () => {
-      const { dayInput, monthInput, yearInput } = renderDatePicker();
-      expect(dayInput).toBeInTheDocument();
-      expect(monthInput).toBeInTheDocument();
-      expect(yearInput).toBeInTheDocument();
-    });
+      test('renders 3 inputs', () => {
+        const { dayInput, monthInput, yearInput } = renderDatePicker();
+        expect(dayInput).toBeInTheDocument();
+        expect(monthInput).toBeInTheDocument();
+        expect(yearInput).toBeInTheDocument();
+      });
 
-    test('renders `value` prop', () => {
-      const { dayInput, monthInput, yearInput } = renderDatePicker({
-        value: new Date(Date.now()),
+      test('renders `value` prop', () => {
+        const { dayInput, monthInput, yearInput } = renderDatePicker({
+          value: new Date(Date.now()),
+        });
+        expect(dayInput.value).toEqual('26');
+        expect(monthInput.value).toEqual('12');
+        expect(yearInput.value).toEqual('2023');
       });
-      expect(dayInput.value).toEqual('26');
-      expect(monthInput.value).toEqual('12');
-      expect(yearInput.value).toEqual('2023');
-    });
 
-    test('renders `initialValue` prop', () => {
-      const { dayInput, monthInput, yearInput } = renderDatePicker({
-        initialValue: new Date(Date.now()),
+      test('renders `initialValue` prop', () => {
+        const { dayInput, monthInput, yearInput } = renderDatePicker({
+          initialValue: new Date(Date.now()),
+        });
+        expect(dayInput.value).toEqual('26');
+        expect(monthInput.value).toEqual('12');
+        expect(yearInput.value).toEqual('2023');
       });
-      expect(dayInput.value).toEqual('26');
-      expect(monthInput.value).toEqual('12');
-      expect(yearInput.value).toEqual('2023');
     });
 
     describe('Menu', () => {
-      test('menu is initially closed', () => {
-        const { getMenuElements } = renderDatePicker();
-        const { menuContainerEl } = getMenuElements();
+      test('menu is initially closed', async () => {
+        const { findMenuElements } = renderDatePicker();
+        const { menuContainerEl } = await findMenuElements();
         expect(menuContainerEl).not.toBeInTheDocument();
       });
 
       test('menu is initially open when rendered with `initialOpen`', async () => {
-        const { getMenuElements } = renderDatePicker({ initialOpen: true });
-        const { menuContainerEl } = getMenuElements();
+        const { findMenuElements } = renderDatePicker({ initialOpen: true });
+        const { menuContainerEl } = await findMenuElements();
         await waitFor(() => expect(menuContainerEl).toBeInTheDocument());
       });
 
-      test('if no value is set, menu opens to current month', () => {
+      test('if no value is set, menu opens to current month', async () => {
         const { openMenu } = renderDatePicker();
-        const { calendarGrid, monthSelect, yearSelect } = openMenu();
+        const { calendarGrid, monthSelect, yearSelect } = await openMenu();
         expect(calendarGrid).toHaveAttribute('aria-label', 'December 2023');
         expect(monthSelect).toHaveValue(Month.December.toString());
         expect(yearSelect).toHaveValue('2023');
       });
 
-      test('if a value is set, menu opens to the month of that value', () => {
+      test('if a value is set, menu opens to the month of that value', async () => {
         const { openMenu } = renderDatePicker({
           value: new Date(Date.UTC(2023, Month.March, 10)),
         });
-        const { calendarGrid, monthSelect, yearSelect } = openMenu();
+        const { calendarGrid, monthSelect, yearSelect } = await openMenu();
         expect(calendarGrid).toHaveAttribute('aria-label', 'March 2023');
         expect(monthSelect).toHaveValue(Month.March.toString());
         expect(yearSelect).toHaveValue('2023');
       });
 
-      test('renders the appropriate number of cells', () => {
+      test('renders the appropriate number of cells', async () => {
         const { openMenu } = renderDatePicker({
           value: new Date(Date.UTC(2024, Month.February, 14)),
         });
-        const { calendarCells } = openMenu();
+        const { calendarCells } = await openMenu();
         expect(calendarCells).toHaveLength(29);
       });
 
       describe('Chevrons', () => {
-        test('Left is disabled if prev. month is entirely out of range', () => {
+        test('Left is disabled if prev. month is entirely out of range', async () => {
           const { openMenu } = renderDatePicker({
             min: new Date(Date.UTC(2023, Month.December, 1)),
           });
-          const { leftChevron } = openMenu();
+          const { leftChevron } = await openMenu();
           expect(leftChevron).toHaveAttribute('aria-disabled', 'true');
         });
 
-        test('Right is disabled if next month is entirely out of range', () => {
+        test('Right is disabled if next month is entirely out of range', async () => {
           const { openMenu } = renderDatePicker({
             max: new Date(Date.UTC(2023, Month.December, 31)),
           });
-          const { rightChevron } = openMenu();
+          const { rightChevron } = await openMenu();
           expect(rightChevron).toHaveAttribute('aria-disabled', 'true');
         });
 
-        test('Left is not disabled if only part of prev. month is in range', () => {
+        test('Left is not disabled if only part of prev. month is in range', async () => {
           const { openMenu } = renderDatePicker({
             min: new Date(Date.UTC(2023, Month.November, 29)),
           });
-          const { leftChevron } = openMenu();
+          const { leftChevron } = await openMenu();
           expect(leftChevron).toHaveAttribute('aria-disabled', 'false');
         });
 
-        test('Right is not disabled if only part of next month is in of range', () => {
+        test('Right is not disabled if only part of next month is in of range', async () => {
           const { openMenu } = renderDatePicker({
             max: new Date(Date.UTC(2024, Month.January, 2)),
           });
-          const { rightChevron } = openMenu();
+          const { rightChevron } = await openMenu();
           expect(rightChevron).toHaveAttribute('aria-disabled', 'false');
         });
       });
@@ -165,10 +173,10 @@ describe('packages/date-picker', () => {
   describe('Interaction', () => {
     describe('Mouse interaction', () => {
       describe('Clicking the input', () => {
-        test('opens the menu', () => {
-          const { inputContainer, getMenuElements } = renderDatePicker();
+        test('opens the menu', async () => {
+          const { inputContainer, findMenuElements } = renderDatePicker();
           userEvent.click(inputContainer);
-          const { menuContainerEl } = getMenuElements();
+          const { menuContainerEl } = await findMenuElements();
           expect(menuContainerEl).toBeInTheDocument();
         });
 
@@ -202,124 +210,152 @@ describe('packages/date-picker', () => {
       });
 
       describe('Clicking the Calendar button', () => {
-        test('toggles the menu open and close', async () => {
-          const { calendarButton, getMenuElements } = renderDatePicker();
+        test('toggles the menu open and closed', async () => {
+          const { calendarButton, findMenuElements } = renderDatePicker();
           userEvent.click(calendarButton);
-          const { menuContainerEl } = getMenuElements();
+          const { menuContainerEl } = await findMenuElements();
           expect(menuContainerEl).toBeInTheDocument();
           userEvent.click(calendarButton);
           await waitFor(() => expect(menuContainerEl).not.toBeInTheDocument());
         });
 
         test('closes the menu when "initialOpen: true"', async () => {
-          const { calendarButton, getMenuElements } = renderDatePicker({
+          const { calendarButton, findMenuElements } = renderDatePicker({
             initialOpen: true,
           });
-          const { menuContainerEl } = getMenuElements();
+          const { menuContainerEl } = await findMenuElements();
           await waitFor(() => expect(menuContainerEl).toBeInTheDocument());
           userEvent.click(calendarButton);
           await waitFor(() => expect(menuContainerEl).not.toBeInTheDocument());
         });
+
+        test('focuses on the `today` cell by default', async () => {
+          const { calendarButton, findMenuElements, findByRole } =
+            renderDatePicker();
+          userEvent.click(calendarButton);
+          const menuContainerEl = await findByRole('listbox');
+          const { todayCell } = await findMenuElements();
+          // Manually fire the `transitionEnd` event. This is not fired automatically by JSDOM
+          fireEvent.transitionEnd(menuContainerEl!);
+          expect(todayCell).toHaveFocus();
+        });
+
+        test('focuses on the selected cell', async () => {
+          const value = newUTC(1994, Month.September, 10);
+          const { calendarButton, findMenuElements, findByRole } =
+            renderDatePicker({
+              value: value,
+            });
+          userEvent.click(calendarButton);
+          const menuContainerEl = await findByRole('listbox');
+          const { queryCellByDate } = await findMenuElements();
+          const valueCell = queryCellByDate(value);
+          // Manually fire the `transitionEnd` event. This is not fired automatically by JSDOM
+          fireEvent.transitionEnd(menuContainerEl!);
+          expect(valueCell).toHaveFocus();
+        });
       });
 
       describe('Clicking a Calendar cell', () => {
-        test('fires a change handler', () => {
+        test('fires a change handler', async () => {
           const onDateChange = jest.fn();
           const { openMenu } = renderDatePicker({
             onDateChange,
           });
-          const { calendarCells } = openMenu();
+          const { calendarCells } = await openMenu();
           const firstCell = calendarCells?.[0];
-          userEvent.click(firstCell);
+          userEvent.click(firstCell!);
           expect(onDateChange).toHaveBeenCalled();
         });
 
-        test('does nothing if the cell is out-of-range', () => {
+        test('does nothing if the cell is out-of-range', async () => {
           const onDateChange = jest.fn();
           const { openMenu } = renderDatePicker({
             onDateChange,
             value: new Date(Date.UTC(2023, Month.September, 15)),
             min: new Date(Date.UTC(2023, Month.September, 10)),
           });
-          const { calendarCells } = openMenu();
+          const { calendarCells } = await openMenu();
           const firstCell = calendarCells?.[0];
-          userEvent.click(firstCell, {}, { skipPointerEventsCheck: true });
+          userEvent.click(firstCell!, {}, { skipPointerEventsCheck: true });
           expect(firstCell).toHaveAttribute('aria-disabled', 'true');
           expect(onDateChange).not.toHaveBeenCalled();
         });
 
-        test('fires a validation handler', () => {
+        test('fires a validation handler', async () => {
           const handleValidation = jest.fn();
           const { openMenu } = renderDatePicker({
             handleValidation,
           });
-          const { calendarCells } = openMenu();
+          const { calendarCells } = await openMenu();
           const firstCell = calendarCells?.[0];
-          userEvent.click(firstCell);
+          userEvent.click(firstCell!);
           expect(handleValidation).toHaveBeenCalled();
         });
       });
 
       describe('Clicking a Chevron', () => {
         describe('Left', () => {
-          test('does not close the menu', () => {
+          test('does not close the menu', async () => {
             const { openMenu } = renderDatePicker();
-            const { leftChevron, menuContainerEl } = openMenu();
+            const { leftChevron, menuContainerEl } = await openMenu();
             userEvent.click(leftChevron!);
             expect(menuContainerEl).toBeInTheDocument();
           });
 
-          test('updates the displayed month to the previous', () => {
+          test('updates the displayed month to the previous', async () => {
             const { openMenu } = renderDatePicker({
               value: newUTC(2023, Month.December, 25),
             });
             const { leftChevron, monthSelect, yearSelect, calendarGrid } =
-              openMenu();
+              await openMenu();
             userEvent.click(leftChevron!);
             expect(calendarGrid).toHaveAttribute('aria-label', 'November 2023');
             expect(monthSelect).toHaveValue(Month.November.toString());
             expect(yearSelect).toHaveValue('2023');
           });
 
-          test('updates the displayed month to the previous, and updates year', () => {
+          test('updates the displayed month to the previous, and updates year', async () => {
             const { openMenu } = renderDatePicker({
               value: newUTC(2023, Month.January, 5),
             });
             const { leftChevron, monthSelect, yearSelect, calendarGrid } =
-              openMenu();
+              await openMenu();
             userEvent.click(leftChevron!);
             expect(calendarGrid).toHaveAttribute('aria-label', 'December 2022');
             expect(monthSelect).toHaveValue(Month.December.toString());
             expect(yearSelect).toHaveValue('2022');
           });
+
+          test.todo('does not move focus to the calendar cell');
         });
 
         describe('Right', () => {
-          test('does not close the menu', () => {
+          test('does not close the menu', async () => {
             const { openMenu } = renderDatePicker();
-            const { rightChevron, menuContainerEl } = openMenu();
+            const { rightChevron, menuContainerEl } = await openMenu();
             userEvent.click(rightChevron!);
             expect(menuContainerEl).toBeInTheDocument();
           });
 
-          test('updates the displayed month to the next', () => {
+          test('updates the displayed month to the next', async () => {
             const { openMenu } = renderDatePicker({
               value: newUTC(2023, Month.January, 5),
             });
             const { rightChevron, monthSelect, yearSelect, calendarGrid } =
-              openMenu();
+              await openMenu();
             userEvent.click(rightChevron!);
             expect(calendarGrid).toHaveAttribute('aria-label', 'February 2023');
             expect(monthSelect).toHaveValue(Month.February.toString());
             expect(yearSelect).toHaveValue('2023');
           });
 
-          test('updates the displayed month to the next and updates year', () => {
+          test('updates the displayed month to the next and updates year', async () => {
             const { openMenu } = renderDatePicker({
               value: newUTC(2023, Month.December, 26),
             });
             const { rightChevron, monthSelect, yearSelect, calendarGrid } =
-              openMenu();
+              await openMenu();
             userEvent.click(rightChevron!);
             expect(calendarGrid).toHaveAttribute('aria-label', 'January 2024');
             expect(monthSelect).toHaveValue(Month.January.toString());
@@ -329,9 +365,9 @@ describe('packages/date-picker', () => {
       });
 
       describe('Month select menu', () => {
-        test('menu opens over the calendar menu', () => {
+        test('menu opens over the calendar menu', async () => {
           const { openMenu, queryAllByRole } = renderDatePicker();
-          const { monthSelect, menuContainerEl } = openMenu();
+          const { monthSelect, menuContainerEl } = await openMenu();
           userEvent.click(monthSelect!);
           expect(menuContainerEl).toBeInTheDocument();
           const listBoxes = queryAllByRole('listbox');
@@ -340,7 +376,7 @@ describe('packages/date-picker', () => {
 
         test('selecting the month updates the calendar', async () => {
           const { openMenu, findAllByRole } = renderDatePicker();
-          const { monthSelect, calendarGrid } = openMenu();
+          const { monthSelect, calendarGrid } = await openMenu();
           userEvent.click(monthSelect!);
           const options = await findAllByRole('option');
           const Jan = options[0];
@@ -350,11 +386,11 @@ describe('packages/date-picker', () => {
 
         test('making a selection with enter does not close the datePicker menu', async () => {
           const { openMenu, findAllByRole } = renderDatePicker();
-          const { monthSelect, menuContainerEl } = openMenu();
+          const { monthSelect, menuContainerEl } = await openMenu();
           userEvent.click(monthSelect!);
           await findAllByRole('option');
           userEvent.keyboard('{arrowdown}');
-          userEvent.keyboard('{enter}');
+          userEvent.keyboard('[Enter]');
           await waitFor(() => {
             expect(menuContainerEl).toBeInTheDocument();
           });
@@ -362,9 +398,9 @@ describe('packages/date-picker', () => {
       });
 
       describe('Year select menu', () => {
-        test('menu opens over the calendar menu', () => {
+        test('menu opens over the calendar menu', async () => {
           const { openMenu, queryAllByRole } = renderDatePicker();
-          const { yearSelect, menuContainerEl } = openMenu();
+          const { yearSelect, menuContainerEl } = await openMenu();
           userEvent.click(yearSelect!);
           expect(menuContainerEl).toBeInTheDocument();
           const listBoxes = queryAllByRole('listbox');
@@ -375,7 +411,7 @@ describe('packages/date-picker', () => {
           const { openMenu, findAllByRole } = renderDatePicker({
             value: new Date(Date.UTC(2023, Month.December, 26)),
           });
-          const { yearSelect, calendarGrid } = openMenu();
+          const { yearSelect, calendarGrid } = await openMenu();
           userEvent.click(yearSelect!);
           const options = await findAllByRole('option');
           const _1970 = options[0];
@@ -386,11 +422,11 @@ describe('packages/date-picker', () => {
 
         test('making a selection with enter does not close the datePicker menu', async () => {
           const { openMenu, findAllByRole } = renderDatePicker();
-          const { yearSelect, menuContainerEl } = openMenu();
+          const { yearSelect, menuContainerEl } = await openMenu();
           userEvent.click(yearSelect!);
           await findAllByRole('option');
           userEvent.keyboard('{arrowdown}');
-          userEvent.keyboard('{enter}');
+          userEvent.keyboard('[Enter]');
           await waitFor(() => {
             expect(menuContainerEl).toBeInTheDocument();
           });
@@ -400,18 +436,25 @@ describe('packages/date-picker', () => {
       describe('Clicking backdrop', () => {
         test('closes the menu', async () => {
           const { openMenu, container } = renderDatePicker();
-          const { menuContainerEl } = openMenu();
+          const { menuContainerEl } = await openMenu();
           userEvent.click(container.parentElement!);
           await waitForElementToBeRemoved(menuContainerEl);
         });
 
-        test('does not fire a change handler', () => {
+        test('does not fire a change handler', async () => {
           const onDateChange = jest.fn();
           const { openMenu, container } = renderDatePicker({ onDateChange });
-          openMenu();
+          await openMenu();
           userEvent.click(container.parentElement!);
           expect(onDateChange).not.toHaveBeenCalled();
         });
+
+        test('returns focus to the calendar button', async () => {
+          const { openMenu, container, calendarButton } = renderDatePicker();
+          await openMenu();
+          userEvent.click(container.parentElement!);
+          await waitFor(() => expect(calendarButton).toHaveFocus());
+        });
       });
     });
 
@@ -421,48 +464,44 @@ describe('packages/date-picker', () => {
       describe('updates the highlighted cell', () => {
         test('to the end of the month if we went backwards', async () => {
           const { openMenu, findAllByRole } = renderDatePicker({
-            value: new Date(Date.UTC(2023, Month.July, 5)),
+            value: newUTC(2023, Month.July, 5),
           });
-          const { monthSelect, calendarGrid } = openMenu();
+          const { monthSelect, queryCellByDate } = await openMenu();
           userEvent.click(monthSelect!);
           const options = await findAllByRole('option');
           const Jan = options[0];
           userEvent.click(Jan);
-          const jan31Cell = calendarGrid?.querySelector(
-            '[data-iso="2023-01-31T00:00:00.000Z"]',
-          );
-          expect(jan31Cell).toHaveFocus();
+          const jan31Cell = queryCellByDate(newUTC(2023, Month.January, 31));
+          await waitFor(() => expect(jan31Cell).toHaveFocus());
         });
         test('to the beginning of the month if we went forwards', async () => {
           const { openMenu, findAllByRole } = renderDatePicker({
-            value: new Date(Date.UTC(2023, Month.July, 5)),
+            value: newUTC(2023, Month.July, 5),
           });
-          const { monthSelect, calendarGrid } = openMenu();
+          const { monthSelect, queryCellByDate } = await openMenu();
           userEvent.click(monthSelect!);
           const options = await findAllByRole('option');
           const Dec = options[11];
           userEvent.click(Dec);
-          const dec1Cell = calendarGrid?.querySelector(
-            '[data-iso="2023-12-01T00:00:00.000Z"]',
-          );
-          expect(dec1Cell).toHaveFocus();
+          const dec1Cell = queryCellByDate(newUTC(2023, Month.December, 1));
+          await waitFor(() => expect(dec1Cell).toHaveFocus());
         });
       });
     });
 
     describe('Keyboard navigation', () => {
       describe('Tab', () => {
-        test('menu does not open on keyboard focus', () => {
-          const { getMenuElements } = renderDatePicker();
+        test('menu does not open on keyboard focus', async () => {
+          const { findMenuElements } = renderDatePicker();
           userEvent.tab();
-          const { menuContainerEl } = getMenuElements();
+          const { menuContainerEl } = await findMenuElements();
           expect(menuContainerEl).not.toBeInTheDocument();
         });
 
-        test('menu does not open on subsequent keyboard focus', () => {
-          const { getMenuElements } = renderDatePicker();
+        test('menu does not open on subsequent keyboard focus', async () => {
+          const { findMenuElements } = renderDatePicker();
           tabNTimes(3);
-          const { menuContainerEl } = getMenuElements();
+          const { menuContainerEl } = await findMenuElements();
           expect(menuContainerEl).not.toBeInTheDocument();
         });
 
@@ -473,7 +512,7 @@ describe('packages/date-picker', () => {
           expect(handleValidation).toHaveBeenCalled();
         });
 
-        test('does not call validation handler when changing segment focus', () => {
+        test('todayCelldoes not call validation handler when changing segment focus', () => {
           const handleValidation = jest.fn();
           renderDatePicker({ handleValidation });
           tabNTimes(2);
@@ -481,263 +520,190 @@ describe('packages/date-picker', () => {
         });
 
         describe('Tab order', () => {
-          describe.each(range(0, 4))('when menu is closed', n => {
-            test(`Tab ${n} times`, () => {
-              const {
-                yearInput,
-                monthInput,
-                dayInput,
-                calendarButton,
-                inputContainer,
-              } = renderDatePicker();
-              tabNTimes(n);
-
-              switch (n) {
-                case 0:
-                  expect(
-                    inputContainer.contains(document.activeElement),
-                  ).toBeFalsy();
-                  break;
-                case 1:
-                  expect(yearInput).toHaveFocus();
-                  break;
-                case 2:
-                  expect(monthInput).toHaveFocus();
-                  break;
-                case 3:
-                  expect(dayInput).toHaveFocus();
-                  break;
-                case 4:
-                  expect(calendarButton).toHaveFocus();
-                  break;
-                case 5:
+          describe('when menu is closed', () => {
+            const tabStops = expectedTabStopLabels['closed'];
+
+            test('Tab order proceeds as expected', async () => {
+              const renderResult = renderDatePicker();
+
+              for (const label of tabStops) {
+                const elementMap = await findTabStopElementMap(renderResult);
+                const element = elementMap[label];
+
+                if (element !== null) {
+                  expect(element).toHaveFocus();
+                } else {
                   expect(
-                    inputContainer.contains(document.activeElement),
+                    renderResult.inputContainer.contains(
+                      document.activeElement,
+                    ),
                   ).toBeFalsy();
-                  break;
+                }
+
+                userEvent.tab();
               }
             });
           });
 
-          describe.each(range(0, 9))('when the menu is open', n => {
-            test(`Tab ${n} times`, () => {
-              const {
-                yearInput,
-                monthInput,
-                dayInput,
-                calendarButton,
-                openMenu,
-              } = renderDatePicker();
-
-              const {
-                leftChevron,
-                monthSelect,
-                yearSelect,
-                rightChevron,
-                todayCell,
-              } = openMenu();
-
-              tabNTimes(n);
-
-              switch (n) {
-                case 0:
-                  expect(yearInput).toHaveFocus();
-                  break;
-                case 1:
-                  expect(monthInput).toHaveFocus();
-                  break;
-                case 2:
-                  expect(dayInput).toHaveFocus();
-                  break;
-                case 3:
-                  expect(calendarButton).toHaveFocus();
-                  break;
-                case 4:
-                  expect(todayCell).toHaveFocus();
-                  break;
-                case 5:
-                  expect(leftChevron).toHaveFocus();
-                  break;
-                case 6:
-                  expect(monthSelect).toHaveFocus();
-                  break;
-                case 7:
-                  expect(yearSelect).toHaveFocus();
-                  break;
-                case 8:
-                  expect(rightChevron).toHaveFocus();
-                  break;
-                case 9:
-                  // Focus is trapped within the menu
-                  expect(todayCell).toHaveFocus();
-                  break;
+          describe('when menu is open', () => {
+            const tabStops = expectedTabStopLabels['open'];
+
+            test(`Tab order proceeds as expected`, async () => {
+              const renderResult = renderDatePicker({
+                initialOpen: true,
+              });
+
+              for (const label of tabStops) {
+                const elementMap = await findTabStopElementMap(renderResult);
+                const element = elementMap[label];
+
+                if (element !== null) {
+                  await waitFor(() => expect(element).toHaveFocus());
+                } else {
+                  expect(
+                    renderResult.inputContainer.contains(
+                      document.activeElement,
+                    ),
+                  ).toBeFalsy();
+                }
+
+                userEvent.tab();
               }
             });
           });
         });
       });
 
-      describe('Enter key', () => {
-        test('if menu is closed, does not open the menu', () => {
-          const { getMenuElements } = renderDatePicker();
-          userEvent.tab();
-          userEvent.keyboard('{enter}');
-          const { menuContainerEl } = getMenuElements();
-          expect(menuContainerEl).not.toBeInTheDocument();
-        });
-
-        test('calls validation handler', () => {
-          const handleValidation = jest.fn();
-          renderDatePicker({ handleValidation });
-          userEvent.tab();
-          userEvent.keyboard('{enter}');
-          expect(handleValidation).toHaveBeenCalledWith(undefined);
-        });
-
-        test('opens menu if calendar button is focused', () => {
-          const { getMenuElements } = renderDatePicker();
+      describe.each(['Enter', 'Space'])('%p key', key => {
+        test('opens menu if calendar button is focused', async () => {
+          const { findMenuElements } = renderDatePicker();
           tabNTimes(4);
-          userEvent.keyboard('{enter}');
-          const { menuContainerEl } = getMenuElements();
+          userEvent.keyboard(`[${key}]`);
+          const { menuContainerEl } = await findMenuElements();
           expect(menuContainerEl).toBeInTheDocument();
         });
 
-        test('if month/year select is focused, opens the select menu', async () => {
+        test('if month select is focused, opens the select menu', async () => {
           const { openMenu, findAllByRole } = renderDatePicker();
-          const { monthSelect } = openMenu();
-          tabNTimes(6);
-          userEvent.keyboard('{enter}');
+          const { monthSelect } = await openMenu();
+          tabNTimes(2);
           expect(monthSelect).toHaveFocus();
+          userEvent.keyboard(`[${key}]`);
           const options = await findAllByRole('option');
           expect(options.length).toBeGreaterThan(0);
         });
 
-        test('if a cell is focused, fires a change handler', () => {
+        test('if a cell is focused, fires a change handler', async () => {
           const onDateChange = jest.fn();
           const { openMenu } = renderDatePicker({ onDateChange });
-          const { todayCell } = openMenu();
-          tabNTimes(4);
+          const { todayCell } = await openMenu();
           expect(todayCell).toHaveFocus();
-          userEvent.type(todayCell!, '{enter}');
+          userEvent.keyboard(`[${key}]`);
           expect(onDateChange).toHaveBeenCalled();
         });
 
         test('if a cell is focused, closes the menu', async () => {
           const { openMenu } = renderDatePicker();
-          const { todayCell, menuContainerEl } = openMenu();
-          tabNTimes(4);
-          userEvent.keyboard('{enter}');
-          userEvent.type(todayCell!, '{enter}');
+          const { todayCell, menuContainerEl } = await openMenu();
+          expect(todayCell).toHaveFocus();
+          userEvent.keyboard(`[${key}]`);
           await waitForElementToBeRemoved(menuContainerEl);
           expect(menuContainerEl).not.toBeInTheDocument();
         });
 
+        test('if a cell is focused on current value, closes the menu, but does not fire a change handler', async () => {
+          const onDateChange = jest.fn();
+          const value = newUTC(2023, Month.September, 10);
+          const { openMenu } = renderDatePicker({ value, onDateChange });
+          const { menuContainerEl, queryCellByDate } = await openMenu();
+          expect(queryCellByDate(value)).toHaveFocus();
+          userEvent.keyboard(`[${key}]`);
+          await waitForElementToBeRemoved(menuContainerEl);
+          expect(menuContainerEl).not.toBeInTheDocument();
+          expect(onDateChange).not.toHaveBeenCalled();
+        });
+
         describe('chevron', () => {
           test('if left chevron is focused, does not close the menu', async () => {
-            const { openMenu, getMenuElements } = renderDatePicker();
-            const { leftChevron } = openMenu();
-            tabNTimes(5);
+            const { openMenu, findMenuElements } = renderDatePicker();
+            const { leftChevron } = await openMenu();
+            tabNTimes(1);
             expect(leftChevron).toHaveFocus();
-            userEvent.keyboard('{enter}');
-            const { menuContainerEl } = getMenuElements();
+            userEvent.keyboard(`[${key}]`);
+            const { menuContainerEl } = await findMenuElements();
             expect(menuContainerEl).toBeInTheDocument();
           });
 
           test('if right chevron is focused, does not close the menu', async () => {
-            const { openMenu, getMenuElements } = renderDatePicker();
-            const { rightChevron } = openMenu();
-            tabNTimes(8);
+            const { openMenu, findMenuElements } = renderDatePicker();
+            const { rightChevron } = await openMenu();
+            tabNTimes(4);
             expect(rightChevron).toHaveFocus();
-            userEvent.keyboard('{enter}');
-            const { menuContainerEl } = getMenuElements();
+            userEvent.keyboard(`[${key}]`);
+            const { menuContainerEl } = await findMenuElements();
             expect(menuContainerEl).toBeInTheDocument();
           });
         });
       });
 
-      describe('Space key', () => {
-        test('opens menu if calendar button is focused', () => {
-          const { getMenuElements } = renderDatePicker();
-          tabNTimes(3);
-          userEvent.keyboard('{space}');
-          const { menuContainerEl } = getMenuElements();
-          expect(menuContainerEl).toBeInTheDocument();
-        });
-
-        test('if month/year select is focused, opens the select menu', async () => {
-          const { openMenu, findAllByRole } = renderDatePicker();
-          const { monthSelect } = openMenu();
-          tabNTimes(6);
-          userEvent.keyboard('{space}');
-          expect(monthSelect).toHaveFocus();
-          const options = await findAllByRole('option');
-          expect(options.length).toBeGreaterThan(0);
-        });
-
-        test('if a cell is focused, fires a change handler', () => {
-          const onChange = jest.fn();
-          const { openMenu } = renderDatePicker({ onChange });
-          const { todayCell } = openMenu();
-          tabNTimes(4);
-          expect(todayCell).toHaveFocus();
-          userEvent.type(todayCell!, '{space}');
-          expect(onChange).toHaveBeenCalled();
+      describe('Enter key only', () => {
+        test('does not open the menu if input is focused', async () => {
+          const { findMenuElements } = renderDatePicker();
+          userEvent.tab();
+          userEvent.keyboard(`[Enter]`);
+          const { menuContainerEl } = await findMenuElements();
+          expect(menuContainerEl).not.toBeInTheDocument();
         });
 
-        test('if a cell is focused, closes the menu', async () => {
-          const { openMenu } = renderDatePicker();
-          const { todayCell, menuContainerEl } = openMenu();
-          tabNTimes(4);
-          userEvent.keyboard('{space}');
-          userEvent.type(todayCell!, '{space}');
-          await waitForElementToBeRemoved(menuContainerEl);
-          expect(menuContainerEl).not.toBeInTheDocument();
+        test('calls validation handler', () => {
+          const handleValidation = jest.fn();
+          renderDatePicker({ handleValidation });
+          userEvent.tab();
+          userEvent.keyboard(`[Enter]`);
+          expect(handleValidation).toHaveBeenCalledWith(undefined);
         });
       });
 
       describe('Escape key', () => {
         test('closes the menu', async () => {
           const { openMenu } = renderDatePicker();
-          const { menuContainerEl } = openMenu();
+          const { menuContainerEl } = await openMenu();
           userEvent.keyboard('{escape}');
           await waitForElementToBeRemoved(menuContainerEl);
           expect(menuContainerEl).not.toBeInTheDocument();
         });
 
-        test('does not fire a change handler', () => {
+        test('does not fire a change handler', async () => {
           const onDateChange = jest.fn();
           const { openMenu } = renderDatePicker({ onDateChange });
-          openMenu();
+          await openMenu();
           userEvent.keyboard('{escape}');
           expect(onDateChange).not.toHaveBeenCalled();
         });
 
-        test('focus remains in the input element', () => {
-          const onDateChange = jest.fn();
-          const { openMenu, inputContainer } = renderDatePicker({
-            onDateChange,
-          });
-          openMenu();
+        test('returns focus to the calendar button', async () => {
+          const { openMenu, calendarButton } = renderDatePicker();
+          await openMenu();
           userEvent.keyboard('{escape}');
-          expect(inputContainer.contains(document.activeElement)).toBeTruthy();
+          await waitFor(() => expect(calendarButton).toHaveFocus());
         });
 
-        test('fires a validation handler', () => {
+        test('fires a validation handler', async () => {
           const handleValidation = jest.fn();
           const { openMenu } = renderDatePicker({ handleValidation });
-          openMenu();
+          await openMenu();
           userEvent.keyboard('{escape}');
           expect(handleValidation).toHaveBeenCalledWith(undefined);
         });
 
-        test('does not close the main menu if a select menu is open and focus is in the select menu', async () => {
+        test('does not close the main menu if a select menu is open', async () => {
           const { openMenu, queryAllByRole, findAllByRole } =
             renderDatePicker();
-          const { monthSelect, menuContainerEl } = openMenu();
+          const { monthSelect, menuContainerEl } = await openMenu();
 
           monthSelect?.focus();
           expect(monthSelect).toHaveFocus();
-          userEvent.keyboard('{enter}');
+          userEvent.keyboard('[Enter]');
           userEvent.keyboard('{arrowdown}');
           const options = await findAllByRole('option');
           const firstOption = options[0];
@@ -758,17 +724,63 @@ describe('packages/date-picker', () => {
        * Since arrow key behavior changes based on whether the input or menu is focused,
        * many of these tests exist in the "DatePickerInput" and "DatePickerMenu" components
        */
-      test.todo('Basic arrow key tests');
+      describe('Arrow key', () => {
+        describe('Input', () => {
+          test.todo('moves focus to segments');
+        });
+        describe('Menu', () => {
+          test('left arrow moves focus to the previous day', async () => {
+            const { calendarButton, findMenuElements } = renderDatePicker();
+            userEvent.click(calendarButton);
+            const { todayCell, menuContainerEl, queryCellByDate } =
+              await findMenuElements();
+            // Manually fire the `transitionEnd` event. This is not fired automatically by JSDOM
+            fireEvent.transitionEnd(menuContainerEl!);
+            expect(todayCell).toHaveFocus();
+
+            userEvent.keyboard('{arrowleft}');
+            const prevDayCell = queryCellByDate(subDays(testToday, 1));
+            await waitFor(() => expect(prevDayCell).toHaveFocus());
+          });
+
+          test('down arrow moves focus to next week', async () => {
+            const { calendarButton, findMenuElements } = renderDatePicker();
+            userEvent.click(calendarButton);
+            const { todayCell, menuContainerEl, queryCellByDate } =
+              await findMenuElements();
+            // Manually fire the `transitionEnd` event. This is not fired automatically by JSDOM
+            fireEvent.transitionEnd(menuContainerEl!);
+            expect(todayCell).toHaveFocus();
+
+            userEvent.keyboard('{arrowdown}');
+            const nextWeekCell = queryCellByDate(addDays(testToday, 7));
+            await waitFor(() => expect(nextWeekCell).toHaveFocus());
+          });
+
+          test('down arrow can change month', async () => {
+            const { calendarButton, findByRole } = renderDatePicker();
+            userEvent.click(calendarButton);
+            const menuContainerEl = await findByRole('listbox');
+            const calendarGrid = within(menuContainerEl).getByRole('grid');
+            fireEvent.transitionEnd(menuContainerEl!);
+
+            expect(calendarGrid).toHaveAttribute('aria-label', 'December 2023');
+
+            userEvent.keyboard('{arrowdown}');
+            expect(calendarGrid).toHaveAttribute('aria-label', 'January 2024');
+          });
+        });
+      });
     });
 
     describe('Typing', () => {
       describe('Typing into the input', () => {
-        test('opens the menu', () => {
-          const { yearInput, getMenuElements } = renderDatePicker();
+        test('opens the menu', async () => {
+          const { yearInput, findMenuElements } = renderDatePicker();
           userEvent.tab();
           expect(yearInput).toHaveFocus();
           userEvent.keyboard('2');
-          const { menuContainerEl } = getMenuElements();
+          const { menuContainerEl } = await findMenuElements();
           expect(menuContainerEl).toBeInTheDocument();
         });
 
@@ -933,6 +945,102 @@ describe('packages/date-picker', () => {
         });
       });
     });
+
+    // TODO: Move these suites to Cypress (or other e2e/integration platform)
+    describe('User flows', () => {
+      test('month is updated when value changes', async () => {
+        const value = newUTC(2023, Month.September, 10);
+        const { calendarButton, findMenuElements, rerenderDatePicker } =
+          renderDatePicker();
+        rerenderDatePicker({ value });
+        userEvent.click(calendarButton);
+        const { calendarGrid } = await findMenuElements();
+        await waitFor(() =>
+          expect(calendarGrid).toHaveAttribute('aria-label', 'September 2023'),
+        );
+      });
+
+      describe('when closing and re-opening the menu', () => {
+        test('month is reset to today by default', async () => {
+          const { openMenu } = renderDatePicker();
+          const { calendarGrid, menuContainerEl } = await openMenu();
+
+          expect(calendarGrid).toHaveAttribute('aria-label', 'December 2023');
+
+          userEvent.keyboard('{arrowdown}');
+          expect(calendarGrid).toHaveAttribute('aria-label', 'January 2024');
+
+          userEvent.keyboard('{escape}');
+          await waitForElementToBeRemoved(menuContainerEl);
+
+          await openMenu();
+          expect(calendarGrid).toHaveAttribute('aria-label', 'December 2023');
+        });
+
+        test('month is reset to value', async () => {
+          const value = newUTC(2023, Month.September, 10);
+
+          const { openMenu } = renderDatePicker({
+            value,
+          });
+          const { calendarGrid, menuContainerEl } = await openMenu();
+
+          expect(calendarGrid).toHaveAttribute('aria-label', 'September 2023');
+
+          userEvent.keyboard('{arrowup}{arrowup}');
+          expect(calendarGrid).toHaveAttribute('aria-label', 'August 2023');
+
+          userEvent.keyboard('{escape}');
+          await waitForElementToBeRemoved(menuContainerEl);
+
+          await openMenu();
+          expect(calendarGrid).toHaveAttribute('aria-label', 'September 2023');
+        });
+
+        test('highlight returns to today by default', async () => {
+          const { openMenu } = renderDatePicker();
+          const { todayCell, menuContainerEl, queryCellByDate } =
+            await openMenu();
+          expect(todayCell).toHaveFocus();
+
+          userEvent.keyboard('{arrowdown}');
+          const jan2 = addDays(testToday, 7);
+          const jan2Cell = queryCellByDate(jan2);
+          await waitFor(() => expect(jan2Cell).toHaveFocus());
+
+          userEvent.keyboard('{escape}');
+          await waitForElementToBeRemoved(menuContainerEl);
+
+          const { todayCell: newTodayCell } = await openMenu();
+          expect(newTodayCell).toHaveFocus();
+        });
+
+        test('highlight returns to value', async () => {
+          const value = newUTC(2023, Month.September, 10);
+          const { openMenu, findMenuElements } = renderDatePicker({
+            value,
+          });
+          let queryCellByDate = (await openMenu()).queryCellByDate;
+          const { menuContainerEl } = await findMenuElements();
+          let valueCell = queryCellByDate(value);
+          expect(valueCell).not.toBeNull();
+          await waitFor(() => expect(valueCell).toHaveFocus());
+
+          userEvent.keyboard('{arrowup}{arrowup}');
+          const aug27 = subDays(value, 14);
+          const aug27Cell = queryCellByDate(aug27);
+          await waitFor(() => expect(aug27Cell).toHaveFocus());
+
+          userEvent.keyboard('{escape}');
+          await waitForElementToBeRemoved(menuContainerEl);
+
+          queryCellByDate = (await openMenu()).queryCellByDate;
+          valueCell = queryCellByDate(value);
+          expect(valueCell).not.toBeNull();
+          await waitFor(() => expect(valueCell).toHaveFocus());
+        });
+      });
+    });
   });
 
   describe('Controlled vs Uncontrolled', () => {
@@ -942,9 +1050,9 @@ describe('packages/date-picker', () => {
         value: new Date(),
         onDateChange,
       });
-      const { calendarCells } = openMenu();
+      const { calendarCells } = await openMenu();
       const firstCell = calendarCells?.[0];
-      userEvent.click(firstCell);
+      userEvent.click(firstCell!);
       await waitFor(() => expect(onDateChange).toHaveBeenCalled());
     });
 
@@ -954,9 +1062,9 @@ describe('packages/date-picker', () => {
         value: new Date(),
         onDateChange,
       });
-      const { calendarCells } = openMenu();
+      const { calendarCells } = await openMenu();
       const firstCell = calendarCells?.[0];
-      userEvent.click(firstCell);
+      userEvent.click(firstCell!);
       await waitFor(() => {
         expect(dayInput.value).toEqual('26');
         expect(monthInput.value).toEqual('12');
@@ -969,9 +1077,9 @@ describe('packages/date-picker', () => {
       const { openMenu } = renderDatePicker({
         onDateChange,
       });
-      const { calendarCells } = openMenu();
+      const { calendarCells } = await openMenu();
       const firstCell = calendarCells?.[0];
-      userEvent.click(firstCell);
+      userEvent.click(firstCell!);
       await waitFor(() => expect(onDateChange).toHaveBeenCalled());
     });
 
@@ -981,9 +1089,9 @@ describe('packages/date-picker', () => {
         onDateChange,
         initialValue: new Date(),
       });
-      const { calendarCells } = openMenu();
+      const { calendarCells } = await openMenu();
       const firstCell = calendarCells?.[0];
-      userEvent.click(firstCell);
+      userEvent.click(firstCell!);
       await waitFor(() => {
         expect(dayInput.value).toEqual('01');
         expect(monthInput.value).toEqual('12');
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index e9135e81c5..d98d53b72a 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -18,11 +18,7 @@ import { DatePicker } from './DatePicker';
 
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
   <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-    <DatePickerProvider
-      value={{
-        ...ctx?.args,
-      }}
-    >
+    <DatePickerProvider {...ctx?.args}>
       <Story />
     </DatePickerProvider>
   </LeafyGreenProvider>
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index 9924edda02..4bb1ea4689 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -1,14 +1,24 @@
 import React from 'react';
 import {
-  getByRole as globalGetByRole,
+  fireEvent,
+  // prettyDOM,
+  queryByRole,
   render,
   RenderResult,
+  waitFor,
+  within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { getISODate } from '../shared/utils/getISODate';
+
 import { DatePickerProps } from './DatePicker.types';
 import { DatePicker } from '.';
 
+const withinElement = (element: HTMLElement | null) => {
+  return element ? within(element) : null;
+};
+
 interface RenderDatePickerResult extends RenderResult {
   formField: HTMLElement;
   inputContainer: HTMLElement;
@@ -16,8 +26,27 @@ interface RenderDatePickerResult extends RenderResult {
   monthInput: HTMLInputElement;
   yearInput: HTMLInputElement;
   calendarButton: HTMLButtonElement;
-  getMenuElements: () => RenderMenuResult;
-  openMenu: () => RenderMenuResult;
+
+  /**
+   * Asynchronously query for menu elements
+   */
+  findMenuElements: () => Promise<RenderMenuResult>;
+
+  /**
+   * Wait for the menu element to finish opening.
+   * When this method resolves, the appropriate calendar cell will be focused
+   */
+  waitForMenuToOpen: () => Promise<RenderMenuResult>;
+
+  /**
+   * Opens the menu by clicking the calendar button.
+   */
+  openMenu: () => Promise<RenderMenuResult>;
+
+  /**
+   * Rerender the Date Picker with new props
+   */
+  rerenderDatePicker: (newProps: Partial<DatePickerProps>) => void;
 }
 
 interface RenderMenuResult {
@@ -27,8 +56,10 @@ interface RenderMenuResult {
   monthSelect: HTMLButtonElement | null;
   yearSelect: HTMLButtonElement | null;
   calendarGrid: HTMLTableElement | null;
-  calendarCells: Array<HTMLTableCellElement>;
+  calendarCells: Array<HTMLTableCellElement | null>;
   todayCell: HTMLTableCellElement | null;
+  /** Query for a cell with a given date value */
+  queryCellByDate: (date: Date) => HTMLTableCellElement | null;
 }
 
 /**
@@ -42,70 +73,141 @@ export const renderDatePicker = (
     <DatePicker data-testid="lg-date-picker" {...defaultProps} {...props} />,
   );
 
-  const formField = result.getByTestId('lg-date-picker');
-  const inputContainer = result.getByRole('combobox');
-  const dayInput = result.getByLabelText('day') as HTMLInputElement;
-  const monthInput = result.getByLabelText('month') as HTMLInputElement;
-  const yearInput = result.getByLabelText('year') as HTMLInputElement;
-  const calendarButton = globalGetByRole(
-    inputContainer,
-    'button',
-  ) as HTMLButtonElement;
+  /** Rerender the Date Picker with new props */
+  const rerenderDatePicker = (newProps: Partial<DatePickerProps>) => {
+    result.rerender(
+      <DatePicker
+        data-testid="lg-date-picker"
+        {...defaultProps}
+        {...props}
+        {...newProps}
+      />,
+    );
+  };
+
+  const inputElements = {
+    formField: result.getByTestId('lg-date-picker'),
+    inputContainer: result.getByRole('combobox'),
+    dayInput: result.getByLabelText('day') as HTMLInputElement,
+    monthInput: result.getByLabelText('month') as HTMLInputElement,
+    yearInput: result.getByLabelText('year') as HTMLInputElement,
+    calendarButton: within(result.getByRole('combobox')).getByRole(
+      'button',
+    ) as HTMLButtonElement,
+  };
 
   /**
-   * Returns relevant menu elements.
-   * Call this after the menu has been opened
+   * Asynchronously query for menu elements.
    */
-  function getMenuElements(): RenderMenuResult {
-    const menuContainerEl = result.queryByRole('listbox');
-    const calendarGrid = result.queryByRole('grid') as HTMLTableElement;
-    const calendarCells = result.queryAllByRole(
-      'gridcell',
-    ) as Array<HTMLTableCellElement>;
-
-    // label text is tested in DatePickerMenu.spec
-    const leftChevron = result.queryByLabelText(
-      'Previous month',
-    ) as HTMLButtonElement;
-    const rightChevron = result.queryByLabelText(
-      'Next month',
-    ) as HTMLButtonElement;
-    const monthSelect = result.queryByLabelText(
-      'Select month',
-    ) as HTMLButtonElement;
-    const yearSelect = result.queryByLabelText(
-      'Select year',
-    ) as HTMLButtonElement;
-    const todayCell = calendarGrid?.querySelector(
-      '[aria-current="true"]',
-    ) as HTMLTableCellElement;
+  async function findMenuElements(): Promise<RenderMenuResult> {
+    const menuContainerEl = await waitFor(() =>
+      queryByRole(document.body, 'listbox'),
+    );
+
+    const calendarGrid = withinElement(menuContainerEl)?.queryByRole('grid');
+    const calendarCells =
+      withinElement(menuContainerEl)?.getAllByRole('gridcell');
+    const leftChevron =
+      withinElement(menuContainerEl)?.queryByLabelText('Previous month');
+    const rightChevron =
+      withinElement(menuContainerEl)?.queryByLabelText('Next month');
+    const monthSelect =
+      withinElement(menuContainerEl)?.queryByLabelText('Select month');
+    const yearSelect =
+      withinElement(menuContainerEl)?.queryByLabelText('Select year');
+
+    const queryCellByDate = (date: Date): HTMLTableCellElement | null => {
+      const cell = calendarGrid?.querySelector(
+        `[data-iso="${getISODate(date)}"]`,
+      );
+
+      return cell as HTMLTableCellElement | null;
+    };
+
+    const todayCell = queryCellByDate(new Date(Date.now()));
 
     return {
       menuContainerEl,
-      calendarGrid,
-      calendarCells,
+      calendarGrid: calendarGrid as HTMLTableElement | null,
+      calendarCells: calendarCells as Array<HTMLTableCellElement | null>,
+      leftChevron: leftChevron as HTMLButtonElement | null,
+      rightChevron: rightChevron as HTMLButtonElement | null,
+      monthSelect: monthSelect as HTMLButtonElement | null,
+      yearSelect: yearSelect as HTMLButtonElement | null,
       todayCell,
-      leftChevron,
-      rightChevron,
-      monthSelect,
-      yearSelect,
+      queryCellByDate,
     };
   }
 
-  function openMenu(): RenderMenuResult {
-    userEvent.click(inputContainer);
-    return getMenuElements();
+  async function waitForMenuToOpen(): Promise<RenderMenuResult> {
+    const menuElements = await findMenuElements();
+
+    fireEvent.transitionEnd(menuElements.menuContainerEl!);
+
+    return menuElements;
+  }
+
+  async function openMenu(): Promise<RenderMenuResult> {
+    userEvent.click(inputElements.calendarButton);
+    return await waitForMenuToOpen();
   }
 
   return {
     ...result,
-    formField,
-    inputContainer,
-    dayInput,
-    monthInput,
-    yearInput,
-    calendarButton,
-    getMenuElements,
+    ...inputElements,
+    findMenuElements,
+    waitForMenuToOpen,
     openMenu,
+    rerenderDatePicker,
+  };
+};
+
+/** Labels used for Tab stop testing */
+export const expectedTabStopLabels = {
+  closed: [
+    'none',
+    'input > year',
+    'input > month',
+    'input > day',
+    'input > open menu button',
+    'none',
+  ],
+  open: [
+    'none',
+    'input > year',
+    'input > month',
+    'input > day',
+    'input > open menu button',
+    'menu > today cell',
+    'menu > left chevron',
+    'menu > month select',
+    'menu > year select',
+    'menu > right chevron',
+    'menu > today cell',
+  ],
+};
+
+type TabStopLabel =
+  (typeof expectedTabStopLabels)[keyof typeof expectedTabStopLabels][number];
+
+export const findTabStopElementMap = async (
+  renderResult: RenderDatePickerResult,
+): Promise<Record<TabStopLabel, HTMLElement | null>> => {
+  const { yearInput, monthInput, dayInput, calendarButton, findMenuElements } =
+    renderResult;
+  const { todayCell, monthSelect, yearSelect, leftChevron, rightChevron } =
+    await findMenuElements();
+
+  return {
+    none: null,
+    'input > year': yearInput,
+    'input > month': monthInput,
+    'input > day': dayInput,
+    'input > open menu button': calendarButton,
+    'menu > today cell': todayCell,
+    'menu > left chevron': leftChevron,
+    'menu > month select': monthSelect,
+    'menu > year select': yearSelect,
+    'menu > right chevron': rightChevron,
   };
 };
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index a4eea83177..ede91dd991 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -9,6 +9,7 @@ import { pickAndOmit } from '../shared/utils';
 
 import { DatePickerProps } from './DatePicker.types';
 import { DatePickerComponent } from './DatePickerComponent';
+import { SingleDateProvider } from './SingleDateContext';
 
 /**
  * LeafyGreen Date Picker component
@@ -19,6 +20,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       value: valueProp,
       initialValue: initialProp,
       onDateChange: onChangeProp,
+      handleValidation,
       ...props
     }: DatePickerProps,
     fwdRef,
@@ -32,13 +34,14 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     );
 
     return (
-      <DatePickerProvider value={contextProps}>
-        <DatePickerComponent
-          ref={fwdRef}
+      <DatePickerProvider {...contextProps}>
+        <SingleDateProvider
           value={value}
           setValue={setValue}
-          {...restProps}
-        />
+          handleValidation={handleValidation}
+        >
+          <DatePickerComponent ref={fwdRef} {...restProps} />
+        </SingleDateProvider>
       </DatePickerProvider>
     );
   },
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 145205687c..133c48df68 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -1,83 +1,81 @@
-import React, { forwardRef, useRef } from 'react';
+import React, {
+  forwardRef,
+  KeyboardEventHandler,
+  TransitionEventHandler,
+  useRef,
+} from 'react';
+import { ExitHandler } from 'react-transition-group/Transition';
 
 import { useBackdropClick, useForwardedRef } from '@leafygreen-ui/hooks';
+import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../shared/components/DatePickerContext';
-import { isSameUTCDay } from '../../shared/utils';
 import { DatePickerInput } from '../DatePickerInput';
-import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
+import { DatePickerMenu } from '../DatePickerMenu';
+import { useSingleDateContext } from '../SingleDateContext';
 
 import { DatePickerComponentProps } from './DatePickerComponent.types';
 
 export const DatePickerComponent = forwardRef<
   HTMLDivElement,
   DatePickerComponentProps
->(
-  (
-    { value, setValue, handleValidation, ...rest }: DatePickerComponentProps,
-    fwdRef,
-  ) => {
-    const { isOpen, setOpen, isDirty, setIsDirty, menuId } =
-      useDatePickerContext();
-    const closeMenu = () => setOpen(false);
+>(({ ...rest }: DatePickerComponentProps, fwdRef) => {
+  const { isOpen, menuId } = useDatePickerContext();
+  const { value, closeMenu, handleValidation, getHighlightedCell } =
+    useSingleDateContext();
 
-    const formFieldRef = useForwardedRef(fwdRef, null);
-    const menuRef = useRef<HTMLDivElement>(null);
+  const formFieldRef = useForwardedRef(fwdRef, null);
+  const menuRef = useRef<HTMLDivElement>(null);
 
-    /** setValue with possible side effects */
-    const updateValue = (newVal: Date | null) => {
-      setValue(newVal);
-    };
+  useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
 
-    useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
+  /** Fired when the CSS transition to open the menu is fired */
+  const handleMenuTransitionEntered: TransitionEventHandler = () => {
+    if (isOpen) {
+      // When the menu opens, set focus to the `highlight` cell
+      const highlightedCell = getHighlightedCell();
+      highlightedCell?.focus();
+    }
+  };
 
-    /** Called when the input's Date value has changed */
-    const handleInputValueChange = (inputVal?: Date | null) => {
-      if (!isSameUTCDay(inputVal, value)) {
-        // When the value changes via the input element,
-        // we only trigger validation if the component is dirty
-        if (isDirty) {
-          handleValidation?.(inputVal);
-        }
-        updateValue(inputVal || null);
-      }
-    };
+  const handleMenuTransitionExited: ExitHandler<HTMLDivElement> = () => {
+    if (!isOpen) {
+      closeMenu();
+    }
+  };
 
-    /** Called when any calendar cell is clicked */
-    const handleCalendarCellClick: DatePickerMenuProps['onCellClick'] = (
-      cellValue: Date,
-    ) => {
-      if (!isSameUTCDay(cellValue, value)) {
-        // when the value is changed via cell,
-        // we trigger validation every time
-        handleValidation?.(cellValue);
-        setIsDirty(true);
-        // finally we update the component value
-        updateValue(cellValue);
-        // and close the menu
-        setOpen(false);
-      }
-    };
+  /** Handle key down events that should be fired regardless of target */
+  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
+    const { key } = e;
 
-    return (
-      <>
-        <DatePickerInput
-          ref={formFieldRef}
-          value={value}
-          setValue={handleInputValueChange}
-          handleValidation={handleValidation}
-          {...rest}
-        />
-        <DatePickerMenu
-          ref={menuRef}
-          id={menuId}
-          refEl={formFieldRef}
-          value={value}
-          onCellClick={handleCalendarCellClick}
-        />
-      </>
-    );
-  },
-);
+    switch (key) {
+      case keyMap.Escape:
+        closeMenu();
+        handleValidation?.(value);
+        break;
+
+      case keyMap.Enter:
+        handleValidation?.(value);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  return (
+    <>
+      <DatePickerInput ref={formFieldRef} onKeyDown={handleKeyDown} {...rest} />
+      <DatePickerMenu
+        ref={menuRef}
+        id={menuId}
+        refEl={formFieldRef}
+        onKeyDown={handleKeyDown}
+        onTransitionEnd={handleMenuTransitionEntered}
+        onExited={handleMenuTransitionExited}
+      />
+    </>
+  );
+});
 
 DatePickerComponent.displayName = 'DatePickerContents';
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
index 4f8b039c96..7f32b24b18 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
@@ -1,6 +1,4 @@
 import { ContextPropKeys } from '../../shared/components/DatePickerContext';
-import { useControlledValue } from '../../shared/hooks';
-import { DateType } from '../../shared/types';
 import { DatePickerProps } from '../DatePicker.types';
 
 /**
@@ -9,6 +7,7 @@ import { DatePickerProps } from '../DatePicker.types';
  * Replaces `onDateChange` with a `setValue` setter function
  */
 export interface DatePickerComponentProps
-  extends Omit<DatePickerProps, ContextPropKeys | 'onDateChange'> {
-  setValue: ReturnType<typeof useControlledValue<DateType>>['setValue'];
-}
+  extends Omit<
+    DatePickerProps,
+    ContextPropKeys | 'value' | 'handleValidation' | 'onDateChange'
+  > {}
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index ae3e48149a..e2d2416242 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -8,16 +8,27 @@ import {
   defaultDatePickerContext,
 } from '../../shared/components/DatePickerContext';
 import { Month } from '../../shared/constants';
+import {
+  SingleDateProvider,
+  SingleDateProviderProps,
+} from '../SingleDateContext';
 
 import { DatePickerInput, DatePickerInputProps } from '.';
 
 const renderDatePickerInput = (
-  props?: Omit<DatePickerInputProps, 'segmentRefs' | 'setValue'>,
-  context?: DatePickerProviderProps,
+  props?: Omit<DatePickerInputProps, 'segmentRefs' | 'setValue'> | null,
+  singleDateContext?: Partial<SingleDateProviderProps>,
+  context?: Partial<DatePickerProviderProps>,
 ) => {
   const result = render(
-    <DatePickerProvider value={{ ...defaultDatePickerContext, ...context }}>
-      <DatePickerInput {...props} setValue={() => {}} />
+    <DatePickerProvider {...defaultDatePickerContext} {...context}>
+      <SingleDateProvider
+        value={null}
+        setValue={() => {}}
+        {...singleDateContext}
+      >
+        <DatePickerInput {...props} />
+      </SingleDateProvider>
     </DatePickerProvider>,
   );
 
@@ -53,7 +64,7 @@ describe('packages/date-picker/date-picker-input', () => {
       });
 
       test('moves the cursor when the segment has a value', () => {
-        const { monthInput } = renderDatePickerInput({
+        const { monthInput } = renderDatePickerInput(null, {
           value: new Date(),
         });
         userEvent.type(monthInput, '{arrowleft}');
@@ -73,7 +84,7 @@ describe('packages/date-picker/date-picker-input', () => {
       });
 
       test('moves the cursor when the segment has a value', () => {
-        const { monthInput } = renderDatePickerInput({
+        const { monthInput } = renderDatePickerInput(null, {
           value: new Date(),
         });
         userEvent.type(monthInput, '{arrowright}');
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index ea65d36224..44d63ec4bf 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -12,22 +12,29 @@ import {
   DatePickerContextProps,
   DatePickerProvider,
 } from '../../shared/components/DatePickerContext';
+import { DatePickerProps } from '../DatePicker.types';
+import {
+  SingleDateContextProps,
+  SingleDateProvider,
+  SingleDateProviderProps,
+} from '../SingleDateContext';
 
 import { DatePickerInput } from './DatePickerInput';
 
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
   <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-    <DatePickerProvider
-      value={{
-        ...ctx?.args,
-      }}
-    >
-      <Story />
+    <DatePickerProvider {...ctx?.args}>
+      <SingleDateProvider value={ctx?.args.value} setValue={() => {}}>
+        <Story />
+      </SingleDateProvider>
     </DatePickerProvider>
   </LeafyGreenProvider>
 );
 
-const meta: StoryMetaType<typeof DatePickerInput, DatePickerContextProps> = {
+const meta: StoryMetaType<
+  typeof DatePickerInput,
+  SingleDateContextProps & DatePickerContextProps
+> = {
   title: 'Components/DatePicker/DatePicker/DatePickerInput',
   component: DatePickerInput,
   decorators: [ProviderWrapper],
@@ -58,7 +65,9 @@ const meta: StoryMetaType<typeof DatePickerInput, DatePickerContextProps> = {
 
 export default meta;
 
-export const Basic: StoryFn<typeof DatePickerInput> = props => {
+export const Basic: StoryFn<
+  DatePickerProps & SingleDateProviderProps
+> = props => {
   const [date, setDate] = useState<Date | null>(null);
 
   useEffect(() => {
@@ -74,9 +83,9 @@ export const Basic: StoryFn<typeof DatePickerInput> = props => {
   };
 
   return (
-    <>
-      <DatePickerInput {...props} value={date} setValue={updateDate} />
-    </>
+    <SingleDateProvider value={date} setValue={updateDate}>
+      <DatePickerInput {...props} />
+    </SingleDateProvider>
   );
 };
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 1ff9e60d91..a34cfb729c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -10,14 +10,15 @@ import { keyMap } from '@leafygreen-ui/lib';
 
 import { DateFormField, DateInputBox } from '../../shared/components/DateInput';
 import { useDatePickerContext } from '../../shared/components/DatePickerContext';
-import { useSegmentRefs } from '../../shared/hooks';
 import {
   isElementInputSegment,
   isExplicitSegmentValue,
+  isSameUTCDay,
   isValidSegmentName,
   isValidValueForSegment,
   isZeroLike,
 } from '../../shared/utils';
+import { useSingleDateContext } from '../SingleDateContext';
 import { getRelativeSegment } from '../utils/getRelativeSegment';
 import { getSegmentToFocus } from '../utils/getSegmentToFocus';
 
@@ -26,19 +27,31 @@ import { DatePickerInputProps } from './DatePickerInput.types';
 export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
   (
     {
-      value,
-      setValue,
       onClick,
       onKeyDown,
       onChange: onSegmentChange,
-      handleValidation,
       ...rest
     }: DatePickerInputProps,
     fwdRef,
   ) => {
-    const { formatParts, disabled, setOpen, isDirty, setIsDirty } =
+    const { formatParts, disabled, isDirty, setIsDirty } =
       useDatePickerContext();
-    const segmentRefs = useSegmentRefs();
+    const {
+      refs: { segmentRefs, calendarButtonRef },
+      value,
+      setValue,
+      openMenu,
+      toggleMenu,
+      handleValidation,
+    } = useSingleDateContext();
+
+    /** Called when the input's Date value has changed */
+    const handleInputValueChange = (inputVal?: Date | null) => {
+      if (!isSameUTCDay(inputVal, value)) {
+        handleValidation?.(inputVal);
+        setValue(inputVal || null);
+      }
+    };
 
     /**
      * Called when the input, or any of its children, is clicked.
@@ -46,7 +59,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
      */
     const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
       if (!disabled) {
-        setOpen(true);
+        openMenu();
 
         const segmentToFocus = getSegmentToFocus({
           target,
@@ -60,12 +73,12 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
     /**
      * Called when the calendar button is clicked.
-     * Opens the menu
+     * Opens the menu & focuses the appropriate cell
      */
     const handleIconButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
       // Prevent the parent click handler from being called since clicks on the parent always opens the dropdown
       e.stopPropagation();
-      setOpen(o => !o);
+      toggleMenu();
     };
 
     /** Called on any keydown within the input element */
@@ -121,7 +134,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         case keyMap.ArrowDown: {
           // if decrementing the segment's value is in range
           // decrement that segment value
-          // This is the default `input type=number` behavior
+          // This is the default `input type=number` & `role="spinbutton"` behavior
           break;
         }
 
@@ -138,22 +151,14 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         }
 
         case keyMap.Enter:
-          handleValidation?.(value);
-          break;
-
         case keyMap.Escape:
-          setOpen(false);
-          handleValidation?.(value);
-          break;
-
         case keyMap.Tab:
-          // default behavior
-          // focus trap handled by parent
+          // Behavior handled by parent or menu
           break;
 
         default:
           // any other keydown should open the menu
-          setOpen(true);
+          openMenu();
       }
 
       // call any handler that was passed in
@@ -207,6 +212,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     return (
       <DateFormField
         ref={fwdRef}
+        buttonRef={calendarButtonRef}
         onKeyDown={handleKeyDown}
         onInputClick={handleInputClick}
         onBlur={handleInputBlur}
@@ -215,7 +221,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       >
         <DateInputBox
           value={value}
-          setValue={setValue}
+          setValue={handleInputValueChange}
           segmentRefs={segmentRefs}
           onChange={handleSegmentChange}
         />
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index 01bdc732e2..68a73c4f62 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -5,11 +5,8 @@ import { HTMLElementProps } from '@leafygreen-ui/lib';
 import { DatePickerComponentProps } from '../DatePickerComponent';
 
 export interface DatePickerInputProps
-  extends Pick<
-      DatePickerComponentProps,
-      'setValue' | 'value' | 'handleValidation' | 'onChange'
-    >,
-    Omit<HTMLElementProps<'div'>, 'onChange'> {
+  extends Omit<HTMLElementProps<'div'>, 'onChange'>,
+    Pick<DatePickerComponentProps, 'onChange'> {
   /**
    * Click handler
    */
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index fddbf6a358..4257aa3590 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { addDays, subDays } from 'date-fns';
+import { addDays } from 'date-fns';
 
 import {
   DatePickerProvider,
@@ -9,7 +9,11 @@ import {
   defaultDatePickerContext,
 } from '../../shared/components/DatePickerContext';
 import { Month } from '../../shared/constants';
-import { newUTC, setUTCDate } from '../../shared/utils';
+import { getISODate, newUTC, setUTCDate } from '../../shared/utils';
+import {
+  SingleDateProvider,
+  SingleDateProviderProps,
+} from '../SingleDateContext';
 
 import { DatePickerMenu, DatePickerMenuProps } from '.';
 
@@ -17,28 +21,48 @@ const testToday = new Date(Date.UTC(2023, Month.September, 10));
 const testValue = new Date(Date.UTC(2023, Month.September, 14));
 
 const renderDatePickerMenu = (
-  props?: Partial<DatePickerMenuProps>,
-  context?: Partial<DatePickerProviderProps>,
+  props?: Partial<DatePickerMenuProps> | null,
+  singleContext?: Partial<SingleDateProviderProps> | null,
+  context?: Partial<DatePickerProviderProps> | null,
 ) => {
   const result = render(
     <DatePickerProvider
-      value={{ ...defaultDatePickerContext, ...context, initialOpen: true }}
+      {...defaultDatePickerContext}
+      {...context}
+      initialOpen={true}
     >
-      <DatePickerMenu value={null} onCellClick={() => {}} {...props} />,
+      <SingleDateProvider
+        value={null}
+        setValue={() => {}}
+        handleValidation={undefined}
+        {...singleContext}
+      >
+        <DatePickerMenu {...props} />,
+      </SingleDateProvider>
     </DatePickerProvider>,
   );
 
-  const rerenderDatePickerMenu = (newProps?: Partial<DatePickerMenuProps>) =>
+  const rerenderDatePickerMenu = (
+    newProps?: Partial<DatePickerMenuProps> | null,
+    newSingleContext?: Partial<SingleDateProviderProps> | null,
+  ) =>
     result.rerender(
       <DatePickerProvider
-        value={{ ...defaultDatePickerContext, ...context, initialOpen: true }}
+        {...defaultDatePickerContext}
+        {...context}
+        initialOpen={true}
       >
-        <DatePickerMenu
+        <SingleDateProvider
           value={null}
-          onCellClick={() => {}}
-          {...({ ...props, ...newProps } as Partial<DatePickerMenuProps>)}
-        />
-        ,
+          setValue={() => {}}
+          handleValidation={undefined}
+          {...singleContext}
+          {...newSingleContext}
+        >
+          <DatePickerMenu
+            {...({ ...props, ...newProps } as Partial<DatePickerMenuProps>)}
+          />
+        </SingleDateProvider>
       </DatePickerProvider>,
     );
 
@@ -49,11 +73,11 @@ const renderDatePickerMenu = (
   ) as Array<HTMLTableCellElement>;
 
   const todayCell = calendarGrid.querySelector(
-    `[data-iso="${testToday.toISOString()}"]`,
+    `[data-iso="${getISODate(testToday)}"]`,
   );
 
   const getCellWithValue = (date: Date) =>
-    calendarGrid.querySelector(`[data-iso="${date.toISOString()}"]`);
+    calendarGrid.querySelector(`[data-iso="${getISODate(date)}"]`);
 
   return {
     ...result,
@@ -113,14 +137,18 @@ describe('packages/date-picker/date-picker-menu', () => {
     describe('when value is updated', () => {
       test('grid is labelled as the current month', () => {
         const { getByRole, rerenderDatePickerMenu } = renderDatePickerMenu();
-        rerenderDatePickerMenu({ value: newUTC(2024, Month.March, 10) });
+        rerenderDatePickerMenu(null, {
+          value: newUTC(2024, Month.March, 10),
+        });
         const grid = getByRole('grid');
         expect(grid).toHaveAttribute('aria-label', 'March 2024');
       });
       test('select menus have correct values', () => {
         const { getByLabelText, rerenderDatePickerMenu } =
           renderDatePickerMenu();
-        rerenderDatePickerMenu({ value: newUTC(2024, Month.March, 10) });
+        rerenderDatePickerMenu(null, {
+          value: newUTC(2024, Month.March, 10),
+        });
 
         const monthSelect = getByLabelText('Select month');
         const yearSelect = getByLabelText('Select year');
@@ -136,7 +164,7 @@ describe('packages/date-picker/date-picker-menu', () => {
     });
 
     test('highlight starts on current value when provided', () => {
-      const { getCellWithValue } = renderDatePickerMenu({
+      const { getCellWithValue } = renderDatePickerMenu(null, {
         value: testValue,
       });
       userEvent.tab();
@@ -148,92 +176,93 @@ describe('packages/date-picker/date-picker-menu', () => {
   describe('Keyboard navigation', () => {
     describe('Arrow Keys', () => {
       test('left arrow moves focus to the previous day', async () => {
-        const { getCellWithValue } = renderDatePickerMenu({
+        const { getCellWithValue } = renderDatePickerMenu(null, {
           value: testValue,
         });
         userEvent.tab();
         userEvent.keyboard('{arrowleft}');
-
         const prevDay = getCellWithValue(setUTCDate(testValue, 13));
-        expect(prevDay).toHaveFocus();
+
+        await waitFor(() => expect(prevDay).toHaveFocus());
       });
 
-      test('right arrow moves focus to the next day', () => {
-        const { getCellWithValue } = renderDatePickerMenu({
+      test('right arrow moves focus to the next day', async () => {
+        const { getCellWithValue } = renderDatePickerMenu(null, {
           value: testValue,
         });
         userEvent.tab();
         userEvent.keyboard('{arrowright}');
+
         const nextDay = getCellWithValue(setUTCDate(testValue, 15));
-        expect(nextDay).toHaveFocus();
+        await waitFor(() => expect(nextDay).toHaveFocus());
       });
 
-      test('up arrow moves focus to the previous week', () => {
-        const { getCellWithValue } = renderDatePickerMenu({
+      test('up arrow moves focus to the previous week', async () => {
+        const { getCellWithValue } = renderDatePickerMenu(null, {
           value: testValue,
         });
         userEvent.tab();
         userEvent.keyboard('{arrowup}');
 
         const prevWeek = getCellWithValue(setUTCDate(testValue, 7));
-        expect(prevWeek).toHaveFocus();
+        await waitFor(() => expect(prevWeek).toHaveFocus());
       });
 
-      test('down arrow moves focus to the next week', () => {
-        const { getCellWithValue } = renderDatePickerMenu({
+      test('down arrow moves focus to the next week', async () => {
+        const { getCellWithValue } = renderDatePickerMenu(null, {
           value: testValue,
         });
         userEvent.tab();
         userEvent.keyboard('{arrowdown}');
 
         const nextWeek = getCellWithValue(setUTCDate(testValue, 21));
-        expect(nextWeek).toHaveFocus();
+        await waitFor(() => expect(nextWeek).toHaveFocus());
       });
 
       describe('when next day would be out of range', () => {
-        const props = {
+        const singleCtx = {
           value: testToday,
         };
-        test('left arrow does nothing', () => {
-          const { todayCell } = renderDatePickerMenu(props, {
+        test('left arrow does nothing', async () => {
+          const { todayCell } = renderDatePickerMenu(null, singleCtx, {
             min: testToday,
           });
           userEvent.tab();
           userEvent.keyboard('{arrowleft}');
-          expect(todayCell).toHaveFocus();
+          await waitFor(() => expect(todayCell).toHaveFocus());
         });
 
-        test('right arrow does nothing', () => {
-          const { todayCell } = renderDatePickerMenu(props, {
+        test('right arrow does nothing', async () => {
+          const { todayCell } = renderDatePickerMenu(null, singleCtx, {
             max: testToday,
           });
           userEvent.tab();
           userEvent.keyboard('{arrowright}');
-          expect(todayCell).toHaveFocus();
+          await waitFor(() => expect(todayCell).toHaveFocus());
         });
 
-        test('up arrow does nothing', () => {
-          const { todayCell } = renderDatePickerMenu(props, {
+        test('up arrow does nothing', async () => {
+          const { todayCell } = renderDatePickerMenu(null, singleCtx, {
             min: addDays(testToday, -6),
           });
           userEvent.tab();
           userEvent.keyboard('{arrowup}');
-          expect(todayCell).toHaveFocus();
+          await waitFor(() => expect(todayCell).toHaveFocus());
         });
-        test('down arrow does nothing', () => {
-          const { todayCell } = renderDatePickerMenu(props, {
+        test('down arrow does nothing', async () => {
+          const { todayCell } = renderDatePickerMenu(null, singleCtx, {
             max: addDays(testToday, 6),
           });
           userEvent.tab();
           userEvent.keyboard('{arrowdown}');
-          expect(todayCell).toHaveFocus();
+          await waitFor(() => expect(todayCell).toHaveFocus());
         });
       });
 
       describe('update the displayed month', () => {
         test('left arrow updates displayed month to previous', () => {
           const value = new Date(Date.UTC(2023, Month.September, 1));
-          const { calendarGrid } = renderDatePickerMenu({ value });
+          const { calendarGrid } = renderDatePickerMenu(null, { value });
           userEvent.tab();
           userEvent.keyboard('{arrowleft}');
           expect(calendarGrid).toHaveAttribute('aria-label', 'August 2023');
@@ -241,7 +270,7 @@ describe('packages/date-picker/date-picker-menu', () => {
 
         test('right arrow updates displayed month to next', () => {
           const value = new Date(Date.UTC(2023, Month.September, 30));
-          const { calendarGrid } = renderDatePickerMenu({ value });
+          const { calendarGrid } = renderDatePickerMenu(null, { value });
           userEvent.tab();
           userEvent.keyboard('{arrowright}');
           expect(calendarGrid).toHaveAttribute('aria-label', 'October 2023');
@@ -249,7 +278,7 @@ describe('packages/date-picker/date-picker-menu', () => {
 
         test('up arrow updates displayed month to previous', () => {
           const value = new Date(Date.UTC(2023, Month.September, 6));
-          const { calendarGrid } = renderDatePickerMenu({ value });
+          const { calendarGrid } = renderDatePickerMenu(null, { value });
           userEvent.tab();
           userEvent.keyboard('{arrowup}');
           expect(calendarGrid).toHaveAttribute('aria-label', 'August 2023');
@@ -257,14 +286,16 @@ describe('packages/date-picker/date-picker-menu', () => {
 
         test('down arrow updates displayed month to next', () => {
           const value = new Date(Date.UTC(2023, Month.September, 25));
-          const { calendarGrid } = renderDatePickerMenu({ value });
+          const { calendarGrid } = renderDatePickerMenu(null, { value });
           userEvent.tab();
           userEvent.keyboard('{arrowdown}');
           expect(calendarGrid).toHaveAttribute('aria-label', 'October 2023');
         });
 
         test('does not update month when month does not need to change', () => {
-          const { calendarGrid } = renderDatePickerMenu({ value: testValue });
+          const { calendarGrid } = renderDatePickerMenu(null, {
+            value: testValue,
+          });
           userEvent.tab();
           userEvent.keyboard('{arrowleft}{arrowright}{arrowup}{arrowdown}');
           expect(calendarGrid).toHaveAttribute('aria-label', 'September 2023');
@@ -272,37 +303,54 @@ describe('packages/date-picker/date-picker-menu', () => {
       });
 
       describe('when month should be updated', () => {
-        test('left arrow focuses the previous day', () => {
-          const value = new Date(Date.UTC(2023, Month.September, 1));
-          const { getCellWithValue } = renderDatePickerMenu({ value });
+        test('left arrow focuses the previous day', async () => {
+          const value = newUTC(2023, Month.September, 1);
+          const { getCellWithValue } = renderDatePickerMenu(null, {
+            value,
+          });
           userEvent.tab();
           userEvent.keyboard('{arrowleft}');
-          const highlightedCell = getCellWithValue(subDays(value, 1));
-          expect(highlightedCell).toHaveFocus();
+          const highlightedCell = getCellWithValue(
+            newUTC(2023, Month.August, 31),
+          );
+
+          await waitFor(() => expect(highlightedCell).toHaveFocus());
         });
-        test('right arrow focuses the next day', () => {
-          const value = new Date(Date.UTC(2023, Month.September, 30));
-          const { getCellWithValue } = renderDatePickerMenu({ value });
+        test('right arrow focuses the next day', async () => {
+          const value = newUTC(2023, Month.September, 30);
+          const { getCellWithValue } = renderDatePickerMenu(null, {
+            value,
+          });
           userEvent.tab();
           userEvent.keyboard('{arrowright}');
-          const highlightedCell = getCellWithValue(addDays(value, 1));
-          expect(highlightedCell).toHaveFocus();
+          const highlightedCell = getCellWithValue(
+            newUTC(2023, Month.October, 1),
+          );
+          await waitFor(() => expect(highlightedCell).toHaveFocus());
         });
-        test('up arrow focuses the previous week', () => {
-          const value = new Date(Date.UTC(2023, Month.September, 6));
-          const { getCellWithValue } = renderDatePickerMenu({ value });
+        test('up arrow focuses the previous week', async () => {
+          const value = newUTC(2023, Month.September, 7);
+          const { getCellWithValue } = renderDatePickerMenu(null, {
+            value,
+          });
           userEvent.tab();
           userEvent.keyboard('{arrowup}');
-          const highlightedCell = getCellWithValue(subDays(value, 7));
-          expect(highlightedCell).toHaveFocus();
+          const highlightedCell = getCellWithValue(
+            newUTC(2023, Month.August, 31),
+          );
+          await waitFor(() => expect(highlightedCell).toHaveFocus());
         });
-        test('down arrow focuses the next week', () => {
-          const value = new Date(Date.UTC(2023, Month.September, 25));
-          const { getCellWithValue } = renderDatePickerMenu({ value });
+        test('down arrow focuses the next week', async () => {
+          const value = newUTC(2023, Month.September, 24);
+          const { getCellWithValue } = renderDatePickerMenu(null, {
+            value,
+          });
           userEvent.tab();
           userEvent.keyboard('{arrowdown}');
-          const highlightedCell = getCellWithValue(addDays(value, 7));
-          expect(highlightedCell).toHaveFocus();
+          const highlightedCell = getCellWithValue(
+            newUTC(2023, Month.October, 1),
+          );
+          await waitFor(() => expect(highlightedCell).toHaveFocus());
         });
       });
     });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 88ebc4b5a3..833c4a3417 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -18,12 +18,18 @@ import {
 } from '../../shared/components/DatePickerContext';
 import { Month } from '../../shared/constants';
 import { newUTC, pickAndOmit } from '../../shared/utils';
+import {
+  SingleDateContextProps,
+  SingleDateProvider,
+} from '../SingleDateContext';
 
 import { DatePickerMenu } from './DatePickerMenu';
 import { DatePickerMenuProps } from './DatePickerMenu.types';
 
 const mockToday = newUTC(2023, Month.September, 14);
-type DecoratorArgs = DatePickerMenuProps & DatePickerContextProps;
+type DecoratorArgs = DatePickerMenuProps &
+  SingleDateContextProps &
+  DatePickerContextProps;
 
 const MenuDecorator: Decorator = (Story: StoryFn, ctx: any) => {
   const [{ darkMode, ...contextProps }, { ...props }] = pickAndOmit(
@@ -37,11 +43,9 @@ const MenuDecorator: Decorator = (Story: StoryFn, ctx: any) => {
   return (
     <LeafyGreenProvider darkMode={darkMode}>
       <DatePickerProvider
-        value={{
-          ...defaultDatePickerContext,
-          ...contextProps,
-          initialOpen: true,
-        }}
+        {...defaultDatePickerContext}
+        {...contextProps}
+        initialOpen={true}
       >
         <Story {...props} />
       </DatePickerProvider>
@@ -82,15 +86,10 @@ export const Basic: DatePickerMenuStoryType = {
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
     return (
-      <>
+      <SingleDateProvider value={value} setValue={setValue}>
         <code ref={refEl}>refEl</code>
-        <DatePickerMenu
-          {...props}
-          refEl={refEl}
-          value={value}
-          onCellClick={setValue}
-        />
-      </>
+        <DatePickerMenu {...props} refEl={refEl} />
+      </SingleDateProvider>
     );
   },
 };
@@ -100,15 +99,15 @@ export const WithValue: DatePickerMenuStoryType = {
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
     return (
-      <div style={{ minHeight: '50vh' }}>
-        <InlineCode ref={refEl}>refEl</InlineCode>
-        <DatePickerMenu
-          {...props}
-          refEl={refEl}
-          value={newUTC(2023, Month.September, 10)}
-          onCellClick={() => {}}
-        />
-      </div>
+      <SingleDateProvider
+        value={newUTC(2023, Month.September, 10)}
+        setValue={() => {}}
+      >
+        <div style={{ minHeight: '50vh' }}>
+          <InlineCode ref={refEl}>refEl</InlineCode>
+          <DatePickerMenu {...props} refEl={refEl} />
+        </div>
+      </SingleDateProvider>
     );
   },
 };
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index aaeb6e8def..b7cdd22804 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -1,22 +1,18 @@
 import React, {
   forwardRef,
   KeyboardEventHandler,
+  useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
-  useState,
 } from 'react';
 import { addDays, subDays } from 'date-fns';
 
-import {
-  useDynamicRefs,
-  useForwardedRef,
-  usePrevious,
-} from '@leafygreen-ui/hooks';
+import { useForwardedRef, usePrevious } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
 import { spacing } from '@leafygreen-ui/tokens';
 
+import { DateType } from '../../shared';
 import {
   CalendarCell,
   CalendarCellState,
@@ -27,11 +23,13 @@ import { MenuWrapper } from '../../shared/components/MenuWrapper';
 import {
   getFirstOfMonth,
   getFullMonthLabel,
+  getISODate,
   getUTCDateString,
   isSameUTCDay,
   isSameUTCMonth,
   setToUTCMidnight,
 } from '../../shared/utils';
+import { useSingleDateContext } from '../SingleDateContext';
 
 import { getNewHighlight } from './utils/getNewHighlight';
 import {
@@ -43,45 +41,58 @@ import { DatePickerMenuProps } from './DatePickerMenu.types';
 import { DatePickerMenuHeader } from './DatePickerMenuHeader';
 
 export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
-  (
-    { value, onCellClick, handleValidation, ...rest }: DatePickerMenuProps,
-    fwdRef,
-  ) => {
+  ({ onKeyDown, ...rest }: DatePickerMenuProps, fwdRef) => {
     const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
-    const { isInRange, isOpen, setOpen } = useDatePickerContext();
+    const { isInRange, isOpen, setIsDirty } = useDatePickerContext();
+    const {
+      refs,
+      value,
+      setValue,
+      handleValidation,
+      month,
+      setMonth: setDisplayMonth,
+      highlight,
+      closeMenu,
+      setHighlight,
+      getCellWithValue,
+      getHighlightedCell,
+    } = useSingleDateContext();
 
-    // TODO: https://jira.mongodb.org/browse/LG-3666
-    // useDynamicRefs may overflow if a user navigates to too many months.
-    // consider purging the refs map within the hook
-    const cellRefs = useDynamicRefs<HTMLTableCellElement>();
     const ref = useForwardedRef(fwdRef, null);
+    const cellRefs = refs.calendarCellRefs;
     const headerRef = useRef<HTMLDivElement>(null);
     const calendarRef = useRef<HTMLTableElement>(null);
 
-    const [month, setDisplayMonth] = useState<Date>(
-      value ?? getFirstOfMonth(today),
-    );
-    const [highlight, setHighlight] = useState<Date | null>(value || today);
-
     const prevValue = usePrevious(value);
-    const prevHighlight = usePrevious(highlight);
+    // const prevOpen = usePrevious(isOpen);
+    // const prevHighlight = usePrevious(highlight);
 
     const monthLabel = getFullMonthLabel(month);
 
+    // focuses the DOM element for the appropriate cell
+    const focusCellWithDate = useCallback(
+      (date: DateType) => {
+        requestAnimationFrame(() => {
+          const highlightedCell = getCellWithValue(date);
+          highlightedCell?.focus();
+        });
+      },
+      [getCellWithValue],
+    );
+
     /** setDisplayMonth with side effects */
     const updateMonth = (newMonth: Date) => {
       if (isSameUTCMonth(newMonth, month)) {
         return;
       }
-
+      setDisplayMonth(newMonth);
       const newHighlight = getNewHighlight(highlight, month, newMonth);
       const shouldUpdateHighlight = !isSameUTCDay(highlight, newHighlight);
 
       if (newHighlight && shouldUpdateHighlight) {
         setHighlight(newHighlight);
+        focusCellWithDate(newHighlight);
       }
-
-      setDisplayMonth(newMonth);
     };
 
     /** setHighlight with side effects */
@@ -90,21 +101,10 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       if (!isSameUTCMonth(month, newHighlight)) {
         setDisplayMonth(newHighlight);
       }
-
-      // keep track of the highlighted cell
       setHighlight(newHighlight);
+      focusCellWithDate(newHighlight);
     };
 
-    /**
-     * When highlight changes, after the DOM changes, focus the relevant cell
-     */
-    useLayoutEffect(() => {
-      if (highlight && !isSameUTCDay(highlight, prevHighlight)) {
-        const highlightCellRef = cellRefs(highlight.toISOString());
-        highlightCellRef.current?.focus();
-      }
-    }, [cellRefs, highlight, prevHighlight]);
-
     /**
      * If the new value is not the current month, update the month
      */
@@ -116,7 +116,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       ) {
         setDisplayMonth(getFirstOfMonth(value));
       }
-    }, [month, prevValue, value]);
+    }, [month, prevValue, setDisplayMonth, value]);
 
     /** Returns the current state of the cell */
     const getCellState = (cellDay: Date | null): CalendarCellState => {
@@ -131,10 +131,24 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       return CalendarCellState.Disabled;
     };
 
+    /** Called when any calendar cell is clicked */
+    const handleCalendarCellClick = (cellValue: Date) => {
+      if (!isSameUTCDay(cellValue, value)) {
+        // when the value is changed via cell,
+        // we trigger validation every time
+        handleValidation?.(cellValue);
+        setIsDirty(true);
+        // finally we update the component value
+        setValue(cellValue);
+      }
+      // and close the menu
+      closeMenu();
+    };
+
     /** Creates a click handler for a specific cell date */
     const cellClickHandlerForDay = (day: Date) => () => {
       if (isInRange(day)) {
-        onCellClick(day);
+        handleCalendarCellClick(day);
       }
     };
 
@@ -147,16 +161,16 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       if (e.key === keyMap.Tab) {
         const currentFocus = document.activeElement;
 
-        const highlightKey = highlight?.toISOString();
-        const highlightedCellElement = highlightKey
-          ? cellRefs(highlightKey)?.current
-          : undefined;
+        const highlightedCellElement = getHighlightedCell();
         const rightChevronElement = headerRef.current?.lastElementChild;
 
-        if (!e.shiftKey && currentFocus === rightChevronElement) {
+        const isFocusOnRightChevron = currentFocus === rightChevronElement;
+        const isFocusOnCell = currentFocus === highlightedCellElement;
+
+        if (!e.shiftKey && isFocusOnRightChevron) {
           (highlightedCellElement as HTMLElement)?.focus();
           e.preventDefault();
-        } else if (e.shiftKey && currentFocus === highlightedCellElement) {
+        } else if (e.shiftKey && isFocusOnCell) {
           (rightChevronElement as HTMLElement)?.focus();
           e.preventDefault();
         }
@@ -190,11 +204,6 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
           break;
         }
 
-        case keyMap.Escape:
-          setOpen(false);
-          handleValidation?.(value);
-          break;
-
         // The isInRange check below prevents tab presses from propagating up so we add a switch case for tab presses where we can then call handleWrapperTabKeyPress which will handle trapping focus
         case keyMap.Tab:
           handleWrapperTabKeyPress(e);
@@ -205,11 +214,14 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       }
 
       // if nextHighlight is in range
-      if (isInRange(nextHighlight)) {
+      if (isInRange(nextHighlight) && !isSameUTCDay(nextHighlight, highlight)) {
         updateHighlight(nextHighlight);
         // Prevent the parent keydown handler from being called
         e.stopPropagation();
       }
+
+      // call any handler that was passed in
+      onKeyDown?.(e);
     };
 
     return (
@@ -219,8 +231,8 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
         active={isOpen}
         spacing={spacing[1]}
         className={menuWrapperStyles}
-        onKeyDown={handleWrapperTabKeyPress}
         usePortal
+        onKeyDown={handleWrapperTabKeyPress}
         {...rest}
       >
         <div className={menuContentStyles}>
@@ -240,13 +252,13 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
             {(day, i) => (
               <CalendarCell
                 key={i}
-                ref={cellRefs(day.toISOString())}
+                ref={cellRefs(getISODate(day))}
                 aria-label={getUTCDateString(day)}
                 isHighlighted={isSameUTCDay(day, highlight)}
                 isCurrent={isSameUTCDay(day, today)}
                 state={getCellState(day)}
                 onClick={cellClickHandlerForDay(day)}
-                data-iso={day.toISOString()}
+                data-iso={getISODate(day)}
               >
                 {day.getUTCDate()}
               </CalendarCell>
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
index 768d00d35d..1a21370038 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
@@ -2,12 +2,6 @@ import { HTMLElementProps } from '@leafygreen-ui/lib';
 import { PopoverProps } from '@leafygreen-ui/popover';
 import { PortalControlProps } from '@leafygreen-ui/popover';
 
-import { DatePickerProps } from '..';
-
 export type DatePickerMenuProps = PortalControlProps &
-  Pick<PopoverProps, 'refEl'> &
-  Pick<DatePickerProps, 'handleValidation' | 'value'> &
-  HTMLElementProps<'div'> & {
-    /** Callback fired when a cell is clicked */
-    onCellClick: (cellDate: Date) => void;
-  };
+  Omit<PopoverProps, 'children'> &
+  HTMLElementProps<'div'>;
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
index af8027f301..220088f64c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
@@ -9,7 +9,6 @@ import range from 'lodash/range';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import { usePopoverContext } from '@leafygreen-ui/leafygreen-provider';
-import { keyMap } from '@leafygreen-ui/lib';
 import { Option, Select } from '@leafygreen-ui/select';
 
 import { useDatePickerContext } from '../../../shared/components/DatePickerContext';
@@ -35,109 +34,103 @@ type DatePickerMenuHeaderProps = {
 export const DatePickerMenuHeader = forwardRef<
   HTMLDivElement,
   DatePickerMenuHeaderProps
->(
-  (
-    { month, setMonth, value, handleValidation }: DatePickerMenuHeaderProps,
-    fwdRef,
-  ) => {
-    const { min, max, isInRange, setOpen } = useDatePickerContext();
-    const { isPopoverOpen } = usePopoverContext();
+>(({ month, setMonth }: DatePickerMenuHeaderProps, fwdRef) => {
+  const { min, max, isInRange } = useDatePickerContext();
+  const { isPopoverOpen: isSelectMenuOpen } = usePopoverContext();
 
-    const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
+  const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
 
-    const updateMonth = (newMonth: Date) => {
-      // TODO: may need to update this function to check if the months are in range
-      // (could cause errors when the min date is near the end of the month)
-      if (isInRange(newMonth)) {
-        setMonth(newMonth);
-      } else if (isBefore(newMonth, min)) {
-        // if the selected month is not in range,
-        // set the month to the first or last possible month
-        setMonth(min);
-      } else {
-        setMonth(max);
-      }
-    };
-
-    /**
-     * Calls the `updateMonth` helper with the appropriate month when a Chevron is clicked
-     */
-    const handleChevronClick =
-      (dir: 'left' | 'right'): MouseEventHandler<HTMLButtonElement> =>
-      e => {
-        e.stopPropagation();
-        e.preventDefault();
-        const increment = dir === 'left' ? -1 : 1;
-        const newMonthIndex = month.getUTCMonth() + increment;
-        const newMonth = setUTCMonth(month, newMonthIndex);
-        updateMonth(newMonth);
-      };
+  const updateMonth = (newMonth: Date) => {
+    // TODO: may need to update this function to check if the months are in range
+    // (could cause errors when the min date is near the end of the month)
+    if (isInRange(newMonth)) {
+      setMonth(newMonth);
+    } else if (isBefore(newMonth, min)) {
+      // if the selected month is not in range,
+      // set the month to the first or last possible month
+      setMonth(min);
+    } else {
+      setMonth(max);
+    }
+  };
 
-    /**
-     * Ensure that the date picker menu will not close when a select menu is open, focus is inside the select menu, and the ESC key is pressed.
-     */
-    const handleEcsPress: KeyboardEventHandler<HTMLDivElement> = e => {
-      // `isPopoverOpen` updated value is not accessible in `<DatePickerMenu>` since the `<PopoverProvider>` is inside `<MenuWrapper>`
-      if (!isPopoverOpen && e.key === keyMap.Escape) {
-        setOpen(false);
-        handleValidation?.(value);
-      }
+  /**
+   * Calls the `updateMonth` helper with the appropriate month when a Chevron is clicked
+   */
+  const handleChevronClick =
+    (dir: 'left' | 'right'): MouseEventHandler<HTMLButtonElement> =>
+    e => {
+      e.stopPropagation();
+      e.preventDefault();
+      const increment = dir === 'left' ? -1 : 1;
+      const newMonthIndex = month.getUTCMonth() + increment;
+      const newMonth = setUTCMonth(month, newMonthIndex);
+      updateMonth(newMonth);
     };
 
-    return (
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-      <div ref={fwdRef} className={menuHeaderStyles} onKeyDown={handleEcsPress}>
-        <IconButton
-          aria-label="Previous month"
-          disabled={isSameUTCMonth(month, min)}
-          onClick={handleChevronClick('left')}
+  /**
+   * Ensure that the date picker menu will not close when a select menu is open, focus is inside the select menu, and the ESC key is pressed.
+   */
+  const handleEcsPress: KeyboardEventHandler<HTMLDivElement> = e => {
+    // `isSelectMenuOpen` provided by `PopoverProvider` is `true` if any popover _within_ the menu is open
+    if (isSelectMenuOpen) {
+      e.stopPropagation();
+    }
+  };
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div ref={fwdRef} className={menuHeaderStyles} onKeyDown={handleEcsPress}>
+      <IconButton
+        aria-label="Previous month"
+        disabled={isSameUTCMonth(month, min)}
+        onClick={handleChevronClick('left')}
+      >
+        <Icon glyph="ChevronLeft" />
+      </IconButton>
+      <div className={menuHeaderSelectContainerStyles}>
+        <Select
+          {...selectElementProps}
+          aria-label="Select month"
+          value={month.getUTCMonth().toString()}
+          onChange={m => {
+            const newMonth = setUTCMonth(month, Number(m));
+            updateMonth(newMonth);
+          }}
+          className={selectInputWidthStyles}
         >
-          <Icon glyph="ChevronLeft" />
-        </IconButton>
-        <div className={menuHeaderSelectContainerStyles}>
-          <Select
-            {...selectElementProps}
-            aria-label="Select month"
-            value={month.getUTCMonth().toString()}
-            onChange={m => {
-              const newMonth = setUTCMonth(month, Number(m));
-              updateMonth(newMonth);
-            }}
-            className={selectInputWidthStyles}
-          >
-            {Months.map((m, i) => (
-              <Option value={i.toString()} key={m.short}>
-                {m.short}
-              </Option>
-            ))}
-          </Select>
-          <Select
-            {...selectElementProps}
-            aria-label="Select year"
-            value={month.getUTCFullYear().toString()}
-            onChange={y => {
-              const newMonth = setUTCYear(month, Number(y));
-              updateMonth(newMonth);
-            }}
-            className={selectInputWidthStyles}
-          >
-            {yearOptions.map(y => (
-              <Option value={y.toString()} key={y}>
-                {y}
-              </Option>
-            ))}
-          </Select>
-        </div>
-        <IconButton
-          aria-label="Next month"
-          disabled={isSameUTCMonth(month, max)}
-          onClick={handleChevronClick('right')}
+          {Months.map((m, i) => (
+            <Option value={i.toString()} key={m.short}>
+              {m.short}
+            </Option>
+          ))}
+        </Select>
+        <Select
+          {...selectElementProps}
+          aria-label="Select year"
+          value={month.getUTCFullYear().toString()}
+          onChange={y => {
+            const newMonth = setUTCYear(month, Number(y));
+            updateMonth(newMonth);
+          }}
+          className={selectInputWidthStyles}
         >
-          <Icon glyph="ChevronRight" />
-        </IconButton>
+          {yearOptions.map(y => (
+            <Option value={y.toString()} key={y}>
+              {y}
+            </Option>
+          ))}
+        </Select>
       </div>
-    );
-  },
-);
+      <IconButton
+        aria-label="Next month"
+        disabled={isSameUTCMonth(month, max)}
+        onClick={handleChevronClick('right')}
+      >
+        <Icon glyph="ChevronRight" />
+      </IconButton>
+    </div>
+  );
+});
 
 DatePickerMenuHeader.displayName = 'DatePickerMenuHeader';
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
new file mode 100644
index 0000000000..c6242c0fbd
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
@@ -0,0 +1,180 @@
+import React, {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import { usePrevious } from '@leafygreen-ui/hooks';
+
+import {
+  DateType,
+  getFirstOfMonth,
+  setToUTCMidnight,
+  useDatePickerContext,
+} from '../../shared';
+import { getISODate, isSameUTCDay } from '../../shared/utils';
+import { getInitialHighlight } from '../utils/getInitialHighlight';
+
+import {
+  SingleDateContextProps,
+  SingleDateProviderProps,
+} from './SingleDateContext.types';
+import { useDateRangeComponentRefs } from './useDatePickerComponentRefs';
+
+const SingleDateContext = createContext<SingleDateContextProps>(
+  {} as SingleDateContextProps,
+);
+
+/**
+ * A provider for context values in a single DatePicker
+ */
+export const SingleDateProvider = ({
+  children,
+  value,
+  setValue: _setValue,
+  handleValidation,
+}: PropsWithChildren<SingleDateProviderProps>) => {
+  const refs = useDateRangeComponentRefs();
+  const { isOpen, setOpen } = useDatePickerContext();
+  const prevValue = usePrevious(value);
+
+  const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
+
+  /**
+   * Keep track of the displayed month
+   */
+  const [month, _setMonth] = useState<Date>(getFirstOfMonth(value ?? today));
+
+  /**
+   * Keep track of the element the user is highlighting with the keyboard
+   */
+  const [highlight, _setHighlight] = useState<DateType>(
+    getInitialHighlight(value, today),
+  );
+
+  /***********
+   * SETTERS *
+   ***********/
+
+  /**
+   * Set the value and run side effects here
+   */
+  const setValue = (newVal?: DateType) => {
+    _setValue(newVal ?? null);
+    setMonth(getFirstOfMonth(newVal ?? today));
+  };
+
+  /**
+   * Set the displayed month and handle side effects
+   */
+  const setMonth = useCallback((newMonth: Date) => {
+    _setMonth(newMonth);
+  }, []);
+
+  /**
+   * Set the `highlight` value & handle side effects
+   */
+  const setHighlight = useCallback((newHighlight: DateType) => {
+    _setHighlight(newHighlight);
+  }, []);
+
+  /**
+   * Opens the menu and handles side effects
+   */
+  const openMenu = () => {
+    setOpen(true);
+  };
+
+  /** Closes the menu and handles side effects */
+  const closeMenu = () => {
+    setOpen(false);
+
+    // Perform side effects once the state has settle
+    requestAnimationFrame(() => {
+      // Return focus to the calendar button
+      refs.calendarButtonRef.current?.focus();
+      // update month to something valid
+      setMonth(getFirstOfMonth(value ?? today));
+      // update highlight to something valid
+      setHighlight(getInitialHighlight(value, today));
+    });
+  };
+
+  /** Toggles the menu and handles appropriate side effects */
+  const toggleMenu = () => {
+    if (isOpen) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  };
+
+  /***********
+   * GETTERS *
+   ***********/
+
+  /**
+   * Returns the cell element with the provided value
+   */
+  const getCellWithValue = (date: DateType): HTMLTableCellElement | null => {
+    const highlightKey = getISODate(date);
+    const cell = highlightKey
+      ? refs.calendarCellRefs(highlightKey)?.current
+      : null;
+    return cell;
+  };
+
+  /**
+   * Returns the cell element with the current highlight value
+   */
+  const getHighlightedCell = () => {
+    return getCellWithValue(highlight);
+  };
+
+  /****************
+   * SIDE EFFECTS *
+   ****************/
+
+  /**
+   * If `value` prop changes, update the month
+   */
+  useEffect(() => {
+    if (!isSameUTCDay(value, prevValue)) {
+      setMonth(getFirstOfMonth(value ?? today));
+    }
+  }, [prevValue, setMonth, today, value]);
+
+  return (
+    <SingleDateContext.Provider
+      value={{
+        refs,
+        today,
+        value,
+        setValue,
+        handleValidation,
+        closeMenu,
+        openMenu,
+        toggleMenu,
+        month,
+        setMonth,
+        highlight,
+        setHighlight,
+        getHighlightedCell,
+        getCellWithValue,
+      }}
+    >
+      {children}
+    </SingleDateContext.Provider>
+  );
+};
+
+/**
+ * Access single date picker context values
+ */
+export const useSingleDateContext = () => {
+  return useContext(SingleDateContext);
+};
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
new file mode 100644
index 0000000000..b4925b6a72
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
@@ -0,0 +1,90 @@
+import { DynamicRefGetter } from '@leafygreen-ui/hooks';
+
+import { DateType, SegmentRefs } from '../../shared';
+import { DatePickerProps } from '../DatePicker.types';
+
+export interface DatePickerComponentRefs {
+  segmentRefs: SegmentRefs;
+  calendarCellRefs: DynamicRefGetter<HTMLTableCellElement>;
+  calendarButtonRef: React.RefObject<HTMLButtonElement>;
+}
+
+export interface SingleDateContextProps {
+  /**
+   * Ref objects for important date picker elements
+   */
+  refs: DatePickerComponentRefs;
+
+  /** The current value of the date picker */
+  value: DateType | undefined;
+
+  /**
+   * Dispatches a setter for the date picker value.
+   * Performs common side-effects
+   */
+  setValue: (newVal: DateType | undefined) => void;
+
+  /**
+   * Calls the `handleValidation` function provided by the consumer
+   */
+  handleValidation: DatePickerProps['handleValidation'];
+
+  /**
+   * The current date, at UTC midnight
+   */
+  today: Date;
+
+  /**
+   * The currently displayed month in the menu
+   */
+  month: Date;
+
+  /**
+   * Sets the current month in the menu,
+   * and performs any side-effects
+   */
+  setMonth: (newMonth: Date) => void;
+
+  /**
+   * The Date value for the calendar cell in the menu that has, or should have focus
+   */
+  highlight: DateType;
+
+  /**
+   * Sets the value of the calendar cell that should have focus,
+   * and performs any side-effects
+   */
+  setHighlight: (newHighlight: DateType) => void;
+
+  /**
+   * Opens the menu and handles side effects
+   */
+  openMenu: () => void;
+
+  /**
+   * Closes the menu and handles side effects
+   */
+  closeMenu: () => void;
+
+  /**
+   *  Toggles the menu and handles appropriate side effects
+   */
+  toggleMenu: () => void;
+
+  /**
+   * Returns the calendar cell element that has, or should have focus
+   */
+  getHighlightedCell: () => HTMLTableCellElement | null | undefined;
+
+  /**
+   * Returns the calendar cell with the provided value
+   */
+  getCellWithValue: (date: DateType) => HTMLTableCellElement | null | undefined;
+}
+
+/** Props passed into the provider component */
+export interface SingleDateProviderProps {
+  value: DateType | undefined;
+  setValue: (newVal: DateType) => void;
+  handleValidation?: DatePickerProps['handleValidation'];
+}
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/index.ts b/packages/date-picker/src/DatePicker/SingleDateContext/index.ts
new file mode 100644
index 0000000000..ca13524a7e
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/index.ts
@@ -0,0 +1,5 @@
+export { SingleDateProvider, useSingleDateContext } from './SingleDateContext';
+export {
+  type SingleDateContextProps,
+  type SingleDateProviderProps,
+} from './SingleDateContext.types';
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/useDatePickerComponentRefs.ts b/packages/date-picker/src/DatePicker/SingleDateContext/useDatePickerComponentRefs.ts
new file mode 100644
index 0000000000..0e61b23268
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/useDatePickerComponentRefs.ts
@@ -0,0 +1,25 @@
+import { useRef } from 'react';
+
+import { useDynamicRefs } from '@leafygreen-ui/hooks';
+
+import { useSegmentRefs } from '../../shared/hooks';
+
+import { DatePickerComponentRefs } from './SingleDateContext.types';
+
+/** Creates `ref` objects for any & all relevant component elements */
+export const useDateRangeComponentRefs = (): DatePickerComponentRefs => {
+  const segmentRefs = useSegmentRefs();
+
+  // TODO: https://jira.mongodb.org/browse/LG-3666
+  // useDynamicRefs may overflow if a user navigates to too many months.
+  // consider purging the refs map within the hook
+  const calendarCellRefs = useDynamicRefs<HTMLTableCellElement>();
+
+  const calendarButtonRef = useRef<HTMLButtonElement>(null);
+
+  return {
+    segmentRefs,
+    calendarCellRefs,
+    calendarButtonRef,
+  };
+};
diff --git a/packages/date-picker/src/DatePicker/utils/getInitialHighlight/getInitialHighlight.spec.ts b/packages/date-picker/src/DatePicker/utils/getInitialHighlight/getInitialHighlight.spec.ts
new file mode 100644
index 0000000000..09e9c278b3
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/utils/getInitialHighlight/getInitialHighlight.spec.ts
@@ -0,0 +1,18 @@
+import { Month, newUTC } from '../../../shared';
+
+import { getInitialHighlight } from '.';
+
+describe('packages/date-picker/utils/getInitialHighlight', () => {
+  const value = newUTC(2023, Month.September, 10);
+  const today = newUTC(2023, Month.December, 26);
+
+  test('returns `value` when provided', () => {
+    const highlight = getInitialHighlight(value, today);
+    expect(highlight).toBe(value);
+  });
+
+  test('returns `today` if no value is provided', () => {
+    const highlight = getInitialHighlight(null, today);
+    expect(highlight).toBe(today);
+  });
+});
diff --git a/packages/date-picker/src/DatePicker/utils/getInitialHighlight/index.ts b/packages/date-picker/src/DatePicker/utils/getInitialHighlight/index.ts
new file mode 100644
index 0000000000..56f453f6d0
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/utils/getInitialHighlight/index.ts
@@ -0,0 +1,10 @@
+import { DateType, isValidDate } from '../../../shared';
+
+/** Returns the initial highlight value when the date picker is opened */
+export const getInitialHighlight = (
+  value: DateType | undefined,
+  today: Date,
+) => {
+  if (isValidDate(value)) return value;
+  return today;
+};
diff --git a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
index eb1292d296..1d6ad1cb90 100644
--- a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
+++ b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
@@ -14,15 +14,26 @@ const renderTestComponent = () => {
 
   const result = render(
     <>
-      <input id="day" ref={segmentRefs.day} />
-      <input id="month" ref={segmentRefs.month} />
-      <input id="year" ref={segmentRefs.year} />
+      <input data-testid="day" ref={segmentRefs.day} />
+      <input data-testid="month" ref={segmentRefs.month} />
+      <input data-testid="year" ref={segmentRefs.year} />
     </>,
   );
 
+  const elements = {
+    day: result.getByTestId('day'),
+    month: result.getByTestId('month'),
+    year: result.getByTestId('year'),
+  } as {
+    day: HTMLInputElement;
+    month: HTMLInputElement;
+    year: HTMLInputElement;
+  };
+
   return {
     ...result,
     segmentRefs,
+    elements,
   };
 };
 
@@ -35,67 +46,141 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
     { type: 'day', value: '31' },
   ];
 
-  let segmentRefs: SegmentRefs;
-  beforeEach(() => {
-    segmentRefs = renderTestComponent().segmentRefs;
-  });
+  describe('from ref', () => {
+    let segmentRefs: SegmentRefs;
+    beforeEach(() => {
+      segmentRefs = renderTestComponent().segmentRefs;
+    });
+    test('next from year => month', () => {
+      expect(
+        getRelativeSegment('next', {
+          segment: segmentRefs.year,
+          formatParts,
+          segmentRefs,
+        }),
+      ).toBe(segmentRefs.month);
+    });
+    test('next from month => day', () => {
+      expect(
+        getRelativeSegment('next', {
+          segment: segmentRefs.month,
+          formatParts,
+          segmentRefs,
+        }),
+      ).toBe(segmentRefs.day);
+    });
 
-  test('next from year => month', () => {
-    expect(
-      getRelativeSegment('next', {
-        segment: segmentRefs.year,
-        formatParts,
-        segmentRefs,
-      }),
-    ).toBe(segmentRefs.month);
-  });
-  test('next from month => day', () => {
-    expect(
-      getRelativeSegment('next', {
-        segment: segmentRefs.month,
-        formatParts,
-        segmentRefs,
-      }),
-    ).toBe(segmentRefs.day);
-  });
+    test('prev from day => month', () => {
+      expect(
+        getRelativeSegment('prev', {
+          segment: segmentRefs.day,
+          formatParts,
+          segmentRefs,
+        }),
+      ).toBe(segmentRefs.month);
+    });
 
-  test('prev from day => month', () => {
-    expect(
-      getRelativeSegment('prev', {
-        segment: segmentRefs.day,
-        formatParts,
-        segmentRefs,
-      }),
-    ).toBe(segmentRefs.month);
-  });
+    test('prev from month => year', () => {
+      expect(
+        getRelativeSegment('prev', {
+          segment: segmentRefs.month,
+          formatParts,
+          segmentRefs,
+        }),
+      ).toBe(segmentRefs.year);
+    });
 
-  test('prev from month => year', () => {
-    expect(
-      getRelativeSegment('prev', {
-        segment: segmentRefs.month,
-        formatParts,
-        segmentRefs,
-      }),
-    ).toBe(segmentRefs.year);
-  });
+    test('first = year', () => {
+      expect(
+        getRelativeSegment('first', {
+          segment: segmentRefs.day,
+          formatParts,
+          segmentRefs,
+        }),
+      ).toBe(segmentRefs.year);
+    });
 
-  test('first = year', () => {
-    expect(
-      getRelativeSegment('first', {
-        segment: segmentRefs.day,
-        formatParts,
-        segmentRefs,
-      }),
-    ).toBe(segmentRefs.year);
+    test('last = day', () => {
+      expect(
+        getRelativeSegment('last', {
+          segment: segmentRefs.year,
+          formatParts,
+          segmentRefs,
+        }),
+      ).toBe(segmentRefs.day);
+    });
   });
 
-  test('last = day', () => {
-    expect(
-      getRelativeSegment('last', {
-        segment: segmentRefs.year,
-        formatParts,
-        segmentRefs,
-      }),
-    ).toBe(segmentRefs.day);
+  describe('from element', () => {
+    let segmentRefs: SegmentRefs;
+
+    let elements: {
+      day: HTMLInputElement;
+      month: HTMLInputElement;
+      year: HTMLInputElement;
+    };
+    beforeEach(() => {
+      const result = renderTestComponent();
+      segmentRefs = result.segmentRefs;
+      elements = result.elements;
+    });
+    test('next from year => month', () => {
+      expect(
+        getRelativeSegment('next', {
+          segment: elements.year,
+          formatParts,
+          segmentRefs,
+        }),
+      ).toBe(segmentRefs.month);
+    });
+    test('next from month => day', () => {
+      expect(
+        getRelativeSegment('next', {
+          segment: elements.month,
+          formatParts,
+          segmentRefs,
+        }),
+      ).toBe(segmentRefs.day);
+    });
+
+    test('prev from day => month', () => {
+      expect(
+        getRelativeSegment('prev', {
+          segment: elements.day,
+          formatParts,
+          segmentRefs,
+        }),
+      ).toBe(segmentRefs.month);
+    });
+
+    test('prev from month => year', () => {
+      expect(
+        getRelativeSegment('prev', {
+          segment: elements.month,
+          formatParts,
+          segmentRefs,
+        }),
+      ).toBe(segmentRefs.year);
+    });
+
+    test('first = year', () => {
+      expect(
+        getRelativeSegment('first', {
+          segment: elements.day,
+          formatParts,
+          segmentRefs,
+        }),
+      ).toBe(segmentRefs.year);
+    });
+
+    test('last = day', () => {
+      expect(
+        getRelativeSegment('last', {
+          segment: elements.year,
+          formatParts,
+          segmentRefs,
+        }),
+      ).toBe(segmentRefs.day);
+    });
   });
 });
diff --git a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
index 0800258a81..44948a6063 100644
--- a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
@@ -35,7 +35,12 @@ export const getRelativeSegment = (
 
   /** The index of the reference segment relative to formatParts */
   const currentSegmentIndex: number | undefined = formatSegments.findIndex(
-    segmentName => segmentRefs[segmentName] === segment,
+    segmentName => {
+      return (
+        segmentRefs[segmentName] === segment ||
+        segmentRefs[segmentName].current === segment
+      );
+    },
   );
 
   const getRefAtIndex = (index: number) => {
@@ -61,7 +66,7 @@ export const getRelativeSegment = (
     }
 
     case 'next': {
-      if (!isUndefined(currentSegmentIndex)) {
+      if (!isUndefined(currentSegmentIndex) && currentSegmentIndex >= 0) {
         const nextSegmentIndex = Math.min(
           currentSegmentIndex + 1,
           formatSegments.length - 1,
@@ -75,7 +80,7 @@ export const getRelativeSegment = (
     }
 
     case 'prev': {
-      if (!isUndefined(currentSegmentIndex)) {
+      if (!isUndefined(currentSegmentIndex) && currentSegmentIndex >= 0) {
         const prevSegmentIndex = Math.max(currentSegmentIndex - 1, 0);
 
         const prevSegmentRef = getRefAtIndex(prevSegmentIndex);
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.spec.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.spec.tsx
index 123b27bfb5..c5bb886c14 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.spec.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.spec.tsx
@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 
 import { CalendarCell, CalendarCellState } from '.';
 
+/** Ensures valid DOM nesting when testing CalendarCells */
 const TestCellWrapper = ({ children }: PropsWithChildren) => (
   <table>
     <tbody>
@@ -13,30 +14,32 @@ const TestCellWrapper = ({ children }: PropsWithChildren) => (
 );
 
 describe('packages/date-picker/shared/calendar-cell', () => {
-  test('has `gridcell` role', () => {
-    const { queryByRole, getByTestId } = render(
-      <TestCellWrapper>
-        <CalendarCell aria-label="" />
-      </TestCellWrapper>,
-    );
-    const gridcell = queryByRole('gridcell');
-    expect(gridcell).toBeInTheDocument();
-    expect(getByTestId('tr').firstChild).toEqual(gridcell);
-  });
+  describe('Rendering', () => {
+    test('has `gridcell` role', () => {
+      const { queryByRole, getByTestId } = render(
+        <TestCellWrapper>
+          <CalendarCell aria-label="" />
+        </TestCellWrapper>,
+      );
+      const gridcell = queryByRole('gridcell');
+      expect(gridcell).toBeInTheDocument();
+      expect(getByTestId('tr').firstChild).toEqual(gridcell);
+    });
 
-  test('renders as aria-disabled', () => {
-    const clickHandler = jest.fn();
-    const { queryByRole } = render(
-      <TestCellWrapper>
-        <CalendarCell
-          aria-label=""
-          onClick={clickHandler}
-          state={CalendarCellState.Disabled}
-        />
-      </TestCellWrapper>,
-    );
-    const gridcell = queryByRole('gridcell');
-    expect(gridcell).toHaveAttribute('aria-disabled', 'true');
+    test('renders as aria-disabled', () => {
+      const clickHandler = jest.fn();
+      const { queryByRole } = render(
+        <TestCellWrapper>
+          <CalendarCell
+            aria-label=""
+            onClick={clickHandler}
+            state={CalendarCellState.Disabled}
+          />
+        </TestCellWrapper>,
+      );
+      const gridcell = queryByRole('gridcell');
+      expect(gridcell).toHaveAttribute('aria-disabled', 'true');
+    });
   });
 
   test('triggers click handler on click', () => {
@@ -51,67 +54,65 @@ describe('packages/date-picker/shared/calendar-cell', () => {
     expect(clickHandler).toHaveBeenCalled();
   });
 
-  test('triggers click handler on enter', () => {
-    const clickHandler = jest.fn();
-    const { queryByRole } = render(
-      <TestCellWrapper>
-        <CalendarCell aria-label="" onClick={clickHandler} />
-      </TestCellWrapper>,
-    );
-    const gridcell = queryByRole('gridcell');
-    gridcell!.focus();
-    userEvent.keyboard('[Enter]');
-    expect(clickHandler).toHaveBeenCalled();
-  });
+  describe('Interaction', () => {
+    const stateCases = [CalendarCellState.Default, CalendarCellState.Active];
+    describe.each(stateCases)('when cell is in %p state', state => {
+      const keypressCases = ['Enter', 'Space'];
+      test.each(keypressCases)('%p key triggers click handler', key => {
+        const clickHandler = jest.fn();
+        const { queryByRole } = render(
+          <TestCellWrapper>
+            <CalendarCell
+              aria-label=""
+              isHighlighted
+              state={state}
+              onClick={clickHandler}
+            />
+          </TestCellWrapper>,
+        );
+        const gridcell = queryByRole('gridcell');
+        gridcell!.focus();
+        userEvent.keyboard(`[${key}]`);
+        expect(clickHandler).toHaveBeenCalled();
+      });
+    });
 
-  test('triggers click handler on space', () => {
-    const clickHandler = jest.fn();
-    const { queryByRole } = render(
-      <TestCellWrapper>
-        <CalendarCell aria-label="" onClick={clickHandler} />
-      </TestCellWrapper>,
-    );
-    const gridcell = queryByRole('gridcell');
-    gridcell!.focus();
-    userEvent.keyboard('{space}');
-    expect(clickHandler).toHaveBeenCalled();
-  });
+    test('Does not fire click handler when disabled', () => {
+      const clickHandler = jest.fn();
+      const { queryByRole } = render(
+        <TestCellWrapper>
+          <CalendarCell
+            aria-label=""
+            onClick={clickHandler}
+            state={CalendarCellState.Disabled}
+          />
+        </TestCellWrapper>,
+      );
+      const gridcell = queryByRole('gridcell');
+      userEvent.click(gridcell!, {}, { skipPointerEventsCheck: true });
+      expect(clickHandler).not.toHaveBeenCalled();
+    });
 
-  test('Does not fire click handler when disabled', () => {
-    const clickHandler = jest.fn();
-    const { queryByRole } = render(
-      <TestCellWrapper>
-        <CalendarCell
-          aria-label=""
-          onClick={clickHandler}
-          state={CalendarCellState.Disabled}
-        />
-      </TestCellWrapper>,
-    );
-    const gridcell = queryByRole('gridcell');
-    userEvent.click(gridcell!, {}, { skipPointerEventsCheck: true });
-    expect(clickHandler).not.toHaveBeenCalled();
-  });
+    test('is focusable when highlighted', () => {
+      const { queryByRole } = render(
+        <TestCellWrapper>
+          <CalendarCell aria-label="" isHighlighted />
+        </TestCellWrapper>,
+      );
+      const gridcell = queryByRole('gridcell');
+      userEvent.click(gridcell!, {}, { skipPointerEventsCheck: true });
+      expect(gridcell).toHaveFocus();
+    });
 
-  test('is focusable when highlighted', () => {
-    const { queryByRole } = render(
-      <TestCellWrapper>
-        <CalendarCell aria-label="" isHighlighted />
-      </TestCellWrapper>,
-    );
-    const gridcell = queryByRole('gridcell');
-    userEvent.click(gridcell!, {}, { skipPointerEventsCheck: true });
-    expect(gridcell).toHaveFocus();
-  });
-
-  test('is not focusable when disabled', () => {
-    const { queryByRole } = render(
-      <TestCellWrapper>
-        <CalendarCell aria-label="" state={CalendarCellState.Disabled} />
-      </TestCellWrapper>,
-    );
-    const gridcell = queryByRole('gridcell');
-    userEvent.click(gridcell!, {}, { skipPointerEventsCheck: true });
-    expect(gridcell).not.toHaveFocus();
+    test('is not focusable when disabled', () => {
+      const { queryByRole } = render(
+        <TestCellWrapper>
+          <CalendarCell aria-label="" state={CalendarCellState.Disabled} />
+        </TestCellWrapper>,
+      );
+      const gridcell = queryByRole('gridcell');
+      userEvent.click(gridcell!, {}, { skipPointerEventsCheck: true });
+      expect(gridcell).not.toHaveFocus();
+    });
   });
 });
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.styles.ts b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.styles.ts
index 421b497292..40e0717b6f 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.styles.ts
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.styles.ts
@@ -5,7 +5,6 @@ import {
   fontFamilies,
   fontWeights,
   spacing,
-  transitionDuration,
   typeScales,
 } from '@leafygreen-ui/tokens';
 
@@ -201,7 +200,7 @@ export const calendarCellRangeStyles: Record<
 /**
  * Highlighted / Focus styles
  */
-const highlightSelector = '&:focus-visible, &[data-highlight="true"]'; // using a data selector lets us easily test these states
+const highlightSelector = '&:focus, &[data-highlight="true"]'; // using a data selector lets us easily test these states
 
 export const calendarCellHighlightStyles: Record<Theme, string> = {
   [Theme.Light]: css`
@@ -210,7 +209,6 @@ export const calendarCellHighlightStyles: Record<Theme, string> = {
 
       & > .${indicatorClassName} {
         box-shadow: ${calendarCellFocusRing.light};
-        transition: ease-in-out ${transitionDuration.default}ms box-shadow;
       }
     }
   `,
@@ -219,8 +217,6 @@ export const calendarCellHighlightStyles: Record<Theme, string> = {
       outline: none;
 
       & > .${indicatorClassName} {
-        transition: ease-in-out ${transitionDuration.default}ms box-shadow;
-
         box-shadow: ${calendarCellFocusRing.dark};
       }
     }
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index e00c7f61bc..195cec540d 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -6,7 +6,7 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
 import { Month } from '../../../constants';
-import { isTodayTZ, newUTC } from '../../../utils';
+import { getISODate, isTodayTZ, newUTC } from '../../../utils';
 import { Locales, TimeZones } from '../../../utils/testutils';
 import {
   DatePickerContextProps,
@@ -19,11 +19,7 @@ import { CalendarGrid } from './CalendarGrid';
 
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
   <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-    <DatePickerProvider
-      value={{
-        ...ctx?.args,
-      }}
-    >
+    <DatePickerProvider {...ctx?.args}>
       <Story />
     </DatePickerProvider>
   </LeafyGreenProvider>
@@ -83,9 +79,9 @@ export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
           aria-label="test"
           key={i}
           isCurrent={isTodayTZ(day, timeZone)}
-          isHighlighted={hovered ? hovered === day?.toISOString() : false}
-          onMouseEnter={handleHover(day?.toISOString())}
-          data-iso={day?.toISOString()}
+          isHighlighted={hovered ? hovered === getISODate(day) : false}
+          onMouseEnter={handleHover(getISODate(day))}
+          data-iso={getISODate(day)}
         >
           {day?.getUTCDate()}
         </CalendarCell>
diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
index d7540c2d24..06a2194fa0 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
@@ -85,14 +85,14 @@ export default meta;
 const Template: StoryFn<typeof DateFormField> = () => {
   return (
     <DatePickerProvider
-      value={{
+      {...{
         label: 'Label',
         description: 'Description',
         state: DatePickerState.Error,
         errorMessage: 'This is an error message',
       }}
     >
-      <DateFormField>
+      <DateFormField buttonRef={React.createRef()}>
         <input
           style={{
             border: 'none',
diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
index 276bc562e3..ec6902a65f 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
@@ -16,7 +16,13 @@ export const DateFormField = React.forwardRef<
   DateFormFieldProps
 >(
   (
-    { children, onInputClick, onIconButtonClick, ...rest }: DateFormFieldProps,
+    {
+      children,
+      onInputClick,
+      onIconButtonClick,
+      buttonRef,
+      ...rest
+    }: DateFormFieldProps,
     fwdRef,
   ) => {
     const {
@@ -47,7 +53,9 @@ export const DateFormField = React.forwardRef<
           aria-expanded={isOpen}
           aria-controls={menuId}
           onClick={onInputClick}
-          contentEnd={<CalendarButton onClick={onIconButtonClick} />}
+          contentEnd={
+            <CalendarButton ref={buttonRef} onClick={onIconButtonClick} />
+          }
         >
           {children}
         </FormFieldInputContainer>
diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.types.ts b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.types.ts
index e1c4414330..97090026eb 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.types.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.types.ts
@@ -9,4 +9,7 @@ export type DateFormFieldProps = HTMLElementProps<'div'> & {
   onInputClick?: MouseEventHandler<HTMLDivElement>;
   /** Fired then the calendar icon button is clicked */
   onIconButtonClick?: MouseEventHandler<HTMLButtonElement>;
+
+  /** A ref for the content end button */
+  buttonRef: React.RefObject<HTMLButtonElement>;
 };
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
index 90e5ac653d..09a8dbb025 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -25,7 +25,7 @@ const renderDateInputBox = (
   };
 
   const result = render(
-    <DatePickerProvider value={{ ...defaultDatePickerContext, ...context }}>
+    <DatePickerProvider {...defaultDatePickerContext} {...context}>
       <DateInputBox
         {...props}
         value={props?.value ?? null}
@@ -52,7 +52,7 @@ const renderDateInputBox = (
 };
 
 describe('packages/date-picker/shared/date-input-box', () => {
-  const testContext = {
+  const testContext: Partial<DatePickerProviderProps> = {
     dateFormat: 'iso8601',
     timeZone: 'UTC',
   };
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
index 6349f2350c..1a43f18582 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -19,11 +19,7 @@ const testDate = newUTC(1993, Month.December, 26);
 
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
   <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-    <DatePickerProvider
-      value={{
-        ...ctx?.args,
-      }}
-    >
+    <DatePickerProvider {...ctx?.args}>
       <Story />
     </DatePickerProvider>
   </LeafyGreenProvider>
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
index c42b47eaea..6059dbaa38 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
@@ -17,11 +17,15 @@ export const DatePickerContext = createContext<DatePickerContextProps>(
   defaultDatePickerContext,
 );
 
+// TODO: Consider renaming this to `SharedDatePickerContext`,
+// and use `DatePickerContext` for what's currently `SingleDateContext`
+
 /** The Provider component for DatePickerContext */
 export const DatePickerProvider = ({
   children,
-  value: { initialOpen, ...rest },
-}: PropsWithChildren<{ value: DatePickerProviderProps }>) => {
+  initialOpen,
+  ...rest
+}: PropsWithChildren<DatePickerProviderProps>) => {
   const [isOpen, setOpen] = useState<boolean>(initialOpen ?? false);
   const [isDirty, setIsDirty] = useState(false);
   const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
index 2e56146a7b..db6b48a70c 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
@@ -31,7 +31,11 @@ export interface DatePickerContextProps
   /** Whether the menu is open */
   isOpen: boolean;
 
-  /** Setter to open or close the menu */
+  /**
+   * Setter to open or close the menu
+   * @internal - Prefer using `open/close/toggleMenu`
+   * from single/range component context
+   */
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 
   /** Identifies whether the component has been interacted with */
diff --git a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
index cb78742cc5..35a32737a6 100644
--- a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
+++ b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
@@ -10,17 +10,13 @@ import Popover, { PopoverProps } from '@leafygreen-ui/popover';
 
 import { menuStyles } from './MenuWrapper.styles';
 
+export type MenuWrapperProps = PopoverProps & HTMLElementProps<'div'>;
+
 /**
  * A simple styled popover component
  */
-export const MenuWrapper = forwardRef<
-  HTMLDivElement,
-  PopoverProps & HTMLElementProps<'div'>
->(
-  (
-    { className, children, ...props }: PopoverProps & HTMLElementProps<'div'>,
-    fwdRef,
-  ) => {
+export const MenuWrapper = forwardRef<HTMLDivElement, MenuWrapperProps>(
+  ({ className, children, ...props }: MenuWrapperProps, fwdRef) => {
     const { theme } = useDarkMode();
 
     return (
diff --git a/packages/date-picker/src/shared/components/MenuWrapper/index.ts b/packages/date-picker/src/shared/components/MenuWrapper/index.ts
index 018de6fce3..792d4a3521 100644
--- a/packages/date-picker/src/shared/components/MenuWrapper/index.ts
+++ b/packages/date-picker/src/shared/components/MenuWrapper/index.ts
@@ -1 +1,2 @@
 export { MenuWrapper } from './MenuWrapper';
+export { type MenuWrapperProps } from './MenuWrapper';
diff --git a/packages/date-picker/src/shared/components/index.ts b/packages/date-picker/src/shared/components/index.ts
index 009742c5d1..9adeddaeb3 100644
--- a/packages/date-picker/src/shared/components/index.ts
+++ b/packages/date-picker/src/shared/components/index.ts
@@ -15,4 +15,4 @@ export {
   defaultDatePickerContext,
   useDatePickerContext,
 } from './DatePickerContext';
-export { MenuWrapper } from './MenuWrapper';
+export { MenuWrapper, type MenuWrapperProps } from './MenuWrapper';
diff --git a/packages/date-picker/src/shared/types.ts b/packages/date-picker/src/shared/types.ts
index c569cbf4b8..aa6e9ba254 100644
--- a/packages/date-picker/src/shared/types.ts
+++ b/packages/date-picker/src/shared/types.ts
@@ -36,7 +36,7 @@ export interface BaseDatePickerProps extends DarkModeProps {
    *
    * @default 'iso8601'
    */
-  dateFormat?: 'en-US' | 'en-UK' | 'iso8601' | `${string}-${string}`;
+  dateFormat?: 'iso8601' | `${string}-${string}`;
 
   /**
    * A valid IANA timezone string, or UTC offset.
diff --git a/packages/date-picker/src/shared/utils/getISODate/getISODate.spec.ts b/packages/date-picker/src/shared/utils/getISODate/getISODate.spec.ts
new file mode 100644
index 0000000000..deb7189971
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getISODate/getISODate.spec.ts
@@ -0,0 +1,14 @@
+import { Month } from '../../constants';
+import { newUTC } from '../newUTC';
+
+import { getISODate } from '.';
+
+describe('packages/date-picker/utils/getISODate', () => {
+  test('returns an ISO Date string', () => {
+    const d1 = newUTC(2023, Month.July, 10);
+    expect(getISODate(d1)).toEqual('2023-07-10');
+
+    const d2 = new Date('2023-11-15T02:00:00.000Z');
+    expect(getISODate(d2)).toEqual('2023-11-15');
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/getISODate/index.ts b/packages/date-picker/src/shared/utils/getISODate/index.ts
new file mode 100644
index 0000000000..6872036238
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getISODate/index.ts
@@ -0,0 +1,14 @@
+import { DateType } from '../../types';
+import { isValidDate } from '../isValidDate';
+
+/**
+ * Returns only the Date portion of the ISOString for a given date
+ * i.e. 2023-11-01T00:00:00.000Z => 2023-11-01
+ */
+export const getISODate = (date?: DateType): string => {
+  if (!isValidDate(date)) return '';
+
+  const isoString = date.toISOString();
+  const isoDate = isoString.split('T')[0];
+  return isoDate;
+};
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index a60707eb9a..202e6bd1f4 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -6,6 +6,7 @@ export { getFirstEmptySegment } from './getFirstEmptySegment';
 export { getFirstOfMonth } from './getFirstOfMonth';
 export { getFormatParts } from './getFormatParts';
 export { getFullMonthLabel } from './getFullMonthLabel';
+export { getISODate } from './getISODate';
 export { getLastOfMonth } from './getLastOfMonth';
 export { getMonthName } from './getMonthName';
 export { getRemainingParts } from './getRemainingParts';

From 4c810e2ee963ef5591adc58deb6987183e372436 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 6 Nov 2023 14:56:12 -0500
Subject: [PATCH 266/351] Fire transitionEnd in Tab tests

---
 .../src/DatePicker/DatePicker.spec.tsx        | 21 +++++++------------
 .../DatePickerComponent.tsx                   |  4 ++--
 .../DatePickerMenu/DatePickerMenu.tsx         |  5 -----
 3 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 3a8a4836cd..8992b07336 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -558,7 +558,7 @@ describe('packages/date-picker', () => {
                 const element = elementMap[label];
 
                 if (element !== null) {
-                  await waitFor(() => expect(element).toHaveFocus());
+                  expect(element).toHaveFocus();
                 } else {
                   expect(
                     renderResult.inputContainer.contains(
@@ -568,6 +568,9 @@ describe('packages/date-picker', () => {
                 }
 
                 userEvent.tab();
+                // There are side-effects triggered on CSS transition-end events.
+                // Fire this event here to ensure these side-effects don't impact Tab order
+                if (element) fireEvent.transitionEnd(element);
               }
             });
           });
@@ -730,12 +733,8 @@ describe('packages/date-picker', () => {
         });
         describe('Menu', () => {
           test('left arrow moves focus to the previous day', async () => {
-            const { calendarButton, findMenuElements } = renderDatePicker();
-            userEvent.click(calendarButton);
-            const { todayCell, menuContainerEl, queryCellByDate } =
-              await findMenuElements();
-            // Manually fire the `transitionEnd` event. This is not fired automatically by JSDOM
-            fireEvent.transitionEnd(menuContainerEl!);
+            const { openMenu } = renderDatePicker();
+            const { todayCell, queryCellByDate } = await openMenu();
             expect(todayCell).toHaveFocus();
 
             userEvent.keyboard('{arrowleft}');
@@ -744,12 +743,8 @@ describe('packages/date-picker', () => {
           });
 
           test('down arrow moves focus to next week', async () => {
-            const { calendarButton, findMenuElements } = renderDatePicker();
-            userEvent.click(calendarButton);
-            const { todayCell, menuContainerEl, queryCellByDate } =
-              await findMenuElements();
-            // Manually fire the `transitionEnd` event. This is not fired automatically by JSDOM
-            fireEvent.transitionEnd(menuContainerEl!);
+            const { openMenu } = renderDatePicker();
+            const { todayCell, queryCellByDate } = await openMenu();
             expect(todayCell).toHaveFocus();
 
             userEvent.keyboard('{arrowdown}');
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 133c48df68..d5b69428cc 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -30,8 +30,8 @@ export const DatePickerComponent = forwardRef<
   useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
 
   /** Fired when the CSS transition to open the menu is fired */
-  const handleMenuTransitionEntered: TransitionEventHandler = () => {
-    if (isOpen) {
+  const handleMenuTransitionEntered: TransitionEventHandler = e => {
+    if (isOpen && e.target === menuRef.current) {
       // When the menu opens, set focus to the `highlight` cell
       const highlightedCell = getHighlightedCell();
       highlightedCell?.focus();
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index b7cdd22804..63a277c642 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -204,11 +204,6 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
           break;
         }
 
-        // The isInRange check below prevents tab presses from propagating up so we add a switch case for tab presses where we can then call handleWrapperTabKeyPress which will handle trapping focus
-        case keyMap.Tab:
-          handleWrapperTabKeyPress(e);
-          break;
-
         default:
           break;
       }

From d371e7e9ad875625c92999a6ab9aa013a7894c70 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 6 Nov 2023 15:54:52 -0500
Subject: [PATCH 267/351] update how we test month change highlight

---
 .../src/DatePicker/DatePicker.spec.tsx        | 71 ++++++++++---------
 .../DatePickerMenu/DatePickerMenu.tsx         | 17 ++---
 2 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 8992b07336..780f3fca95 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -327,7 +327,12 @@ describe('packages/date-picker', () => {
             expect(yearSelect).toHaveValue('2022');
           });
 
-          test.todo('does not move focus to the calendar cell');
+          test('keeps focus on chevron button', async () => {
+            const { openMenu } = renderDatePicker();
+            const { leftChevron } = await openMenu();
+            userEvent.click(leftChevron!);
+            expect(leftChevron).toHaveFocus();
+          });
         });
 
         describe('Right', () => {
@@ -458,37 +463,6 @@ describe('packages/date-picker', () => {
       });
     });
 
-    describe('Changing the month', () => {
-      test.todo('is announced in an aria-live region');
-
-      describe('updates the highlighted cell', () => {
-        test('to the end of the month if we went backwards', async () => {
-          const { openMenu, findAllByRole } = renderDatePicker({
-            value: newUTC(2023, Month.July, 5),
-          });
-          const { monthSelect, queryCellByDate } = await openMenu();
-          userEvent.click(monthSelect!);
-          const options = await findAllByRole('option');
-          const Jan = options[0];
-          userEvent.click(Jan);
-          const jan31Cell = queryCellByDate(newUTC(2023, Month.January, 31));
-          await waitFor(() => expect(jan31Cell).toHaveFocus());
-        });
-        test('to the beginning of the month if we went forwards', async () => {
-          const { openMenu, findAllByRole } = renderDatePicker({
-            value: newUTC(2023, Month.July, 5),
-          });
-          const { monthSelect, queryCellByDate } = await openMenu();
-          userEvent.click(monthSelect!);
-          const options = await findAllByRole('option');
-          const Dec = options[11];
-          userEvent.click(Dec);
-          const dec1Cell = queryCellByDate(newUTC(2023, Month.December, 1));
-          await waitFor(() => expect(dec1Cell).toHaveFocus());
-        });
-      });
-    });
-
     describe('Keyboard navigation', () => {
       describe('Tab', () => {
         test('menu does not open on keyboard focus', async () => {
@@ -1035,6 +1009,39 @@ describe('packages/date-picker', () => {
           await waitFor(() => expect(valueCell).toHaveFocus());
         });
       });
+
+      describe('Changing the month', () => {
+        test.todo('is announced in an aria-live region');
+
+        describe('updates the highlighted cell...', () => {
+          test('to the end of the month if we went backwards', async () => {
+            const { openMenu, findAllByRole } = renderDatePicker({
+              value: newUTC(2023, Month.July, 5),
+            });
+            const { monthSelect, queryCellByDate } = await openMenu();
+            userEvent.click(monthSelect!);
+            const options = await findAllByRole('option');
+            const Jan = options[0];
+            userEvent.click(Jan);
+            tabNTimes(3);
+            const jan31Cell = queryCellByDate(newUTC(2023, Month.January, 31));
+            await waitFor(() => expect(jan31Cell).toHaveFocus());
+          });
+          test('to the beginning of the month if we went forwards', async () => {
+            const { openMenu, findAllByRole } = renderDatePicker({
+              value: newUTC(2023, Month.July, 5),
+            });
+            const { monthSelect, queryCellByDate } = await openMenu();
+            userEvent.click(monthSelect!);
+            const options = await findAllByRole('option');
+            const Dec = options[11];
+            userEvent.click(Dec);
+            tabNTimes(3);
+            const dec1Cell = queryCellByDate(newUTC(2023, Month.December, 1));
+            await waitFor(() => expect(dec1Cell).toHaveFocus());
+          });
+        });
+      });
     });
   });
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 63a277c642..675317ebe1 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -69,17 +69,6 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
 
     const monthLabel = getFullMonthLabel(month);
 
-    // focuses the DOM element for the appropriate cell
-    const focusCellWithDate = useCallback(
-      (date: DateType) => {
-        requestAnimationFrame(() => {
-          const highlightedCell = getCellWithValue(date);
-          highlightedCell?.focus();
-        });
-      },
-      [getCellWithValue],
-    );
-
     /** setDisplayMonth with side effects */
     const updateMonth = (newMonth: Date) => {
       if (isSameUTCMonth(newMonth, month)) {
@@ -91,7 +80,6 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
 
       if (newHighlight && shouldUpdateHighlight) {
         setHighlight(newHighlight);
-        focusCellWithDate(newHighlight);
       }
     };
 
@@ -102,7 +90,10 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
         setDisplayMonth(newHighlight);
       }
       setHighlight(newHighlight);
-      focusCellWithDate(newHighlight);
+      requestAnimationFrame(() => {
+        const highlightedCell = getCellWithValue(newHighlight);
+        highlightedCell?.focus();
+      });
     };
 
     /**

From 871c25998ca126e2bd4f17e90fca466ee3dfc785 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 6 Nov 2023 16:04:08 -0500
Subject: [PATCH 268/351] ts fix

---
 .../src/DatePicker/DatePickerMenu/DatePickerMenu.tsx            | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 675317ebe1..db7b46092f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -1,7 +1,6 @@
 import React, {
   forwardRef,
   KeyboardEventHandler,
-  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -12,7 +11,6 @@ import { useForwardedRef, usePrevious } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
 import { spacing } from '@leafygreen-ui/tokens';
 
-import { DateType } from '../../shared';
 import {
   CalendarCell,
   CalendarCellState,

From dafb47065eef18c35a05293314a1840135ddf72c Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Tue, 7 Nov 2023 11:23:19 -0500
Subject: [PATCH 269/351] LG-3740, LG-3741: DP initialOpen + disabled (#2069)

* updates tab order tests

* test default focus on menu open

* SingleDateContext

* converts tests & stories to use context

* add refs to context

* focus highlighted cell on cal button click

* updates highlight cell focus logic

* fixes failing tests

* update context props api

* fix tests & stories - provider api

* Adds new workflow tests

* set focus on transition end

* updates tab order tests

* test default focus on menu open

* SingleDateContext

* converts tests & stories to use context

* add refs to context

* focus highlighted cell on cal button click

* updates highlight cell focus logic

* fixes failing tests

* update context props api

* fix tests & stories - provider api

* Adds new workflow tests

* set focus on transition end

* fix async tests. Move esc key handling.

* WIP

* update formfield disabled icon color

* update types

* update types def

* update types def

* use fireEvent.transitionEnd in tests.

* setMonth on value change

* update to use async findMenuElements

* rename to queryCellByDate

* add test

* add another test

* adds waitForMenuToOpen

* adds `onExited` handler fired when menu closed

* fix conflicts

* update tests

* test name update

* remove unused stuff

* move disabled logic

* changeset

* update test

* update const name

* address comments

* revert changes

---------

Co-authored-by: Adam Thompson <adam.thompson@mongodb.com>
---
 .changeset/rare-apples-deny.md                |  5 +++
 .../src/DatePicker/DatePicker.spec.tsx        | 39 ++++++++++++++++++-
 .../DatePickerComponent.tsx                   | 11 +++++-
 .../DatePickerContext/DatePickerContext.tsx   | 16 ++++++--
 packages/date-picker/src/shared/types.ts      |  4 +-
 .../FormFieldInputContainer.styles.ts         | 10 +++++
 6 files changed, 78 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/rare-apples-deny.md

diff --git a/.changeset/rare-apples-deny.md b/.changeset/rare-apples-deny.md
new file mode 100644
index 0000000000..9690172af5
--- /dev/null
+++ b/.changeset/rare-apples-deny.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/form-field': patch
+---
+
+Updates disabled icon colors
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 780f3fca95..310824f701 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -105,7 +105,16 @@ describe('packages/date-picker', () => {
       test('menu is initially open when rendered with `initialOpen`', async () => {
         const { findMenuElements } = renderDatePicker({ initialOpen: true });
         const { menuContainerEl } = await findMenuElements();
-        await waitFor(() => expect(menuContainerEl).toBeInTheDocument());
+        expect(menuContainerEl).toBeInTheDocument();
+      });
+
+      test('menu is initially closed when rendered with `initialOpen` and `disabled`', async () => {
+        const { findMenuElements } = renderDatePicker({
+          initialOpen: true,
+          disabled: true,
+        });
+        const { menuContainerEl } = await findMenuElements();
+        expect(menuContainerEl).not.toBeInTheDocument();
       });
 
       test('if no value is set, menu opens to current month', async () => {
@@ -134,6 +143,34 @@ describe('packages/date-picker', () => {
         expect(calendarCells).toHaveLength(29);
       });
 
+      describe('when disabled is toggled to true', () => {
+        test('menu closes', async () => {
+          const { findMenuElements, rerenderDatePicker } = renderDatePicker({
+            initialOpen: true,
+          });
+          const { menuContainerEl } = await findMenuElements();
+          expect(menuContainerEl).toBeInTheDocument();
+          rerenderDatePicker({ disabled: true });
+          await waitFor(() => {
+            expect(menuContainerEl).not.toBeInTheDocument();
+          });
+        });
+
+        test('validation handler fires', async () => {
+          const handleValidation = jest.fn();
+          const { findMenuElements, rerenderDatePicker } = renderDatePicker({
+            initialOpen: true,
+            handleValidation,
+          });
+          const { menuContainerEl } = await findMenuElements();
+          expect(menuContainerEl).toBeInTheDocument();
+          rerenderDatePicker({ disabled: true });
+          await waitFor(() => {
+            expect(handleValidation).toHaveBeenCalled();
+          });
+        });
+      });
+
       describe('Chevrons', () => {
         test('Left is disabled if prev. month is entirely out of range', async () => {
           const { openMenu } = renderDatePicker({
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index d5b69428cc..32c64a404f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -2,6 +2,7 @@ import React, {
   forwardRef,
   KeyboardEventHandler,
   TransitionEventHandler,
+  useEffect,
   useRef,
 } from 'react';
 import { ExitHandler } from 'react-transition-group/Transition';
@@ -20,7 +21,7 @@ export const DatePickerComponent = forwardRef<
   HTMLDivElement,
   DatePickerComponentProps
 >(({ ...rest }: DatePickerComponentProps, fwdRef) => {
-  const { isOpen, menuId } = useDatePickerContext();
+  const { isOpen, menuId, disabled } = useDatePickerContext();
   const { value, closeMenu, handleValidation, getHighlightedCell } =
     useSingleDateContext();
 
@@ -29,6 +30,14 @@ export const DatePickerComponent = forwardRef<
 
   useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
 
+  /** This listens to when the disabled prop changes to true and closes the menu */
+  useEffect(() => {
+    if (disabled) {
+      closeMenu();
+      handleValidation?.(value);
+    }
+  }, [closeMenu, disabled, handleValidation, value]);
+
   /** Fired when the CSS transition to open the menu is fired */
   const handleMenuTransitionEntered: TransitionEventHandler = e => {
     if (isOpen && e.target === menuRef.current) {
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
index 6059dbaa38..bb90f06ed6 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
@@ -23,17 +23,27 @@ export const DatePickerContext = createContext<DatePickerContextProps>(
 /** The Provider component for DatePickerContext */
 export const DatePickerProvider = ({
   children,
-  initialOpen,
+  initialOpen = false,
+  disabled = false,
   ...rest
 }: PropsWithChildren<DatePickerProviderProps>) => {
-  const [isOpen, setOpen] = useState<boolean>(initialOpen ?? false);
+  const isInitiallyOpen = disabled ? false : initialOpen;
+  const [isOpen, setOpen] = useState<boolean>(isInitiallyOpen);
   const [isDirty, setIsDirty] = useState(false);
   const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
   const contextValue = getContextProps(rest);
 
   return (
     <DatePickerContext.Provider
-      value={{ ...contextValue, isOpen, setOpen, isDirty, setIsDirty, menuId }}
+      value={{
+        ...contextValue,
+        disabled,
+        isOpen,
+        setOpen,
+        isDirty,
+        setIsDirty,
+        menuId,
+      }}
     >
       {children}
     </DatePickerContext.Provider>
diff --git a/packages/date-picker/src/shared/types.ts b/packages/date-picker/src/shared/types.ts
index aa6e9ba254..5037e3d4a0 100644
--- a/packages/date-picker/src/shared/types.ts
+++ b/packages/date-picker/src/shared/types.ts
@@ -59,7 +59,7 @@ export interface BaseDatePickerProps extends DarkModeProps {
   baseFontSize?: BaseFontSize;
 
   /**
-   * Whether the input is disabled. Note: will not set the `disabled` attribute on an input
+   * Whether the input is disabled. Note: will not set the `disabled` attribute on an input and the calendar menu will not open if disabled is set to true.
    */
   disabled?: boolean;
 
@@ -76,6 +76,6 @@ export interface BaseDatePickerProps extends DarkModeProps {
    */
   errorMessage?: string;
 
-  /** Whether the calendar menu is initially open */
+  /** Whether the calendar menu is initially open. Note: The calendar menu will not open if disabled is set to true.  */
   initialOpen?: boolean;
 }
diff --git a/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.styles.ts b/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.styles.ts
index b247dd0a77..af9aa52c8c 100644
--- a/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.styles.ts
+++ b/packages/form-field/src/FormFieldInputContainer/FormFieldInputContainer.styles.ts
@@ -332,9 +332,19 @@ export const iconsWrapperStyles = (size: Size) => css`
 export const iconStyles: Record<Theme, string> = {
   [Theme.Light]: css`
     color: ${palette.gray.base};
+
+    &[aria-disabled='true'],
+    &:disabled {
+      color: ${palette.gray.light1};
+    }
   `,
   [Theme.Dark]: css`
     color: ${palette.gray.base};
+
+    &[aria-disabled='true'],
+    &:disabled {
+      color: ${palette.gray.dark2};
+    }
   `,
 };
 

From fc5a4b2910751b146ab891a3106122b2ab62a71e Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Tue, 7 Nov 2023 13:31:42 -0500
Subject: [PATCH 270/351] DatePicker [LG-3748]: Restricts month menu options
 (#2070)

* Restricts month menu options

* adds no disabled option test

* fix deps
---
 .changeset/rude-tomatoes-hang.md              |   5 +
 .../DatePickerMenu/DatePickerMenu.tsx         |   8 +-
 .../DatePickerMenuHeader.spec.tsx             | 130 ++++++++++++++++++
 .../{index.tsx => DatePickerMenuHeader.tsx}   |  29 +++-
 .../DatePickerMenuHeader/index.ts             |   1 +
 .../getMonthOptions/getMonthOptions.spec.ts   |  89 ++++++++++++
 .../utils/getMonthOptions/index.ts            |  39 ++++++
 .../SingleDateContext/SingleDateContext.tsx   |   2 +-
 .../src/DatePicker/SingleDateContext/index.ts |   6 +-
 packages/date-picker/src/shared/constants.ts  |  43 ++++--
 .../hooks/useSegmentRefs/segmentRefs.types.ts |   2 +-
 .../src/shared/utils/getMonthIndex/index.ts   |   7 +
 .../src/shared/utils/getMonthName/index.ts    |   7 +-
 .../date-picker/src/shared/utils/index.ts     |   1 +
 .../src/InputOption/InputOption.tsx           |   1 +
 15 files changed, 340 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/rude-tomatoes-hang.md
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
 rename packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/{index.tsx => DatePickerMenuHeader.tsx} (85%)
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.ts
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/getMonthOptions.spec.ts
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/getMonthIndex/index.ts

diff --git a/.changeset/rude-tomatoes-hang.md b/.changeset/rude-tomatoes-hang.md
new file mode 100644
index 0000000000..8a3da7a455
--- /dev/null
+++ b/.changeset/rude-tomatoes-hang.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/input-option': minor
+---
+
+Renders `aria-disabled` attribute when `disabled` is provided
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index db7b46092f..6b2f16d296 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -248,13 +248,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
               </CalendarCell>
             )}
           </CalendarGrid>
-          <DatePickerMenuHeader
-            ref={headerRef}
-            month={month}
-            setMonth={updateMonth}
-            handleValidation={handleValidation}
-            value={value}
-          />
+          <DatePickerMenuHeader ref={headerRef} setMonth={updateMonth} />
         </div>
       </MenuWrapper>
     );
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
new file mode 100644
index 0000000000..9163889093
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Month, newUTC } from '../../../shared';
+import {
+  DatePickerContext,
+  defaultDatePickerContext,
+} from '../../../shared/components';
+import {
+  SingleDateContext,
+  SingleDateContextProps,
+} from '../../SingleDateContext';
+
+import { DatePickerMenuHeader } from '.';
+
+const MockDatePickerProvider = DatePickerContext.Provider;
+const MockSingleDateProvider = SingleDateContext.Provider;
+
+describe('packages/date-picker/menu/header', () => {
+  describe('Rendering', () => {
+    describe('Some month options are disabled', () => {
+      test('When `month` and `min` are the same year, earlier month options are disabled', async () => {
+        const { getByLabelText, findAllByRole } = render(
+          <MockDatePickerProvider
+            value={{
+              ...defaultDatePickerContext,
+              min: newUTC(2022, Month.March, 10),
+            }}
+          >
+            <MockSingleDateProvider
+              value={
+                {
+                  month: newUTC(2022, Month.July, 1),
+                } as SingleDateContextProps
+              }
+            >
+              <DatePickerMenuHeader setMonth={() => {}} />
+            </MockSingleDateProvider>
+          </MockDatePickerProvider>,
+        );
+
+        const monthSelect = getByLabelText('Select month');
+
+        userEvent.click(monthSelect);
+
+        const options = await findAllByRole('option');
+
+        for (const element of options) {
+          expect(element).toBeInTheDocument();
+          const monthIndex = Number(element.getAttribute('value'));
+
+          if (monthIndex < Month.March) {
+            expect(element).toHaveAttribute('aria-disabled', 'true');
+          }
+        }
+      });
+
+      test('When `month` and `max` are the same year, later month options are disabled', async () => {
+        const { getByLabelText, findAllByRole } = render(
+          <MockDatePickerProvider
+            value={{
+              ...defaultDatePickerContext,
+              max: newUTC(2024, Month.September, 10),
+            }}
+          >
+            <MockSingleDateProvider
+              value={
+                {
+                  month: newUTC(2024, Month.July, 1),
+                } as SingleDateContextProps
+              }
+            >
+              <DatePickerMenuHeader setMonth={() => {}} />
+            </MockSingleDateProvider>
+          </MockDatePickerProvider>,
+        );
+
+        const monthSelect = getByLabelText('Select month');
+
+        userEvent.click(monthSelect);
+
+        const options = await findAllByRole('option');
+
+        for (const element of options) {
+          expect(element).toBeInTheDocument();
+          const monthIndex = Number(element.getAttribute('value'));
+
+          if (monthIndex > Month.September) {
+            expect(element).toHaveAttribute('aria-disabled', 'true');
+          }
+        }
+      });
+
+      test('When `month` and `max`/`min` are different years, no month options are disabled', async () => {
+        const { getByLabelText, findAllByRole } = render(
+          <MockDatePickerProvider
+            value={{
+              ...defaultDatePickerContext,
+              min: newUTC(2022, Month.March, 10),
+              max: newUTC(2024, Month.September, 10),
+            }}
+          >
+            <MockSingleDateProvider
+              value={
+                {
+                  month: newUTC(2023, Month.July, 5),
+                } as SingleDateContextProps
+              }
+            >
+              <DatePickerMenuHeader setMonth={() => {}} />
+            </MockSingleDateProvider>
+          </MockDatePickerProvider>,
+        );
+
+        const monthSelect = getByLabelText('Select month');
+
+        userEvent.click(monthSelect);
+
+        const options = await findAllByRole('option');
+
+        for (const element of options) {
+          expect(element).toBeInTheDocument();
+
+          expect(element).not.toHaveAttribute('aria-disabled', 'true');
+        }
+      });
+    });
+  });
+});
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
similarity index 85%
rename from packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
rename to packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
index 220088f64c..d7d95832b0 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
@@ -14,17 +14,18 @@ import { Option, Select } from '@leafygreen-ui/select';
 import { useDatePickerContext } from '../../../shared/components/DatePickerContext';
 import { Months, selectElementProps } from '../../../shared/constants';
 import { isSameUTCMonth, setUTCMonth, setUTCYear } from '../../../shared/utils';
-import { DatePickerProps } from '../../DatePicker.types';
+import { useSingleDateContext } from '../../SingleDateContext';
 import {
   menuHeaderSelectContainerStyles,
   menuHeaderStyles,
   selectInputWidthStyles,
 } from '../DatePickerMenu.styles';
 
-type DatePickerMenuHeaderProps = {
-  month: Date;
+import { shouldMonthBeEnabled } from './utils/getMonthOptions';
+
+interface DatePickerMenuHeaderProps {
   setMonth: (newMonth: Date) => void;
-} & Pick<DatePickerProps, 'handleValidation' | 'value'>;
+}
 
 /**
  * A helper component for DatePickerMenu.
@@ -34,8 +35,9 @@ type DatePickerMenuHeaderProps = {
 export const DatePickerMenuHeader = forwardRef<
   HTMLDivElement,
   DatePickerMenuHeaderProps
->(({ month, setMonth }: DatePickerMenuHeaderProps, fwdRef) => {
+>(({ setMonth, ...rest }: DatePickerMenuHeaderProps, fwdRef) => {
   const { min, max, isInRange } = useDatePickerContext();
+  const { month } = useSingleDateContext();
   const { isPopoverOpen: isSelectMenuOpen } = usePopoverContext();
 
   const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
@@ -78,9 +80,18 @@ export const DatePickerMenuHeader = forwardRef<
     }
   };
 
+  /** Returns whether the provided month should be enabled */
+  const isMonthEnabled = (monthName: string) =>
+    shouldMonthBeEnabled(monthName, { month, min, max });
+
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div ref={fwdRef} className={menuHeaderStyles} onKeyDown={handleEcsPress}>
+    <div
+      ref={fwdRef}
+      className={menuHeaderStyles}
+      onKeyDown={handleEcsPress}
+      {...rest}
+    >
       <IconButton
         aria-label="Previous month"
         disabled={isSameUTCMonth(month, min)}
@@ -100,7 +111,11 @@ export const DatePickerMenuHeader = forwardRef<
           className={selectInputWidthStyles}
         >
           {Months.map((m, i) => (
-            <Option value={i.toString()} key={m.short}>
+            <Option
+              disabled={!isMonthEnabled(m.long)}
+              value={i.toString()}
+              key={m.short}
+            >
               {m.short}
             </Option>
           ))}
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.ts
new file mode 100644
index 0000000000..c1b41ba02b
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/index.ts
@@ -0,0 +1 @@
+export { DatePickerMenuHeader } from './DatePickerMenuHeader';
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/getMonthOptions.spec.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/getMonthOptions.spec.ts
new file mode 100644
index 0000000000..17effe21b8
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/getMonthOptions.spec.ts
@@ -0,0 +1,89 @@
+import { Month, newUTC } from '../../../../../shared';
+
+import { shouldMonthBeEnabled } from '.';
+
+describe('packages/date-picker/menu/utils/shouldMonthBeEnabled', () => {
+  test('returns true by default', () => {
+    expect(shouldMonthBeEnabled('July')).toBeTruthy();
+  });
+
+  test('returns false if given an invalid month', () => {
+    expect(shouldMonthBeEnabled('Quintember')).toBeFalsy();
+  });
+
+  test('returns all 12 months when only month is provided', () => {
+    expect(
+      shouldMonthBeEnabled('July', {
+        month: newUTC(2023, Month.July, 15),
+      }),
+    ).toBeTruthy();
+  });
+
+  test('returns true when month, min & max are different years', () => {
+    expect(
+      shouldMonthBeEnabled('July', {
+        month: newUTC(2023, Month.July, 15),
+        min: newUTC(2000, Month.January, 15),
+        max: newUTC(2050, Month.December, 15),
+      }),
+    ).toBeTruthy();
+  });
+
+  describe('when month & min are the same year', () => {
+    test('returns false when month is before min month', () => {
+      expect(
+        shouldMonthBeEnabled('July', {
+          month: newUTC(2024, Month.October, 14),
+          min: newUTC(2024, Month.September, 10),
+        }),
+      ).toBeFalsy();
+    });
+
+    test('returns true when month is same min month', () => {
+      expect(
+        shouldMonthBeEnabled('July', {
+          month: newUTC(2024, Month.October, 14),
+          min: newUTC(2024, Month.July, 5),
+        }),
+      ).toBeTruthy();
+    });
+
+    test('returns true when month is after min month', () => {
+      expect(
+        shouldMonthBeEnabled('July', {
+          month: newUTC(2024, Month.October, 14),
+          min: newUTC(2024, Month.March, 10),
+        }),
+      ).toBeTruthy();
+    });
+  });
+
+  describe('when month & max are the same year', () => {
+    test('returns false when month is after max month', () => {
+      expect(
+        shouldMonthBeEnabled('July', {
+          month: newUTC(2024, Month.February, 14),
+          max: newUTC(2024, Month.March, 10),
+        }),
+      ).toBeFalsy();
+    });
+
+    test('returns true when month is same as max month', () => {
+      expect(
+        shouldMonthBeEnabled('July', {
+          month: newUTC(2024, Month.March, 10),
+          max: newUTC(2024, Month.July, 5),
+        }),
+      ).toBeTruthy();
+    });
+
+    test('returns true when month is before max month', () => {
+      expect(
+        shouldMonthBeEnabled('July', {
+          month: newUTC(2024, Month.March, 10),
+          max: newUTC(2024, Month.September, 10),
+        }),
+      ).toBeTruthy();
+    });
+  });
+});
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts
new file mode 100644
index 0000000000..be14f3164b
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts
@@ -0,0 +1,39 @@
+import { isNull } from 'lodash';
+
+import { DateType } from '../../../../../shared/types';
+import { getMonthIndex } from '../../../../../shared/utils';
+
+export const shouldMonthBeEnabled = (
+  monthName: string,
+  context?: {
+    month?: DateType;
+    min?: DateType;
+    max?: DateType;
+  },
+): boolean => {
+  const monthIndex = getMonthIndex(monthName);
+
+  if (isNull(monthIndex)) return false;
+
+  if (!context) {
+    return true;
+  }
+
+  const { month, min, max } = context;
+
+  const year = context.month?.getUTCFullYear();
+  const minYear = context.min?.getUTCFullYear();
+  const maxYear = context.max?.getUTCFullYear();
+
+  if (month && min && year === minYear) {
+    if (monthIndex < min.getUTCMonth()) return false;
+    return true;
+  }
+
+  if (month && max && year === maxYear) {
+    if (monthIndex > max.getUTCMonth()) return false;
+    return true;
+  }
+
+  return true;
+};
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
index c6242c0fbd..096f358fc7 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
@@ -25,7 +25,7 @@ import {
 } from './SingleDateContext.types';
 import { useDateRangeComponentRefs } from './useDatePickerComponentRefs';
 
-const SingleDateContext = createContext<SingleDateContextProps>(
+export const SingleDateContext = createContext<SingleDateContextProps>(
   {} as SingleDateContextProps,
 );
 
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/index.ts b/packages/date-picker/src/DatePicker/SingleDateContext/index.ts
index ca13524a7e..5428d9e13c 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/index.ts
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/index.ts
@@ -1,4 +1,8 @@
-export { SingleDateProvider, useSingleDateContext } from './SingleDateContext';
+export {
+  SingleDateContext,
+  SingleDateProvider,
+  useSingleDateContext,
+} from './SingleDateContext';
 export {
   type SingleDateContextProps,
   type SingleDateProviderProps,
diff --git a/packages/date-picker/src/shared/constants.ts b/packages/date-picker/src/shared/constants.ts
index 8f991397e4..f8ea5a2ea1 100644
--- a/packages/date-picker/src/shared/constants.ts
+++ b/packages/date-picker/src/shared/constants.ts
@@ -22,26 +22,45 @@ export enum Month {
   December,
 }
 
+/** An array of all English month names */
+export const MonthsArray = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
 /** The default earliest selectable date */
 export const MIN_DATE = new Date(Date.UTC(1970, Month.January, 1));
 
 /** The default latest selectable date */
 export const MAX_DATE = new Date(Date.UTC(2038, Month.January, 19));
 
-/**
- * Long & short form of each month index
- */
-export const Months: Array<{
+export interface MonthObject {
   long: string;
   short: string;
-}> = range(12).map((monthIndex: number) => {
-  const str = `2023-${padStart((monthIndex + 1).toString(), 2, '0')}-15`;
-  const month = new Date(str);
-  return {
-    long: month.toLocaleString('default', { month: 'long' }),
-    short: month.toLocaleString('default', { month: 'short' }),
-  };
-});
+}
+/**
+ * Long & short form of each month index. Updates based on locale
+ */
+export const Months: Array<MonthObject> = range(12).map(
+  (monthIndex: number) => {
+    const str = `2023-${padStart((monthIndex + 1).toString(), 2, '0')}-15`;
+    const month = new Date(str);
+    return {
+      long: month.toLocaleString('default', { month: 'long' }),
+      short: month.toLocaleString('default', { month: 'short' }),
+    };
+  },
+);
 
 /** Long & short form for each Day of the week */
 export const DaysOfWeek = [
diff --git a/packages/date-picker/src/shared/hooks/useSegmentRefs/segmentRefs.types.ts b/packages/date-picker/src/shared/hooks/useSegmentRefs/segmentRefs.types.ts
index f189b58e7f..2fc74f1fa7 100644
--- a/packages/date-picker/src/shared/hooks/useSegmentRefs/segmentRefs.types.ts
+++ b/packages/date-picker/src/shared/hooks/useSegmentRefs/segmentRefs.types.ts
@@ -1,4 +1,4 @@
-import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
+import { DynamicRefGetter } from '@leafygreen-ui/hooks';
 
 import { DateSegment } from '../useDateSegments';
 
diff --git a/packages/date-picker/src/shared/utils/getMonthIndex/index.ts b/packages/date-picker/src/shared/utils/getMonthIndex/index.ts
new file mode 100644
index 0000000000..fc5e94131b
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getMonthIndex/index.ts
@@ -0,0 +1,7 @@
+import { MonthsArray } from '../../constants';
+
+/** Returns the index of an English month name */
+export const getMonthIndex = (monthName: string): number | null => {
+  const index = MonthsArray.indexOf(monthName);
+  return index >= 0 ? index : null;
+};
diff --git a/packages/date-picker/src/shared/utils/getMonthName/index.ts b/packages/date-picker/src/shared/utils/getMonthName/index.ts
index e786b70212..4d50c0a282 100644
--- a/packages/date-picker/src/shared/utils/getMonthName/index.ts
+++ b/packages/date-picker/src/shared/utils/getMonthName/index.ts
@@ -1,9 +1,14 @@
 import padStart from 'lodash/padStart';
 
+import { MonthObject } from '../../constants';
+
 /**
  * Returns the month name from a given index and optional locale
  */
-export const getMonthName = (monthIndex: number, locale = 'default') => {
+export const getMonthName = (
+  monthIndex: number,
+  locale = 'default',
+): MonthObject => {
   const str = `2023-${padStart((monthIndex + 1).toString(), 2, '0')}-15`;
   const month = new Date(str);
   return {
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index 202e6bd1f4..f093db1404 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -8,6 +8,7 @@ export { getFormatParts } from './getFormatParts';
 export { getFullMonthLabel } from './getFullMonthLabel';
 export { getISODate } from './getISODate';
 export { getLastOfMonth } from './getLastOfMonth';
+export { getMonthIndex } from './getMonthIndex';
 export { getMonthName } from './getMonthName';
 export { getRemainingParts } from './getRemainingParts';
 export {
diff --git a/packages/input-option/src/InputOption/InputOption.tsx b/packages/input-option/src/InputOption/InputOption.tsx
index 73b6d35727..100148811c 100644
--- a/packages/input-option/src/InputOption/InputOption.tsx
+++ b/packages/input-option/src/InputOption/InputOption.tsx
@@ -42,6 +42,7 @@ export const InputOption = Polymorphic<InputOptionProps>(
         ref={ref}
         role="option"
         aria-selected={highlighted}
+        aria-disabled={disabled}
         tabIndex={-1}
         className={cx(
           inputOptionStyles,

From 561df1a690d205e0e25378ef03371326a0bf5ce2 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Wed, 15 Nov 2023 15:26:18 -0500
Subject: [PATCH 271/351] DatePicker [LG-3758, LG-3760, LG-3764, LG-3765] Menu
 year/month select (#2072)

* adds new esc test to date picker

* adds PopoverContext tests

* adds provider test in MenuWrapper

* Update Select.spec.tsx

* debug

* Update DatePickerMenuHeader.spec.tsx

* does this work?

* wip - adding isSelectOpen to context`

* fix build

* fix menu bug

* use popover callbacks

* remove comment from popover

* remove comments

* remove test from menuWrapper

* add select tests

* update cs

* comment

* remove popover provider test

* update tests

* test name

* remove unused stuff

---------

Co-authored-by: Shaneeza <shaneeza.ali@mongodb.com>
---
 .changeset/famous-timers-eat.md               |   8 +
 .../src/DatePicker/DatePicker.spec.tsx        |  31 +++-
 .../DatePickerComponent.tsx                   |  20 ++-
 .../DatePickerMenu/DatePickerMenu.tsx         |  18 +-
 .../DatePickerMenuHeader.spec.tsx             |  65 ++++++-
 .../DatePickerMenuHeader.tsx                  |  32 +---
 .../DatePickerContext.spec.tsx                |  79 ++++++++-
 .../DatePickerContext/DatePickerContext.tsx   |   3 +
 .../DatePickerContext.types.ts                |   6 +
 .../DatePickerContext.utils.ts                |   2 +
 .../MenuWrapper/MenuWrapper.spec.tsx          |   2 +-
 .../components/MenuWrapper/MenuWrapper.tsx    |   8 +-
 packages/select/src/ListMenu/ListMenu.tsx     |  12 ++
 packages/select/src/Select/Select.spec.tsx    | 161 +++++++++++++++++-
 packages/select/src/Select/Select.tsx         |  14 ++
 15 files changed, 402 insertions(+), 59 deletions(-)
 create mode 100644 .changeset/famous-timers-eat.md

diff --git a/.changeset/famous-timers-eat.md b/.changeset/famous-timers-eat.md
new file mode 100644
index 0000000000..a2ac969445
--- /dev/null
+++ b/.changeset/famous-timers-eat.md
@@ -0,0 +1,8 @@
+---
+'@leafygreen-ui/select': patch
+---
+
+- Passes `onEnter*` and `onExit*` props to internal `Popover` component
+- Adds tests to test `onEnter*` and `onExit*` callbacks
+- Adds tests to test `PopoverContext`
+
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 310824f701..72ed28dbd7 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -10,6 +10,8 @@ import {
 import userEvent from '@testing-library/user-event';
 import { addDays, subDays } from 'date-fns';
 
+import { transitionDuration } from '@leafygreen-ui/tokens';
+
 import { Month } from '../shared/constants';
 import { newUTC } from '../shared/utils';
 import {
@@ -710,26 +712,43 @@ describe('packages/date-picker', () => {
           expect(handleValidation).toHaveBeenCalledWith(undefined);
         });
 
+        test('closes the menu regardless of which element is focused', async () => {
+          const { openMenu } = renderDatePicker();
+          const { menuContainerEl, leftChevron } = await openMenu();
+          userEvent.tab();
+          expect(leftChevron).toHaveFocus();
+
+          userEvent.keyboard('{escape}');
+          await waitForElementToBeRemoved(menuContainerEl);
+          expect(menuContainerEl).not.toBeInTheDocument();
+        });
+
         test('does not close the main menu if a select menu is open', async () => {
           const { openMenu, queryAllByRole, findAllByRole } =
             renderDatePicker();
           const { monthSelect, menuContainerEl } = await openMenu();
 
-          monthSelect?.focus();
+          tabNTimes(2);
           expect(monthSelect).toHaveFocus();
+
           userEvent.keyboard('[Enter]');
-          userEvent.keyboard('{arrowdown}');
+          await waitFor(() =>
+            jest.advanceTimersByTime(transitionDuration.default),
+          );
+
           const options = await findAllByRole('option');
           const firstOption = options[0];
+          userEvent.keyboard('{arrowdown}');
           expect(firstOption).toHaveFocus();
+
           const listBoxes = queryAllByRole('listbox');
           expect(listBoxes).toHaveLength(2);
+
           const selectMenu = listBoxes[1];
           userEvent.keyboard('{escape}');
-          await waitFor(() => {
-            expect(menuContainerEl).toBeInTheDocument();
-            expect(selectMenu).not.toBeInTheDocument();
-          });
+          await waitForElementToBeRemoved(selectMenu);
+          expect(menuContainerEl).toBeInTheDocument();
+          expect(monthSelect).toHaveFocus();
         });
       });
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 32c64a404f..af2b1742ce 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -21,7 +21,7 @@ export const DatePickerComponent = forwardRef<
   HTMLDivElement,
   DatePickerComponentProps
 >(({ ...rest }: DatePickerComponentProps, fwdRef) => {
-  const { isOpen, menuId, disabled } = useDatePickerContext();
+  const { isOpen, menuId, disabled, isSelectOpen } = useDatePickerContext();
   const { value, closeMenu, handleValidation, getHighlightedCell } =
     useSingleDateContext();
 
@@ -54,13 +54,17 @@ export const DatePickerComponent = forwardRef<
   };
 
   /** Handle key down events that should be fired regardless of target */
-  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
+  const handleDatePickerKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
     const { key } = e;
 
     switch (key) {
       case keyMap.Escape:
-        closeMenu();
-        handleValidation?.(value);
+        // Ensure that the menu will not close when a select menu is open and the ESC key is pressed.
+        if (!isSelectOpen) {
+          closeMenu();
+          handleValidation?.(value);
+        }
+
         break;
 
       case keyMap.Enter:
@@ -74,12 +78,16 @@ export const DatePickerComponent = forwardRef<
 
   return (
     <>
-      <DatePickerInput ref={formFieldRef} onKeyDown={handleKeyDown} {...rest} />
+      <DatePickerInput
+        ref={formFieldRef}
+        onKeyDown={handleDatePickerKeyDown}
+        {...rest}
+      />
       <DatePickerMenu
         ref={menuRef}
         id={menuId}
         refEl={formFieldRef}
-        onKeyDown={handleKeyDown}
+        onKeyDown={handleDatePickerKeyDown}
         onTransitionEnd={handleMenuTransitionEntered}
         onExited={handleMenuTransitionExited}
       />
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 6b2f16d296..17d01eee1f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -142,12 +142,12 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     };
 
     // Focus trap
-    const handleWrapperTabKeyPress: KeyboardEventHandler<
-      HTMLDivElement
-    > = e => {
+    const handleMenuKeyPress: KeyboardEventHandler<HTMLDivElement> = e => {
+      const { key } = e;
+
       // Implementing custom focus-trap logic,
       // since focus-trap-react focuses the first element immediately on mount
-      if (e.key === keyMap.Tab) {
+      if (key === keyMap.Tab) {
         const currentFocus = document.activeElement;
 
         const highlightedCellElement = getHighlightedCell();
@@ -164,11 +164,15 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
           e.preventDefault();
         }
       }
+
+      // call any handler that was passed in
+      onKeyDown?.(e);
     };
 
     /** Called on any keydown within the CalendarGrid element */
     const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {
       const { key } = e;
+
       const highlightStart = highlight || value || today;
       let nextHighlight = highlightStart;
 
@@ -200,12 +204,10 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       // if nextHighlight is in range
       if (isInRange(nextHighlight) && !isSameUTCDay(nextHighlight, highlight)) {
         updateHighlight(nextHighlight);
+
         // Prevent the parent keydown handler from being called
         e.stopPropagation();
       }
-
-      // call any handler that was passed in
-      onKeyDown?.(e);
     };
 
     return (
@@ -216,7 +218,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
         spacing={spacing[1]}
         className={menuWrapperStyles}
         usePortal
-        onKeyDown={handleWrapperTabKeyPress}
+        onKeyDown={handleMenuKeyPress}
         {...rest}
       >
         <div className={menuContentStyles}>
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
index 9163889093..228c41ba03 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import React, { PropsWithChildren, useState } from 'react';
+import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { transitionDuration } from '@leafygreen-ui/tokens';
+
 import { Month, newUTC } from '../../../shared';
 import {
   DatePickerContext,
@@ -127,4 +129,63 @@ describe('packages/date-picker/menu/header', () => {
       });
     });
   });
+
+  describe('Interaction', () => {
+    const mockSetIsSelectOpen = jest.fn();
+
+    beforeEach(() => {
+      mockSetIsSelectOpen.mockClear();
+      jest.useFakeTimers();
+    });
+
+    const AllMockProviders = ({ children }: PropsWithChildren<{}>) => {
+      const [isSelectOpen, _setIsSelectOpen] = useState(false);
+
+      const setIsSelectOpen = (action: React.SetStateAction<boolean>) => {
+        mockSetIsSelectOpen(action);
+        _setIsSelectOpen(action);
+      };
+
+      return (
+        <MockDatePickerProvider
+          value={{
+            ...defaultDatePickerContext,
+            isSelectOpen,
+            setIsSelectOpen,
+          }}
+        >
+          <MockSingleDateProvider
+            value={
+              {
+                month: newUTC(2022, Month.July, 1),
+              } as SingleDateContextProps
+            }
+          >
+            {children}
+          </MockSingleDateProvider>
+        </MockDatePickerProvider>
+      );
+    };
+
+    test('opening & closing a select menu calls `setIsSelectOpen` in DatePickerContext', async () => {
+      const { getByLabelText } = render(
+        <AllMockProviders>
+          <DatePickerMenuHeader setMonth={() => {}} />
+        </AllMockProviders>,
+      );
+
+      const monthSelect = getByLabelText('Select month');
+      userEvent.click(monthSelect);
+      await waitFor(() => {
+        jest.advanceTimersByTime(transitionDuration.default);
+        expect(mockSetIsSelectOpen).toHaveBeenCalledWith(true);
+      });
+      userEvent.click(monthSelect);
+
+      await waitFor(() => {
+        jest.advanceTimersByTime(transitionDuration.default);
+        expect(mockSetIsSelectOpen).toHaveBeenCalledWith(false);
+      });
+    });
+  });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
index d7d95832b0..f4dfd723de 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
@@ -1,14 +1,9 @@
-import React, {
-  forwardRef,
-  KeyboardEventHandler,
-  MouseEventHandler,
-} from 'react';
+import React, { forwardRef, MouseEventHandler } from 'react';
 import { isBefore } from 'date-fns';
 import range from 'lodash/range';
 
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
-import { usePopoverContext } from '@leafygreen-ui/leafygreen-provider';
 import { Option, Select } from '@leafygreen-ui/select';
 
 import { useDatePickerContext } from '../../../shared/components/DatePickerContext';
@@ -36,9 +31,8 @@ export const DatePickerMenuHeader = forwardRef<
   HTMLDivElement,
   DatePickerMenuHeaderProps
 >(({ setMonth, ...rest }: DatePickerMenuHeaderProps, fwdRef) => {
-  const { min, max, isInRange } = useDatePickerContext();
+  const { min, max, isInRange, setIsSelectOpen } = useDatePickerContext();
   const { month } = useSingleDateContext();
-  const { isPopoverOpen: isSelectMenuOpen } = usePopoverContext();
 
   const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
 
@@ -70,28 +64,12 @@ export const DatePickerMenuHeader = forwardRef<
       updateMonth(newMonth);
     };
 
-  /**
-   * Ensure that the date picker menu will not close when a select menu is open, focus is inside the select menu, and the ESC key is pressed.
-   */
-  const handleEcsPress: KeyboardEventHandler<HTMLDivElement> = e => {
-    // `isSelectMenuOpen` provided by `PopoverProvider` is `true` if any popover _within_ the menu is open
-    if (isSelectMenuOpen) {
-      e.stopPropagation();
-    }
-  };
-
   /** Returns whether the provided month should be enabled */
   const isMonthEnabled = (monthName: string) =>
     shouldMonthBeEnabled(monthName, { month, min, max });
 
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div
-      ref={fwdRef}
-      className={menuHeaderStyles}
-      onKeyDown={handleEcsPress}
-      {...rest}
-    >
+    <div ref={fwdRef} className={menuHeaderStyles} {...rest}>
       <IconButton
         aria-label="Previous month"
         disabled={isSameUTCMonth(month, min)}
@@ -109,6 +87,8 @@ export const DatePickerMenuHeader = forwardRef<
             updateMonth(newMonth);
           }}
           className={selectInputWidthStyles}
+          onEntered={() => setIsSelectOpen(true)}
+          onExited={() => setIsSelectOpen(false)}
         >
           {Months.map((m, i) => (
             <Option
@@ -129,6 +109,8 @@ export const DatePickerMenuHeader = forwardRef<
             updateMonth(newMonth);
           }}
           className={selectInputWidthStyles}
+          onEntered={() => setIsSelectOpen(true)}
+          onExited={() => setIsSelectOpen(false)}
         >
           {yearOptions.map(y => (
             <Option value={y.toString()} key={y}>
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
index ca0ab789f9..ba366b19ab 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
@@ -1,8 +1,79 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import React, { PropsWithChildren } from 'react';
+import { act, render, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 
-import { DatePickerContext } from '.';
+import {
+  DatePickerContext,
+  DatePickerContextProps,
+  DatePickerProvider,
+  useDatePickerContext,
+} from '.';
 
+const renderDatePickerProvider = () => {
+  const { result, rerender } = renderHook<
+    PropsWithChildren<{}>,
+    DatePickerContextProps
+  >(useDatePickerContext, {
+    wrapper: ({ children }) => (
+      <DatePickerProvider label="">{children}</DatePickerProvider>
+    ),
+  });
+
+  return { result, rerender };
+};
+
+// TODO: ADD MORE TESTS
 describe('packages/date-picker-context', () => {
-  test('condition', () => {});
+  describe('useDatePickerContext', () => {
+    describe('isOpen', () => {
+      test('is `false` by default', () => {
+        const { result } = renderDatePickerProvider();
+        expect(result.current.isOpen).toBeFalsy();
+      });
+
+      test('setter updates the value to `true`', async () => {
+        const { result, rerender } = renderDatePickerProvider();
+
+        act(() => result.current.setOpen(true));
+        rerender();
+        await waitFor(() => {
+          expect(result.current.isOpen).toBe(true);
+        });
+      });
+    });
+
+    describe('isDirty', () => {
+      test('is `false` by default', () => {
+        const { result } = renderDatePickerProvider();
+        expect(result.current.isDirty).toBeFalsy();
+      });
+
+      test('setter updates the value to `true`', async () => {
+        const { result, rerender } = renderDatePickerProvider();
+
+        act(() => result.current.setIsDirty(true));
+        rerender();
+        await waitFor(() => {
+          expect(result.current.isDirty).toBe(true);
+        });
+      });
+    });
+
+    describe('isSelectOpen', () => {
+      test('is `false` by default', () => {
+        const { result } = renderDatePickerProvider();
+        expect(result.current.isSelectOpen).toBeFalsy();
+      });
+
+      test('setter updates the value to `true`', async () => {
+        const { result, rerender } = renderDatePickerProvider();
+
+        act(() => result.current.setIsSelectOpen(true));
+        rerender();
+        await waitFor(() => {
+          expect(result.current.isSelectOpen).toBe(true);
+        });
+      });
+    });
+  });
 });
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
index bb90f06ed6..9ef39449ff 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
@@ -30,6 +30,7 @@ export const DatePickerProvider = ({
   const isInitiallyOpen = disabled ? false : initialOpen;
   const [isOpen, setOpen] = useState<boolean>(isInitiallyOpen);
   const [isDirty, setIsDirty] = useState(false);
+  const [isSelectOpen, setIsSelectOpen] = useState(false);
   const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
   const contextValue = getContextProps(rest);
 
@@ -43,6 +44,8 @@ export const DatePickerProvider = ({
         isDirty,
         setIsDirty,
         menuId,
+        isSelectOpen,
+        setIsSelectOpen,
       }}
     >
       {children}
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
index db6b48a70c..60025af5a2 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
@@ -43,4 +43,10 @@ export interface DatePickerContextProps
 
   /** Setter for whether the component has been interacted with */
   setIsDirty: React.Dispatch<React.SetStateAction<boolean>>;
+
+  /** Identifies whether the select menus are open inside the menu */
+  isSelectOpen: boolean;
+
+  /** Setter for whether the select menus are open inside the menu */
+  setIsSelectOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
index fb5f4b0cfb..86efe96398 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
@@ -55,6 +55,8 @@ export const defaultDatePickerContext: DatePickerContextProps = {
   baseFontSize: BaseFontSize.Body1,
   darkMode: false,
   menuId: '',
+  isSelectOpen: false,
+  setIsSelectOpen: () => {},
 };
 
 /**
diff --git a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.spec.tsx b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.spec.tsx
index 104159f9de..9a1d52d70a 100644
--- a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.spec.tsx
+++ b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.spec.tsx
@@ -4,5 +4,5 @@ import { render } from '@testing-library/react';
 import { MenuWrapper } from '.';
 
 describe('packages/date-picker/shared/menu-wrapper', () => {
-  test('condition', () => {});
+  test('components', () => {});
 });
diff --git a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
index 35a32737a6..0ef8514e2f 100644
--- a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
+++ b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
@@ -1,10 +1,7 @@
 import React, { forwardRef } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
-import {
-  PopoverProvider,
-  useDarkMode,
-} from '@leafygreen-ui/leafygreen-provider';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 import Popover, { PopoverProps } from '@leafygreen-ui/popover';
 
@@ -25,8 +22,7 @@ export const MenuWrapper = forwardRef<HTMLDivElement, MenuWrapperProps>(
         className={cx(menuStyles[theme], className)}
         {...props}
       >
-        {/* Adding the provider inside of <Popover /> to keep track of only the select menus inside this popover */}
-        <PopoverProvider>{children}</PopoverProvider>
+        {children}
       </Popover>
     );
   },
diff --git a/packages/select/src/ListMenu/ListMenu.tsx b/packages/select/src/ListMenu/ListMenu.tsx
index 3738310db1..ddc5378ff9 100644
--- a/packages/select/src/ListMenu/ListMenu.tsx
+++ b/packages/select/src/ListMenu/ListMenu.tsx
@@ -38,6 +38,12 @@ const ListMenu = React.forwardRef<HTMLUListElement, ListMenuProps>(
       scrollContainer,
       portalClassName,
       popoverZIndex,
+      onEntering,
+      onEnter,
+      onEntered,
+      onExiting,
+      onExit,
+      onExited,
     }: ListMenuProps,
     forwardedRef,
   ) {
@@ -63,6 +69,12 @@ const ListMenu = React.forwardRef<HTMLUListElement, ListMenuProps>(
 
     const popoverProps = {
       popoverZIndex,
+      onEntering,
+      onEnter,
+      onEntered,
+      onExiting,
+      onExit,
+      onExited,
       ...(usePortal
         ? { usePortal, portalClassName, portalContainer, scrollContainer }
         : { usePortal }),
diff --git a/packages/select/src/Select/Select.spec.tsx b/packages/select/src/Select/Select.spec.tsx
index bffd43aa26..5a9338953c 100644
--- a/packages/select/src/Select/Select.spec.tsx
+++ b/packages/select/src/Select/Select.spec.tsx
@@ -1,4 +1,4 @@
-import React, { createRef, useState } from 'react';
+import React, { createRef, PropsWithChildren, useState } from 'react';
 import { act } from 'react-dom/test-utils';
 import {
   fireEvent,
@@ -11,8 +11,10 @@ import {
 import userEvent from '@testing-library/user-event';
 
 import BeakerIcon from '@leafygreen-ui/icon/dist/Beaker';
+import { PopoverContext } from '@leafygreen-ui/leafygreen-provider';
 import { keyMap } from '@leafygreen-ui/lib';
 import { Context, jest as Jest } from '@leafygreen-ui/testing-lib';
+import { transitionDuration } from '@leafygreen-ui/tokens';
 
 import { Option, OptionGroup, Select } from '..';
 
@@ -543,6 +545,55 @@ describe('packages/select', () => {
       });
     });
 
+    describe('fires Popover callbacks', () => {
+      test('opening the select fires the `onEnter*` callbacks', async () => {
+        const onEnter = jest.fn();
+        const onEntering = jest.fn();
+        const onEntered = jest.fn();
+        const { getByRole } = render(
+          <Select
+            {...defaultProps}
+            onEnter={onEnter}
+            onEntering={onEntering}
+            onEntered={onEntered}
+          >
+            <Option data-testid="option-apple">Apple</Option>
+            <Option data-testid="option-banana">Banana</Option>
+          </Select>,
+        );
+        const button = getByRole('button');
+        userEvent.click(button);
+
+        expect(onEnter).toHaveBeenCalled();
+        expect(onEntering).toHaveBeenCalled();
+        await waitFor(() => expect(onEntered).toHaveBeenCalled());
+      });
+
+      test('closing the select fires the `onExit*` callbacks', async () => {
+        const onExit = jest.fn();
+        const onExiting = jest.fn();
+        const onExited = jest.fn();
+        const { getByRole } = render(
+          <Select
+            {...defaultProps}
+            onExit={onExit}
+            onExiting={onExiting}
+            onExited={onExited}
+          >
+            <Option data-testid="option-apple">Apple</Option>
+            <Option data-testid="option-banana">Banana</Option>
+          </Select>,
+        );
+        const button = getByRole('button');
+        userEvent.click(button);
+        userEvent.click(button);
+
+        expect(onExit).toHaveBeenCalled();
+        expect(onExiting).toHaveBeenCalled();
+        await waitFor(() => expect(onExited).toHaveBeenCalled());
+      });
+    });
+
     describe.each([
       ['menu button', 'button'],
       ['list menu', 'listbox'],
@@ -1000,5 +1051,113 @@ describe('packages/select', () => {
       userEvent.click(apple);
       expect(onChange).toHaveBeenCalled();
     });
+
+    describe('fires Popover callbacks', () => {
+      test('opening the select fires the `onEnter*` callbacks', async () => {
+        const onEnter = jest.fn();
+        const onEntering = jest.fn();
+        const onEntered = jest.fn();
+        const { getByRole } = render(
+          <Select
+            {...defaultProps}
+            usePortal={false}
+            onEnter={onEnter}
+            onEntering={onEntering}
+            onEntered={onEntered}
+          >
+            <Option data-testid="option-apple">Apple</Option>
+            <Option data-testid="option-banana">Banana</Option>
+          </Select>,
+        );
+        const button = getByRole('button');
+        userEvent.click(button);
+
+        expect(onEnter).toHaveBeenCalled();
+        expect(onEntering).toHaveBeenCalled();
+        await waitFor(() => expect(onEntered).toHaveBeenCalled());
+      });
+
+      test('closing the select fires the `onExit*` callbacks', async () => {
+        const onExit = jest.fn();
+        const onExiting = jest.fn();
+        const onExited = jest.fn();
+        const { getByRole } = render(
+          <Select
+            {...defaultProps}
+            usePortal={false}
+            onExit={onExit}
+            onExiting={onExiting}
+            onExited={onExited}
+          >
+            <Option data-testid="option-apple">Apple</Option>
+            <Option data-testid="option-banana">Banana</Option>
+          </Select>,
+        );
+        const button = getByRole('button');
+        userEvent.click(button);
+        userEvent.click(button);
+
+        expect(onExit).toHaveBeenCalled();
+        expect(onExiting).toHaveBeenCalled();
+        await waitFor(() => expect(onExited).toHaveBeenCalled());
+      });
+    });
+  });
+
+  describe('with PopoverContext', () => {
+    const mockSetIsPopoverOpen = jest.fn();
+
+    const MockPopoverProvider = ({ children }: PropsWithChildren<{}>) => {
+      return (
+        <PopoverContext.Provider
+          value={{
+            isPopoverOpen: false,
+            setIsPopoverOpen: mockSetIsPopoverOpen,
+          }}
+        >
+          {children}
+        </PopoverContext.Provider>
+      );
+    };
+
+    beforeEach(() => {
+      mockSetIsPopoverOpen.mockClear();
+    });
+
+    test('calls `setIsPopoverOpen`', async () => {
+      const { getByRole } = render(
+        <MockPopoverProvider>
+          <Select {...defaultProps} />
+        </MockPopoverProvider>,
+      );
+
+      const triggerButton = getByRole('button');
+      userEvent.click(triggerButton);
+      await waitFor(() =>
+        expect(mockSetIsPopoverOpen).toHaveBeenCalledWith(true),
+      );
+      userEvent.click(triggerButton);
+      await waitFor(() =>
+        expect(mockSetIsPopoverOpen).toHaveBeenCalledWith(false),
+      );
+    });
+
+    test('calls `setIsPopoverOpen` when `usePortal == false`', async () => {
+      const { getByRole } = render(
+        <MockPopoverProvider>
+          <Select usePortal={false} {...defaultProps} />
+        </MockPopoverProvider>,
+      );
+
+      const button = getByRole('button');
+      userEvent.click(button);
+      await waitFor(() =>
+        expect(mockSetIsPopoverOpen).toHaveBeenCalledWith(true),
+      );
+      userEvent.click(button);
+      await waitFor(() =>
+        expect(mockSetIsPopoverOpen).toHaveBeenCalledWith(false),
+      );
+    });
   });
 });
diff --git a/packages/select/src/Select/Select.tsx b/packages/select/src/Select/Select.tsx
index fb2e2c27f0..543279ceca 100644
--- a/packages/select/src/Select/Select.tsx
+++ b/packages/select/src/Select/Select.tsx
@@ -81,6 +81,12 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
       scrollContainer,
       portalClassName,
       popoverZIndex,
+      onEntering,
+      onEnter,
+      onEntered,
+      onExiting,
+      onExit,
+      onExited,
       __INTERNAL__menuButtonSlot__,
       ...rest
     },
@@ -216,6 +222,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
         option: OptionElement | null,
         event: React.MouseEvent | KeyboardEvent,
       ) => {
+        event.preventDefault();
+        event.stopPropagation();
         if (value === undefined) {
           setUncontrolledSelectedOption(option);
         }
@@ -477,6 +485,12 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
 
     const popoverProps = {
       popoverZIndex,
+      onEntering,
+      onEnter,
+      onEntered,
+      onExiting,
+      onExit,
+      onExited,
       ...(usePortal
         ? {
             usePortal,

From 4fd2f0609e04596c3255d01391d50d6c9234752b Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Fri, 17 Nov 2023 08:59:30 -0500
Subject: [PATCH 272/351] Date Picker [LG-3792] adds tests (#2085)

* adding more tests

* add tickets

* remove comment

* more tests
---
 .../src/DatePicker/DatePicker.spec.tsx        | 109 ++++++++++++++++++
 .../DatePickerInput/DatePickerInput.spec.tsx  |  25 ++++
 .../DatePickerMenu/DatePickerMenu.spec.tsx    |  30 +++++
 .../DatePickerMenu/DatePickerMenu.tsx         |   2 +
 .../Calendar/CalendarCell/CalendarCell.tsx    |   1 -
 5 files changed, 166 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 72ed28dbd7..9c98b0c300 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1097,6 +1097,115 @@ describe('packages/date-picker', () => {
             await waitFor(() => expect(dec1Cell).toHaveFocus());
           });
         });
+
+        describe('shows the correct date in the input', () => {
+          test('after selecting a month and clicking a cell', async () => {
+            const { openMenu, findAllByRole, dayInput, monthInput, yearInput } =
+              renderDatePicker({ initialValue: new Date() });
+            const { monthSelect, queryCellByDate } = await openMenu();
+            userEvent.click(monthSelect!);
+            const options = await findAllByRole('option');
+            const Jan = options[0];
+            userEvent.click(Jan);
+
+            const jan1Cell = queryCellByDate(newUTC(2023, Month.January, 1));
+            userEvent.click(jan1Cell!);
+
+            await waitFor(() => {
+              expect(dayInput.value).toEqual('01');
+              expect(monthInput.value).toEqual('01');
+              expect(yearInput.value).toEqual('2023');
+            });
+          });
+
+          test('after selecting a month and clicking a cell a second time', async () => {
+            const { openMenu, findAllByRole, dayInput, monthInput, yearInput } =
+              renderDatePicker({ initialValue: new Date() });
+            const { monthSelect, queryCellByDate } = await openMenu();
+            userEvent.click(monthSelect!);
+            const options = await findAllByRole('option');
+            const Jan = options[0];
+            userEvent.click(Jan);
+
+            const jan1Cell = queryCellByDate(newUTC(2023, Month.January, 1));
+            userEvent.click(jan1Cell!);
+
+            const Feb = options[1];
+            userEvent.click(Feb);
+
+            const feb1Cell = queryCellByDate(newUTC(2023, Month.February, 1));
+            userEvent.click(feb1Cell!);
+
+            await waitFor(() => {
+              expect(dayInput.value).toEqual('01');
+              expect(monthInput.value).toEqual('02');
+              expect(yearInput.value).toEqual('2023');
+            });
+          });
+        });
+      });
+
+      describe('Changing the year', () => {
+        test.todo('is announced in an aria-live region');
+
+        describe('shows the correct date in the input', () => {
+          test('after selecting a year and clicking a cell', async () => {
+            const { openMenu, findAllByRole, dayInput, monthInput, yearInput } =
+              renderDatePicker({
+                initialValue: new Date(), // dec 26 2023
+                min: newUTC(1996, Month.January, 1),
+                max: newUTC(2026, Month.January, 1),
+              });
+            const { yearSelect, queryCellByDate } = await openMenu();
+            userEvent.click(yearSelect!);
+            const options = await findAllByRole('option');
+            const firstYear = options[0]; // 1996
+
+            userEvent.click(firstYear);
+
+            const dec1Cell = queryCellByDate(newUTC(1996, Month.December, 1));
+            userEvent.click(dec1Cell!);
+
+            await waitFor(() => {
+              expect(dayInput.value).toEqual('01');
+              expect(monthInput.value).toEqual('12');
+              expect(yearInput.value).toEqual('1996');
+            });
+          });
+
+          // TODO: This is a bug in the browsers but passes here 🤔
+          // https://jira.mongodb.org/browse/LG-3766
+          // In the browser the year input does not update
+          test.skip('after selecting a year and clicking a cell a second time', async () => {
+            const { openMenu, findAllByRole, dayInput, monthInput, yearInput } =
+              renderDatePicker({
+                initialValue: new Date(), // dec 26 2023
+                min: newUTC(1996, Month.January, 1),
+                max: newUTC(2026, Month.January, 1),
+              });
+            const { yearSelect, queryCellByDate } = await openMenu();
+            userEvent.click(yearSelect!);
+            const options = await findAllByRole('option');
+            const firstYear = options[0]; // 1996
+
+            userEvent.click(firstYear);
+
+            const dec196Cell = queryCellByDate(newUTC(1996, Month.December, 1));
+            userEvent.click(dec196Cell!);
+
+            const secondYear = options[1]; // 1997
+            userEvent.click(secondYear);
+
+            const dec197Cell = queryCellByDate(newUTC(1997, Month.December, 1));
+            userEvent.click(dec197Cell!);
+
+            await waitFor(() => {
+              expect(dayInput.value).toEqual('01');
+              expect(monthInput.value).toEqual('12');
+              expect(yearInput.value).toEqual('1997');
+            });
+          });
+        });
       });
     });
   });
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index e2d2416242..0bf87c33bd 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -118,5 +118,30 @@ describe('packages/date-picker/date-picker-input', () => {
         expect(yearInput).toHaveFocus();
       });
     });
+
+    // TODO: failing https://jira.mongodb.org/browse/LG-3770
+    describe.skip('typing', () => {
+      describe('allows only 2 characters', () => {
+        test('in day input', () => {
+          const { dayInput } = renderDatePickerInput();
+          userEvent.type(dayInput, '22222222');
+          expect(dayInput.value.length).toBe('2');
+        });
+
+        test('in month input', () => {
+          const { monthInput } = renderDatePickerInput();
+          userEvent.type(monthInput, '22222222');
+          expect(monthInput.value.length).toBe('2');
+        });
+      });
+
+      describe('allows only 4 characters', () => {
+        test('in year input', () => {
+          const { yearInput } = renderDatePickerInput();
+          userEvent.type(yearInput, '22222222');
+          expect(yearInput.value.length).toBe('4');
+        });
+      });
+    });
   });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 4257aa3590..0786adeb0a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -186,6 +186,21 @@ describe('packages/date-picker/date-picker-menu', () => {
         await waitFor(() => expect(prevDay).toHaveFocus());
       });
 
+      // FIXME: unsure if daylight savings is the reason this is failing
+      // Sun, Mar 12, 2023 – Sun, Nov 5, 2023
+      // https://jira.mongodb.org/browse/LG-3773
+      test.skip('left arrow moves focus to the previous day when switching between daylight savings and standard time', async () => {
+        const testDLSValue = new Date(Date.UTC(2023, Month.November, 6));
+        const { getCellWithValue } = renderDatePickerMenu(null, {
+          value: testDLSValue,
+        });
+        userEvent.tab();
+        userEvent.keyboard('{arrowleft}');
+        const prevDay = getCellWithValue(setUTCDate(testDLSValue, 5));
+
+        await waitFor(() => expect(prevDay).toHaveFocus());
+      });
+
       test('right arrow moves focus to the next day', async () => {
         const { getCellWithValue } = renderDatePickerMenu(null, {
           value: testValue,
@@ -208,6 +223,21 @@ describe('packages/date-picker/date-picker-menu', () => {
         await waitFor(() => expect(prevWeek).toHaveFocus());
       });
 
+      // FIXME: unsure if daylight savings is the reason this is failing
+      // Sun, Mar 12, 2023 – Sun, Nov 5, 2023
+      // https://jira.mongodb.org/browse/LG-3773
+      test.skip('up arrow moves focus to the previous week when switching between daylight savings and standard time', async () => {
+        const testDLSValue = new Date(Date.UTC(2023, Month.November, 9));
+        const { getCellWithValue } = renderDatePickerMenu(null, {
+          value: testDLSValue,
+        });
+        userEvent.tab();
+        userEvent.keyboard('{arrowup}');
+
+        const prevWeek = getCellWithValue(setUTCDate(testDLSValue, 2));
+        await waitFor(() => expect(prevWeek).toHaveFocus());
+      });
+
       test('down arrow moves focus to the next week', async () => {
         const { getCellWithValue } = renderDatePickerMenu(null, {
           value: testValue,
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 17d01eee1f..375cb4cd0f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -188,6 +188,8 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
         }
 
         case keyMap.ArrowUp: {
+          // TODO: https://jira.mongodb.org/browse/LG-3773
+          // console.log(subDays(new Date(Date.UTC(2023, 10, 10)), 1));
           nextHighlight = subDays(highlightStart, 7);
           break;
         }
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
index 94db3d5111..4b51979bc9 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
@@ -69,7 +69,6 @@ export const CalendarCell = React.forwardRef<
     const handleKeyDown: KeyboardEventHandler<HTMLTableCellElement> = e => {
       if (!isDisabled && (e.key === keyMap.Enter || e.key === keyMap.Space)) {
         (onClick as KeyboardEventHandler<HTMLTableCellElement>)?.(e);
-        // TODO: add focus back to input
       }
     };
 

From 1a9e17001dbb7a4ee2e6b8d163ac3045fb37802f Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Fri, 17 Nov 2023 11:39:07 -0500
Subject: [PATCH 273/351] Date Picker [LG-3756, LG-3771, LG-3774, LG-3768]
 Arrow keys in Date Input (#2071)

* fills in todo tests

* Implement up/down arrow key presses on Segment

* adds arrow key tests

* DatePicker [LG-3771, LG-3774] up/down arrows (#2078)

* adding up/down logic

* flip keu logic

* comments

* add tests

* remove opening of menu on keydown

* Creates `rollover` utility function

* updates rollover spec

* rm key arg from createSynthetic

* Adds arrow key tests to DateInputSegment

---------

Co-authored-by: Adam Thompson <adam.thompson@mongodb.com>

* Refactor segment/input to handle arrow key changes

* fix deps & lints

* open menu on segment change

* fix tz based tests

* Update setUTCMonth.spec.ts

* input does not open menu

---------

Co-authored-by: Shaneeza <shaneeza.ali@mongodb.com>
---
 .changeset/little-melons-beam.md              |   5 +
 .changeset/proud-doors-smoke.md               |   5 +
 .changeset/tall-mice-ring.md                  |   5 +
 packages/date-picker/package.json             |   3 +-
 .../src/DatePicker/DatePicker.spec.tsx        | 236 +++++++++++-------
 .../DatePickerInput/DatePickerInput.spec.tsx  | 126 ++++++++--
 .../DatePickerInput/DatePickerInput.tsx       |  72 +++---
 .../DateInputBox/DateInputBox.spec.tsx        | 104 +++-----
 .../DateInput/DateInputBox/DateInputBox.tsx   |  58 +----
 .../DateInputBox/DateInputBox.types.ts        |   5 +-
 .../DateInputSegment.spec.tsx                 | 181 ++++++++++++--
 .../DateInputSegment/DateInputSegment.tsx     |  78 +++++-
 .../DateInputSegment.types.ts                 |  19 +-
 .../DateInput/DateInputSegment/index.ts       |   5 +-
 .../useDateSegments/DateSegments.types.ts     |   6 +-
 .../date-picker/src/shared/utils/index.ts     |   2 +-
 .../utils/isSameUTCDay/isSameUTCDay.spec.ts   |  72 +++---
 .../isSameUTCMonth/isSameUTCMonth.spec.ts     |  68 ++---
 .../utils/setUTCMonth/setUTCMonth.spec.ts     |   9 +-
 .../createSyntheticEvent.ts                   |  27 +-
 packages/lib/src/helpers/index.ts             |   1 +
 packages/lib/src/helpers/rollover/index.ts    |  25 ++
 .../lib/src/helpers/rollover/rollover.spec.ts |  23 ++
 23 files changed, 752 insertions(+), 383 deletions(-)
 create mode 100644 .changeset/little-melons-beam.md
 create mode 100644 .changeset/proud-doors-smoke.md
 create mode 100644 .changeset/tall-mice-ring.md
 create mode 100644 packages/lib/src/helpers/rollover/index.ts
 create mode 100644 packages/lib/src/helpers/rollover/rollover.spec.ts

diff --git a/.changeset/little-melons-beam.md b/.changeset/little-melons-beam.md
new file mode 100644
index 0000000000..55c3df3205
--- /dev/null
+++ b/.changeset/little-melons-beam.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': minor
+---
+
+Updates Typescript signature of `createSyntheticEvent`
diff --git a/.changeset/proud-doors-smoke.md b/.changeset/proud-doors-smoke.md
new file mode 100644
index 0000000000..95f3ac743d
--- /dev/null
+++ b/.changeset/proud-doors-smoke.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': minor
+---
+
+Creates `rollover` utility function
diff --git a/.changeset/tall-mice-ring.md b/.changeset/tall-mice-ring.md
new file mode 100644
index 0000000000..a5ad5202cd
--- /dev/null
+++ b/.changeset/tall-mice-ring.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': patch
+---
+
+Updates `target` type in `createSyntheticEvent` to extend `EventTarget`
diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index dcb02652f7..455cd096b8 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -39,7 +39,8 @@
     "@leafygreen-ui/button": "^21.0.7",
     "mockdate": "^3.0.5",
     "storybook-mock-date-decorator": "^1.0.1",
-    "timezone-mock": "^1.3.6"
+    "timezone-mock": "^1.3.6",
+    "@jest/globals": "^29.6.2"
   },
   "resolutions": {
     "storybook-mock-date-decorator/@babel/runtime": "7.22.10",
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 9c98b0c300..2cb77751fe 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -331,6 +331,28 @@ describe('packages/date-picker', () => {
           userEvent.click(firstCell!);
           expect(handleValidation).toHaveBeenCalled();
         });
+
+        test('closes the menu', async () => {
+          const { openMenu } = renderDatePicker({});
+          const { calendarCells, menuContainerEl } = await openMenu();
+          const firstCell = calendarCells?.[0];
+          userEvent.click(firstCell!);
+          await waitForElementToBeRemoved(menuContainerEl);
+        });
+
+        test('updates the input', async () => {
+          const { openMenu, dayInput, monthInput, yearInput } =
+            renderDatePicker({});
+          const { todayCell } = await openMenu();
+          userEvent.click(todayCell!);
+          await waitFor(() => {
+            expect(dayInput.value).toBe(testToday.getUTCDate().toString());
+            expect(monthInput.value).toBe(
+              (testToday.getUTCMonth() + 1).toString(),
+            );
+            expect(yearInput.value).toBe(testToday.getUTCFullYear().toString());
+          });
+        });
       });
 
       describe('Clicking a Chevron', () => {
@@ -759,7 +781,25 @@ describe('packages/date-picker', () => {
        */
       describe('Arrow key', () => {
         describe('Input', () => {
-          test.todo('moves focus to segments');
+          test('right arrow moves focus through segments', () => {
+            const { yearInput, monthInput, dayInput } = renderDatePicker();
+            userEvent.click(yearInput);
+            userEvent.keyboard('{arrowright}');
+            expect(monthInput).toHaveFocus();
+
+            userEvent.keyboard('{arrowright}');
+            expect(dayInput).toHaveFocus();
+          });
+
+          test('left arrow moves focus back through segments', () => {
+            const { yearInput, monthInput, dayInput } = renderDatePicker();
+            userEvent.click(dayInput);
+            userEvent.keyboard('{arrowleft}');
+            expect(monthInput).toHaveFocus();
+
+            userEvent.keyboard('{arrowleft}');
+            expect(yearInput).toHaveFocus();
+          });
         });
         describe('Menu', () => {
           test('left arrow moves focus to the previous day', async () => {
@@ -799,110 +839,126 @@ describe('packages/date-picker', () => {
     });
 
     describe('Typing', () => {
-      describe('Typing into the input', () => {
-        test('opens the menu', async () => {
-          const { yearInput, findMenuElements } = renderDatePicker();
-          userEvent.tab();
-          expect(yearInput).toHaveFocus();
-          userEvent.keyboard('2');
-          const { menuContainerEl } = await findMenuElements();
-          expect(menuContainerEl).toBeInTheDocument();
-        });
+      test('does not open the menu', async () => {
+        const { yearInput, findMenuElements } = renderDatePicker();
+        userEvent.tab();
+        expect(yearInput).toHaveFocus();
+        userEvent.keyboard('2');
+        const { menuContainerEl } = await findMenuElements();
+        expect(menuContainerEl).not.toBeInTheDocument();
+      });
 
-        test('does not fire a value change handler', () => {
-          const onDateChange = jest.fn();
-          const { yearInput } = renderDatePicker({
-            onDateChange,
-          });
-          userEvent.type(yearInput, '2023');
-          expect(onDateChange).not.toHaveBeenCalled();
+      test('does not fire a value change handler', () => {
+        const onDateChange = jest.fn();
+        const { yearInput } = renderDatePicker({
+          onDateChange,
         });
+        userEvent.type(yearInput, '2023');
+        expect(onDateChange).not.toHaveBeenCalled();
+      });
 
-        test('fires a segment change handler', () => {
-          const onChange = jest.fn();
-          const { yearInput } = renderDatePicker({
-            onChange,
-          });
-          userEvent.type(yearInput, '2023');
-          expect(onChange).toHaveBeenCalledWith(
-            eventContainingTargetValue('2023'),
-          );
+      test('fires a segment change handler', () => {
+        const onChange = jest.fn();
+        const { yearInput } = renderDatePicker({
+          onChange,
         });
+        userEvent.type(yearInput, '2023');
+        expect(onChange).toHaveBeenCalledWith(
+          eventContainingTargetValue('2023'),
+        );
+      });
 
-        describe('auto-advance focus', () => {
-          describe('ISO format', () => {
-            const dateFormat = 'iso8601';
-            test('when year value is explicit, focus advances to month', () => {
-              const { yearInput, monthInput } = renderDatePicker({
-                dateFormat,
-              });
-              userEvent.type(yearInput, '1999');
-              expect(monthInput).toHaveFocus();
-            });
-            test('when year value is ambiguous, focus does not advance', () => {
-              const { yearInput } = renderDatePicker({ dateFormat });
-              userEvent.type(yearInput, '2');
-              expect(yearInput).toHaveFocus();
-            });
-            test('when year value is out-of-range, focus does not advance', () => {
-              const { yearInput } = renderDatePicker({ dateFormat });
-              userEvent.type(yearInput, '1945');
-              expect(yearInput).toHaveFocus();
-            });
+      test('segment value is not immediately formatted', () => {
+        const onChange = jest.fn();
+        const { dayInput } = renderDatePicker({ onChange });
+        userEvent.type(dayInput, '2');
+        expect(onChange).toHaveBeenCalledWith(eventContainingTargetValue('2'));
+        expect(dayInput.value).toBe('2');
+      });
 
-            test('when month value is explicit, focus advances to day', () => {
-              const { monthInput, dayInput } = renderDatePicker({
-                dateFormat,
-              });
-              userEvent.type(monthInput, '5');
-              expect(dayInput).toHaveFocus();
-            });
-            test('when month value is ambiguous, focus does not advance', () => {
-              const { monthInput } = renderDatePicker({
-                dateFormat,
-              });
-              userEvent.type(monthInput, '1');
-              expect(monthInput).toHaveFocus();
+      test('value is formatted on segment blur', () => {
+        const onChange = jest.fn();
+        const { dayInput } = renderDatePicker({ onChange });
+        userEvent.type(dayInput, '2');
+        userEvent.tab();
+        expect(onChange).toHaveBeenCalledWith(eventContainingTargetValue('02'));
+        expect(dayInput.value).toBe('02');
+      });
+
+      describe('auto-advances focus', () => {
+        describe('for ISO format', () => {
+          const dateFormat = 'iso8601';
+
+          test('when year value is explicit, focus advances to month', () => {
+            const { yearInput, monthInput } = renderDatePicker({
+              dateFormat,
             });
+            userEvent.type(yearInput, '1999');
+            expect(monthInput).toHaveFocus();
           });
-
-          describe('en-US format', () => {
-            const dateFormat = 'en-US';
-            test('when month value is explicit, focus advances to day', () => {
-              const { monthInput, dayInput } = renderDatePicker({
-                dateFormat,
-              });
-              userEvent.type(monthInput, '5');
-              expect(dayInput).toHaveFocus();
+          test('when year value is ambiguous, focus does not advance', () => {
+            const { yearInput } = renderDatePicker({ dateFormat });
+            userEvent.type(yearInput, '2');
+            expect(yearInput).toHaveFocus();
+          });
+          test('when year value is out-of-range, focus does not advance', () => {
+            const { yearInput } = renderDatePicker({ dateFormat });
+            userEvent.type(yearInput, '1945');
+            expect(yearInput).toHaveFocus();
+          });
+          test('when month value is explicit, focus advances to day', () => {
+            const { monthInput, dayInput } = renderDatePicker({
+              dateFormat,
             });
-            test('when month value is ambiguous, focus does not advance', () => {
-              const { monthInput } = renderDatePicker({ dateFormat });
-              userEvent.type(monthInput, '1');
-              expect(monthInput).toHaveFocus();
+            userEvent.type(monthInput, '5');
+            expect(dayInput).toHaveFocus();
+          });
+          test('when month value is ambiguous, focus does not advance', () => {
+            const { monthInput } = renderDatePicker({
+              dateFormat,
             });
+            userEvent.type(monthInput, '1');
+            expect(monthInput).toHaveFocus();
+          });
+        });
 
-            test('when day value is explicit, focus advances to year', () => {
-              const { dayInput, yearInput } = renderDatePicker({
-                dateFormat,
-              });
-              userEvent.type(dayInput, '5');
-              expect(yearInput).toHaveFocus();
+        describe('for en-US format', () => {
+          const dateFormat = 'en-US';
+
+          test('when month value is explicit, focus advances to day', () => {
+            const { monthInput, dayInput } = renderDatePicker({
+              dateFormat,
             });
-            test('when day value is ambiguous, focus does not advance', () => {
-              const { dayInput } = renderDatePicker({ dateFormat });
-              userEvent.type(dayInput, '2');
-              expect(dayInput).toHaveFocus();
+            userEvent.type(monthInput, '5');
+            expect(dayInput).toHaveFocus();
+          });
+          test('when month value is ambiguous, focus does not advance', () => {
+            const { monthInput } = renderDatePicker({ dateFormat });
+            userEvent.type(monthInput, '1');
+            expect(monthInput).toHaveFocus();
+          });
+
+          test('when day value is explicit, focus advances to year', () => {
+            const { dayInput, yearInput } = renderDatePicker({
+              dateFormat,
             });
+            userEvent.type(dayInput, '5');
+            expect(yearInput).toHaveFocus();
+          });
+          test('when day value is ambiguous, focus does not advance', () => {
+            const { dayInput } = renderDatePicker({ dateFormat });
+            userEvent.type(dayInput, '2');
+            expect(dayInput).toHaveFocus();
+          });
 
-            test('when year value is ambiguous, focus does not update', () => {
-              const { monthInput, dayInput, yearInput } = renderDatePicker({
-                dateFormat,
-              });
-              userEvent.type(monthInput, '5');
-              userEvent.type(dayInput, '5');
-              userEvent.type(yearInput, '2');
-              expect(yearInput).toHaveFocus();
+          test('when year value is ambiguous, focus does not update', () => {
+            const { monthInput, dayInput, yearInput } = renderDatePicker({
+              dateFormat,
             });
+            userEvent.type(monthInput, '5');
+            userEvent.type(dayInput, '5');
+            userEvent.type(yearInput, '2');
+            expect(yearInput).toHaveFocus();
           });
         });
       });
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 0bf87c33bd..922e490435 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { newUTC } from '../../shared';
 import {
   DatePickerProvider,
   DatePickerProviderProps,
@@ -46,12 +47,33 @@ const renderDatePickerInput = (
   };
 };
 
+const testDate = newUTC(2023, Month.December, 26);
+
 describe('packages/date-picker/date-picker-input', () => {
   beforeEach(() => {
     // Set the current time to midnight UTC on 2023-12-26
-    jest
-      .useFakeTimers()
-      .setSystemTime(new Date(Date.UTC(2023, Month.December, 26)));
+    jest.useFakeTimers().setSystemTime(testDate);
+  });
+
+  describe('Typing', () => {
+    test('typing into a segment updates the segment value', () => {
+      const { dayInput } = renderDatePickerInput();
+      userEvent.type(dayInput, '26');
+      expect(dayInput.value).toBe('26');
+    });
+
+    test('segment value is not immediately formatted', () => {
+      const { dayInput } = renderDatePickerInput();
+      userEvent.type(dayInput, '2');
+      expect(dayInput.value).toBe('2');
+    });
+
+    test('value is formatted on segment blur', () => {
+      const { dayInput } = renderDatePickerInput();
+      userEvent.type(dayInput, '2');
+      userEvent.tab();
+      expect(dayInput.value).toBe('02');
+    });
   });
 
   describe('Keyboard interaction', () => {
@@ -59,41 +81,55 @@ describe('packages/date-picker/date-picker-input', () => {
     describe('Left Arrow', () => {
       test('focuses the previous segment when the segment is empty', () => {
         const { yearInput, monthInput } = renderDatePickerInput();
-        userEvent.type(monthInput, '{arrowleft}');
+        userEvent.click(monthInput);
+        userEvent.keyboard('{arrowleft}');
         expect(yearInput).toHaveFocus();
       });
 
       test('moves the cursor when the segment has a value', () => {
         const { monthInput } = renderDatePickerInput(null, {
-          value: new Date(),
+          value: testDate,
         });
-        userEvent.type(monthInput, '{arrowleft}');
+        userEvent.click(monthInput);
+        userEvent.keyboard('{arrowleft}');
         expect(monthInput).toHaveFocus();
       });
 
-      test.todo(
-        'focuses the previous segment if the cursor is at the start of the input text',
-      );
+      test('focuses the previous segment if the cursor is at the start of the input text', () => {
+        const { yearInput, monthInput } = renderDatePickerInput(null, {
+          value: testDate,
+        });
+        userEvent.click(monthInput);
+        userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
+        expect(yearInput).toHaveFocus();
+      });
     });
 
     describe('Right Arrow', () => {
       test('focuses the next segment when the segment is empty', () => {
-        const { monthInput, dayInput } = renderDatePickerInput();
-        userEvent.type(monthInput, '{arrowright}');
-        expect(dayInput).toHaveFocus();
+        const { yearInput, monthInput } = renderDatePickerInput();
+        userEvent.click(yearInput);
+        userEvent.keyboard('{arrowright}');
+        expect(monthInput).toHaveFocus();
       });
 
-      test('moves the cursor when the segment has a value', () => {
-        const { monthInput } = renderDatePickerInput(null, {
-          value: new Date(),
+      test('focuses the next segment if the cursor is at the start of the input text', () => {
+        const { yearInput, monthInput } = renderDatePickerInput(null, {
+          value: testDate,
         });
-        userEvent.type(monthInput, '{arrowright}');
+        userEvent.click(yearInput);
+        userEvent.keyboard('{arrowright}');
         expect(monthInput).toHaveFocus();
       });
 
-      test.todo(
-        'focuses the next segment if the cursor is at the end of the input text',
-      );
+      test('moves the cursor when the segment has a value', () => {
+        const { yearInput } = renderDatePickerInput(null, {
+          value: new Date(),
+        });
+        userEvent.click(yearInput);
+        userEvent.keyboard('{arrowleft}{arrowright}');
+        expect(yearInput).toHaveFocus();
+      });
     });
 
     describe('Backspace key', () => {
@@ -119,6 +155,58 @@ describe('packages/date-picker/date-picker-input', () => {
       });
     });
 
+    describe('Up Arrow', () => {
+      test('keeps the focus in the current segment', () => {
+        const { monthInput } = renderDatePickerInput();
+        userEvent.click(monthInput);
+        userEvent.keyboard('{arrowup}');
+        expect(monthInput).toHaveFocus();
+      });
+
+      test('keeps the focus in the current segment even if the value is valid', () => {
+        const { monthInput } = renderDatePickerInput();
+        userEvent.click(monthInput);
+        userEvent.keyboard('{arrowup}{arrowup}{arrowup}');
+        expect(monthInput).toHaveValue('03');
+        expect(monthInput).toHaveFocus();
+      });
+
+      test('Resets the value to the min value when the new value is greater than the max value', () => {
+        const { monthInput } = renderDatePickerInput();
+        userEvent.click(monthInput);
+        userEvent.keyboard('{arrowup}');
+        expect(monthInput).toHaveValue('01');
+        userEvent.keyboard(
+          '{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}',
+        );
+        expect(monthInput).toHaveValue('01');
+      });
+    });
+
+    describe('Down Arrow', () => {
+      test('keeps the focus in the current segment', () => {
+        const { monthInput } = renderDatePickerInput();
+        userEvent.click(monthInput);
+        userEvent.keyboard('{arrowdown}');
+        expect(monthInput).toHaveFocus();
+      });
+
+      test('keeps the focus in the current segment even if the value is valid', () => {
+        const { monthInput } = renderDatePickerInput();
+        userEvent.click(monthInput);
+        userEvent.keyboard('{arrowdown}{arrowdown}{arrowdown}');
+        expect(monthInput).toHaveValue('10');
+        expect(monthInput).toHaveFocus();
+      });
+
+      test('Resets the value to the max value when the new value is less than the min value', () => {
+        const { monthInput } = renderDatePickerInput();
+        userEvent.click(monthInput);
+        userEvent.keyboard('{arrowdown}');
+        expect(monthInput).toHaveValue('12');
+      });
+    });
+
     // TODO: failing https://jira.mongodb.org/browse/LG-3770
     describe.skip('typing', () => {
       describe('allows only 2 characters', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index a34cfb729c..a2694a1a15 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -1,14 +1,15 @@
 import React, {
-  ChangeEventHandler,
+  ChangeEvent,
   FocusEventHandler,
   forwardRef,
   KeyboardEventHandler,
   MouseEventHandler,
 } from 'react';
 
-import { keyMap } from '@leafygreen-ui/lib';
+import { createSyntheticEvent, keyMap } from '@leafygreen-ui/lib';
 
 import { DateFormField, DateInputBox } from '../../shared/components/DateInput';
+import { DateInputSegmentChangeEventHandler } from '../../shared/components/DateInput/DateInputSegment';
 import { useDatePickerContext } from '../../shared/components/DatePickerContext';
 import {
   isElementInputSegment,
@@ -82,7 +83,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     };
 
     /** Called on any keydown within the input element */
-    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
+    const handleInputKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
       const { target: _target, key } = e;
       const target = _target as HTMLElement;
       const isSegment = isElementInputSegment(target, segmentRefs);
@@ -91,14 +92,15 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       if (!isSegment) return;
 
       const isSegmentEmpty = isZeroLike(target.value);
-      const cursorPosition = target.selectionEnd;
+
+      const { selectionStart, selectionEnd } = target;
 
       switch (key) {
         case keyMap.ArrowLeft: {
           // if input is empty,
           // or the cursor is at the beginning of the input
           // set focus to prev. input (if it exists)
-          if (isSegmentEmpty || cursorPosition === 0) {
+          if (isSegmentEmpty || selectionStart === 0) {
             const segmentToFocus = getRelativeSegment('prev', {
               segment: target,
               formatParts,
@@ -116,7 +118,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           // if input is empty,
           // or the cursor is at the end of the input
           // set focus to next. input (if it exists)
-          if (isSegmentEmpty || cursorPosition === target.value.length) {
+          if (isSegmentEmpty || selectionEnd === target.value.length) {
             const segmentToFocus = getRelativeSegment('next', {
               segment: target,
               formatParts,
@@ -132,9 +134,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
         case keyMap.ArrowUp:
         case keyMap.ArrowDown: {
-          // if decrementing the segment's value is in range
-          // decrement that segment value
-          // This is the default `input type=number` & `role="spinbutton"` behavior
+          // increment/decrement logic implemented by DateInputSegment
           break;
         }
 
@@ -155,10 +155,6 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         case keyMap.Tab:
           // Behavior handled by parent or menu
           break;
-
-        default:
-          // any other keydown should open the menu
-          openMenu();
       }
 
       // call any handler that was passed in
@@ -185,35 +181,51 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
     /**
      * Called when any segment changes
+     * If up/down arrows are pressed, don't move to the next segment
      */
-    const handleSegmentChange: ChangeEventHandler<HTMLInputElement> = e => {
-      const segment = e.target.dataset['segment'];
-      const segmentValue = e.target.value;
+    const handleSegmentChange: DateInputSegmentChangeEventHandler = e => {
+      const { segment, value: segmentValue, meta } = e;
+      const usingArrowKeys =
+        meta?.key === keyMap.ArrowDown || meta?.key === keyMap.ArrowUp;
 
       if (isValidSegmentName(segment)) {
-        if (
-          isValidValueForSegment(segment, segmentValue) &&
-          isExplicitSegmentValue(segment, segmentValue)
-        ) {
-          const nextSegment = getRelativeSegment('next', {
-            segment: segmentRefs[segment],
-            formatParts,
-            segmentRefs,
-          });
-
-          nextSegment?.current?.focus();
-        } else if (!isValidValueForSegment(segment, segmentValue) && isDirty) {
+        if (!usingArrowKeys) {
+          if (
+            isValidValueForSegment(segment, segmentValue) &&
+            isExplicitSegmentValue(segment, segmentValue)
+          ) {
+            const nextSegment = getRelativeSegment('next', {
+              segment: segmentRefs[segment],
+              formatParts,
+              segmentRefs,
+            });
+
+            nextSegment?.current?.focus();
+          }
+        }
+
+        if (!isValidValueForSegment(segment, segmentValue) && isDirty) {
           handleValidation?.(value);
         }
       }
-      onSegmentChange?.(e);
+
+      const changeEvent = new Event('change');
+      const target = segmentRefs[segment].current;
+
+      if (target) {
+        const reactEvent = createSyntheticEvent<ChangeEvent<HTMLInputElement>>(
+          changeEvent,
+          target,
+        );
+        onSegmentChange?.(reactEvent);
+      }
     };
 
     return (
       <DateFormField
         ref={fwdRef}
         buttonRef={calendarButtonRef}
-        onKeyDown={handleKeyDown}
+        onKeyDown={handleInputKeyDown}
         onInputClick={handleInputClick}
         onBlur={handleInputBlur}
         onIconButtonClick={handleIconButtonClick}
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
index 09a8dbb025..4b999d7e44 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
+import { jest } from '@jest/globals';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Month } from '../../../constants';
 import { SegmentRefs } from '../../../hooks';
 import { newUTC } from '../../../utils';
-import { eventContainingTargetValue } from '../../../utils/testutils';
 import {
   DatePickerProvider,
   DatePickerProviderProps,
   defaultDatePickerContext,
 } from '../../DatePickerContext';
+import { DateInputSegmentChangeEventHandler } from '../DateInputSegment/DateInputSegment.types';
 
 import { DateInputBox, type DateInputBoxProps } from '.';
 
@@ -52,13 +53,19 @@ const renderDateInputBox = (
 };
 
 describe('packages/date-picker/shared/date-input-box', () => {
+  const onChange = jest.fn<DateInputSegmentChangeEventHandler>();
+
   const testContext: Partial<DatePickerProviderProps> = {
     dateFormat: 'iso8601',
     timeZone: 'UTC',
   };
 
-  describe('rendering', () => {
-    describe.each(['day', 'month', 'year'])('%i', segment => {
+  afterEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('Rendering', () => {
+    describe.each(['day', 'month', 'year'])('%p', segment => {
       test('renders the correct aria attributes', () => {
         const result = renderDateInputBox();
         const input = result.getByLabelText(segment);
@@ -99,9 +106,9 @@ describe('packages/date-picker/shared/date-input-box', () => {
         undefined,
         testContext,
       );
-      expect(dayInput).toHaveValue(null);
-      expect(monthInput).toHaveValue(null);
-      expect(yearInput).toHaveValue(null);
+      expect(dayInput).toHaveValue('');
+      expect(monthInput).toHaveValue('');
+      expect(yearInput).toHaveValue('');
     });
 
     test('renders a filled text box when value is passed', () => {
@@ -116,7 +123,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
     });
   });
 
-  describe('typing', () => {
+  describe('Typing', () => {
     test('typing into a segment updates the segment value', () => {
       const { dayInput } = renderDateInputBox(undefined, testContext);
       userEvent.type(dayInput, '26');
@@ -129,6 +136,13 @@ describe('packages/date-picker/shared/date-input-box', () => {
       expect(dayInput.value).toBe('2');
     });
 
+    test('value is formatted on segment blur', () => {
+      const { dayInput } = renderDateInputBox(undefined, testContext);
+      userEvent.type(dayInput, '2');
+      userEvent.tab();
+      expect(dayInput.value).toBe('02');
+    });
+
     test('deleting characters works as expected', () => {
       const { dayInput, yearInput } = renderDateInputBox(
         { value: newUTC(1993, Month.December, 26) },
@@ -155,8 +169,6 @@ describe('packages/date-picker/shared/date-input-box', () => {
     });
 
     test('typing into a segment fires the change handler', () => {
-      const onChange = jest.fn();
-
       const { yearInput } = renderDateInputBox(
         {
           value: null,
@@ -166,7 +178,9 @@ describe('packages/date-picker/shared/date-input-box', () => {
       );
       userEvent.type(yearInput, '1993');
 
-      expect(onChange).toHaveBeenCalledWith(eventContainingTargetValue('1993'));
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({ value: '1993' }),
+      );
     });
 
     test('value setter is called when a complete date is entered', () => {
@@ -185,50 +199,9 @@ describe('packages/date-picker/shared/date-input-box', () => {
         expect.objectContaining(newUTC(1993, Month.December, 26)),
       );
     });
-
-    test('value is only formatted on segment blur', () => {
-      const { dayInput } = renderDateInputBox(undefined, testContext);
-      userEvent.type(dayInput, '2');
-      userEvent.tab();
-      expect(dayInput.value).toBe('02');
-    });
-
-    // TODO:
-    // eslint-disable-next-line jest/no-disabled-tests
-    describe.skip('Auto-focus', () => {
-      test('typing a complete segment value focuses the next segment', () => {
-        const { yearInput, monthInput } = renderDateInputBox(
-          undefined,
-          testContext,
-        );
-        userEvent.type(yearInput, '1993');
-        expect(monthInput).toHaveFocus();
-      });
-
-      test('typing an incomplete segment does not focus the next segment', () => {
-        const { monthInput } = renderDateInputBox(undefined, testContext);
-        userEvent.type(monthInput, '1');
-        expect(monthInput).toHaveFocus();
-      });
-
-      test('typing an incomplete value focuses the next segment if there are no valid second characters', () => {
-        const { monthInput, dayInput } = renderDateInputBox(
-          undefined,
-          testContext,
-        );
-        userEvent.type(monthInput, '2'); // There are no months that start with 2#
-        expect(dayInput).toHaveFocus();
-      });
-
-      test('value is formatted on auto-focus', () => {
-        const { monthInput } = renderDateInputBox(undefined, testContext);
-        userEvent.type(monthInput, '2'); // There are no months that start with 2#
-        expect(monthInput).toHaveValue('02');
-      });
-    });
   });
 
-  describe('mouse interaction', () => {
+  describe('Mouse interaction', () => {
     test('click on segment focuses it', () => {
       const { dayInput } = renderDateInputBox(undefined, {
         dateFormat: 'iso8601',
@@ -239,30 +212,6 @@ describe('packages/date-picker/shared/date-input-box', () => {
   });
 
   describe('Keyboard interaction', () => {
-    // Skipping, since {arrowup}/{arrowdown} do not trigger
-    // a change event in userEvent
-    // https://github.com/testing-library/user-event/issues/1066
-    // eslint-disable-next-line jest/no-disabled-tests
-    describe.skip('Up arrow', () => {
-      describe('increments the input value', () => {
-        test('year input', async () => {
-          const { yearInput } = renderDateInputBox({});
-          userEvent.type(yearInput, '2023{arrowup}');
-          expect(yearInput.value).toBe('2024');
-        });
-        test('month input', async () => {
-          const { monthInput } = renderDateInputBox();
-          userEvent.type(monthInput, '9{arrowup}');
-          expect(monthInput.value).toBe('10');
-        });
-        test('day input', async () => {
-          const { dayInput } = renderDateInputBox();
-          userEvent.type(dayInput, '26{arrowup}');
-          expect(dayInput.value).toBe('27');
-        });
-      });
-    });
-
     test('Tab moves focus to next segment', () => {
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
         undefined,
@@ -274,5 +223,8 @@ describe('packages/date-picker/shared/date-input-box', () => {
       userEvent.tab();
       expect(dayInput).toHaveFocus();
     });
+
+    // Arrow key interaction tested in DateInputSegment
+    // & in relevant DatePicker/RangePicker input component
   });
 });
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index b669254953..a08b424657 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -1,18 +1,12 @@
-import React, {
-  ChangeEvent,
-  ChangeEventHandler,
-  FocusEventHandler,
-} from 'react';
+import React, { FocusEventHandler } from 'react';
 import { isSameDay } from 'date-fns';
 import isEqual from 'lodash/isEqual';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { createSyntheticEvent } from '@leafygreen-ui/lib';
 
 import {
-  DateSegment,
   DateSegmentsState,
   isDateSegment,
   useDateSegments,
@@ -24,6 +18,7 @@ import {
 } from '../../../utils';
 import { useDatePickerContext } from '../../DatePickerContext';
 import { DateInputSegment } from '../DateInputSegment';
+import { DateInputSegmentChangeEventHandler } from '../DateInputSegment/DateInputSegment.types';
 
 import {
   segmentPartsWrapperStyles,
@@ -53,7 +48,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
       className,
       labelledBy,
       segmentRefs,
-      onChange: onSegmentChange,
+      onChange: onSegmentChangeProp,
       ...rest
     }: DateInputBoxProps,
     fwdRef,
@@ -63,23 +58,6 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
 
     const containerRef = useForwardedRef(fwdRef, null);
 
-    /**
-     * Fires a synthetic change event
-     * and calls the provided `onChange` handler
-     */
-    const triggerChangeEventForSegment = (segment: DateSegment) => {
-      const changeEvent = new Event('change');
-      const eventTarget = segmentRefs[segment].current;
-
-      if (eventTarget) {
-        const reactEvent = createSyntheticEvent(
-          changeEvent,
-          eventTarget,
-        ) as ChangeEvent<HTMLInputElement>;
-        onSegmentChange?.(reactEvent);
-      }
-    };
-
     /**
      * When a segment is updated,
      * trigger a `change` event for the segment, and
@@ -88,21 +66,12 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     const onSegmentsUpdate = (
       newSegments: DateSegmentsState,
       prevSegments?: DateSegmentsState,
-      updatedSegment?: DateSegment,
     ) => {
-      const utcDate = newDateFromSegments(newSegments);
-      const haveSegmentValuesChanged = !isEqual(newSegments, prevSegments);
-      const areAllSegmentsEmpty = !doesSomeSegmentExist(newSegments);
+      const hasAnySegmentChanged = !isEqual(newSegments, prevSegments);
 
-      if (haveSegmentValuesChanged) {
-        // Synthetically trigger the onChange event passed in from the parent
-        if (updatedSegment) {
-          triggerChangeEventForSegment(updatedSegment);
-        } else {
-          Object.keys(newSegments).forEach(seg => {
-            triggerChangeEventForSegment(seg as DateSegment);
-          });
-        }
+      if (hasAnySegmentChanged) {
+        const utcDate = newDateFromSegments(newSegments);
+        const areAllSegmentsEmpty = !doesSomeSegmentExist(newSegments);
 
         if (utcDate) {
           // Only update the value iff all parts are set, and create a valid date.
@@ -111,7 +80,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
           if (shouldUpdate) {
             setDateValue?.(utcDate);
           }
-        } else if (haveSegmentValuesChanged && areAllSegmentsEmpty) {
+        } else if (hasAnySegmentChanged && areAllSegmentsEmpty) {
           // if no segment exists, set the external value to null
           setDateValue?.(null);
         }
@@ -124,15 +93,12 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     });
 
     /** fired when an individual segment value changes */
-    const handleSegmentChange: ChangeEventHandler<HTMLInputElement> = e => {
-      const segmentName = e.target.getAttribute('id');
-      const newValue = e.target.value;
-
-      if (isDateSegment(segmentName)) {
-        setSegment(segmentName, newValue);
-      }
+    const handleSegmentChange: DateInputSegmentChangeEventHandler = event => {
+      setSegment(event.segment, event.value);
+      onSegmentChangeProp?.(event);
     };
 
+    /** Triggered when  */
     const handleSegmentBlur: FocusEventHandler<HTMLInputElement> = e => {
       const segmentName = e.target.getAttribute('id');
       const newValue = e.target.value;
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
index e6d02353d8..be3dc58a53 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
@@ -1,9 +1,8 @@
-import { ChangeEventHandler } from 'react';
-
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 import { SegmentRefs } from '../../../hooks';
 import { DateType } from '../../../types';
+import { DateInputSegmentChangeEventHandler } from '../DateInputSegment/DateInputSegment.types';
 
 export interface DateInputBoxProps
   extends Omit<HTMLElementProps<'div'>, 'onChange'> {
@@ -21,7 +20,7 @@ export interface DateInputBoxProps
   /**
    * Callback fired when any segment changes, but not necessarily a full value
    */
-  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onChange?: DateInputSegmentChangeEventHandler;
 
   /**
    * id of the labelling element
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 c237ea1fc8..f2ea94442e 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
@@ -1,12 +1,17 @@
 import React from 'react';
+import { jest } from '@jest/globals';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { mean, round } from 'lodash';
 
-import { eventContainingTargetValue } from '../../../utils/testutils';
+import { defaultMax, defaultMin } from '../../../constants';
+import { DateSegment } from '../../../hooks';
+import { getValueFormatter } from '../../../utils';
 
+import { DateInputSegmentChangeEventHandler } from './DateInputSegment.types';
 import { DateInputSegment, type DateInputSegmentProps } from '.';
 
-const handler = jest.fn();
+const onChangeHandler = jest.fn<DateInputSegmentChangeEventHandler>();
 
 const renderSegment = (props: DateInputSegmentProps) => {
   const result = render(<DateInputSegment {...props} />);
@@ -18,8 +23,8 @@ const renderSegment = (props: DateInputSegmentProps) => {
 };
 
 describe('packages/date-picker/shared/date-input-segment', () => {
-  beforeEach(() => {
-    handler.mockClear();
+  afterEach(() => {
+    onChangeHandler.mockClear();
   });
 
   describe('rendering', () => {
@@ -89,35 +94,169 @@ describe('packages/date-picker/shared/date-input-segment', () => {
   describe('Typing', () => {
     test('calls the change handler', () => {
       const result = render(
-        <DateInputSegment segment="day" onChange={handler} />,
+        <DateInputSegment segment="day" onChange={onChangeHandler} />,
       );
       const input = result.getByTestId('lg-date_picker_input-segment');
-      userEvent.type(input, '12');
-      expect(handler).toHaveBeenCalledWith(eventContainingTargetValue('12'));
+      userEvent.type(input, '8');
+      expect(onChangeHandler).toHaveBeenCalledWith(
+        expect.objectContaining({ value: '8' }),
+      );
     });
-  });
 
-  // Skipping, since {arrowup}/{arrowdown} do not trigger
-  // a change event in userEvent
-  // https://github.com/testing-library/user-event/issues/1066
-  // eslint-disable-next-line jest/no-disabled-tests
-  describe.skip('Arrow Keys', () => {
-    test('ArrowUp calls handler with +1', () => {
+    test('allows leading zeroes', () => {
       const result = render(
-        <DateInputSegment segment="day" onChange={handler} value={'08'} />,
+        <DateInputSegment segment="day" onChange={onChangeHandler} />,
       );
       const input = result.getByTestId('lg-date_picker_input-segment');
-      userEvent.type(input, '{arrowup}');
-      expect(handler).toHaveBeenCalledWith('09');
+      userEvent.type(input, '0');
+      expect(onChangeHandler).toHaveBeenCalledWith(
+        expect.objectContaining({ value: '0' }),
+      );
     });
 
-    test('ArrowDown calls handler with -1', () => {
+    test('does not allow non-number characters', () => {
       const result = render(
-        <DateInputSegment segment="day" onChange={handler} value={'08'} />,
+        <DateInputSegment segment="day" onChange={onChangeHandler} />,
       );
       const input = result.getByTestId('lg-date_picker_input-segment');
-      userEvent.type(input, '{arrowdown}');
-      expect(handler).toHaveBeenCalledWith('07');
+      userEvent.type(input, 'aB$/');
+      expect(onChangeHandler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Keyboard', () => {
+    describe('Backspace', () => {
+      test('deletes value in the input', () => {
+        const result = render(
+          <DateInputSegment
+            segment="day"
+            onChange={onChangeHandler}
+            value="26"
+          />,
+        );
+        const input = result.getByTestId('lg-date_picker_input-segment');
+        userEvent.type(input, '{backspace}');
+        expect(onChangeHandler).toHaveBeenCalledWith(
+          expect.objectContaining({ value: '2' }),
+        );
+      });
+
+      test('fully clears the input', () => {
+        const result = render(
+          <DateInputSegment
+            segment="day"
+            onChange={onChangeHandler}
+            value="2"
+          />,
+        );
+        const input = result.getByTestId('lg-date_picker_input-segment');
+        userEvent.type(input, '{backspace}');
+        expect(onChangeHandler).toHaveBeenCalledWith(
+          expect.objectContaining({ value: '' }),
+        );
+      });
+    });
+
+    describe('Arrow Keys', () => {
+      const testCases: Array<DateSegment> = ['day', 'month', 'year'];
+
+      describe.each(testCases)('in %p input', segment => {
+        const formatter = getValueFormatter(segment);
+
+        const minValue = defaultMin[segment];
+        const maxValue = defaultMax[segment];
+        const defaultValue = round(mean([minValue, maxValue]));
+
+        describe('Up arrow', () => {
+          test('calls handler with value +1', () => {
+            const result = render(
+              <DateInputSegment
+                segment={segment}
+                onChange={onChangeHandler}
+                value={`${defaultValue}`}
+              />,
+            );
+            const input = result.getByTestId('lg-date_picker_input-segment');
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(defaultValue + 1) }),
+            );
+          });
+
+          test('calls handler with `min` if initially undefined', () => {
+            const result = render(
+              <DateInputSegment onChange={onChangeHandler} segment={segment} />,
+            );
+            const input = result.getByTestId('lg-date_picker_input-segment');
+
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(minValue) }),
+            );
+          });
+
+          test('calls handler with `min` when the new value is greater than the `max` value', () => {
+            const result = render(
+              <DateInputSegment
+                onChange={onChangeHandler}
+                segment={segment}
+                value={`${maxValue}`}
+              />,
+            );
+            const input = result.getByTestId('lg-date_picker_input-segment');
+
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(minValue) }),
+            );
+          });
+        });
+
+        describe('Down arrow', () => {
+          test('calls handler with value -1', () => {
+            const result = render(
+              <DateInputSegment
+                segment={segment}
+                onChange={onChangeHandler}
+                value={`${defaultValue}`}
+              />,
+            );
+            const input = result.getByTestId('lg-date_picker_input-segment');
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(defaultValue - 1) }),
+            );
+          });
+
+          test('calls handler with `max` if initially undefined', () => {
+            const result = render(
+              <DateInputSegment onChange={onChangeHandler} segment={segment} />,
+            );
+            const input = result.getByTestId('lg-date_picker_input-segment');
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(maxValue) }),
+            );
+          });
+
+          test('calls handler with `max` value when the new value is less than the `min` value', () => {
+            const result = render(
+              <DateInputSegment
+                onChange={onChangeHandler}
+                segment={segment}
+                value={`${minValue}`}
+              />,
+            );
+            const input = result.getByTestId('lg-date_picker_input-segment');
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(maxValue) }),
+            );
+          });
+        });
+      });
     });
   });
 });
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 cbcabe09d0..7ff59df353 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -1,12 +1,19 @@
-import React from 'react';
+import React, { ChangeEventHandler, KeyboardEventHandler } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { keyMap, rollover } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
-import { defaultMax, defaultMin, defaultPlaceholder } from '../../../constants';
+import {
+  charsPerSegment,
+  defaultMax,
+  defaultMin,
+  defaultPlaceholder,
+} from '../../../constants';
+import { getValueFormatter } from '../../../utils';
 import { useDatePickerContext } from '../../DatePickerContext';
 
 import {
@@ -36,6 +43,7 @@ export const DateInputSegment = React.forwardRef<
       max: maxProp,
       onChange,
       onBlur,
+      onKeyDown,
       darkMode,
       ...rest
     }: DateInputSegmentProps,
@@ -49,21 +57,83 @@ export const DateInputSegment = React.forwardRef<
     const { theme } = useDarkMode(darkMode);
     const baseFontSize = useUpdatedBaseFontSize();
     const { size, disabled } = useDatePickerContext();
+    const formatter = getValueFormatter(segment);
+    const pattern = `[0-9]{${charsPerSegment.year}}`;
+
+    /** Prevent non-numeric values from triggering a change event */
+    const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
+      const { target } = e;
+      const numericValue = Number(target.value);
+
+      if (!isNaN(numericValue)) {
+        const stringValue = numericValue.toString();
+        onChange?.({
+          segment,
+          value: stringValue,
+        });
+      }
+    };
+
+    /** Synthetically fire ChangeEvents when the up/down arrow keys are pressed */
+    const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {
+      const { key } = e as React.KeyboardEvent<HTMLInputElement> & {
+        target: HTMLInputElement;
+      };
+
+      if (key === keyMap.ArrowUp || key === keyMap.ArrowDown) {
+        e.preventDefault();
+        const valueDiff = key === keyMap.ArrowUp ? 1 : -1;
+
+        const initialValue = value
+          ? Number(value)
+          : key === keyMap.ArrowUp
+          ? max
+          : min;
+
+        const newValue = rollover(initialValue + valueDiff, min, max);
+        const valueString = formatter(newValue);
+
+        onChange?.({
+          segment,
+          value: valueString,
+          meta: { key },
+        });
+      }
+
+      if (key === keyMap.Backspace) {
+        const numChars = value?.length;
+
+        if (numChars === 1) {
+          onChange?.({
+            segment,
+            value: '',
+            meta: { key },
+          });
+        }
+      }
+
+      onKeyDown?.(e);
+    };
 
+    // Note: Using a text input with pattern attribute due to Firefox
+    // stripping leading zeros on number inputs - Thanks @matt-d-rat
+    // Number inputs also don't support the `selectionStart`/`End` API
     return (
       <input
         {...rest}
         aria-label={segment}
         id={segment}
         ref={inputRef}
-        type="number"
+        type="text"
+        pattern={pattern}
         role="spinbutton"
         value={value}
         min={min}
         max={max}
         placeholder={defaultPlaceholder[segment]}
-        onChange={onChange}
+        onChange={handleChange}
         onBlur={onBlur}
+        onKeyDown={handleKeyDown}
         disabled={disabled}
         data-testid="lg-date_picker_input-segment"
         data-segment={segment}
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts
index 6c9ecdd40c..21292443e2 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts
@@ -1,10 +1,23 @@
-import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
+import { DarkModeProps, HTMLElementProps, keyMap } from '@leafygreen-ui/lib';
 
 import { DateSegment, DateSegmentValue } from '../../../hooks';
 
+export interface DateInputSegmentChangeEvent {
+  segment: DateSegment;
+  value: DateSegmentValue;
+  meta?: {
+    key?: (typeof keyMap)[keyof typeof keyMap];
+    [key: string]: any;
+  };
+}
+
+export type DateInputSegmentChangeEventHandler = (
+  dateSegmentChangeEvent: DateInputSegmentChangeEvent,
+) => void;
+
 export interface DateInputSegmentProps
   extends DarkModeProps,
-    HTMLElementProps<'input'> {
+    Omit<HTMLElementProps<'input'>, 'onChange'> {
   /** Which date segment this input represents. Determines the aria-label, and min/max values where relevant */
   segment: DateSegment;
 
@@ -16,4 +29,6 @@ export interface DateInputSegmentProps
 
   /** Optional maximum value. Defaults to 31 for day, 12 for month, 2038 for year */
   max?: number;
+
+  onChange?: DateInputSegmentChangeEventHandler;
 }
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/index.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/index.ts
index ca415a1130..61a5b9de3e 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/index.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/index.ts
@@ -1,2 +1,5 @@
 export { DateInputSegment } from './DateInputSegment';
-export { type DateInputSegmentProps } from './DateInputSegment.types';
+export {
+  type DateInputSegmentChangeEventHandler,
+  type DateInputSegmentProps,
+} from './DateInputSegment.types';
diff --git a/packages/date-picker/src/shared/hooks/useDateSegments/DateSegments.types.ts b/packages/date-picker/src/shared/hooks/useDateSegments/DateSegments.types.ts
index 45d71daab5..52d24c592a 100644
--- a/packages/date-picker/src/shared/hooks/useDateSegments/DateSegments.types.ts
+++ b/packages/date-picker/src/shared/hooks/useDateSegments/DateSegments.types.ts
@@ -29,7 +29,11 @@ export interface UseDateSegmentsOptions {
   onUpdate?: OnUpdateCallback;
 }
 
+export type SetSegmentCallback = (
+  segment: DateSegment,
+  value: DateSegmentValue,
+) => void;
 export interface UseDateSegmentsReturnValue {
   segments: DateSegmentsState;
-  setSegment: (segment: DateSegment, value: DateSegmentValue) => void;
+  setSegment: SetSegmentCallback;
 }
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index f093db1404..c01a5f8d9d 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -4,7 +4,7 @@ export { doesSomeSegmentExist } from './doesSomeSegmentExist';
 export { getDaysInUTCMonth } from './getDaysInUTCMonth';
 export { getFirstEmptySegment } from './getFirstEmptySegment';
 export { getFirstOfMonth } from './getFirstOfMonth';
-export { getFormatParts } from './getFormatParts';
+export { getFormatParts, getFormatter } from './getFormatParts';
 export { getFullMonthLabel } from './getFullMonthLabel';
 export { getISODate } from './getISODate';
 export { getLastOfMonth } from './getLastOfMonth';
diff --git a/packages/date-picker/src/shared/utils/isSameUTCDay/isSameUTCDay.spec.ts b/packages/date-picker/src/shared/utils/isSameUTCDay/isSameUTCDay.spec.ts
index 97c2e33de9..b3df30bb3a 100644
--- a/packages/date-picker/src/shared/utils/isSameUTCDay/isSameUTCDay.spec.ts
+++ b/packages/date-picker/src/shared/utils/isSameUTCDay/isSameUTCDay.spec.ts
@@ -1,57 +1,55 @@
 import tzMock from 'timezone-mock';
 
-import { Month } from '../../constants';
-
 import { isSameUTCDay } from '.';
 
 describe('packages/date-picker/utils/isSameUTCDay', () => {
-  beforeAll(() => {
-    tzMock.register('US/Eastern');
-  });
-
   beforeEach(() => {
-    jest
-      .useFakeTimers()
-      .setSystemTime(new Date(Date.UTC(2023, Month.September, 1, 0, 0, 0)));
+    tzMock.register('US/Eastern');
   });
 
-  test('true: when both dates are defined in UTC', () => {
-    const utc1 = new Date(Date.UTC(2023, 8, 1, 0, 0, 0));
-    const utc2 = new Date(Date.UTC(2023, 8, 1, 21, 0, 0));
-    expect(isSameUTCDay(utc1, utc2)).toBe(true);
-  });
+  describe(' when both dates are defined in UTC', () => {
+    test('returns true', () => {
+      const utc1 = new Date(Date.UTC(2023, 8, 1, 0, 0, 0));
+      const utc2 = new Date(Date.UTC(2023, 8, 1, 21, 0, 0));
+      expect(isSameUTCDay(utc1, utc2)).toBe(true);
+    });
 
-  test('false: when both dates are defined in UTC', () => {
-    const utc1 = new Date(Date.UTC(2023, 8, 1, 0, 0, 0));
-    const utc2 = new Date(Date.UTC(2023, 8, 2, 0, 0, 0));
-    expect(isSameUTCDay(utc1, utc2)).toBe(false);
+    test('returns false', () => {
+      const utc1 = new Date(Date.UTC(2023, 8, 1, 0, 0, 0));
+      const utc2 = new Date(Date.UTC(2023, 8, 2, 0, 0, 0));
+      expect(isSameUTCDay(utc1, utc2)).toBe(false);
+    });
   });
 
-  test('true: when one date is defined locally', () => {
-    const utc = new Date(Date.UTC(2023, 8, 10, 0, 0, 0));
-    const local = new Date('2023-09-09T21:00:00'); //2023-09-10T01:00:00Z
-    expect(isSameUTCDay(utc, local)).toBe(true);
-  });
+  describe('when one date is defined locally', () => {
+    test('returns true ', () => {
+      const utc = new Date(Date.UTC(2023, 8, 10, 0, 0, 0));
+      const local = new Date('2023-09-09T21:00:00'); //2023-09-10T01:00:00Z
+      expect(isSameUTCDay(utc, local)).toBe(true);
+    });
 
-  test('false: when one date is defined locally', () => {
-    const utc = new Date(Date.UTC(2023, 8, 10));
-    const local = new Date('2023-09-09T12:00'); //2023-09-09T16:00:00Z
-    expect(isSameUTCDay(utc, local)).toBe(false);
+    test('returns false', () => {
+      const utc = new Date(Date.UTC(2023, 8, 10));
+      const local = new Date('2023-09-09T12:00'); //2023-09-09T16:00:00Z
+      expect(isSameUTCDay(utc, local)).toBe(false);
+    });
   });
 
-  test('true: when both dates are defined locally', () => {
-    const local1 = new Date('2023-09-09T00:00');
-    const local2 = new Date('2023-09-09T19:00');
-    expect(isSameUTCDay(local1, local2)).toBe(true);
-  });
+  describe('when both dates are defined locally', () => {
+    test('returns true', () => {
+      const local1 = new Date('2023-09-09T00:00');
+      const local2 = new Date('2023-09-09T19:00');
+      expect(isSameUTCDay(local1, local2)).toBe(true);
+    });
 
-  test('false: when both dates are defined locally', () => {
-    const local1 = new Date('2023-09-09T00:00');
-    const local2 = new Date('2023-09-09T20:00');
-    expect(isSameUTCDay(local1, local2)).toBe(false);
+    test('returns false', () => {
+      const local1 = new Date('2023-09-09T00:00');
+      const local2 = new Date('2023-09-09T20:00');
+      expect(isSameUTCDay(local1, local2)).toBe(false);
+    });
   });
 
-  test('false: when one or both dates is null', () => {
+  test('returns false when one or both dates is null', () => {
     expect(isSameUTCDay(new Date(), null)).toBe(false);
     expect(isSameUTCDay(null, new Date())).toBe(false);
     expect(isSameUTCDay(null, null)).toBe(false);
diff --git a/packages/date-picker/src/shared/utils/isSameUTCMonth/isSameUTCMonth.spec.ts b/packages/date-picker/src/shared/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
index 663942d314..f90c1cac57 100644
--- a/packages/date-picker/src/shared/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
+++ b/packages/date-picker/src/shared/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
@@ -5,50 +5,50 @@ import { Month } from '../../constants';
 import { isSameUTCMonth } from '.';
 
 describe('packages/date-picker/utils/isSameUTCMonth', () => {
-  beforeAll(() => {
-    tzMock.register('US/Eastern');
-  });
-
   beforeEach(() => {
-    jest
-      .useFakeTimers()
-      .setSystemTime(new Date(Date.UTC(2023, Month.September, 1, 0, 0, 0)));
+    tzMock.register('US/Eastern');
   });
 
-  test('true, when both defined in UTC', () => {
-    const utc1 = new Date(Date.UTC(2023, Month.September, 1));
-    const utc2 = new Date(Date.UTC(2023, Month.September, 10));
-    expect(isSameUTCMonth(utc1, utc2)).toBe(true);
-  });
+  describe('when both dates are defined in UTC', () => {
+    test('true', () => {
+      const utc1 = new Date(Date.UTC(2023, Month.September, 1));
+      const utc2 = new Date(Date.UTC(2023, Month.September, 10));
+      expect(isSameUTCMonth(utc1, utc2)).toBe(true);
+    });
 
-  test('false: when both dates are defined in UTC', () => {
-    const utc1 = new Date(Date.UTC(2023, Month.September, 1));
-    const utc2 = new Date(Date.UTC(2023, Month.August, 31));
-    expect(isSameUTCMonth(utc1, utc2)).toBe(false);
+    test('false', () => {
+      const utc1 = new Date(Date.UTC(2023, Month.September, 1));
+      const utc2 = new Date(Date.UTC(2023, Month.August, 31));
+      expect(isSameUTCMonth(utc1, utc2)).toBe(false);
+    });
   });
 
-  test('true: when one date is defined locally', () => {
-    const utc = new Date(Date.UTC(2023, Month.September, 10));
-    const local = new Date('2023-08-31T21:00:00');
-    expect(isSameUTCMonth(utc, local)).toBe(true);
-  });
+  describe('when one date is defined locally', () => {
+    test('true', () => {
+      const utc = new Date(Date.UTC(2023, Month.September, 10));
+      const local = new Date('2023-08-31T21:00:00');
+      expect(isSameUTCMonth(utc, local)).toBe(true);
+    });
 
-  test('false: when one date is defined locally', () => {
-    const utc = new Date(Date.UTC(2023, Month.September, 10));
-    const local = new Date('2023-08-31T12:00');
-    expect(isSameUTCMonth(utc, local)).toBe(false);
+    test('false', () => {
+      const utc = new Date(Date.UTC(2023, Month.September, 10));
+      const local = new Date('2023-08-31T12:00');
+      expect(isSameUTCMonth(utc, local)).toBe(false);
+    });
   });
 
-  test('true: when both dates are defined locally', () => {
-    const local1 = new Date('2023-09-01T00:00');
-    const local2 = new Date('2023-09-30T19:00');
-    expect(isSameUTCMonth(local1, local2)).toBe(true);
-  });
+  describe(' when both dates are defined locally', () => {
+    test('true', () => {
+      const local1 = new Date('2023-09-01T00:00');
+      const local2 = new Date('2023-09-30T19:00');
+      expect(isSameUTCMonth(local1, local2)).toBe(true);
+    });
 
-  test('false: when both dates are defined locally', () => {
-    const local1 = new Date('2023-09-01T00:00');
-    const local2 = new Date('2023-09-30T20:00');
-    expect(isSameUTCMonth(local1, local2)).toBe(false);
+    test('false', () => {
+      const local1 = new Date('2023-09-01T00:00');
+      const local2 = new Date('2023-09-30T20:00');
+      expect(isSameUTCMonth(local1, local2)).toBe(false);
+    });
   });
 
   test('false: when one or both dates is null', () => {
diff --git a/packages/date-picker/src/shared/utils/setUTCMonth/setUTCMonth.spec.ts b/packages/date-picker/src/shared/utils/setUTCMonth/setUTCMonth.spec.ts
index 2b511d7b28..1d9b5349a8 100644
--- a/packages/date-picker/src/shared/utils/setUTCMonth/setUTCMonth.spec.ts
+++ b/packages/date-picker/src/shared/utils/setUTCMonth/setUTCMonth.spec.ts
@@ -1,4 +1,3 @@
-import { setMonth } from 'date-fns';
 import tzMock from 'timezone-mock';
 
 import { Month } from '../../constants';
@@ -33,15 +32,9 @@ describe('packages/date-picker/utils/setUTCMonth', () => {
 
   test('does not care about time-zone', () => {
     tzMock.register('US/Pacific');
-    jest
-      .useFakeTimers()
-      .setSystemTime(new Date(Date.UTC(2023, Month.September, 1, 0, 0, 0)));
+
     const d = new Date(Date.UTC(2023, Month.September, 1, 0, 0, 0));
     const d_utc = setUTCMonth(d, Month.August);
     expect(d_utc.getUTCMonth()).toEqual(Month.August);
-
-    // For comparison:
-    const d_tz = setMonth(d, Month.August);
-    expect(d_tz.getUTCMonth()).toEqual(Month.September);
   });
 });
diff --git a/packages/lib/src/createSyntheticEvent/createSyntheticEvent.ts b/packages/lib/src/createSyntheticEvent/createSyntheticEvent.ts
index 33fb895af3..bcc08426ee 100644
--- a/packages/lib/src/createSyntheticEvent/createSyntheticEvent.ts
+++ b/packages/lib/src/createSyntheticEvent/createSyntheticEvent.ts
@@ -1,12 +1,18 @@
+import React from 'react';
+
 /**
  * Creates a React SyntheticEvent based on the provided native event and target.
  *
  * Based on https://stackoverflow.com/a/68979462/2200383
  */
-export const createSyntheticEvent = <T extends Element, E extends Event>(
-  event: E,
-  target: T,
-): React.SyntheticEvent<T, E> => {
+export const createSyntheticEvent = <
+  ReactEventType extends React.SyntheticEvent<TargetType, NativeEventType>,
+  TargetType extends Element | EventTarget = Element,
+  NativeEventType extends Event = Event,
+>(
+  event: NativeEventType,
+  target: TargetType,
+): ReactEventType => {
   // Assign the target property to the event
   Object.defineProperty(event, 'target', { writable: false, value: target });
 
@@ -23,21 +29,24 @@ export const createSyntheticEvent = <T extends Element, E extends Event>(
     event.stopPropagation();
   };
 
-  return {
+  const syntheticEvent = {
     nativeEvent: event,
-    currentTarget: event.currentTarget as EventTarget & T,
-    target: event.target as EventTarget & T,
+    ...event,
+    currentTarget: event.currentTarget as EventTarget & TargetType,
+    target: event.target as EventTarget & TargetType,
     bubbles: event.bubbles,
     cancelable: event.cancelable,
     defaultPrevented: event.defaultPrevented,
     eventPhase: event.eventPhase,
     isTrusted: event.isTrusted,
+    timeStamp: event.timeStamp,
+    type: event.type,
     preventDefault,
     isDefaultPrevented: () => isDefaultPrevented,
     stopPropagation,
     isPropagationStopped: () => isPropagationStopped,
     persist: () => {},
-    timeStamp: event.timeStamp,
-    type: event.type,
   };
+
+  return syntheticEvent as unknown as ReactEventType;
 };
diff --git a/packages/lib/src/helpers/index.ts b/packages/lib/src/helpers/index.ts
index c17f200774..a594dd5931 100644
--- a/packages/lib/src/helpers/index.ts
+++ b/packages/lib/src/helpers/index.ts
@@ -1,3 +1,4 @@
 export { pickAndOmit } from './pickAndOmit';
 export { consoleOnce } from './consoleOnce';
 export { allEqual } from './allEqual';
+export { rollover } from './rollover';
diff --git a/packages/lib/src/helpers/rollover/index.ts b/packages/lib/src/helpers/rollover/index.ts
new file mode 100644
index 0000000000..3d8a4e1efc
--- /dev/null
+++ b/packages/lib/src/helpers/rollover/index.ts
@@ -0,0 +1,25 @@
+/**
+ * Returns value if it is between lower & upper bounds (inclusive).
+ * Returns the difference between value & relevant bound if outside the bounds
+ *
+ * e.g.:
+ * `rollover(6, 1, 5) // 1`
+ * `rollover(0, 1, 5) // 5`
+ */
+export const rollover = (
+  value: number,
+  lowerBound: number,
+  upperBound: number,
+): number => {
+  const range = upperBound - lowerBound;
+
+  if (value > upperBound) {
+    const diff = value - upperBound - 1;
+    return lowerBound + (diff % range);
+  } else if (value < lowerBound) {
+    const diff = lowerBound - value - 1;
+    return upperBound - (diff % range);
+  }
+
+  return value;
+};
diff --git a/packages/lib/src/helpers/rollover/rollover.spec.ts b/packages/lib/src/helpers/rollover/rollover.spec.ts
new file mode 100644
index 0000000000..2376c0da80
--- /dev/null
+++ b/packages/lib/src/helpers/rollover/rollover.spec.ts
@@ -0,0 +1,23 @@
+import { rollover } from '.';
+
+describe('packages/lib/helpers/rollover', () => {
+  test('returns value when within bounds', () => {
+    expect(rollover(5, 1, 12)).toEqual(5);
+  });
+
+  test('returns a rolled over value', () => {
+    expect(rollover(13, 1, 12)).toEqual(1);
+  });
+
+  test('returns a rolled under value', () => {
+    expect(rollover(0, 1, 12)).toEqual(12);
+  });
+
+  test('returns a rolled over value when value is > 2x the range', () => {
+    expect(rollover(25, 1, 12)).toEqual(2);
+  });
+
+  test('returns a rolled under value when value is > 2x the range', () => {
+    expect(rollover(-12, 1, 12)).toEqual(11);
+  });
+});

From 978def30c2407324eb06be613e9e50ccaffa8c4b Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Fri, 17 Nov 2023 15:34:57 -0500
Subject: [PATCH 274/351] Updates logic for setting focus when menu opens
 (#2086)

---
 .../src/DatePicker/DatePicker.spec.tsx        | 27 ++++++++++++-------
 .../DatePickerComponent.tsx                   | 26 +++++++++++++++---
 .../DatePickerInput/DatePickerInput.tsx       |  8 +++---
 .../SingleDateContext/SingleDateContext.tsx   | 19 ++++++++-----
 .../SingleDateContext.types.ts                | 11 +++++---
 5 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 2cb77751fe..9faaabcf18 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -219,31 +219,38 @@ describe('packages/date-picker', () => {
           expect(menuContainerEl).toBeInTheDocument();
         });
 
-        test('focuses a specific segment when clicked', () => {
-          const { monthInput } = renderDatePicker();
+        test('focuses a specific segment when clicked', async () => {
+          const { monthInput, waitForMenuToOpen } = renderDatePicker();
           userEvent.click(monthInput);
+          await waitForMenuToOpen();
           expect(monthInput).toHaveFocus();
         });
 
-        test('focuses the first segment when all are empty', () => {
-          const { inputContainer, yearInput } = renderDatePicker();
+        test('focuses the first segment when all are empty', async () => {
+          const { inputContainer, yearInput, waitForMenuToOpen } =
+            renderDatePicker();
           userEvent.click(inputContainer);
+          await waitForMenuToOpen();
           expect(yearInput).toHaveFocus();
         });
 
-        test('focuses the first empty segment when some are empty', () => {
-          const { inputContainer, yearInput, monthInput } = renderDatePicker();
+        test('focuses the first empty segment when some are empty', async () => {
+          const { inputContainer, yearInput, monthInput, waitForMenuToOpen } =
+            renderDatePicker();
           yearInput.value = '2023';
           yearInput.blur();
           userEvent.click(inputContainer);
+          await waitForMenuToOpen();
           expect(monthInput).toHaveFocus();
         });
 
-        test('focuses the last segment when all are filled', () => {
-          const { inputContainer, dayInput } = renderDatePicker({
-            value: new Date(),
-          });
+        test('focuses the last segment when all are filled', async () => {
+          const { inputContainer, dayInput, waitForMenuToOpen } =
+            renderDatePicker({
+              value: new Date(),
+            });
           userEvent.click(inputContainer);
+          await waitForMenuToOpen();
           expect(dayInput).toHaveFocus();
         });
       });
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index af2b1742ce..df5f7789d6 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -22,8 +22,14 @@ export const DatePickerComponent = forwardRef<
   DatePickerComponentProps
 >(({ ...rest }: DatePickerComponentProps, fwdRef) => {
   const { isOpen, menuId, disabled, isSelectOpen } = useDatePickerContext();
-  const { value, closeMenu, handleValidation, getHighlightedCell } =
-    useSingleDateContext();
+  const {
+    refs,
+    value,
+    closeMenu,
+    menuTriggerEvent,
+    handleValidation,
+    getHighlightedCell,
+  } = useSingleDateContext();
 
   const formFieldRef = useForwardedRef(fwdRef, null);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -40,13 +46,25 @@ export const DatePickerComponent = forwardRef<
 
   /** Fired when the CSS transition to open the menu is fired */
   const handleMenuTransitionEntered: TransitionEventHandler = e => {
-    if (isOpen && e.target === menuRef.current) {
+    // Whether this event is firing in response to the menu transition
+    const isTransitionedElementMenu = e.target === menuRef.current;
+
+    // Whether the latest openMenu event was triggered by the calendar button
+    const isTriggeredByButton =
+      menuTriggerEvent &&
+      refs.calendarButtonRef.current?.contains(
+        menuTriggerEvent.target as HTMLElement,
+      );
+
+    // Only move focus to input when opened via button click
+    if (isOpen && isTransitionedElementMenu && isTriggeredByButton) {
       // When the menu opens, set focus to the `highlight` cell
       const highlightedCell = getHighlightedCell();
       highlightedCell?.focus();
     }
   };
 
+  /** Fired when the Transform element for the menu has exited */
   const handleMenuTransitionExited: ExitHandler<HTMLDivElement> = () => {
     if (!isOpen) {
       closeMenu();
@@ -61,7 +79,7 @@ export const DatePickerComponent = forwardRef<
       case keyMap.Escape:
         // Ensure that the menu will not close when a select menu is open and the ESC key is pressed.
         if (!isSelectOpen) {
-          closeMenu();
+          closeMenu(e);
           handleValidation?.(value);
         }
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index a2694a1a15..d3dc9c1e46 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -58,10 +58,10 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
      * Called when the input, or any of its children, is clicked.
      * Opens the menu and focuses the appropriate segment
      */
-    const handleInputClick: MouseEventHandler<HTMLElement> = ({ target }) => {
+    const handleInputClick: MouseEventHandler<HTMLElement> = e => {
       if (!disabled) {
-        openMenu();
-
+        openMenu(e);
+        const { target } = e;
         const segmentToFocus = getSegmentToFocus({
           target,
           formatParts,
@@ -79,7 +79,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     const handleIconButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
       // Prevent the parent click handler from being called since clicks on the parent always opens the dropdown
       e.stopPropagation();
-      toggleMenu();
+      toggleMenu(e);
     };
 
     /** Called on any keydown within the input element */
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
index 096f358fc7..04d28fc22a 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
@@ -1,6 +1,7 @@
 import React, {
   createContext,
   PropsWithChildren,
+  SyntheticEvent,
   useCallback,
   useContext,
   useEffect,
@@ -82,18 +83,23 @@ export const SingleDateProvider = ({
     _setHighlight(newHighlight);
   }, []);
 
+  /** Track the event that last triggered the menu to open/close */
+  const [menuTriggerEvent, setMenuTriggerEvent] = useState<SyntheticEvent>();
+
   /**
    * Opens the menu and handles side effects
    */
-  const openMenu = () => {
+  const openMenu = (triggerEvent?: SyntheticEvent) => {
+    setMenuTriggerEvent(triggerEvent);
     setOpen(true);
   };
 
   /** Closes the menu and handles side effects */
-  const closeMenu = () => {
+  const closeMenu = (triggerEvent?: SyntheticEvent) => {
+    setMenuTriggerEvent(triggerEvent);
     setOpen(false);
 
-    // Perform side effects once the state has settle
+    // Perform side effects once the state has settled
     requestAnimationFrame(() => {
       // Return focus to the calendar button
       refs.calendarButtonRef.current?.focus();
@@ -105,11 +111,11 @@ export const SingleDateProvider = ({
   };
 
   /** Toggles the menu and handles appropriate side effects */
-  const toggleMenu = () => {
+  const toggleMenu = (triggerEvent?: SyntheticEvent) => {
     if (isOpen) {
-      closeMenu();
+      closeMenu(triggerEvent);
     } else {
-      openMenu();
+      openMenu(triggerEvent);
     }
   };
 
@@ -159,6 +165,7 @@ export const SingleDateProvider = ({
         closeMenu,
         openMenu,
         toggleMenu,
+        menuTriggerEvent,
         month,
         setMonth,
         highlight,
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
index b4925b6a72..2291096044 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
@@ -1,3 +1,5 @@
+import { SyntheticEvent } from 'react';
+
 import { DynamicRefGetter } from '@leafygreen-ui/hooks';
 
 import { DateType, SegmentRefs } from '../../shared';
@@ -59,17 +61,20 @@ export interface SingleDateContextProps {
   /**
    * Opens the menu and handles side effects
    */
-  openMenu: () => void;
+  openMenu: (triggerEvent?: SyntheticEvent) => void;
 
   /**
    * Closes the menu and handles side effects
    */
-  closeMenu: () => void;
+  closeMenu: (triggerEvent?: SyntheticEvent) => void;
 
   /**
    *  Toggles the menu and handles appropriate side effects
    */
-  toggleMenu: () => void;
+  toggleMenu: (triggerEvent?: SyntheticEvent) => void;
+
+  /** The event that triggered the last menu toggle  */
+  menuTriggerEvent?: SyntheticEvent;
 
   /**
    * Returns the calendar cell element that has, or should have focus

From 92401d961f8788f64b4a4e128cc1e4f40787a36e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 17 Nov 2023 12:59:57 -0800
Subject: [PATCH 275/351] Update DatePicker.spec.tsx

---
 .../src/DatePicker/DatePicker.spec.tsx        | 62 +++++++++++++------
 1 file changed, 42 insertions(+), 20 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 9faaabcf18..30737a3c46 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1236,34 +1236,56 @@ describe('packages/date-picker', () => {
             });
           });
 
-          // TODO: This is a bug in the browsers but passes here 🤔
-          // https://jira.mongodb.org/browse/LG-3766
-          // In the browser the year input does not update
-          test.skip('after selecting a year and clicking a cell a second time', async () => {
-            const { openMenu, findAllByRole, dayInput, monthInput, yearInput } =
+          test('after selecting a year and clicking a cell a second time', async () => {
+            const { openMenu, dayInput, monthInput, yearInput } =
               renderDatePicker({
                 initialValue: new Date(), // dec 26 2023
                 min: newUTC(1996, Month.January, 1),
                 max: newUTC(2026, Month.January, 1),
               });
-            const { yearSelect, queryCellByDate } = await openMenu();
-            userEvent.click(yearSelect!);
-            const options = await findAllByRole('option');
-            const firstYear = options[0]; // 1996
 
-            userEvent.click(firstYear);
-
-            const dec196Cell = queryCellByDate(newUTC(1996, Month.December, 1));
-            userEvent.click(dec196Cell!);
-
-            const secondYear = options[1]; // 1997
-            userEvent.click(secondYear);
-
-            const dec197Cell = queryCellByDate(newUTC(1997, Month.December, 1));
-            userEvent.click(dec197Cell!);
+            // Open the menu the first time
+            {
+              const { yearSelect, queryCellByDate, menuContainerEl } =
+                await openMenu();
+              expect;
+              userEvent.click(yearSelect!);
+              const options = await within(menuContainerEl!).findAllByRole(
+                'option',
+              );
+              const yearOption1996 = options[0]; // 1996
+
+              userEvent.click(yearOption1996);
+
+              const dec1_96Cell = queryCellByDate(
+                newUTC(1996, Month.December, 1),
+              );
+              userEvent.click(dec1_96Cell!);
+              await waitForElementToBeRemoved(menuContainerEl);
+            }
+
+            // Re-open the menu
+            {
+              const { yearSelect, menuContainerEl, queryCellByDate } =
+                await openMenu();
+              userEvent.click(yearSelect!);
+              expect(menuContainerEl).toBeInTheDocument();
+              const options = await within(menuContainerEl!).findAllByRole(
+                'option',
+              );
+
+              const yearOption1997 = options[1]; // 1997
+              userEvent.click(yearOption1997);
+
+              const dec2_97Cell = queryCellByDate(
+                newUTC(1997, Month.December, 2),
+              );
+              expect(dec2_97Cell).toBeInTheDocument();
+              userEvent.click(dec2_97Cell!);
+            }
 
             await waitFor(() => {
-              expect(dayInput.value).toEqual('01');
+              expect(dayInput.value).toEqual('02');
               expect(monthInput.value).toEqual('12');
               expect(yearInput.value).toEqual('1997');
             });

From 717d243853d3d8a638e6763b0293a553db23a1ee Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Fri, 17 Nov 2023 17:40:44 -0500
Subject: [PATCH 276/351] add modal test

---
 packages/date-picker/package.json             |  1 +
 .../src/DatePicker/DatePicker.stories.tsx     | 21 +++++++++++++++++
 .../components/MenuWrapper/MenuWrapper.tsx    |  8 +++++--
 packages/date-picker/tsconfig.json            | 23 ++++++++++++-------
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 455cd096b8..87317a2e1d 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -37,6 +37,7 @@
   },
   "devDependencies": {
     "@leafygreen-ui/button": "^21.0.7",
+    "@leafygreen-ui/modal":"^16.0.3",
     "mockdate": "^3.0.5",
     "storybook-mock-date-decorator": "^1.0.1",
     "timezone-mock": "^1.3.6",
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index d98d53b72a..242ef9975f 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -4,6 +4,7 @@ import { StoryFn } from '@storybook/react';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
+import Modal from '@leafygreen-ui/modal';
 import { Size } from '@leafygreen-ui/tokens';
 
 import {
@@ -83,4 +84,24 @@ export const Uncontrolled: StoryFn<typeof DatePicker> = props => {
   return <DatePicker {...props} />;
 };
 
+export const InModal: StoryFn<typeof DatePicker> = props => {
+  const [value, setValue] = useState<Date | null | undefined>();
+  const [isModalOpen, setisModalOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setisModalOpen(curr => !curr)}>Open Modal</button>
+      <Modal open={isModalOpen} setOpen={setisModalOpen}>
+        Inside the modal
+        <DatePicker {...props} value={value} onDateChange={setValue} />
+      </Modal>
+    </>
+  );
+};
+InModal.parameters = {
+  chromatic: {
+    disableSnapshots: true,
+  },
+};
+
 export const Generated = () => {};
diff --git a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
index 0ef8514e2f..e7859e4cee 100644
--- a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
+++ b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
@@ -1,7 +1,10 @@
 import React, { forwardRef } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import {
+  PopoverProvider,
+  useDarkMode,
+} from '@leafygreen-ui/leafygreen-provider';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 import Popover, { PopoverProps } from '@leafygreen-ui/popover';
 
@@ -22,7 +25,8 @@ export const MenuWrapper = forwardRef<HTMLDivElement, MenuWrapperProps>(
         className={cx(menuStyles[theme], className)}
         {...props}
       >
-        {children}
+        {/* Prevents the opening and closing state of a select dropdown from propagating up to other PopoverProviders in parent components. E.g. Modal */}
+        <PopoverProvider>{children}</PopoverProvider>
       </Popover>
     );
   },
diff --git a/packages/date-picker/tsconfig.json b/packages/date-picker/tsconfig.json
index fc67898510..6d3c68274c 100644
--- a/packages/date-picker/tsconfig.json
+++ b/packages/date-picker/tsconfig.json
@@ -1,19 +1,26 @@
 {
   "extends": "@lg-tools/build/config/package.tsconfig.json",
-   "compilerOptions": {
+  "compilerOptions": {
     "declarationDir": "dist",
     "outDir": "dist",
     "rootDir": "src",
     "baseUrl": ".",
     "paths": {
-      "@leafygreen-ui/icon/dist/*": ["../icon/src/generated/*"],
-      "@leafygreen-ui/*": ["../*/src"]
+      "@leafygreen-ui/icon/dist/*": [
+        "../icon/src/generated/*"
+      ],
+      "@leafygreen-ui/*": [
+        "../*/src"
+      ]
     }
   },
   "include": [
     "src/**/*"
   ],
-  "exclude": ["**/*.spec.*", "**/*.story.*"],
+  "exclude": [
+    "**/*.spec.*",
+    "**/*.story.*"
+  ],
   "references": [
     {
       "path": "../button"
@@ -21,9 +28,6 @@
     {
       "path": "../emotion"
     },
-    {
-      "path": "../emotion"
-    },
     {
       "path": "../hooks"
     },
@@ -42,6 +46,9 @@
     {
       "path": "../lib"
     },
+    {
+      "path": "../modal"
+    },
     {
       "path": "../palette"
     },
@@ -58,4 +65,4 @@
       "path": "../typography"
     }
   ]
-}
+}
\ No newline at end of file

From 1a131b4c50103b1695d79d9bf0f6ccdc1a71b397 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Mon, 20 Nov 2023 12:02:54 -0500
Subject: [PATCH 277/351] add maxLength (#2088)

---
 .../DatePickerInput/DatePickerInput.spec.tsx   |  9 ++++-----
 .../DateInputSegment/DateInputSegment.tsx      |  4 +++-
 .../getSegmentMaxLength.spec.ts                | 17 +++++++++++++++++
 .../shared/utils/getSegmentMaxLength/index.ts  | 18 ++++++++++++++++++
 packages/date-picker/src/shared/utils/index.ts |  1 +
 5 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 packages/date-picker/src/shared/utils/getSegmentMaxLength/getSegmentMaxLength.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/getSegmentMaxLength/index.ts

diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 922e490435..3dd964f9f3 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -207,19 +207,18 @@ describe('packages/date-picker/date-picker-input', () => {
       });
     });
 
-    // TODO: failing https://jira.mongodb.org/browse/LG-3770
-    describe.skip('typing', () => {
+    describe('typing', () => {
       describe('allows only 2 characters', () => {
         test('in day input', () => {
           const { dayInput } = renderDatePickerInput();
           userEvent.type(dayInput, '22222222');
-          expect(dayInput.value.length).toBe('2');
+          expect(dayInput.value.length).toBe(2);
         });
 
         test('in month input', () => {
           const { monthInput } = renderDatePickerInput();
           userEvent.type(monthInput, '22222222');
-          expect(monthInput.value.length).toBe('2');
+          expect(monthInput.value.length).toBe(2);
         });
       });
 
@@ -227,7 +226,7 @@ describe('packages/date-picker/date-picker-input', () => {
         test('in year input', () => {
           const { yearInput } = renderDatePickerInput();
           userEvent.type(yearInput, '22222222');
-          expect(yearInput.value.length).toBe('4');
+          expect(yearInput.value.length).toBe(4);
         });
       });
     });
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 7ff59df353..4b492c1e41 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -13,7 +13,7 @@ import {
   defaultMin,
   defaultPlaceholder,
 } from '../../../constants';
-import { getValueFormatter } from '../../../utils';
+import { getSegmentMaxLength, getValueFormatter } from '../../../utils';
 import { useDatePickerContext } from '../../DatePickerContext';
 
 import {
@@ -59,6 +59,7 @@ export const DateInputSegment = React.forwardRef<
     const { size, disabled } = useDatePickerContext();
     const formatter = getValueFormatter(segment);
     const pattern = `[0-9]{${charsPerSegment.year}}`;
+    const maxLength = getSegmentMaxLength(segment);
 
     /** Prevent non-numeric values from triggering a change event */
     const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
@@ -144,6 +145,7 @@ export const DateInputSegment = React.forwardRef<
           segmentSizeStyles[size ?? Size.Default],
           segmentWidthStyles[segment],
         )}
+        maxLength={maxLength}
       />
     );
   },
diff --git a/packages/date-picker/src/shared/utils/getSegmentMaxLength/getSegmentMaxLength.spec.ts b/packages/date-picker/src/shared/utils/getSegmentMaxLength/getSegmentMaxLength.spec.ts
new file mode 100644
index 0000000000..576612d52f
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getSegmentMaxLength/getSegmentMaxLength.spec.ts
@@ -0,0 +1,17 @@
+import { charsPerSegment } from '../../constants';
+
+import { getSegmentMaxLength } from '.';
+
+describe('packages/date-picker/utils/getSegmentMaxLength', () => {
+  test('day', () => {
+    expect(getSegmentMaxLength('day')).toBe(charsPerSegment.day);
+  });
+
+  test('month', () => {
+    expect(getSegmentMaxLength('month')).toBe(charsPerSegment.month);
+  });
+
+  test('year', () => {
+    expect(getSegmentMaxLength('year')).toBe(charsPerSegment.year);
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/getSegmentMaxLength/index.ts b/packages/date-picker/src/shared/utils/getSegmentMaxLength/index.ts
new file mode 100644
index 0000000000..ee938fd42b
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getSegmentMaxLength/index.ts
@@ -0,0 +1,18 @@
+import { charsPerSegment } from '../../constants';
+import { DateSegment } from '../../hooks';
+
+/**
+ * Returns the maxLength of a segment
+ */
+export const getSegmentMaxLength = (segment: DateSegment): number => {
+  switch (segment) {
+    case DateSegment.Day:
+      return charsPerSegment.day;
+
+    case DateSegment.Month:
+      return charsPerSegment.month;
+
+    case DateSegment.Year:
+      return charsPerSegment.year;
+  }
+};
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index c01a5f8d9d..f6e163d52b 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -11,6 +11,7 @@ export { getLastOfMonth } from './getLastOfMonth';
 export { getMonthIndex } from './getMonthIndex';
 export { getMonthName } from './getMonthName';
 export { getRemainingParts } from './getRemainingParts';
+export { getSegmentMaxLength } from './getSegmentMaxLength';
 export {
   getFormattedSegmentsFromDate,
   getSegmentsFromDate,

From 5f7e1d351e80fb95870aa708833ab7a5d8549ae7 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Mon, 20 Nov 2023 17:29:06 -0500
Subject: [PATCH 278/351] Date Picker [LG-3773]: Daylight time cell focus
 (#2087)

* updates DLST tests

* updates tests

* creates addDaysUTC

* replace datefns with addDaysUTC
---
 .../src/DatePicker/DatePicker.spec.tsx        |   1 -
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 125 +++++++++++++-----
 .../DatePickerMenu/DatePickerMenu.tsx         |  16 +--
 .../utils/addDaysUTC/addDaysUTC.spec.ts       |  66 +++++++++
 .../src/shared/utils/addDaysUTC/index.ts      |   7 +
 .../date-picker/src/shared/utils/index.ts     |   1 +
 6 files changed, 176 insertions(+), 40 deletions(-)
 create mode 100644 packages/date-picker/src/shared/utils/addDaysUTC/addDaysUTC.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/addDaysUTC/index.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 30737a3c46..51d73b20b5 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1248,7 +1248,6 @@ describe('packages/date-picker', () => {
             {
               const { yearSelect, queryCellByDate, menuContainerEl } =
                 await openMenu();
-              expect;
               userEvent.click(yearSelect!);
               const options = await within(menuContainerEl!).findAllByRole(
                 'option',
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 0786adeb0a..105f9b63b9 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -20,6 +20,11 @@ import { DatePickerMenu, DatePickerMenuProps } from '.';
 const testToday = new Date(Date.UTC(2023, Month.September, 10));
 const testValue = new Date(Date.UTC(2023, Month.September, 14));
 
+const standardTimeEndDate = new Date(Date.UTC(2023, Month.March, 11));
+const daylightTimeStartDate = new Date(Date.UTC(2023, Month.March, 12));
+const daylightTimeEndDate = new Date(Date.UTC(2023, Month.November, 5));
+const standardTimeStartDate = new Date(Date.UTC(2023, Month.November, 6));
+
 const renderDatePickerMenu = (
   props?: Partial<DatePickerMenuProps> | null,
   singleContext?: Partial<SingleDateProviderProps> | null,
@@ -186,21 +191,6 @@ describe('packages/date-picker/date-picker-menu', () => {
         await waitFor(() => expect(prevDay).toHaveFocus());
       });
 
-      // FIXME: unsure if daylight savings is the reason this is failing
-      // Sun, Mar 12, 2023 – Sun, Nov 5, 2023
-      // https://jira.mongodb.org/browse/LG-3773
-      test.skip('left arrow moves focus to the previous day when switching between daylight savings and standard time', async () => {
-        const testDLSValue = new Date(Date.UTC(2023, Month.November, 6));
-        const { getCellWithValue } = renderDatePickerMenu(null, {
-          value: testDLSValue,
-        });
-        userEvent.tab();
-        userEvent.keyboard('{arrowleft}');
-        const prevDay = getCellWithValue(setUTCDate(testDLSValue, 5));
-
-        await waitFor(() => expect(prevDay).toHaveFocus());
-      });
-
       test('right arrow moves focus to the next day', async () => {
         const { getCellWithValue } = renderDatePickerMenu(null, {
           value: testValue,
@@ -223,21 +213,6 @@ describe('packages/date-picker/date-picker-menu', () => {
         await waitFor(() => expect(prevWeek).toHaveFocus());
       });
 
-      // FIXME: unsure if daylight savings is the reason this is failing
-      // Sun, Mar 12, 2023 – Sun, Nov 5, 2023
-      // https://jira.mongodb.org/browse/LG-3773
-      test.skip('up arrow moves focus to the previous week when switching between daylight savings and standard time', async () => {
-        const testDLSValue = new Date(Date.UTC(2023, Month.November, 9));
-        const { getCellWithValue } = renderDatePickerMenu(null, {
-          value: testDLSValue,
-        });
-        userEvent.tab();
-        userEvent.keyboard('{arrowup}');
-
-        const prevWeek = getCellWithValue(setUTCDate(testDLSValue, 2));
-        await waitFor(() => expect(prevWeek).toHaveFocus());
-      });
-
       test('down arrow moves focus to the next week', async () => {
         const { getCellWithValue } = renderDatePickerMenu(null, {
           value: testValue,
@@ -249,6 +224,96 @@ describe('packages/date-picker/date-picker-menu', () => {
         await waitFor(() => expect(nextWeek).toHaveFocus());
       });
 
+      describe('when switching between daylight savings and standard time', () => {
+        // DT: Sun, Mar 12, 2023 – Sun, Nov 5, 2023
+
+        describe('daylight time start (Mar 12 2023)', () => {
+          const weekBeforeDTStart = new Date(Date.UTC(2023, Month.March, 5));
+
+          test('left arrow moves focus to prev day', async () => {
+            jest.useFakeTimers().setSystemTime(daylightTimeStartDate); // Mar 12
+            const { getCellWithValue } = renderDatePickerMenu();
+            userEvent.tab();
+            userEvent.keyboard('{arrowleft}');
+            const prevDayCell = getCellWithValue(standardTimeEndDate); // Mar 11
+
+            await waitFor(() => expect(prevDayCell).toHaveFocus());
+          });
+
+          test('right arrow moves focus to next day', async () => {
+            jest.useFakeTimers().setSystemTime(standardTimeEndDate); // Mar 11
+            const { getCellWithValue } = renderDatePickerMenu();
+            userEvent.tab();
+            userEvent.keyboard('{arrowright}');
+            const nextDayCell = getCellWithValue(daylightTimeStartDate); // Mar 12
+            await waitFor(() => expect(nextDayCell).toHaveFocus());
+          });
+
+          test('up arrow moves focus to the previous week', async () => {
+            jest.useFakeTimers().setSystemTime(daylightTimeStartDate); // Mar 12
+            const { getCellWithValue } = renderDatePickerMenu();
+            userEvent.tab();
+            userEvent.keyboard('{arrowup}');
+            const prevWeekCell = getCellWithValue(weekBeforeDTStart); // Mar 5
+            await waitFor(() => expect(prevWeekCell).toHaveFocus());
+          });
+
+          test('down arrow moves focus to the next week', async () => {
+            jest.useFakeTimers().setSystemTime(weekBeforeDTStart); // Mar 5
+            const { getCellWithValue } = renderDatePickerMenu();
+            userEvent.tab();
+            userEvent.keyboard('{arrowdown}');
+            const nextWeekCell = getCellWithValue(daylightTimeStartDate); // Mar 12
+            await waitFor(() => expect(nextWeekCell).toHaveFocus());
+          });
+        });
+
+        describe('daylight time end (Nov 5 2023)', () => {
+          const weekAfterDTEnd = new Date(Date.UTC(2023, Month.November, 12));
+
+          test('left arrow moves focus to prev day', async () => {
+            jest.useFakeTimers().setSystemTime(standardTimeStartDate); // Nov 6
+            const { getCellWithValue } = renderDatePickerMenu();
+            userEvent.tab();
+            userEvent.keyboard('{arrowleft}');
+            const prevDayCell = getCellWithValue(daylightTimeEndDate); // Nov 5
+
+            await waitFor(() => expect(prevDayCell).toHaveFocus());
+          });
+
+          test('right arrow moves focus to next day', async () => {
+            jest.useFakeTimers().setSystemTime(daylightTimeEndDate); // Nov 5
+
+            const { getCellWithValue } = renderDatePickerMenu();
+            userEvent.tab();
+            userEvent.keyboard('{arrowright}');
+
+            const nextDayCell = getCellWithValue(standardTimeStartDate); // Nov 6
+            await waitFor(() => expect(nextDayCell).toHaveFocus());
+          });
+
+          test('up arrow moves focus to the previous week', async () => {
+            jest.useFakeTimers().setSystemTime(weekAfterDTEnd); // Nov 12
+            const { getCellWithValue } = renderDatePickerMenu();
+            userEvent.tab();
+            userEvent.keyboard('{arrowup}');
+
+            const prevWeekCell = getCellWithValue(daylightTimeEndDate); // Nov 5
+            await waitFor(() => expect(prevWeekCell).toHaveFocus());
+          });
+
+          test('down arrow moves focus to the next week', async () => {
+            jest.useFakeTimers().setSystemTime(daylightTimeEndDate); // Nov 5
+            const { getCellWithValue } = renderDatePickerMenu();
+            userEvent.tab();
+            userEvent.keyboard('{arrowdown}');
+
+            const nextWeekCell = getCellWithValue(weekAfterDTEnd); // Nov 12
+            await waitFor(() => expect(nextWeekCell).toHaveFocus());
+          });
+        });
+      });
+
       describe('when next day would be out of range', () => {
         const singleCtx = {
           value: testToday,
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 375cb4cd0f..378deb8bbc 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -5,7 +5,6 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { addDays, subDays } from 'date-fns';
 
 import { useForwardedRef, usePrevious } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
@@ -19,6 +18,7 @@ import {
 import { useDatePickerContext } from '../../shared/components/DatePickerContext';
 import { MenuWrapper } from '../../shared/components/MenuWrapper';
 import {
+  addDaysUTC,
   getFirstOfMonth,
   getFullMonthLabel,
   getISODate,
@@ -173,29 +173,27 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {
       const { key } = e;
 
-      const highlightStart = highlight || value || today;
-      let nextHighlight = highlightStart;
+      const currentHighlight = highlight || value || today;
+      let nextHighlight = currentHighlight;
 
       switch (key) {
         case keyMap.ArrowLeft: {
-          nextHighlight = subDays(highlightStart, 1);
+          nextHighlight = addDaysUTC(currentHighlight, -1);
           break;
         }
 
         case keyMap.ArrowRight: {
-          nextHighlight = addDays(highlightStart, 1);
+          nextHighlight = addDaysUTC(currentHighlight, 1);
           break;
         }
 
         case keyMap.ArrowUp: {
-          // TODO: https://jira.mongodb.org/browse/LG-3773
-          // console.log(subDays(new Date(Date.UTC(2023, 10, 10)), 1));
-          nextHighlight = subDays(highlightStart, 7);
+          nextHighlight = addDaysUTC(currentHighlight, -7);
           break;
         }
 
         case keyMap.ArrowDown: {
-          nextHighlight = addDays(highlightStart, 7);
+          nextHighlight = addDaysUTC(currentHighlight, 7);
           break;
         }
 
diff --git a/packages/date-picker/src/shared/utils/addDaysUTC/addDaysUTC.spec.ts b/packages/date-picker/src/shared/utils/addDaysUTC/addDaysUTC.spec.ts
new file mode 100644
index 0000000000..9a7eb47fe3
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/addDaysUTC/addDaysUTC.spec.ts
@@ -0,0 +1,66 @@
+import { Month } from '../../constants';
+import { newUTC } from '../newUTC';
+
+import { addDaysUTC } from '.';
+
+describe('packages/date-picker/utils/addDaysUTC', () => {
+  const june30 = newUTC(2023, Month.June, 30);
+  const july1 = newUTC(2023, Month.July, 1);
+  const july2 = newUTC(2023, Month.July, 2);
+  const july8 = newUTC(2023, Month.July, 8);
+  const dec30 = newUTC(2023, Month.December, 30);
+  const jan1_24 = newUTC(2024, Month.January, 1);
+  const feb28_24 = newUTC(2024, Month.February, 28);
+  const feb29_24 = newUTC(2024, Month.February, 29);
+
+  const standardTimeEnd = newUTC(2023, Month.March, 11);
+  const daylightTimeStart = newUTC(2023, Month.March, 12);
+  const weekIntoDT = newUTC(2023, Month.March, 18);
+  const daylightTimeEnd = newUTC(2023, Month.November, 5);
+  const standardTimeStart = newUTC(2023, Month.November, 6);
+  const weekIntoST = newUTC(2023, Month.November, 12);
+
+  test('adds a single day', () => {
+    expect(addDaysUTC(july1, 1)).toEqual(july2);
+  });
+  test('adds multiple days', () => {
+    expect(addDaysUTC(july1, 7)).toEqual(july8);
+  });
+  test('adds days across months', () => {
+    expect(addDaysUTC(june30, 2)).toEqual(july2);
+  });
+  test('adds days across years', () => {
+    expect(addDaysUTC(dec30, 2)).toEqual(jan1_24);
+  });
+  test('adds days during leap year', () => {
+    expect(addDaysUTC(feb28_24, 1)).toEqual(feb29_24);
+  });
+  test('adds days across daylight time start', () => {
+    expect(addDaysUTC(standardTimeEnd, 7)).toEqual(weekIntoDT);
+  });
+  test('adds days across daylight time end', () => {
+    expect(addDaysUTC(daylightTimeEnd, 7)).toEqual(weekIntoST);
+  });
+
+  test('subtracts a single day', () => {
+    expect(addDaysUTC(july2, -1)).toEqual(july1);
+  });
+  test('subtracts multiple days', () => {
+    expect(addDaysUTC(july8, -7)).toEqual(july1);
+  });
+  test('subtracts days across months', () => {
+    expect(addDaysUTC(july2, -2)).toEqual(june30);
+  });
+  test('subtracts days across years', () => {
+    expect(addDaysUTC(jan1_24, -2)).toEqual(dec30);
+  });
+  test('subtracts days during leap year', () => {
+    expect(addDaysUTC(feb29_24, -1)).toEqual(feb28_24);
+  });
+  test('subtracts days across daylight time start', () => {
+    expect(addDaysUTC(daylightTimeStart, -1)).toEqual(standardTimeEnd);
+  });
+  test('subtracts days across daylight time end', () => {
+    expect(addDaysUTC(standardTimeStart, -1)).toEqual(daylightTimeEnd);
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/addDaysUTC/index.ts b/packages/date-picker/src/shared/utils/addDaysUTC/index.ts
new file mode 100644
index 0000000000..48fbfac046
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/addDaysUTC/index.ts
@@ -0,0 +1,7 @@
+export const addDaysUTC = (date: Date, daysToAdd: number): Date => {
+  const newDate = new Date(date);
+  const day = newDate.getUTCDate();
+  const newDay = day + daysToAdd;
+  newDate.setUTCDate(newDay);
+  return newDate;
+};
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index f6e163d52b..b50746c7ae 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -1,3 +1,4 @@
+export { addDaysUTC } from './addDaysUTC';
 export { addMonthsUTC } from './addMonthsUTC';
 export { cloneReverse } from './cloneReverse';
 export { doesSomeSegmentExist } from './doesSomeSegmentExist';

From f29b8545db04ccc1fecbad2d46b4b805e96228d9 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Tue, 21 Nov 2023 12:32:44 -0500
Subject: [PATCH 279/351] Date Picker [LG-3767] Modal bugs (#2091)

* keep focus inside the menu

* another way

* add back space

* add tests

* update tests
---
 .../src/DatePicker/DatePicker.stories.tsx     |  3 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 39 +++++++++++++++++++
 .../DatePickerMenu/DatePickerMenu.tsx         |  9 +++--
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index 242ef9975f..9cf00a1546 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import { StoryFn } from '@storybook/react';
 
+import Button from '@leafygreen-ui/button';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 import Modal from '@leafygreen-ui/modal';
@@ -90,7 +91,7 @@ export const InModal: StoryFn<typeof DatePicker> = props => {
 
   return (
     <>
-      <button onClick={() => setisModalOpen(curr => !curr)}>Open Modal</button>
+      <Button onClick={() => setisModalOpen(curr => !curr)}>Open Modal</Button>
       <Modal open={isModalOpen} setOpen={setisModalOpen}>
         Inside the modal
         <DatePicker {...props} value={value} onDateChange={setValue} />
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 105f9b63b9..77a133ecc0 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -84,6 +84,9 @@ const renderDatePickerMenu = (
   const getCellWithValue = (date: Date) =>
     calendarGrid.querySelector(`[data-iso="${getISODate(date)}"]`);
 
+  const leftChevron = result?.queryByLabelText('Previous month');
+  const rightChevron = result?.queryByLabelText('Next month');
+
   return {
     ...result,
     rerenderDatePickerMenu,
@@ -91,6 +94,8 @@ const renderDatePickerMenu = (
     calendarCells,
     todayCell,
     getCellWithValue,
+    leftChevron,
+    rightChevron,
   };
 };
 
@@ -448,6 +453,40 @@ describe('packages/date-picker/date-picker-menu', () => {
           await waitFor(() => expect(highlightedCell).toHaveFocus());
         });
       });
+
+      describe('focus-trap', () => {
+        test('when a cell is focused, pressing tab moves the focus to the left chevron', () => {
+          const { todayCell, leftChevron } = renderDatePickerMenu();
+          userEvent.tab();
+          expect(todayCell).toHaveFocus();
+          userEvent.tab();
+          expect(leftChevron).toHaveFocus();
+        });
+
+        test('when a cell is focused, pressing tab + shift moves the focus to the right chevron', () => {
+          const { todayCell, rightChevron } = renderDatePickerMenu();
+          userEvent.tab();
+          expect(todayCell).toHaveFocus();
+          userEvent.tab({ shift: true });
+          expect(rightChevron).toHaveFocus();
+        });
+
+        test('when the left chevron is focused, pressing tab + shift moves the focus to todays cell', () => {
+          const { todayCell, leftChevron } = renderDatePickerMenu();
+          leftChevron?.focus();
+          expect(leftChevron).toHaveFocus();
+          userEvent.tab({ shift: true });
+          expect(todayCell).toHaveFocus();
+        });
+
+        test('when the right chevron is focused, pressing tab moves the focus to todays cell', () => {
+          const { todayCell, rightChevron } = renderDatePickerMenu();
+          rightChevron?.focus();
+          expect(rightChevron).toHaveFocus();
+          userEvent.tab();
+          expect(todayCell).toHaveFocus();
+        });
+      });
     });
   });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 378deb8bbc..c66b7173c9 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -156,9 +156,12 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
         const isFocusOnRightChevron = currentFocus === rightChevronElement;
         const isFocusOnCell = currentFocus === highlightedCellElement;
 
-        if (!e.shiftKey && isFocusOnRightChevron) {
-          (highlightedCellElement as HTMLElement)?.focus();
-          e.preventDefault();
+        if (!e.shiftKey) {
+          // If the Date Picker is nested inside a component that uses focus-trap-react, e.g. Modal, this prevents the focus-trap-react package from hijacking the focus when tabbing
+          if (!ref.current?.contains(currentFocus) || isFocusOnRightChevron) {
+            (highlightedCellElement as HTMLElement)?.focus();
+            e.preventDefault();
+          }
         } else if (e.shiftKey && isFocusOnCell) {
           (rightChevronElement as HTMLElement)?.focus();
           e.preventDefault();

From 771952688a76d15e1ec13757084e2dbf6d4e1cdd Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Wed, 22 Nov 2023 20:57:29 -0500
Subject: [PATCH 280/351] Date Picker: React 17 [LG-3788] (#2094)

* add R17 deps to tools 0.0.17

* Install Testing tools in r17 job

* wrap tests in act

* rename package version

* Update react17.yml

* Update package.json

* revert tools package.json

* read from r17-packages in test job

* update path

* add comment

* Update react17.yml

* Update react17.yml

* add multiline true

* test

* Convert to script

* resolutions

* rm console

* resolutions

* directly consume jest binary

* update jest version check

* update to useFakeTimers('modern')

* Update getPackageJson.ts

* adds exitWithErrorMessage

* update jest version selection for r17

* Update getJestBinary.ts

* revert jest.useFakeTimers

* bumps r17 jest to 29

* extend timeout

* --silent

* revert package json

* re-add regenerator-runtime

* adds changesets

* Update DatePicker.spec.tsx

* extend default timeout to 10s in R17

* timeout 1min
---
 .changeset/big-carpets-sleep.md               |  5 +++
 .changeset/great-avocados-battle.md           |  5 +++
 .changeset/wild-feet-press.md                 |  5 +++
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 16 +++----
 tools/meta/src/exitWithErrorMessage.ts        |  7 +++
 tools/meta/src/getPackageJson.ts              | 10 ++---
 tools/meta/src/index.ts                       |  1 +
 tools/test/config/react17/jest.config.js      |  3 +-
 .../config/react17/mocks/svgTransformer.js    |  3 --
 tools/test/config/react17/r17-packages.json   | 17 ++-----
 tools/test/src/index.ts                       | 45 ++++---------------
 tools/test/src/test.spec.ts                   | 10 ++---
 tools/test/src/utils/getConfigFile.ts         | 44 ++++++++++++++++++
 tools/test/src/utils/getCurrentJestVersion.ts | 19 ++++++++
 tools/test/src/utils/getJestBinary.ts         | 31 +++++++++++++
 15 files changed, 148 insertions(+), 73 deletions(-)
 create mode 100644 .changeset/big-carpets-sleep.md
 create mode 100644 .changeset/great-avocados-battle.md
 create mode 100644 .changeset/wild-feet-press.md
 create mode 100644 tools/meta/src/exitWithErrorMessage.ts
 delete mode 100644 tools/test/config/react17/mocks/svgTransformer.js
 create mode 100644 tools/test/src/utils/getConfigFile.ts
 create mode 100644 tools/test/src/utils/getCurrentJestVersion.ts
 create mode 100644 tools/test/src/utils/getJestBinary.ts

diff --git a/.changeset/big-carpets-sleep.md b/.changeset/big-carpets-sleep.md
new file mode 100644
index 0000000000..9069a8ddfd
--- /dev/null
+++ b/.changeset/big-carpets-sleep.md
@@ -0,0 +1,5 @@
+---
+'@lg-tools/meta': minor
+---
+
+Adds `exitWithErrorMessage` util
diff --git a/.changeset/great-avocados-battle.md b/.changeset/great-avocados-battle.md
new file mode 100644
index 0000000000..599e8bd92a
--- /dev/null
+++ b/.changeset/great-avocados-battle.md
@@ -0,0 +1,5 @@
+---
+'@lg-tools/test': minor
+---
+
+Updates to jest 29 for React 17 testing
diff --git a/.changeset/wild-feet-press.md b/.changeset/wild-feet-press.md
new file mode 100644
index 0000000000..d1c258cdbc
--- /dev/null
+++ b/.changeset/wild-feet-press.md
@@ -0,0 +1,5 @@
+---
+'@lg-tools/meta': patch
+---
+
+Fixes recursion in `findPackageJson`
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 77a133ecc0..57d0237f63 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -236,7 +236,7 @@ describe('packages/date-picker/date-picker-menu', () => {
           const weekBeforeDTStart = new Date(Date.UTC(2023, Month.March, 5));
 
           test('left arrow moves focus to prev day', async () => {
-            jest.useFakeTimers().setSystemTime(daylightTimeStartDate); // Mar 12
+            jest.setSystemTime(daylightTimeStartDate); // Mar 12
             const { getCellWithValue } = renderDatePickerMenu();
             userEvent.tab();
             userEvent.keyboard('{arrowleft}');
@@ -246,7 +246,7 @@ describe('packages/date-picker/date-picker-menu', () => {
           });
 
           test('right arrow moves focus to next day', async () => {
-            jest.useFakeTimers().setSystemTime(standardTimeEndDate); // Mar 11
+            jest.setSystemTime(standardTimeEndDate); // Mar 11
             const { getCellWithValue } = renderDatePickerMenu();
             userEvent.tab();
             userEvent.keyboard('{arrowright}');
@@ -255,7 +255,7 @@ describe('packages/date-picker/date-picker-menu', () => {
           });
 
           test('up arrow moves focus to the previous week', async () => {
-            jest.useFakeTimers().setSystemTime(daylightTimeStartDate); // Mar 12
+            jest.setSystemTime(daylightTimeStartDate); // Mar 12
             const { getCellWithValue } = renderDatePickerMenu();
             userEvent.tab();
             userEvent.keyboard('{arrowup}');
@@ -264,7 +264,7 @@ describe('packages/date-picker/date-picker-menu', () => {
           });
 
           test('down arrow moves focus to the next week', async () => {
-            jest.useFakeTimers().setSystemTime(weekBeforeDTStart); // Mar 5
+            jest.setSystemTime(weekBeforeDTStart); // Mar 5
             const { getCellWithValue } = renderDatePickerMenu();
             userEvent.tab();
             userEvent.keyboard('{arrowdown}');
@@ -277,7 +277,7 @@ describe('packages/date-picker/date-picker-menu', () => {
           const weekAfterDTEnd = new Date(Date.UTC(2023, Month.November, 12));
 
           test('left arrow moves focus to prev day', async () => {
-            jest.useFakeTimers().setSystemTime(standardTimeStartDate); // Nov 6
+            jest.setSystemTime(standardTimeStartDate); // Nov 6
             const { getCellWithValue } = renderDatePickerMenu();
             userEvent.tab();
             userEvent.keyboard('{arrowleft}');
@@ -287,7 +287,7 @@ describe('packages/date-picker/date-picker-menu', () => {
           });
 
           test('right arrow moves focus to next day', async () => {
-            jest.useFakeTimers().setSystemTime(daylightTimeEndDate); // Nov 5
+            jest.setSystemTime(daylightTimeEndDate); // Nov 5
 
             const { getCellWithValue } = renderDatePickerMenu();
             userEvent.tab();
@@ -298,7 +298,7 @@ describe('packages/date-picker/date-picker-menu', () => {
           });
 
           test('up arrow moves focus to the previous week', async () => {
-            jest.useFakeTimers().setSystemTime(weekAfterDTEnd); // Nov 12
+            jest.setSystemTime(weekAfterDTEnd); // Nov 12
             const { getCellWithValue } = renderDatePickerMenu();
             userEvent.tab();
             userEvent.keyboard('{arrowup}');
@@ -308,7 +308,7 @@ describe('packages/date-picker/date-picker-menu', () => {
           });
 
           test('down arrow moves focus to the next week', async () => {
-            jest.useFakeTimers().setSystemTime(daylightTimeEndDate); // Nov 5
+            jest.setSystemTime(daylightTimeEndDate); // Nov 5
             const { getCellWithValue } = renderDatePickerMenu();
             userEvent.tab();
             userEvent.keyboard('{arrowdown}');
diff --git a/tools/meta/src/exitWithErrorMessage.ts b/tools/meta/src/exitWithErrorMessage.ts
new file mode 100644
index 0000000000..3109714016
--- /dev/null
+++ b/tools/meta/src/exitWithErrorMessage.ts
@@ -0,0 +1,7 @@
+/* eslint-disable no-console */
+import chalk from 'chalk';
+
+export function exitWithErrorMessage(message: string, code = 1) {
+  console.log(chalk.red.bold(message));
+  process.exit(code);
+}
diff --git a/tools/meta/src/getPackageJson.ts b/tools/meta/src/getPackageJson.ts
index 9177389576..e567446a94 100644
--- a/tools/meta/src/getPackageJson.ts
+++ b/tools/meta/src/getPackageJson.ts
@@ -21,9 +21,7 @@ export function getPackageJson(
   return findPackageJson(dir);
 }
 
-function findPackageJson(dir: string) {
-  const pkgJsonPath = path.resolve(dir, 'package.json');
-
+function findPackageJson(dir: string): Record<string, any> | undefined {
   if (dir === '/') {
     console.log(
       chalk.red(`Could not find a package.json file in any parent directory`),
@@ -32,7 +30,9 @@ function findPackageJson(dir: string) {
     return;
   }
 
-  if (fse.existsSync(dir)) {
+  const pkgJsonPath = path.resolve(dir, 'package.json');
+
+  if (fse.existsSync(pkgJsonPath)) {
     const pkgJsonStr = fse.readFileSync(pkgJsonPath, 'utf-8');
 
     if (isValidJSON(pkgJsonStr)) {
@@ -41,6 +41,6 @@ function findPackageJson(dir: string) {
       console.log(chalk.red(`Invalid JSON found in file ${pkgJsonPath}`));
     }
   } else {
-    findPackageJson(path.resolve(dir, '..'));
+    return findPackageJson(path.resolve(dir, '..'));
   }
 }
diff --git a/tools/meta/src/index.ts b/tools/meta/src/index.ts
index 21edac9e8d..47ebd86ca4 100644
--- a/tools/meta/src/index.ts
+++ b/tools/meta/src/index.ts
@@ -1,3 +1,4 @@
+export { exitWithErrorMessage } from './exitWithErrorMessage';
 export { getAllPackageNames, getAllPackages } from './getAllPackages';
 export { getLGConfig, type LGConfig } from './getLGConfig';
 export { getPackageJson } from './getPackageJson';
diff --git a/tools/test/config/react17/jest.config.js b/tools/test/config/react17/jest.config.js
index 24ca3a5eb4..af4ad01e1d 100644
--- a/tools/test/config/react17/jest.config.js
+++ b/tools/test/config/react17/jest.config.js
@@ -5,6 +5,7 @@
 // note we still need to declare the path relative to `<rootDir>`
 
 module.exports = {
+  testTimeout: 60_000,
   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',
   coveragePathIgnorePatterns: ['/node_modules/', '/dist/', '/index.ts', '.svg'],
@@ -50,7 +51,7 @@ module.exports = {
   transform: {
     '^.+\\.[jt]sx?$': 'babel-jest',
     '.svg':
-      '<rootDir>/node_modules/@lg-tools/test/config/react17/mocks/svgTransformer.js',
+      '<rootDir>/node_modules/@lg-tools/test/config/mocks/svgTransformer.js',
   },
 
   // Ignore transforming node_modules except for:
diff --git a/tools/test/config/react17/mocks/svgTransformer.js b/tools/test/config/react17/mocks/svgTransformer.js
deleted file mode 100644
index 2218140ced..0000000000
--- a/tools/test/config/react17/mocks/svgTransformer.js
+++ /dev/null
@@ -1,3 +0,0 @@
-exports.process = svg => {
-  return `module.exports = ${JSON.stringify({ svg })};`;
-};
diff --git a/tools/test/config/react17/r17-packages.json b/tools/test/config/react17/r17-packages.json
index 6616e99f28..38b53c238c 100644
--- a/tools/test/config/react17/r17-packages.json
+++ b/tools/test/config/react17/r17-packages.json
@@ -4,22 +4,11 @@
   "dependencies": {
     "@types/react": "16.9.56",
     "@types/react-dom": "16.9.18",
-    "@types/react-is": "17",
-    "@jest/fake-timers": "26.6.2",
-    "@testing-library/dom": "7.31.2",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "10.4.9",
-    "@testing-library/react-hooks": "3.7.0",
+    "@types/react-is": "17.0.7",
+    "@testing-library/react": "12.1.3",
+    "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "13.5.0",
-    "@types/jest": "26.0.24",
-    "@types/jest-axe": "3.5.3",
-    "babel-jest": "26.6.3",
-    "jest": "26.6.3",
-    "jest-axe": "4.1.0",
-    "jest-environment-jsdom": "26.6.2",
-    "jest-junit": "10.0.0",
     "react-test-renderer": "17.0.2",
-    "regenerator-runtime": "0.13.10",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
diff --git a/tools/test/src/index.ts b/tools/test/src/index.ts
index 76e4ffea83..5159f77a6e 100755
--- a/tools/test/src/index.ts
+++ b/tools/test/src/index.ts
@@ -1,8 +1,9 @@
 #! /usr/bin/env node
 /* eslint-disable no-console */
 import { spawn } from 'cross-spawn';
-import fse from 'fs-extra';
-import path from 'path';
+
+import { getConfigFile } from './utils/getConfigFile';
+import { getJestBinary } from './utils/getJestBinary';
 
 export interface TestCommandOptions {
   ci: boolean;
@@ -17,7 +18,7 @@ export const test = (
   options: TestCommandOptions,
 ) => {
   const rootDir = process.cwd();
-  const { watch, ci, verbose, config: configParam, react17 } = options;
+  const { watch, ci, verbose } = options;
   const ciFlags = [
     '--no-cache',
     '--ci',
@@ -31,14 +32,8 @@ export const test = (
       : passThrough
     : [];
 
-  const localConfigFile = path.resolve(rootDir, 'jest.config.js');
-  const defaultConfigFile = path.resolve(__dirname, '../config/jest.config.js');
-  const react17ConfigFile = path.resolve(
-    __dirname,
-    '../config/react17/jest.config.js',
-  );
-
-  const configFile = getConfigFile();
+  const configFile = getConfigFile(options);
+  const jestBinary = getJestBinary(options);
 
   const commandArgs = [
     ...[`--config`, configFile],
@@ -46,39 +41,15 @@ export const test = (
     watch ? '--watch' : '',
     verbose ? '--verbose' : '',
     ...(ci ? ciFlags : []),
+    '--silent',
     ...passThroughOptions,
   ].filter(v => v !== '');
 
-  // TODO: if react17 - use jest 26.x binary
-
-  spawn('jest', commandArgs, {
+  spawn(jestBinary, commandArgs, {
     env: {
       ...process.env,
       JEST_ENV: 'client',
     },
     stdio: 'inherit',
   }).on('exit', process.exit);
-
-  // uses closure
-  function getConfigFile() {
-    if (configParam && fse.existsSync(configParam)) {
-      return configParam; // Use the parameter if it exists
-    }
-
-    if (react17) {
-      if (fse.existsSync(react17ConfigFile)) {
-        console.log('Using React 17 test config');
-        verbose && console.log(react17ConfigFile);
-        return react17ConfigFile; // If react17 flag was used, use that config
-      } else {
-        throw new Error('No React17 test config found');
-      }
-    }
-
-    if (fse.existsSync(localConfigFile)) {
-      return localConfigFile; // otherwise look for a config at the root
-    }
-
-    return defaultConfigFile; // fallback to the default config
-  }
 };
diff --git a/tools/test/src/test.spec.ts b/tools/test/src/test.spec.ts
index 06fc88ac39..105d65f562 100644
--- a/tools/test/src/test.spec.ts
+++ b/tools/test/src/test.spec.ts
@@ -34,7 +34,7 @@ describe('tools/test', () => {
       ci: false,
     });
     expect(spawnSpy).toHaveBeenCalledWith(
-      'jest',
+      expect.stringContaining('jest'),
       expect.arrayContaining(baseArgs),
       expect.objectContaining(baseEnv),
     );
@@ -46,7 +46,7 @@ describe('tools/test', () => {
       ci: false,
     });
     expect(spawnSpy).toHaveBeenCalledWith(
-      'jest',
+      expect.stringContaining('jest'),
       expect.arrayContaining([...baseArgs, '--watch']),
       expect.objectContaining(baseEnv),
     );
@@ -58,7 +58,7 @@ describe('tools/test', () => {
       ci: true,
     });
     expect(spawnSpy).toHaveBeenCalledWith(
-      'jest',
+      expect.stringContaining('jest'),
       expect.arrayContaining([
         ...baseArgs,
         '--no-cache',
@@ -77,7 +77,7 @@ describe('tools/test', () => {
       ci: true,
     });
     expect(spawnSpy).toHaveBeenCalledWith(
-      'jest',
+      expect.stringContaining('jest'),
       expect.arrayContaining([...baseArgs, '--testNamePattern=button']),
       expect.objectContaining(baseEnv),
     );
@@ -90,7 +90,7 @@ describe('tools/test', () => {
     });
 
     expect(spawnSpy).toHaveBeenCalledWith(
-      'jest',
+      expect.stringContaining('jest'),
       expect.arrayContaining([
         './packages/button/src/Button/Button.spec.tsx',
         ...baseArgs,
diff --git a/tools/test/src/utils/getConfigFile.ts b/tools/test/src/utils/getConfigFile.ts
new file mode 100644
index 0000000000..24c3323da2
--- /dev/null
+++ b/tools/test/src/utils/getConfigFile.ts
@@ -0,0 +1,44 @@
+/* eslint-disable no-console */
+import { exitWithErrorMessage } from '@lg-tools/meta';
+import fse from 'fs-extra';
+import path from 'path';
+
+import { TestCommandOptions } from '..';
+
+/** Returns the correct Jest config file path */
+export function getConfigFile(options: TestCommandOptions): string {
+  const rootDir = process.cwd();
+  const { verbose, config: configParam, react17 } = options;
+
+  if (configParam && fse.existsSync(configParam)) {
+    return configParam; // Use the parameter if it exists
+  }
+
+  const localConfigFile = path.resolve(rootDir, 'jest.config.js');
+  const defaultConfigFile = path.resolve(
+    rootDir,
+    'tools/test/config/jest.config.js',
+  );
+  const react17ConfigFile = path.resolve(
+    rootDir,
+    'tools/test/config/react17/jest.config.js',
+  );
+
+  if (react17) {
+    if (fse.existsSync(react17ConfigFile)) {
+      console.log('Using React 17 test config');
+      verbose && console.log(react17ConfigFile);
+      return react17ConfigFile; // If react17 flag was used, use that config
+    } else {
+      exitWithErrorMessage(
+        `No React17 test config found. Reading ${react17ConfigFile}`,
+      );
+    }
+  }
+
+  if (fse.existsSync(localConfigFile)) {
+    return localConfigFile; // otherwise look for a config at the root
+  }
+
+  return defaultConfigFile; // fallback to the default config
+}
diff --git a/tools/test/src/utils/getCurrentJestVersion.ts b/tools/test/src/utils/getCurrentJestVersion.ts
new file mode 100644
index 0000000000..8e8f1afc91
--- /dev/null
+++ b/tools/test/src/utils/getCurrentJestVersion.ts
@@ -0,0 +1,19 @@
+import { exitWithErrorMessage } from '@lg-tools/meta';
+import { sync as spawnSync } from 'cross-spawn';
+
+export function getCurrentJestVersion(jestBinary: string): string {
+  const spawnResult = spawnSync(jestBinary, ['--version']);
+
+  if (!spawnResult) {
+    exitWithErrorMessage(`Error running jest binary ${jestBinary}`);
+  }
+
+  const stdout = spawnResult.stdout;
+
+  if (!stdout) {
+    exitWithErrorMessage(`No version returned from jest binary ${jestBinary}`);
+  }
+
+  const version = stdout.toString('utf-8').trim();
+  return version;
+}
diff --git a/tools/test/src/utils/getJestBinary.ts b/tools/test/src/utils/getJestBinary.ts
new file mode 100644
index 0000000000..2907f3927a
--- /dev/null
+++ b/tools/test/src/utils/getJestBinary.ts
@@ -0,0 +1,31 @@
+/* eslint-disable no-console */
+import { exitWithErrorMessage } from '@lg-tools/meta';
+import fse from 'fs-extra';
+import path from 'path';
+
+import { TestCommandOptions } from '..';
+
+import { getCurrentJestVersion } from './getCurrentJestVersion';
+
+/** Returns the path of the correct Jest binary */
+export function getJestBinary(options: TestCommandOptions): string {
+  const { verbose } = options;
+
+  const rootDir = process.cwd();
+
+  const jestBinaryPath = path.resolve(
+    rootDir,
+    './node_modules/jest/bin/jest.js',
+  );
+
+  if (!fse.existsSync(jestBinaryPath)) {
+    exitWithErrorMessage(`Could not find jest binary ${jestBinaryPath}`);
+  }
+
+  const jestVersion = getCurrentJestVersion(jestBinaryPath);
+
+  verbose && console.log(`Using jest@${jestVersion}`);
+  verbose && console.log('Jest binary path:', jestBinaryPath);
+
+  return jestBinaryPath;
+}

From 6599ea438db584a63090f185e253ae74bcff3fbf Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Wed, 22 Nov 2023 20:57:40 -0500
Subject: [PATCH 281/351] Date Picker [LG -3806, LG-3808] Consume
 LeafyGreenProvider (#2096)

* consume LG provider

* add baseFontSize to provider
---
 .../date-picker/src/DatePicker/DatePicker.tsx | 24 +++++++++++++++++--
 .../DateInputSegment/DateInputSegment.tsx     |  3 +--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index ede91dd991..8263745973 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -1,5 +1,11 @@
 import React, { forwardRef } from 'react';
 
+import LeafyGreenProvider, {
+  useDarkMode,
+} from '@leafygreen-ui/leafygreen-provider';
+import { BaseFontSize } from '@leafygreen-ui/tokens';
+import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
+
 import {
   contextPropNames,
   DatePickerProvider,
@@ -21,11 +27,18 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       initialValue: initialProp,
       onDateChange: onChangeProp,
       handleValidation,
+      darkMode: darkModeProp,
+      baseFontSize: basefontSizeProp,
       ...props
     }: DatePickerProps,
     fwdRef,
   ) => {
-    const [contextProps, restProps] = pickAndOmit(props, contextPropNames);
+    const { darkMode } = useDarkMode(darkModeProp);
+    const baseFontSize = useUpdatedBaseFontSize(basefontSizeProp);
+    const [contextProps, restProps] = pickAndOmit(
+      { darkMode, baseFontSize, ...props },
+      contextPropNames,
+    );
 
     const { value, setValue } = useControlledValue(
       valueProp,
@@ -40,7 +53,14 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           setValue={setValue}
           handleValidation={handleValidation}
         >
-          <DatePickerComponent ref={fwdRef} {...restProps} />
+          <LeafyGreenProvider
+            darkMode={darkMode}
+            baseFontSize={
+              baseFontSize === BaseFontSize.Body1 ? 14 : baseFontSize
+            }
+          >
+            <DatePickerComponent ref={fwdRef} {...restProps} />
+          </LeafyGreenProvider>
         </SingleDateProvider>
       </DatePickerProvider>
     );
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 4b492c1e41..e67325c78d 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -44,7 +44,6 @@ export const DateInputSegment = React.forwardRef<
       onChange,
       onBlur,
       onKeyDown,
-      darkMode,
       ...rest
     }: DateInputSegmentProps,
     fwdRef,
@@ -54,7 +53,7 @@ export const DateInputSegment = React.forwardRef<
 
     const inputRef = useForwardedRef(fwdRef, null);
 
-    const { theme } = useDarkMode(darkMode);
+    const { theme } = useDarkMode();
     const baseFontSize = useUpdatedBaseFontSize();
     const { size, disabled } = useDatePickerContext();
     const formatter = getValueFormatter(segment);

From b905ac895d9c06a725a2a059f368520e9ab412ff Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 27 Nov 2023 11:10:09 -0500
Subject: [PATCH 282/351] updates comments

---
 .../date-picker/src/DatePicker/DatePicker.spec.tsx     |  1 +
 .../src/DatePicker/DatePicker.testutils.tsx            |  1 -
 packages/date-picker/src/shared/constants.ts           | 10 ++++++++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 51d73b20b5..684aea5fc6 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -60,6 +60,7 @@ describe('packages/date-picker', () => {
         expect(formField).toBeInTheDocument();
       });
 
+      // TODO: Test a11y linking of label & input
       test('formField contains label & input elements', () => {
         const { getByTestId, getByRole } = render(
           <DatePicker label="Label" data-testid="lg-date-picker" />,
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index 4bb1ea4689..a4007f0d08 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   fireEvent,
-  // prettyDOM,
   queryByRole,
   render,
   RenderResult,
diff --git a/packages/date-picker/src/shared/constants.ts b/packages/date-picker/src/shared/constants.ts
index f8ea5a2ea1..5807304d05 100644
--- a/packages/date-picker/src/shared/constants.ts
+++ b/packages/date-picker/src/shared/constants.ts
@@ -38,10 +38,16 @@ export const MonthsArray = [
   'December',
 ];
 
-/** The default earliest selectable date */
+/**
+ * The default earliest selectable date
+ * (Unix epoch start: https://en.wikipedia.org/wiki/Unix_time)
+ * */
 export const MIN_DATE = new Date(Date.UTC(1970, Month.January, 1));
 
-/** The default latest selectable date */
+/**
+ * The default latest selectable date
+ * (Unix 32-bit rollover date: https://en.wikipedia.org/wiki/Year_2038_problem)
+ */
 export const MAX_DATE = new Date(Date.UTC(2038, Month.January, 19));
 
 export interface MonthObject {

From fc3207200c73dbf653fff747a97e55f736db2e42 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 27 Nov 2023 12:12:13 -0500
Subject: [PATCH 283/351] update comments

---
 .../src/DatePicker/DatePickerMenu/DatePickerMenu.tsx          | 2 --
 .../shared/components/DateInput/DateInputBox/DateInputBox.tsx | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index c66b7173c9..7e1adfee5e 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -62,8 +62,6 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     const calendarRef = useRef<HTMLTableElement>(null);
 
     const prevValue = usePrevious(value);
-    // const prevOpen = usePrevious(isOpen);
-    // const prevHighlight = usePrevious(highlight);
 
     const monthLabel = getFullMonthLabel(month);
 
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index a08b424657..d8b2b112d3 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -74,7 +74,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
         const areAllSegmentsEmpty = !doesSomeSegmentExist(newSegments);
 
         if (utcDate) {
-          // Only update the value iff all parts are set, and create a valid date.
+          // Update the value _iff_ all parts are set, and create a valid date.
           const shouldUpdate = !dateValue || !isSameDay(utcDate, dateValue);
 
           if (shouldUpdate) {
@@ -98,7 +98,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
       onSegmentChangeProp?.(event);
     };
 
-    /** Triggered when  */
+    /** Triggered when a segment is blurred */
     const handleSegmentBlur: FocusEventHandler<HTMLInputElement> = e => {
       const segmentName = e.target.getAttribute('id');
       const newValue = e.target.value;

From 9fe41b2f5ff0dcba24daf8fc7aa97c18635a2d19 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 27 Nov 2023 12:21:36 -0500
Subject: [PATCH 284/351] direct lodash import

---
 .../DatePickerMenuHeader/utils/getMonthOptions/index.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts
index be14f3164b..84e29185c1 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts
@@ -1,4 +1,4 @@
-import { isNull } from 'lodash';
+import isNull from 'lodash/isNull';
 
 import { DateType } from '../../../../../shared/types';
 import { getMonthIndex } from '../../../../../shared/utils';

From 7cf1b32b49d6764add3624dc78a55100ce8deb42 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 27 Nov 2023 12:21:58 -0500
Subject: [PATCH 285/351] use today from context

---
 .../src/DatePicker/DatePickerMenu/DatePickerMenu.tsx          | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 7e1adfee5e..40ce02d404 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -2,7 +2,6 @@ import React, {
   forwardRef,
   KeyboardEventHandler,
   useEffect,
-  useMemo,
   useRef,
 } from 'react';
 
@@ -25,7 +24,6 @@ import {
   getUTCDateString,
   isSameUTCDay,
   isSameUTCMonth,
-  setToUTCMidnight,
 } from '../../shared/utils';
 import { useSingleDateContext } from '../SingleDateContext';
 
@@ -40,10 +38,10 @@ import { DatePickerMenuHeader } from './DatePickerMenuHeader';
 
 export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
   ({ onKeyDown, ...rest }: DatePickerMenuProps, fwdRef) => {
-    const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
     const { isInRange, isOpen, setIsDirty } = useDatePickerContext();
     const {
       refs,
+      today,
       value,
       setValue,
       handleValidation,

From 274501242a6acfb4ca0595af51b54d361729feb8 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Tue, 28 Nov 2023 12:50:55 -0500
Subject: [PATCH 286/351] prevent default on arrow keys (#2097)

---
 packages/date-picker/src/DatePicker/DatePicker.spec.tsx     | 3 +++
 .../DatePicker/DatePickerComponent/DatePickerComponent.tsx  | 6 ++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 684aea5fc6..6bdb5e5464 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1292,6 +1292,9 @@ describe('packages/date-picker', () => {
           });
         });
       });
+
+      // JSDOM does not support layout: https://github.com/testing-library/react-testing-library/issues/671
+      test.todo('page does not scroll when arrow keys are pressed');
     });
   });
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index df5f7789d6..306b4109cd 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -89,6 +89,12 @@ export const DatePickerComponent = forwardRef<
         handleValidation?.(value);
         break;
 
+      case keyMap.ArrowDown:
+      case keyMap.ArrowUp: {
+        e.preventDefault(); // prevent page from scrolling
+        break;
+      }
+
       default:
         break;
     }

From 4fe04983727ef67b4074a6272fb000462b7bb8b6 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Tue, 28 Nov 2023 16:15:04 -0500
Subject: [PATCH 287/351] Date Picker [LG-3809] multiple renders when disabled
 (#2098)

* only run animation when not disabled

* change disabled logic

* update comment

* update comment

* remove disabled

* remove extra line
---
 .../DatePickerComponent/DatePickerComponent.tsx      | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 306b4109cd..48d609b304 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -7,7 +7,11 @@ import React, {
 } from 'react';
 import { ExitHandler } from 'react-transition-group/Transition';
 
-import { useBackdropClick, useForwardedRef } from '@leafygreen-ui/hooks';
+import {
+  useBackdropClick,
+  useForwardedRef,
+  usePrevious,
+} from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../shared/components/DatePickerContext';
@@ -33,16 +37,18 @@ export const DatePickerComponent = forwardRef<
 
   const formFieldRef = useForwardedRef(fwdRef, null);
   const menuRef = useRef<HTMLDivElement>(null);
+  const prevDisabledValue = usePrevious(disabled);
 
   useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
 
   /** This listens to when the disabled prop changes to true and closes the menu */
   useEffect(() => {
-    if (disabled) {
+    // if disabled is true but was previously false. This prevents this effect from rerunning multiple times since other states are updated when the menu closes.
+    if (disabled && !prevDisabledValue) {
       closeMenu();
       handleValidation?.(value);
     }
-  }, [closeMenu, disabled, handleValidation, value]);
+  }, [closeMenu, disabled, handleValidation, value, prevDisabledValue]);
 
   /** Fired when the CSS transition to open the menu is fired */
   const handleMenuTransitionEntered: TransitionEventHandler = e => {

From 62f2960eab6e9a93346d4216c95edb58aed420a6 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Tue, 28 Nov 2023 17:35:17 -0500
Subject: [PATCH 288/351] remove focus from cal icon when disabled (#2100)

---
 .../DatePicker/SingleDateContext/SingleDateContext.tsx    | 8 +++++---
 .../components/DateInput/DateFormField/DateFormField.tsx  | 6 +++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
index 04d28fc22a..cae6bcadda 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
@@ -40,7 +40,7 @@ export const SingleDateProvider = ({
   handleValidation,
 }: PropsWithChildren<SingleDateProviderProps>) => {
   const refs = useDateRangeComponentRefs();
-  const { isOpen, setOpen } = useDatePickerContext();
+  const { isOpen, setOpen, disabled } = useDatePickerContext();
   const prevValue = usePrevious(value);
 
   const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
@@ -101,8 +101,10 @@ export const SingleDateProvider = ({
 
     // Perform side effects once the state has settled
     requestAnimationFrame(() => {
-      // Return focus to the calendar button
-      refs.calendarButtonRef.current?.focus();
+      if (!disabled) {
+        // Return focus to the calendar button
+        refs.calendarButtonRef.current?.focus();
+      }
       // update month to something valid
       setMonth(getFirstOfMonth(value ?? today));
       // update highlight to something valid
diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
index ec6902a65f..661c4244b4 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
@@ -54,7 +54,11 @@ export const DateFormField = React.forwardRef<
           aria-controls={menuId}
           onClick={onInputClick}
           contentEnd={
-            <CalendarButton ref={buttonRef} onClick={onIconButtonClick} />
+            <CalendarButton
+              tabIndex={disabled ? -1 : 0}
+              ref={buttonRef}
+              onClick={onIconButtonClick}
+            />
           }
         >
           {children}

From 0161dc55e946c31d982f448734297a515362e87a Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Wed, 29 Nov 2023 12:16:47 -0500
Subject: [PATCH 289/351] add tests (#2102)

---
 .../src/DatePicker/DatePicker.spec.tsx        | 42 +++++++++++++++++++
 .../DatePickerComponent.tsx                   |  2 +-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 6bdb5e5464..e302eb55b1 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -529,6 +529,48 @@ describe('packages/date-picker', () => {
           userEvent.click(container.parentElement!);
           await waitFor(() => expect(calendarButton).toHaveFocus());
         });
+
+        describe('when select is open', () => {
+          describe('Year select menu', () => {
+            test('keeps the menu open', async () => {
+              const { openMenu, container } = renderDatePicker();
+              const { yearSelect, menuContainerEl } = await openMenu();
+              userEvent.click(yearSelect!);
+              userEvent.click(container.parentElement!);
+              await waitFor(() => {
+                expect(menuContainerEl).toBeInTheDocument();
+              });
+            });
+
+            test('closes the month/year select', async () => {
+              const { openMenu, container } = renderDatePicker();
+              const { yearSelect } = await openMenu();
+              userEvent.click(yearSelect!);
+              userEvent.click(container.parentElement!);
+              await waitForElementToBeRemoved(yearSelect);
+            });
+          });
+
+          describe('Month select menu', () => {
+            test('keeps the menu open', async () => {
+              const { openMenu, container } = renderDatePicker();
+              const { monthSelect, menuContainerEl } = await openMenu();
+              userEvent.click(monthSelect!);
+              userEvent.click(container.parentElement!);
+              await waitFor(() => {
+                expect(menuContainerEl).toBeInTheDocument();
+              });
+            });
+
+            test('closes the month/year select', async () => {
+              const { openMenu, container } = renderDatePicker();
+              const { monthSelect } = await openMenu();
+              userEvent.click(monthSelect!);
+              userEvent.click(container.parentElement!);
+              await waitForElementToBeRemoved(monthSelect);
+            });
+          });
+        });
       });
     });
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 48d609b304..75c30c5134 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -39,7 +39,7 @@ export const DatePickerComponent = forwardRef<
   const menuRef = useRef<HTMLDivElement>(null);
   const prevDisabledValue = usePrevious(disabled);
 
-  useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen);
+  useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen && !isSelectOpen);
 
   /** This listens to when the disabled prop changes to true and closes the menu */
   useEffect(() => {

From 4dfb5d3b862b91cf0cb04eb04cbcad7875d5e912 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Wed, 29 Nov 2023 15:26:19 -0500
Subject: [PATCH 290/351] DatePicker [LG-3805] menu out of range (#2103)

* adds change handler tests when typing a full value

* adds up/down arrow tests on date picker

* update handleInputValueChange and setValue logic

* Adds arrow key tests: if new value out of range

* adds "setting the date to an invalid value" tests

* update utils

* Update valueFormatter.spec.ts

* update auto-focus tests. add out of range tests

* cleanup handleSegmentChange

* rm isInRange check in DateInputBox

* convert handleKeyDown to switch

* adds test cases to segment

* make value & onChange required

* truncateStart

* updates DateSegment component

* Rename DateInputBox prop > onSegmentChange

* Update getSegmentsFromDate.spec.ts

* add check to isExplicitSegmentValue

* No check for range on value change

* update invalid date tests
---
 .changeset/slimy-camels-dance.md              |   5 +
 .../src/DatePicker/DatePicker.spec.tsx        | 510 ++++++++++++++----
 .../src/DatePicker/DatePicker.stories.tsx     |   4 +-
 .../src/DatePicker/DatePicker.testutils.tsx   |   8 +-
 .../DatePickerInput/DatePickerInput.tsx       |  51 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    |  28 +
 .../DateInputBox/DateInputBox.spec.tsx        |  14 +-
 .../DateInput/DateInputBox/DateInputBox.tsx   |  25 +-
 .../DateInputBox/DateInputBox.types.ts        |   2 +-
 .../DateInputSegment.spec.tsx                 | 119 +++-
 .../DateInputSegment.stories.tsx              |  23 +-
 .../DateInputSegment/DateInputSegment.tsx     |  80 +--
 .../DateInputSegment.types.ts                 |   4 +-
 .../DatePickerContext.utils.ts                |   4 +-
 packages/date-picker/src/shared/constants.ts  |   4 +
 .../useDateSegments/DateSegments.types.ts     |   5 +-
 .../getSegmentsFromDate.spec.ts               |   8 +-
 .../shared/utils/getSegmentsFromDate/index.ts |   6 +-
 .../getValueFormatter/valueFormatter.spec.ts  |   2 +-
 .../utils/isExplicitSegmentValue/index.ts     |   5 +-
 .../isExplicitSegmentValue.spec.ts            |   3 +-
 .../utils/isValidValueForSegment/index.ts     |   9 +-
 .../isValidValueForSegment.spec.ts            |  10 +-
 .../shared/utils/newDateFromSegments/index.ts |   3 +-
 .../newDateFromSegments.spec.ts               |  20 +
 packages/lib/src/helpers/index.ts             |   1 +
 .../lib/src/helpers/truncateStart/index.ts    |  18 +
 .../truncateStart/truncateStart.spec.ts       |  11 +
 28 files changed, 757 insertions(+), 225 deletions(-)
 create mode 100644 .changeset/slimy-camels-dance.md
 create mode 100644 packages/lib/src/helpers/truncateStart/index.ts
 create mode 100644 packages/lib/src/helpers/truncateStart/truncateStart.spec.ts

diff --git a/.changeset/slimy-camels-dance.md b/.changeset/slimy-camels-dance.md
new file mode 100644
index 0000000000..e31f8c5988
--- /dev/null
+++ b/.changeset/slimy-camels-dance.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': minor
+---
+
+Creates `truncateStart` utility function
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index e302eb55b1..daa3de4bdb 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -12,8 +12,8 @@ import { addDays, subDays } from 'date-fns';
 
 import { transitionDuration } from '@leafygreen-ui/tokens';
 
-import { Month } from '../shared/constants';
-import { newUTC } from '../shared/utils';
+import { defaultMax, defaultMin, Month } from '../shared/constants';
+import { getValueFormatter, newUTC } from '../shared/utils';
 import {
   eventContainingTargetValue,
   tabNTimes,
@@ -23,6 +23,7 @@ import {
   expectedTabStopLabels,
   findTabStopElementMap,
   renderDatePicker,
+  RenderMenuResult,
 } from './DatePicker.testutils';
 import { DatePicker } from '.';
 
@@ -597,7 +598,7 @@ describe('packages/date-picker', () => {
           expect(handleValidation).toHaveBeenCalled();
         });
 
-        test('todayCelldoes not call validation handler when changing segment focus', () => {
+        test('todayCell does not call validation handler when changing segment focus', () => {
           const handleValidation = jest.fn();
           renderDatePicker({ handleValidation });
           tabNTimes(2);
@@ -827,7 +828,7 @@ describe('packages/date-picker', () => {
       /**
        * Arrow Keys:
        * Since arrow key behavior changes based on whether the input or menu is focused,
-       * many of these tests exist in the "DatePickerInput" and "DatePickerMenu" components
+       * many tests exist in the "DatePickerInput" and "DatePickerMenu" components
        */
       describe('Arrow key', () => {
         describe('Input', () => {
@@ -850,7 +851,130 @@ describe('packages/date-picker', () => {
             userEvent.keyboard('{arrowleft}');
             expect(yearInput).toHaveFocus();
           });
+
+          describe.each(['arrowup', 'arrowdown'])('%p key', key => {
+            test('updates segment value', () => {
+              const { monthInput } = renderDatePicker();
+              userEvent.click(monthInput);
+              userEvent.keyboard(`{${key}}`);
+              const expectedNumberValue =
+                key === 'arrowup' ? defaultMin.month : defaultMax.month;
+
+              expect(monthInput).toHaveValue(
+                getValueFormatter('month')(expectedNumberValue),
+              );
+            });
+
+            test('up arrow fires segment change handler', () => {
+              const onChange = jest.fn();
+              const { monthInput } = renderDatePicker({ onChange });
+              userEvent.click(monthInput);
+              userEvent.keyboard(`{${key}}`);
+              expect(onChange).toHaveBeenCalled();
+            });
+
+            test('up arrow does not fire value change handler', () => {
+              const onDateChange = jest.fn();
+              const { monthInput } = renderDatePicker({ onDateChange });
+              userEvent.click(monthInput);
+              userEvent.keyboard(`{${key}}`);
+              expect(onDateChange).not.toHaveBeenCalled();
+            });
+
+            describe('when a value is set', () => {
+              test('fires value change handler', () => {
+                const onDateChange = jest.fn();
+                const { monthInput } = renderDatePicker({
+                  onDateChange,
+                  value: testToday,
+                });
+                userEvent.click(monthInput);
+                userEvent.keyboard(`{${key}}`);
+                expect(onDateChange).toHaveBeenCalled();
+              });
+
+              describe('if new value would be out of range', () => {
+                test('updates the input', () => {
+                  const min = newUTC(1999, Month.July, 4);
+                  const max = newUTC(2020, Month.July, 4);
+                  const value =
+                    key === 'arrowup'
+                      ? newUTC(2019, Month.August, 1)
+                      : newUTC(2000, Month.June, 30);
+                  const { yearInput } = renderDatePicker({
+                    min,
+                    max,
+                    value,
+                  });
+                  userEvent.click(yearInput);
+                  userEvent.keyboard(`{${key}}`);
+                  const expectedYearVal = getValueFormatter('year')(
+                    key === 'arrowup' ? 2020 : 1999,
+                  );
+                  expect(yearInput).toHaveValue(expectedYearVal);
+                });
+
+                test('fires the change handler', () => {
+                  const onDateChange = jest.fn();
+                  const min = newUTC(1999, Month.July, 4);
+                  const max = newUTC(2020, Month.July, 4);
+                  const value =
+                    key === 'arrowup'
+                      ? newUTC(2019, Month.August, 1)
+                      : newUTC(2000, Month.June, 30);
+                  const { yearInput } = renderDatePicker({
+                    min,
+                    max,
+                    onDateChange,
+                    value,
+                  });
+                  userEvent.click(yearInput);
+                  userEvent.keyboard(`{${key}}`);
+                  expect(onDateChange).toHaveBeenCalled();
+                });
+
+                test('fires the segment change handler', () => {
+                  const onChange = jest.fn();
+                  const min = newUTC(1999, Month.July, 4);
+                  const max = newUTC(2020, Month.July, 4);
+                  const value =
+                    key === 'arrowup'
+                      ? newUTC(2019, Month.August, 1)
+                      : newUTC(2000, Month.June, 30);
+                  const { yearInput } = renderDatePicker({
+                    min,
+                    max,
+                    onChange,
+                    value,
+                  });
+                  userEvent.click(yearInput);
+                  userEvent.keyboard(`{${key}}`);
+                  expect(onChange).toHaveBeenCalled();
+                });
+
+                test.skip('fires the validation handler', () => {
+                  const handleValidation = jest.fn();
+                  const min = newUTC(1999, Month.July, 4);
+                  const max = newUTC(2020, Month.July, 4);
+                  const value =
+                    key === 'arrowup'
+                      ? newUTC(2019, Month.August, 1)
+                      : newUTC(2000, Month.June, 30);
+                  const { yearInput } = renderDatePicker({
+                    min,
+                    max,
+                    handleValidation,
+                    value,
+                  });
+                  userEvent.click(yearInput);
+                  userEvent.keyboard(`{${key}}`);
+                  expect(handleValidation).toHaveBeenCalled();
+                });
+              });
+            });
+          });
         });
+
         describe('Menu', () => {
           test('left arrow moves focus to the previous day', async () => {
             const { openMenu } = renderDatePicker();
@@ -898,123 +1022,224 @@ describe('packages/date-picker', () => {
         expect(menuContainerEl).not.toBeInTheDocument();
       });
 
-      test('does not fire a value change handler', () => {
-        const onDateChange = jest.fn();
-        const { yearInput } = renderDatePicker({
-          onDateChange,
+      describe('typing a single segment', () => {
+        test('does not fire a value change handler', () => {
+          const onDateChange = jest.fn();
+          const { yearInput } = renderDatePicker({
+            onDateChange,
+          });
+          userEvent.type(yearInput, '2023');
+          expect(onDateChange).not.toHaveBeenCalled();
         });
-        userEvent.type(yearInput, '2023');
-        expect(onDateChange).not.toHaveBeenCalled();
-      });
 
-      test('fires a segment change handler', () => {
-        const onChange = jest.fn();
-        const { yearInput } = renderDatePicker({
-          onChange,
+        test('fires a segment change handler', () => {
+          const onChange = jest.fn();
+          const { yearInput } = renderDatePicker({
+            onChange,
+          });
+          userEvent.type(yearInput, '2023');
+          expect(onChange).toHaveBeenCalledWith(
+            eventContainingTargetValue('2023'),
+          );
         });
-        userEvent.type(yearInput, '2023');
-        expect(onChange).toHaveBeenCalledWith(
-          eventContainingTargetValue('2023'),
-        );
-      });
 
-      test('segment value is not immediately formatted', () => {
-        const onChange = jest.fn();
-        const { dayInput } = renderDatePicker({ onChange });
-        userEvent.type(dayInput, '2');
-        expect(onChange).toHaveBeenCalledWith(eventContainingTargetValue('2'));
-        expect(dayInput.value).toBe('2');
-      });
+        test('segment value is not immediately formatted', () => {
+          const onChange = jest.fn();
+          const { dayInput } = renderDatePicker({ onChange });
+          userEvent.type(dayInput, '2');
+          expect(onChange).toHaveBeenCalledWith(
+            eventContainingTargetValue('2'),
+          );
+          expect(dayInput.value).toBe('2');
+        });
 
-      test('value is formatted on segment blur', () => {
-        const onChange = jest.fn();
-        const { dayInput } = renderDatePicker({ onChange });
-        userEvent.type(dayInput, '2');
-        userEvent.tab();
-        expect(onChange).toHaveBeenCalledWith(eventContainingTargetValue('02'));
-        expect(dayInput.value).toBe('02');
-      });
+        test('segment value is formatted on segment blur', () => {
+          const onChange = jest.fn();
+          const { dayInput } = renderDatePicker({ onChange });
+          userEvent.type(dayInput, '2');
+          userEvent.tab();
+          expect(onChange).toHaveBeenCalledWith(
+            eventContainingTargetValue('02'),
+          );
+          expect(dayInput.value).toBe('02');
+        });
 
-      describe('auto-advances focus', () => {
-        describe('for ISO format', () => {
-          const dateFormat = 'iso8601';
+        describe('auto-advance focus', () => {
+          describe('for ISO format', () => {
+            const dateFormat = 'iso8601';
 
-          test('when year value is explicit, focus advances to month', () => {
-            const { yearInput, monthInput } = renderDatePicker({
-              dateFormat,
+            test('when year value is explicit, focus advances to month', () => {
+              const { yearInput, monthInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(yearInput, '1999');
+              expect(monthInput).toHaveFocus();
             });
-            userEvent.type(yearInput, '1999');
-            expect(monthInput).toHaveFocus();
-          });
-          test('when year value is ambiguous, focus does not advance', () => {
-            const { yearInput } = renderDatePicker({ dateFormat });
-            userEvent.type(yearInput, '2');
-            expect(yearInput).toHaveFocus();
-          });
-          test('when year value is out-of-range, focus does not advance', () => {
-            const { yearInput } = renderDatePicker({ dateFormat });
-            userEvent.type(yearInput, '1945');
-            expect(yearInput).toHaveFocus();
-          });
-          test('when month value is explicit, focus advances to day', () => {
-            const { monthInput, dayInput } = renderDatePicker({
-              dateFormat,
+            test('when year value is before MIN, focus still advances', () => {
+              const { yearInput, monthInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(yearInput, '1944');
+              expect(monthInput).toHaveFocus();
+            });
+            test('when year value is after MAX, focus still advances', () => {
+              const { yearInput, monthInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(yearInput, '2048');
+              expect(monthInput).toHaveFocus();
+            });
+            test('when month value is explicit, focus advances to day', () => {
+              const { monthInput, dayInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(monthInput, '5');
+              expect(dayInput).toHaveFocus();
+            });
+
+            test('focus does NOT advance when year value is ambiguous', () => {
+              const { yearInput } = renderDatePicker({ dateFormat });
+              userEvent.type(yearInput, '200');
+              expect(yearInput).toHaveFocus();
+            });
+            test('focus does NOT advance when month value is ambiguous', () => {
+              const { monthInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(monthInput, '1');
+              expect(monthInput).toHaveFocus();
             });
-            userEvent.type(monthInput, '5');
-            expect(dayInput).toHaveFocus();
           });
-          test('when month value is ambiguous, focus does not advance', () => {
-            const { monthInput } = renderDatePicker({
-              dateFormat,
+
+          describe('for en-US format', () => {
+            const dateFormat = 'en-US';
+
+            test('when month value is explicit, focus advances to day', () => {
+              const { monthInput, dayInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(monthInput, '5');
+              expect(dayInput).toHaveFocus();
+            });
+
+            test('when day value is explicit, focus advances to year', () => {
+              const { dayInput, yearInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(dayInput, '5');
+              expect(yearInput).toHaveFocus();
+            });
+
+            test('focus does NOT advance when month value is ambiguous', () => {
+              const { monthInput } = renderDatePicker({ dateFormat });
+              userEvent.type(monthInput, '1');
+              expect(monthInput).toHaveFocus();
+            });
+            test('focus does NOT advance when day value is ambiguous', () => {
+              const { dayInput } = renderDatePicker({ dateFormat });
+              userEvent.type(dayInput, '2');
+              expect(dayInput).toHaveFocus();
+            });
+
+            test('focus does NOT update when year value is ambiguous', () => {
+              const { monthInput, dayInput, yearInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(monthInput, '5');
+              userEvent.type(dayInput, '5');
+              userEvent.type(yearInput, '2');
+              expect(yearInput).toHaveFocus();
             });
-            userEvent.type(monthInput, '1');
-            expect(monthInput).toHaveFocus();
           });
         });
+      });
 
-        describe('for en-US format', () => {
-          const dateFormat = 'en-US';
+      describe('typing a full value', () => {
+        test('fires value change handler', () => {
+          const onDateChange = jest.fn();
+          const { yearInput, monthInput, dayInput } = renderDatePicker({
+            onDateChange,
+          });
+          userEvent.type(yearInput, '2003');
+          userEvent.type(monthInput, '12');
+          userEvent.type(dayInput, '26');
+          expect(onDateChange).toHaveBeenCalledWith(
+            expect.objectContaining(newUTC(2003, Month.December, 26)),
+          );
+        });
 
-          test('when month value is explicit, focus advances to day', () => {
-            const { monthInput, dayInput } = renderDatePicker({
-              dateFormat,
-            });
-            userEvent.type(monthInput, '5');
-            expect(dayInput).toHaveFocus();
+        test('properly renders the input', () => {
+          const onDateChange = jest.fn();
+          const { yearInput, monthInput, dayInput } = renderDatePicker({
+            onDateChange,
           });
-          test('when month value is ambiguous, focus does not advance', () => {
-            const { monthInput } = renderDatePicker({ dateFormat });
-            userEvent.type(monthInput, '1');
-            expect(monthInput).toHaveFocus();
+          userEvent.type(yearInput, '2003');
+          userEvent.type(monthInput, '12');
+          userEvent.type(dayInput, '26');
+          expect(yearInput).toHaveValue('2003');
+          expect(monthInput).toHaveValue('12');
+          expect(dayInput).toHaveValue('26');
+        });
+
+        describe('if value is out of range', () => {
+          test('still fires a value change handler if value is after MAX', async () => {
+            const onDateChange = jest.fn();
+            const { yearInput, monthInput, dayInput } = renderDatePicker({
+              onDateChange,
+            });
+            userEvent.type(yearInput, '2048');
+            userEvent.type(monthInput, '12');
+            userEvent.type(dayInput, '26');
+            await waitFor(() =>
+              expect(onDateChange).toHaveBeenCalledWith(
+                expect.objectContaining(newUTC(2048, Month.December, 26)),
+              ),
+            );
           });
 
-          test('when day value is explicit, focus advances to year', () => {
-            const { dayInput, yearInput } = renderDatePicker({
-              dateFormat,
+          test('properly renders input if value is after MAX', () => {
+            const onDateChange = jest.fn();
+            const { yearInput, monthInput, dayInput } = renderDatePicker({
+              onDateChange,
             });
-            userEvent.type(dayInput, '5');
-            expect(yearInput).toHaveFocus();
+            userEvent.type(yearInput, '2048');
+            userEvent.type(monthInput, '12');
+            userEvent.type(dayInput, '23');
+            expect(yearInput).toHaveValue('2048');
+            expect(monthInput).toHaveValue('12');
+            expect(dayInput).toHaveValue('23');
           });
-          test('when day value is ambiguous, focus does not advance', () => {
-            const { dayInput } = renderDatePicker({ dateFormat });
-            userEvent.type(dayInput, '2');
-            expect(dayInput).toHaveFocus();
+
+          test('fire a value change handler if value is before MIN', () => {
+            const onDateChange = jest.fn();
+            const { yearInput, monthInput, dayInput } = renderDatePicker({
+              onDateChange,
+            });
+            userEvent.type(yearInput, '1969');
+            userEvent.type(monthInput, '7');
+            userEvent.type(dayInput, '20');
+            expect(onDateChange).toHaveBeenCalledWith(
+              expect.objectContaining(newUTC(1969, Month.July, 20)),
+            );
           });
 
-          test('when year value is ambiguous, focus does not update', () => {
-            const { monthInput, dayInput, yearInput } = renderDatePicker({
-              dateFormat,
+          test('properly renders input if value is before MIN', () => {
+            const onDateChange = jest.fn();
+            const { yearInput, monthInput, dayInput } = renderDatePicker({
+              onDateChange,
             });
-            userEvent.type(monthInput, '5');
-            userEvent.type(dayInput, '5');
-            userEvent.type(yearInput, '2');
-            expect(yearInput).toHaveFocus();
+            userEvent.type(yearInput, '1969');
+            userEvent.type(monthInput, '7');
+            userEvent.type(dayInput, '20');
+            expect(yearInput).toHaveValue('1969');
+            expect(monthInput).toHaveValue('07');
+            expect(dayInput).toHaveValue('20');
           });
         });
       });
 
       describe('on un-focus/blur', () => {
-        test('does not fire a change handler if the value is incomplete', () => {
+        test('does not fire a value change handler if the value is incomplete', () => {
           const onDateChange = jest.fn();
           const { yearInput } = renderDatePicker({
             onDateChange,
@@ -1034,7 +1259,7 @@ describe('packages/date-picker', () => {
           );
         });
 
-        test('fires a change handler when the value is a valid date', () => {
+        test('fires a value change handler when the value is a valid date', () => {
           const onDateChange = jest.fn();
           const { yearInput, monthInput, dayInput } = renderDatePicker({
             onDateChange,
@@ -1079,19 +1304,108 @@ describe('packages/date-picker', () => {
 
     // TODO: Move these suites to Cypress (or other e2e/integration platform)
     describe('User flows', () => {
-      test('month is updated when value changes', async () => {
+      test('month is updated when value changes externally', async () => {
         const value = newUTC(2023, Month.September, 10);
-        const { calendarButton, findMenuElements, rerenderDatePicker } =
+        const { calendarButton, waitForMenuToOpen, rerenderDatePicker } =
           renderDatePicker();
         rerenderDatePicker({ value });
         userEvent.click(calendarButton);
-        const { calendarGrid } = await findMenuElements();
+        const { calendarGrid } = await waitForMenuToOpen();
         await waitFor(() =>
           expect(calendarGrid).toHaveAttribute('aria-label', 'September 2023'),
         );
       });
 
-      describe('when closing and re-opening the menu', () => {
+      describe('setting the date to an invalid value', () => {
+        describe('with initial value', () => {
+          let menuElements: RenderMenuResult;
+
+          beforeEach(async () => {
+            const { openMenu } = renderDatePicker({
+              value: newUTC(2038, Month.December, 25),
+            });
+            menuElements = await openMenu();
+          });
+
+          test('sets displayed month to that month', () => {
+            expect(menuElements.calendarGrid).toHaveAttribute(
+              'aria-label',
+              'December 2038',
+            );
+          });
+
+          test.todo('sets the error state');
+        });
+
+        describe('with arrow keys', () => {
+          const onDateChange = jest.fn();
+          let menuElements: RenderMenuResult;
+
+          beforeEach(async () => {
+            const { yearInput, waitForMenuToOpen, findMenuElements } =
+              renderDatePicker({
+                value: newUTC(2037, Month.December, 25),
+                onDateChange,
+              });
+            userEvent.click(yearInput);
+            await waitForMenuToOpen();
+            userEvent.keyboard('{arrowup}');
+            menuElements = await findMenuElements();
+          });
+
+          test('fires onDateChange handler', async () => {
+            expect(onDateChange).toHaveBeenCalledWith(
+              expect.objectContaining(newUTC(2038, Month.December, 25)),
+            );
+          });
+
+          test('sets displayed month to that month', async () => {
+            expect(menuElements.calendarGrid).toHaveAttribute(
+              'aria-label',
+              'December 2038',
+            );
+          });
+
+          test.todo('sets the error state');
+        });
+
+        describe('by typing', () => {
+          let menuElements: RenderMenuResult;
+          const onDateChange = jest.fn();
+
+          beforeEach(async () => {
+            const {
+              yearInput,
+              monthInput,
+              dayInput,
+              calendarButton,
+              waitForMenuToOpen,
+            } = renderDatePicker({ onDateChange });
+            userEvent.type(yearInput, '2038');
+            userEvent.type(monthInput, '12');
+            userEvent.type(dayInput, '25');
+            userEvent.click(calendarButton);
+            menuElements = await waitForMenuToOpen();
+          });
+
+          test('fires onDateChange handler', () => {
+            expect(onDateChange).toHaveBeenCalledWith(
+              expect.objectContaining(newUTC(2038, Month.December, 25)),
+            );
+          });
+
+          test('sets displayed month to that month', () => {
+            expect(menuElements.calendarGrid).toHaveAttribute(
+              'aria-label',
+              'December 2038',
+            );
+          });
+
+          test.todo('sets the error state');
+        });
+      });
+
+      describe('When closing and re-opening the menu', () => {
         test('month is reset to today by default', async () => {
           const { openMenu } = renderDatePicker();
           const { calendarGrid, menuContainerEl } = await openMenu();
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index 9cf00a1546..d97f8399ea 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -53,10 +53,8 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
     },
   },
   args: {
-    dateFormat: 'en-US',
+    dateFormat: 'iso8601',
     label: 'Pick a date',
-    min: newUTC(1996, Month.October, 14),
-    max: newUTC(2026, Month.October, 14),
     size: Size.Default,
     timeZone: 'America/New_York',
   },
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index a4007f0d08..b8c62f35a6 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -9,6 +9,7 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { DateSegment } from '../shared';
 import { getISODate } from '../shared/utils/getISODate';
 
 import { DatePickerProps } from './DatePicker.types';
@@ -25,6 +26,7 @@ interface RenderDatePickerResult extends RenderResult {
   monthInput: HTMLInputElement;
   yearInput: HTMLInputElement;
   calendarButton: HTMLButtonElement;
+  getInputByName: (name: DateSegment) => HTMLInputElement;
 
   /**
    * Asynchronously query for menu elements
@@ -48,7 +50,7 @@ interface RenderDatePickerResult extends RenderResult {
   rerenderDatePicker: (newProps: Partial<DatePickerProps>) => void;
 }
 
-interface RenderMenuResult {
+export interface RenderMenuResult {
   menuContainerEl: HTMLElement | null;
   leftChevron: HTMLButtonElement | null;
   rightChevron: HTMLButtonElement | null;
@@ -95,6 +97,9 @@ export const renderDatePicker = (
     ) as HTMLButtonElement,
   };
 
+  const getInputByName = (name: DateSegment) =>
+    result.getByLabelText(name) as HTMLInputElement;
+
   /**
    * Asynchronously query for menu elements.
    */
@@ -154,6 +159,7 @@ export const renderDatePicker = (
   return {
     ...result,
     ...inputElements,
+    getInputByName,
     findMenuElements,
     waitForMenuToOpen,
     openMenu,
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index d3dc9c1e46..68451e8610 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -15,8 +15,6 @@ import {
   isElementInputSegment,
   isExplicitSegmentValue,
   isSameUTCDay,
-  isValidSegmentName,
-  isValidValueForSegment,
   isZeroLike,
 } from '../../shared/utils';
 import { useSingleDateContext } from '../SingleDateContext';
@@ -51,6 +49,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       if (!isSameUTCDay(inputVal, value)) {
         handleValidation?.(inputVal);
         setValue(inputVal || null);
+        // TODO: update month?
       }
     };
 
@@ -183,17 +182,14 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
      * Called when any segment changes
      * If up/down arrows are pressed, don't move to the next segment
      */
-    const handleSegmentChange: DateInputSegmentChangeEventHandler = e => {
-      const { segment, value: segmentValue, meta } = e;
-      const usingArrowKeys =
-        meta?.key === keyMap.ArrowDown || meta?.key === keyMap.ArrowUp;
-
-      if (isValidSegmentName(segment)) {
-        if (!usingArrowKeys) {
-          if (
-            isValidValueForSegment(segment, segmentValue) &&
-            isExplicitSegmentValue(segment, segmentValue)
-          ) {
+    const handleSegmentChange: DateInputSegmentChangeEventHandler =
+      segmentChangeEvent => {
+        const { segment, value: segmentValue, meta } = segmentChangeEvent;
+        const changedViaArrowKeys =
+          meta?.key === keyMap.ArrowDown || meta?.key === keyMap.ArrowUp;
+
+        if (!changedViaArrowKeys) {
+          if (isExplicitSegmentValue(segment, segmentValue)) {
             const nextSegment = getRelativeSegment('next', {
               segment: segmentRefs[segment],
               formatParts,
@@ -204,22 +200,23 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           }
         }
 
-        if (!isValidValueForSegment(segment, segmentValue) && isDirty) {
+        if (isDirty) {
           handleValidation?.(value);
         }
-      }
-
-      const changeEvent = new Event('change');
-      const target = segmentRefs[segment].current;
 
-      if (target) {
-        const reactEvent = createSyntheticEvent<ChangeEvent<HTMLInputElement>>(
-          changeEvent,
-          target,
-        );
-        onSegmentChange?.(reactEvent);
-      }
-    };
+        /**
+         * Fire a simulated `change` event
+         */
+        const changeEvent = new Event('change');
+        const target = segmentRefs[segment].current;
+
+        if (target) {
+          const reactEvent = createSyntheticEvent<
+            ChangeEvent<HTMLInputElement>
+          >(changeEvent, target);
+          onSegmentChange?.(reactEvent);
+        }
+      };
 
     return (
       <DateFormField
@@ -235,7 +232,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           value={value}
           setValue={handleInputValueChange}
           segmentRefs={segmentRefs}
-          onChange={handleSegmentChange}
+          onSegmentChange={handleSegmentChange}
         />
       </DateFormField>
     );
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 57d0237f63..b55b036eb6 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -181,6 +181,34 @@ describe('packages/date-picker/date-picker-menu', () => {
       const valueCell = getCellWithValue(testValue);
       expect(valueCell).toHaveFocus();
     });
+
+    describe('when value is out of range', () => {
+      test('grid is labelled', () => {
+        const { calendarGrid } = renderDatePickerMenu(null, {
+          value: newUTC(2048, Month.December, 25),
+        });
+        expect(calendarGrid).toHaveAttribute('aria-label', 'December 2048');
+      });
+      test('all cells disabled', () => {
+        const { calendarCells } = renderDatePickerMenu(null, {
+          value: newUTC(2048, Month.December, 25),
+        });
+        const isEveryCellDisabled = calendarCells.every(
+          cell => cell?.getAttribute('aria-disabled') === 'true',
+        );
+        expect(isEveryCellDisabled).toBe(true);
+      });
+
+      test('doest not highlight a cell', () => {
+        const { calendarCells } = renderDatePickerMenu(null, {
+          value: newUTC(2048, Month.December, 25),
+        });
+        const isSomeCellHighlighted = calendarCells.some(
+          cell => cell?.getAttribute('aria-selected') === 'true',
+        );
+        expect(isSomeCellHighlighted).toBe(false);
+      });
+    });
   });
 
   describe('Keyboard navigation', () => {
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
index 4b999d7e44..0cc5eefb95 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -53,7 +53,7 @@ const renderDateInputBox = (
 };
 
 describe('packages/date-picker/shared/date-input-box', () => {
-  const onChange = jest.fn<DateInputSegmentChangeEventHandler>();
+  const onSegmentChange = jest.fn<DateInputSegmentChangeEventHandler>();
 
   const testContext: Partial<DatePickerProviderProps> = {
     dateFormat: 'iso8601',
@@ -61,7 +61,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
   };
 
   afterEach(() => {
-    onChange.mockClear();
+    onSegmentChange.mockClear();
   });
 
   describe('Rendering', () => {
@@ -124,7 +124,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
   });
 
   describe('Typing', () => {
-    test('typing into a segment updates the segment value', () => {
+    test('updates the rendered segment value', () => {
       const { dayInput } = renderDateInputBox(undefined, testContext);
       userEvent.type(dayInput, '26');
       expect(dayInput.value).toBe('26');
@@ -154,7 +154,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
       expect(yearInput.value).toBe('199');
     });
 
-    test('typing into a segment does not fire the value setter', () => {
+    test('typing into a segment does not immediately fire the value setter', () => {
       const setValue = jest.fn();
       const { dayInput } = renderDateInputBox(
         {
@@ -168,17 +168,17 @@ describe('packages/date-picker/shared/date-input-box', () => {
       expect(setValue).not.toHaveBeenCalled();
     });
 
-    test('typing into a segment fires the change handler', () => {
+    test('typing into a segment fires the segment change handler', () => {
       const { yearInput } = renderDateInputBox(
         {
           value: null,
-          onChange,
+          onSegmentChange,
         },
         testContext,
       );
       userEvent.type(yearInput, '1993');
 
-      expect(onChange).toHaveBeenCalledWith(
+      expect(onSegmentChange).toHaveBeenCalledWith(
         expect.objectContaining({ value: '1993' }),
       );
     });
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index d8b2b112d3..f0b4105d92 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -1,5 +1,4 @@
 import React, { FocusEventHandler } from 'react';
-import { isSameDay } from 'date-fns';
 import isEqual from 'lodash/isEqual';
 
 import { cx } from '@leafygreen-ui/emotion';
@@ -43,12 +42,12 @@ import { DateInputBoxProps } from './DateInputBox.types';
 export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
   (
     {
-      value: dateValue,
-      setValue: setDateValue,
+      value,
+      setValue,
       className,
       labelledBy,
       segmentRefs,
-      onChange: onSegmentChangeProp,
+      onSegmentChange,
       ...rest
     }: DateInputBoxProps,
     fwdRef,
@@ -74,28 +73,24 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
         const areAllSegmentsEmpty = !doesSomeSegmentExist(newSegments);
 
         if (utcDate) {
-          // Update the value _iff_ all parts are set, and create a valid date.
-          const shouldUpdate = !dateValue || !isSameDay(utcDate, dateValue);
-
-          if (shouldUpdate) {
-            setDateValue?.(utcDate);
-          }
-        } else if (hasAnySegmentChanged && areAllSegmentsEmpty) {
-          // if no segment exists, set the external value to null
-          setDateValue?.(null);
+          // Update the value iff all segments create a valid date.
+          setValue?.(utcDate);
+        } else if (areAllSegmentsEmpty) {
+          // otherwise, if no segment exists, set the external value to null
+          setValue?.(null);
         }
       }
     };
 
     /** Keep track of each date segment */
-    const { segments, setSegment } = useDateSegments(dateValue, {
+    const { segments, setSegment } = useDateSegments(value, {
       onUpdate: onSegmentsUpdate,
     });
 
     /** fired when an individual segment value changes */
     const handleSegmentChange: DateInputSegmentChangeEventHandler = event => {
       setSegment(event.segment, event.value);
-      onSegmentChangeProp?.(event);
+      onSegmentChange?.(event);
     };
 
     /** Triggered when a segment is blurred */
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
index be3dc58a53..eeab5f2df7 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
@@ -20,7 +20,7 @@ export interface DateInputBoxProps
   /**
    * Callback fired when any segment changes, but not necessarily a full value
    */
-  onChange?: DateInputSegmentChangeEventHandler;
+  onSegmentChange?: DateInputSegmentChangeEventHandler;
 
   /**
    * id of the labelling element
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 f2ea94442e..116dd7ccc1 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
@@ -1,6 +1,6 @@
 import React from 'react';
 import { jest } from '@jest/globals';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { mean, round } from 'lodash';
 
@@ -13,8 +13,15 @@ import { DateInputSegment, type DateInputSegmentProps } from '.';
 
 const onChangeHandler = jest.fn<DateInputSegmentChangeEventHandler>();
 
-const renderSegment = (props: DateInputSegmentProps) => {
-  const result = render(<DateInputSegment {...props} />);
+const renderSegment = (props: Partial<DateInputSegmentProps>) => {
+  const result = render(
+    <DateInputSegment
+      value={''}
+      onChange={() => {}}
+      segment={'day'}
+      {...props}
+    />,
+  );
   const input = result.getByTestId('lg-date_picker_input-segment');
   return {
     ...result,
@@ -64,7 +71,33 @@ describe('packages/date-picker/shared/date-input-segment', () => {
           value: '12',
         });
 
-        rerender(<DateInputSegment segment="day" value={'08'} />);
+        rerender(
+          <DateInputSegment segment="day" value={'08'} onChange={() => {}} />,
+        );
+        expect(input.value).toBe('08');
+      });
+    });
+
+    describe('month segment', () => {
+      test('Rendering with undefined sets the value to empty string', () => {
+        const { input } = renderSegment({ segment: 'month' });
+        expect(input.value).toBe('');
+      });
+
+      test('Rendering with a value sets the input value', () => {
+        const { input } = renderSegment({ segment: 'month', value: '26' });
+        expect(input.value).toBe('26');
+      });
+
+      test('rerendering updates the value', () => {
+        const { input, rerender } = renderSegment({
+          segment: 'month',
+          value: '26',
+        });
+
+        rerender(
+          <DateInputSegment segment="month" value={'08'} onChange={() => {}} />,
+        );
         expect(input.value).toBe('08');
       });
     });
@@ -85,7 +118,13 @@ describe('packages/date-picker/shared/date-input-segment', () => {
           segment: 'year',
           value: '2023',
         });
-        rerender(<DateInputSegment segment="year" value={'1993'} />);
+        rerender(
+          <DateInputSegment
+            segment="year"
+            value={'1993'}
+            onChange={() => {}}
+          />,
+        );
         expect(input.value).toBe('1993');
       });
     });
@@ -94,7 +133,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
   describe('Typing', () => {
     test('calls the change handler', () => {
       const result = render(
-        <DateInputSegment segment="day" onChange={onChangeHandler} />,
+        <DateInputSegment segment="day" value="" onChange={onChangeHandler} />,
       );
       const input = result.getByTestId('lg-date_picker_input-segment');
       userEvent.type(input, '8');
@@ -103,9 +142,45 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       );
     });
 
-    test('allows leading zeroes', () => {
+    test('allows typing additional characters to create a valid value', () => {
+      const result = render(
+        <DateInputSegment
+          segment="day"
+          value="02"
+          onChange={onChangeHandler}
+        />,
+      );
+
+      const input = result.getByTestId('lg-date_picker_input-segment');
+      userEvent.type(input, '6');
+      expect(onChangeHandler).toHaveBeenCalled();
+      expect(onChangeHandler).toHaveBeenCalledWith(
+        expect.objectContaining({ value: '26' }),
+      );
+    });
+
+    test('allows typing additional characters to create an invalid value', () => {
+      // Note: event may be ignored by the parent,
+      // but this component still fires the event
       const result = render(
-        <DateInputSegment segment="day" onChange={onChangeHandler} />,
+        <DateInputSegment
+          segment="day"
+          value="26"
+          onChange={onChangeHandler}
+        />,
+      );
+
+      const input = result.getByTestId('lg-date_picker_input-segment');
+      userEvent.type(input, '6');
+      expect(onChangeHandler).toHaveBeenCalled();
+      expect(onChangeHandler).toHaveBeenCalledWith(
+        expect.objectContaining({ value: '66' }),
+      );
+    });
+
+    test('allows zero character', () => {
+      const result = render(
+        <DateInputSegment segment="day" value="" onChange={onChangeHandler} />,
       );
       const input = result.getByTestId('lg-date_picker_input-segment');
       userEvent.type(input, '0');
@@ -114,9 +189,22 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       );
     });
 
+    test('allows leading zeroes', async () => {
+      const result = render(
+        <DateInputSegment segment="day" value="0" onChange={onChangeHandler} />,
+      );
+      const input = result.getByTestId('lg-date_picker_input-segment');
+      userEvent.type(input, '2');
+      await waitFor(() =>
+        expect(onChangeHandler).toHaveBeenCalledWith(
+          expect.objectContaining({ value: '02' }),
+        ),
+      );
+    });
+
     test('does not allow non-number characters', () => {
       const result = render(
-        <DateInputSegment segment="day" onChange={onChangeHandler} />,
+        <DateInputSegment segment="day" value="" onChange={onChangeHandler} />,
       );
       const input = result.getByTestId('lg-date_picker_input-segment');
       userEvent.type(input, 'aB$/');
@@ -185,7 +273,11 @@ describe('packages/date-picker/shared/date-input-segment', () => {
 
           test('calls handler with `min` if initially undefined', () => {
             const result = render(
-              <DateInputSegment onChange={onChangeHandler} segment={segment} />,
+              <DateInputSegment
+                value=""
+                onChange={onChangeHandler}
+                segment={segment}
+              />,
             );
             const input = result.getByTestId('lg-date_picker_input-segment');
 
@@ -230,7 +322,11 @@ describe('packages/date-picker/shared/date-input-segment', () => {
 
           test('calls handler with `max` if initially undefined', () => {
             const result = render(
-              <DateInputSegment onChange={onChangeHandler} segment={segment} />,
+              <DateInputSegment
+                value=""
+                onChange={onChangeHandler}
+                segment={segment}
+              />,
             );
             const input = result.getByTestId('lg-date_picker_input-segment');
 
@@ -258,5 +354,6 @@ describe('packages/date-picker/shared/date-input-segment', () => {
         });
       });
     });
+    test.todo('Space Key');
   });
 });
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
index 87fc0c6fb9..87fea94649 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { StoryFn } from '@storybook/react';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 
+import { DateSegmentValue } from '../../../hooks';
 import {
   DatePickerContextProps,
   DatePickerProvider,
@@ -55,11 +56,21 @@ const meta: StoryMetaType<typeof DateInputSegment, DatePickerContextProps> = {
 
 export default meta;
 
-const Template: StoryFn<typeof DateInputSegment> = props => (
-  <LeafyGreenProvider>
-    <DateInputSegment {...props} />
-  </LeafyGreenProvider>
-);
+const Template: StoryFn<typeof DateInputSegment> = props => {
+  const [value, setValue] = useState<DateSegmentValue>('');
+
+  return (
+    <LeafyGreenProvider>
+      <DateInputSegment
+        {...props}
+        value={value}
+        onChange={({ value }) => {
+          setValue(value);
+        }}
+      />
+    </LeafyGreenProvider>
+  );
+};
 
 export const Basic = Template.bind({});
 
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 e67325c78d..6404c05951 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -3,7 +3,7 @@ import React, { ChangeEventHandler, KeyboardEventHandler } from 'react';
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { keyMap, rollover } from '@leafygreen-ui/lib';
+import { keyMap, rollover, truncateStart } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
@@ -13,7 +13,7 @@ import {
   defaultMin,
   defaultPlaceholder,
 } from '../../../constants';
-import { getSegmentMaxLength, getValueFormatter } from '../../../utils';
+import { getValueFormatter } from '../../../utils';
 import { useDatePickerContext } from '../../DatePickerContext';
 
 import {
@@ -57,8 +57,7 @@ export const DateInputSegment = React.forwardRef<
     const baseFontSize = useUpdatedBaseFontSize();
     const { size, disabled } = useDatePickerContext();
     const formatter = getValueFormatter(segment);
-    const pattern = `[0-9]{${charsPerSegment.year}}`;
-    const maxLength = getSegmentMaxLength(segment);
+    const pattern = `[0-9]{${charsPerSegment[segment]}}`;
 
     /** Prevent non-numeric values from triggering a change event */
     const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
@@ -66,49 +65,68 @@ export const DateInputSegment = React.forwardRef<
       const numericValue = Number(target.value);
 
       if (!isNaN(numericValue)) {
-        const stringValue = numericValue.toString();
-        onChange?.({
+        const newValue = truncateStart(target.value, {
+          length: charsPerSegment[segment],
+        });
+
+        onChange({
           segment,
-          value: stringValue,
+          value: newValue,
         });
       }
     };
 
-    /** Synthetically fire ChangeEvents when the up/down arrow keys are pressed */
+    /** Handle keydown presses that don't natively fire a change event */
     const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {
       const { key } = e as React.KeyboardEvent<HTMLInputElement> & {
         target: HTMLInputElement;
       };
 
-      if (key === keyMap.ArrowUp || key === keyMap.ArrowDown) {
-        e.preventDefault();
-        const valueDiff = key === keyMap.ArrowUp ? 1 : -1;
-
-        const initialValue = value
-          ? Number(value)
-          : key === keyMap.ArrowUp
-          ? max
-          : min;
+      switch (key) {
+        case keyMap.ArrowUp:
+        case keyMap.ArrowDown: {
+          /** Fire a custom change event when the up/down arrow keys are pressed */
 
-        const newValue = rollover(initialValue + valueDiff, min, max);
-        const valueString = formatter(newValue);
+          e.preventDefault();
+          const valueDiff = key === keyMap.ArrowUp ? 1 : -1;
 
-        onChange?.({
-          segment,
-          value: valueString,
-          meta: { key },
-        });
-      }
+          const currentValue: number = value
+            ? Number(value)
+            : key === keyMap.ArrowUp
+            ? max
+            : min;
 
-      if (key === keyMap.Backspace) {
-        const numChars = value?.length;
+          const newValue = rollover(currentValue + valueDiff, min, max);
+          const valueString = formatter(newValue);
 
-        if (numChars === 1) {
-          onChange?.({
+          onChange({
             segment,
-            value: '',
+            value: valueString,
             meta: { key },
           });
+          break;
+        }
+
+        case keyMap.Backspace: {
+          const numChars = value.length;
+
+          if (numChars === 1) {
+            onChange({
+              segment,
+              value: '',
+              meta: { key },
+            });
+          }
+          break;
+        }
+
+        case keyMap.Space: {
+          // TODO:
+          break;
+        }
+
+        default: {
+          break;
         }
       }
 
@@ -144,7 +162,7 @@ export const DateInputSegment = React.forwardRef<
           segmentSizeStyles[size ?? Size.Default],
           segmentWidthStyles[segment],
         )}
-        maxLength={maxLength}
+        // maxLength={maxLength}
       />
     );
   },
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts
index 21292443e2..73e008d8be 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts
@@ -22,7 +22,7 @@ export interface DateInputSegmentProps
   segment: DateSegment;
 
   /** The value of the date segment */
-  value?: DateSegmentValue;
+  value: DateSegmentValue;
 
   /** Optional minimum value. Defaults to 0 for day/month segments, and 1970 for year segments */
   min?: number;
@@ -30,5 +30,5 @@ export interface DateInputSegmentProps
   /** Optional maximum value. Defaults to 31 for day, 12 for month, 2038 for year */
   max?: number;
 
-  onChange?: DateInputSegmentChangeEventHandler;
+  onChange: DateInputSegmentChangeEventHandler;
 }
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
index 86efe96398..6ab886530a 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
@@ -78,9 +78,9 @@ export const getIsInRange =
  * Returns a valid `Context` value given optional provider props
  */
 export const getContextProps = (
-  value: DatePickerProviderProps,
+  providerProps: DatePickerProviderProps,
 ): DatePickerContextProps => {
-  const { min, max, ...rest } = value;
+  const { min, max, ...rest } = providerProps;
   const providerValue: DatePickerContextProps = {
     ...defaults(rest, defaultDatePickerContext),
     min: defaultTo(toDate(min), defaultDatePickerContext.min),
diff --git a/packages/date-picker/src/shared/constants.ts b/packages/date-picker/src/shared/constants.ts
index 5807304d05..5ca4e42369 100644
--- a/packages/date-picker/src/shared/constants.ts
+++ b/packages/date-picker/src/shared/constants.ts
@@ -80,6 +80,10 @@ export const DaysOfWeek = [
 ] as const;
 export type DaysOfWeek = (typeof DaysOfWeek)[number];
 
+// TODO: Update how defaultMin & defaultMax are defined,
+// since day/month are constants,
+// but year is consumer-defined
+
 /**
  * The minimum number for each segment
  */
diff --git a/packages/date-picker/src/shared/hooks/useDateSegments/DateSegments.types.ts b/packages/date-picker/src/shared/hooks/useDateSegments/DateSegments.types.ts
index 52d24c592a..12f712dacd 100644
--- a/packages/date-picker/src/shared/hooks/useDateSegments/DateSegments.types.ts
+++ b/packages/date-picker/src/shared/hooks/useDateSegments/DateSegments.types.ts
@@ -7,10 +7,7 @@ export type DateSegment = (typeof DateSegment)[keyof typeof DateSegment];
 
 export type DateSegmentValue = string;
 
-export type DateSegmentsState = Record<
-  DateSegment,
-  DateSegmentValue | undefined
->;
+export type DateSegmentsState = Record<DateSegment, DateSegmentValue>;
 
 export function isDateSegment(str: any): str is DateSegment {
   if (typeof str !== 'string') return false;
diff --git a/packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts b/packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
index 1b6b18f10e..418fb428f6 100644
--- a/packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
+++ b/packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
@@ -10,11 +10,11 @@ describe('packages/date-picker/utils/getSegmentsFromDate', () => {
     expect(segments.year).toBe(2023);
   });
 
-  test('returns undefined for each segment when date is null', () => {
+  test('returns empty string for each segment when date is null', () => {
     const segments = getSegmentsFromDate(null);
     expect(segments).toBeDefined();
-    expect(segments.day).toBeUndefined();
-    expect(segments.month).toBeUndefined();
-    expect(segments.year).toBeUndefined();
+    expect(segments.day).toEqual('');
+    expect(segments.month).toEqual('');
+    expect(segments.year).toEqual('');
   });
 });
diff --git a/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts b/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts
index fc3d1a65f5..b344a82507 100644
--- a/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts
+++ b/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts
@@ -4,9 +4,9 @@ import { getValueFormatter } from '../getValueFormatter';
 /** Returns a single object with day, month & year segments */
 export const getSegmentsFromDate = (date: Date | null): DateSegmentsState => {
   return {
-    day: date ? date.getUTCDate() : undefined,
-    month: date ? date.getUTCMonth() + 1 : undefined,
-    year: date ? date.getUTCFullYear() : undefined,
+    day: date ? date.getUTCDate() : '',
+    month: date ? date.getUTCMonth() + 1 : '',
+    year: date ? date.getUTCFullYear() : '',
   } as DateSegmentsState;
 };
 
diff --git a/packages/date-picker/src/shared/utils/getValueFormatter/valueFormatter.spec.ts b/packages/date-picker/src/shared/utils/getValueFormatter/valueFormatter.spec.ts
index 0dd09ce2a2..3095201124 100644
--- a/packages/date-picker/src/shared/utils/getValueFormatter/valueFormatter.spec.ts
+++ b/packages/date-picker/src/shared/utils/getValueFormatter/valueFormatter.spec.ts
@@ -1,4 +1,4 @@
-import { DateSegment } from '../../shared/hooks/useDateSegments/DateSegments.types';
+import { DateSegment } from '../../hooks';
 
 import { getValueFormatter } from '.';
 
diff --git a/packages/date-picker/src/shared/utils/isExplicitSegmentValue/index.ts b/packages/date-picker/src/shared/utils/isExplicitSegmentValue/index.ts
index 166f9f02a9..389934a734 100644
--- a/packages/date-picker/src/shared/utils/isExplicitSegmentValue/index.ts
+++ b/packages/date-picker/src/shared/utils/isExplicitSegmentValue/index.ts
@@ -1,6 +1,6 @@
 import { charsPerSegment } from '../../constants';
 import { DateSegment, DateSegmentValue } from '../../hooks';
-import { isValidValueForSegment } from '../isValidValueForSegment';
+import { isValidSegmentName, isValidSegmentValue } from '../isValidSegment';
 
 /**
  * Returns whether the provided value is an explicit, unique value for a given segment.
@@ -12,7 +12,8 @@ export const isExplicitSegmentValue = (
   segment: DateSegment,
   value: DateSegmentValue,
 ): boolean => {
-  if (!isValidValueForSegment(segment, value)) return false;
+  if (!(isValidSegmentValue(value) && isValidSegmentName(segment)))
+    return false;
 
   switch (segment) {
     case DateSegment.Day:
diff --git a/packages/date-picker/src/shared/utils/isExplicitSegmentValue/isExplicitSegmentValue.spec.ts b/packages/date-picker/src/shared/utils/isExplicitSegmentValue/isExplicitSegmentValue.spec.ts
index 48422da9c0..7011ecb6a4 100644
--- a/packages/date-picker/src/shared/utils/isExplicitSegmentValue/isExplicitSegmentValue.spec.ts
+++ b/packages/date-picker/src/shared/utils/isExplicitSegmentValue/isExplicitSegmentValue.spec.ts
@@ -19,8 +19,9 @@ describe('packages/date-picker/utils/isExplicitSegmentValue', () => {
 
   test('year', () => {
     expect(isExplicitSegmentValue('year', '1')).toBe(false);
+    expect(isExplicitSegmentValue('year', '200')).toBe(false);
     expect(isExplicitSegmentValue('year', '1970')).toBe(true);
     expect(isExplicitSegmentValue('year', '2000')).toBe(true);
-    expect(isExplicitSegmentValue('year', '0001')).toBe(false);
+    expect(isExplicitSegmentValue('year', '0001')).toBe(true);
   });
 });
diff --git a/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts b/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
index 6ba061f49a..ce77c99f94 100644
--- a/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
+++ b/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
@@ -4,12 +4,17 @@ import { defaultMax, defaultMin } from '../../constants';
 import { DateSegment, DateSegmentValue } from '../../hooks';
 import { isValidSegmentName, isValidSegmentValue } from '../isValidSegment';
 
-/** Returns whether a value is valid for a given segment type */
+/**
+ * Returns whether a value is valid for a given segment type
+ * @deprecated
+ */
 export const isValidValueForSegment = (
   segment: DateSegment,
   value: DateSegmentValue,
 ): boolean => {
   if (!(isValidSegmentValue(value) && isValidSegmentName(segment)))
     return false;
-  return inRange(Number(value), defaultMin[segment], defaultMax[segment] + 1);
+  return segment === 'year'
+    ? true // Any year number is valid
+    : inRange(Number(value), defaultMin[segment], defaultMax[segment] + 1);
 };
diff --git a/packages/date-picker/src/shared/utils/isValidValueForSegment/isValidValueForSegment.spec.ts b/packages/date-picker/src/shared/utils/isValidValueForSegment/isValidValueForSegment.spec.ts
index 2c0c5ff810..3141c2d2cc 100644
--- a/packages/date-picker/src/shared/utils/isValidValueForSegment/isValidValueForSegment.spec.ts
+++ b/packages/date-picker/src/shared/utils/isValidValueForSegment/isValidValueForSegment.spec.ts
@@ -24,8 +24,12 @@ describe('packages/date-picker/utils/isValidSegmentValue', () => {
     expect(isValidValueForSegment('year', '2000')).toBe(true);
     expect(isValidValueForSegment('year', '2038')).toBe(true);
 
-    expect(isValidValueForSegment('year', '200')).toBe(false);
-    expect(isValidValueForSegment('year', '1945')).toBe(false);
-    expect(isValidValueForSegment('year', '2048')).toBe(false);
+    // All positive numbers are considered valid years by default
+    expect(isValidValueForSegment('year', '200')).toBe(true);
+    expect(isValidValueForSegment('year', '1945')).toBe(true);
+    expect(isValidValueForSegment('year', '2048')).toBe(true);
+
+    expect(isValidValueForSegment('year', '0')).toBe(false);
+    expect(isValidValueForSegment('year', '-2000')).toBe(false);
   });
 });
diff --git a/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
index 9f7cb12728..829cd8977c 100644
--- a/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
@@ -1,6 +1,7 @@
 import { DateSegmentsState } from '../../hooks';
 import { isValidSegmentName, isValidSegmentValue } from '../isValidSegment';
 import { isValidValueForSegment } from '../isValidValueForSegment';
+import { newUTC } from '../newUTC';
 
 /** Constructs a date object in UTC from day, month, year segments */
 export const newDateFromSegments = (
@@ -16,6 +17,6 @@ export const newDateFromSegments = (
     )
   ) {
     const { day, month, year } = segments;
-    return new Date(Date.UTC(Number(year), Number(month) - 1, Number(day)));
+    return newUTC(Number(year), Number(month) - 1, Number(day));
   }
 };
diff --git a/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
index e58c0882c6..25943036ab 100644
--- a/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
@@ -10,6 +10,26 @@ describe('packages/date=picker/utils/newDateFromSegments', () => {
     expect(newDate?.toISOString()).toEqual('2023-01-01T00:00:00.000Z');
   });
 
+  test('returns a date outside the default range', () => {
+    const newDate = newDateFromSegments({
+      day: '1',
+      month: '1',
+      year: '2100',
+    });
+    expect(newDate?.toISOString()).toEqual('2100-01-01T00:00:00.000Z');
+  });
+
+  // FIXME:
+  test.skip('returns undefined if month/day combo is invalid', () => {
+    const newDate = newDateFromSegments({
+      day: '31',
+      month: '02',
+      year: '2024',
+    });
+
+    expect(newDate).toBeUndefined();
+  });
+
   test('returns undefined if any segment is undefined', () => {
     const newDate = newDateFromSegments({
       day: undefined,
diff --git a/packages/lib/src/helpers/index.ts b/packages/lib/src/helpers/index.ts
index a594dd5931..48eb071ecb 100644
--- a/packages/lib/src/helpers/index.ts
+++ b/packages/lib/src/helpers/index.ts
@@ -2,3 +2,4 @@ export { pickAndOmit } from './pickAndOmit';
 export { consoleOnce } from './consoleOnce';
 export { allEqual } from './allEqual';
 export { rollover } from './rollover';
+export { truncateStart } from './truncateStart';
diff --git a/packages/lib/src/helpers/truncateStart/index.ts b/packages/lib/src/helpers/truncateStart/index.ts
new file mode 100644
index 0000000000..e9c79c9179
--- /dev/null
+++ b/packages/lib/src/helpers/truncateStart/index.ts
@@ -0,0 +1,18 @@
+interface TruncateStartOptions {
+  length: number;
+  // TODO: Match this interface with lodash options
+  // https://lodash.com/docs/4.17.15#truncate
+}
+
+const defaultTruncateStartOptions = {
+  length: 30,
+} as const;
+
+/** Truncates a string to a given length, starting from the front */
+export const truncateStart = (
+  str: string,
+  { length }: TruncateStartOptions = defaultTruncateStartOptions,
+): string => {
+  if (str.length <= length) return str;
+  return str.substring(str.length - length);
+};
diff --git a/packages/lib/src/helpers/truncateStart/truncateStart.spec.ts b/packages/lib/src/helpers/truncateStart/truncateStart.spec.ts
new file mode 100644
index 0000000000..3ad0898062
--- /dev/null
+++ b/packages/lib/src/helpers/truncateStart/truncateStart.spec.ts
@@ -0,0 +1,11 @@
+import { truncateStart } from '.';
+
+describe('packages/lib/helpers/truncateStart', () => {
+  test('does not truncate when less than maxLength', () => {
+    expect(truncateStart('abc')).toBe('abc');
+  });
+
+  test('truncates to maxLength', () => {
+    expect(truncateStart('abc', { length: 2 })).toBe('bc');
+  });
+});

From e5e90a8aef52cfdb15cee9ab6aac47c6388c3a6c Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Wed, 29 Nov 2023 16:16:32 -0500
Subject: [PATCH 291/351] Date Picker [LG-3811] autocomplete (#2099)

* add autoComplete prop

* update types

* add default

* fix errors

* add bday to autoComplete

* use type

* use type
---
 .../src/DatePicker/DatePicker.stories.tsx     |  3 ++
 .../DateInputSegment/DateInputSegment.tsx     | 11 +++++--
 .../DatePickerContext.spec.tsx                |  3 +-
 .../DatePickerContext/DatePickerContext.tsx   |  4 +++
 .../DatePickerContext.utils.ts                |  8 ++++-
 packages/date-picker/src/shared/types.ts      | 14 +++++++++
 .../getAutoComplete/getAutoComplete.spec.ts   | 30 +++++++++++++++++++
 .../src/shared/utils/getAutoComplete/index.ts | 22 ++++++++++++++
 .../date-picker/src/shared/utils/index.ts     |  1 +
 9 files changed, 90 insertions(+), 6 deletions(-)
 create mode 100644 packages/date-picker/src/shared/utils/getAutoComplete/getAutoComplete.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/getAutoComplete/index.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index d97f8399ea..876d95e0b1 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -13,6 +13,7 @@ import {
   DatePickerProvider,
 } from '../shared/components/DatePickerContext';
 import { Month } from '../shared/constants';
+import { AutoComplete } from '../shared/types';
 import { newUTC } from '../shared/utils';
 import { Locales, TimeZones } from '../shared/utils/testutils';
 
@@ -57,6 +58,7 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
     label: 'Pick a date',
     size: Size.Default,
     timeZone: 'America/New_York',
+    autoComplete: AutoComplete.Off,
   },
   argTypes: {
     baseFontSize: { control: 'select' },
@@ -68,6 +70,7 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
     size: { control: 'select' },
     state: { control: 'select' },
     timeZone: { control: 'select', options: TimeZones },
+    autoComplete: { control: 'select', options: Object.values(AutoComplete) },
   },
 };
 
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 6404c05951..a2b3cc6e9d 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -13,7 +13,7 @@ import {
   defaultMin,
   defaultPlaceholder,
 } from '../../../constants';
-import { getValueFormatter } from '../../../utils';
+import { getAutoComplete, getValueFormatter } from '../../../utils';
 import { useDatePickerContext } from '../../DatePickerContext';
 
 import {
@@ -55,8 +55,13 @@ export const DateInputSegment = React.forwardRef<
 
     const { theme } = useDarkMode();
     const baseFontSize = useUpdatedBaseFontSize();
-    const { size, disabled } = useDatePickerContext();
+    const {
+      size,
+      disabled,
+      autoComplete: autoCompleteProp,
+    } = useDatePickerContext();
     const formatter = getValueFormatter(segment);
+    const autoComplete = getAutoComplete(autoCompleteProp, segment);
     const pattern = `[0-9]{${charsPerSegment[segment]}}`;
 
     /** Prevent non-numeric values from triggering a change event */
@@ -162,7 +167,7 @@ export const DateInputSegment = React.forwardRef<
           segmentSizeStyles[size ?? Size.Default],
           segmentWidthStyles[segment],
         )}
-        // maxLength={maxLength}
+        autoComplete={autoComplete}
       />
     );
   },
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
index ba366b19ab..f0b5864540 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
@@ -1,9 +1,8 @@
 import React, { PropsWithChildren } from 'react';
-import { act, render, waitFor } from '@testing-library/react';
+import { act, waitFor } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 
 import {
-  DatePickerContext,
   DatePickerContextProps,
   DatePickerProvider,
   useDatePickerContext,
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
index 9ef39449ff..a02b4e3002 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
@@ -3,6 +3,8 @@ import { createContext, PropsWithChildren, useContext } from 'react';
 
 import { useIdAllocator } from '@leafygreen-ui/hooks';
 
+import { AutoComplete } from '../../types';
+
 import {
   DatePickerContextProps,
   DatePickerProviderProps,
@@ -25,6 +27,7 @@ export const DatePickerProvider = ({
   children,
   initialOpen = false,
   disabled = false,
+  autoComplete = AutoComplete.Off,
   ...rest
 }: PropsWithChildren<DatePickerProviderProps>) => {
   const isInitiallyOpen = disabled ? false : initialOpen;
@@ -46,6 +49,7 @@ export const DatePickerProvider = ({
         menuId,
         isSelectOpen,
         setIsSelectOpen,
+        autoComplete,
       }}
     >
       {children}
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
index 6ab886530a..0f4d09d5b1 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
@@ -5,7 +5,11 @@ import defaultTo from 'lodash/defaultTo';
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
 import { MAX_DATE, MIN_DATE } from '../../constants';
-import { BaseDatePickerProps, DatePickerState } from '../../types';
+import {
+  AutoComplete,
+  BaseDatePickerProps,
+  DatePickerState,
+} from '../../types';
 import { getFormatParts, toDate } from '../../utils';
 
 import {
@@ -32,6 +36,7 @@ export const contextPropNames: Array<ContextPropKeys> = [
   'state',
   'errorMessage',
   'initialOpen',
+  'autoComplete',
 ];
 
 /** The default context value */
@@ -57,6 +62,7 @@ export const defaultDatePickerContext: DatePickerContextProps = {
   menuId: '',
   isSelectOpen: false,
   setIsSelectOpen: () => {},
+  autoComplete: AutoComplete.Off,
 };
 
 /**
diff --git a/packages/date-picker/src/shared/types.ts b/packages/date-picker/src/shared/types.ts
index 5037e3d4a0..9554ca0e33 100644
--- a/packages/date-picker/src/shared/types.ts
+++ b/packages/date-picker/src/shared/types.ts
@@ -11,6 +11,14 @@ export type DatePickerState =
 export type DateType = Date | null;
 export type DateRangeType = [DateType, DateType];
 
+export const AutoComplete = {
+  Off: 'off',
+  On: 'on',
+  Bday: 'bday',
+} as const;
+
+export type AutoComplete = (typeof AutoComplete)[keyof typeof AutoComplete];
+
 export interface BaseDatePickerProps extends DarkModeProps {
   /**
    * A label for the input
@@ -78,4 +86,10 @@ export interface BaseDatePickerProps extends DarkModeProps {
 
   /** Whether the calendar menu is initially open. Note: The calendar menu will not open if disabled is set to true.  */
   initialOpen?: boolean;
+
+  /**
+   * Whether the input should autofill
+   * @default 'off'
+   */
+  autoComplete?: AutoComplete;
 }
diff --git a/packages/date-picker/src/shared/utils/getAutoComplete/getAutoComplete.spec.ts b/packages/date-picker/src/shared/utils/getAutoComplete/getAutoComplete.spec.ts
new file mode 100644
index 0000000000..5554088278
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getAutoComplete/getAutoComplete.spec.ts
@@ -0,0 +1,30 @@
+import { DateSegment } from '../../hooks';
+import { AutoComplete } from '../../types';
+
+import { getAutoComplete } from '.';
+
+describe('packages/date-picker/utils/getAutoComplete', () => {
+  test('off', () => {
+    expect(getAutoComplete(AutoComplete.Off, DateSegment.Day)).toEqual('off');
+    expect(getAutoComplete(AutoComplete.Off, DateSegment.Month)).toEqual('off');
+    expect(getAutoComplete(AutoComplete.Off, DateSegment.Year)).toEqual('off');
+  });
+
+  test('on', () => {
+    expect(getAutoComplete(AutoComplete.On, DateSegment.Day)).toEqual('on');
+    expect(getAutoComplete(AutoComplete.On, DateSegment.Month)).toEqual('on');
+    expect(getAutoComplete(AutoComplete.On, DateSegment.Year)).toEqual('on');
+  });
+
+  test('bday', () => {
+    expect(getAutoComplete(AutoComplete.Bday, DateSegment.Day)).toEqual(
+      'bday-day',
+    );
+    expect(getAutoComplete(AutoComplete.Bday, DateSegment.Month)).toEqual(
+      'bday-month',
+    );
+    expect(getAutoComplete(AutoComplete.Bday, DateSegment.Year)).toEqual(
+      'bday-year',
+    );
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/getAutoComplete/index.ts b/packages/date-picker/src/shared/utils/getAutoComplete/index.ts
new file mode 100644
index 0000000000..776c693822
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getAutoComplete/index.ts
@@ -0,0 +1,22 @@
+import { DateSegment } from '../../hooks';
+import { AutoComplete } from '../../types';
+
+export const getAutoComplete = (
+  autoComplete: AutoComplete,
+  segment: DateSegment,
+) => {
+  if (autoComplete === AutoComplete.Bday) {
+    switch (segment) {
+      case DateSegment.Day:
+        return 'bday-day';
+
+      case DateSegment.Month:
+        return 'bday-month';
+
+      case DateSegment.Year:
+        return 'bday-year';
+    }
+  }
+
+  return autoComplete;
+};
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index b50746c7ae..7af596c357 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -2,6 +2,7 @@ export { addDaysUTC } from './addDaysUTC';
 export { addMonthsUTC } from './addMonthsUTC';
 export { cloneReverse } from './cloneReverse';
 export { doesSomeSegmentExist } from './doesSomeSegmentExist';
+export { getAutoComplete } from './getAutoComplete';
 export { getDaysInUTCMonth } from './getDaysInUTCMonth';
 export { getFirstEmptySegment } from './getFirstEmptySegment';
 export { getFirstOfMonth } from './getFirstOfMonth';

From 1691394c9eb90bf7be539ea9e711d7480c352c99 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Wed, 29 Nov 2023 17:05:33 -0500
Subject: [PATCH 292/351] update year select aria label

---
 .../DatePickerMenuHeader/DatePickerMenuHeader.tsx              | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
index f4dfd723de..8414236e17 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
@@ -95,6 +95,7 @@ export const DatePickerMenuHeader = forwardRef<
               disabled={!isMonthEnabled(m.long)}
               value={i.toString()}
               key={m.short}
+              aria-label={m.long}
             >
               {m.short}
             </Option>
@@ -113,7 +114,7 @@ export const DatePickerMenuHeader = forwardRef<
           onExited={() => setIsSelectOpen(false)}
         >
           {yearOptions.map(y => (
-            <Option value={y.toString()} key={y}>
+            <Option value={y.toString()} key={y} aria-label={y.toString()}>
               {y}
             </Option>
           ))}

From 057aa0e0cd1966e38abe1877bbc959781d99d14c Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Thu, 30 Nov 2023 13:02:54 -0500
Subject: [PATCH 293/351] fix error icon placement

---
 .../DateInput/DateFormField/DateFormField.styles.ts           | 4 +++-
 .../components/DateInput/DateFormField/DateFormField.tsx      | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.styles.ts b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.styles.ts
index 35d1d682a4..2b9fb94b0e 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.styles.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.styles.ts
@@ -1,5 +1,7 @@
 import { css } from '@leafygreen-ui/emotion';
 
 export const iconButtonStyles = css`
-  margin-inline-end: -8px;
+  svg + button {
+    margin-left: -8px;
+  }
 `;
diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
index 661c4244b4..b268f8451e 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
@@ -5,6 +5,7 @@ import { FormField, FormFieldInputContainer } from '@leafygreen-ui/form-field';
 import { useDatePickerContext } from '../../DatePickerContext';
 import { CalendarButton } from '../CalendarButton';
 
+import { iconButtonStyles } from './DateFormField.styles';
 import { DateFormFieldProps } from './DateFormField.types';
 
 /**
@@ -53,6 +54,7 @@ export const DateFormField = React.forwardRef<
           aria-expanded={isOpen}
           aria-controls={menuId}
           onClick={onInputClick}
+          className={iconButtonStyles}
           contentEnd={
             <CalendarButton
               tabIndex={disabled ? -1 : 0}

From bc8a62a65c02833f035018f3aacddc9003150dc8 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Thu, 30 Nov 2023 13:09:30 -0500
Subject: [PATCH 294/351] increase select width

---
 .../src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
index 242ef409b5..cb4d158628 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
@@ -41,5 +41,5 @@ export const menuCalendarGridStyles = css`
 
 // Hardcoding the width
 export const selectInputWidthStyles = css`
-  width: 68.5px;
+  width: 70px;
 `;

From 0ef6cbd5b53af928bfd2afae99ea04b190269413 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Fri, 1 Dec 2023 11:55:00 -0500
Subject: [PATCH 295/351] Date picker [LG-3834] Internal error handling (#2105)

* Adds internal error handling

* Updates internal validation

* updates validation handling tests

* Restore State prop. Update error message logic

* Create shaggy-falcons-invite.md

* fix types
---
 .changeset/shaggy-falcons-invite.md           |   5 +
 .../src/DatePicker/DatePicker.spec.tsx        | 235 +++++++++++++-----
 .../src/DatePicker/DatePicker.stories.tsx     |  13 +-
 .../src/DatePicker/DatePicker.testutils.tsx   |   2 +-
 .../date-picker/src/DatePicker/DatePicker.tsx |  18 +-
 .../DatePickerComponent.tsx                   |  15 ++
 .../DatePickerInput/DatePickerInput.tsx       |   1 -
 .../DatePickerMenu/DatePickerMenu.spec.tsx    |   2 +-
 .../DatePickerMenu/DatePickerMenu.stories.tsx |  20 +-
 .../SingleDateContext/SingleDateContext.tsx   |  48 +++-
 .../SingleDateContext.types.ts                |   5 +-
 .../DateFormField/DateFormField.stories.tsx   |   3 +-
 .../DateInput/DateFormField/DateFormField.tsx |   5 +-
 .../DatePickerContext/DatePickerContext.tsx   |  16 +-
 .../DatePickerContext.types.ts                |  12 +-
 .../DatePickerContext.utils.ts                |  12 +-
 .../useDatePickerErrorNotifications.ts        |  85 +++++++
 packages/date-picker/src/shared/types.ts      |   2 +-
 .../getFormattedDateString.spec.ts            |  20 ++
 .../utils/getFormattedDateString/index.ts     |  20 ++
 .../date-picker/src/shared/utils/index.ts     |   1 +
 .../newDateFromSegments.spec.ts               |   5 +-
 .../form-field/src/FormField/FormField.tsx    |   3 +
 23 files changed, 445 insertions(+), 103 deletions(-)
 create mode 100644 .changeset/shaggy-falcons-invite.md
 create mode 100644 packages/date-picker/src/shared/components/DatePickerContext/useDatePickerErrorNotifications.ts
 create mode 100644 packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateString.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/getFormattedDateString/index.ts

diff --git a/.changeset/shaggy-falcons-invite.md b/.changeset/shaggy-falcons-invite.md
new file mode 100644
index 0000000000..aae5a58f35
--- /dev/null
+++ b/.changeset/shaggy-falcons-invite.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/form-field': minor
+---
+
+Adds `data-testid` to Label, Description & Error elements
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index daa3de4bdb..69748f0490 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -13,7 +13,12 @@ import { addDays, subDays } from 'date-fns';
 import { transitionDuration } from '@leafygreen-ui/tokens';
 
 import { defaultMax, defaultMin, Month } from '../shared/constants';
-import { getValueFormatter, newUTC } from '../shared/utils';
+import {
+  getFormattedDateString,
+  getValueFormatter,
+  newUTC,
+  setUTCYear,
+} from '../shared/utils';
 import {
   eventContainingTargetValue,
   tabNTimes,
@@ -23,6 +28,7 @@ import {
   expectedTabStopLabels,
   findTabStopElementMap,
   renderDatePicker,
+  RenderDatePickerResult,
   RenderMenuResult,
 } from './DatePicker.testutils';
 import { DatePicker } from '.';
@@ -97,6 +103,107 @@ describe('packages/date-picker', () => {
         expect(monthInput.value).toEqual('12');
         expect(yearInput.value).toEqual('2023');
       });
+
+      describe('Error states', () => {
+        test('renders error state when `state` is "error"', () => {
+          const { getByRole } = render(
+            <DatePicker
+              label="Label"
+              state="error"
+              errorMessage="Custom error message"
+            />,
+          );
+          const inputContainer = getByRole('combobox');
+          expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
+        });
+
+        test('renders with `errorMessage` when provided', () => {
+          const { queryByTestId } = render(
+            <DatePicker
+              label="Label"
+              state="error"
+              errorMessage="Custom error message"
+            />,
+          );
+          const errorElement = queryByTestId('lg-form_field-error_message');
+          expect(errorElement).toBeInTheDocument();
+          expect(errorElement).toHaveTextContent('Custom error message');
+        });
+
+        test('does not render `errorMessage` when state is not set', () => {
+          const { getByRole, queryByTestId } = render(
+            <DatePicker label="Label" errorMessage="Custom error message" />,
+          );
+          const inputContainer = getByRole('combobox');
+          expect(inputContainer).toHaveAttribute('aria-invalid', 'false');
+          const errorElement = queryByTestId('lg-form_field-error_message');
+          expect(errorElement).not.toBeInTheDocument();
+        });
+
+        test('renders with internal error state when value is out of range', () => {
+          const { getByTestId, getByRole } = render(
+            <DatePicker label="Label" value={newUTC(2100, 1, 1)} />,
+          );
+          const inputContainer = getByRole('combobox');
+          expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
+
+          const errorElement = getByTestId('lg-form_field-error_message');
+          expect(errorElement).toBeInTheDocument();
+          expect(errorElement).toHaveTextContent(
+            'Date must be before 2038-01-19',
+          );
+        });
+
+        test('external error message overrides internal error message', () => {
+          const { getByTestId, getByRole } = renderDatePicker({
+            value: newUTC(2100, 1, 1),
+            state: 'error',
+            errorMessage: 'Custom error message',
+          });
+          const inputContainer = getByRole('combobox');
+          expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
+
+          const errorElement = getByTestId('lg-form_field-error_message');
+          expect(errorElement).toBeInTheDocument();
+          expect(errorElement).toHaveTextContent('Custom error message');
+        });
+
+        test('renders internal message if external error message is not set', () => {
+          const { inputContainer, getByTestId } = renderDatePicker({
+            value: newUTC(2100, 1, 1),
+            state: 'error',
+            errorMessage: undefined,
+          });
+          expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
+          expect(getByTestId('lg-form_field-error_message')).toHaveTextContent(
+            'Date must be before 2038-01-19',
+          );
+        });
+
+        test('removing an external error displays an internal error when applicable', () => {
+          const { inputContainer, rerenderDatePicker, getByTestId } =
+            renderDatePicker({
+              value: newUTC(2100, 1, 1),
+            });
+          expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
+          expect(getByTestId('lg-form_field-error_message')).toHaveTextContent(
+            'Date must be before 2038-01-19',
+          );
+
+          rerenderDatePicker({ errorMessage: 'Some error', state: 'error' });
+
+          expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
+          expect(getByTestId('lg-form_field-error_message')).toHaveTextContent(
+            'Some error',
+          );
+
+          rerenderDatePicker({ state: 'none' });
+          expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
+          expect(getByTestId('lg-form_field-error_message')).toHaveTextContent(
+            'Date must be before 2038-01-19',
+          );
+        });
+      });
     });
 
     describe('Menu', () => {
@@ -894,81 +1001,81 @@ describe('packages/date-picker', () => {
               });
 
               describe('if new value would be out of range', () => {
-                test('updates the input', () => {
-                  const min = newUTC(1999, Month.July, 4);
-                  const max = newUTC(2020, Month.July, 4);
-                  const value =
-                    key === 'arrowup'
-                      ? newUTC(2019, Month.August, 1)
-                      : newUTC(2000, Month.June, 30);
-                  const { yearInput } = renderDatePicker({
+                const onDateChange = jest.fn();
+                const onSegmentChange = jest.fn();
+                const handleValidation = jest.fn();
+                const min = newUTC(1999, Month.July, 4);
+                const max = newUTC(2020, Month.July, 4);
+                const startValue =
+                  key === 'arrowup'
+                    ? newUTC(2019, Month.August, 1)
+                    : newUTC(2000, Month.June, 30);
+                const newYearVal = getValueFormatter('year')(
+                  key === 'arrowup' ? 2020 : 1999,
+                );
+                const expectedMessage =
+                  key === 'arrowup'
+                    ? `Date must be before ${getFormattedDateString(
+                        max,
+                        'iso8601',
+                      )}`
+                    : `Date must be after ${getFormattedDateString(
+                        min,
+                        'iso8601',
+                      )}`;
+                let renderResult: RenderDatePickerResult;
+
+                beforeEach(() => {
+                  onDateChange.mockReset();
+                  onSegmentChange.mockReset();
+                  handleValidation.mockReset();
+
+                  renderResult = renderDatePicker({
                     min,
                     max,
-                    value,
+                    value: startValue,
+                    onDateChange,
+                    onChange: onSegmentChange,
+                    handleValidation,
                   });
-                  userEvent.click(yearInput);
+                  userEvent.click(renderResult.yearInput);
                   userEvent.keyboard(`{${key}}`);
-                  const expectedYearVal = getValueFormatter('year')(
-                    key === 'arrowup' ? 2020 : 1999,
-                  );
-                  expect(yearInput).toHaveValue(expectedYearVal);
+                });
+
+                test('updates the input', () => {
+                  expect(renderResult.yearInput).toHaveValue(newYearVal);
                 });
 
                 test('fires the change handler', () => {
-                  const onDateChange = jest.fn();
-                  const min = newUTC(1999, Month.July, 4);
-                  const max = newUTC(2020, Month.July, 4);
-                  const value =
-                    key === 'arrowup'
-                      ? newUTC(2019, Month.August, 1)
-                      : newUTC(2000, Month.June, 30);
-                  const { yearInput } = renderDatePicker({
-                    min,
-                    max,
-                    onDateChange,
-                    value,
-                  });
-                  userEvent.click(yearInput);
-                  userEvent.keyboard(`{${key}}`);
-                  expect(onDateChange).toHaveBeenCalled();
+                  expect(onDateChange).toHaveBeenCalledWith(
+                    setUTCYear(startValue, Number(newYearVal)),
+                  );
                 });
 
                 test('fires the segment change handler', () => {
-                  const onChange = jest.fn();
-                  const min = newUTC(1999, Month.July, 4);
-                  const max = newUTC(2020, Month.July, 4);
-                  const value =
-                    key === 'arrowup'
-                      ? newUTC(2019, Month.August, 1)
-                      : newUTC(2000, Month.June, 30);
-                  const { yearInput } = renderDatePicker({
-                    min,
-                    max,
-                    onChange,
-                    value,
-                  });
-                  userEvent.click(yearInput);
-                  userEvent.keyboard(`{${key}}`);
-                  expect(onChange).toHaveBeenCalled();
+                  expect(onSegmentChange).toHaveBeenCalledWith(
+                    eventContainingTargetValue(newYearVal),
+                  );
                 });
 
-                test.skip('fires the validation handler', () => {
-                  const handleValidation = jest.fn();
-                  const min = newUTC(1999, Month.July, 4);
-                  const max = newUTC(2020, Month.July, 4);
-                  const value =
-                    key === 'arrowup'
-                      ? newUTC(2019, Month.August, 1)
-                      : newUTC(2000, Month.June, 30);
-                  const { yearInput } = renderDatePicker({
-                    min,
-                    max,
-                    handleValidation,
-                    value,
-                  });
-                  userEvent.click(yearInput);
-                  userEvent.keyboard(`{${key}}`);
-                  expect(handleValidation).toHaveBeenCalled();
+                test('fires the validation handler', () => {
+                  expect(handleValidation).toHaveBeenCalledWith(
+                    setUTCYear(startValue, Number(newYearVal)),
+                  );
+                });
+
+                test('sets aria-invalid', () => {
+                  expect(renderResult.inputContainer).toHaveAttribute(
+                    'aria-invalid',
+                    'true',
+                  );
+                });
+
+                test('sets error message', () => {
+                  const errorMessageElement = within(
+                    renderResult.formField,
+                  ).queryByText(expectedMessage);
+                  expect(errorMessageElement).toBeInTheDocument();
                 });
               });
             });
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index 876d95e0b1..9f138e13e6 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -38,6 +38,7 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
         'handleValidation',
         'initialValue',
         'onChange',
+        'onDateChange',
         'onSegmentChange',
         'value',
       ],
@@ -79,7 +80,17 @@ export default meta;
 export const Basic: StoryFn<typeof DatePicker> = props => {
   const [value, setValue] = useState<Date | null | undefined>();
 
-  return <DatePicker {...props} value={value} onDateChange={setValue} />;
+  return (
+    <DatePicker
+      {...props}
+      value={value}
+      onDateChange={setValue}
+      handleValidation={date =>
+        // eslint-disable-next-line no-console
+        console.log('Storybook: handleValidation', { date })
+      }
+    />
+  );
 };
 
 export const Uncontrolled: StoryFn<typeof DatePicker> = props => {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index b8c62f35a6..79be8ecade 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -19,7 +19,7 @@ const withinElement = (element: HTMLElement | null) => {
   return element ? within(element) : null;
 };
 
-interface RenderDatePickerResult extends RenderResult {
+export interface RenderDatePickerResult extends RenderResult {
   formField: HTMLElement;
   inputContainer: HTMLElement;
   dayInput: HTMLInputElement;
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 8263745973..785db86434 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -7,6 +7,7 @@ import { BaseFontSize } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
 import {
+  ContextPropKeys,
   contextPropNames,
   DatePickerProvider,
 } from '../shared/components/DatePickerContext';
@@ -29,16 +30,17 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       handleValidation,
       darkMode: darkModeProp,
       baseFontSize: basefontSizeProp,
+      state,
       ...props
     }: DatePickerProps,
     fwdRef,
   ) => {
     const { darkMode } = useDarkMode(darkModeProp);
     const baseFontSize = useUpdatedBaseFontSize(basefontSizeProp);
-    const [contextProps, restProps] = pickAndOmit(
-      { darkMode, baseFontSize, ...props },
-      contextPropNames,
-    );
+    const [contextProps, componentProps] = pickAndOmit<
+      DatePickerProps,
+      ContextPropKeys
+    >({ ...props }, contextPropNames);
 
     const { value, setValue } = useControlledValue(
       valueProp,
@@ -47,7 +49,11 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     );
 
     return (
-      <DatePickerProvider {...contextProps}>
+      <DatePickerProvider
+        darkMode={darkMode}
+        baseFontSize={baseFontSize}
+        {...contextProps}
+      >
         <SingleDateProvider
           value={value}
           setValue={setValue}
@@ -59,7 +65,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               baseFontSize === BaseFontSize.Body1 ? 14 : baseFontSize
             }
           >
-            <DatePickerComponent ref={fwdRef} {...restProps} />
+            <DatePickerComponent ref={fwdRef} {...componentProps} />
           </LeafyGreenProvider>
         </SingleDateProvider>
       </DatePickerProvider>
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
index 75c30c5134..69d2add4b8 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
@@ -6,6 +6,7 @@ import React, {
   useRef,
 } from 'react';
 import { ExitHandler } from 'react-transition-group/Transition';
+import isEqual from 'lodash/isEqual';
 
 import {
   useBackdropClick,
@@ -15,6 +16,7 @@ import {
 import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../shared/components/DatePickerContext';
+import { isSameUTCDay } from '../../shared/utils';
 import { DatePickerInput } from '../DatePickerInput';
 import { DatePickerMenu } from '../DatePickerMenu';
 import { useSingleDateContext } from '../SingleDateContext';
@@ -35,6 +37,8 @@ export const DatePickerComponent = forwardRef<
     getHighlightedCell,
   } = useSingleDateContext();
 
+  const prevValue = usePrevious(value);
+
   const formFieldRef = useForwardedRef(fwdRef, null);
   const menuRef = useRef<HTMLDivElement>(null);
   const prevDisabledValue = usePrevious(disabled);
@@ -106,6 +110,17 @@ export const DatePickerComponent = forwardRef<
     }
   };
 
+  /**
+   * Side Effects
+   */
+
+  /** When value changes, validate it */
+  useEffect(() => {
+    if (!isEqual(prevValue, value) && !isSameUTCDay(prevValue, value)) {
+      handleValidation(value);
+    }
+  }, [handleValidation, prevValue, value]);
+
   return (
     <>
       <DatePickerInput
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 68451e8610..4bea4e83e0 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -49,7 +49,6 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       if (!isSameUTCDay(inputVal, value)) {
         handleValidation?.(inputVal);
         setValue(inputVal || null);
-        // TODO: update month?
       }
     };
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index b55b036eb6..8cb5ac6313 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -199,7 +199,7 @@ describe('packages/date-picker/date-picker-menu', () => {
         expect(isEveryCellDisabled).toBe(true);
       });
 
-      test('doest not highlight a cell', () => {
+      test("doesn't not highlight a cell", () => {
         const { calendarCells } = renderDatePickerMenu(null, {
           value: newUTC(2048, Month.December, 25),
         });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 833c4a3417..4fe86d820e 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -6,20 +6,22 @@ import { last, omit } from 'lodash';
 import MockDate from 'mockdate';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
-import { StoryMetaType } from '@leafygreen-ui/lib';
+import { type StoryMetaType } from '@leafygreen-ui/lib';
 import { transitionDuration } from '@leafygreen-ui/tokens';
 import { InlineCode } from '@leafygreen-ui/typography';
 
 import {
+  type ContextPropKeys,
   contextPropNames,
-  DatePickerContextProps,
+  type DatePickerContextProps,
   DatePickerProvider,
   defaultDatePickerContext,
 } from '../../shared/components/DatePickerContext';
 import { Month } from '../../shared/constants';
 import { newUTC, pickAndOmit } from '../../shared/utils';
+import { DatePickerProps } from '../DatePicker.types';
 import {
-  SingleDateContextProps,
+  type SingleDateContextProps,
   SingleDateProvider,
 } from '../SingleDateContext';
 
@@ -32,10 +34,10 @@ type DecoratorArgs = DatePickerMenuProps &
   DatePickerContextProps;
 
 const MenuDecorator: Decorator = (Story: StoryFn, ctx: any) => {
-  const [{ darkMode, ...contextProps }, { ...props }] = pickAndOmit(
-    ctx?.args as DecoratorArgs,
-    [...contextPropNames],
-  );
+  const [{ darkMode, ...providerProps }, componentProps] = pickAndOmit<
+    DatePickerProps,
+    ContextPropKeys
+  >(ctx?.args, contextPropNames);
 
   // Force `new Date()` to return `mockToday`
   MockDate.set(mockToday);
@@ -44,10 +46,10 @@ const MenuDecorator: Decorator = (Story: StoryFn, ctx: any) => {
     <LeafyGreenProvider darkMode={darkMode}>
       <DatePickerProvider
         {...defaultDatePickerContext}
-        {...contextProps}
+        {...providerProps}
         initialOpen={true}
       >
-        <Story {...props} />
+        <Story {...componentProps} />
       </DatePickerProvider>
     </LeafyGreenProvider>
   );
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
index cae6bcadda..45fc0d2611 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
@@ -17,7 +17,12 @@ import {
   setToUTCMidnight,
   useDatePickerContext,
 } from '../../shared';
-import { getISODate, isSameUTCDay } from '../../shared/utils';
+import {
+  getFormattedDateString,
+  getISODate,
+  isOnOrBefore,
+  isSameUTCDay,
+} from '../../shared/utils';
 import { getInitialHighlight } from '../utils/getInitialHighlight';
 
 import {
@@ -37,10 +42,20 @@ export const SingleDateProvider = ({
   children,
   value,
   setValue: _setValue,
-  handleValidation,
+  handleValidation: _handleValidation,
 }: PropsWithChildren<SingleDateProviderProps>) => {
   const refs = useDateRangeComponentRefs();
-  const { isOpen, setOpen, disabled } = useDatePickerContext();
+  const {
+    isOpen,
+    setOpen,
+    disabled,
+    min,
+    max,
+    dateFormat,
+    setInternalErrorMessage,
+    clearInternalErrorMessage,
+    isInRange,
+  } = useDatePickerContext();
   const prevValue = usePrevious(value);
 
   const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
@@ -83,7 +98,32 @@ export const SingleDateProvider = ({
     _setHighlight(newHighlight);
   }, []);
 
-  /** Track the event that last triggered the menu to open/close */
+  /**
+   * Handles internal validation,
+   * and calls the provided `handleValidation` callback
+   */
+  const handleValidation = (val?: DateType) => {
+    // Set an internal error state if necessary
+    if (val && !isInRange(val)) {
+      if (isOnOrBefore(val, min)) {
+        setInternalErrorMessage(
+          `Date must be after ${getFormattedDateString(min, dateFormat)}`,
+        );
+      } else {
+        setInternalErrorMessage(
+          `Date must be before ${getFormattedDateString(max, dateFormat)}`,
+        );
+      }
+    } else {
+      clearInternalErrorMessage();
+    }
+
+    _handleValidation?.(val);
+  };
+
+  /**
+   * Track the event that last triggered the menu to open/close
+   */
   const [menuTriggerEvent, setMenuTriggerEvent] = useState<SyntheticEvent>();
 
   /**
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
index 2291096044..70d746dc6c 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
@@ -27,9 +27,10 @@ export interface SingleDateContextProps {
   setValue: (newVal: DateType | undefined) => void;
 
   /**
-   * Calls the `handleValidation` function provided by the consumer
+   * Performs internal validation, and
+   * calls the `handleValidation` function provided by the consumer
    */
-  handleValidation: DatePickerProps['handleValidation'];
+  handleValidation: Required<DatePickerProps>['handleValidation'];
 
   /**
    * The current date, at UTC midnight
diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
index 06a2194fa0..5f58e42c3c 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
@@ -30,7 +30,7 @@ const meta: StoryMetaType<
         darkMode: [false, true],
         label: ['Label', undefined],
         description: [undefined, 'Description'],
-        state: Object.values(DatePickerState),
+        // state: Object.values(DatePickerState),
         disabled: [false, true],
       },
       excludeCombinations: [
@@ -72,7 +72,6 @@ const meta: StoryMetaType<
   args: {
     label: 'Label',
     description: 'Description',
-    state: DatePickerState.Error,
     errorMessage: 'This is an error message',
   },
   argTypes: {
diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
index b268f8451e..0d0f46dbd4 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { FormField, FormFieldInputContainer } from '@leafygreen-ui/form-field';
 
+import { DatePickerState } from '../../../types';
 import { useDatePickerContext } from '../../DatePickerContext';
 import { CalendarButton } from '../CalendarButton';
 
@@ -29,8 +30,7 @@ export const DateFormField = React.forwardRef<
     const {
       label,
       description,
-      state,
-      errorMessage,
+      stateNotification: { state, message: errorMessage },
       disabled,
       isOpen,
       menuId,
@@ -53,6 +53,7 @@ export const DateFormField = React.forwardRef<
           tabIndex={-1}
           aria-expanded={isOpen}
           aria-controls={menuId}
+          aria-invalid={state === DatePickerState.Error}
           onClick={onInputClick}
           className={iconButtonStyles}
           contentEnd={
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
index a02b4e3002..18832e4711 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
@@ -13,6 +13,7 @@ import {
   defaultDatePickerContext,
   getContextProps,
 } from './DatePickerContext.utils';
+import { useDatePickerErrorNotifications } from './useDatePickerErrorNotifications';
 
 /** Create the DatePickerContext */
 export const DatePickerContext = createContext<DatePickerContextProps>(
@@ -27,28 +28,41 @@ export const DatePickerProvider = ({
   children,
   initialOpen = false,
   disabled = false,
+  errorMessage,
+  state,
   autoComplete = AutoComplete.Off,
   ...rest
 }: PropsWithChildren<DatePickerProviderProps>) => {
   const isInitiallyOpen = disabled ? false : initialOpen;
+
   const [isOpen, setOpen] = useState<boolean>(isInitiallyOpen);
   const [isDirty, setIsDirty] = useState(false);
   const [isSelectOpen, setIsSelectOpen] = useState(false);
   const menuId = useIdAllocator({ prefix: 'lg-date-picker-menu' });
   const contextValue = getContextProps(rest);
 
+  /** Error state handling */
+  const {
+    stateNotification,
+    setInternalErrorMessage,
+    clearInternalErrorMessage,
+  } = useDatePickerErrorNotifications(state, errorMessage);
+
   return (
     <DatePickerContext.Provider
       value={{
         ...contextValue,
         disabled,
+        menuId,
         isOpen,
         setOpen,
         isDirty,
         setIsDirty,
-        menuId,
         isSelectOpen,
         setIsSelectOpen,
+        stateNotification,
+        setInternalErrorMessage,
+        clearInternalErrorMessage,
         autoComplete,
       }}
     >
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
index 60025af5a2..4d14cf30c8 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
@@ -1,4 +1,11 @@
-import { BaseDatePickerProps } from '../../types';
+import { BaseDatePickerProps, DatePickerState } from '../../types';
+
+import { UseDatePickerErrorNotificationsReturnObject } from './useDatePickerErrorNotifications';
+
+export interface StateNotification {
+  state: DatePickerState;
+  message: string;
+}
 
 /** The props expected to pass int the provider */
 export interface DatePickerProviderProps extends BaseDatePickerProps {}
@@ -7,7 +14,8 @@ export interface DatePickerProviderProps extends BaseDatePickerProps {}
  * The values in context
  */
 export interface DatePickerContextProps
-  extends Required<DatePickerProviderProps> {
+  extends Omit<Required<DatePickerProviderProps>, 'state'>,
+    UseDatePickerErrorNotificationsReturnObject {
   /** The earliest date accepted */
   min: Date;
 
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
index 0f4d09d5b1..d3e18aba67 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
@@ -22,7 +22,9 @@ export const TZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
 export type ContextPropKeys = keyof DatePickerProviderProps &
   keyof BaseDatePickerProps;
 
-/** Prop names that are in both DatePickerProps and DatePickerProviderProps */
+/**
+ * Prop names that are in both DatePickerProps and DatePickerProviderProps
+ * */
 export const contextPropNames: Array<ContextPropKeys> = [
   'label',
   'description',
@@ -33,7 +35,6 @@ export const contextPropNames: Array<ContextPropKeys> = [
   'baseFontSize',
   'disabled',
   'size',
-  'state',
   'errorMessage',
   'initialOpen',
   'autoComplete',
@@ -55,13 +56,18 @@ export const defaultDatePickerContext: DatePickerContextProps = {
   isInRange: () => true,
   disabled: false,
   size: Size.Default,
-  state: DatePickerState.None,
   errorMessage: '',
   baseFontSize: BaseFontSize.Body1,
   darkMode: false,
   menuId: '',
   isSelectOpen: false,
   setIsSelectOpen: () => {},
+  stateNotification: {
+    state: DatePickerState.None,
+    message: '',
+  },
+  setInternalErrorMessage: () => {},
+  clearInternalErrorMessage: () => {},
   autoComplete: AutoComplete.Off,
 };
 
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/useDatePickerErrorNotifications.ts b/packages/date-picker/src/shared/components/DatePickerContext/useDatePickerErrorNotifications.ts
new file mode 100644
index 0000000000..1b4dce2bdd
--- /dev/null
+++ b/packages/date-picker/src/shared/components/DatePickerContext/useDatePickerErrorNotifications.ts
@@ -0,0 +1,85 @@
+import { useMemo, useState } from 'react';
+
+import { DatePickerState } from '../../types';
+
+import { StateNotification } from './DatePickerContext.types';
+
+export interface UseDatePickerErrorNotificationsReturnObject {
+  stateNotification: StateNotification;
+  setInternalErrorMessage: (msg: string) => void;
+  clearInternalErrorMessage: () => void;
+}
+
+export const useDatePickerErrorNotifications = (
+  externalState?: DatePickerState,
+  externalErrorMessage?: string,
+): UseDatePickerErrorNotificationsReturnObject => {
+  /**
+   * An external state notification object,
+   * updated when the external message or state prop changes
+   */
+  const externalStateNotification = useMemo<StateNotification>(() => {
+    const state = externalState ?? DatePickerState.None;
+    const message =
+      externalState === DatePickerState.Error ? externalErrorMessage ?? '' : '';
+
+    return {
+      state,
+      message,
+    };
+  }, [externalErrorMessage, externalState]);
+
+  /**
+   * An internal state notification used to handle internal validation (e.g. if date is in range)
+   */
+  const [internalStateNotification, setInternalStateNotification] =
+    useState<StateNotification>({
+      state: DatePickerState.None,
+      message: '',
+    });
+
+  /**
+   * Removes the internal error message
+   */
+  const clearInternalErrorMessage = () => {
+    setInternalStateNotification({
+      state: DatePickerState.None,
+      message: '',
+    });
+  };
+
+  /**
+   * Sets an internal error message
+   */
+  const setInternalErrorMessage = (msg: string) => {
+    setInternalStateNotification({
+      state: DatePickerState.Error,
+      message: msg,
+    });
+  };
+
+  /**
+   * Calculate the stateNotification to use based on external & internal states.
+   * External errors take precedence over internal errors.
+   */
+  const stateNotification = useMemo<StateNotification>(() => {
+    if (externalStateNotification.state === DatePickerState.Error) {
+      if (
+        !externalStateNotification.message &&
+        internalStateNotification.state === DatePickerState.Error
+      ) {
+        return internalStateNotification;
+      } else {
+        return externalStateNotification;
+      }
+    } else {
+      return internalStateNotification;
+    }
+  }, [externalStateNotification, internalStateNotification]);
+
+  return {
+    stateNotification,
+    setInternalErrorMessage,
+    clearInternalErrorMessage,
+  };
+};
diff --git a/packages/date-picker/src/shared/types.ts b/packages/date-picker/src/shared/types.ts
index 9554ca0e33..12ec6dd42c 100644
--- a/packages/date-picker/src/shared/types.ts
+++ b/packages/date-picker/src/shared/types.ts
@@ -80,7 +80,7 @@ export interface BaseDatePickerProps extends DarkModeProps {
   state?: DatePickerState;
 
   /**
-   * A message to show in red underneath the input when in an error state
+   * A message to show in red underneath the input when state is Error
    */
   errorMessage?: string;
 
diff --git a/packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateString.spec.ts b/packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateString.spec.ts
new file mode 100644
index 0000000000..e8ef14cd6e
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateString.spec.ts
@@ -0,0 +1,20 @@
+import { Month } from '../../constants';
+import { newUTC } from '../newUTC';
+
+import { getFormattedDateString } from '.';
+
+describe('packages/date-picker/utils/getFormattedDateString', () => {
+  const testDate = newUTC(1967, Month.May, 2);
+  test('iso8601', () => {
+    expect(getFormattedDateString(testDate, 'iso8601')).toBe('1967-05-02');
+  });
+  test('en-US', () => {
+    expect(getFormattedDateString(testDate, 'en-US')).toBe('05/02/1967');
+  });
+  test('en-UK', () => {
+    expect(getFormattedDateString(testDate, 'en-UK')).toBe('02/05/1967');
+  });
+  test('invalid locale', () => {
+    expect(getFormattedDateString(testDate, 'asdf')).toBeUndefined();
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/getFormattedDateString/index.ts b/packages/date-picker/src/shared/utils/getFormattedDateString/index.ts
new file mode 100644
index 0000000000..1b9e477976
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getFormattedDateString/index.ts
@@ -0,0 +1,20 @@
+import { DateSegment } from '../../hooks';
+import { getFormatParts } from '../getFormatParts';
+import { getFormattedSegmentsFromDate } from '../getSegmentsFromDate';
+
+export const getFormattedDateString = (date: Date, locale: string) => {
+  const formatParts = getFormatParts(locale);
+  const dateSegments = getFormattedSegmentsFromDate(date);
+
+  // Note: looping through `formatParts`, instead of using `Intl.DateTimeFormat(locale).format(date)`
+  // since the locale `iso8601` does not return a valid formatter
+  const formattedDate = formatParts?.reduce((dateString, part) => {
+    const partString =
+      part.type === 'literal'
+        ? part.value
+        : dateSegments[part.type as DateSegment];
+    return dateString + partString;
+  }, '');
+
+  return formattedDate;
+};
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index 7af596c357..34d47e9cc5 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -7,6 +7,7 @@ export { getDaysInUTCMonth } from './getDaysInUTCMonth';
 export { getFirstEmptySegment } from './getFirstEmptySegment';
 export { getFirstOfMonth } from './getFirstOfMonth';
 export { getFormatParts, getFormatter } from './getFormatParts';
+export { getFormattedDateString } from './getFormattedDateString';
 export { getFullMonthLabel } from './getFullMonthLabel';
 export { getISODate } from './getISODate';
 export { getLastOfMonth } from './getLastOfMonth';
diff --git a/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
index 25943036ab..132a6bdd3a 100644
--- a/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
@@ -19,7 +19,6 @@ describe('packages/date=picker/utils/newDateFromSegments', () => {
     expect(newDate?.toISOString()).toEqual('2100-01-01T00:00:00.000Z');
   });
 
-  // FIXME:
   test.skip('returns undefined if month/day combo is invalid', () => {
     const newDate = newDateFromSegments({
       day: '31',
@@ -30,9 +29,9 @@ describe('packages/date=picker/utils/newDateFromSegments', () => {
     expect(newDate).toBeUndefined();
   });
 
-  test('returns undefined if any segment is undefined', () => {
+  test('returns undefined if any segment is empty', () => {
     const newDate = newDateFromSegments({
-      day: undefined,
+      day: '',
       month: '1',
       year: '2023',
     });
diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
index 72825b9903..042c6aa8b1 100644
--- a/packages/form-field/src/FormField/FormField.tsx
+++ b/packages/form-field/src/FormField/FormField.tsx
@@ -65,6 +65,7 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
             <div className={labelTextContainerStyle}>
               {label && (
                 <Label
+                  data-testid="lg-form_field-label"
                   className={getFontSize({ baseFontSize, size })}
                   htmlFor={inputId}
                   id={labelId}
@@ -75,6 +76,7 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
               )}
               {description && (
                 <Description
+                  data-testid="lg-form_field-description"
                   className={getFontSize({ baseFontSize, size })}
                   id={descriptionId}
                   disabled={disabled}
@@ -87,6 +89,7 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
             <div className={errorTextContainerStyle}>
               {state === FormFieldState.Error && !disabled && (
                 <Error
+                  data-testid="lg-form_field-error_message"
                   className={getFontSize({ baseFontSize, size })}
                   id={errorId}
                 >

From 6807d66bac1fe3f3d5b8cb29f68ffbe0d20fb4d8 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 1 Dec 2023 12:25:30 -0500
Subject: [PATCH 296/351] fixes newDateFromSegments util

---
 .../utils/isValidValueForSegment/index.ts     | 20 ++++++++++-----
 .../shared/utils/newDateFromSegments/index.ts | 25 +++++++++++--------
 .../newDateFromSegments.spec.ts               |  2 +-
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts b/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
index ce77c99f94..ed13b57e96 100644
--- a/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
+++ b/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
@@ -6,15 +6,23 @@ import { isValidSegmentName, isValidSegmentValue } from '../isValidSegment';
 
 /**
  * Returns whether a value is valid for a given segment type
- * @deprecated
  */
 export const isValidValueForSegment = (
   segment: DateSegment,
   value: DateSegmentValue,
 ): boolean => {
-  if (!(isValidSegmentValue(value) && isValidSegmentName(segment)))
-    return false;
-  return segment === 'year'
-    ? true // Any year number is valid
-    : inRange(Number(value), defaultMin[segment], defaultMax[segment] + 1);
+  const isValidSegmentAndValue =
+    isValidSegmentValue(value) && isValidSegmentName(segment);
+
+  if (segment === 'year') {
+    return isValidSegmentAndValue;
+  }
+
+  const isInRange = inRange(
+    Number(value),
+    defaultMin[segment],
+    defaultMax[segment] + 1,
+  );
+
+  return isValidSegmentAndValue && isInRange;
 };
diff --git a/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
index 829cd8977c..6e3ea86ca3 100644
--- a/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
@@ -1,5 +1,5 @@
 import { DateSegmentsState } from '../../hooks';
-import { isValidSegmentName, isValidSegmentValue } from '../isValidSegment';
+import { isValidSegmentName } from '../isValidSegment';
 import { isValidValueForSegment } from '../isValidValueForSegment';
 import { newUTC } from '../newUTC';
 
@@ -7,16 +7,19 @@ import { newUTC } from '../newUTC';
 export const newDateFromSegments = (
   segments: DateSegmentsState,
 ): Date | undefined => {
-  if (
-    segments &&
-    Object.entries(segments).every(
-      ([key, value]) =>
-        isValidSegmentName(key) &&
-        isValidSegmentValue(value) &&
-        isValidValueForSegment(key, value),
-    )
-  ) {
+  const isEverySegmentValid = Object.entries(segments).every(
+    ([key, value]) =>
+      isValidSegmentName(key) && isValidValueForSegment(key, value),
+  );
+
+  if (isEverySegmentValid) {
     const { day, month, year } = segments;
-    return newUTC(Number(year), Number(month) - 1, Number(day));
+    const newDate = newUTC(Number(year), Number(month) - 1, Number(day));
+    // If day > daysInMonth, then the month will roll-over
+    const isCorrectMonth = newDate.getUTCMonth() === Number(month) - 1;
+
+    if (isCorrectMonth) {
+      return newDate;
+    }
   }
 };
diff --git a/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
index 132a6bdd3a..b5783691f7 100644
--- a/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
@@ -19,7 +19,7 @@ describe('packages/date=picker/utils/newDateFromSegments', () => {
     expect(newDate?.toISOString()).toEqual('2100-01-01T00:00:00.000Z');
   });
 
-  test.skip('returns undefined if month/day combo is invalid', () => {
+  test('returns undefined if month/day combo is invalid', () => {
     const newDate = newDateFromSegments({
       day: '31',
       month: '02',

From 377db14d1e2ec9f2a42e4e446ea7b3b35639abcc Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 1 Dec 2023 12:44:31 -0500
Subject: [PATCH 297/351] restores `state` to contextPropNames

---
 packages/date-picker/src/DatePicker/DatePicker.tsx               | 1 -
 .../components/DatePickerContext/DatePickerContext.utils.ts      | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 785db86434..10f99497fa 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -30,7 +30,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       handleValidation,
       darkMode: darkModeProp,
       baseFontSize: basefontSizeProp,
-      state,
       ...props
     }: DatePickerProps,
     fwdRef,
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
index d3e18aba67..efff263f35 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
@@ -37,6 +37,7 @@ export const contextPropNames: Array<ContextPropKeys> = [
   'size',
   'errorMessage',
   'initialOpen',
+  'state',
   'autoComplete',
 ];
 

From 33f1303f061bb9df009663364a0d03f13b838e27 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Fri, 1 Dec 2023 14:53:33 -0500
Subject: [PATCH 298/351] Date picker [LG-3847] Restrict year input auto-format
 (#2107)

* updates stories

* Update DatePicker.spec.tsx

* Update isValidValueForSegment > only 4-digit years
---
 .../src/DatePicker/DatePicker.spec.tsx        | 50 +++++++++++++++-
 .../src/DatePicker/DatePicker.stories.tsx     | 27 +++++----
 .../src/DatePicker/DatePicker.testutils.tsx   | 23 +++++++-
 .../DatePickerInput.stories.tsx               | 37 +++++++-----
 .../DatePickerMenu/DatePickerMenu.stories.tsx | 16 +++--
 .../DateInputBox/DateInputBox.stories.tsx     | 58 +++++++++++--------
 .../DateInput/DateInputBox/DateInputBox.tsx   | 21 +++----
 .../utils/isValidValueForSegment/index.ts     |  3 +-
 .../isValidValueForSegment.spec.ts            |  9 ++-
 .../newDateFromSegments.spec.ts               | 18 ++++++
 10 files changed, 188 insertions(+), 74 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 69748f0490..bf503ec1e1 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1150,7 +1150,7 @@ describe('packages/date-picker', () => {
           );
         });
 
-        test('segment value is not immediately formatted', () => {
+        test('does not immediately format the segment', () => {
           const onChange = jest.fn();
           const { dayInput } = renderDatePicker({ onChange });
           userEvent.type(dayInput, '2');
@@ -1160,7 +1160,7 @@ describe('packages/date-picker', () => {
           expect(dayInput.value).toBe('2');
         });
 
-        test('segment value is formatted on segment blur', () => {
+        test('formats on segment blur', () => {
           const onChange = jest.fn();
           const { dayInput } = renderDatePicker({ onChange });
           userEvent.type(dayInput, '2');
@@ -1345,6 +1345,52 @@ describe('packages/date-picker', () => {
         });
       });
 
+      describe('updating a segment', () => {
+        test('clearing the segment updates the input', () => {
+          const { yearInput, monthInput, dayInput } = renderDatePicker({});
+          userEvent.type(yearInput, '2020');
+          userEvent.type(monthInput, '7');
+          userEvent.type(dayInput, '4');
+
+          yearInput.setSelectionRange(0, 4);
+          userEvent.type(yearInput, '{backspace}');
+          expect(yearInput).toHaveValue('');
+        });
+
+        test('clearing and typing a new value does not format the input', () => {
+          const { yearInput, monthInput, dayInput } = renderDatePicker({});
+          userEvent.type(yearInput, '2020');
+          userEvent.type(monthInput, '7');
+          userEvent.type(dayInput, '4');
+
+          yearInput.setSelectionRange(0, 4);
+          userEvent.type(yearInput, '{backspace}');
+          userEvent.type(yearInput, '2');
+          expect(yearInput).toHaveValue('2');
+        });
+
+        test('deleting characters does not format the segment', () => {
+          const { yearInput, monthInput, dayInput } = renderDatePicker({});
+          userEvent.type(yearInput, '2020');
+          userEvent.type(monthInput, '7');
+          userEvent.type(dayInput, '4');
+
+          userEvent.type(yearInput, '{backspace}{backspace}');
+          expect(yearInput).toHaveValue('20');
+        });
+
+        test('typing new characters does not format the segment', () => {
+          const { yearInput, monthInput, dayInput } = renderDatePicker({});
+          userEvent.type(yearInput, '2019');
+          userEvent.type(monthInput, '6');
+          userEvent.type(dayInput, '1');
+
+          userEvent.type(yearInput, '9');
+          userEvent.type(yearInput, '9');
+          expect(yearInput).toHaveValue('1999');
+        });
+      });
+
       describe('on un-focus/blur', () => {
         test('does not fire a value change handler if the value is incomplete', () => {
           const onDateChange = jest.fn();
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index 9f138e13e6..81001d4840 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -18,14 +18,21 @@ import { newUTC } from '../shared/utils';
 import { Locales, TimeZones } from '../shared/utils/testutils';
 
 import { DatePicker } from './DatePicker';
+import { getProviderPropsFromStoryArgs } from './DatePicker.testutils';
 
-const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
-  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-    <DatePickerProvider {...ctx?.args}>
-      <Story />
-    </DatePickerProvider>
-  </LeafyGreenProvider>
-);
+const ProviderWrapper = (Story: StoryFn, ctx: any) => {
+  const { contextProps, componentProps } = getProviderPropsFromStoryArgs(
+    ctx?.args,
+  );
+
+  return (
+    <LeafyGreenProvider darkMode={contextProps.darkMode}>
+      <DatePickerProvider {...contextProps}>
+        <Story {...componentProps} />
+      </DatePickerProvider>
+    </LeafyGreenProvider>
+  );
+};
 
 const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
   title: 'Components/DatePicker/DatePicker',
@@ -99,12 +106,12 @@ export const Uncontrolled: StoryFn<typeof DatePicker> = props => {
 
 export const InModal: StoryFn<typeof DatePicker> = props => {
   const [value, setValue] = useState<Date | null | undefined>();
-  const [isModalOpen, setisModalOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
     <>
-      <Button onClick={() => setisModalOpen(curr => !curr)}>Open Modal</Button>
-      <Modal open={isModalOpen} setOpen={setisModalOpen}>
+      <Button onClick={() => setIsModalOpen(curr => !curr)}>Open Modal</Button>
+      <Modal open={isModalOpen} setOpen={setIsModalOpen}>
         Inside the modal
         <DatePicker {...props} value={value} onDateChange={setValue} />
       </Modal>
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index 79be8ecade..65e4340124 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -9,7 +9,11 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { DateSegment } from '../shared';
+import { DateSegment, pickAndOmit } from '../shared';
+import {
+  ContextPropKeys,
+  contextPropNames,
+} from '../shared/components/DatePickerContext';
 import { getISODate } from '../shared/utils/getISODate';
 
 import { DatePickerProps } from './DatePicker.types';
@@ -216,3 +220,20 @@ export const findTabStopElementMap = async (
     'menu > right chevron': rightChevron,
   };
 };
+
+export const getProviderPropsFromStoryArgs = (
+  args: any,
+): {
+  contextProps: Pick<DatePickerProps, ContextPropKeys>;
+  componentProps: Omit<DatePickerProps, ContextPropKeys>;
+} => {
+  const [contextProps, componentProps] = pickAndOmit<
+    DatePickerProps,
+    ContextPropKeys
+  >(args, contextPropNames);
+
+  return {
+    contextProps,
+    componentProps,
+  };
+};
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index 44d63ec4bf..dc6f65e4a8 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -12,6 +12,7 @@ import {
   DatePickerContextProps,
   DatePickerProvider,
 } from '../../shared/components/DatePickerContext';
+import { getProviderPropsFromStoryArgs } from '../DatePicker.testutils';
 import { DatePickerProps } from '../DatePicker.types';
 import {
   SingleDateContextProps,
@@ -21,15 +22,19 @@ import {
 
 import { DatePickerInput } from './DatePickerInput';
 
-const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
-  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-    <DatePickerProvider {...ctx?.args}>
-      <SingleDateProvider value={ctx?.args.value} setValue={() => {}}>
-        <Story />
-      </SingleDateProvider>
-    </DatePickerProvider>
-  </LeafyGreenProvider>
-);
+const ProviderWrapper = (Story: StoryFn, ctx: any) => {
+  const { contextProps, componentProps } = getProviderPropsFromStoryArgs(
+    ctx?.args,
+  );
+
+  return (
+    <LeafyGreenProvider darkMode={contextProps.darkMode}>
+      <DatePickerProvider {...contextProps}>
+        <Story {...componentProps} />
+      </DatePickerProvider>
+    </LeafyGreenProvider>
+  );
+};
 
 const meta: StoryMetaType<
   typeof DatePickerInput,
@@ -65,16 +70,16 @@ const meta: StoryMetaType<
 
 export default meta;
 
-export const Basic: StoryFn<
-  DatePickerProps & SingleDateProviderProps
-> = props => {
+export const Basic: StoryFn<DatePickerProps & SingleDateProviderProps> = ({
+  value,
+}) => {
   const [date, setDate] = useState<Date | null>(null);
 
   useEffect(() => {
-    if (props.value && isValid(new Date(props.value))) {
-      setDate(new Date(props.value));
+    if (value && isValid(new Date(value))) {
+      setDate(new Date(value));
     }
-  }, [props.value]);
+  }, [value]);
 
   const updateDate = (date?: Date | null) => {
     if (!isUndefined(date)) {
@@ -84,7 +89,7 @@ export const Basic: StoryFn<
 
   return (
     <SingleDateProvider value={date} setValue={updateDate}>
-      <DatePickerInput {...props} />
+      <DatePickerInput />
     </SingleDateProvider>
   );
 };
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 4fe86d820e..21743432e1 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -11,15 +11,14 @@ import { transitionDuration } from '@leafygreen-ui/tokens';
 import { InlineCode } from '@leafygreen-ui/typography';
 
 import {
-  type ContextPropKeys,
   contextPropNames,
   type DatePickerContextProps,
   DatePickerProvider,
   defaultDatePickerContext,
 } from '../../shared/components/DatePickerContext';
 import { Month } from '../../shared/constants';
-import { newUTC, pickAndOmit } from '../../shared/utils';
-import { DatePickerProps } from '../DatePicker.types';
+import { newUTC } from '../../shared/utils';
+import { getProviderPropsFromStoryArgs } from '../DatePicker.testutils';
 import {
   type SingleDateContextProps,
   SingleDateProvider,
@@ -34,19 +33,18 @@ type DecoratorArgs = DatePickerMenuProps &
   DatePickerContextProps;
 
 const MenuDecorator: Decorator = (Story: StoryFn, ctx: any) => {
-  const [{ darkMode, ...providerProps }, componentProps] = pickAndOmit<
-    DatePickerProps,
-    ContextPropKeys
-  >(ctx?.args, contextPropNames);
+  const { contextProps, componentProps } = getProviderPropsFromStoryArgs(
+    ctx.args,
+  );
 
   // Force `new Date()` to return `mockToday`
   MockDate.set(mockToday);
 
   return (
-    <LeafyGreenProvider darkMode={darkMode}>
+    <LeafyGreenProvider darkMode={contextProps.darkMode}>
       <DatePickerProvider
         {...defaultDatePickerContext}
-        {...providerProps}
+        {...contextProps}
         initialOpen={true}
       >
         <Story {...componentProps} />
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
index 1a43f18582..7432205066 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -4,11 +4,13 @@ import { StoryFn } from '@storybook/react';
 import { isValid } from 'date-fns';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
-import { StoryMetaType, StoryType } from '@leafygreen-ui/lib';
+import { pickAndOmit, StoryMetaType, StoryType } from '@leafygreen-ui/lib';
 
 import { Month } from '../../../constants';
 import { newUTC } from '../../../utils';
+import { Locales } from '../../../utils/testutils';
 import {
+  contextPropNames,
   DatePickerContextProps,
   DatePickerProvider,
 } from '../../DatePickerContext';
@@ -17,19 +19,35 @@ import { DateInputBox } from './DateInputBox';
 
 const testDate = newUTC(1993, Month.December, 26);
 
-const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
-  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-    <DatePickerProvider {...ctx?.args}>
-      <Story />
-    </DatePickerProvider>
-  </LeafyGreenProvider>
-);
+const segmentRefs = {
+  day: createRef<HTMLInputElement>(),
+  month: createRef<HTMLInputElement>(),
+  year: createRef<HTMLInputElement>(),
+};
+
+const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => {
+  const [contextProps, componentProps] = pickAndOmit(
+    ctx?.args,
+    contextPropNames,
+  );
+
+  return (
+    <LeafyGreenProvider darkMode={contextProps.darkMode}>
+      <DatePickerProvider {...contextProps}>
+        <Story {...componentProps} />
+      </DatePickerProvider>
+    </LeafyGreenProvider>
+  );
+};
 
 const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
   title: 'Components/DatePicker/Shared/DateInputBox',
   component: DateInputBox,
   decorators: [ProviderWrapper],
   parameters: {
+    controls: {
+      exclude: ['onSegmentChange', 'setValue'],
+    },
     default: null,
     generate: {
       storyNames: ['Formats'],
@@ -42,16 +60,12 @@ const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
   },
   args: {
     label: 'Label',
-    dateFormat: 'en-UK',
+    dateFormat: 'iso8601',
     timeZone: 'Europe/London',
-    segmentRefs: {
-      day: createRef(),
-      month: createRef(),
-      year: createRef(),
-    },
   },
   argTypes: {
     value: { control: 'date' },
+    dateFormat: { control: 'select', options: Locales },
   },
 };
 
@@ -71,18 +85,16 @@ export const Basic: StoryFn<typeof DateInputBox> = props => {
   };
 
   return (
-    <>
-      <DateInputBox {...props} value={date} setValue={updateDate} />
-    </>
+    <DateInputBox
+      value={date}
+      setValue={updateDate}
+      segmentRefs={segmentRefs}
+    />
   );
 };
 
-export const Static: StoryFn<typeof DateInputBox> = props => {
-  return (
-    <>
-      <DateInputBox {...props} value={testDate} />
-    </>
-  );
+export const Static: StoryFn<typeof DateInputBox> = () => {
+  return <DateInputBox value={testDate} segmentRefs={segmentRefs} />;
 };
 
 export const Formats: StoryType<
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index f0b4105d92..c13b28a446 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -62,7 +62,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
      * trigger a `change` event for the segment, and
      * update the external Date value if necessary
      */
-    const onSegmentsUpdate = (
+    const handleSegmentUpdate = (
       newSegments: DateSegmentsState,
       prevSegments?: DateSegmentsState,
     ) => {
@@ -84,17 +84,18 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
 
     /** Keep track of each date segment */
     const { segments, setSegment } = useDateSegments(value, {
-      onUpdate: onSegmentsUpdate,
+      onUpdate: handleSegmentUpdate,
     });
 
-    /** fired when an individual segment value changes */
-    const handleSegmentChange: DateInputSegmentChangeEventHandler = event => {
-      setSegment(event.segment, event.value);
-      onSegmentChange?.(event);
-    };
+    /** Fired when an individual segment value changes */
+    const handleSegmentInputChange: DateInputSegmentChangeEventHandler =
+      event => {
+        setSegment(event.segment, event.value);
+        onSegmentChange?.(event);
+      };
 
     /** Triggered when a segment is blurred */
-    const handleSegmentBlur: FocusEventHandler<HTMLInputElement> = e => {
+    const handleSegmentInputBlur: FocusEventHandler<HTMLInputElement> = e => {
       const segmentName = e.target.getAttribute('id');
       const newValue = e.target.value;
 
@@ -131,8 +132,8 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
                 aria-labelledby={labelledBy}
                 segment={part.type}
                 value={segments[part.type]}
-                onChange={handleSegmentChange}
-                onBlur={handleSegmentBlur}
+                onChange={handleSegmentInputChange}
+                onBlur={handleSegmentInputBlur}
               />
             );
           }
diff --git a/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts b/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
index ed13b57e96..81b062a5d0 100644
--- a/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
+++ b/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
@@ -15,7 +15,8 @@ export const isValidValueForSegment = (
     isValidSegmentValue(value) && isValidSegmentName(segment);
 
   if (segment === 'year') {
-    return isValidSegmentAndValue;
+    // allow any 4-digit year value regardless of defined range
+    return isValidSegmentAndValue && inRange(Number(value), 1000, 9999 + 1);
   }
 
   const isInRange = inRange(
diff --git a/packages/date-picker/src/shared/utils/isValidValueForSegment/isValidValueForSegment.spec.ts b/packages/date-picker/src/shared/utils/isValidValueForSegment/isValidValueForSegment.spec.ts
index 3141c2d2cc..4b29066629 100644
--- a/packages/date-picker/src/shared/utils/isValidValueForSegment/isValidValueForSegment.spec.ts
+++ b/packages/date-picker/src/shared/utils/isValidValueForSegment/isValidValueForSegment.spec.ts
@@ -24,12 +24,17 @@ describe('packages/date-picker/utils/isValidSegmentValue', () => {
     expect(isValidValueForSegment('year', '2000')).toBe(true);
     expect(isValidValueForSegment('year', '2038')).toBe(true);
 
-    // All positive numbers are considered valid years by default
-    expect(isValidValueForSegment('year', '200')).toBe(true);
+    // All positive numbers 4-digit are considered valid years by default
+    expect(isValidValueForSegment('year', '1000')).toBe(true);
     expect(isValidValueForSegment('year', '1945')).toBe(true);
     expect(isValidValueForSegment('year', '2048')).toBe(true);
+    expect(isValidValueForSegment('year', '9999')).toBe(true);
 
     expect(isValidValueForSegment('year', '0')).toBe(false);
+    expect(isValidValueForSegment('year', '20')).toBe(false);
+    expect(isValidValueForSegment('year', '200')).toBe(false);
+    expect(isValidValueForSegment('year', '999')).toBe(false);
+    expect(isValidValueForSegment('year', '10000')).toBe(false);
     expect(isValidValueForSegment('year', '-2000')).toBe(false);
   });
 });
diff --git a/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
index b5783691f7..a07f7d7f72 100644
--- a/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
@@ -19,6 +19,24 @@ describe('packages/date=picker/utils/newDateFromSegments', () => {
     expect(newDate?.toISOString()).toEqual('2100-01-01T00:00:00.000Z');
   });
 
+  test('returns undefined if year is truncated (2-digits)', () => {
+    const newDate = newDateFromSegments({
+      day: '1',
+      month: '1',
+      year: '20',
+    });
+    expect(newDate).toBeUndefined();
+  });
+
+  test('returns undefined if year is truncated (3-digits)', () => {
+    const newDate = newDateFromSegments({
+      day: '1',
+      month: '1',
+      year: '199',
+    });
+    expect(newDate).toBeUndefined();
+  });
+
   test('returns undefined if month/day combo is invalid', () => {
     const newDate = newDateFromSegments({
       day: '31',

From ec2b478ba7bfa65e6c555d1e0a53b3011b2d9ee4 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Mon, 4 Dec 2023 10:26:56 -0500
Subject: [PATCH 299/351] Date Picker [LG-3810] calendar cell focus (#2109)

* set the highlighted cell

* add test

* remove only
---
 .../src/DatePicker/DatePicker.spec.tsx          | 17 ++++++++++++++---
 .../DatePickerMenu/DatePickerMenu.tsx           |  7 +++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index bf503ec1e1..44c425a5a6 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -15,6 +15,7 @@ import { transitionDuration } from '@leafygreen-ui/tokens';
 import { defaultMax, defaultMin, Month } from '../shared/constants';
 import {
   getFormattedDateString,
+  getISODate,
   getValueFormatter,
   newUTC,
   setUTCYear,
@@ -1534,7 +1535,7 @@ describe('packages/date-picker', () => {
               calendarButton,
               waitForMenuToOpen,
             } = renderDatePicker({ onDateChange });
-            userEvent.type(yearInput, '2038');
+            userEvent.type(yearInput, '2037');
             userEvent.type(monthInput, '12');
             userEvent.type(dayInput, '25');
             userEvent.click(calendarButton);
@@ -1543,15 +1544,25 @@ describe('packages/date-picker', () => {
 
           test('fires onDateChange handler', () => {
             expect(onDateChange).toHaveBeenCalledWith(
-              expect.objectContaining(newUTC(2038, Month.December, 25)),
+              expect.objectContaining(newUTC(2037, Month.December, 25)),
             );
           });
 
           test('sets displayed month to that month', () => {
             expect(menuElements.calendarGrid).toHaveAttribute(
               'aria-label',
-              'December 2038',
+              'December 2037',
+            );
+          });
+
+          test('focuses the correct date in the calendar', () => {
+            const value = new Date(Date.UTC(2037, Month.December, 25));
+            userEvent.tab();
+
+            const valueCell = menuElements.calendarGrid!.querySelector(
+              `[data-iso="${getISODate(value)}"]`,
             );
+            expect(valueCell).toHaveFocus();
           });
 
           test.todo('sets the error state');
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 40ce02d404..3b9573f157 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -63,6 +63,13 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
 
     const monthLabel = getFullMonthLabel(month);
 
+    /** Set the highlighted cell when the value changes in the input */
+    useEffect(() => {
+      if (value && !isSameUTCDay(value, prevValue) && isInRange(value)) {
+        setHighlight(value);
+      }
+    }, [value, isInRange, setHighlight, prevValue]);
+
     /** setDisplayMonth with side effects */
     const updateMonth = (newMonth: Date) => {
       if (isSameUTCMonth(newMonth, month)) {

From c6e0c289e1ef29641cd7b2979236a7ce18d9e02c Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Mon, 4 Dec 2023 12:24:40 -0500
Subject: [PATCH 300/351] Date picker [LG-3827] input segment responsive to min
 max (#2108)

* update arrow key test names

* Update DateInputSegment.spec.tsx

* Update DatePicker.spec.tsx

* adds getMaxSegmentValue & getMinSegmentValue

* fix bug
---
 .../src/DatePicker/DatePicker.spec.tsx        | 301 +++++++--
 .../DateInput/DateInputBox/DateInputBox.tsx   |   6 +-
 .../DateInputSegment.spec.tsx                 | 631 ++++++++++++++----
 .../getMaxSegmentValue.spec.ts                |  31 +
 .../shared/utils/getMaxSegmentValue/index.ts  |  21 +
 .../getMinSegmentValue.spec.ts                |  30 +
 .../shared/utils/getMinSegmentValue/index.ts  |  21 +
 .../date-picker/src/shared/utils/index.ts     |   2 +
 8 files changed, 862 insertions(+), 181 deletions(-)
 create mode 100644 packages/date-picker/src/shared/utils/getMaxSegmentValue/getMaxSegmentValue.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/getMinSegmentValue/getMinSegmentValue.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/getMinSegmentValue/index.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 44c425a5a6..cca486e069 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -18,6 +18,7 @@ import {
   getISODate,
   getValueFormatter,
   newUTC,
+  setUTCMonth,
   setUTCYear,
 } from '../shared/utils';
 import {
@@ -960,33 +961,74 @@ describe('packages/date-picker', () => {
             expect(yearInput).toHaveFocus();
           });
 
-          describe.each(['arrowup', 'arrowdown'])('%p key', key => {
-            test('updates segment value', () => {
-              const { monthInput } = renderDatePicker();
-              userEvent.click(monthInput);
-              userEvent.keyboard(`{${key}}`);
-              const expectedNumberValue =
-                key === 'arrowup' ? defaultMin.month : defaultMax.month;
+          describe('Up Arrow', () => {
+            describe('month input', () => {
+              const formatter = getValueFormatter('month');
+              test('updates segment value to the default min', () => {
+                const { monthInput } = renderDatePicker();
+                userEvent.click(monthInput);
+                userEvent.keyboard(`{arrowup}`);
 
-              expect(monthInput).toHaveValue(
-                getValueFormatter('month')(expectedNumberValue),
-              );
-            });
+                expect(monthInput).toHaveValue(formatter(defaultMin.month));
+              });
 
-            test('up arrow fires segment change handler', () => {
-              const onChange = jest.fn();
-              const { monthInput } = renderDatePicker({ onChange });
-              userEvent.click(monthInput);
-              userEvent.keyboard(`{${key}}`);
-              expect(onChange).toHaveBeenCalled();
+              test(`fires segment change handler`, () => {
+                const onChange = jest.fn();
+                const { monthInput } = renderDatePicker({ onChange });
+                userEvent.click(monthInput);
+                userEvent.keyboard(`{arrowup}`);
+                expect(onChange).toHaveBeenCalledWith(
+                  eventContainingTargetValue(formatter(defaultMin.month)),
+                );
+              });
+
+              test(`does not fire value change handler`, () => {
+                const onDateChange = jest.fn();
+                const { monthInput } = renderDatePicker({ onDateChange });
+                userEvent.click(monthInput);
+                userEvent.keyboard(`{arrowup}`);
+                expect(onDateChange).not.toHaveBeenCalled();
+              });
             });
 
-            test('up arrow does not fire value change handler', () => {
-              const onDateChange = jest.fn();
-              const { monthInput } = renderDatePicker({ onDateChange });
-              userEvent.click(monthInput);
-              userEvent.keyboard(`{${key}}`);
-              expect(onDateChange).not.toHaveBeenCalled();
+            describe('year input', () => {
+              const formatter = getValueFormatter('year');
+
+              test('updates segment value to the default min', () => {
+                const { yearInput } = renderDatePicker();
+                userEvent.click(yearInput);
+                userEvent.keyboard(`{arrowup}`);
+
+                expect(yearInput).toHaveValue(formatter(defaultMin.year));
+              });
+
+              test('updates segment value to the provided min year', () => {
+                const { yearInput } = renderDatePicker({
+                  min: newUTC(1969, Month.June, 20),
+                });
+                userEvent.click(yearInput);
+                userEvent.keyboard(`{arrowup}`);
+
+                expect(yearInput).toHaveValue(formatter(1969));
+              });
+
+              test(`fires segment change handler`, () => {
+                const onChange = jest.fn();
+                const { yearInput } = renderDatePicker({ onChange });
+                userEvent.click(yearInput);
+                userEvent.keyboard(`{arrowup}`);
+                expect(onChange).toHaveBeenCalledWith(
+                  eventContainingTargetValue(formatter(defaultMin.year)),
+                );
+              });
+
+              test(`does not fire value change handler`, () => {
+                const onDateChange = jest.fn();
+                const { yearInput } = renderDatePicker({ onDateChange });
+                userEvent.click(yearInput);
+                userEvent.keyboard(`{arrowup}`);
+                expect(onDateChange).not.toHaveBeenCalled();
+              });
             });
 
             describe('when a value is set', () => {
@@ -997,33 +1039,207 @@ describe('packages/date-picker', () => {
                   value: testToday,
                 });
                 userEvent.click(monthInput);
-                userEvent.keyboard(`{${key}}`);
+                userEvent.keyboard(`{arrowup}`);
                 expect(onDateChange).toHaveBeenCalled();
               });
 
+              test('rolls year value over from max prop to min prop', () => {
+                const onDateChange = jest.fn();
+                const { yearInput } = renderDatePicker({
+                  onDateChange,
+                  value: newUTC(2020, Month.July, 5),
+                  min: newUTC(1969, Month.June, 20),
+                  max: newUTC(2020, Month.September, 10),
+                });
+                userEvent.click(yearInput);
+                userEvent.keyboard(`{arrowup}`);
+                expect(onDateChange).toHaveBeenCalledWith(
+                  newUTC(1969, Month.July, 5),
+                );
+              });
+
               describe('if new value would be out of range', () => {
                 const onDateChange = jest.fn();
                 const onSegmentChange = jest.fn();
                 const handleValidation = jest.fn();
-                const min = newUTC(1999, Month.July, 4);
                 const max = newUTC(2020, Month.July, 4);
-                const startValue =
-                  key === 'arrowup'
-                    ? newUTC(2019, Month.August, 1)
-                    : newUTC(2000, Month.June, 30);
-                const newYearVal = getValueFormatter('year')(
-                  key === 'arrowup' ? 2020 : 1999,
+                const startValue = newUTC(2019, Month.August, 1);
+                const newYearVal = '2020';
+                const expectedMessage = `Date must be before ${getFormattedDateString(
+                  max,
+                  'iso8601',
+                )}`;
+
+                let renderResult: RenderDatePickerResult;
+
+                beforeEach(() => {
+                  onDateChange.mockReset();
+                  onSegmentChange.mockReset();
+                  handleValidation.mockReset();
+
+                  renderResult = renderDatePicker({
+                    max,
+                    value: startValue,
+                    onDateChange,
+                    onChange: onSegmentChange,
+                    handleValidation,
+                  });
+                  userEvent.click(renderResult.yearInput);
+                  userEvent.keyboard(`{arrowup}`);
+                });
+
+                test('updates the input', () => {
+                  expect(renderResult.yearInput).toHaveValue(newYearVal);
+                });
+
+                test('fires the change handler', () => {
+                  expect(onDateChange).toHaveBeenCalledWith(
+                    setUTCYear(startValue, Number(newYearVal)),
+                  );
+                });
+
+                test('fires the segment change handler', () => {
+                  expect(onSegmentChange).toHaveBeenCalledWith(
+                    eventContainingTargetValue(newYearVal),
+                  );
+                });
+
+                test('fires the validation handler', () => {
+                  expect(handleValidation).toHaveBeenCalledWith(
+                    setUTCYear(startValue, Number(newYearVal)),
+                  );
+                });
+
+                test('sets aria-invalid', () => {
+                  expect(renderResult.inputContainer).toHaveAttribute(
+                    'aria-invalid',
+                    'true',
+                  );
+                });
+
+                test('sets error message', () => {
+                  const errorMessageElement = within(
+                    renderResult.formField,
+                  ).queryByText(expectedMessage);
+                  expect(errorMessageElement).toBeInTheDocument();
+                });
+              });
+            });
+          });
+
+          describe('Down Arrow', () => {
+            describe('month input', () => {
+              const formatter = getValueFormatter('month');
+
+              test('updates segment value to the default max', () => {
+                const { monthInput } = renderDatePicker();
+                userEvent.click(monthInput);
+                userEvent.keyboard(`{arrowdown}`);
+
+                expect(monthInput).toHaveValue(formatter(defaultMax.month));
+              });
+
+              test(`fires segment change handler`, () => {
+                const onChange = jest.fn();
+                const { monthInput } = renderDatePicker({ onChange });
+                userEvent.click(monthInput);
+                userEvent.keyboard(`{arrowdown}`);
+                expect(onChange).toHaveBeenCalledWith(
+                  eventContainingTargetValue(formatter(defaultMax.month)),
                 );
-                const expectedMessage =
-                  key === 'arrowup'
-                    ? `Date must be before ${getFormattedDateString(
-                        max,
-                        'iso8601',
-                      )}`
-                    : `Date must be after ${getFormattedDateString(
-                        min,
-                        'iso8601',
-                      )}`;
+              });
+
+              test(`does not fire value change handler`, () => {
+                const onDateChange = jest.fn();
+                const { monthInput } = renderDatePicker({ onDateChange });
+                userEvent.click(monthInput);
+                userEvent.keyboard(`{arrowdown}`);
+                expect(onDateChange).not.toHaveBeenCalled();
+              });
+            });
+
+            describe('year input', () => {
+              const formatter = getValueFormatter('year');
+
+              test('updates segment value to the default max', () => {
+                const { yearInput } = renderDatePicker();
+                userEvent.click(yearInput);
+                userEvent.keyboard(`{arrowdown}`);
+
+                expect(yearInput).toHaveValue(formatter(defaultMax.year));
+              });
+
+              test('updates segment value to the provided min year', () => {
+                const { yearInput } = renderDatePicker({
+                  max: newUTC(2020, Month.March, 13),
+                });
+                userEvent.click(yearInput);
+                userEvent.keyboard(`{arrowdown}`);
+
+                expect(yearInput).toHaveValue(formatter(2020));
+              });
+
+              test(`fires segment change handler`, () => {
+                const onChange = jest.fn();
+                const { yearInput } = renderDatePicker({ onChange });
+                userEvent.click(yearInput);
+                userEvent.keyboard(`{arrowdown}`);
+                expect(onChange).toHaveBeenCalledWith(
+                  eventContainingTargetValue(formatter(defaultMax.year)),
+                );
+              });
+
+              test(`does not fire value change handler`, () => {
+                const onDateChange = jest.fn();
+                const { yearInput } = renderDatePicker({ onDateChange });
+                userEvent.click(yearInput);
+                userEvent.keyboard(`{arrowdown}`);
+                expect(onDateChange).not.toHaveBeenCalled();
+              });
+            });
+
+            describe('when a value is set', () => {
+              test('fires value change handler', () => {
+                const onDateChange = jest.fn();
+                const { monthInput } = renderDatePicker({
+                  onDateChange,
+                  value: testToday,
+                });
+                userEvent.click(monthInput);
+                userEvent.keyboard(`{arrowdown}`);
+                expect(onDateChange).toHaveBeenCalledWith(
+                  setUTCMonth(testToday, testToday.getUTCMonth() - 1),
+                );
+              });
+
+              test('rolls year value over from min prop to max prop', () => {
+                const onDateChange = jest.fn();
+                const { yearInput } = renderDatePicker({
+                  onDateChange,
+                  value: newUTC(1969, Month.July, 5),
+                  min: newUTC(1969, Month.June, 20),
+                  max: newUTC(2020, Month.September, 10),
+                });
+                userEvent.click(yearInput);
+                userEvent.keyboard(`{arrowdown}`);
+                expect(onDateChange).toHaveBeenCalledWith(
+                  newUTC(2020, Month.July, 5),
+                );
+              });
+
+              describe('if new value would be out of range', () => {
+                const onDateChange = jest.fn();
+                const onSegmentChange = jest.fn();
+                const handleValidation = jest.fn();
+                const min = newUTC(1999, Month.November, 11);
+                const startValue = newUTC(2000, Month.August, 1);
+                const newYearVal = '1999';
+
+                const expectedMessage = `Date must be after ${getFormattedDateString(
+                  min,
+                  'iso8601',
+                )}`;
+
                 let renderResult: RenderDatePickerResult;
 
                 beforeEach(() => {
@@ -1033,14 +1249,13 @@ describe('packages/date-picker', () => {
 
                   renderResult = renderDatePicker({
                     min,
-                    max,
                     value: startValue,
                     onDateChange,
                     onChange: onSegmentChange,
                     handleValidation,
                   });
                   userEvent.click(renderResult.yearInput);
-                  userEvent.keyboard(`{${key}}`);
+                  userEvent.keyboard(`{arrowdown}`);
                 });
 
                 test('updates the input', () => {
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index c13b28a446..f45bd39c8e 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -12,6 +12,8 @@ import {
 } from '../../../hooks';
 import {
   doesSomeSegmentExist,
+  getMaxSegmentValue,
+  getMinSegmentValue,
   getValueFormatter,
   newDateFromSegments,
 } from '../../../utils';
@@ -52,7 +54,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     }: DateInputBoxProps,
     fwdRef,
   ) => {
-    const { formatParts, disabled } = useDatePickerContext();
+    const { formatParts, disabled, min, max } = useDatePickerContext();
     const { theme } = useDarkMode();
 
     const containerRef = useForwardedRef(fwdRef, null);
@@ -130,6 +132,8 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
                 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}
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 116dd7ccc1..9d4f750cff 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
@@ -2,34 +2,54 @@ import React from 'react';
 import { jest } from '@jest/globals';
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { mean, round } from 'lodash';
 
 import { defaultMax, defaultMin } from '../../../constants';
 import { DateSegment } from '../../../hooks';
 import { getValueFormatter } from '../../../utils';
+import {
+  DatePickerProvider,
+  DatePickerProviderProps,
+  defaultDatePickerContext,
+} from '../../DatePickerContext';
 
 import { DateInputSegmentChangeEventHandler } from './DateInputSegment.types';
 import { DateInputSegment, type DateInputSegmentProps } from '.';
 
-const onChangeHandler = jest.fn<DateInputSegmentChangeEventHandler>();
+const renderSegment = (
+  props?: Partial<DateInputSegmentProps>,
+  ctx?: Partial<DatePickerProviderProps>,
+) => {
+  const defaultProps = {
+    value: '',
+    onChange: () => {},
+    segment: 'day' as DateSegment,
+  };
 
-const renderSegment = (props: Partial<DateInputSegmentProps>) => {
   const result = render(
-    <DateInputSegment
-      value={''}
-      onChange={() => {}}
-      segment={'day'}
-      {...props}
-    />,
+    <DatePickerProvider {...defaultDatePickerContext} {...ctx}>
+      <DateInputSegment {...defaultProps} {...props} />
+    </DatePickerProvider>,
   );
-  const input = result.getByTestId('lg-date_picker_input-segment');
+
+  const rerenderSegment = (newProps: Partial<DateInputSegmentProps>) =>
+    result.rerender(
+      <DateInputSegment {...defaultProps} {...props} {...newProps} />,
+    );
+
+  const getInput = () =>
+    result.getByTestId('lg-date_picker_input-segment') as HTMLInputElement;
+
   return {
     ...result,
-    input: input as HTMLInputElement,
+    rerenderSegment,
+    getInput,
+    input: getInput(),
   };
 };
 
 describe('packages/date-picker/shared/date-input-segment', () => {
+  const onChangeHandler = jest.fn<DateInputSegmentChangeEventHandler>();
+
   afterEach(() => {
     onChangeHandler.mockClear();
   });
@@ -66,15 +86,13 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       });
 
       test('rerendering updates the value', () => {
-        const { input, rerender } = renderSegment({
+        const { getInput, rerenderSegment } = renderSegment({
           segment: 'day',
           value: '12',
         });
 
-        rerender(
-          <DateInputSegment segment="day" value={'08'} onChange={() => {}} />,
-        );
-        expect(input.value).toBe('08');
+        rerenderSegment({ value: '08' });
+        expect(getInput().value).toBe('08');
       });
     });
 
@@ -90,15 +108,13 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       });
 
       test('rerendering updates the value', () => {
-        const { input, rerender } = renderSegment({
+        const { getInput, rerenderSegment } = renderSegment({
           segment: 'month',
           value: '26',
         });
 
-        rerender(
-          <DateInputSegment segment="month" value={'08'} onChange={() => {}} />,
-        );
-        expect(input.value).toBe('08');
+        rerenderSegment({ value: '08' });
+        expect(getInput().value).toBe('08');
       });
     });
 
@@ -114,28 +130,22 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       });
 
       test('rerendering updates the value', () => {
-        const { input, rerender } = renderSegment({
+        const { getInput, rerenderSegment } = renderSegment({
           segment: 'year',
           value: '2023',
         });
-        rerender(
-          <DateInputSegment
-            segment="year"
-            value={'1993'}
-            onChange={() => {}}
-          />,
-        );
-        expect(input.value).toBe('1993');
+        rerenderSegment({ value: '1993' });
+        expect(getInput().value).toBe('1993');
       });
     });
   });
 
   describe('Typing', () => {
     test('calls the change handler', () => {
-      const result = render(
-        <DateInputSegment segment="day" value="" onChange={onChangeHandler} />,
-      );
-      const input = result.getByTestId('lg-date_picker_input-segment');
+      const { input } = renderSegment({
+        onChange: onChangeHandler,
+      });
+
       userEvent.type(input, '8');
       expect(onChangeHandler).toHaveBeenCalledWith(
         expect.objectContaining({ value: '8' }),
@@ -143,15 +153,11 @@ describe('packages/date-picker/shared/date-input-segment', () => {
     });
 
     test('allows typing additional characters to create a valid value', () => {
-      const result = render(
-        <DateInputSegment
-          segment="day"
-          value="02"
-          onChange={onChangeHandler}
-        />,
-      );
+      const { input } = renderSegment({
+        value: '02',
+        onChange: onChangeHandler,
+      });
 
-      const input = result.getByTestId('lg-date_picker_input-segment');
       userEvent.type(input, '6');
       expect(onChangeHandler).toHaveBeenCalled();
       expect(onChangeHandler).toHaveBeenCalledWith(
@@ -162,15 +168,11 @@ describe('packages/date-picker/shared/date-input-segment', () => {
     test('allows typing additional characters to create an invalid value', () => {
       // Note: event may be ignored by the parent,
       // but this component still fires the event
-      const result = render(
-        <DateInputSegment
-          segment="day"
-          value="26"
-          onChange={onChangeHandler}
-        />,
-      );
+      const { input } = renderSegment({
+        value: '26',
+        onChange: onChangeHandler,
+      });
 
-      const input = result.getByTestId('lg-date_picker_input-segment');
       userEvent.type(input, '6');
       expect(onChangeHandler).toHaveBeenCalled();
       expect(onChangeHandler).toHaveBeenCalledWith(
@@ -179,10 +181,10 @@ describe('packages/date-picker/shared/date-input-segment', () => {
     });
 
     test('allows zero character', () => {
-      const result = render(
-        <DateInputSegment segment="day" value="" onChange={onChangeHandler} />,
-      );
-      const input = result.getByTestId('lg-date_picker_input-segment');
+      const { input } = renderSegment({
+        onChange: onChangeHandler,
+      });
+
       userEvent.type(input, '0');
       expect(onChangeHandler).toHaveBeenCalledWith(
         expect.objectContaining({ value: '0' }),
@@ -190,10 +192,11 @@ describe('packages/date-picker/shared/date-input-segment', () => {
     });
 
     test('allows leading zeroes', async () => {
-      const result = render(
-        <DateInputSegment segment="day" value="0" onChange={onChangeHandler} />,
-      );
-      const input = result.getByTestId('lg-date_picker_input-segment');
+      const { input } = renderSegment({
+        value: '0',
+        onChange: onChangeHandler,
+      });
+
       userEvent.type(input, '2');
       await waitFor(() =>
         expect(onChangeHandler).toHaveBeenCalledWith(
@@ -203,10 +206,10 @@ describe('packages/date-picker/shared/date-input-segment', () => {
     });
 
     test('does not allow non-number characters', () => {
-      const result = render(
-        <DateInputSegment segment="day" value="" onChange={onChangeHandler} />,
-      );
-      const input = result.getByTestId('lg-date_picker_input-segment');
+      const { input } = renderSegment({
+        onChange: onChangeHandler,
+      });
+
       userEvent.type(input, 'aB$/');
       expect(onChangeHandler).not.toHaveBeenCalled();
     });
@@ -215,14 +218,11 @@ describe('packages/date-picker/shared/date-input-segment', () => {
   describe('Keyboard', () => {
     describe('Backspace', () => {
       test('deletes value in the input', () => {
-        const result = render(
-          <DateInputSegment
-            segment="day"
-            onChange={onChangeHandler}
-            value="26"
-          />,
-        );
-        const input = result.getByTestId('lg-date_picker_input-segment');
+        const { input } = renderSegment({
+          value: '26',
+          onChange: onChangeHandler,
+        });
+
         userEvent.type(input, '{backspace}');
         expect(onChangeHandler).toHaveBeenCalledWith(
           expect.objectContaining({ value: '2' }),
@@ -230,14 +230,11 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       });
 
       test('fully clears the input', () => {
-        const result = render(
-          <DateInputSegment
-            segment="day"
-            onChange={onChangeHandler}
-            value="2"
-          />,
-        );
-        const input = result.getByTestId('lg-date_picker_input-segment');
+        const { input } = renderSegment({
+          value: '2',
+          onChange: onChangeHandler,
+        });
+
         userEvent.type(input, '{backspace}');
         expect(onChangeHandler).toHaveBeenCalledWith(
           expect.objectContaining({ value: '' }),
@@ -246,109 +243,469 @@ describe('packages/date-picker/shared/date-input-segment', () => {
     });
 
     describe('Arrow Keys', () => {
-      const testCases: Array<DateSegment> = ['day', 'month', 'year'];
+      describe('day input', () => {
+        const formatter = getValueFormatter('day');
 
-      describe.each(testCases)('in %p input', segment => {
-        const formatter = getValueFormatter(segment);
+        describe('Up arrow', () => {
+          test('calls handler with value +1', () => {
+            const { input } = renderSegment({
+              segment: 'day',
+              onChange: onChangeHandler,
+              value: formatter(15),
+            });
 
-        const minValue = defaultMin[segment];
-        const maxValue = defaultMax[segment];
-        const defaultValue = round(mean([minValue, maxValue]));
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(16),
+              }),
+            );
+          });
+
+          test('calls handler with default `min` if initially undefined', () => {
+            const { input } = renderSegment({
+              segment: 'day',
+              onChange: onChangeHandler,
+              value: '',
+            });
+
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(defaultMin['day']) }),
+            );
+          });
+
+          test('calls handler with default `min` when the new value is greater than the `max` value', () => {
+            const { input } = renderSegment({
+              segment: 'day',
+              onChange: onChangeHandler,
+              value: formatter(defaultMax['day']),
+            });
+
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(defaultMin['day']) }),
+            );
+          });
+
+          test('calls handler with provided `min` prop if initially undefined', () => {
+            const { input } = renderSegment({
+              segment: 'day',
+              onChange: onChangeHandler,
+              value: '',
+              min: 5,
+            });
+
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(5) }),
+            );
+          });
+
+          test('calls handler with provided `min` prop when the new value is greater than the `max` value', () => {
+            const { input } = renderSegment({
+              segment: 'day',
+              onChange: onChangeHandler,
+              value: formatter(defaultMax['day']),
+              min: 5,
+            });
+
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(5) }),
+            );
+          });
+        });
+
+        describe('Down arrow', () => {
+          test('calls handler with value -1', () => {
+            const { input } = renderSegment({
+              segment: 'day',
+              onChange: onChangeHandler,
+              value: formatter(15),
+            });
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(14),
+              }),
+            );
+          });
+
+          test('calls handler with default `max` if initially undefined', () => {
+            const { input } = renderSegment({
+              segment: 'day',
+              onChange: onChangeHandler,
+              value: '',
+            });
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(defaultMax['day']) }),
+            );
+          });
+
+          test('calls handler with default `max` value when the new value is less than the `min` value', () => {
+            const { input } = renderSegment({
+              segment: 'day',
+              onChange: onChangeHandler,
+              value: formatter(defaultMin['day']),
+            });
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(defaultMax['day']) }),
+            );
+          });
+
+          test('calls handler with provided `max` prop if initially undefined', () => {
+            const { input } = renderSegment({
+              segment: 'day',
+              onChange: onChangeHandler,
+              value: '',
+              max: 25,
+            });
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(25) }),
+            );
+          });
+
+          test('calls handler with provided `max` prop value when the new value is less than the `min` value', () => {
+            const { input } = renderSegment({
+              segment: 'day',
+              onChange: onChangeHandler,
+              value: formatter(defaultMin['day']),
+              max: 25,
+            });
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({ value: formatter(25) }),
+            );
+          });
+        });
+      });
+
+      describe('month input', () => {
+        const formatter = getValueFormatter('month');
 
         describe('Up arrow', () => {
           test('calls handler with value +1', () => {
-            const result = render(
-              <DateInputSegment
-                segment={segment}
-                onChange={onChangeHandler}
-                value={`${defaultValue}`}
-              />,
-            );
-            const input = result.getByTestId('lg-date_picker_input-segment');
+            const { input } = renderSegment({
+              segment: 'month',
+              onChange: onChangeHandler,
+              value: formatter(6),
+            });
+
             userEvent.type(input, '{arrowup}');
             expect(onChangeHandler).toHaveBeenCalledWith(
-              expect.objectContaining({ value: formatter(defaultValue + 1) }),
+              expect.objectContaining({
+                value: formatter(7),
+              }),
             );
           });
 
-          test('calls handler with `min` if initially undefined', () => {
-            const result = render(
-              <DateInputSegment
-                value=""
-                onChange={onChangeHandler}
-                segment={segment}
-              />,
+          test('calls handler with default `min` if initially undefined', () => {
+            const { input } = renderSegment({
+              segment: 'month',
+              onChange: onChangeHandler,
+              value: '',
+            });
+
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(defaultMin['month']),
+              }),
             );
-            const input = result.getByTestId('lg-date_picker_input-segment');
+          });
+
+          test('calls handler with default `min` when the new value is greater than the `max` value', () => {
+            const { input } = renderSegment({
+              segment: 'month',
+              onChange: onChangeHandler,
+              value: formatter(defaultMax['month']),
+            });
 
             userEvent.type(input, '{arrowup}');
             expect(onChangeHandler).toHaveBeenCalledWith(
-              expect.objectContaining({ value: formatter(minValue) }),
+              expect.objectContaining({
+                value: formatter(defaultMin['month']),
+              }),
             );
           });
 
-          test('calls handler with `min` when the new value is greater than the `max` value', () => {
-            const result = render(
-              <DateInputSegment
-                onChange={onChangeHandler}
-                segment={segment}
-                value={`${maxValue}`}
-              />,
+          test('calls handler with provided `min` prop if initially undefined', () => {
+            const { input } = renderSegment({
+              segment: 'month',
+              onChange: onChangeHandler,
+              value: '',
+              min: 5,
+            });
+
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(5),
+              }),
             );
-            const input = result.getByTestId('lg-date_picker_input-segment');
+          });
+
+          test('calls handler with provided `min` prop when the new value is greater than the `max` value', () => {
+            const { input } = renderSegment({
+              segment: 'month',
+              onChange: onChangeHandler,
+              value: formatter(defaultMax['month']),
+              min: 5,
+            });
 
             userEvent.type(input, '{arrowup}');
             expect(onChangeHandler).toHaveBeenCalledWith(
-              expect.objectContaining({ value: formatter(minValue) }),
+              expect.objectContaining({
+                value: formatter(5),
+              }),
             );
           });
         });
 
         describe('Down arrow', () => {
           test('calls handler with value -1', () => {
-            const result = render(
-              <DateInputSegment
-                segment={segment}
-                onChange={onChangeHandler}
-                value={`${defaultValue}`}
-              />,
+            const { input } = renderSegment({
+              segment: 'month',
+              onChange: onChangeHandler,
+              value: formatter(6),
+            });
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(5),
+              }),
+            );
+          });
+
+          test('calls handler with default `max` if initially undefined', () => {
+            const { input } = renderSegment({
+              segment: 'month',
+              onChange: onChangeHandler,
+              value: '',
+            });
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(defaultMax['month']),
+              }),
+            );
+          });
+
+          test('calls handler with default `max` value when the new value is less than the `min` value', () => {
+            const { input } = renderSegment({
+              segment: 'month',
+              onChange: onChangeHandler,
+              value: formatter(defaultMin['month']),
+            });
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(defaultMax['month']),
+              }),
+            );
+          });
+
+          test('calls handler with provided `max` prop if initially undefined', () => {
+            const { input } = renderSegment({
+              segment: 'month',
+              onChange: onChangeHandler,
+              value: '',
+              max: 10,
+            });
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(10),
+              }),
+            );
+          });
+
+          test('calls handler with provided `max` prop value when the new value is less than the `min` value', () => {
+            const { input } = renderSegment({
+              segment: 'month',
+              onChange: onChangeHandler,
+              value: formatter(defaultMin['month']),
+              max: 10,
+            });
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(10),
+              }),
+            );
+          });
+        });
+      });
+
+      describe('year input', () => {
+        const formatter = getValueFormatter('year');
+
+        describe('Up arrow', () => {
+          test('calls handler with value +1', () => {
+            const { input } = renderSegment({
+              segment: 'year',
+              onChange: onChangeHandler,
+              value: formatter(1993),
+            });
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(1994),
+              }),
+            );
+          });
+
+          test('calls handler with default `min` if initially undefined', () => {
+            const { input } = renderSegment({
+              segment: 'year',
+              onChange: onChangeHandler,
+              value: '',
+            });
+
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(defaultMin['year']),
+              }),
+            );
+          });
+
+          test('calls handler with default `min` when the new value is greater than the `max` value', () => {
+            const { input } = renderSegment({
+              segment: 'year',
+              onChange: onChangeHandler,
+              value: formatter(defaultMax['year']),
+            });
+
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(defaultMin['year']),
+              }),
+            );
+          });
+
+          test('calls handler with provided `min` prop if initially undefined', () => {
+            const { input } = renderSegment({
+              segment: 'year',
+              onChange: onChangeHandler,
+              value: '',
+              min: 1969,
+            });
+
+            userEvent.type(input, '{arrowup}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(1969),
+              }),
+            );
+          });
+
+          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),
+              }),
             );
-            const input = result.getByTestId('lg-date_picker_input-segment');
+          });
+        });
+
+        describe('Down arrow', () => {
+          test('calls handler with value -1', () => {
+            const { input } = renderSegment({
+              segment: 'year',
+              onChange: onChangeHandler,
+              value: formatter(1993),
+            });
             userEvent.type(input, '{arrowdown}');
             expect(onChangeHandler).toHaveBeenCalledWith(
-              expect.objectContaining({ value: formatter(defaultValue - 1) }),
+              expect.objectContaining({
+                value: formatter(1992),
+              }),
             );
           });
 
-          test('calls handler with `max` if initially undefined', () => {
-            const result = render(
-              <DateInputSegment
-                value=""
-                onChange={onChangeHandler}
-                segment={segment}
-              />,
+          test('calls handler with default `max` if initially undefined', () => {
+            const { input } = renderSegment({
+              segment: 'year',
+              onChange: onChangeHandler,
+              value: '',
+            });
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(defaultMax['year']),
+              }),
             );
-            const input = result.getByTestId('lg-date_picker_input-segment');
+          });
+
+          test('calls handler with default `max` value when the new value is less than the `min` value', () => {
+            const { input } = renderSegment({
+              segment: 'year',
+              onChange: onChangeHandler,
+              value: formatter(defaultMin['year']),
+            });
 
             userEvent.type(input, '{arrowdown}');
             expect(onChangeHandler).toHaveBeenCalledWith(
-              expect.objectContaining({ value: formatter(maxValue) }),
+              expect.objectContaining({
+                value: formatter(defaultMax['year']),
+              }),
             );
           });
 
-          test('calls handler with `max` value when the new value is less than the `min` value', () => {
-            const result = render(
-              <DateInputSegment
-                onChange={onChangeHandler}
-                segment={segment}
-                value={`${minValue}`}
-              />,
+          test('calls handler with provided `max` prop if initially undefined', () => {
+            const { input } = renderSegment({
+              segment: 'year',
+              onChange: onChangeHandler,
+              value: '',
+              max: 2000,
+            });
+
+            userEvent.type(input, '{arrowdown}');
+            expect(onChangeHandler).toHaveBeenCalledWith(
+              expect.objectContaining({
+                value: formatter(2000),
+              }),
             );
-            const input = result.getByTestId('lg-date_picker_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(maxValue) }),
+              expect.objectContaining({
+                value: formatter(2000),
+              }),
             );
           });
         });
diff --git a/packages/date-picker/src/shared/utils/getMaxSegmentValue/getMaxSegmentValue.spec.ts b/packages/date-picker/src/shared/utils/getMaxSegmentValue/getMaxSegmentValue.spec.ts
new file mode 100644
index 0000000000..f1ae0ecd36
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getMaxSegmentValue/getMaxSegmentValue.spec.ts
@@ -0,0 +1,31 @@
+import { Month } from '../../constants';
+import { newUTC } from '../newUTC';
+
+import { getMaxSegmentValue } from '.';
+
+describe('packages/date-picker/utils/getMinSegmentValue', () => {
+  describe('day', () => {
+    test('returns 1 by default', () => {
+      expect(getMaxSegmentValue('day')).toBe(31);
+    });
+    test.todo('returns max day in provided month');
+  });
+
+  describe('month', () => {
+    test('returns 1 by default', () => {
+      expect(getMaxSegmentValue('month')).toBe(12);
+    });
+  });
+
+  describe('year', () => {
+    test('returns 2038 by default', () => {
+      expect(getMaxSegmentValue('year')).toBe(2038);
+    });
+
+    test('returns provided max year', () => {
+      expect(
+        getMaxSegmentValue('year', { max: newUTC(2003, Month.December, 26) }),
+      ).toBe(2003);
+    });
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts b/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts
new file mode 100644
index 0000000000..1337cb7182
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts
@@ -0,0 +1,21 @@
+import { defaultMax } from '../../constants';
+import { DateSegment } from '../../hooks';
+import { DateType } from '../../types';
+import { getSegmentsFromDate } from '../getSegmentsFromDate';
+
+/** Returns the maximum value for a segment, given a context */
+export const getMaxSegmentValue = (
+  segment: DateSegment,
+  context?: {
+    date?: DateType;
+    max?: Date;
+  },
+): number => {
+  if (segment === 'year') {
+    return context?.max
+      ? Number(getSegmentsFromDate(context.max)['year'])
+      : defaultMax['year'];
+  }
+
+  return defaultMax[segment];
+};
diff --git a/packages/date-picker/src/shared/utils/getMinSegmentValue/getMinSegmentValue.spec.ts b/packages/date-picker/src/shared/utils/getMinSegmentValue/getMinSegmentValue.spec.ts
new file mode 100644
index 0000000000..49d22b890c
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getMinSegmentValue/getMinSegmentValue.spec.ts
@@ -0,0 +1,30 @@
+import { Month } from '../../constants';
+import { newUTC } from '../newUTC';
+
+import { getMinSegmentValue } from '.';
+
+describe('packages/date-picker/utils/getMinSegmentValue', () => {
+  describe('day', () => {
+    test('returns 1 by default', () => {
+      expect(getMinSegmentValue('day')).toBe(1);
+    });
+  });
+
+  describe('month', () => {
+    test('returns 1 by default', () => {
+      expect(getMinSegmentValue('month')).toBe(1);
+    });
+  });
+
+  describe('year', () => {
+    test('returns 1970 by default', () => {
+      expect(getMinSegmentValue('year')).toBe(1970);
+    });
+
+    test('returns provided min year', () => {
+      expect(
+        getMinSegmentValue('year', { min: newUTC(1967, Month.March, 10) }),
+      ).toBe(1967);
+    });
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/getMinSegmentValue/index.ts b/packages/date-picker/src/shared/utils/getMinSegmentValue/index.ts
new file mode 100644
index 0000000000..0733b229ec
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getMinSegmentValue/index.ts
@@ -0,0 +1,21 @@
+import { defaultMin } from '../../constants';
+import { DateSegment } from '../../hooks';
+import { DateType } from '../../types';
+import { getSegmentsFromDate } from '../getSegmentsFromDate';
+
+/** Returns the minimum value for a segment, given a context */
+export const getMinSegmentValue = (
+  segment: DateSegment,
+  context?: {
+    date?: DateType;
+    min?: Date;
+  },
+): number => {
+  if (segment === 'year') {
+    return context?.min
+      ? Number(getSegmentsFromDate(context.min)['year'])
+      : defaultMin['year'];
+  }
+
+  return defaultMin[segment];
+};
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index 34d47e9cc5..2b3df54057 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -11,6 +11,8 @@ export { getFormattedDateString } from './getFormattedDateString';
 export { getFullMonthLabel } from './getFullMonthLabel';
 export { getISODate } from './getISODate';
 export { getLastOfMonth } from './getLastOfMonth';
+export { getMaxSegmentValue } from './getMaxSegmentValue';
+export { getMinSegmentValue } from './getMinSegmentValue';
 export { getMonthIndex } from './getMonthIndex';
 export { getMonthName } from './getMonthName';
 export { getRemainingParts } from './getRemainingParts';

From 78ad91c600cc1f10abe80740eaef2fdd39529ab3 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Mon, 4 Dec 2023 13:26:18 -0500
Subject: [PATCH 301/351] Update DatePicker.spec.tsx (#2110)

---
 .../date-picker/src/DatePicker/DatePicker.spec.tsx    | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index cca486e069..83d0f8b517 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -248,6 +248,17 @@ describe('packages/date-picker', () => {
         expect(yearSelect).toHaveValue('2023');
       });
 
+      test('if value is invalid, menu still opens to the month of that value', async () => {
+        const { openMenu } = renderDatePicker({
+          value: new Date(Date.UTC(2100, Month.July, 10)),
+        });
+        const { calendarGrid, calendarCells } = await openMenu();
+        expect(calendarGrid).toHaveAttribute('aria-label', 'July 2100');
+        calendarCells.forEach(cell => {
+          expect(cell).toHaveAttribute('aria-disabled', 'true');
+        });
+      });
+
       test('renders the appropriate number of cells', async () => {
         const { openMenu } = renderDatePicker({
           value: new Date(Date.UTC(2024, Month.February, 14)),

From 546117f46aa8bb7b7c14ef3ec2abda7b7bb8d9ed Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Mon, 4 Dec 2023 14:33:36 -0500
Subject: [PATCH 302/351] Fix Chromatic failures (#2111)

* Creat segmentRefsMock

* Update DatePickerInput.stories.tsx

* Update DateInputBox.stories.tsx
---
 .../DatePickerInput.stories.tsx               | 37 ++++---------------
 .../getRelativeSegment.spec.tsx               | 15 +++-----
 .../DateInputBox/DateInputBox.spec.tsx        |  8 +---
 .../DateInputBox/DateInputBox.stories.tsx     | 22 ++++-------
 .../date-picker/src/shared/utils/testutils.ts |  8 ++++
 5 files changed, 29 insertions(+), 61 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index dc6f65e4a8..11766a3757 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -1,8 +1,6 @@
 /* eslint-disable react/prop-types */
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { StoryFn } from '@storybook/react';
-import { isValid } from 'date-fns';
-import { isUndefined } from 'lodash';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
@@ -17,7 +15,6 @@ import { DatePickerProps } from '../DatePicker.types';
 import {
   SingleDateContextProps,
   SingleDateProvider,
-  SingleDateProviderProps,
 } from '../SingleDateContext';
 
 import { DatePickerInput } from './DatePickerInput';
@@ -30,7 +27,9 @@ const ProviderWrapper = (Story: StoryFn, ctx: any) => {
   return (
     <LeafyGreenProvider darkMode={contextProps.darkMode}>
       <DatePickerProvider {...contextProps}>
-        <Story {...componentProps} />
+        <SingleDateProvider value={componentProps.value} setValue={() => {}}>
+          <Story {...componentProps} />
+        </SingleDateProvider>
       </DatePickerProvider>
     </LeafyGreenProvider>
   );
@@ -46,7 +45,7 @@ const meta: StoryMetaType<
   parameters: {
     default: null,
     controls: {
-      exclude: ['segmentRefs'],
+      exclude: ['segmentRefs', 'onChange', 'onSegmentChange', 'onClick'],
     },
     generate: {
       combineArgs: {
@@ -70,28 +69,6 @@ const meta: StoryMetaType<
 
 export default meta;
 
-export const Basic: StoryFn<DatePickerProps & SingleDateProviderProps> = ({
-  value,
-}) => {
-  const [date, setDate] = useState<Date | null>(null);
+export const Basic: StoryFn<DatePickerProps> = () => <DatePickerInput />;
 
-  useEffect(() => {
-    if (value && isValid(new Date(value))) {
-      setDate(new Date(value));
-    }
-  }, [value]);
-
-  const updateDate = (date?: Date | null) => {
-    if (!isUndefined(date)) {
-      setDate(date);
-    }
-  };
-
-  return (
-    <SingleDateProvider value={date} setValue={updateDate}>
-      <DatePickerInput />
-    </SingleDateProvider>
-  );
-};
-
-export const Generated = () => {};
+export const Generated: StoryFn<DatePickerProps> = () => <></>;
diff --git a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
index 1d6ad1cb90..0ad7e6e85b 100644
--- a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
+++ b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
@@ -2,21 +2,16 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { SegmentRefs } from '../../../shared/hooks';
+import { segmentRefsMock } from '../../../shared/utils/testutils';
 
 import { getRelativeSegment } from '.';
 
 const renderTestComponent = () => {
-  const segmentRefs: SegmentRefs = {
-    day: React.createRef<HTMLInputElement>(),
-    month: React.createRef<HTMLInputElement>(),
-    year: React.createRef<HTMLInputElement>(),
-  };
-
   const result = render(
     <>
-      <input data-testid="day" ref={segmentRefs.day} />
-      <input data-testid="month" ref={segmentRefs.month} />
-      <input data-testid="year" ref={segmentRefs.year} />
+      <input data-testid="day" ref={segmentRefsMock.day} />
+      <input data-testid="month" ref={segmentRefsMock.month} />
+      <input data-testid="year" ref={segmentRefsMock.year} />
     </>,
   );
 
@@ -32,7 +27,7 @@ const renderTestComponent = () => {
 
   return {
     ...result,
-    segmentRefs,
+    segmentRefs: segmentRefsMock,
     elements,
   };
 };
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
index 0cc5eefb95..4fd8f3f43e 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -4,8 +4,8 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Month } from '../../../constants';
-import { SegmentRefs } from '../../../hooks';
 import { newUTC } from '../../../utils';
+import { segmentRefsMock } from '../../../utils/testutils';
 import {
   DatePickerProvider,
   DatePickerProviderProps,
@@ -19,12 +19,6 @@ const renderDateInputBox = (
   props?: Omit<DateInputBoxProps, 'segmentRefs'>,
   context?: Partial<DatePickerProviderProps>,
 ) => {
-  const segmentRefsMock: SegmentRefs = {
-    day: React.createRef(),
-    month: React.createRef(),
-    year: React.createRef(),
-  };
-
   const result = render(
     <DatePickerProvider {...defaultDatePickerContext} {...context}>
       <DateInputBox
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
index 7432205066..4ac9fffe03 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { createRef, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { StoryFn } from '@storybook/react';
 import { isValid } from 'date-fns';
 
@@ -8,7 +8,7 @@ import { pickAndOmit, StoryMetaType, StoryType } from '@leafygreen-ui/lib';
 
 import { Month } from '../../../constants';
 import { newUTC } from '../../../utils';
-import { Locales } from '../../../utils/testutils';
+import { Locales, segmentRefsMock } from '../../../utils/testutils';
 import {
   contextPropNames,
   DatePickerContextProps,
@@ -19,22 +19,16 @@ import { DateInputBox } from './DateInputBox';
 
 const testDate = newUTC(1993, Month.December, 26);
 
-const segmentRefs = {
-  day: createRef<HTMLInputElement>(),
-  month: createRef<HTMLInputElement>(),
-  year: createRef<HTMLInputElement>(),
-};
-
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => {
-  const [contextProps, componentProps] = pickAndOmit(
+  const [{ darkMode, ...contextProps }, componentProps] = pickAndOmit(
     ctx?.args,
     contextPropNames,
   );
 
   return (
-    <LeafyGreenProvider darkMode={contextProps.darkMode}>
+    <LeafyGreenProvider darkMode={darkMode}>
       <DatePickerProvider {...contextProps}>
-        <Story {...componentProps} />
+        <Story {...componentProps} segmentRefs={segmentRefsMock} />
       </DatePickerProvider>
     </LeafyGreenProvider>
   );
@@ -46,7 +40,7 @@ const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
   decorators: [ProviderWrapper],
   parameters: {
     controls: {
-      exclude: ['onSegmentChange', 'setValue'],
+      exclude: ['onSegmentChange', 'setValue', 'segmentRefs'],
     },
     default: null,
     generate: {
@@ -88,13 +82,13 @@ export const Basic: StoryFn<typeof DateInputBox> = props => {
     <DateInputBox
       value={date}
       setValue={updateDate}
-      segmentRefs={segmentRefs}
+      segmentRefs={segmentRefsMock}
     />
   );
 };
 
 export const Static: StoryFn<typeof DateInputBox> = () => {
-  return <DateInputBox value={testDate} segmentRefs={segmentRefs} />;
+  return <DateInputBox value={testDate} segmentRefs={segmentRefsMock} />;
 };
 
 export const Formats: StoryType<
diff --git a/packages/date-picker/src/shared/utils/testutils.ts b/packages/date-picker/src/shared/utils/testutils.ts
index 1fa0c249ca..90fb1add7d 100644
--- a/packages/date-picker/src/shared/utils/testutils.ts
+++ b/packages/date-picker/src/shared/utils/testutils.ts
@@ -1,3 +1,4 @@
+import { createRef } from 'react';
 import { StoryContext } from '@storybook/react';
 import userEvent from '@testing-library/user-event';
 import { range } from 'lodash';
@@ -10,9 +11,16 @@ import {
   DatePickerProviderProps,
   defaultDatePickerContext,
 } from '../components/DatePickerContext';
+import { SegmentRefs } from '../hooks';
 import { BaseDatePickerProps } from '../types';
 import { pickAndOmit } from '../utils';
 
+export const segmentRefsMock: SegmentRefs = {
+  day: createRef<HTMLInputElement>(),
+  month: createRef<HTMLInputElement>(),
+  year: createRef<HTMLInputElement>(),
+};
+
 /** Time zones used to test with */
 export const TimeZones = [
   'Pacific/Honolulu',

From ed75e7c8749da9782d26edddfa55c19761e85048 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Mon, 4 Dec 2023 16:18:20 -0500
Subject: [PATCH 303/351] Date Picker [LG-3826] Calendar month menu jump
 (#2112)

* adds tests

* rm logic from menu header
---
 .../src/DatePicker/DatePicker.spec.tsx        | 32 +++++++++++++++++++
 .../DatePickerMenuHeader.tsx                  | 17 +++-------
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 83d0f8b517..00d6a38e2d 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1958,6 +1958,38 @@ describe('packages/date-picker', () => {
       describe('Changing the year', () => {
         test.todo('is announced in an aria-live region');
 
+        describe('displays the same month', () => {
+          test('when the month is in range', async () => {
+            const { openMenu, findAllByRole } = renderDatePicker({
+              value: newUTC(2006, Month.July, 4),
+              min: newUTC(1996, Month.January, 1),
+            });
+
+            const { yearSelect, calendarGrid } = await openMenu();
+            userEvent.click(yearSelect!);
+            const options = await findAllByRole('option');
+            const firstYear = options[0]; // 1996
+            userEvent.click(firstYear);
+
+            expect(calendarGrid).toHaveAttribute('aria-label', 'July 1996');
+          });
+
+          test('when the month is not in range', async () => {
+            const { openMenu, findAllByRole } = renderDatePicker({
+              value: newUTC(2006, Month.July, 4),
+              min: newUTC(1996, Month.September, 10),
+            });
+
+            const { yearSelect, calendarGrid } = await openMenu();
+            userEvent.click(yearSelect!);
+            const options = await findAllByRole('option');
+            const firstYear = options[0]; // 1996
+            userEvent.click(firstYear);
+
+            expect(calendarGrid).toHaveAttribute('aria-label', 'July 1996');
+          });
+        });
+
         describe('shows the correct date in the input', () => {
           test('after selecting a year and clicking a cell', async () => {
             const { openMenu, findAllByRole, dayInput, monthInput, yearInput } =
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
index 8414236e17..a90e48a741 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
@@ -1,5 +1,4 @@
 import React, { forwardRef, MouseEventHandler } from 'react';
-import { isBefore } from 'date-fns';
 import range from 'lodash/range';
 
 import Icon from '@leafygreen-ui/icon';
@@ -31,23 +30,15 @@ export const DatePickerMenuHeader = forwardRef<
   HTMLDivElement,
   DatePickerMenuHeaderProps
 >(({ setMonth, ...rest }: DatePickerMenuHeaderProps, fwdRef) => {
-  const { min, max, isInRange, setIsSelectOpen } = useDatePickerContext();
+  const { min, max, setIsSelectOpen } = useDatePickerContext();
   const { month } = useSingleDateContext();
 
   const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
 
   const updateMonth = (newMonth: Date) => {
-    // TODO: may need to update this function to check if the months are in range
-    // (could cause errors when the min date is near the end of the month)
-    if (isInRange(newMonth)) {
-      setMonth(newMonth);
-    } else if (isBefore(newMonth, min)) {
-      // if the selected month is not in range,
-      // set the month to the first or last possible month
-      setMonth(min);
-    } else {
-      setMonth(max);
-    }
+    // We don't do any checks here.
+    // If the month is out of range, we still display it
+    setMonth(newMonth);
   };
 
   /**

From 5dc82680be80a23c3f5eb20919d77d8aa6436f53 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Tue, 5 Dec 2023 10:48:38 -0500
Subject: [PATCH 304/351] Date Picker [LG-3838] truncate selects (#2113)

* add placeholder

* add tests
---
 .../DatePickerMenu/DatePickerMenu.styles.ts   |  14 +-
 .../DatePickerMenuHeader.spec.tsx             | 128 ++++++++++++++++++
 .../DatePickerMenuHeader.tsx                  |   8 +-
 .../getMonthOptions/getMonthOptions.spec.ts   |  18 +++
 .../utils/getMonthOptions/index.ts            |   3 +
 5 files changed, 168 insertions(+), 3 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
index cb4d158628..92237c7dc6 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.styles.ts
@@ -39,7 +39,19 @@ export const menuCalendarGridStyles = css`
   margin: auto;
 `;
 
+export const selectTruncateStyles = css`
+  button {
+    > div {
+      &:last-of-type {
+        div {
+          overflow: unset;
+        }
+      }
+    }
+  }
+`;
+
 // Hardcoding the width
 export const selectInputWidthStyles = css`
-  width: 70px;
+  width: 68px;
 `;
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
index 228c41ba03..2e4cf0eeee 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
@@ -127,6 +127,134 @@ describe('packages/date-picker/menu/header', () => {
           expect(element).not.toHaveAttribute('aria-disabled', 'true');
         }
       });
+
+      describe('When `year` is after `max`', () => {
+        test('all options are disabled', async () => {
+          const { getByLabelText, findAllByRole } = render(
+            <MockDatePickerProvider
+              value={{
+                ...defaultDatePickerContext,
+                min: newUTC(2022, Month.March, 10),
+                max: newUTC(2024, Month.September, 10),
+              }}
+            >
+              <MockSingleDateProvider
+                value={
+                  {
+                    month: newUTC(2025, Month.July, 5),
+                  } as SingleDateContextProps
+                }
+              >
+                <DatePickerMenuHeader setMonth={() => {}} />
+              </MockSingleDateProvider>
+            </MockDatePickerProvider>,
+          );
+
+          const monthSelect = getByLabelText('Select month');
+
+          userEvent.click(monthSelect);
+
+          const options = await findAllByRole('option');
+
+          for (const element of options) {
+            expect(element).toBeInTheDocument();
+
+            expect(element).toHaveAttribute('aria-disabled', 'true');
+          }
+        });
+
+        test('placeholder text renders the invalid month/year', async () => {
+          const { getByLabelText } = render(
+            <MockDatePickerProvider
+              value={{
+                ...defaultDatePickerContext,
+                min: newUTC(2022, Month.March, 10),
+                max: newUTC(2024, Month.September, 10),
+              }}
+            >
+              <MockSingleDateProvider
+                value={
+                  {
+                    month: newUTC(2025, Month.July, 5),
+                  } as SingleDateContextProps
+                }
+              >
+                <DatePickerMenuHeader setMonth={() => {}} />
+              </MockSingleDateProvider>
+            </MockDatePickerProvider>,
+          );
+
+          const monthSelect = getByLabelText('Select month');
+          const yearSelect = getByLabelText('Select year');
+
+          expect(monthSelect).toHaveTextContent('Jul');
+          expect(yearSelect).toHaveTextContent('2025');
+        });
+      });
+
+      describe('When `year` is before `min`', () => {
+        test('all options are disabled', async () => {
+          const { getByLabelText, findAllByRole } = render(
+            <MockDatePickerProvider
+              value={{
+                ...defaultDatePickerContext,
+                min: newUTC(2022, Month.March, 10),
+                max: newUTC(2024, Month.September, 10),
+              }}
+            >
+              <MockSingleDateProvider
+                value={
+                  {
+                    month: newUTC(2021, Month.July, 5),
+                  } as SingleDateContextProps
+                }
+              >
+                <DatePickerMenuHeader setMonth={() => {}} />
+              </MockSingleDateProvider>
+            </MockDatePickerProvider>,
+          );
+
+          const monthSelect = getByLabelText('Select month');
+
+          userEvent.click(monthSelect);
+
+          const options = await findAllByRole('option');
+
+          for (const element of options) {
+            expect(element).toBeInTheDocument();
+
+            expect(element).toHaveAttribute('aria-disabled', 'true');
+          }
+        });
+
+        test('placeholder text renders the invalid month/year', async () => {
+          const { getByLabelText } = render(
+            <MockDatePickerProvider
+              value={{
+                ...defaultDatePickerContext,
+                min: newUTC(2022, Month.March, 10),
+                max: newUTC(2024, Month.September, 10),
+              }}
+            >
+              <MockSingleDateProvider
+                value={
+                  {
+                    month: newUTC(2021, Month.July, 5),
+                  } as SingleDateContextProps
+                }
+              >
+                <DatePickerMenuHeader setMonth={() => {}} />
+              </MockSingleDateProvider>
+            </MockDatePickerProvider>,
+          );
+
+          const monthSelect = getByLabelText('Select month');
+          const yearSelect = getByLabelText('Select year');
+
+          expect(monthSelect).toHaveTextContent('Jul');
+          expect(yearSelect).toHaveTextContent('2021');
+        });
+      });
     });
   });
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
index a90e48a741..120d556ba9 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
@@ -1,6 +1,7 @@
 import React, { forwardRef, MouseEventHandler } from 'react';
 import range from 'lodash/range';
 
+import { cx } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import { Option, Select } from '@leafygreen-ui/select';
@@ -13,6 +14,7 @@ import {
   menuHeaderSelectContainerStyles,
   menuHeaderStyles,
   selectInputWidthStyles,
+  selectTruncateStyles,
 } from '../DatePickerMenu.styles';
 
 import { shouldMonthBeEnabled } from './utils/getMonthOptions';
@@ -77,9 +79,10 @@ export const DatePickerMenuHeader = forwardRef<
             const newMonth = setUTCMonth(month, Number(m));
             updateMonth(newMonth);
           }}
-          className={selectInputWidthStyles}
+          className={cx(selectTruncateStyles, selectInputWidthStyles)}
           onEntered={() => setIsSelectOpen(true)}
           onExited={() => setIsSelectOpen(false)}
+          placeholder={Months[month.getUTCMonth()].short}
         >
           {Months.map((m, i) => (
             <Option
@@ -100,9 +103,10 @@ export const DatePickerMenuHeader = forwardRef<
             const newMonth = setUTCYear(month, Number(y));
             updateMonth(newMonth);
           }}
-          className={selectInputWidthStyles}
+          className={cx(selectTruncateStyles, selectInputWidthStyles)}
           onEntered={() => setIsSelectOpen(true)}
           onExited={() => setIsSelectOpen(false)}
+          placeholder={month.getUTCFullYear().toString()}
         >
           {yearOptions.map(y => (
             <Option value={y.toString()} key={y} aria-label={y.toString()}>
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/getMonthOptions.spec.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/getMonthOptions.spec.ts
index 17effe21b8..26e9f9f17d 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/getMonthOptions.spec.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/getMonthOptions.spec.ts
@@ -85,5 +85,23 @@ describe('packages/date-picker/menu/utils/shouldMonthBeEnabled', () => {
         }),
       ).toBeTruthy();
     });
+
+    test('returns false when the year is before the min year', () => {
+      expect(
+        shouldMonthBeEnabled('July', {
+          month: newUTC(2024, Month.March, 10),
+          min: newUTC(2025, Month.September, 10),
+        }),
+      ).toBeFalsy();
+    });
+
+    test('returns false when the year is after the max year', () => {
+      expect(
+        shouldMonthBeEnabled('July', {
+          month: newUTC(2026, Month.March, 10),
+          max: newUTC(2025, Month.September, 10),
+        }),
+      ).toBeFalsy();
+    });
   });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts
index 84e29185c1..731590bc12 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts
@@ -25,6 +25,9 @@ export const shouldMonthBeEnabled = (
   const minYear = context.min?.getUTCFullYear();
   const maxYear = context.max?.getUTCFullYear();
 
+  if (year && minYear && year < minYear) return false;
+  if (year && maxYear && year > maxYear) return false;
+
   if (month && min && year === minYear) {
     if (monthIndex < min.getUTCMonth()) return false;
     return true;

From cbe91f946102e0e73acfa8335d0cfa3d36e1a8b3 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Tue, 5 Dec 2023 16:53:59 -0500
Subject: [PATCH 305/351] increase z-index (#2116)

---
 .../components/Calendar/CalendarCell/CalendarCell.styles.ts     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.styles.ts b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.styles.ts
index 40e0717b6f..f2c7b4c50c 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.styles.ts
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.styles.ts
@@ -206,6 +206,7 @@ export const calendarCellHighlightStyles: Record<Theme, string> = {
   [Theme.Light]: css`
     ${highlightSelector} {
       outline: none;
+      z-index: 1;
 
       & > .${indicatorClassName} {
         box-shadow: ${calendarCellFocusRing.light};
@@ -215,6 +216,7 @@ export const calendarCellHighlightStyles: Record<Theme, string> = {
   [Theme.Dark]: css`
     ${highlightSelector} {
       outline: none;
+      z-index: 1;
 
       & > .${indicatorClassName} {
         box-shadow: ${calendarCellFocusRing.dark};

From d9426b8a6b1c24061b71c68ac2eaf8ff8948e55c Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Wed, 6 Dec 2023 14:01:38 -0500
Subject: [PATCH 306/351] Date Picker [LG-3829] space press (#2115)

* wip

* wip, might be working

* clean up

* comment

* add tests

* add more tests

* move tests

* update tests

* even more tests

* clean up

* testing

* fix tests
---
 .../src/DatePicker/DatePicker.spec.tsx        | 170 ++++++++++++++++++
 .../DatePickerInput/DatePickerInput.tsx       |   5 +
 .../DateInputSegment.spec.tsx                 |  48 ++++-
 .../DateInputSegment/DateInputSegment.tsx     |  13 +-
 4 files changed, 233 insertions(+), 3 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 00d6a38e2d..5db71c92ff 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1357,6 +1357,176 @@ describe('packages/date-picker', () => {
       });
 
       describe('typing a single segment', () => {
+        describe('typing space', () => {
+          describe('single space', () => {
+            describe('does not fire a segment value change', () => {
+              test('when the value prop is set', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                  value: newUTC(2023, Month.December, 25),
+                });
+                userEvent.type(yearInput, '{space}');
+                expect(onChange).not.toHaveBeenCalled();
+              });
+
+              test('when typing another digit', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                });
+                userEvent.type(yearInput, '{space}2');
+                expect(onChange).not.toHaveBeenCalledWith(
+                  expect.objectContaining({ value: ' 2' }),
+                );
+              });
+
+              test('when there is no value', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                });
+                userEvent.type(yearInput, '{space}');
+                expect(onChange).not.toHaveBeenCalled();
+              });
+            });
+
+            describe('renders the correct value when the space is', () => {
+              test('at the start of a value', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                });
+                userEvent.type(yearInput, '{space}2023');
+                expect(yearInput.value).toBe('2023');
+              });
+
+              test('at the end of a value', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                });
+                userEvent.type(yearInput, '2023{space}');
+                expect(yearInput.value).toBe('2023');
+              });
+
+              test('between a value', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                });
+                userEvent.type(yearInput, '202{space}3');
+                expect(yearInput.value).toBe('2023');
+              });
+
+              test('in multiple spots', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                });
+                userEvent.type(yearInput, '2{space}0{space}2{space}3{space}');
+                expect(yearInput.value).toBe('2023');
+              });
+            });
+
+            test('opens the menu', async () => {
+              const { yearInput, findMenuElements } = renderDatePicker({});
+              userEvent.type(yearInput, '{space}');
+              const { menuContainerEl } = await findMenuElements();
+              expect(menuContainerEl).toBeInTheDocument();
+            });
+          });
+
+          describe('double space', () => {
+            describe('does not fire a segment value change', () => {
+              test('when the value prop is set', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                  value: newUTC(2023, Month.December, 25),
+                });
+                userEvent.type(yearInput, '{space}{space}');
+                expect(onChange).not.toHaveBeenCalled();
+              });
+
+              test('when typing another digit', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                });
+                userEvent.type(yearInput, '{space}{space}2');
+                expect(onChange).not.toHaveBeenCalledWith(
+                  expect.objectContaining({ value: ' 2' }),
+                );
+              });
+
+              test('when there is no value', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                });
+                userEvent.type(yearInput, '{space}{space}');
+                expect(onChange).not.toHaveBeenCalled();
+              });
+
+              test('in multiple spots', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                });
+                userEvent.type(
+                  yearInput,
+                  '2{space}{space}0{space}{space}2{space}{space}3{space}{space}',
+                );
+                expect(yearInput.value).toBe('2023');
+              });
+            });
+
+            describe('renders the correct value when the space is', () => {
+              test('at the start of a value', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                });
+                userEvent.type(yearInput, '{space}{space}2023');
+                expect(yearInput.value).toBe('2023');
+              });
+
+              test('at the end of a value', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                });
+                userEvent.type(yearInput, '2023{space}{space}');
+                expect(yearInput.value).toBe('2023');
+              });
+
+              test('between a value', () => {
+                const onChange = jest.fn();
+
+                const { yearInput } = renderDatePicker({
+                  onChange,
+                });
+                userEvent.type(yearInput, '202{space}{space}3');
+                expect(yearInput.value).toBe('2023');
+              });
+            });
+          });
+        });
+
         test('does not fire a value change handler', () => {
           const onDateChange = jest.fn();
           const { yearInput } = renderDatePicker({
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 4bea4e83e0..ef6d15447b 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -148,6 +148,11 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           break;
         }
 
+        case keyMap.Space: {
+          openMenu();
+          break;
+        }
+
         case keyMap.Enter:
         case keyMap.Escape:
         case keyMap.Tab:
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 9d4f750cff..3b6d3f7f78 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
@@ -711,6 +711,52 @@ describe('packages/date-picker/shared/date-input-segment', () => {
         });
       });
     });
-    test.todo('Space Key');
+    describe('Space Key', () => {
+      describe('on a single SPACE', () => {
+        describe('does not call the onChangeHandler ', () => {
+          test('when the input is initially empty', () => {
+            const { input } = renderSegment({
+              onChange: onChangeHandler,
+            });
+
+            userEvent.type(input, '{space}');
+            expect(onChangeHandler).not.toHaveBeenCalled();
+          });
+
+          test('when the input has a value', () => {
+            const { input } = renderSegment({
+              onChange: onChangeHandler,
+              value: '12',
+            });
+
+            userEvent.type(input, '{space}');
+            expect(onChangeHandler).not.toHaveBeenCalled();
+          });
+        });
+      });
+
+      describe('on a double SPACE', () => {
+        describe('does not call the onChangeHandler ', () => {
+          test('when the input is initially empty', () => {
+            const { input } = renderSegment({
+              onChange: onChangeHandler,
+            });
+
+            userEvent.type(input, '{space}{space}');
+            expect(onChangeHandler).not.toHaveBeenCalled();
+          });
+
+          test('when the input has a value', () => {
+            const { input } = renderSegment({
+              onChange: onChangeHandler,
+              value: '12',
+            });
+
+            userEvent.type(input, '{space}{space}');
+            expect(onChangeHandler).not.toHaveBeenCalled();
+          });
+        });
+      });
+    });
   });
 });
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 a2b3cc6e9d..842f06b3fd 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -67,9 +67,18 @@ export const DateInputSegment = React.forwardRef<
     /** Prevent non-numeric values from triggering a change event */
     const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
       const { target } = e;
+      const containsPeriod = /\./.test(target.value);
+      let prevValue = value ?? '';
+
+      // macOS adds a period when pressing SPACE twice inside a text input.
+      // If there is a period replace the value with the prevValue.
+      if (containsPeriod) target.value = prevValue;
+
+      const isEqualToPrevValue = target.value === prevValue;
       const numericValue = Number(target.value);
 
-      if (!isNaN(numericValue)) {
+      if (!isNaN(numericValue) && !isEqualToPrevValue) {
+        prevValue = target.value;
         const newValue = truncateStart(target.value, {
           length: charsPerSegment[segment],
         });
@@ -126,7 +135,7 @@ export const DateInputSegment = React.forwardRef<
         }
 
         case keyMap.Space: {
-          // TODO:
+          e.preventDefault();
           break;
         }
 

From 3cc5d7edcc46f218c698e2d255047950831a618b Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Wed, 6 Dec 2023 14:51:03 -0500
Subject: [PATCH 307/351] Date picker [LG-3816, LG-3859] Timezone bugs (#2114)

* use local today value. memoize on date number

* add today highlight tests

* update context tz value when Intl object changes

* use isSameTZDay for current day highlights

* Fix and test local date changes

* Test user defined dates

* mv testutils

* ignore testutils directory in validate script

* clear mocks
---
 .changeset/spotty-wombats-end.md              |   5 +
 .../src/DatePicker/DatePicker.spec.tsx        |   5 +-
 .../src/DatePicker/DatePicker.stories.tsx     |   5 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 150 ++++++++++++++----
 .../DatePickerMenu/DatePickerMenu.stories.tsx |  38 ++++-
 .../DatePickerMenu/DatePickerMenu.tsx         |   6 +-
 .../SingleDateContext/SingleDateContext.tsx   |  16 +-
 .../getRelativeSegment.spec.tsx               |   2 +-
 .../CalendarGrid/CalendarGrid.stories.tsx     |   2 +-
 .../DateInputBox/DateInputBox.spec.tsx        |   2 +-
 .../DateInputBox/DateInputBox.stories.tsx     |   2 +-
 .../DatePickerContext.utils.ts                |  10 +-
 .../eventContainingTargetValue/index.ts       |   5 +
 .../getProviderPropsFromStoryContext/index.ts |  39 +++++
 .../date-picker/src/shared/testutils/index.ts |   8 +
 .../shared/testutils/mockTimeZone/index.ts    |  62 ++++++++
 .../mockTimeZone/mockTimeZone.spec.ts         |  50 ++++++
 .../src/shared/testutils/tabNTimes/index.ts   |   9 ++
 .../src/shared/testutils/testValues.ts        |  32 ++++
 .../src/shared/utils/isSameTZDay/index.ts     |   2 +-
 .../date-picker/src/shared/utils/testutils.ts |  83 ----------
 tools/validate/src/dependencies/config.ts     |   2 +-
 22 files changed, 387 insertions(+), 148 deletions(-)
 create mode 100644 .changeset/spotty-wombats-end.md
 create mode 100644 packages/date-picker/src/shared/testutils/eventContainingTargetValue/index.ts
 create mode 100644 packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
 create mode 100644 packages/date-picker/src/shared/testutils/index.ts
 create mode 100644 packages/date-picker/src/shared/testutils/mockTimeZone/index.ts
 create mode 100644 packages/date-picker/src/shared/testutils/mockTimeZone/mockTimeZone.spec.ts
 create mode 100644 packages/date-picker/src/shared/testutils/tabNTimes/index.ts
 create mode 100644 packages/date-picker/src/shared/testutils/testValues.ts
 delete mode 100644 packages/date-picker/src/shared/utils/testutils.ts

diff --git a/.changeset/spotty-wombats-end.md b/.changeset/spotty-wombats-end.md
new file mode 100644
index 0000000000..0ee350e5b1
--- /dev/null
+++ b/.changeset/spotty-wombats-end.md
@@ -0,0 +1,5 @@
+---
+'@lg-tools/validate': patch
+---
+
+Updates dev file pattern to include entire `testutils/` directories
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 5db71c92ff..244d16bb00 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -13,6 +13,7 @@ import { addDays, subDays } from 'date-fns';
 import { transitionDuration } from '@leafygreen-ui/tokens';
 
 import { defaultMax, defaultMin, Month } from '../shared/constants';
+import { eventContainingTargetValue, tabNTimes } from '../shared/testutils';
 import {
   getFormattedDateString,
   getISODate,
@@ -21,10 +22,6 @@ import {
   setUTCMonth,
   setUTCYear,
 } from '../shared/utils';
-import {
-  eventContainingTargetValue,
-  tabNTimes,
-} from '../shared/utils/testutils';
 
 import {
   expectedTabStopLabels,
diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
index 81001d4840..ec197657ad 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
@@ -13,9 +13,9 @@ import {
   DatePickerProvider,
 } from '../shared/components/DatePickerContext';
 import { Month } from '../shared/constants';
+import { Locales, TimeZones } from '../shared/testutils';
 import { AutoComplete } from '../shared/types';
 import { newUTC } from '../shared/utils';
-import { Locales, TimeZones } from '../shared/utils/testutils';
 
 import { DatePicker } from './DatePicker';
 import { getProviderPropsFromStoryArgs } from './DatePicker.testutils';
@@ -65,7 +65,6 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
     dateFormat: 'iso8601',
     label: 'Pick a date',
     size: Size.Default,
-    timeZone: 'America/New_York',
     autoComplete: AutoComplete.Off,
   },
   argTypes: {
@@ -77,7 +76,7 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
     max: { control: 'date' },
     size: { control: 'select' },
     state: { control: 'select' },
-    timeZone: { control: 'select', options: TimeZones },
+    timeZone: { control: 'select', options: [undefined, ...TimeZones] },
     autoComplete: { control: 'select', options: Object.values(AutoComplete) },
   },
 };
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 8cb5ac6313..b606a2e00f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -6,9 +6,9 @@ import { addDays } from 'date-fns';
 import {
   DatePickerProvider,
   DatePickerProviderProps,
-  defaultDatePickerContext,
 } from '../../shared/components/DatePickerContext';
 import { Month } from '../../shared/constants';
+import { mockTimeZone, testTimeZones } from '../../shared/testutils';
 import { getISODate, newUTC, setUTCDate } from '../../shared/utils';
 import {
   SingleDateProvider,
@@ -17,13 +17,13 @@ import {
 
 import { DatePickerMenu, DatePickerMenuProps } from '.';
 
-const testToday = new Date(Date.UTC(2023, Month.September, 10));
-const testValue = new Date(Date.UTC(2023, Month.September, 14));
+const testToday = newUTC(2023, Month.September, 10);
+const testValue = newUTC(2023, Month.September, 14);
 
-const standardTimeEndDate = new Date(Date.UTC(2023, Month.March, 11));
-const daylightTimeStartDate = new Date(Date.UTC(2023, Month.March, 12));
-const daylightTimeEndDate = new Date(Date.UTC(2023, Month.November, 5));
-const standardTimeStartDate = new Date(Date.UTC(2023, Month.November, 6));
+const standardTimeEndDate = newUTC(2023, Month.March, 11);
+const daylightTimeStartDate = newUTC(2023, Month.March, 12);
+const daylightTimeEndDate = newUTC(2023, Month.November, 5);
+const standardTimeStartDate = newUTC(2023, Month.November, 6);
 
 const renderDatePickerMenu = (
   props?: Partial<DatePickerMenuProps> | null,
@@ -31,11 +31,7 @@ const renderDatePickerMenu = (
   context?: Partial<DatePickerProviderProps> | null,
 ) => {
   const result = render(
-    <DatePickerProvider
-      {...defaultDatePickerContext}
-      {...context}
-      initialOpen={true}
-    >
+    <DatePickerProvider label="" {...context} initialOpen={true}>
       <SingleDateProvider
         value={null}
         setValue={() => {}}
@@ -52,11 +48,7 @@ const renderDatePickerMenu = (
     newSingleContext?: Partial<SingleDateProviderProps> | null,
   ) =>
     result.rerender(
-      <DatePickerProvider
-        {...defaultDatePickerContext}
-        {...context}
-        initialOpen={true}
-      >
+      <DatePickerProvider label="" {...context} initialOpen={true}>
         <SingleDateProvider
           value={null}
           setValue={() => {}}
@@ -84,6 +76,9 @@ const renderDatePickerMenu = (
   const getCellWithValue = (date: Date) =>
     calendarGrid.querySelector(`[data-iso="${getISODate(date)}"]`);
 
+  const getCellWithISOString = (isoStr: string) =>
+    calendarGrid.querySelector(`[data-iso="${isoStr}"]`);
+
   const leftChevron = result?.queryByLabelText('Previous month');
   const rightChevron = result?.queryByLabelText('Next month');
 
@@ -94,6 +89,7 @@ const renderDatePickerMenu = (
     calendarCells,
     todayCell,
     getCellWithValue,
+    getCellWithISOString,
     leftChevron,
     rightChevron,
   };
@@ -137,6 +133,32 @@ describe('packages/date-picker/date-picker-menu', () => {
       expect(yearSelect).toHaveValue('2023');
     });
 
+    test('sets `aria-current` on today cell', () => {
+      jest.setSystemTime(
+        newUTC(2023, Month.September, 10, 0, testToday.getTimezoneOffset()),
+      );
+      const { getCellWithISOString } = renderDatePickerMenu();
+      expect(getCellWithISOString('2023-09-10')).toHaveAttribute(
+        'aria-current',
+        'true',
+      );
+    });
+
+    test('default highlight is on today', () => {
+      const { todayCell } = renderDatePickerMenu();
+      userEvent.tab();
+      expect(todayCell).toHaveFocus();
+    });
+
+    test('highlight starts on current value when provided', () => {
+      const { getCellWithValue } = renderDatePickerMenu(null, {
+        value: testValue,
+      });
+      userEvent.tab();
+      const valueCell = getCellWithValue(testValue);
+      expect(valueCell).toHaveFocus();
+    });
+
     describe('rendered cells', () => {
       test('have correct `aria-label`', () => {
         const { todayCell } = renderDatePickerMenu();
@@ -167,21 +189,6 @@ describe('packages/date-picker/date-picker-menu', () => {
       });
     });
 
-    test('default highlight is on today', () => {
-      const { todayCell } = renderDatePickerMenu();
-      userEvent.tab();
-      expect(todayCell).toHaveFocus();
-    });
-
-    test('highlight starts on current value when provided', () => {
-      const { getCellWithValue } = renderDatePickerMenu(null, {
-        value: testValue,
-      });
-      userEvent.tab();
-      const valueCell = getCellWithValue(testValue);
-      expect(valueCell).toHaveFocus();
-    });
-
     describe('when value is out of range', () => {
       test('grid is labelled', () => {
         const { calendarGrid } = renderDatePickerMenu(null, {
@@ -209,6 +216,85 @@ describe('packages/date-picker/date-picker-menu', () => {
         expect(isSomeCellHighlighted).toBe(false);
       });
     });
+
+    describe('when system date changes', () => {
+      describe.each(testTimeZones)(
+        'when system time zone is $tz',
+        ({ tz, UTCOffset }) => {
+          beforeEach(() => {
+            mockTimeZone(tz, UTCOffset);
+            jest.useFakeTimers();
+          });
+          afterEach(() => {
+            jest.clearAllMocks();
+          });
+
+          test('cell marked as `current` updates', () => {
+            const dec24Local = newUTC(
+              2023,
+              Month.December,
+              24,
+              23 - UTCOffset,
+              59,
+            );
+
+            const dec25Local = newUTC(
+              2023,
+              Month.December,
+              25,
+              0 - UTCOffset,
+              0,
+            );
+
+            jest.setSystemTime(dec24Local);
+
+            const { getCellWithISOString, rerenderDatePickerMenu } =
+              renderDatePickerMenu();
+            const dec24Cell = getCellWithISOString('2023-12-24');
+            expect(dec24Cell).toHaveAttribute('aria-current', 'true');
+
+            jest.setSystemTime(dec25Local);
+
+            rerenderDatePickerMenu();
+            const dec25LocalCell = getCellWithISOString('2023-12-25');
+            expect(dec25LocalCell).toHaveAttribute('aria-current', 'true');
+          });
+
+          describe.each(testTimeZones)(
+            'and timeZone prop is $tz',
+            ({ tz: tzProp, UTCOffset: propOffset }) => {
+              test('cell marked as `current` updates', () => {
+                const dec24Local = newUTC(
+                  2023,
+                  Month.December,
+                  24,
+                  23 - propOffset,
+                  59,
+                );
+
+                const dec25Local = newUTC(
+                  2023,
+                  Month.December,
+                  25,
+                  0 - propOffset,
+                  0,
+                );
+
+                jest.setSystemTime(dec24Local);
+                const { getCellWithISOString, rerenderDatePickerMenu } =
+                  renderDatePickerMenu(null, null, { timeZone: tzProp });
+                const dec24Cell = getCellWithISOString('2023-12-24');
+                expect(dec24Cell).toHaveAttribute('aria-current', 'true');
+                jest.setSystemTime(dec25Local);
+                rerenderDatePickerMenu();
+                const dec25Cell = getCellWithISOString('2023-12-25');
+                expect(dec25Cell).toHaveAttribute('aria-current', 'true');
+              });
+            },
+          );
+        },
+      );
+    });
   });
 
   describe('Keyboard navigation', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 21743432e1..97b47949fe 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -17,6 +17,7 @@ import {
   defaultDatePickerContext,
 } from '../../shared/components/DatePickerContext';
 import { Month } from '../../shared/constants';
+import { Locales, TimeZones } from '../../shared/testutils';
 import { newUTC } from '../../shared/utils';
 import { getProviderPropsFromStoryArgs } from '../DatePicker.testutils';
 import {
@@ -37,9 +38,6 @@ const MenuDecorator: Decorator = (Story: StoryFn, ctx: any) => {
     ctx.args,
   );
 
-  // Force `new Date()` to return `mockToday`
-  MockDate.set(mockToday);
-
   return (
     <LeafyGreenProvider darkMode={contextProps.darkMode}>
       <DatePickerProvider
@@ -65,13 +63,13 @@ const meta: StoryMetaType<typeof DatePickerMenu, DecoratorArgs> = {
   },
   args: {
     isOpen: true,
-    dateFormat: 'en-UK',
-    timeZone: 'Europe/London',
     min: new Date('1996-10-14'),
     max: new Date('2026-10-14'),
   },
   argTypes: {
     value: { control: 'date' },
+    dateFormat: { control: 'select', options: Locales },
+    timeZone: { control: 'select', options: [undefined, ...TimeZones] },
   },
 };
 
@@ -81,13 +79,16 @@ type DatePickerMenuStoryType = StoryObj<typeof DatePickerMenu>;
 
 export const Basic: DatePickerMenuStoryType = {
   render: args => {
+    MockDate.reset();
     const [value, setValue] = useState<Date | null>(null);
 
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
     return (
       <SingleDateProvider value={value} setValue={setValue}>
-        <code ref={refEl}>refEl</code>
+        <InlineCode ref={refEl}>
+          Today: {new Date(Date.now()).toUTCString()}
+        </InlineCode>
         <DatePickerMenu {...props} refEl={refEl} />
       </SingleDateProvider>
     );
@@ -96,6 +97,8 @@ export const Basic: DatePickerMenuStoryType = {
 
 export const WithValue: DatePickerMenuStoryType = {
   render: args => {
+    MockDate.reset();
+
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
     return (
@@ -104,7 +107,9 @@ export const WithValue: DatePickerMenuStoryType = {
         setValue={() => {}}
       >
         <div style={{ minHeight: '50vh' }}>
-          <InlineCode ref={refEl}>refEl</InlineCode>
+          <InlineCode ref={refEl}>
+            Today: {new Date(Date.now()).toUTCString()}
+          </InlineCode>
           <DatePickerMenu {...props} refEl={refEl} />
         </div>
       </SingleDateProvider>
@@ -112,6 +117,25 @@ export const WithValue: DatePickerMenuStoryType = {
   },
 };
 
+export const MockedToday: DatePickerMenuStoryType = {
+  render: args => {
+    // Force `new Date()` to return `mockToday`
+    MockDate.set(mockToday);
+    const [value, setValue] = useState<Date | null>(null);
+
+    const props = omit(args, [...contextPropNames, 'isOpen']);
+    const refEl = useRef<HTMLDivElement>(null);
+    return (
+      <SingleDateProvider value={value} setValue={setValue}>
+        <InlineCode ref={refEl}>
+          Today: {new Date(Date.now()).toUTCString()}
+        </InlineCode>
+        <DatePickerMenu {...props} refEl={refEl} />
+      </SingleDateProvider>
+    );
+  },
+};
+
 export const DarkMode: DatePickerMenuStoryType = {
   ...WithValue,
   args: {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 3b9573f157..c463affb3e 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -22,6 +22,7 @@ import {
   getFullMonthLabel,
   getISODate,
   getUTCDateString,
+  isSameTZDay,
   isSameUTCDay,
   isSameUTCMonth,
 } from '../../shared/utils';
@@ -38,7 +39,7 @@ import { DatePickerMenuHeader } from './DatePickerMenuHeader';
 
 export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
   ({ onKeyDown, ...rest }: DatePickerMenuProps, fwdRef) => {
-    const { isInRange, isOpen, setIsDirty } = useDatePickerContext();
+    const { isInRange, isOpen, setIsDirty, timeZone } = useDatePickerContext();
     const {
       refs,
       today,
@@ -225,6 +226,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
         className={menuWrapperStyles}
         usePortal
         onKeyDown={handleMenuKeyPress}
+        data-today={today.toISOString()}
         {...rest}
       >
         <div className={menuContentStyles}>
@@ -247,7 +249,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
                 ref={cellRefs(getISODate(day))}
                 aria-label={getUTCDateString(day)}
                 isHighlighted={isSameUTCDay(day, highlight)}
-                isCurrent={isSameUTCDay(day, today)}
+                isCurrent={isSameTZDay(today, day, timeZone)}
                 state={getCellState(day)}
                 onClick={cellClickHandlerForDay(day)}
                 data-iso={getISODate(day)}
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
index 45fc0d2611..ddb62dab40 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
@@ -11,12 +11,7 @@ import React, {
 
 import { usePrevious } from '@leafygreen-ui/hooks';
 
-import {
-  DateType,
-  getFirstOfMonth,
-  setToUTCMidnight,
-  useDatePickerContext,
-} from '../../shared';
+import { DateType, getFirstOfMonth, useDatePickerContext } from '../../shared';
 import {
   getFormattedDateString,
   getISODate,
@@ -58,7 +53,14 @@ export const SingleDateProvider = ({
   } = useDatePickerContext();
   const prevValue = usePrevious(value);
 
-  const today = useMemo(() => setToUTCMidnight(new Date(Date.now())), []);
+  const hour = new Date(Date.now()).getHours();
+
+  // Update this value every hour
+  const today = useMemo(
+    () => new Date(Date.now()),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hour],
+  );
 
   /**
    * Keep track of the displayed month
diff --git a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
index 0ad7e6e85b..b40df97311 100644
--- a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
+++ b/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { SegmentRefs } from '../../../shared/hooks';
-import { segmentRefsMock } from '../../../shared/utils/testutils';
+import { segmentRefsMock } from '../../../shared/testutils';
 
 import { getRelativeSegment } from '.';
 
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index 195cec540d..e635d14dda 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -6,8 +6,8 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
 import { Month } from '../../../constants';
+import { Locales, TimeZones } from '../../../testutils';
 import { getISODate, isTodayTZ, newUTC } from '../../../utils';
-import { Locales, TimeZones } from '../../../utils/testutils';
 import {
   DatePickerContextProps,
   DatePickerProvider,
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
index 4fd8f3f43e..ae8b64f14d 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -4,8 +4,8 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Month } from '../../../constants';
+import { segmentRefsMock } from '../../../testutils';
 import { newUTC } from '../../../utils';
-import { segmentRefsMock } from '../../../utils/testutils';
 import {
   DatePickerProvider,
   DatePickerProviderProps,
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
index 4ac9fffe03..5ccdd5f5c5 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -7,8 +7,8 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { pickAndOmit, StoryMetaType, StoryType } from '@leafygreen-ui/lib';
 
 import { Month } from '../../../constants';
+import { Locales, segmentRefsMock } from '../../../testutils';
 import { newUTC } from '../../../utils';
-import { Locales, segmentRefsMock } from '../../../utils/testutils';
 import {
   contextPropNames,
   DatePickerContextProps,
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
index efff263f35..ec1344fbd8 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
@@ -17,8 +17,6 @@ import {
   DatePickerProviderProps,
 } from './DatePickerContext.types';
 
-export const TZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
-
 export type ContextPropKeys = keyof DatePickerProviderProps &
   keyof BaseDatePickerProps;
 
@@ -46,7 +44,7 @@ export const defaultDatePickerContext: DatePickerContextProps = {
   label: '',
   description: '',
   dateFormat: 'iso8601',
-  timeZone: TZ,
+  timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   min: MIN_DATE,
   max: MAX_DATE,
   isOpen: false,
@@ -93,9 +91,13 @@ export const getIsInRange =
 export const getContextProps = (
   providerProps: DatePickerProviderProps,
 ): DatePickerContextProps => {
-  const { min, max, ...rest } = providerProps;
+  const { min, max, timeZone, ...rest } = providerProps;
   const providerValue: DatePickerContextProps = {
     ...defaults(rest, defaultDatePickerContext),
+    timeZone: defaultTo(
+      timeZone,
+      Intl.DateTimeFormat().resolvedOptions().timeZone,
+    ),
     min: defaultTo(toDate(min), defaultDatePickerContext.min),
     max: defaultTo(toDate(max), defaultDatePickerContext.max),
   };
diff --git a/packages/date-picker/src/shared/testutils/eventContainingTargetValue/index.ts b/packages/date-picker/src/shared/testutils/eventContainingTargetValue/index.ts
new file mode 100644
index 0000000000..cc66e1b9b8
--- /dev/null
+++ b/packages/date-picker/src/shared/testutils/eventContainingTargetValue/index.ts
@@ -0,0 +1,5 @@
+/** Returns a jest object containing the expected target value  */
+export const eventContainingTargetValue = (value: any) =>
+  expect.objectContaining({
+    target: expect.objectContaining({ value }),
+  });
diff --git a/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts b/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
new file mode 100644
index 0000000000..6aa884e598
--- /dev/null
+++ b/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
@@ -0,0 +1,39 @@
+import { StoryContext } from '@storybook/react';
+
+import { LeafyGreenProviderProps } from '@leafygreen-ui/leafygreen-provider';
+
+import {
+  ContextPropKeys,
+  contextPropNames,
+  DatePickerProviderProps,
+  defaultDatePickerContext,
+} from '../../components/DatePickerContext';
+import { BaseDatePickerProps } from '../../types';
+import { pickAndOmit } from '../../utils';
+
+export interface ProviderPropsObject<T> {
+  leafyGreenProviderProps: LeafyGreenProviderProps;
+  datePickerProviderProps: DatePickerProviderProps;
+  storyProps: T;
+}
+
+export const getProviderPropsFromStoryContext = <P = BaseDatePickerProps>(
+  ctx: StoryContext<Partial<P & DatePickerProviderProps>>,
+): ProviderPropsObject<Partial<Omit<P, ContextPropKeys>>> => {
+  const [
+    { darkMode, baseFontSize, ...datePickerProviderProps },
+    { ...storyProps },
+  ] = pickAndOmit(ctx.args, [...contextPropNames]);
+
+  return {
+    leafyGreenProviderProps: {
+      darkMode,
+      baseFontSize: baseFontSize === 13 ? 14 : baseFontSize,
+    },
+    datePickerProviderProps: {
+      ...defaultDatePickerContext,
+      ...datePickerProviderProps,
+    },
+    storyProps,
+  };
+};
diff --git a/packages/date-picker/src/shared/testutils/index.ts b/packages/date-picker/src/shared/testutils/index.ts
new file mode 100644
index 0000000000..53aacfe84e
--- /dev/null
+++ b/packages/date-picker/src/shared/testutils/index.ts
@@ -0,0 +1,8 @@
+export { eventContainingTargetValue } from './eventContainingTargetValue';
+export {
+  getProviderPropsFromStoryContext,
+  type ProviderPropsObject,
+} from './getProviderPropsFromStoryContext';
+export { mockTimeZone } from './mockTimeZone';
+export { tabNTimes } from './tabNTimes';
+export * from './testValues';
diff --git a/packages/date-picker/src/shared/testutils/mockTimeZone/index.ts b/packages/date-picker/src/shared/testutils/mockTimeZone/index.ts
new file mode 100644
index 0000000000..3fc1e1c6f8
--- /dev/null
+++ b/packages/date-picker/src/shared/testutils/mockTimeZone/index.ts
@@ -0,0 +1,62 @@
+import timezoneMock, { TimeZone } from 'timezone-mock';
+
+/**
+ * Mocks the `timeZone` returned from the `Intl.DateTimeFormat`,
+ * and the `getTimeZoneOffset` returned from `Date`
+ * @param timeZone IANA time zone string
+ * @param UTCOffset UTC offset (in hours)
+ */
+export const mockTimeZone = (timeZone: string, UTCOffset: number) => {
+  timezoneMock.register(
+    `Etc/GMT${UTCOffset >= 0 ? '+' : ''}${UTCOffset}` as TimeZone,
+    {
+      Date,
+    },
+  );
+
+  const realDTFOptions = Intl.DateTimeFormat().resolvedOptions();
+
+  /** DTF.resolvedOptions */
+  global.Intl.DateTimeFormat.prototype.resolvedOptions = jest
+    .fn()
+    .mockImplementation(() => ({
+      ...realDTFOptions,
+      timeZone,
+    }));
+
+  /** getTimezoneOffset */
+  global.Date.prototype.getTimezoneOffset = jest
+    .fn()
+    .mockImplementation(() => UTCOffset * 60);
+
+  /** getDate */
+  global.Date.prototype.getDate = jest
+    .fn()
+    .mockImplementation(function getDate() {
+      /// @ts-expect-error - typeof `this` is unknown
+      const utcDate: number = (this as Date).getUTCDate();
+      /// @ts-expect-error - typeof `this` is unknown
+      const utcHrs: number = (this as Date).getUTCHours();
+
+      const adjustedHr = utcHrs + UTCOffset;
+      const daysOffset = adjustedHr >= 24 ? 1 : adjustedHr < 0 ? -1 : 0;
+      return utcDate + daysOffset;
+    });
+
+  /** getHours */
+  global.Date.prototype.getHours = jest
+    .fn()
+    .mockImplementation(function getHours() {
+      /// @ts-expect-error - typeof `this` is unknown
+      const utcHrs: number = (this as Date).getUTCHours();
+      const adjustedHrs = utcHrs + UTCOffset;
+      const hours =
+        adjustedHrs >= 24
+          ? adjustedHrs % 24
+          : adjustedHrs < 0
+          ? adjustedHrs + 24
+          : adjustedHrs;
+
+      return hours;
+    });
+};
diff --git a/packages/date-picker/src/shared/testutils/mockTimeZone/mockTimeZone.spec.ts b/packages/date-picker/src/shared/testutils/mockTimeZone/mockTimeZone.spec.ts
new file mode 100644
index 0000000000..bd9a0eac2a
--- /dev/null
+++ b/packages/date-picker/src/shared/testutils/mockTimeZone/mockTimeZone.spec.ts
@@ -0,0 +1,50 @@
+import { Month } from '../../constants';
+import { testTimeZones } from '../testValues';
+
+import { mockTimeZone } from '.';
+
+describe('packages/date-picker/testutils/', () => {
+  describe('mockTimeZone', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+    afterEach(() => {
+      jest.clearAllMocks();
+      jest.restoreAllMocks();
+    });
+
+    describe.each(testTimeZones)('$tz', ({ tz, UTCOffset }) => {
+      beforeEach(() => {
+        mockTimeZone(tz, UTCOffset);
+      });
+
+      test('midnight local', () => {
+        const mockToday = new Date(
+          Date.UTC(2020, Month.October, 14, -UTCOffset),
+        );
+        jest.setSystemTime(mockToday);
+
+        expect(Intl.DateTimeFormat().resolvedOptions().timeZone).toBe(tz);
+        expect(mockToday.getTimezoneOffset()).toBe(UTCOffset * 60);
+
+        const now = new Date(Date.now());
+        expect(now.getDate()).toBe(14);
+        expect(now.getHours()).toBe(0);
+        expect(now.getMinutes()).toBe(0);
+      });
+
+      test('midnight UTC', () => {
+        const mockToday = new Date(Date.UTC(2020, Month.December, 25, 0));
+        jest.setSystemTime(mockToday);
+
+        expect(Intl.DateTimeFormat().resolvedOptions().timeZone).toBe(tz);
+        expect(mockToday.getTimezoneOffset()).toBe(UTCOffset * 60);
+
+        const now = new Date(Date.now());
+        expect(now.getDate()).toBe(UTCOffset < 0 ? 24 : 25);
+        expect(now.getHours()).toBe(UTCOffset < 0 ? 24 + UTCOffset : UTCOffset);
+        expect(now.getMinutes()).toBe(0);
+      });
+    });
+  });
+});
diff --git a/packages/date-picker/src/shared/testutils/tabNTimes/index.ts b/packages/date-picker/src/shared/testutils/tabNTimes/index.ts
new file mode 100644
index 0000000000..fbc9825b5b
--- /dev/null
+++ b/packages/date-picker/src/shared/testutils/tabNTimes/index.ts
@@ -0,0 +1,9 @@
+import userEvent from '@testing-library/user-event';
+import { range } from 'lodash';
+
+/** Presses the `tab` key `count` times */
+export const tabNTimes = (count: number) => {
+  for (const _ in range(count)) {
+    userEvent.tab();
+  }
+};
diff --git a/packages/date-picker/src/shared/testutils/testValues.ts b/packages/date-picker/src/shared/testutils/testValues.ts
new file mode 100644
index 0000000000..c5ccd4233b
--- /dev/null
+++ b/packages/date-picker/src/shared/testutils/testValues.ts
@@ -0,0 +1,32 @@
+import { createRef } from 'react';
+
+import { SegmentRefs } from '../hooks';
+
+export const segmentRefsMock: SegmentRefs = {
+  day: createRef<HTMLInputElement>(),
+  month: createRef<HTMLInputElement>(),
+  year: createRef<HTMLInputElement>(),
+};
+
+export const testTimeZones = [
+  { tz: 'Pacific/Honolulu', UTCOffset: -10 },
+  { tz: 'America/Los_Angeles', UTCOffset: -8 },
+  { tz: 'America/New_York', UTCOffset: -5 },
+  { tz: 'Europe/London', UTCOffset: +0 },
+  { tz: 'Asia/Istanbul', UTCOffset: +3 },
+  { tz: 'Asia/Seoul', UTCOffset: +9 },
+  { tz: 'Pacific/Auckland', UTCOffset: +13 },
+] as const;
+
+/** Time zones used to test with */
+export const TimeZones = testTimeZones.map(({ tz }) => tz);
+
+/** Locales (date formats) to test with:
+ *
+ * English-US
+ * English-UK
+ * German (Germany) (uses `.` char separator)
+ * Farsi-Afghanistan (week starts on Sat)
+ * English-Maldives (week starts on Fri.)
+ */
+export const Locales = ['iso8601', 'en-US', 'en-UK', 'de-DE', 'fa-AF', 'en-MV'];
diff --git a/packages/date-picker/src/shared/utils/isSameTZDay/index.ts b/packages/date-picker/src/shared/utils/isSameTZDay/index.ts
index 31e05b8482..995a2b1e9c 100644
--- a/packages/date-picker/src/shared/utils/isSameTZDay/index.ts
+++ b/packages/date-picker/src/shared/utils/isSameTZDay/index.ts
@@ -19,7 +19,7 @@ import { isSameUTCDay } from '../isSameUTCDay';
  * ```
  *
  * @param zoned A Date object presumed to be in `timeZone`
- * @param utc A UTC Date objects
+ * @param utc A UTC Date object
  * @param timeZone An IANA timeZone string
  */
 export const isSameTZDay = (
diff --git a/packages/date-picker/src/shared/utils/testutils.ts b/packages/date-picker/src/shared/utils/testutils.ts
deleted file mode 100644
index 90fb1add7d..0000000000
--- a/packages/date-picker/src/shared/utils/testutils.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { createRef } from 'react';
-import { StoryContext } from '@storybook/react';
-import userEvent from '@testing-library/user-event';
-import { range } from 'lodash';
-
-import { LeafyGreenProviderProps } from '@leafygreen-ui/leafygreen-provider';
-
-import {
-  ContextPropKeys,
-  contextPropNames,
-  DatePickerProviderProps,
-  defaultDatePickerContext,
-} from '../components/DatePickerContext';
-import { SegmentRefs } from '../hooks';
-import { BaseDatePickerProps } from '../types';
-import { pickAndOmit } from '../utils';
-
-export const segmentRefsMock: SegmentRefs = {
-  day: createRef<HTMLInputElement>(),
-  month: createRef<HTMLInputElement>(),
-  year: createRef<HTMLInputElement>(),
-};
-
-/** Time zones used to test with */
-export const TimeZones = [
-  'Pacific/Honolulu',
-  'America/Los_Angeles',
-  'America/New_York',
-  'Europe/London',
-  'Asia/Istanbul',
-  'Asia/Seoul',
-  'Pacific/Auckland',
-];
-
-/** Locales (date formats) to test with:
- *
- * English-US
- * English-UK
- * German (Germany) (uses `.` char separator)
- * Farsi-Afghanistan (week starts on Sat)
- * English-Maldives (week starts on Fri.)
- */
-export const Locales = ['iso8601', 'en-US', 'en-UK', 'de-DE', 'fa-AF', 'en-MV'];
-
-/** Presses the `tab` key `count` times */
-export const tabNTimes = (count: number) => {
-  for (const _ in range(count)) {
-    userEvent.tab();
-  }
-};
-
-/** Returns a jest object containing the expected target value  */
-export const eventContainingTargetValue = (value: any) =>
-  expect.objectContaining({
-    target: expect.objectContaining({ value }),
-  });
-
-interface ProviderPropsObject<T> {
-  leafyGreenProviderProps: LeafyGreenProviderProps;
-  datePickerProviderProps: DatePickerProviderProps;
-  storyProps: T;
-}
-
-export const getProviderPropsFromStoryContext = <P = BaseDatePickerProps>(
-  ctx: StoryContext<Partial<P & DatePickerProviderProps>>,
-): ProviderPropsObject<Partial<Omit<P, ContextPropKeys>>> => {
-  const [
-    { darkMode, baseFontSize, ...datePickerProviderProps },
-    { ...storyProps },
-  ] = pickAndOmit(ctx.args, [...contextPropNames]);
-
-  return {
-    leafyGreenProviderProps: {
-      darkMode,
-      baseFontSize: baseFontSize === 13 ? 14 : baseFontSize,
-    },
-    datePickerProviderProps: {
-      ...defaultDatePickerContext,
-      ...datePickerProviderProps,
-    },
-    storyProps,
-  };
-};
diff --git a/tools/validate/src/dependencies/config.ts b/tools/validate/src/dependencies/config.ts
index 76d276a2cf..5fc01cf7d5 100644
--- a/tools/validate/src/dependencies/config.ts
+++ b/tools/validate/src/dependencies/config.ts
@@ -26,7 +26,7 @@ export const devFilePatterns: Array<RegExp> = [
   /.*.?stor(y|ies).(t|j)sx?/,
   /.*.stories.tsx?/,
   /.*.example.tsx?/,
-  /.*.testutils.tsx?/,
+  /.*.testutils((.tsx?)|(\/.*))/,
   /.*\/dist\/.*/,
 ];
 

From bc41ebb9625616b2b6f43ea8b228b9dad8d00878 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Wed, 6 Dec 2023 17:58:12 -0500
Subject: [PATCH 308/351] Date picker [LG-3854] No impossible dates (#2117)

* mv tests

* format all segments when explicit

* restrict d/m segment values to valid inputs

* Update DateInputSegment.tsx
---
 .../src/DatePicker/DatePicker.spec.tsx        | 269 +++++++++++-------
 .../DatePickerInput/DatePickerInput.tsx       |  25 +-
 .../DateInput/DateInputBox/DateInputBox.tsx   |  53 +++-
 .../DateInputSegment.spec.tsx                 |   6 +-
 .../DateInputSegment/DateInputSegment.tsx     |  21 +-
 .../calculateNewSegmentValue/index.ts         |  29 ++
 .../getRelativeSegment.spec.tsx               |  26 +-
 .../utils/getRelativeSegment/index.ts         | 107 ++++---
 .../date-picker/src/shared/utils/index.ts     |   4 +
 9 files changed, 344 insertions(+), 196 deletions(-)
 create mode 100644 packages/date-picker/src/shared/components/DateInput/DateInputSegment/calculateNewSegmentValue/index.ts
 rename packages/date-picker/src/{DatePicker => shared}/utils/getRelativeSegment/getRelativeSegment.spec.tsx (87%)
 rename packages/date-picker/src/{DatePicker => shared}/utils/getRelativeSegment/index.ts (54%)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 244d16bb00..0cd240b21f 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1353,7 +1353,46 @@ describe('packages/date-picker', () => {
         expect(menuContainerEl).not.toBeInTheDocument();
       });
 
-      describe('typing a single segment', () => {
+      describe('into a single segment', () => {
+        test('does not fire a value change handler', () => {
+          const onDateChange = jest.fn();
+          const { yearInput } = renderDatePicker({
+            onDateChange,
+          });
+          userEvent.type(yearInput, '2023');
+          expect(onDateChange).not.toHaveBeenCalled();
+        });
+
+        test('does not fire a validation handler', () => {
+          const handleValidation = jest.fn();
+          const { yearInput } = renderDatePicker({
+            handleValidation,
+          });
+          userEvent.type(yearInput, '2023');
+          expect(handleValidation).not.toHaveBeenCalled();
+        });
+
+        test('fires a segment change handler', () => {
+          const onChange = jest.fn();
+          const { yearInput } = renderDatePicker({
+            onChange,
+          });
+          userEvent.type(yearInput, '2023');
+          expect(onChange).toHaveBeenCalledWith(
+            eventContainingTargetValue('2023'),
+          );
+        });
+
+        test('does not immediately format the segment', () => {
+          const onChange = jest.fn();
+          const { monthInput } = renderDatePicker({ onChange });
+          userEvent.type(monthInput, '1');
+          expect(onChange).toHaveBeenCalledWith(
+            eventContainingTargetValue('1'),
+          );
+          expect(monthInput.value).toBe('1');
+        });
+
         describe('typing space', () => {
           describe('single space', () => {
             describe('does not fire a segment value change', () => {
@@ -1524,48 +1563,7 @@ describe('packages/date-picker', () => {
           });
         });
 
-        test('does not fire a value change handler', () => {
-          const onDateChange = jest.fn();
-          const { yearInput } = renderDatePicker({
-            onDateChange,
-          });
-          userEvent.type(yearInput, '2023');
-          expect(onDateChange).not.toHaveBeenCalled();
-        });
-
-        test('fires a segment change handler', () => {
-          const onChange = jest.fn();
-          const { yearInput } = renderDatePicker({
-            onChange,
-          });
-          userEvent.type(yearInput, '2023');
-          expect(onChange).toHaveBeenCalledWith(
-            eventContainingTargetValue('2023'),
-          );
-        });
-
-        test('does not immediately format the segment', () => {
-          const onChange = jest.fn();
-          const { dayInput } = renderDatePicker({ onChange });
-          userEvent.type(dayInput, '2');
-          expect(onChange).toHaveBeenCalledWith(
-            eventContainingTargetValue('2'),
-          );
-          expect(dayInput.value).toBe('2');
-        });
-
-        test('formats on segment blur', () => {
-          const onChange = jest.fn();
-          const { dayInput } = renderDatePicker({ onChange });
-          userEvent.type(dayInput, '2');
-          userEvent.tab();
-          expect(onChange).toHaveBeenCalledWith(
-            eventContainingTargetValue('02'),
-          );
-          expect(dayInput.value).toBe('02');
-        });
-
-        describe('auto-advance focus', () => {
+        describe('auto-formatting & auto-focus', () => {
           describe('for ISO format', () => {
             const dateFormat = 'iso8601';
 
@@ -1597,19 +1595,35 @@ describe('packages/date-picker', () => {
               userEvent.type(monthInput, '5');
               expect(dayInput).toHaveFocus();
             });
+            test('when day value is explicit, format the day', async () => {
+              const { dayInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(dayInput, '5');
+              expect(dayInput).toHaveFocus();
+              await waitFor(() => expect(dayInput).toHaveValue('05'));
+            });
 
-            test('focus does NOT advance when year value is ambiguous', () => {
+            test('when year value is ambiguous, focus does NOT advance', () => {
               const { yearInput } = renderDatePicker({ dateFormat });
               userEvent.type(yearInput, '200');
               expect(yearInput).toHaveFocus();
             });
-            test('focus does NOT advance when month value is ambiguous', () => {
+            test('when month value is ambiguous, focus does NOT advance', () => {
               const { monthInput } = renderDatePicker({
                 dateFormat,
               });
               userEvent.type(monthInput, '1');
               expect(monthInput).toHaveFocus();
             });
+            test('when day value is ambiguous, segment is NOT formatted', async () => {
+              const { dayInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(dayInput, '2');
+              expect(dayInput).toHaveFocus();
+              await waitFor(() => expect(dayInput).toHaveValue('2'));
+            });
           });
 
           describe('for en-US format', () => {
@@ -1622,7 +1636,6 @@ describe('packages/date-picker', () => {
               userEvent.type(monthInput, '5');
               expect(dayInput).toHaveFocus();
             });
-
             test('when day value is explicit, focus advances to year', () => {
               const { dayInput, yearInput } = renderDatePicker({
                 dateFormat,
@@ -1630,26 +1643,32 @@ describe('packages/date-picker', () => {
               userEvent.type(dayInput, '5');
               expect(yearInput).toHaveFocus();
             });
+            test('when year value is explicit, segment value is set', () => {
+              const { yearInput } = renderDatePicker({
+                dateFormat,
+              });
+              userEvent.type(yearInput, '1999');
+              expect(yearInput).toHaveFocus();
+              expect(yearInput).toHaveValue('1999');
+            });
 
-            test('focus does NOT advance when month value is ambiguous', () => {
+            test('when month value is ambiguous, focus does NOT advance', () => {
               const { monthInput } = renderDatePicker({ dateFormat });
               userEvent.type(monthInput, '1');
               expect(monthInput).toHaveFocus();
             });
-            test('focus does NOT advance when day value is ambiguous', () => {
+            test('when day value is ambiguous, focus does NOT advance', () => {
               const { dayInput } = renderDatePicker({ dateFormat });
               userEvent.type(dayInput, '2');
               expect(dayInput).toHaveFocus();
             });
-
-            test('focus does NOT update when year value is ambiguous', () => {
-              const { monthInput, dayInput, yearInput } = renderDatePicker({
+            test('when year value is ambiguous, segment does not format', async () => {
+              const { yearInput } = renderDatePicker({
                 dateFormat,
               });
-              userEvent.type(monthInput, '5');
-              userEvent.type(dayInput, '5');
-              userEvent.type(yearInput, '2');
+              userEvent.type(yearInput, '200');
               expect(yearInput).toHaveFocus();
+              await waitFor(() => expect(yearInput).toHaveValue('200'));
             });
           });
         });
@@ -1773,29 +1792,48 @@ describe('packages/date-picker', () => {
           expect(yearInput).toHaveValue('20');
         });
 
-        test('typing new characters does not format the segment', () => {
-          const { yearInput, monthInput, dayInput } = renderDatePicker({});
-          userEvent.type(yearInput, '2019');
-          userEvent.type(monthInput, '6');
-          userEvent.type(dayInput, '1');
+        describe('typing new characters', () => {
+          test('does not immediately format the year', () => {
+            const { yearInput, monthInput, dayInput } = renderDatePicker({});
+            userEvent.type(yearInput, '2019');
+            userEvent.type(monthInput, '6');
+            userEvent.type(dayInput, '1');
 
-          userEvent.type(yearInput, '9');
-          userEvent.type(yearInput, '9');
-          expect(yearInput).toHaveValue('1999');
-        });
-      });
+            userEvent.type(yearInput, '9');
+            userEvent.type(yearInput, '9');
+            expect(yearInput).toHaveValue('1999');
+          });
 
-      describe('on un-focus/blur', () => {
-        test('does not fire a value change handler if the value is incomplete', () => {
-          const onDateChange = jest.fn();
-          const { yearInput } = renderDatePicker({
-            onDateChange,
+          test('appends to the segment value if the resulting value is valid', () => {
+            const { monthInput } = renderDatePicker({});
+            userEvent.type(monthInput, '1');
+            userEvent.tab();
+            expect(monthInput).toHaveValue('01');
+            userEvent.type(monthInput, '2');
+            expect(monthInput).toHaveValue('12');
+          });
+
+          describe('if the resulting value is not valid', () => {
+            test('overwrites the segment with the incoming digit 1-9', () => {
+              const { monthInput } = renderDatePicker({});
+              userEvent.type(monthInput, '6');
+              expect(monthInput).toHaveValue('06');
+              userEvent.type(monthInput, '9');
+              expect(monthInput).toHaveValue('09');
+            });
+
+            test('overwrites the segment with the incoming digit 0', () => {
+              const { monthInput } = renderDatePicker({});
+              userEvent.type(monthInput, '6');
+              expect(monthInput).toHaveValue('06');
+              userEvent.type(monthInput, '0');
+              expect(monthInput).toHaveValue('0');
+            });
           });
-          userEvent.type(yearInput, '2023');
-          userEvent.tab();
-          expect(onDateChange).not.toHaveBeenCalled();
         });
+      });
 
+      describe('on segment un-focus/blur', () => {
         test('fires a segment change handler', () => {
           const onChange = jest.fn();
           const { yearInput } = renderDatePicker({ onChange });
@@ -1806,45 +1844,70 @@ describe('packages/date-picker', () => {
           );
         });
 
-        test('fires a value change handler when the value is a valid date', () => {
-          const onDateChange = jest.fn();
-          const { yearInput, monthInput, dayInput } = renderDatePicker({
-            onDateChange,
-          });
-          userEvent.type(yearInput, '2023');
-          userEvent.type(monthInput, '12');
-          userEvent.type(dayInput, '26');
+        test('formats the segment', () => {
+          const onChange = jest.fn();
+          const { dayInput } = renderDatePicker({ onChange });
+          userEvent.type(dayInput, '2');
           userEvent.tab();
-          expect(onDateChange).toHaveBeenCalledWith(
-            expect.objectContaining(newUTC(2023, Month.December, 26)),
+          expect(onChange).toHaveBeenCalledWith(
+            eventContainingTargetValue('02'),
           );
+          expect(dayInput.value).toBe('02');
         });
 
-        test('fires a validation handler when the value is first set', () => {
-          const handleValidation = jest.fn();
-          const { yearInput, monthInput, dayInput } = renderDatePicker({
-            handleValidation,
+        describe('if the date value is incomplete', () => {
+          test('does not fire a value change handler', () => {
+            const onDateChange = jest.fn();
+            const { yearInput } = renderDatePicker({
+              onDateChange,
+            });
+            userEvent.type(yearInput, '2023');
+            userEvent.tab();
+            expect(onDateChange).not.toHaveBeenCalled();
           });
-          userEvent.type(yearInput, '2023');
-          userEvent.type(monthInput, '12');
-          userEvent.type(dayInput, '26');
-          userEvent.tab();
-          expect(handleValidation).toHaveBeenCalledWith(
-            expect.objectContaining(newUTC(2023, Month.December, 26)),
-          );
         });
 
-        test('fires a validation handler any time the value is updated', () => {
-          const handleValidation = jest.fn();
-          const { dayInput } = renderDatePicker({
-            value: new Date(),
-            handleValidation,
+        describe('if the date value is valid', () => {
+          test('fires a value change handler', () => {
+            const onDateChange = jest.fn();
+            const { yearInput, monthInput, dayInput } = renderDatePicker({
+              onDateChange,
+            });
+            userEvent.type(yearInput, '2023');
+            userEvent.type(monthInput, '12');
+            userEvent.type(dayInput, '26');
+            userEvent.tab();
+            expect(onDateChange).toHaveBeenCalledWith(
+              expect.objectContaining(newUTC(2023, Month.December, 26)),
+            );
+          });
+
+          test('fires a validation handler when the value is first set', () => {
+            const handleValidation = jest.fn();
+            const { yearInput, monthInput, dayInput } = renderDatePicker({
+              handleValidation,
+            });
+            userEvent.type(yearInput, '2023');
+            userEvent.type(monthInput, '12');
+            userEvent.type(dayInput, '26');
+            userEvent.tab();
+            expect(handleValidation).toHaveBeenCalledWith(
+              expect.objectContaining(newUTC(2023, Month.December, 26)),
+            );
+          });
+
+          test('fires a validation handler any time the value is updated', () => {
+            const handleValidation = jest.fn();
+            const { dayInput } = renderDatePicker({
+              value: new Date(),
+              handleValidation,
+            });
+            userEvent.type(dayInput, '05');
+            userEvent.tab();
+            expect(handleValidation).toHaveBeenCalledWith(
+              expect.objectContaining(newUTC(2023, Month.December, 5)),
+            );
           });
-          userEvent.type(dayInput, '05');
-          userEvent.tab();
-          expect(handleValidation).toHaveBeenCalledWith(
-            expect.objectContaining(newUTC(2023, Month.December, 5)),
-          );
         });
       });
     });
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index ef6d15447b..7d6c2f6070 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -12,13 +12,12 @@ import { DateFormField, DateInputBox } from '../../shared/components/DateInput';
 import { DateInputSegmentChangeEventHandler } from '../../shared/components/DateInput/DateInputSegment';
 import { useDatePickerContext } from '../../shared/components/DatePickerContext';
 import {
+  getRelativeSegmentRef,
   isElementInputSegment,
-  isExplicitSegmentValue,
   isSameUTCDay,
   isZeroLike,
 } from '../../shared/utils';
 import { useSingleDateContext } from '../SingleDateContext';
-import { getRelativeSegment } from '../utils/getRelativeSegment';
 import { getSegmentToFocus } from '../utils/getSegmentToFocus';
 
 import { DatePickerInputProps } from './DatePickerInput.types';
@@ -99,7 +98,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           // or the cursor is at the beginning of the input
           // set focus to prev. input (if it exists)
           if (isSegmentEmpty || selectionStart === 0) {
-            const segmentToFocus = getRelativeSegment('prev', {
+            const segmentToFocus = getRelativeSegmentRef('prev', {
               segment: target,
               formatParts,
               segmentRefs,
@@ -117,7 +116,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           // or the cursor is at the end of the input
           // set focus to next. input (if it exists)
           if (isSegmentEmpty || selectionEnd === target.value.length) {
-            const segmentToFocus = getRelativeSegment('next', {
+            const segmentToFocus = getRelativeSegmentRef('next', {
               segment: target,
               formatParts,
               segmentRefs,
@@ -138,7 +137,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
         case keyMap.Backspace: {
           if (isSegmentEmpty) {
-            const segmentToFocus = getRelativeSegment('prev', {
+            const segmentToFocus = getRelativeSegmentRef('prev', {
               segment: target,
               formatParts,
               segmentRefs,
@@ -188,21 +187,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
      */
     const handleSegmentChange: DateInputSegmentChangeEventHandler =
       segmentChangeEvent => {
-        const { segment, value: segmentValue, meta } = segmentChangeEvent;
-        const changedViaArrowKeys =
-          meta?.key === keyMap.ArrowDown || meta?.key === keyMap.ArrowUp;
-
-        if (!changedViaArrowKeys) {
-          if (isExplicitSegmentValue(segment, segmentValue)) {
-            const nextSegment = getRelativeSegment('next', {
-              segment: segmentRefs[segment],
-              formatParts,
-              segmentRefs,
-            });
-
-            nextSegment?.current?.focus();
-          }
-        }
+        const { segment } = segmentChangeEvent;
 
         if (isDirty) {
           handleValidation?.(value);
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index f45bd39c8e..4e9a8f5268 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -4,9 +4,12 @@ import isEqual from 'lodash/isEqual';
 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 {
+  DateSegment,
   DateSegmentsState,
+  DateSegmentValue,
   isDateSegment,
   useDateSegments,
 } from '../../../hooks';
@@ -14,7 +17,9 @@ import {
   doesSomeSegmentExist,
   getMaxSegmentValue,
   getMinSegmentValue,
+  getRelativeSegment,
   getValueFormatter,
+  isExplicitSegmentValue,
   newDateFromSegments,
 } from '../../../utils';
 import { useDatePickerContext } from '../../DatePickerContext';
@@ -59,6 +64,16 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
 
     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;
+    };
+
     /**
      * When a segment is updated,
      * trigger a `change` event for the segment, and
@@ -91,19 +106,45 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
 
     /** Fired when an individual segment value changes */
     const handleSegmentInputChange: DateInputSegmentChangeEventHandler =
-      event => {
-        setSegment(event.segment, event.value);
-        onSegmentChange?.(event);
+      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 (
+          !changedViaArrowKeys &&
+          isExplicitSegmentValue(segmentName, segmentValue)
+        ) {
+          segmentValue = getFormattedSegmentValue(segmentName, segmentValue);
+
+          // Auto-advance focus
+          const nextSegmentName = getRelativeSegment('next', {
+            segment: segmentName,
+            formatParts,
+          });
+
+          if (nextSegmentName) {
+            const nextSegmentRef = segmentRefs[nextSegmentName];
+            nextSegmentRef?.current?.focus();
+          }
+        }
+
+        setSegment(segmentName, segmentValue);
+        onSegmentChange?.(segmentChangeEvent);
       };
 
     /** Triggered when a segment is blurred */
     const handleSegmentInputBlur: FocusEventHandler<HTMLInputElement> = e => {
       const segmentName = e.target.getAttribute('id');
-      const newValue = e.target.value;
+      const segmentValue = e.target.value;
 
       if (isDateSegment(segmentName)) {
-        const formatter = getValueFormatter(segmentName);
-        const formattedValue = formatter(newValue);
+        const formattedValue = getFormattedSegmentValue(
+          segmentName,
+          segmentValue,
+        );
         setSegment(segmentName, formattedValue);
       }
     };
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 3b6d3f7f78..7c1d36eac7 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
@@ -165,9 +165,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       );
     });
 
-    test('allows typing additional characters to create an invalid value', () => {
-      // Note: event may be ignored by the parent,
-      // but this component still fires the event
+    test('does not allow additional characters that create an invalid value', () => {
       const { input } = renderSegment({
         value: '26',
         onChange: onChangeHandler,
@@ -176,7 +174,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
       userEvent.type(input, '6');
       expect(onChangeHandler).toHaveBeenCalled();
       expect(onChangeHandler).toHaveBeenCalledWith(
-        expect.objectContaining({ value: '66' }),
+        expect.objectContaining({ value: '06' }),
       );
     });
 
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 842f06b3fd..010b49fd2a 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -3,7 +3,7 @@ import React, { ChangeEventHandler, KeyboardEventHandler } from 'react';
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { keyMap, rollover, truncateStart } from '@leafygreen-ui/lib';
+import { keyMap, rollover } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
@@ -16,6 +16,7 @@ import {
 import { getAutoComplete, getValueFormatter } from '../../../utils';
 import { useDatePickerContext } from '../../DatePickerContext';
 
+import { calculateNewSegmentValue } from './calculateNewSegmentValue';
 import {
   baseStyles,
   fontSizeStyles,
@@ -68,20 +69,20 @@ export const DateInputSegment = React.forwardRef<
     const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
       const { target } = e;
       const containsPeriod = /\./.test(target.value);
-      let prevValue = value ?? '';
+      const prevValue = value ?? '';
 
       // macOS adds a period when pressing SPACE twice inside a text input.
       // If there is a period replace the value with the prevValue.
-      if (containsPeriod) target.value = prevValue;
+      if (containsPeriod) {
+        target.value = prevValue;
+        return;
+      }
 
-      const isEqualToPrevValue = target.value === prevValue;
+      const hasValueChanged = target.value !== prevValue;
       const numericValue = Number(target.value);
 
-      if (!isNaN(numericValue) && !isEqualToPrevValue) {
-        prevValue = target.value;
-        const newValue = truncateStart(target.value, {
-          length: charsPerSegment[segment],
-        });
+      if (!isNaN(numericValue) && hasValueChanged) {
+        const newValue = calculateNewSegmentValue(segment, target.value);
 
         onChange({
           segment,
@@ -124,6 +125,8 @@ export const DateInputSegment = React.forwardRef<
         case keyMap.Backspace: {
           const numChars = value.length;
 
+          // If we've cleared the input with backspace,
+          // fire the custom change event
           if (numChars === 1) {
             onChange({
               segment,
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/calculateNewSegmentValue/index.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/calculateNewSegmentValue/index.ts
new file mode 100644
index 0000000000..dd4c933b48
--- /dev/null
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/calculateNewSegmentValue/index.ts
@@ -0,0 +1,29 @@
+import last from 'lodash/last';
+
+import { truncateStart } from '@leafygreen-ui/lib';
+
+import { charsPerSegment } from '../../../../constants';
+import { DateSegment, DateSegmentValue } from '../../../../hooks';
+import { getValueFormatter, isValidValueForSegment } from '../../../../utils';
+
+/**
+ * Calculates the new value for the segment given an incoming change
+ */
+export const calculateNewSegmentValue = (
+  segmentName: DateSegment,
+  incomingValue: DateSegmentValue,
+): DateSegmentValue => {
+  if (
+    !isValidValueForSegment(segmentName, incomingValue) &&
+    segmentName !== 'year'
+  ) {
+    const formatter = getValueFormatter(segmentName);
+    const typedChar = last(incomingValue.split(''));
+    const newValue = typedChar === '0' ? '0' : formatter(typedChar);
+    return newValue;
+  }
+
+  return truncateStart(incomingValue, {
+    length: charsPerSegment[segmentName],
+  });
+};
diff --git a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx b/packages/date-picker/src/shared/utils/getRelativeSegment/getRelativeSegment.spec.tsx
similarity index 87%
rename from packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
rename to packages/date-picker/src/shared/utils/getRelativeSegment/getRelativeSegment.spec.tsx
index b40df97311..9c4370ca5c 100644
--- a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/getRelativeSegment.spec.tsx
+++ b/packages/date-picker/src/shared/utils/getRelativeSegment/getRelativeSegment.spec.tsx
@@ -4,7 +4,7 @@ import { render } from '@testing-library/react';
 import { SegmentRefs } from '../../../shared/hooks';
 import { segmentRefsMock } from '../../../shared/testutils';
 
-import { getRelativeSegment } from '.';
+import { getRelativeSegmentRef } from '.';
 
 const renderTestComponent = () => {
   const result = render(
@@ -48,7 +48,7 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
     });
     test('next from year => month', () => {
       expect(
-        getRelativeSegment('next', {
+        getRelativeSegmentRef('next', {
           segment: segmentRefs.year,
           formatParts,
           segmentRefs,
@@ -57,7 +57,7 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
     });
     test('next from month => day', () => {
       expect(
-        getRelativeSegment('next', {
+        getRelativeSegmentRef('next', {
           segment: segmentRefs.month,
           formatParts,
           segmentRefs,
@@ -67,7 +67,7 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
 
     test('prev from day => month', () => {
       expect(
-        getRelativeSegment('prev', {
+        getRelativeSegmentRef('prev', {
           segment: segmentRefs.day,
           formatParts,
           segmentRefs,
@@ -77,7 +77,7 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
 
     test('prev from month => year', () => {
       expect(
-        getRelativeSegment('prev', {
+        getRelativeSegmentRef('prev', {
           segment: segmentRefs.month,
           formatParts,
           segmentRefs,
@@ -87,7 +87,7 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
 
     test('first = year', () => {
       expect(
-        getRelativeSegment('first', {
+        getRelativeSegmentRef('first', {
           segment: segmentRefs.day,
           formatParts,
           segmentRefs,
@@ -97,7 +97,7 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
 
     test('last = day', () => {
       expect(
-        getRelativeSegment('last', {
+        getRelativeSegmentRef('last', {
           segment: segmentRefs.year,
           formatParts,
           segmentRefs,
@@ -121,7 +121,7 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
     });
     test('next from year => month', () => {
       expect(
-        getRelativeSegment('next', {
+        getRelativeSegmentRef('next', {
           segment: elements.year,
           formatParts,
           segmentRefs,
@@ -130,7 +130,7 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
     });
     test('next from month => day', () => {
       expect(
-        getRelativeSegment('next', {
+        getRelativeSegmentRef('next', {
           segment: elements.month,
           formatParts,
           segmentRefs,
@@ -140,7 +140,7 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
 
     test('prev from day => month', () => {
       expect(
-        getRelativeSegment('prev', {
+        getRelativeSegmentRef('prev', {
           segment: elements.day,
           formatParts,
           segmentRefs,
@@ -150,7 +150,7 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
 
     test('prev from month => year', () => {
       expect(
-        getRelativeSegment('prev', {
+        getRelativeSegmentRef('prev', {
           segment: elements.month,
           formatParts,
           segmentRefs,
@@ -160,7 +160,7 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
 
     test('first = year', () => {
       expect(
-        getRelativeSegment('first', {
+        getRelativeSegmentRef('first', {
           segment: elements.day,
           formatParts,
           segmentRefs,
@@ -170,7 +170,7 @@ describe('packages/date-picker/utils/getRelativeSegment', () => {
 
     test('last = day', () => {
       expect(
-        getRelativeSegment('last', {
+        getRelativeSegmentRef('last', {
           segment: elements.year,
           formatParts,
           segmentRefs,
diff --git a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts b/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts
similarity index 54%
rename from packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
rename to packages/date-picker/src/shared/utils/getRelativeSegment/index.ts
index 44948a6063..888ffa7858 100644
--- a/packages/date-picker/src/DatePicker/utils/getRelativeSegment/index.ts
+++ b/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts
@@ -12,18 +12,23 @@ interface GetRelativeSegmentContext {
 }
 
 /**
- * Given a direction, staring segment, and segment refs,
- * returns the segment ref in the given direction
+ * Given a direction, starting segment name & format
+ * returns the segment name in the given direction
  */
 export const getRelativeSegment = (
   direction: RelativeDirection,
-  { segment, formatParts, segmentRefs }: GetRelativeSegmentContext,
-): React.RefObject<HTMLInputElement> | undefined => {
+  {
+    segment,
+    formatParts,
+  }: {
+    segment: DateSegment;
+    formatParts: DatePickerContextProps['formatParts'];
+  },
+): DateSegment | undefined => {
   if (
     isUndefined(direction) ||
     isUndefined(segment) ||
-    isUndefined(formatParts) ||
-    isUndefined(segmentRefs)
+    isUndefined(formatParts)
   ) {
     return;
   }
@@ -34,57 +39,34 @@ export const getRelativeSegment = (
     .map(part => part.type as DateSegment);
 
   /** The index of the reference segment relative to formatParts */
-  const currentSegmentIndex: number | undefined = formatSegments.findIndex(
-    segmentName => {
-      return (
-        segmentRefs[segmentName] === segment ||
-        segmentRefs[segmentName].current === segment
-      );
-    },
-  );
-
-  const getRefAtIndex = (index: number) => {
-    const segmentName = formatSegments[index];
-    return segmentRefs[segmentName];
-  };
+  const currentSegmentIndex: number | undefined =
+    formatSegments.indexOf(segment);
 
   switch (direction) {
     case 'first': {
-      const firstSegmentRef = getRefAtIndex(0);
-      return firstSegmentRef;
+      return formatSegments[0];
     }
 
     case 'last': {
       const lastSegmentName = last(formatSegments);
-
-      if (lastSegmentName) {
-        const lastSegmentRef = segmentRefs[lastSegmentName];
-        return lastSegmentRef;
-      }
-
-      break;
+      return lastSegmentName;
     }
 
     case 'next': {
-      if (!isUndefined(currentSegmentIndex) && currentSegmentIndex >= 0) {
-        const nextSegmentIndex = Math.min(
-          currentSegmentIndex + 1,
-          formatSegments.length - 1,
-        );
-
-        const nextSegmentRef = getRefAtIndex(nextSegmentIndex);
-        return nextSegmentRef;
+      if (
+        !isUndefined(currentSegmentIndex) &&
+        currentSegmentIndex >= 0 &&
+        currentSegmentIndex + 1 < formatSegments.length
+      ) {
+        return formatSegments[currentSegmentIndex + 1];
       }
 
       break;
     }
 
     case 'prev': {
-      if (!isUndefined(currentSegmentIndex) && currentSegmentIndex >= 0) {
-        const prevSegmentIndex = Math.max(currentSegmentIndex - 1, 0);
-
-        const prevSegmentRef = getRefAtIndex(prevSegmentIndex);
-        return prevSegmentRef;
+      if (!isUndefined(currentSegmentIndex) && currentSegmentIndex > 0) {
+        return formatSegments[currentSegmentIndex - 1];
       }
 
       break;
@@ -94,3 +76,46 @@ export const getRelativeSegment = (
       break;
   }
 };
+
+/**
+ * Given a direction, staring segment, and segment refs,
+ * returns the segment ref in the given direction
+ */
+export const getRelativeSegmentRef = (
+  direction: RelativeDirection,
+  { segment, formatParts, segmentRefs }: GetRelativeSegmentContext,
+): React.RefObject<HTMLInputElement> | undefined => {
+  if (
+    isUndefined(direction) ||
+    isUndefined(segment) ||
+    isUndefined(formatParts) ||
+    isUndefined(segmentRefs)
+  ) {
+    return;
+  }
+
+  // only the relevant segments, not separators
+  const formatSegments: Array<DateSegment> = formatParts
+    .filter(part => part.type !== 'literal')
+    .map(part => part.type as DateSegment);
+
+  const currentSegmentName: DateSegment | undefined = formatSegments.find(
+    segmentName => {
+      return (
+        segmentRefs[segmentName] === segment ||
+        segmentRefs[segmentName].current === segment
+      );
+    },
+  );
+
+  if (currentSegmentName) {
+    const relativeSegmentName = getRelativeSegment(direction, {
+      segment: currentSegmentName,
+      formatParts,
+    });
+
+    if (relativeSegmentName) {
+      return segmentRefs[relativeSegmentName];
+    }
+  }
+};
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index 2b3df54057..9226442032 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -15,6 +15,10 @@ export { getMaxSegmentValue } from './getMaxSegmentValue';
 export { getMinSegmentValue } from './getMinSegmentValue';
 export { getMonthIndex } from './getMonthIndex';
 export { getMonthName } from './getMonthName';
+export {
+  getRelativeSegment,
+  getRelativeSegmentRef,
+} from './getRelativeSegment';
 export { getRemainingParts } from './getRemainingParts';
 export { getSegmentMaxLength } from './getSegmentMaxLength';
 export {

From bf772e7ab0d8f77d675e877ed0a09fc9883a2102 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Wed, 6 Dec 2023 18:02:08 -0500
Subject: [PATCH 309/351] Date Picker: move date segment types (#2118)

* mv types -> types/index

* mv date segment types to /types

* update imports

* Update index.ts
---
 .../src/DatePicker/DatePicker.testutils.tsx      |  4 ++--
 .../getSegmentRefFromDateTimeFormatPart/index.ts |  3 ++-
 .../DatePicker/utils/getSegmentToFocus/index.ts  |  3 ++-
 .../DateInput/DateInputBox/DateInputBox.tsx      |  4 ++--
 .../DateInputSegment/DateInputSegment.spec.tsx   |  2 +-
 .../DateInputSegment.stories.tsx                 |  2 +-
 .../DateInputSegment/DateInputSegment.styles.ts  |  2 +-
 .../DateInputSegment/DateInputSegment.types.ts   |  2 +-
 .../calculateNewSegmentValue/index.ts            |  2 +-
 packages/date-picker/src/shared/hooks/index.ts   |  8 +-------
 .../src/shared/hooks/useDateSegments/index.ts    |  6 ------
 .../hooks/useDateSegments/useDateSegments.ts     | 10 ++++++----
 ...egments.types.ts => useDateSegments.types.ts} | 16 +---------------
 .../hooks/useSegmentRefs/segmentRefs.types.ts    |  2 +-
 .../src/shared/types/DateSegment.types.ts        | 15 +++++++++++++++
 .../src/shared/{types.ts => types/index.ts}      |  7 +++++++
 .../shared/utils/doesSomeSegmentExist/index.ts   |  2 +-
 .../getAutoComplete/getAutoComplete.spec.ts      |  3 +--
 .../src/shared/utils/getAutoComplete/index.ts    |  3 +--
 .../shared/utils/getFirstEmptySegment/index.ts   |  3 ++-
 .../shared/utils/getFormattedDateString/index.ts |  2 +-
 .../src/shared/utils/getMaxSegmentValue/index.ts |  3 +--
 .../src/shared/utils/getMinSegmentValue/index.ts |  3 +--
 .../src/shared/utils/getRelativeSegment/index.ts |  3 ++-
 .../shared/utils/getSegmentMaxLength/index.ts    |  2 +-
 .../shared/utils/getSegmentsFromDate/index.ts    |  2 +-
 .../src/shared/utils/getValueFormatter/index.ts  |  2 +-
 .../getValueFormatter/valueFormatter.spec.ts     |  2 +-
 .../shared/utils/isExplicitSegmentValue/index.ts |  2 +-
 .../src/shared/utils/isValidSegment/index.ts     |  2 +-
 .../shared/utils/isValidValueForSegment/index.ts |  2 +-
 .../shared/utils/newDateFromSegments/index.ts    |  2 +-
 32 files changed, 62 insertions(+), 64 deletions(-)
 rename packages/date-picker/src/shared/hooks/useDateSegments/{DateSegments.types.ts => useDateSegments.types.ts} (55%)
 create mode 100644 packages/date-picker/src/shared/types/DateSegment.types.ts
 rename packages/date-picker/src/shared/{types.ts => types/index.ts} (95%)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index 65e4340124..e57ca6fe76 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -9,12 +9,12 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { DateSegment, pickAndOmit } from '../shared';
 import {
   ContextPropKeys,
   contextPropNames,
 } from '../shared/components/DatePickerContext';
-import { getISODate } from '../shared/utils/getISODate';
+import { DateSegment } from '../shared/types';
+import { getISODate, pickAndOmit } from '../shared/utils';
 
 import { DatePickerProps } from './DatePicker.types';
 import { DatePicker } from '.';
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
index b651317ba0..c89a995d8f 100644
--- a/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
@@ -1,6 +1,7 @@
 import isUndefined from 'lodash/isUndefined';
 
-import { isDateSegment, SegmentRefs } from '../../../shared/hooks';
+import { SegmentRefs } from '../../../shared/hooks';
+import { isDateSegment } from '../../../shared/types';
 
 /**
  * Given a {@link Intl.DateTimeFormatPart},
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
index f06a7a6eca..064a1d6e2e 100644
--- a/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
@@ -2,7 +2,8 @@ import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
 import { DatePickerContextProps } from '../../../shared/components/DatePickerContext';
-import { DateSegment, SegmentRefs } from '../../../shared/hooks';
+import { SegmentRefs } from '../../../shared/hooks';
+import { DateSegment } from '../../../shared/types';
 import { getFirstEmptySegment } from '../../../shared/utils';
 
 interface GetSegmentToFocusProps {
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index 4e9a8f5268..f76f36c136 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -6,13 +6,13 @@ import { useForwardedRef } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { keyMap } from '@leafygreen-ui/lib';
 
+import { useDateSegments } from '../../../hooks';
 import {
   DateSegment,
   DateSegmentsState,
   DateSegmentValue,
   isDateSegment,
-  useDateSegments,
-} from '../../../hooks';
+} from '../../../types';
 import {
   doesSomeSegmentExist,
   getMaxSegmentValue,
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 7c1d36eac7..3361020277 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
@@ -4,7 +4,7 @@ import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { defaultMax, defaultMin } from '../../../constants';
-import { DateSegment } from '../../../hooks';
+import { DateSegment } from '../../../types';
 import { getValueFormatter } from '../../../utils';
 import {
   DatePickerProvider,
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
index 87fea94649..fdafa48bed 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
@@ -5,7 +5,7 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 
-import { DateSegmentValue } from '../../../hooks';
+import { DateSegmentValue } from '../../../types';
 import {
   DatePickerContextProps,
   DatePickerProvider,
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.styles.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.styles.ts
index 0709d7be20..207fde92d3 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.styles.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.styles.ts
@@ -9,7 +9,7 @@ import {
 } from '@leafygreen-ui/tokens';
 
 import { characterWidth, charsPerSegment } from '../../../constants';
-import { DateSegment } from '../../../hooks';
+import { DateSegment } from '../../../types';
 
 export const baseStyles = css`
   font-family: ${fontFamilies.default};
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts
index 73e008d8be..9ff34a1482 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.types.ts
@@ -1,6 +1,6 @@
 import { DarkModeProps, HTMLElementProps, keyMap } from '@leafygreen-ui/lib';
 
-import { DateSegment, DateSegmentValue } from '../../../hooks';
+import { DateSegment, DateSegmentValue } from '../../../types';
 
 export interface DateInputSegmentChangeEvent {
   segment: DateSegment;
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/calculateNewSegmentValue/index.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/calculateNewSegmentValue/index.ts
index dd4c933b48..be09df0bdf 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/calculateNewSegmentValue/index.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/calculateNewSegmentValue/index.ts
@@ -3,7 +3,7 @@ import last from 'lodash/last';
 import { truncateStart } from '@leafygreen-ui/lib';
 
 import { charsPerSegment } from '../../../../constants';
-import { DateSegment, DateSegmentValue } from '../../../../hooks';
+import { DateSegment, DateSegmentValue } from '../../../../types';
 import { getValueFormatter, isValidValueForSegment } from '../../../../utils';
 
 /**
diff --git a/packages/date-picker/src/shared/hooks/index.ts b/packages/date-picker/src/shared/hooks/index.ts
index 0b3c3e87f0..4e540ce144 100644
--- a/packages/date-picker/src/shared/hooks/index.ts
+++ b/packages/date-picker/src/shared/hooks/index.ts
@@ -1,9 +1,3 @@
 export { useControlledValue } from './useControlledValue';
-export {
-  DateSegment,
-  type DateSegmentsState,
-  type DateSegmentValue,
-  isDateSegment,
-  useDateSegments,
-} from './useDateSegments';
+export { useDateSegments } from './useDateSegments';
 export { type SegmentRefs, useSegmentRefs } from './useSegmentRefs';
diff --git a/packages/date-picker/src/shared/hooks/useDateSegments/index.ts b/packages/date-picker/src/shared/hooks/useDateSegments/index.ts
index 8caa6ce048..2e50906b0b 100644
--- a/packages/date-picker/src/shared/hooks/useDateSegments/index.ts
+++ b/packages/date-picker/src/shared/hooks/useDateSegments/index.ts
@@ -1,7 +1 @@
-export {
-  DateSegment,
-  type DateSegmentsState,
-  type DateSegmentValue,
-  isDateSegment,
-} from './DateSegments.types';
 export { useDateSegments } from './useDateSegments';
diff --git a/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts b/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts
index ae624c4542..dd3df4c725 100644
--- a/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts
+++ b/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts
@@ -3,16 +3,18 @@ import { isSameDay } from 'date-fns';
 
 import { usePrevious } from '@leafygreen-ui/hooks';
 
-import { DateType } from '../../types';
-import { getFormattedSegmentsFromDate } from '../../utils';
-
 import {
   DateSegment,
   DateSegmentsState,
   DateSegmentValue,
+  DateType,
+} from '../../types';
+import { getFormattedSegmentsFromDate } from '../../utils';
+
+import {
   UseDateSegmentsOptions,
   UseDateSegmentsReturnValue,
-} from './DateSegments.types';
+} from './useDateSegments.types';
 
 /** Merges old state & new state */
 const dateSegmentsReducer = (
diff --git a/packages/date-picker/src/shared/hooks/useDateSegments/DateSegments.types.ts b/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.types.ts
similarity index 55%
rename from packages/date-picker/src/shared/hooks/useDateSegments/DateSegments.types.ts
rename to packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.types.ts
index 12f712dacd..32b5cebf82 100644
--- a/packages/date-picker/src/shared/hooks/useDateSegments/DateSegments.types.ts
+++ b/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.types.ts
@@ -1,18 +1,4 @@
-export const DateSegment = {
-  Day: 'day',
-  Month: 'month',
-  Year: 'year',
-} as const;
-export type DateSegment = (typeof DateSegment)[keyof typeof DateSegment];
-
-export type DateSegmentValue = string;
-
-export type DateSegmentsState = Record<DateSegment, DateSegmentValue>;
-
-export function isDateSegment(str: any): str is DateSegment {
-  if (typeof str !== 'string') return false;
-  return ['day', 'month', 'year'].includes(str);
-}
+import { DateSegment, DateSegmentsState, DateSegmentValue } from '../../types';
 
 /** Callback passed into the hook, called when any segment updates */
 export type OnUpdateCallback = (
diff --git a/packages/date-picker/src/shared/hooks/useSegmentRefs/segmentRefs.types.ts b/packages/date-picker/src/shared/hooks/useSegmentRefs/segmentRefs.types.ts
index 2fc74f1fa7..365f7801d0 100644
--- a/packages/date-picker/src/shared/hooks/useSegmentRefs/segmentRefs.types.ts
+++ b/packages/date-picker/src/shared/hooks/useSegmentRefs/segmentRefs.types.ts
@@ -1,6 +1,6 @@
 import { DynamicRefGetter } from '@leafygreen-ui/hooks';
 
-import { DateSegment } from '../useDateSegments';
+import { DateSegment } from '../../types';
 
 export type SegmentRefs = Record<
   DateSegment,
diff --git a/packages/date-picker/src/shared/types/DateSegment.types.ts b/packages/date-picker/src/shared/types/DateSegment.types.ts
new file mode 100644
index 0000000000..1ee8cdf6c8
--- /dev/null
+++ b/packages/date-picker/src/shared/types/DateSegment.types.ts
@@ -0,0 +1,15 @@
+export const DateSegment = {
+  Day: 'day',
+  Month: 'month',
+  Year: 'year',
+} as const;
+export type DateSegment = (typeof DateSegment)[keyof typeof DateSegment];
+
+export type DateSegmentValue = string;
+
+export type DateSegmentsState = Record<DateSegment, DateSegmentValue>;
+
+export function isDateSegment(str: any): str is DateSegment {
+  if (typeof str !== 'string') return false;
+  return ['day', 'month', 'year'].includes(str);
+}
diff --git a/packages/date-picker/src/shared/types.ts b/packages/date-picker/src/shared/types/index.ts
similarity index 95%
rename from packages/date-picker/src/shared/types.ts
rename to packages/date-picker/src/shared/types/index.ts
index 12ec6dd42c..b21c6d9b8f 100644
--- a/packages/date-picker/src/shared/types.ts
+++ b/packages/date-picker/src/shared/types/index.ts
@@ -4,6 +4,13 @@ import { FormFieldState } from '@leafygreen-ui/form-field';
 import { DarkModeProps } from '@leafygreen-ui/lib';
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
+export {
+  DateSegment,
+  type DateSegmentsState,
+  type DateSegmentValue,
+  isDateSegment,
+} from './DateSegment.types';
+
 export const DatePickerState = omit(FormFieldState, 'Valid');
 export type DatePickerState =
   (typeof DatePickerState)[keyof typeof DatePickerState];
diff --git a/packages/date-picker/src/shared/utils/doesSomeSegmentExist/index.ts b/packages/date-picker/src/shared/utils/doesSomeSegmentExist/index.ts
index d461f8a9ee..ebad5b2104 100644
--- a/packages/date-picker/src/shared/utils/doesSomeSegmentExist/index.ts
+++ b/packages/date-picker/src/shared/utils/doesSomeSegmentExist/index.ts
@@ -1,4 +1,4 @@
-import { DateSegmentsState } from '../../hooks/useDateSegments';
+import { DateSegmentsState } from '../../types';
 import { isNotZeroLike } from '../isZeroLike';
 
 /**
diff --git a/packages/date-picker/src/shared/utils/getAutoComplete/getAutoComplete.spec.ts b/packages/date-picker/src/shared/utils/getAutoComplete/getAutoComplete.spec.ts
index 5554088278..f7890e4570 100644
--- a/packages/date-picker/src/shared/utils/getAutoComplete/getAutoComplete.spec.ts
+++ b/packages/date-picker/src/shared/utils/getAutoComplete/getAutoComplete.spec.ts
@@ -1,5 +1,4 @@
-import { DateSegment } from '../../hooks';
-import { AutoComplete } from '../../types';
+import { AutoComplete, DateSegment } from '../../types';
 
 import { getAutoComplete } from '.';
 
diff --git a/packages/date-picker/src/shared/utils/getAutoComplete/index.ts b/packages/date-picker/src/shared/utils/getAutoComplete/index.ts
index 776c693822..21b1624333 100644
--- a/packages/date-picker/src/shared/utils/getAutoComplete/index.ts
+++ b/packages/date-picker/src/shared/utils/getAutoComplete/index.ts
@@ -1,5 +1,4 @@
-import { DateSegment } from '../../hooks';
-import { AutoComplete } from '../../types';
+import { AutoComplete, DateSegment } from '../../types';
 
 export const getAutoComplete = (
   autoComplete: AutoComplete,
diff --git a/packages/date-picker/src/shared/utils/getFirstEmptySegment/index.ts b/packages/date-picker/src/shared/utils/getFirstEmptySegment/index.ts
index 1ca88b7eb9..74196ed07d 100644
--- a/packages/date-picker/src/shared/utils/getFirstEmptySegment/index.ts
+++ b/packages/date-picker/src/shared/utils/getFirstEmptySegment/index.ts
@@ -1,5 +1,6 @@
 import { DatePickerContextProps } from '../../components/DatePickerContext';
-import { DateSegment, SegmentRefs } from '../../hooks';
+import { SegmentRefs } from '../../hooks';
+import { DateSegment } from '../../types';
 
 /**
  *
diff --git a/packages/date-picker/src/shared/utils/getFormattedDateString/index.ts b/packages/date-picker/src/shared/utils/getFormattedDateString/index.ts
index 1b9e477976..f5e8293ca6 100644
--- a/packages/date-picker/src/shared/utils/getFormattedDateString/index.ts
+++ b/packages/date-picker/src/shared/utils/getFormattedDateString/index.ts
@@ -1,4 +1,4 @@
-import { DateSegment } from '../../hooks';
+import { DateSegment } from '../../types';
 import { getFormatParts } from '../getFormatParts';
 import { getFormattedSegmentsFromDate } from '../getSegmentsFromDate';
 
diff --git a/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts b/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts
index 1337cb7182..a317719ed9 100644
--- a/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts
+++ b/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts
@@ -1,6 +1,5 @@
 import { defaultMax } from '../../constants';
-import { DateSegment } from '../../hooks';
-import { DateType } from '../../types';
+import { DateSegment, DateType } from '../../types';
 import { getSegmentsFromDate } from '../getSegmentsFromDate';
 
 /** Returns the maximum value for a segment, given a context */
diff --git a/packages/date-picker/src/shared/utils/getMinSegmentValue/index.ts b/packages/date-picker/src/shared/utils/getMinSegmentValue/index.ts
index 0733b229ec..8f76846bd5 100644
--- a/packages/date-picker/src/shared/utils/getMinSegmentValue/index.ts
+++ b/packages/date-picker/src/shared/utils/getMinSegmentValue/index.ts
@@ -1,6 +1,5 @@
 import { defaultMin } from '../../constants';
-import { DateSegment } from '../../hooks';
-import { DateType } from '../../types';
+import { DateSegment, DateType } from '../../types';
 import { getSegmentsFromDate } from '../getSegmentsFromDate';
 
 /** Returns the minimum value for a segment, given a context */
diff --git a/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts b/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts
index 888ffa7858..a55f0d63b4 100644
--- a/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts
+++ b/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts
@@ -2,7 +2,8 @@ import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
 import { DatePickerContextProps } from '../../../shared/components/DatePickerContext';
-import { DateSegment, SegmentRefs } from '../../../shared/hooks';
+import { SegmentRefs } from '../../../shared/hooks';
+import { DateSegment } from '../../../shared/types';
 
 type RelativeDirection = 'next' | 'prev' | 'first' | 'last';
 interface GetRelativeSegmentContext {
diff --git a/packages/date-picker/src/shared/utils/getSegmentMaxLength/index.ts b/packages/date-picker/src/shared/utils/getSegmentMaxLength/index.ts
index ee938fd42b..6c49e92b9f 100644
--- a/packages/date-picker/src/shared/utils/getSegmentMaxLength/index.ts
+++ b/packages/date-picker/src/shared/utils/getSegmentMaxLength/index.ts
@@ -1,5 +1,5 @@
 import { charsPerSegment } from '../../constants';
-import { DateSegment } from '../../hooks';
+import { DateSegment } from '../../types';
 
 /**
  * Returns the maxLength of a segment
diff --git a/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts b/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts
index b344a82507..24af6209bc 100644
--- a/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts
+++ b/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts
@@ -1,4 +1,4 @@
-import { DateSegmentsState } from '../../hooks';
+import { DateSegmentsState } from '../../types';
 import { getValueFormatter } from '../getValueFormatter';
 
 /** Returns a single object with day, month & year segments */
diff --git a/packages/date-picker/src/shared/utils/getValueFormatter/index.ts b/packages/date-picker/src/shared/utils/getValueFormatter/index.ts
index f0facacedb..6539832d1a 100644
--- a/packages/date-picker/src/shared/utils/getValueFormatter/index.ts
+++ b/packages/date-picker/src/shared/utils/getValueFormatter/index.ts
@@ -1,7 +1,7 @@
 import padStart from 'lodash/padStart';
 
 import { charsPerSegment } from '../../constants';
-import { DateSegment } from '../../hooks';
+import { DateSegment } from '../../types';
 import { isZeroLike } from '../isZeroLike';
 
 /**
diff --git a/packages/date-picker/src/shared/utils/getValueFormatter/valueFormatter.spec.ts b/packages/date-picker/src/shared/utils/getValueFormatter/valueFormatter.spec.ts
index 3095201124..9b04b141ea 100644
--- a/packages/date-picker/src/shared/utils/getValueFormatter/valueFormatter.spec.ts
+++ b/packages/date-picker/src/shared/utils/getValueFormatter/valueFormatter.spec.ts
@@ -1,4 +1,4 @@
-import { DateSegment } from '../../hooks';
+import { DateSegment } from '../../types';
 
 import { getValueFormatter } from '.';
 
diff --git a/packages/date-picker/src/shared/utils/isExplicitSegmentValue/index.ts b/packages/date-picker/src/shared/utils/isExplicitSegmentValue/index.ts
index 389934a734..e357588425 100644
--- a/packages/date-picker/src/shared/utils/isExplicitSegmentValue/index.ts
+++ b/packages/date-picker/src/shared/utils/isExplicitSegmentValue/index.ts
@@ -1,5 +1,5 @@
 import { charsPerSegment } from '../../constants';
-import { DateSegment, DateSegmentValue } from '../../hooks';
+import { DateSegment, DateSegmentValue } from '../../types';
 import { isValidSegmentName, isValidSegmentValue } from '../isValidSegment';
 
 /**
diff --git a/packages/date-picker/src/shared/utils/isValidSegment/index.ts b/packages/date-picker/src/shared/utils/isValidSegment/index.ts
index 8799712099..861fbeca75 100644
--- a/packages/date-picker/src/shared/utils/isValidSegment/index.ts
+++ b/packages/date-picker/src/shared/utils/isValidSegment/index.ts
@@ -1,6 +1,6 @@
 import isUndefined from 'lodash/isUndefined';
 
-import { DateSegment, DateSegmentValue } from '../../hooks';
+import { DateSegment, DateSegmentValue } from '../../types';
 
 /**
  * Returns whether a given value is a valid segment value
diff --git a/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts b/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
index 81b062a5d0..084c5ea93e 100644
--- a/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
+++ b/packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts
@@ -1,7 +1,7 @@
 import { inRange } from 'lodash';
 
 import { defaultMax, defaultMin } from '../../constants';
-import { DateSegment, DateSegmentValue } from '../../hooks';
+import { DateSegment, DateSegmentValue } from '../../types';
 import { isValidSegmentName, isValidSegmentValue } from '../isValidSegment';
 
 /**
diff --git a/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
index 6e3ea86ca3..6a244f9abe 100644
--- a/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
@@ -1,4 +1,4 @@
-import { DateSegmentsState } from '../../hooks';
+import { DateSegmentsState } from '../../types';
 import { isValidSegmentName } from '../isValidSegment';
 import { isValidValueForSegment } from '../isValidValueForSegment';
 import { newUTC } from '../newUTC';

From e31001a9fc1f6c0ef1312b6e03f9583b654f7e5d Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Wed, 6 Dec 2023 18:02:26 -0500
Subject: [PATCH 310/351] Date Picker [LG-3835]: Rename component > content
 (#2119)

* mv types -> types/index

* mv date segment types to /types

* update imports

* mv component > content

* Update index.ts
---
 packages/date-picker/src/DatePicker/DatePicker.tsx     |  4 ++--
 .../src/DatePicker/DatePickerComponent/index.ts        |  2 --
 .../DatePickerContent.tsx}                             | 10 +++++-----
 .../DatePickerContent.types.ts}                        |  2 +-
 .../src/DatePicker/DatePickerContent/index.ts          |  2 ++
 .../DatePickerInput/DatePickerInput.types.ts           |  4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)
 delete mode 100644 packages/date-picker/src/DatePicker/DatePickerComponent/index.ts
 rename packages/date-picker/src/DatePicker/{DatePickerComponent/DatePickerComponent.tsx => DatePickerContent/DatePickerContent.tsx} (93%)
 rename packages/date-picker/src/DatePicker/{DatePickerComponent/DatePickerComponent.types.ts => DatePickerContent/DatePickerContent.types.ts} (90%)
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerContent/index.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 10f99497fa..bfcb12b691 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -15,7 +15,7 @@ import { useControlledValue } from '../shared/hooks';
 import { pickAndOmit } from '../shared/utils';
 
 import { DatePickerProps } from './DatePicker.types';
-import { DatePickerComponent } from './DatePickerComponent';
+import { DatePickerContent } from './DatePickerContent';
 import { SingleDateProvider } from './SingleDateContext';
 
 /**
@@ -64,7 +64,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               baseFontSize === BaseFontSize.Body1 ? 14 : baseFontSize
             }
           >
-            <DatePickerComponent ref={fwdRef} {...componentProps} />
+            <DatePickerContent ref={fwdRef} {...componentProps} />
           </LeafyGreenProvider>
         </SingleDateProvider>
       </DatePickerProvider>
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/index.ts b/packages/date-picker/src/DatePicker/DatePickerComponent/index.ts
deleted file mode 100644
index 468e93d552..0000000000
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { DatePickerComponent } from './DatePickerComponent';
-export { DatePickerComponentProps } from './DatePickerComponent.types';
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
similarity index 93%
rename from packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
rename to packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
index 69d2add4b8..18b2f10739 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
@@ -21,12 +21,12 @@ import { DatePickerInput } from '../DatePickerInput';
 import { DatePickerMenu } from '../DatePickerMenu';
 import { useSingleDateContext } from '../SingleDateContext';
 
-import { DatePickerComponentProps } from './DatePickerComponent.types';
+import { DatePickerContentProps } from './DatePickerContent.types';
 
-export const DatePickerComponent = forwardRef<
+export const DatePickerContent = forwardRef<
   HTMLDivElement,
-  DatePickerComponentProps
->(({ ...rest }: DatePickerComponentProps, fwdRef) => {
+  DatePickerContentProps
+>(({ ...rest }: DatePickerContentProps, fwdRef) => {
   const { isOpen, menuId, disabled, isSelectOpen } = useDatePickerContext();
   const {
     refs,
@@ -140,4 +140,4 @@ export const DatePickerComponent = forwardRef<
   );
 });
 
-DatePickerComponent.displayName = 'DatePickerContents';
+DatePickerContent.displayName = 'DatePickerContent';
diff --git a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.types.ts
similarity index 90%
rename from packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
rename to packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.types.ts
index 7f32b24b18..dac89f8d85 100644
--- a/packages/date-picker/src/DatePicker/DatePickerComponent/DatePickerComponent.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.types.ts
@@ -6,7 +6,7 @@ import { DatePickerProps } from '../DatePicker.types';
  * but omits props that are added to the context.
  * Replaces `onDateChange` with a `setValue` setter function
  */
-export interface DatePickerComponentProps
+export interface DatePickerContentProps
   extends Omit<
     DatePickerProps,
     ContextPropKeys | 'value' | 'handleValidation' | 'onDateChange'
diff --git a/packages/date-picker/src/DatePicker/DatePickerContent/index.ts b/packages/date-picker/src/DatePicker/DatePickerContent/index.ts
new file mode 100644
index 0000000000..16c56433d3
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerContent/index.ts
@@ -0,0 +1,2 @@
+export { DatePickerContent } from './DatePickerContent';
+export { DatePickerContentProps } from './DatePickerContent.types';
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
index 68a73c4f62..a898f53755 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts
@@ -2,11 +2,11 @@ import { MouseEventHandler } from 'react';
 
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
-import { DatePickerComponentProps } from '../DatePickerComponent';
+import { DatePickerContentProps } from '../DatePickerContent';
 
 export interface DatePickerInputProps
   extends Omit<HTMLElementProps<'div'>, 'onChange'>,
-    Pick<DatePickerComponentProps, 'onChange'> {
+    Pick<DatePickerContentProps, 'onChange'> {
   /**
    * Click handler
    */

From 0698414441588e504eea95577e4c61fbb7a629c7 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 7 Dec 2023 11:15:27 -0500
Subject: [PATCH 311/351] rm deprecated utils

---
 .../DatePicker/utils/getSegmentKey/index.ts   | 25 ------------------
 .../index.ts                                  | 26 -------------------
 2 files changed, 51 deletions(-)
 delete mode 100644 packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
 delete mode 100644 packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts

diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
deleted file mode 100644
index f183924dac..0000000000
--- a/packages/date-picker/src/DatePicker/utils/getSegmentKey/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { SegmentRefs } from '../../../shared/hooks';
-
-/**
- * Returns the key of a given segment ref or element
- * @deprecated
- */
-export const getSegmentKey = (
-  segment: HTMLInputElement | React.RefObject<HTMLInputElement>,
-  segmentRefs: SegmentRefs,
-): keyof SegmentRefs | undefined => {
-  const currentSegmentKeyValuePair = Object.entries(segmentRefs).find(
-    ([_, val]) => {
-      return (
-        val.current ===
-          (segment as React.RefObject<HTMLInputElement>).current ||
-        val.current === (segment as HTMLInputElement)
-      );
-    },
-  ) as [keyof SegmentRefs, React.RefObject<HTMLInputElement>] | undefined;
-
-  if (currentSegmentKeyValuePair) {
-    const currentSegmentKey = currentSegmentKeyValuePair[0];
-    return currentSegmentKey;
-  }
-};
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
deleted file mode 100644
index c89a995d8f..0000000000
--- a/packages/date-picker/src/DatePicker/utils/getSegmentRefFromDateTimeFormatPart/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import isUndefined from 'lodash/isUndefined';
-
-import { SegmentRefs } from '../../../shared/hooks';
-import { isDateSegment } from '../../../shared/types';
-
-/**
- * Given a {@link Intl.DateTimeFormatPart},
- * return the segmentRefs entry with the same type
- *
- * @deprecated
- */
-export const getSegmentRefFromDateTimeFormatPart = (
-  formatPart: Intl.DateTimeFormatPart | undefined,
-  segmentRefs: SegmentRefs,
-) => {
-  if (isUndefined(formatPart)) {
-    return;
-  }
-
-  const key = formatPart.type;
-
-  if (isDateSegment(key)) {
-    const ref = segmentRefs[key];
-    return ref;
-  }
-};

From e9aa1d2bddb62d1bcdaa4a0d119f1cee5426af2b Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Thu, 7 Dec 2023 17:09:42 -0500
Subject: [PATCH 312/351] Date picker [LG-3868] Month & weekday
 Internationalization (#2121)

* use locale in getMonthIndex

* update getMonthIndex. Add getLocaleMonths

* rm deprecated Months object

* weekday l18n utils

* use unicode weekday abbreviations

* normalizeLocale

* update isMonthEnabled with locale
---
 .../DatePickerMenuHeader.tsx                  | 27 +++++---
 .../index.ts                                  |  3 +-
 .../shouldMonthBeEnabled.spec.ts}             |  0
 .../Calendar/CalendarGrid/CalendarGrid.tsx    | 12 ++--
 packages/date-picker/src/shared/constants.ts  | 49 ---------------
 .../src/shared/testutils/testValues.ts        | 14 ++++-
 .../date-picker/src/shared/types/index.ts     | 26 ++++++--
 .../shared/utils/getFullMonthLabel/index.ts   |  4 +-
 .../getLocaleMonths/getLocaleMonths.spec.ts   | 25 ++++++++
 .../src/shared/utils/getLocaleMonths/index.ts | 10 +++
 .../getLocaleWeekdays.spec.ts                 | 35 +++++++++++
 .../shared/utils/getLocaleWeekdays/index.ts   | 11 ++++
 .../utils/getMonthIndex/getMonthIndex.spec.ts | 30 +++++++++
 .../src/shared/utils/getMonthIndex/index.ts   | 15 +++--
 .../utils/getMonthName/getMonthName.spec.ts   | 63 ++++++++++++-------
 .../src/shared/utils/getMonthName/index.ts    | 19 +++---
 .../getWeekdayName/getWeekdayName.spec.ts     | 57 +++++++++++++++++
 .../src/shared/utils/getWeekdayName/index.ts  | 35 +++++++++++
 .../date-picker/src/shared/utils/index.ts     |  3 +
 .../src/shared/utils/isValidLocale/index.ts   |  2 +-
 .../src/shared/utils/normalizeLocale/index.ts | 10 +++
 .../normalizeLocale/normalizeLocale.spec.ts   | 15 +++++
 22 files changed, 357 insertions(+), 108 deletions(-)
 rename packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/{getMonthOptions => shouldMonthBeEnabled}/index.ts (91%)
 rename packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/{getMonthOptions/getMonthOptions.spec.ts => shouldMonthBeEnabled/shouldMonthBeEnabled.spec.ts} (100%)
 create mode 100644 packages/date-picker/src/shared/utils/getLocaleMonths/getLocaleMonths.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/getLocaleMonths/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/getLocaleWeekdays/getLocaleWeekdays.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/getLocaleWeekdays/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/getMonthIndex/getMonthIndex.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/getWeekdayName/getWeekdayName.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/getWeekdayName/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/normalizeLocale/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/normalizeLocale/normalizeLocale.spec.ts

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
index 120d556ba9..1b4dc02f01 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, MouseEventHandler } from 'react';
+import React, { forwardRef, MouseEventHandler, useCallback } from 'react';
 import range from 'lodash/range';
 
 import { cx } from '@leafygreen-ui/emotion';
@@ -7,8 +7,13 @@ import IconButton from '@leafygreen-ui/icon-button';
 import { Option, Select } from '@leafygreen-ui/select';
 
 import { useDatePickerContext } from '../../../shared/components/DatePickerContext';
-import { Months, selectElementProps } from '../../../shared/constants';
-import { isSameUTCMonth, setUTCMonth, setUTCYear } from '../../../shared/utils';
+import { selectElementProps } from '../../../shared/constants';
+import {
+  getLocaleMonths,
+  isSameUTCMonth,
+  setUTCMonth,
+  setUTCYear,
+} from '../../../shared/utils';
 import { useSingleDateContext } from '../../SingleDateContext';
 import {
   menuHeaderSelectContainerStyles,
@@ -17,7 +22,7 @@ import {
   selectTruncateStyles,
 } from '../DatePickerMenu.styles';
 
-import { shouldMonthBeEnabled } from './utils/getMonthOptions';
+import { shouldMonthBeEnabled } from './utils/shouldMonthBeEnabled';
 
 interface DatePickerMenuHeaderProps {
   setMonth: (newMonth: Date) => void;
@@ -32,9 +37,10 @@ export const DatePickerMenuHeader = forwardRef<
   HTMLDivElement,
   DatePickerMenuHeaderProps
 >(({ setMonth, ...rest }: DatePickerMenuHeaderProps, fwdRef) => {
-  const { min, max, setIsSelectOpen } = useDatePickerContext();
+  const { min, max, setIsSelectOpen, dateFormat } = useDatePickerContext();
   const { month } = useSingleDateContext();
 
+  const monthOptions = getLocaleMonths(dateFormat);
   const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
 
   const updateMonth = (newMonth: Date) => {
@@ -58,8 +64,11 @@ export const DatePickerMenuHeader = forwardRef<
     };
 
   /** Returns whether the provided month should be enabled */
-  const isMonthEnabled = (monthName: string) =>
-    shouldMonthBeEnabled(monthName, { month, min, max });
+  const isMonthEnabled = useCallback(
+    (monthName: string) =>
+      shouldMonthBeEnabled(monthName, { month, min, max, locale: dateFormat }),
+    [dateFormat, max, min, month],
+  );
 
   return (
     <div ref={fwdRef} className={menuHeaderStyles} {...rest}>
@@ -82,9 +91,9 @@ export const DatePickerMenuHeader = forwardRef<
           className={cx(selectTruncateStyles, selectInputWidthStyles)}
           onEntered={() => setIsSelectOpen(true)}
           onExited={() => setIsSelectOpen(false)}
-          placeholder={Months[month.getUTCMonth()].short}
+          placeholder={monthOptions[month.getUTCMonth()].short}
         >
-          {Months.map((m, i) => (
+          {monthOptions.map((m, i) => (
             <Option
               disabled={!isMonthEnabled(m.long)}
               value={i.toString()}
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldMonthBeEnabled/index.ts
similarity index 91%
rename from packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts
rename to packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldMonthBeEnabled/index.ts
index 731590bc12..d9271f28cc 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/index.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldMonthBeEnabled/index.ts
@@ -9,9 +9,10 @@ export const shouldMonthBeEnabled = (
     month?: DateType;
     min?: DateType;
     max?: DateType;
+    locale?: string;
   },
 ): boolean => {
-  const monthIndex = getMonthIndex(monthName);
+  const monthIndex = getMonthIndex(monthName, context?.locale);
 
   if (isNull(monthIndex)) return false;
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/getMonthOptions.spec.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldMonthBeEnabled/shouldMonthBeEnabled.spec.ts
similarity index 100%
rename from packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/getMonthOptions/getMonthOptions.spec.ts
rename to packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldMonthBeEnabled/shouldMonthBeEnabled.spec.ts
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
index 4f54b4f513..7c3a6c5e52 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -5,8 +5,8 @@ import { getWeekStartByLocale } from 'weekstart';
 import { cx } from '@leafygreen-ui/emotion';
 import { Disclaimer } from '@leafygreen-ui/typography';
 
-import { DaysOfWeek, daysPerWeek } from '../../../constants';
-import { getWeeksArray } from '../../../utils';
+import { daysPerWeek } from '../../../constants';
+import { getLocaleWeekdays, getWeeksArray } from '../../../utils';
 import { useDatePickerContext } from '../../DatePickerContext';
 
 import {
@@ -54,16 +54,16 @@ export const CalendarGrid = forwardRef<HTMLTableElement, CalendarGridProps>(
           <tr role="row">
             {range(daysPerWeek).map(i => {
               const dayIndex = (i + weekStartsOn) % daysPerWeek;
-              const day = DaysOfWeek[dayIndex];
+              const weekday = getLocaleWeekdays(dateFormat)[dayIndex];
               return (
                 <th
                   role="columnheader"
-                  key={day.short}
-                  abbr={day.long}
+                  key={weekday.long}
+                  abbr={weekday.long}
                   className={calendarThStyles}
                 >
                   <Disclaimer className={calendarHeaderCellStyles}>
-                    {day.short}
+                    {weekday.short ?? weekday.abbr}
                   </Disclaimer>
                 </th>
               );
diff --git a/packages/date-picker/src/shared/constants.ts b/packages/date-picker/src/shared/constants.ts
index 5ca4e42369..37303805ec 100644
--- a/packages/date-picker/src/shared/constants.ts
+++ b/packages/date-picker/src/shared/constants.ts
@@ -1,6 +1,3 @@
-import padStart from 'lodash/padStart';
-import range from 'lodash/range';
-
 import { DropdownWidthBasis } from '@leafygreen-ui/select';
 
 /** Days in a week */
@@ -22,22 +19,6 @@ export enum Month {
   December,
 }
 
-/** An array of all English month names */
-export const MonthsArray = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];
-
 /**
  * The default earliest selectable date
  * (Unix epoch start: https://en.wikipedia.org/wiki/Unix_time)
@@ -50,36 +31,6 @@ export const MIN_DATE = new Date(Date.UTC(1970, Month.January, 1));
  */
 export const MAX_DATE = new Date(Date.UTC(2038, Month.January, 19));
 
-export interface MonthObject {
-  long: string;
-  short: string;
-}
-/**
- * Long & short form of each month index. Updates based on locale
- */
-export const Months: Array<MonthObject> = range(12).map(
-  (monthIndex: number) => {
-    const str = `2023-${padStart((monthIndex + 1).toString(), 2, '0')}-15`;
-    const month = new Date(str);
-    return {
-      long: month.toLocaleString('default', { month: 'long' }),
-      short: month.toLocaleString('default', { month: 'short' }),
-    };
-  },
-);
-
-/** Long & short form for each Day of the week */
-export const DaysOfWeek = [
-  { long: 'Sunday', short: 'su' },
-  { long: 'Monday', short: 'mo' },
-  { long: 'Tuesday', short: 'tu' },
-  { long: 'Wednesday', short: 'we' },
-  { long: 'Thursday', short: 'th' },
-  { long: 'Friday', short: 'fr' },
-  { long: 'Saturday', short: 'sa' },
-] as const;
-export type DaysOfWeek = (typeof DaysOfWeek)[number];
-
 // TODO: Update how defaultMin & defaultMax are defined,
 // since day/month are constants,
 // but year is consumer-defined
diff --git a/packages/date-picker/src/shared/testutils/testValues.ts b/packages/date-picker/src/shared/testutils/testValues.ts
index c5ccd4233b..1712df4ed2 100644
--- a/packages/date-picker/src/shared/testutils/testValues.ts
+++ b/packages/date-picker/src/shared/testutils/testValues.ts
@@ -29,4 +29,16 @@ export const TimeZones = testTimeZones.map(({ tz }) => tz);
  * Farsi-Afghanistan (week starts on Sat)
  * English-Maldives (week starts on Fri.)
  */
-export const Locales = ['iso8601', 'en-US', 'en-UK', 'de-DE', 'fa-AF', 'en-MV'];
+export const Locales = [
+  'iso8601',
+  'de-DE', // German, Germany (uses `.` char separator)
+  'en-US', // English, US (week starts on Sun.)
+  'en-GB', // English, UK (week starts on Mon.)
+  'en-MV', // English, Maldives (week starts on Fri.)
+  'es-MX', // Spanish, Mexico
+  'fa-AF', // Farsi, Afghanistan (week starts on Sat.)
+  'fr-FR', // French, France
+  'he-IL', // Hebrew, Israel
+  'ja-JP', // Japanese, Japan
+  'zh-CN', // Chinese, China
+];
diff --git a/packages/date-picker/src/shared/types/index.ts b/packages/date-picker/src/shared/types/index.ts
index b21c6d9b8f..75490239d7 100644
--- a/packages/date-picker/src/shared/types/index.ts
+++ b/packages/date-picker/src/shared/types/index.ts
@@ -18,6 +18,26 @@ export type DatePickerState =
 export type DateType = Date | null;
 export type DateRangeType = [DateType, DateType];
 
+export interface MonthObject {
+  long: string;
+  short: string;
+}
+
+/**
+ * Object representing the abbreviations of a given weekday.
+ * Abbreviation formats defined in Unicode: https://www.unicode.org/reports/tr35/tr35-67/tr35-dates.html#dfst-weekday
+ */
+export interface WeekdayObject {
+  /** The long-form weekday name (e.g. Tuesday)*/
+  long: string;
+  /** An abbreviated weekday name (e.g. Tue) */
+  abbr: string;
+  /** A shorter weekday name (e.g. Tu)*/
+  short?: string;
+  /** The shortest weekday name (e.g. T) */
+  narrow: string;
+}
+
 export const AutoComplete = {
   Off: 'off',
   On: 'on',
@@ -43,15 +63,13 @@ export interface BaseDatePickerProps extends DarkModeProps {
    * Sets the _presentation format_ for the displayed date.
    * Fallback to the user’s browser preference (if supported), otherwise ISO-8601.
    *
-   * Currently only the following values are officially supported.
+   * Currently only the following values are officially supported: 'en-US' | 'en-GB' | 'iso8601'
    * Other valid [Locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)
    * strings may work, however no assurances are made.
    *
-   * @enum 'en-US' | 'en-UK' | 'iso8601'
-   *
    * @default 'iso8601'
    */
-  dateFormat?: 'iso8601' | `${string}-${string}`;
+  dateFormat?: 'iso8601' | string;
 
   /**
    * A valid IANA timezone string, or UTC offset.
diff --git a/packages/date-picker/src/shared/utils/getFullMonthLabel/index.ts b/packages/date-picker/src/shared/utils/getFullMonthLabel/index.ts
index b9dd35adcf..1b40d5a032 100644
--- a/packages/date-picker/src/shared/utils/getFullMonthLabel/index.ts
+++ b/packages/date-picker/src/shared/utils/getFullMonthLabel/index.ts
@@ -1,6 +1,6 @@
-import { Months } from '../../constants';
+import { getMonthName } from '../getMonthName';
 
 /** Returns a long month label (i.e. September 2023) */
 export const getFullMonthLabel = (date: Date): string => {
-  return Months[date.getUTCMonth()].long + ' ' + date.getUTCFullYear();
+  return getMonthName(date.getUTCMonth()).long + ' ' + date.getUTCFullYear();
 };
diff --git a/packages/date-picker/src/shared/utils/getLocaleMonths/getLocaleMonths.spec.ts b/packages/date-picker/src/shared/utils/getLocaleMonths/getLocaleMonths.spec.ts
new file mode 100644
index 0000000000..a78e119722
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getLocaleMonths/getLocaleMonths.spec.ts
@@ -0,0 +1,25 @@
+import { getLocaleMonths } from '.';
+
+describe('packages/date-picker/utils/getLocaleMonths', () => {
+  test('default (English)', () => {
+    expect(getLocaleMonths()).toHaveLength(12);
+    getLocaleMonths().forEach(mo => {
+      expect(mo).not.toBeUndefined();
+      expect(mo).not.toBeNull();
+    });
+  });
+  test('iso8601', () => {
+    expect(getLocaleMonths('iso8601')).toHaveLength(12);
+    getLocaleMonths('iso8601').forEach(mo => {
+      expect(mo).not.toBeUndefined();
+      expect(mo).not.toBeNull();
+    });
+  });
+  test('jp-JP', () => {
+    expect(getLocaleMonths('jp-JP')).toHaveLength(12);
+    getLocaleMonths('jp-JP').forEach(mo => {
+      expect(mo).not.toBeUndefined();
+      expect(mo).not.toBeNull();
+    });
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/getLocaleMonths/index.ts b/packages/date-picker/src/shared/utils/getLocaleMonths/index.ts
new file mode 100644
index 0000000000..850485d16d
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getLocaleMonths/index.ts
@@ -0,0 +1,10 @@
+import range from 'lodash/range';
+
+import { MonthObject } from '../../types';
+import { getMonthName } from '../getMonthName';
+
+export const getLocaleMonths = (locale?: string): Array<MonthObject> => {
+  return range(12).map(monthIndex => {
+    return getMonthName(monthIndex, locale);
+  });
+};
diff --git a/packages/date-picker/src/shared/utils/getLocaleWeekdays/getLocaleWeekdays.spec.ts b/packages/date-picker/src/shared/utils/getLocaleWeekdays/getLocaleWeekdays.spec.ts
new file mode 100644
index 0000000000..6ad1124c70
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getLocaleWeekdays/getLocaleWeekdays.spec.ts
@@ -0,0 +1,35 @@
+import { getLocaleWeekdays } from '.';
+
+describe('packages/date-picker/utils/getLocaleWeekdays', () => {
+  test('English (default)', () => {
+    expect(getLocaleWeekdays()).toHaveLength(7);
+    getLocaleWeekdays().forEach(w => {
+      expect(w).not.toBeUndefined();
+      expect(w).not.toBeNull();
+    });
+  });
+
+  test('iso8601', () => {
+    expect(getLocaleWeekdays('iso8601')).toHaveLength(7);
+    getLocaleWeekdays('iso8601').forEach(w => {
+      expect(w).not.toBeUndefined();
+      expect(w).not.toBeNull();
+    });
+  });
+
+  test('es-MX', () => {
+    expect(getLocaleWeekdays('es-MX')).toHaveLength(7);
+    getLocaleWeekdays('es-MX').forEach(w => {
+      expect(w).not.toBeUndefined();
+      expect(w).not.toBeNull();
+    });
+  });
+
+  test('fr-FR', () => {
+    expect(getLocaleWeekdays('fr-FR')).toHaveLength(7);
+    getLocaleWeekdays('fr-FR').forEach(w => {
+      expect(w).not.toBeUndefined();
+      expect(w).not.toBeNull();
+    });
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/getLocaleWeekdays/index.ts b/packages/date-picker/src/shared/utils/getLocaleWeekdays/index.ts
new file mode 100644
index 0000000000..9f9d3c4878
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getLocaleWeekdays/index.ts
@@ -0,0 +1,11 @@
+import range from 'lodash/range';
+
+import { getWeekdayName } from '../getWeekdayName';
+
+/**
+ * Returns an array of weekdays for the provided locale.
+ * Defaults to system locale
+ */
+export const getLocaleWeekdays = (locale?: string) => {
+  return range(7).map(d => getWeekdayName(d, locale));
+};
diff --git a/packages/date-picker/src/shared/utils/getMonthIndex/getMonthIndex.spec.ts b/packages/date-picker/src/shared/utils/getMonthIndex/getMonthIndex.spec.ts
new file mode 100644
index 0000000000..cb6d7968b2
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getMonthIndex/getMonthIndex.spec.ts
@@ -0,0 +1,30 @@
+import { getMonthIndex } from '.';
+
+describe('packages/date-picker/utils/getMonthIndex', () => {
+  test('Default (English) long', () => {
+    expect(getMonthIndex('January')).toBe(0);
+    expect(getMonthIndex('December')).toBe(11);
+  });
+  test('Default (English) short', () => {
+    expect(getMonthIndex('Jan')).toBe(0);
+    expect(getMonthIndex('Dec')).toBe(11);
+  });
+
+  test('Spanish long', () => {
+    expect(getMonthIndex('enero', 'es-MX')).toBe(0);
+    expect(getMonthIndex('diciembre', 'es-MX')).toBe(11);
+  });
+  test('Spanish short', () => {
+    expect(getMonthIndex('ene', 'es-MX')).toBe(0);
+    expect(getMonthIndex('dic', 'es-MX')).toBe(11);
+  });
+
+  test('French long', () => {
+    expect(getMonthIndex('janvier', 'fr-FR')).toBe(0);
+    expect(getMonthIndex('décembre', 'fr-FR')).toBe(11);
+  });
+  test('French short', () => {
+    expect(getMonthIndex('janv.', 'fr-FR')).toBe(0);
+    expect(getMonthIndex('déc.', 'fr-FR')).toBe(11);
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/getMonthIndex/index.ts b/packages/date-picker/src/shared/utils/getMonthIndex/index.ts
index fc5e94131b..a9889195a2 100644
--- a/packages/date-picker/src/shared/utils/getMonthIndex/index.ts
+++ b/packages/date-picker/src/shared/utils/getMonthIndex/index.ts
@@ -1,7 +1,14 @@
-import { MonthsArray } from '../../constants';
+import { getLocaleMonths } from '../getLocaleMonths';
 
-/** Returns the index of an English month name */
-export const getMonthIndex = (monthName: string): number | null => {
-  const index = MonthsArray.indexOf(monthName);
+/**
+ * Returns the month index of a month name in the current locale
+ */
+export const getMonthIndex = (
+  monthName: string,
+  locale?: string,
+): number | null => {
+  const index = getLocaleMonths(locale).findIndex(({ long, short }) =>
+    [long, short].includes(monthName),
+  );
   return index >= 0 ? index : null;
 };
diff --git a/packages/date-picker/src/shared/utils/getMonthName/getMonthName.spec.ts b/packages/date-picker/src/shared/utils/getMonthName/getMonthName.spec.ts
index 65a12944d5..d14c04afb5 100644
--- a/packages/date-picker/src/shared/utils/getMonthName/getMonthName.spec.ts
+++ b/packages/date-picker/src/shared/utils/getMonthName/getMonthName.spec.ts
@@ -1,64 +1,81 @@
 import { getMonthName } from '.';
 
 describe('packages/date-picker/utils/getMonthName', () => {
-  test('Jan', () => {
+  test('Default (English)', () => {
     expect(getMonthName(0)).toEqual(
       expect.objectContaining({ long: 'January', short: 'Jan' }),
     );
-  });
-  test('Feb', () => {
+
     expect(getMonthName(1)).toEqual(
       expect.objectContaining({ long: 'February', short: 'Feb' }),
     );
-  });
-  test('Mar', () => {
+
     expect(getMonthName(2)).toEqual(
       expect.objectContaining({ long: 'March', short: 'Mar' }),
     );
-  });
-  test('Apr', () => {
+
     expect(getMonthName(3)).toEqual(
       expect.objectContaining({ long: 'April', short: 'Apr' }),
     );
-  });
-  test('May', () => {
+
     expect(getMonthName(4)).toEqual(
       expect.objectContaining({ long: 'May', short: 'May' }),
     );
-  });
-  test('Jun', () => {
+
     expect(getMonthName(5)).toEqual(
       expect.objectContaining({ long: 'June', short: 'Jun' }),
     );
-  });
-  test('Jul', () => {
+
     expect(getMonthName(6)).toEqual(
       expect.objectContaining({ long: 'July', short: 'Jul' }),
     );
-  });
-  test('Aug', () => {
+
     expect(getMonthName(7)).toEqual(
       expect.objectContaining({ long: 'August', short: 'Aug' }),
     );
-  });
-  test('Sep', () => {
+
     expect(getMonthName(8)).toEqual(
       expect.objectContaining({ long: 'September', short: 'Sep' }),
     );
-  });
-  test('Oct', () => {
+
     expect(getMonthName(9)).toEqual(
       expect.objectContaining({ long: 'October', short: 'Oct' }),
     );
-  });
-  test('Nov', () => {
+
     expect(getMonthName(10)).toEqual(
       expect.objectContaining({ long: 'November', short: 'Nov' }),
     );
-  });
-  test('Dec', () => {
+
     expect(getMonthName(11)).toEqual(
       expect.objectContaining({ long: 'December', short: 'Dec' }),
     );
   });
+
+  test('iso8601', () => {
+    expect(getMonthName(0, 'iso8601')).toEqual(
+      expect.objectContaining({ long: 'January', short: 'Jan' }),
+    );
+
+    expect(getMonthName(11, 'iso8601')).toEqual(
+      expect.objectContaining({ long: 'December', short: 'Dec' }),
+    );
+  });
+
+  test('es-MX (Spanish)', () => {
+    expect(getMonthName(0, 'es-MX')).toEqual(
+      expect.objectContaining({ long: 'enero', short: 'ene' }),
+    );
+    expect(getMonthName(11, 'es-MX')).toEqual(
+      expect.objectContaining({ long: 'diciembre', short: 'dic' }),
+    );
+  });
+
+  test('fr-FR (French)', () => {
+    expect(getMonthName(0, 'fr-FR')).toEqual(
+      expect.objectContaining({ long: 'janvier', short: 'janv.' }),
+    );
+    expect(getMonthName(11, 'fr-FR')).toEqual(
+      expect.objectContaining({ long: 'décembre', short: 'déc.' }),
+    );
+  });
 });
diff --git a/packages/date-picker/src/shared/utils/getMonthName/index.ts b/packages/date-picker/src/shared/utils/getMonthName/index.ts
index 4d50c0a282..b9f68045e8 100644
--- a/packages/date-picker/src/shared/utils/getMonthName/index.ts
+++ b/packages/date-picker/src/shared/utils/getMonthName/index.ts
@@ -1,18 +1,21 @@
-import padStart from 'lodash/padStart';
-
-import { MonthObject } from '../../constants';
+import { MonthObject } from '../../types';
+import { normalizeLocale } from '../normalizeLocale';
 
 /**
  * Returns the month name from a given index and optional locale
  */
 export const getMonthName = (
   monthIndex: number,
-  locale = 'default',
+  locale?: string,
 ): MonthObject => {
-  const str = `2023-${padStart((monthIndex + 1).toString(), 2, '0')}-15`;
-  const month = new Date(str);
+  // Use the default system locale if the provided value is invalid
+  locale = normalizeLocale(locale);
   return {
-    long: month.toLocaleString(locale, { month: 'long' }),
-    short: month.toLocaleString(locale, { month: 'short' }),
+    long: new Date(2020, monthIndex, 15).toLocaleString(locale, {
+      month: 'long',
+    }),
+    short: new Date(2020, monthIndex, 15).toLocaleString(locale, {
+      month: 'short',
+    }),
   };
 };
diff --git a/packages/date-picker/src/shared/utils/getWeekdayName/getWeekdayName.spec.ts b/packages/date-picker/src/shared/utils/getWeekdayName/getWeekdayName.spec.ts
new file mode 100644
index 0000000000..172db0dcef
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getWeekdayName/getWeekdayName.spec.ts
@@ -0,0 +1,57 @@
+import { getWeekdayName } from '.';
+describe('packages/date-picker/utils/getWeekdayName', () => {
+  test('default (English)', () => {
+    expect(getWeekdayName(0)).toEqual(
+      expect.objectContaining({
+        long: 'Sunday',
+        abbr: 'Sun',
+        short: 'Su',
+        narrow: 'S',
+      }),
+    );
+    expect(getWeekdayName(6)).toEqual(
+      expect.objectContaining({
+        long: 'Saturday',
+        abbr: 'Sat',
+        short: 'Sa',
+        narrow: 'S',
+      }),
+    );
+  });
+
+  test('iso8601', () => {
+    expect(getWeekdayName(0, 'iso8601')).toEqual(
+      expect.objectContaining({
+        long: 'Sunday',
+        short: 'Su',
+      }),
+    );
+  });
+
+  test('es-MX (Spanish)', () => {
+    expect(getWeekdayName(0, 'es-MX')).toEqual(
+      expect.objectContaining({
+        long: 'domingo',
+        short: 'do',
+      }),
+    );
+  });
+
+  test('fr-FR (French)', () => {
+    expect(getWeekdayName(0, 'fr-FR')).toEqual(
+      expect.objectContaining({
+        long: 'dimanche',
+        short: 'di',
+      }),
+    );
+  });
+
+  test('de-DE (German)', () => {
+    expect(getWeekdayName(0, 'de-DE')).toEqual(
+      expect.objectContaining({
+        long: 'Sonntag',
+        short: 'So',
+      }),
+    );
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/getWeekdayName/index.ts b/packages/date-picker/src/shared/utils/getWeekdayName/index.ts
new file mode 100644
index 0000000000..ab7b62bea4
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getWeekdayName/index.ts
@@ -0,0 +1,35 @@
+import { truncate } from 'lodash';
+
+import { Month } from '../../constants';
+import { WeekdayObject } from '../../types';
+import { normalizeLocale } from '../normalizeLocale';
+
+export const getWeekdayName = (
+  day: number,
+  localeStr?: string,
+): WeekdayObject => {
+  // Use the default system locale if the provided value is invalid
+  localeStr = normalizeLocale(localeStr);
+  day = (day % 7) + 1;
+  const sampleDate = new Date(2000, Month.October, day); // October 1 2000 was a Sunday
+
+  // TODO: format the sample date using `date-fns/format`
+  // and unicode date field symbols https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+  return {
+    long: sampleDate.toLocaleDateString(localeStr, {
+      weekday: 'long',
+    }),
+    abbr: sampleDate.toLocaleDateString(localeStr, {
+      weekday: 'short',
+    }),
+    short: truncate(
+      sampleDate.toLocaleDateString(localeStr, {
+        weekday: 'short',
+      }),
+      { length: 2, omission: '' },
+    ),
+    narrow: sampleDate.toLocaleDateString(localeStr, {
+      weekday: 'narrow',
+    }),
+  };
+};
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index 9226442032..a393a53b74 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -11,6 +11,8 @@ export { getFormattedDateString } from './getFormattedDateString';
 export { getFullMonthLabel } from './getFullMonthLabel';
 export { getISODate } from './getISODate';
 export { getLastOfMonth } from './getLastOfMonth';
+export { getLocaleMonths } from './getLocaleMonths';
+export { getLocaleWeekdays } from './getLocaleWeekdays';
 export { getMaxSegmentValue } from './getMaxSegmentValue';
 export { getMinSegmentValue } from './getMinSegmentValue';
 export { getMonthIndex } from './getMonthIndex';
@@ -27,6 +29,7 @@ export {
 } from './getSegmentsFromDate';
 export { getUTCDateString } from './getUTCDateString';
 export { getValueFormatter } from './getValueFormatter';
+export { getWeekdayName } from './getWeekdayName';
 export { getWeeksArray } from './getWeeksArray';
 export { isCurrentUTCDay } from './isCurrentUTCDay';
 export { isDefined } from './isDefined';
diff --git a/packages/date-picker/src/shared/utils/isValidLocale/index.ts b/packages/date-picker/src/shared/utils/isValidLocale/index.ts
index 987e2a9294..db244827a2 100644
--- a/packages/date-picker/src/shared/utils/isValidLocale/index.ts
+++ b/packages/date-picker/src/shared/utils/isValidLocale/index.ts
@@ -1,7 +1,7 @@
 /**
  * Returns whether the provided string is a valid Intl.Locale string
  */
-export function isValidLocale(str?: string): boolean {
+export function isValidLocale(str?: string): str is string {
   if (!str) return false;
 
   try {
diff --git a/packages/date-picker/src/shared/utils/normalizeLocale/index.ts b/packages/date-picker/src/shared/utils/normalizeLocale/index.ts
new file mode 100644
index 0000000000..4e0ce9c075
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/normalizeLocale/index.ts
@@ -0,0 +1,10 @@
+import { isValidLocale } from '../isValidLocale';
+
+/**
+ * Returns the provided locale, or the resolved locale from the Intl object
+ */
+export const normalizeLocale = (localeStr?: string): string => {
+  return isValidLocale(localeStr)
+    ? localeStr
+    : Intl.DateTimeFormat().resolvedOptions().locale;
+};
diff --git a/packages/date-picker/src/shared/utils/normalizeLocale/normalizeLocale.spec.ts b/packages/date-picker/src/shared/utils/normalizeLocale/normalizeLocale.spec.ts
new file mode 100644
index 0000000000..171c0d7ad6
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/normalizeLocale/normalizeLocale.spec.ts
@@ -0,0 +1,15 @@
+import { normalizeLocale } from '.';
+
+describe('packages/date-picker/utils/normalizeLocale', () => {
+  test('pass through valid locale', () => {
+    expect(normalizeLocale('de-DE')).toBe('de-DE');
+  });
+
+  test('resolve invalid locale to system', () => {
+    expect(normalizeLocale('asdf')).toBe('en-US');
+  });
+
+  test('resolve undefined to system', () => {
+    expect(normalizeLocale()).toBe('en-US');
+  });
+});

From 787e9c8570a4948d0d2c20b6548a8cb70d103908 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 7 Dec 2023 18:00:00 -0500
Subject: [PATCH 313/351] mv main story

---
 .../{DatePicker => }/DatePicker.stories.tsx   | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)
 rename packages/date-picker/src/{DatePicker => }/DatePicker.stories.tsx (84%)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
similarity index 84%
rename from packages/date-picker/src/DatePicker/DatePicker.stories.tsx
rename to packages/date-picker/src/DatePicker.stories.tsx
index ec197657ad..c9f16d4eec 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -11,24 +11,25 @@ import { Size } from '@leafygreen-ui/tokens';
 import {
   DatePickerContextProps,
   DatePickerProvider,
-} from '../shared/components/DatePickerContext';
-import { Month } from '../shared/constants';
-import { Locales, TimeZones } from '../shared/testutils';
-import { AutoComplete } from '../shared/types';
-import { newUTC } from '../shared/utils';
-
+} from './shared/components/DatePickerContext';
+import { Month } from './shared/constants';
+import {
+  getProviderPropsFromStoryContext,
+  Locales,
+  TimeZones,
+} from './shared/testutils';
+import { AutoComplete } from './shared/types';
+import { newUTC } from './shared/utils';
 import { DatePicker } from './DatePicker';
-import { getProviderPropsFromStoryArgs } from './DatePicker.testutils';
 
 const ProviderWrapper = (Story: StoryFn, ctx: any) => {
-  const { contextProps, componentProps } = getProviderPropsFromStoryArgs(
-    ctx?.args,
-  );
+  const { leafyGreenProviderProps, datePickerProviderProps, storyProps } =
+    getProviderPropsFromStoryContext(ctx?.args);
 
   return (
-    <LeafyGreenProvider darkMode={contextProps.darkMode}>
-      <DatePickerProvider {...contextProps}>
-        <Story {...componentProps} />
+    <LeafyGreenProvider {...leafyGreenProviderProps}>
+      <DatePickerProvider {...datePickerProviderProps}>
+        <Story {...storyProps} />
       </DatePickerProvider>
     </LeafyGreenProvider>
   );

From aa511a789648495cd8230f68112a907a975b1e60 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 7 Dec 2023 18:00:03 -0500
Subject: [PATCH 314/351] Delete rollup.config.mjs

---
 packages/date-picker/rollup.config.mjs | 14 --------------
 1 file changed, 14 deletions(-)
 delete mode 100644 packages/date-picker/rollup.config.mjs

diff --git a/packages/date-picker/rollup.config.mjs b/packages/date-picker/rollup.config.mjs
deleted file mode 100644
index f287595312..0000000000
--- a/packages/date-picker/rollup.config.mjs
+++ /dev/null
@@ -1,14 +0,0 @@
-import {
-  esmConfig,
-  storiesConfig,
-  umdConfig,
-} from '@lg-tools/build/config/rollup.config.mjs';
-
-const sharedConfig = [esmConfig, umdConfig].map(config => ({
-  ...config,
-  input: 'src/shared/index.ts',
-}));
-
-const config = [esmConfig, umdConfig, ...sharedConfig];
-
-export default config;

From 6aec3e240fddb24ec1d8effd1f80308567b84ca7 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 7 Dec 2023 18:00:41 -0500
Subject: [PATCH 315/351] remove getProviderPropsFromStoryArgs

---
 .../src/DatePicker/DatePicker.testutils.tsx   | 23 +------------------
 .../DatePickerInput.stories.tsx               | 15 ++++++------
 .../DatePickerMenu/DatePickerMenu.stories.tsx | 23 ++++++++-----------
 .../getProviderPropsFromStoryContext/index.ts |  3 +--
 4 files changed, 19 insertions(+), 45 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index e57ca6fe76..299ec2e37d 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -9,12 +9,8 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import {
-  ContextPropKeys,
-  contextPropNames,
-} from '../shared/components/DatePickerContext';
 import { DateSegment } from '../shared/types';
-import { getISODate, pickAndOmit } from '../shared/utils';
+import { getISODate } from '../shared/utils';
 
 import { DatePickerProps } from './DatePicker.types';
 import { DatePicker } from '.';
@@ -220,20 +216,3 @@ export const findTabStopElementMap = async (
     'menu > right chevron': rightChevron,
   };
 };
-
-export const getProviderPropsFromStoryArgs = (
-  args: any,
-): {
-  contextProps: Pick<DatePickerProps, ContextPropKeys>;
-  componentProps: Omit<DatePickerProps, ContextPropKeys>;
-} => {
-  const [contextProps, componentProps] = pickAndOmit<
-    DatePickerProps,
-    ContextPropKeys
-  >(args, contextPropNames);
-
-  return {
-    contextProps,
-    componentProps,
-  };
-};
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index 11766a3757..ba17c78105 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -10,7 +10,7 @@ import {
   DatePickerContextProps,
   DatePickerProvider,
 } from '../../shared/components/DatePickerContext';
-import { getProviderPropsFromStoryArgs } from '../DatePicker.testutils';
+import { getProviderPropsFromStoryContext } from '../../shared/testutils';
 import { DatePickerProps } from '../DatePicker.types';
 import {
   SingleDateContextProps,
@@ -20,15 +20,14 @@ import {
 import { DatePickerInput } from './DatePickerInput';
 
 const ProviderWrapper = (Story: StoryFn, ctx: any) => {
-  const { contextProps, componentProps } = getProviderPropsFromStoryArgs(
-    ctx?.args,
-  );
+  const { leafyGreenProviderProps, datePickerProviderProps, storyProps } =
+    getProviderPropsFromStoryContext<DatePickerProps>(ctx?.args);
 
   return (
-    <LeafyGreenProvider darkMode={contextProps.darkMode}>
-      <DatePickerProvider {...contextProps}>
-        <SingleDateProvider value={componentProps.value} setValue={() => {}}>
-          <Story {...componentProps} />
+    <LeafyGreenProvider {...leafyGreenProviderProps}>
+      <DatePickerProvider {...datePickerProviderProps}>
+        <SingleDateProvider value={storyProps.value} setValue={() => {}}>
+          <Story {...storyProps} />
         </SingleDateProvider>
       </DatePickerProvider>
     </LeafyGreenProvider>
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 97b47949fe..38ea059b70 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -14,12 +14,14 @@ import {
   contextPropNames,
   type DatePickerContextProps,
   DatePickerProvider,
-  defaultDatePickerContext,
 } from '../../shared/components/DatePickerContext';
 import { Month } from '../../shared/constants';
-import { Locales, TimeZones } from '../../shared/testutils';
+import {
+  getProviderPropsFromStoryContext,
+  Locales,
+  TimeZones,
+} from '../../shared/testutils';
 import { newUTC } from '../../shared/utils';
-import { getProviderPropsFromStoryArgs } from '../DatePicker.testutils';
 import {
   type SingleDateContextProps,
   SingleDateProvider,
@@ -34,18 +36,13 @@ type DecoratorArgs = DatePickerMenuProps &
   DatePickerContextProps;
 
 const MenuDecorator: Decorator = (Story: StoryFn, ctx: any) => {
-  const { contextProps, componentProps } = getProviderPropsFromStoryArgs(
-    ctx.args,
-  );
+  const { leafyGreenProviderProps, datePickerProviderProps, storyProps } =
+    getProviderPropsFromStoryContext<DatePickerMenuProps>(ctx.args);
 
   return (
-    <LeafyGreenProvider darkMode={contextProps.darkMode}>
-      <DatePickerProvider
-        {...defaultDatePickerContext}
-        {...contextProps}
-        initialOpen={true}
-      >
-        <Story {...componentProps} />
+    <LeafyGreenProvider {...leafyGreenProviderProps}>
+      <DatePickerProvider {...datePickerProviderProps} initialOpen={true}>
+        <Story {...storyProps} />
       </DatePickerProvider>
     </LeafyGreenProvider>
   );
diff --git a/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts b/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
index 6aa884e598..c98ce52b60 100644
--- a/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
+++ b/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
@@ -6,7 +6,6 @@ import {
   ContextPropKeys,
   contextPropNames,
   DatePickerProviderProps,
-  defaultDatePickerContext,
 } from '../../components/DatePickerContext';
 import { BaseDatePickerProps } from '../../types';
 import { pickAndOmit } from '../../utils';
@@ -31,7 +30,7 @@ export const getProviderPropsFromStoryContext = <P = BaseDatePickerProps>(
       baseFontSize: baseFontSize === 13 ? 14 : baseFontSize,
     },
     datePickerProviderProps: {
-      ...defaultDatePickerContext,
+      label: '',
       ...datePickerProviderProps,
     },
     storyProps,

From 436349a85cededf7e40195bd5d44d8323a890f14 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 7 Dec 2023 18:03:16 -0500
Subject: [PATCH 316/351] Update DatePicker.stories.tsx

---
 packages/date-picker/src/DatePicker.stories.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
index c9f16d4eec..deec51aa8e 100644
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -13,11 +13,8 @@ import {
   DatePickerProvider,
 } from './shared/components/DatePickerContext';
 import { Month } from './shared/constants';
-import {
-  getProviderPropsFromStoryContext,
-  Locales,
-  TimeZones,
-} from './shared/testutils';
+import { getProviderPropsFromStoryContext } from './shared/testutils/getProviderPropsFromStoryContext';
+import { Locales, TimeZones } from './shared/testutils/testValues';
 import { AutoComplete } from './shared/types';
 import { newUTC } from './shared/utils';
 import { DatePicker } from './DatePicker';

From 5467d9b0aa7159153d9fb2b6342bef0a18fc5c3e Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Thu, 7 Dec 2023 18:14:05 -0500
Subject: [PATCH 317/351] Date picker [LG-3873] rename locale prop (#2122)

* reorg types

* Update BaseDatePickerProps.types.ts

* refactor to locale

* Squashed commit of the following:

commit 436349a85cededf7e40195bd5d44d8323a890f14
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Thu Dec 7 18:03:16 2023 -0500

    Update DatePicker.stories.tsx

commit 6aec3e240fddb24ec1d8effd1f80308567b84ca7
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Thu Dec 7 18:00:41 2023 -0500

    remove getProviderPropsFromStoryArgs

commit aa511a789648495cd8230f68112a907a975b1e60
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Thu Dec 7 18:00:03 2023 -0500

    Delete rollup.config.mjs

commit 787e9c8570a4948d0d2c20b6548a8cb70d103908
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Thu Dec 7 18:00:00 2023 -0500

    mv main story
---
 .../date-picker/src/DatePicker.stories.tsx    |   6 +-
 .../src/DatePicker/DatePicker.spec.tsx        |  32 ++---
 .../DatePickerInput.stories.tsx               |   4 +-
 .../DatePickerMenu/DatePickerMenu.stories.tsx |   2 +-
 .../DatePickerMenuHeader.tsx                  |   8 +-
 .../SingleDateContext/SingleDateContext.tsx   |   6 +-
 .../CalendarGrid/CalendarGrid.stories.tsx     |   6 +-
 .../Calendar/CalendarGrid/CalendarGrid.tsx    |  10 +-
 .../DateInputBox/DateInputBox.spec.tsx        |  12 +-
 .../DateInputBox/DateInputBox.stories.tsx     |   6 +-
 .../DateInput/DateInputBox/DateInputBox.tsx   |   2 +-
 .../DatePickerContext.spec.tsx                |   1 -
 .../DatePickerContext.utils.ts                |   6 +-
 .../shared/types/BaseDatePickerProps.types.ts |  76 +++++++++++
 .../date-picker/src/shared/types/index.ts     | 123 ++----------------
 .../date-picker/src/shared/types/types.ts     |  38 ++++++
 .../utils/getWeeksArray/getWeeksArray.spec.ts |  10 +-
 .../src/shared/utils/getWeeksArray/index.ts   |   6 +-
 18 files changed, 181 insertions(+), 173 deletions(-)
 create mode 100644 packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
 create mode 100644 packages/date-picker/src/shared/types/types.ts

diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
index deec51aa8e..b2cba5171a 100644
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -52,7 +52,7 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
       combineArgs: {
         darkMode: [false, true],
         value: [newUTC(2023, Month.December, 26)],
-        dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
+        locale: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
         timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
         disabled: [false, true],
       },
@@ -60,14 +60,14 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
     },
   },
   args: {
-    dateFormat: 'iso8601',
+    locale: 'iso8601',
     label: 'Pick a date',
     size: Size.Default,
     autoComplete: AutoComplete.Off,
   },
   argTypes: {
     baseFontSize: { control: 'select' },
-    dateFormat: { control: 'select', options: Locales },
+    locale: { control: 'select', options: Locales },
     description: { control: 'text' },
     label: { control: 'text' },
     min: { control: 'date' },
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 0cd240b21f..507d475501 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1565,39 +1565,39 @@ describe('packages/date-picker', () => {
 
         describe('auto-formatting & auto-focus', () => {
           describe('for ISO format', () => {
-            const dateFormat = 'iso8601';
+            const locale = 'iso8601';
 
             test('when year value is explicit, focus advances to month', () => {
               const { yearInput, monthInput } = renderDatePicker({
-                dateFormat,
+                locale,
               });
               userEvent.type(yearInput, '1999');
               expect(monthInput).toHaveFocus();
             });
             test('when year value is before MIN, focus still advances', () => {
               const { yearInput, monthInput } = renderDatePicker({
-                dateFormat,
+                locale,
               });
               userEvent.type(yearInput, '1944');
               expect(monthInput).toHaveFocus();
             });
             test('when year value is after MAX, focus still advances', () => {
               const { yearInput, monthInput } = renderDatePicker({
-                dateFormat,
+                locale,
               });
               userEvent.type(yearInput, '2048');
               expect(monthInput).toHaveFocus();
             });
             test('when month value is explicit, focus advances to day', () => {
               const { monthInput, dayInput } = renderDatePicker({
-                dateFormat,
+                locale,
               });
               userEvent.type(monthInput, '5');
               expect(dayInput).toHaveFocus();
             });
             test('when day value is explicit, format the day', async () => {
               const { dayInput } = renderDatePicker({
-                dateFormat,
+                locale,
               });
               userEvent.type(dayInput, '5');
               expect(dayInput).toHaveFocus();
@@ -1605,20 +1605,20 @@ describe('packages/date-picker', () => {
             });
 
             test('when year value is ambiguous, focus does NOT advance', () => {
-              const { yearInput } = renderDatePicker({ dateFormat });
+              const { yearInput } = renderDatePicker({ locale });
               userEvent.type(yearInput, '200');
               expect(yearInput).toHaveFocus();
             });
             test('when month value is ambiguous, focus does NOT advance', () => {
               const { monthInput } = renderDatePicker({
-                dateFormat,
+                locale,
               });
               userEvent.type(monthInput, '1');
               expect(monthInput).toHaveFocus();
             });
             test('when day value is ambiguous, segment is NOT formatted', async () => {
               const { dayInput } = renderDatePicker({
-                dateFormat,
+                locale,
               });
               userEvent.type(dayInput, '2');
               expect(dayInput).toHaveFocus();
@@ -1627,25 +1627,25 @@ describe('packages/date-picker', () => {
           });
 
           describe('for en-US format', () => {
-            const dateFormat = 'en-US';
+            const locale = 'en-US';
 
             test('when month value is explicit, focus advances to day', () => {
               const { monthInput, dayInput } = renderDatePicker({
-                dateFormat,
+                locale,
               });
               userEvent.type(monthInput, '5');
               expect(dayInput).toHaveFocus();
             });
             test('when day value is explicit, focus advances to year', () => {
               const { dayInput, yearInput } = renderDatePicker({
-                dateFormat,
+                locale,
               });
               userEvent.type(dayInput, '5');
               expect(yearInput).toHaveFocus();
             });
             test('when year value is explicit, segment value is set', () => {
               const { yearInput } = renderDatePicker({
-                dateFormat,
+                locale,
               });
               userEvent.type(yearInput, '1999');
               expect(yearInput).toHaveFocus();
@@ -1653,18 +1653,18 @@ describe('packages/date-picker', () => {
             });
 
             test('when month value is ambiguous, focus does NOT advance', () => {
-              const { monthInput } = renderDatePicker({ dateFormat });
+              const { monthInput } = renderDatePicker({ locale });
               userEvent.type(monthInput, '1');
               expect(monthInput).toHaveFocus();
             });
             test('when day value is ambiguous, focus does NOT advance', () => {
-              const { dayInput } = renderDatePicker({ dateFormat });
+              const { dayInput } = renderDatePicker({ locale });
               userEvent.type(dayInput, '2');
               expect(dayInput).toHaveFocus();
             });
             test('when year value is ambiguous, segment does not format', async () => {
               const { yearInput } = renderDatePicker({
-                dateFormat,
+                locale,
               });
               userEvent.type(yearInput, '200');
               expect(yearInput).toHaveFocus();
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index ba17c78105..0aabb2322e 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -50,7 +50,7 @@ const meta: StoryMetaType<
       combineArgs: {
         darkMode: [false, true],
         value: [null, new Date('1993-12-26')],
-        dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
+        locale: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
         size: Object.values(Size),
       },
       decorator: ProviderWrapper,
@@ -58,7 +58,7 @@ const meta: StoryMetaType<
   },
   args: {
     label: 'Label',
-    dateFormat: 'en-UK',
+    locale: 'en-UK',
     timeZone: 'Europe/London',
   },
   argTypes: {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 38ea059b70..1929a94599 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -65,7 +65,7 @@ const meta: StoryMetaType<typeof DatePickerMenu, DecoratorArgs> = {
   },
   argTypes: {
     value: { control: 'date' },
-    dateFormat: { control: 'select', options: Locales },
+    locale: { control: 'select', options: Locales },
     timeZone: { control: 'select', options: [undefined, ...TimeZones] },
   },
 };
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
index 1b4dc02f01..39869a3905 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
@@ -37,10 +37,10 @@ export const DatePickerMenuHeader = forwardRef<
   HTMLDivElement,
   DatePickerMenuHeaderProps
 >(({ setMonth, ...rest }: DatePickerMenuHeaderProps, fwdRef) => {
-  const { min, max, setIsSelectOpen, dateFormat } = useDatePickerContext();
+  const { min, max, setIsSelectOpen, locale } = useDatePickerContext();
   const { month } = useSingleDateContext();
 
-  const monthOptions = getLocaleMonths(dateFormat);
+  const monthOptions = getLocaleMonths(locale);
   const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
 
   const updateMonth = (newMonth: Date) => {
@@ -66,8 +66,8 @@ export const DatePickerMenuHeader = forwardRef<
   /** Returns whether the provided month should be enabled */
   const isMonthEnabled = useCallback(
     (monthName: string) =>
-      shouldMonthBeEnabled(monthName, { month, min, max, locale: dateFormat }),
-    [dateFormat, max, min, month],
+      shouldMonthBeEnabled(monthName, { month, min, max, locale }),
+    [locale, max, min, month],
   );
 
   return (
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
index ddb62dab40..d0fc683bc4 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
@@ -46,7 +46,7 @@ export const SingleDateProvider = ({
     disabled,
     min,
     max,
-    dateFormat,
+    locale,
     setInternalErrorMessage,
     clearInternalErrorMessage,
     isInRange,
@@ -109,11 +109,11 @@ export const SingleDateProvider = ({
     if (val && !isInRange(val)) {
       if (isOnOrBefore(val, min)) {
         setInternalErrorMessage(
-          `Date must be after ${getFormattedDateString(min, dateFormat)}`,
+          `Date must be after ${getFormattedDateString(min, locale)}`,
         );
       } else {
         setInternalErrorMessage(
-          `Date must be before ${getFormattedDateString(max, dateFormat)}`,
+          `Date must be before ${getFormattedDateString(max, locale)}`,
         );
       }
     } else {
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index e635d14dda..0c49d5ca26 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -33,19 +33,19 @@ const meta: StoryMetaType<typeof CalendarGrid, DatePickerContextProps> = {
     generate: {
       combineArgs: {
         darkMode: [false, true],
-        dateFormat: Locales,
+        locale: Locales,
       },
       decorator: ProviderWrapper,
     },
   },
   decorators: [ProviderWrapper],
   args: {
-    dateFormat: 'en-US',
+    locale: 'en-US',
     timeZone: 'UTC',
   },
   argTypes: {
     darkMode: { control: 'boolean' },
-    dateFormat: {
+    locale: {
       control: 'select',
       options: Locales,
     },
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
index 7c3a6c5e52..99f4211f47 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -36,11 +36,11 @@ import { CalendarGridProps } from './CalendarGrid.types';
  */
 export const CalendarGrid = forwardRef<HTMLTableElement, CalendarGridProps>(
   ({ month, children, className, ...rest }: CalendarGridProps, fwdRef) => {
-    const { dateFormat } = useDatePickerContext();
-    const weekStartsOn = getWeekStartByLocale(dateFormat);
+    const { locale } = useDatePickerContext();
+    const weekStartsOn = getWeekStartByLocale(locale);
     const weeks = useMemo(
-      () => getWeeksArray(month, { dateFormat }),
-      [dateFormat, month],
+      () => getWeeksArray(month, { locale }),
+      [locale, month],
     );
 
     return (
@@ -54,7 +54,7 @@ export const CalendarGrid = forwardRef<HTMLTableElement, CalendarGridProps>(
           <tr role="row">
             {range(daysPerWeek).map(i => {
               const dayIndex = (i + weekStartsOn) % daysPerWeek;
-              const weekday = getLocaleWeekdays(dateFormat)[dayIndex];
+              const weekday = getLocaleWeekdays(locale)[dayIndex];
               return (
                 <th
                   role="columnheader"
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
index ae8b64f14d..32a2efcb6b 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -50,7 +50,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
   const onSegmentChange = jest.fn<DateInputSegmentChangeEventHandler>();
 
   const testContext: Partial<DatePickerProviderProps> = {
-    dateFormat: 'iso8601',
+    locale: 'iso8601',
     timeZone: 'UTC',
   };
 
@@ -71,7 +71,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
 
     describe('renders segments in the correct order', () => {
       test('iso8601', () => {
-        const result = renderDateInputBox(undefined, { dateFormat: 'iso8601' });
+        const result = renderDateInputBox(undefined, { locale: 'iso8601' });
         const segments = result.getAllByRole('spinbutton');
         expect(segments[0]).toHaveAttribute('aria-label', 'year');
         expect(segments[1]).toHaveAttribute('aria-label', 'month');
@@ -79,7 +79,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
       });
 
       test('en-US', () => {
-        const result = renderDateInputBox(undefined, { dateFormat: 'en-US' });
+        const result = renderDateInputBox(undefined, { locale: 'en-US' });
         const segments = result.getAllByRole('spinbutton');
         expect(segments[0]).toHaveAttribute('aria-label', 'month');
         expect(segments[1]).toHaveAttribute('aria-label', 'day');
@@ -87,7 +87,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
       });
 
       test('en-UK', () => {
-        const result = renderDateInputBox(undefined, { dateFormat: 'en-UK' });
+        const result = renderDateInputBox(undefined, { locale: 'en-UK' });
         const segments = result.getAllByRole('spinbutton');
         expect(segments[0]).toHaveAttribute('aria-label', 'day');
         expect(segments[1]).toHaveAttribute('aria-label', 'month');
@@ -198,7 +198,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
   describe('Mouse interaction', () => {
     test('click on segment focuses it', () => {
       const { dayInput } = renderDateInputBox(undefined, {
-        dateFormat: 'iso8601',
+        locale: 'iso8601',
       });
       userEvent.click(dayInput);
       expect(dayInput).toHaveFocus();
@@ -209,7 +209,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
     test('Tab moves focus to next segment', () => {
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
         undefined,
-        { dateFormat: 'iso8601' },
+        { locale: 'iso8601' },
       );
       userEvent.click(yearInput);
       userEvent.tab();
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
index 5ccdd5f5c5..bd06222bd7 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -54,12 +54,12 @@ const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
   },
   args: {
     label: 'Label',
-    dateFormat: 'iso8601',
+    locale: 'iso8601',
     timeZone: 'Europe/London',
   },
   argTypes: {
     value: { control: 'date' },
-    dateFormat: { control: 'select', options: Locales },
+    locale: { control: 'select', options: Locales },
   },
 };
 
@@ -98,7 +98,7 @@ export const Formats: StoryType<
 Formats.parameters = {
   generate: {
     combineArgs: {
-      dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
+      locale: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
     },
   },
 };
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index f76f36c136..9107c261c3 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -38,7 +38,7 @@ import { DateInputBoxProps } from './DateInputBox.types';
  *
  * Depends on {@link DateInputSegment}
  *
- * Uses parameters `value` & `dateFormat` along with {@link Intl.DateTimeFormat.prototype.formatToParts}
+ * Uses parameters `value` & `locale` along with {@link Intl.DateTimeFormat.prototype.formatToParts}
  * to determine the segment order and separator characters.
  *
  * Provided value is assumed to be UTC.
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
index f0b5864540..32731dbba4 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
@@ -21,7 +21,6 @@ const renderDatePickerProvider = () => {
   return { result, rerender };
 };
 
-// TODO: ADD MORE TESTS
 describe('packages/date-picker-context', () => {
   describe('useDatePickerContext', () => {
     describe('isOpen', () => {
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
index ec1344fbd8..3b0ea946e5 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
@@ -26,7 +26,7 @@ export type ContextPropKeys = keyof DatePickerProviderProps &
 export const contextPropNames: Array<ContextPropKeys> = [
   'label',
   'description',
-  'dateFormat',
+  'locale',
   'timeZone',
   'min',
   'max',
@@ -43,7 +43,7 @@ export const contextPropNames: Array<ContextPropKeys> = [
 export const defaultDatePickerContext: DatePickerContextProps = {
   label: '',
   description: '',
-  dateFormat: 'iso8601',
+  locale: 'iso8601',
   timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   min: MIN_DATE,
   max: MAX_DATE,
@@ -105,7 +105,7 @@ export const getContextProps = (
   const isInRange = getIsInRange(providerValue.min, providerValue.max);
 
   // Only used to track the _order_ of segments, not the value itself
-  const formatParts = getFormatParts(providerValue.dateFormat);
+  const formatParts = getFormatParts(providerValue.locale);
 
   return { ...providerValue, isInRange, formatParts };
 };
diff --git a/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
new file mode 100644
index 0000000000..e8b6055406
--- /dev/null
+++ b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
@@ -0,0 +1,76 @@
+import { DarkModeProps } from '@leafygreen-ui/lib';
+import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
+
+import { AutoComplete, DatePickerState } from './types';
+export interface BaseDatePickerProps extends DarkModeProps {
+  /**
+   * A label for the input
+   */
+  label: React.ReactNode;
+
+  /**
+   * A description for the date picker.
+   *
+   * It's recommended to set a meaningful time zone representation as the description (e.g. "Coordinated Universal Time")
+   */
+  description?: React.ReactNode;
+
+  /**
+   * Sets the _presentation format_ for the displayed date.
+   * Fallback to the user’s browser preference (if supported), otherwise ISO-8601.
+   *
+   * Currently only the following values are officially supported: 'en-US' | 'en-GB' | 'iso8601'
+   * Other valid [Locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)
+   * strings may work, however no assurances are made.
+   *
+   * @default 'iso8601'
+   */
+  locale?: 'iso8601' | string;
+
+  /**
+   * A valid IANA timezone string, or UTC offset.
+   * Sets the _presentation time zone_ for the displayed date.
+   * Fallback to the user’s browser preference (if available), otherwise UTC.
+   *
+   * @default 'utc'
+   */
+  timeZone?: string;
+
+  /** The earliest date accepted */
+  min?: string | Date;
+
+  /** The latest date accepted */
+  max?: string | Date;
+
+  /**
+   * The base font size of the input. Inherits from the nearest LeafyGreenProvider
+   */
+  baseFontSize?: BaseFontSize;
+
+  /**
+   * Whether the input is disabled. Note: will not set the `disabled` attribute on an input and the calendar menu will not open if disabled is set to true.
+   */
+  disabled?: boolean;
+
+  /** The size of the input */
+  size?: Size;
+
+  /**
+   * Whether to show an error message
+   */
+  state?: DatePickerState;
+
+  /**
+   * A message to show in red underneath the input when state is Error
+   */
+  errorMessage?: string;
+
+  /** Whether the calendar menu is initially open. Note: The calendar menu will not open if disabled is set to true.  */
+  initialOpen?: boolean;
+
+  /**
+   * Whether the input should autofill
+   * @default 'off'
+   */
+  autoComplete?: AutoComplete;
+}
diff --git a/packages/date-picker/src/shared/types/index.ts b/packages/date-picker/src/shared/types/index.ts
index 75490239d7..74b3318b28 100644
--- a/packages/date-picker/src/shared/types/index.ts
+++ b/packages/date-picker/src/shared/types/index.ts
@@ -1,120 +1,15 @@
-import omit from 'lodash/omit';
-
-import { FormFieldState } from '@leafygreen-ui/form-field';
-import { DarkModeProps } from '@leafygreen-ui/lib';
-import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
-
+export { type BaseDatePickerProps } from './BaseDatePickerProps.types';
 export {
   DateSegment,
   type DateSegmentsState,
   type DateSegmentValue,
   isDateSegment,
 } from './DateSegment.types';
-
-export const DatePickerState = omit(FormFieldState, 'Valid');
-export type DatePickerState =
-  (typeof DatePickerState)[keyof typeof DatePickerState];
-
-export type DateType = Date | null;
-export type DateRangeType = [DateType, DateType];
-
-export interface MonthObject {
-  long: string;
-  short: string;
-}
-
-/**
- * Object representing the abbreviations of a given weekday.
- * Abbreviation formats defined in Unicode: https://www.unicode.org/reports/tr35/tr35-67/tr35-dates.html#dfst-weekday
- */
-export interface WeekdayObject {
-  /** The long-form weekday name (e.g. Tuesday)*/
-  long: string;
-  /** An abbreviated weekday name (e.g. Tue) */
-  abbr: string;
-  /** A shorter weekday name (e.g. Tu)*/
-  short?: string;
-  /** The shortest weekday name (e.g. T) */
-  narrow: string;
-}
-
-export const AutoComplete = {
-  Off: 'off',
-  On: 'on',
-  Bday: 'bday',
-} as const;
-
-export type AutoComplete = (typeof AutoComplete)[keyof typeof AutoComplete];
-
-export interface BaseDatePickerProps extends DarkModeProps {
-  /**
-   * A label for the input
-   */
-  label: React.ReactNode;
-
-  /**
-   * A description for the date picker.
-   *
-   * It's recommended to set a meaningful time zone representation as the description (e.g. "Coordinated Universal Time")
-   */
-  description?: React.ReactNode;
-
-  /**
-   * Sets the _presentation format_ for the displayed date.
-   * Fallback to the user’s browser preference (if supported), otherwise ISO-8601.
-   *
-   * Currently only the following values are officially supported: 'en-US' | 'en-GB' | 'iso8601'
-   * Other valid [Locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)
-   * strings may work, however no assurances are made.
-   *
-   * @default 'iso8601'
-   */
-  dateFormat?: 'iso8601' | string;
-
-  /**
-   * A valid IANA timezone string, or UTC offset.
-   * Sets the _presentation time zone_ for the displayed date.
-   * Fallback to the user’s browser preference (if available), otherwise UTC.
-   *
-   * @default 'utc'
-   */
-  timeZone?: string;
-
-  /** The earliest date accepted */
-  min?: string | Date;
-
-  /** The latest date accepted */
-  max?: string | Date;
-
-  /**
-   * The base font size of the input. Inherits from the nearest LeafyGreenProvider
-   */
-  baseFontSize?: BaseFontSize;
-
-  /**
-   * Whether the input is disabled. Note: will not set the `disabled` attribute on an input and the calendar menu will not open if disabled is set to true.
-   */
-  disabled?: boolean;
-
-  /** The size of the input */
-  size?: Size;
-
-  /**
-   * Whether to show an error message
-   */
-  state?: DatePickerState;
-
-  /**
-   * A message to show in red underneath the input when state is Error
-   */
-  errorMessage?: string;
-
-  /** Whether the calendar menu is initially open. Note: The calendar menu will not open if disabled is set to true.  */
-  initialOpen?: boolean;
-
-  /**
-   * Whether the input should autofill
-   * @default 'off'
-   */
-  autoComplete?: AutoComplete;
-}
+export {
+  AutoComplete,
+  DatePickerState,
+  type DateRangeType,
+  type DateType,
+  type MonthObject,
+  type WeekdayObject,
+} from './types';
diff --git a/packages/date-picker/src/shared/types/types.ts b/packages/date-picker/src/shared/types/types.ts
new file mode 100644
index 0000000000..70875da515
--- /dev/null
+++ b/packages/date-picker/src/shared/types/types.ts
@@ -0,0 +1,38 @@
+import omit from 'lodash/omit';
+
+import { FormFieldState } from '@leafygreen-ui/form-field';
+
+export const DatePickerState = omit(FormFieldState, 'Valid');
+export type DatePickerState =
+  (typeof DatePickerState)[keyof typeof DatePickerState];
+
+export type DateType = Date | null;
+export type DateRangeType = [DateType, DateType];
+
+export interface MonthObject {
+  long: string;
+  short: string;
+}
+
+/**
+ * Object representing the abbreviations of a given weekday.
+ * Abbreviation formats defined in Unicode: https://www.unicode.org/reports/tr35/tr35-67/tr35-dates.html#dfst-weekday
+ */
+export interface WeekdayObject {
+  /** The long-form weekday name (e.g. Tuesday)*/
+  long: string;
+  /** An abbreviated weekday name (e.g. Tue) */
+  abbr: string;
+  /** A shorter weekday name (e.g. Tu)*/
+  short?: string;
+  /** The shortest weekday name (e.g. T) */
+  narrow: string;
+}
+
+export const AutoComplete = {
+  Off: 'off',
+  On: 'on',
+  Bday: 'bday',
+} as const;
+
+export type AutoComplete = (typeof AutoComplete)[keyof typeof AutoComplete];
diff --git a/packages/date-picker/src/shared/utils/getWeeksArray/getWeeksArray.spec.ts b/packages/date-picker/src/shared/utils/getWeeksArray/getWeeksArray.spec.ts
index 8ddb766a50..e733758726 100644
--- a/packages/date-picker/src/shared/utils/getWeeksArray/getWeeksArray.spec.ts
+++ b/packages/date-picker/src/shared/utils/getWeeksArray/getWeeksArray.spec.ts
@@ -7,7 +7,7 @@ import { getWeeksArray } from '.';
 describe('packages/date-picker/utils/getWeeksArray', () => {
   test('starts the week on the correct day for the locale', () => {
     const month = new Date(Date.UTC(2023, Month.August, 1));
-    const arr = getWeeksArray(month, { dateFormat: 'en-US' });
+    const arr = getWeeksArray(month, { locale: 'en-US' });
     expect(arr[0][0]).toBeNull(); // Sun
     expect(arr[0][1]).toBeNull(); // Mon
     expect(arr[0][2]).not.toBeNull(); // Tues
@@ -15,7 +15,7 @@ describe('packages/date-picker/utils/getWeeksArray', () => {
 
   describe('August 2023', () => {
     const aug23 = new Date(Date.UTC(2023, Month.August, 1));
-    const arr = getWeeksArray(aug23, { dateFormat: 'iso-8601' });
+    const arr = getWeeksArray(aug23, { locale: 'iso-8601' });
 
     test('returned array has the correct number of elements', () => {
       const daysInAugust = 31;
@@ -88,7 +88,7 @@ describe('packages/date-picker/utils/getWeeksArray', () => {
 
   describe('September 2023', () => {
     const sept23 = new Date(Date.UTC(2023, Month.September, 1));
-    const arr = getWeeksArray(sept23, { dateFormat: 'iso8601' });
+    const arr = getWeeksArray(sept23, { locale: 'iso8601' });
 
     test('returned array has the correct number of elements', () => {
       const daysInSept = 30;
@@ -166,7 +166,7 @@ describe('packages/date-picker/utils/getWeeksArray', () => {
 
   describe('February 2023', () => {
     const feb23 = new Date(Date.UTC(2023, Month.February, 1));
-    const arr = getWeeksArray(feb23, { dateFormat: 'iso8601' });
+    const arr = getWeeksArray(feb23, { locale: 'iso8601' });
 
     test('returned array has the correct number of elements', () => {
       const daysInFeb23 = 28;
@@ -238,7 +238,7 @@ describe('packages/date-picker/utils/getWeeksArray', () => {
 
   describe('February 2024 (leap-year)', () => {
     const feb23 = new Date(Date.UTC(2024, Month.February, 1));
-    const arr = getWeeksArray(feb23, { dateFormat: 'iso8601' });
+    const arr = getWeeksArray(feb23, { locale: 'iso8601' });
 
     test('returned array has the correct number of elements', () => {
       const daysInFeb24 = 29;
diff --git a/packages/date-picker/src/shared/utils/getWeeksArray/index.ts b/packages/date-picker/src/shared/utils/getWeeksArray/index.ts
index 92f1e9f38e..98670fd0d9 100644
--- a/packages/date-picker/src/shared/utils/getWeeksArray/index.ts
+++ b/packages/date-picker/src/shared/utils/getWeeksArray/index.ts
@@ -9,7 +9,7 @@ import { getDaysInUTCMonth } from '../getDaysInUTCMonth';
 import { setToUTCMidnight } from '../setToUTCMidnight';
 
 interface GetWeeksArrayOptions
-  extends Required<Pick<BaseDatePickerProps, 'dateFormat'>> {}
+  extends Required<Pick<BaseDatePickerProps, 'locale'>> {}
 
 /**
  * Returns a 7x5 (or 7x6) 2D array of Dates for the given month
@@ -20,10 +20,10 @@ export const getWeeksArray = (
    */
   month: Date,
 
-  { dateFormat }: GetWeeksArrayOptions,
+  { locale }: GetWeeksArrayOptions,
 ): Array<Array<Date | null>> => {
   // What day of the week do weeks start on for this locale? (Sun = 0)
-  const weekStartsOn = getWeekStartByLocale(dateFormat);
+  const weekStartsOn = getWeekStartByLocale(locale);
 
   // The first day of the month
   const firstOfMonth = setToUTCMidnight(month);

From c6ad642b9c8073a899fa311fb73c8b1ca7e9b9ff Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Fri, 8 Dec 2023 11:42:44 -0500
Subject: [PATCH 318/351] Date Picker [LG-3844] add propTypes (#2124)

* add propTypes

* remove src
---
 .../date-picker/src/DatePicker/DatePicker.tsx | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index bfcb12b691..01eab92c42 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -1,11 +1,13 @@
 import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
 
 import LeafyGreenProvider, {
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
-import { BaseFontSize } from '@leafygreen-ui/tokens';
+import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
+import { AutoComplete, DatePickerState } from '../shared';
 import {
   ContextPropKeys,
   contextPropNames,
@@ -73,3 +75,25 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
 );
 
 DatePicker.displayName = 'DatePicker';
+
+DatePicker.propTypes = {
+  value: PropTypes.instanceOf(Date),
+  onDateChange: PropTypes.func,
+  initialValue: PropTypes.instanceOf(Date),
+  handleValidation: PropTypes.func,
+  onChange: PropTypes.func,
+  label: PropTypes.node,
+  description: PropTypes.node,
+  locale: PropTypes.string,
+  timeZone: PropTypes.string,
+  min: PropTypes.string || PropTypes.instanceOf(Date),
+  max: PropTypes.string || PropTypes.instanceOf(Date),
+  baseFontSize: PropTypes.oneOf(Object.values(BaseFontSize)),
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(Object.values(Size)),
+  state: PropTypes.oneOf(Object.values(DatePickerState)),
+  errorMessage: PropTypes.string,
+  initialOpen: PropTypes.bool,
+  autoComplete: PropTypes.oneOf(Object.values(AutoComplete)),
+  darkMode: PropTypes.bool,
+};

From 4fed5f83593e2cd1d9b8a56e57a469ccf1818175 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Fri, 8 Dec 2023 15:09:02 -0500
Subject: [PATCH 319/351] Date Picker [LG-3852] invalid chevron (#2123)

* wip

* clean up a little

* move function to utils

* add test for util

* add tests

* update arrow aria label

* remove dup

* add interaction test

* address pr comments

* remove comment
---
 .../src/DatePicker/DatePicker.spec.tsx        | 163 +++++++++++++++---
 .../src/DatePicker/DatePicker.testutils.tsx   |   6 +-
 .../DatePickerMenuHeader.tsx                  |  60 +++++--
 .../DatePickerMenuHeader/utils/index.ts       |   2 +
 .../utils/shouldChevronBeDisabled/index.ts    |  23 +++
 .../isChevronDisabled.spec.ts                 | 146 ++++++++++++++++
 6 files changed, 366 insertions(+), 34 deletions(-)
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/index.ts
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/index.ts
 create mode 100644 packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/isChevronDisabled.spec.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 507d475501..9b9a1888a1 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -293,36 +293,127 @@ describe('packages/date-picker', () => {
       });
 
       describe('Chevrons', () => {
-        test('Left is disabled if prev. month is entirely out of range', async () => {
-          const { openMenu } = renderDatePicker({
-            min: new Date(Date.UTC(2023, Month.December, 1)),
+        describe('left', () => {
+          describe('is disabled', () => {
+            test('when the value is before the min', async () => {
+              const { openMenu } = renderDatePicker({
+                min: new Date(Date.UTC(2023, Month.December, 1)),
+                value: new Date(Date.UTC(2022, Month.December, 1)),
+              });
+
+              const { leftChevron } = await openMenu();
+              expect(leftChevron).toHaveAttribute('aria-disabled', 'true');
+            });
+            test('when the value is the same as the min', async () => {
+              const { openMenu } = renderDatePicker({
+                min: new Date(Date.UTC(2023, Month.December, 10)),
+                value: new Date(Date.UTC(2023, Month.December, 1)),
+              });
+
+              const { leftChevron } = await openMenu();
+              expect(leftChevron).toHaveAttribute('aria-disabled', 'true');
+            });
+            test('min and max are in the same month', async () => {
+              const { openMenu } = renderDatePicker({
+                min: new Date(Date.UTC(2023, Month.December, 1)),
+                max: new Date(Date.UTC(2023, Month.December, 20)),
+                value: new Date(Date.UTC(2023, Month.December, 5)),
+              });
+
+              const { leftChevron } = await openMenu();
+              expect(leftChevron).toHaveAttribute('aria-disabled', 'true');
+            });
           });
-          const { leftChevron } = await openMenu();
-          expect(leftChevron).toHaveAttribute('aria-disabled', 'true');
-        });
+          describe('is not disabled', () => {
+            test('when the year and month is after the max', async () => {
+              const { openMenu } = renderDatePicker({
+                max: new Date(Date.UTC(2024, Month.January, 2)),
+                value: new Date(Date.UTC(2025, Month.December, 1)),
+              });
 
-        test('Right is disabled if next month is entirely out of range', async () => {
-          const { openMenu } = renderDatePicker({
-            max: new Date(Date.UTC(2023, Month.December, 31)),
+              const { leftChevron } = await openMenu();
+              expect(leftChevron).toHaveAttribute('aria-disabled', 'false');
+            });
+            test('when the year and month is the same as the max', async () => {
+              const { openMenu } = renderDatePicker({
+                max: new Date(Date.UTC(2024, Month.January, 2)),
+                value: new Date(Date.UTC(2024, Month.January, 1)),
+              });
+
+              const { leftChevron } = await openMenu();
+              expect(leftChevron).toHaveAttribute('aria-disabled', 'false');
+            });
+            test('when the year is the same as the max and the month is after the max', async () => {
+              const { openMenu } = renderDatePicker({
+                max: new Date(Date.UTC(2024, Month.January, 2)),
+                value: new Date(Date.UTC(2024, Month.February, 1)),
+              });
+
+              const { leftChevron } = await openMenu();
+              expect(leftChevron).toHaveAttribute('aria-disabled', 'false');
+            });
           });
-          const { rightChevron } = await openMenu();
-          expect(rightChevron).toHaveAttribute('aria-disabled', 'true');
         });
+        describe('right', () => {
+          describe('is disabled', () => {
+            test('when the value is after the max', async () => {
+              const { openMenu } = renderDatePicker({
+                max: new Date(Date.UTC(2024, Month.January, 2)),
+                value: new Date(Date.UTC(2025, Month.December, 1)),
+              });
 
-        test('Left is not disabled if only part of prev. month is in range', async () => {
-          const { openMenu } = renderDatePicker({
-            min: new Date(Date.UTC(2023, Month.November, 29)),
+              const { rightChevron } = await openMenu();
+              expect(rightChevron).toHaveAttribute('aria-disabled', 'true');
+            });
+            test('when the value is the same as the max', async () => {
+              const { openMenu } = renderDatePicker({
+                max: new Date(Date.UTC(2024, Month.January, 2)),
+                value: new Date(Date.UTC(2024, Month.January, 1)),
+              });
+
+              const { rightChevron } = await openMenu();
+              expect(rightChevron).toHaveAttribute('aria-disabled', 'true');
+            });
+            test('min and max are in the same month', async () => {
+              const { openMenu } = renderDatePicker({
+                min: new Date(Date.UTC(2023, Month.December, 1)),
+                max: new Date(Date.UTC(2023, Month.December, 20)),
+                value: new Date(Date.UTC(2023, Month.December, 5)),
+              });
+
+              const { rightChevron } = await openMenu();
+              expect(rightChevron).toHaveAttribute('aria-disabled', 'true');
+            });
           });
-          const { leftChevron } = await openMenu();
-          expect(leftChevron).toHaveAttribute('aria-disabled', 'false');
-        });
+          describe('is not disabled', () => {
+            test('when the year and month is before the min', async () => {
+              const { openMenu } = renderDatePicker({
+                min: new Date(Date.UTC(2023, Month.December, 1)),
+                value: new Date(Date.UTC(2022, Month.December, 1)),
+              });
 
-        test('Right is not disabled if only part of next month is in of range', async () => {
-          const { openMenu } = renderDatePicker({
-            max: new Date(Date.UTC(2024, Month.January, 2)),
+              const { rightChevron } = await openMenu();
+              expect(rightChevron).toHaveAttribute('aria-disabled', 'false');
+            });
+            test('when the year and month is the same as the min', async () => {
+              const { openMenu } = renderDatePicker({
+                min: new Date(Date.UTC(2023, Month.December, 10)),
+                value: new Date(Date.UTC(2023, Month.December, 1)),
+              });
+
+              const { rightChevron } = await openMenu();
+              expect(rightChevron).toHaveAttribute('aria-disabled', 'false');
+            });
+            test('when the year is the same as the min and the month before the min', async () => {
+              const { openMenu } = renderDatePicker({
+                min: new Date(Date.UTC(2023, Month.December, 1)),
+                value: new Date(Date.UTC(2023, Month.November, 1)),
+              });
+
+              const { rightChevron } = await openMenu();
+              expect(rightChevron).toHaveAttribute('aria-disabled', 'false');
+            });
           });
-          const { rightChevron } = await openMenu();
-          expect(rightChevron).toHaveAttribute('aria-disabled', 'false');
         });
       });
     });
@@ -514,6 +605,20 @@ describe('packages/date-picker', () => {
             expect(yearSelect).toHaveValue('2022');
           });
 
+          test('updates the displayed month to the max month and year when the value is after the max', async () => {
+            const { openMenu } = renderDatePicker({
+              max: newUTC(2022, Month.January, 5),
+              value: newUTC(2023, Month.January, 5),
+            });
+            const { leftChevron, monthSelect, yearSelect, calendarGrid } =
+              await openMenu();
+            expect(calendarGrid).toHaveAttribute('aria-label', 'January 2023');
+            userEvent.click(leftChevron!);
+            expect(calendarGrid).toHaveAttribute('aria-label', 'January 2022');
+            expect(monthSelect).toHaveValue(Month.January.toString());
+            expect(yearSelect).toHaveValue('2022');
+          });
+
           test('keeps focus on chevron button', async () => {
             const { openMenu } = renderDatePicker();
             const { leftChevron } = await openMenu();
@@ -553,6 +658,20 @@ describe('packages/date-picker', () => {
             expect(monthSelect).toHaveValue(Month.January.toString());
             expect(yearSelect).toHaveValue('2024');
           });
+
+          test('updates the displayed month to the min month and year when the value is before the min ', async () => {
+            const { openMenu } = renderDatePicker({
+              min: newUTC(2023, Month.December, 26),
+              value: newUTC(2022, Month.November, 26),
+            });
+            const { rightChevron, monthSelect, yearSelect, calendarGrid } =
+              await openMenu();
+            expect(calendarGrid).toHaveAttribute('aria-label', 'November 2022');
+            userEvent.click(rightChevron!);
+            expect(calendarGrid).toHaveAttribute('aria-label', 'December 2023');
+            expect(monthSelect).toHaveValue(Month.December.toString());
+            expect(yearSelect).toHaveValue('2023');
+          });
         });
       });
 
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index 299ec2e37d..83fe5e1294 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -112,9 +112,11 @@ export const renderDatePicker = (
     const calendarCells =
       withinElement(menuContainerEl)?.getAllByRole('gridcell');
     const leftChevron =
-      withinElement(menuContainerEl)?.queryByLabelText('Previous month');
+      withinElement(menuContainerEl)?.queryByLabelText('Previous month') ||
+      withinElement(menuContainerEl)?.queryByLabelText('Previous valid month');
     const rightChevron =
-      withinElement(menuContainerEl)?.queryByLabelText('Next month');
+      withinElement(menuContainerEl)?.queryByLabelText('Next month') ||
+      withinElement(menuContainerEl)?.queryByLabelText('Next valid month');
     const monthSelect =
       withinElement(menuContainerEl)?.queryByLabelText('Select month');
     const yearSelect =
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
index 39869a3905..12cb796526 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
@@ -22,7 +22,7 @@ import {
   selectTruncateStyles,
 } from '../DatePickerMenu.styles';
 
-import { shouldMonthBeEnabled } from './utils/shouldMonthBeEnabled';
+import { shouldChevronBeDisabled, shouldMonthBeEnabled } from './utils';
 
 interface DatePickerMenuHeaderProps {
   setMonth: (newMonth: Date) => void;
@@ -37,7 +37,8 @@ export const DatePickerMenuHeader = forwardRef<
   HTMLDivElement,
   DatePickerMenuHeaderProps
 >(({ setMonth, ...rest }: DatePickerMenuHeaderProps, fwdRef) => {
-  const { min, max, setIsSelectOpen, locale } = useDatePickerContext();
+  const { min, max, setIsSelectOpen, locale, isInRange } =
+    useDatePickerContext();
   const { month } = useSingleDateContext();
 
   const monthOptions = getLocaleMonths(locale);
@@ -49,6 +50,27 @@ export const DatePickerMenuHeader = forwardRef<
     setMonth(newMonth);
   };
 
+  /**
+   * If the month is not in range and is not the last valid month
+   * e.g.
+   * This is not in range and is not the last valid month
+   * min: new Date(Date.UTC(2038, Month.March, 19));
+   * current month date: new Date(Date.UTC(2038, Month.Feburary, 19));
+   *
+   * This is not in range but it is the last valid month
+   * min: new Date(Date.UTC(2038, Month.March, 19));
+   * current month date: new Date(Date.UTC(2038, Month.March, 18));
+   */
+  const isMonthInValid = (dir: 'left' | 'right') => {
+    const isOnLastValidMonth = isSameUTCMonth(
+      month,
+      dir === 'left' ? max : min,
+    );
+    const isDateInRange = isInRange(month);
+
+    return !isDateInRange && !isOnLastValidMonth;
+  };
+
   /**
    * Calls the `updateMonth` helper with the appropriate month when a Chevron is clicked
    */
@@ -57,10 +79,26 @@ export const DatePickerMenuHeader = forwardRef<
     e => {
       e.stopPropagation();
       e.preventDefault();
-      const increment = dir === 'left' ? -1 : 1;
-      const newMonthIndex = month.getUTCMonth() + increment;
-      const newMonth = setUTCMonth(month, newMonthIndex);
-      updateMonth(newMonth);
+
+      // e.g.
+      // max: new Date(Date.UTC(2038, Month.January, 19));
+      // current month date: new Date(Date.UTC(2038, Month.March, 19));
+      // left chevron will change the month back to January 2038
+      // e.g.
+      // min: new Date(Date.UTC(1970, Month.January, 1));
+      // current month date: new Date(Date.UTC(1969, Month.November, 19));
+      // right chevron will change the month back to January 1970
+      if (isMonthInValid(dir)) {
+        const closestValidDate = dir === 'left' ? max : min;
+        const newMonthIndex = closestValidDate.getUTCMonth();
+        const newMonth = setUTCMonth(closestValidDate, newMonthIndex);
+        updateMonth(newMonth);
+      } else {
+        const increment = dir === 'left' ? -1 : 1;
+        const newMonthIndex = month.getUTCMonth() + increment;
+        const newMonth = setUTCMonth(month, newMonthIndex);
+        updateMonth(newMonth);
+      }
     };
 
   /** Returns whether the provided month should be enabled */
@@ -73,8 +111,10 @@ export const DatePickerMenuHeader = forwardRef<
   return (
     <div ref={fwdRef} className={menuHeaderStyles} {...rest}>
       <IconButton
-        aria-label="Previous month"
-        disabled={isSameUTCMonth(month, min)}
+        aria-label={
+          isMonthInValid('left') ? 'Previous valid month' : 'Previous month'
+        }
+        disabled={shouldChevronBeDisabled('left', month, min)}
         onClick={handleChevronClick('left')}
       >
         <Icon glyph="ChevronLeft" />
@@ -125,8 +165,8 @@ export const DatePickerMenuHeader = forwardRef<
         </Select>
       </div>
       <IconButton
-        aria-label="Next month"
-        disabled={isSameUTCMonth(month, max)}
+        aria-label={isMonthInValid('right') ? 'Next valid month' : 'Next month'}
+        disabled={shouldChevronBeDisabled('right', month, max)}
         onClick={handleChevronClick('right')}
       >
         <Icon glyph="ChevronRight" />
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/index.ts
new file mode 100644
index 0000000000..de83ccca8a
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/index.ts
@@ -0,0 +1,2 @@
+export { shouldChevronBeDisabled } from './shouldChevronBeDisabled';
+export { shouldMonthBeEnabled } from './shouldMonthBeEnabled';
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/index.ts
new file mode 100644
index 0000000000..102ee392d3
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/index.ts
@@ -0,0 +1,23 @@
+import { isSameUTCMonth } from '../../../../../shared/utils';
+
+/**
+ * Checks if chevron should be disabled
+ *
+ * @param direction left or right chevron
+ * @param day1 the full date of the current month shown in the menu (month)
+ * @param day2 the full date that current menu date is compared against (min/max)
+ * @returns
+ */
+export const shouldChevronBeDisabled = (
+  direction: 'left' | 'right',
+  day1: Date,
+  day2: Date,
+): boolean => {
+  if (!day1 || !day2) return false;
+
+  if (direction === 'right') {
+    return day1 >= day2 || isSameUTCMonth(day1, day2);
+  }
+
+  return day1 <= day2 || isSameUTCMonth(day1, day2);
+};
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/isChevronDisabled.spec.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/isChevronDisabled.spec.ts
new file mode 100644
index 0000000000..92173d2feb
--- /dev/null
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/isChevronDisabled.spec.ts
@@ -0,0 +1,146 @@
+import { Month } from '../../../../../shared/constants';
+
+import { shouldChevronBeDisabled } from '.';
+
+const testMinDate = new Date(Date.UTC(1970, Month.February, 20));
+const testMaxDate = new Date(Date.UTC(2037, Month.February, 20));
+
+const beforeMinDateDiffYear = new Date(Date.UTC(1969, Month.February, 20));
+const beforeMinDateSameMonth = new Date(Date.UTC(1970, Month.February, 19));
+const beforeMinDateSameYearDiffMonth = new Date(
+  Date.UTC(1970, Month.January, 20),
+);
+
+const afterMinDateSameMonth = new Date(Date.UTC(1970, Month.February, 21));
+const afterMinDateSameYear = new Date(Date.UTC(1970, Month.March, 20));
+const afterMinDateDifferentYear = testMaxDate;
+
+const afterMaxDateSameMonth = new Date(Date.UTC(2037, Month.February, 21));
+const afterMaxDateDiffYear = new Date(Date.UTC(2038, Month.February, 20));
+const afterMaxDateSameYearDiffMonth = new Date(Date.UTC(2037, Month.March, 20));
+
+const beforeMaxDateSameMonth = new Date(Date.UTC(2037, Month.February, 19));
+const beforeMaxDateSameYear = new Date(Date.UTC(2037, Month.January, 20));
+const beforeMaxDateDiffYear = testMinDate;
+
+describe('packages/date-picker/menu/utils/shouldMonthBeEnabled', () => {
+  describe('left chevron', () => {
+    describe('returns true', () => {
+      describe('when the menu date is before the minDate', () => {
+        test('but is in a month that has both valid and invalid dates', () => {
+          expect(
+            shouldChevronBeDisabled(
+              'left',
+              beforeMinDateSameMonth,
+              testMinDate,
+            ),
+          ).toBeTruthy();
+        });
+        test('and is in a different year', () => {
+          expect(
+            shouldChevronBeDisabled('left', beforeMinDateDiffYear, testMinDate),
+          ).toBeTruthy();
+        });
+        test('and is in the same year and different month', () => {
+          expect(
+            shouldChevronBeDisabled(
+              'left',
+              beforeMinDateSameYearDiffMonth,
+              testMinDate,
+            ),
+          ).toBeTruthy();
+        });
+      });
+      describe('when the menu date is after the minDate', () => {
+        test('but is in a month that has both valid and invalid dates', () => {
+          expect(
+            shouldChevronBeDisabled('left', afterMinDateSameMonth, testMinDate),
+          ).toBeTruthy();
+        });
+      });
+    });
+
+    describe('returns false', () => {
+      describe('when the menu date is after the minDate', () => {
+        test('and is in the same year', () => {
+          expect(
+            shouldChevronBeDisabled('left', afterMinDateSameYear, testMinDate),
+          ).toBeFalsy();
+        });
+        test('and is in a different year', () => {
+          expect(
+            shouldChevronBeDisabled(
+              'left',
+              afterMinDateDifferentYear,
+              testMinDate,
+            ),
+          ).toBeFalsy();
+        });
+      });
+    });
+  });
+
+  describe('right chevron', () => {
+    describe('returns true', () => {
+      describe('when the menu date is after the maxDate', () => {
+        test('but is in a month that has both valid and invalid dates', () => {
+          expect(
+            shouldChevronBeDisabled(
+              'right',
+              afterMaxDateSameMonth,
+              testMaxDate,
+            ),
+          ).toBeTruthy();
+        });
+        test('and is in a different year', () => {
+          expect(
+            shouldChevronBeDisabled('right', afterMaxDateDiffYear, testMaxDate),
+          ).toBeTruthy();
+        });
+        test('and is in the same year and different month', () => {
+          expect(
+            shouldChevronBeDisabled(
+              'right',
+              afterMaxDateSameYearDiffMonth,
+              testMaxDate,
+            ),
+          ).toBeTruthy();
+        });
+      });
+      describe('when the menu date is before the maxDate', () => {
+        test('but is in a month that has both valid and invalid dates', () => {
+          expect(
+            shouldChevronBeDisabled(
+              'right',
+              beforeMaxDateSameMonth,
+              testMaxDate,
+            ),
+          ).toBeTruthy();
+        });
+      });
+    });
+
+    describe('returns false', () => {
+      describe('when the menu date is before the maxDate', () => {
+        test('and is in the same year', () => {
+          expect(
+            shouldChevronBeDisabled(
+              'right',
+              beforeMaxDateSameYear,
+              testMaxDate,
+            ),
+          ).toBeFalsy();
+        });
+        test('and is in a different year', () => {
+          expect(
+            shouldChevronBeDisabled(
+              'right',
+              beforeMaxDateDiffYear,
+              testMaxDate,
+            ),
+          ).toBeFalsy();
+        });
+      });
+    });
+  });
+});

From 25cfd862d2ad4426f3a0521e3dc04e41514276cc Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Fri, 8 Dec 2023 15:24:03 -0500
Subject: [PATCH 320/351] Date picker [LG-3860, LG-3856] min/max bugs (#2125)

* creates sortDates util

* Sort min/max dates

* adds sorting min/max tests

* use default dates if min > defaultMax (& V-V)

* add tests for updating min/max

* listen for changes in min/max & revalidate

* update re-validateion logic

* use default if min > max
---
 .../src/DatePicker/DatePicker.spec.tsx        | 38 ++++++++-
 .../DatePickerContent/DatePickerContent.tsx   | 19 ++++-
 .../DatePickerContext.spec.tsx                | 74 ++++++++++++++++-
 .../DatePickerContext.utils.ts                | 80 ++++++++++++++++---
 .../src/shared/utils/sortDates/index.ts       | 20 +++++
 .../shared/utils/sortDates/sortDates.spec.ts  | 40 ++++++++++
 6 files changed, 257 insertions(+), 14 deletions(-)
 create mode 100644 packages/date-picker/src/shared/utils/sortDates/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/sortDates/sortDates.spec.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 9b9a1888a1..97784e2e20 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -182,7 +182,7 @@ describe('packages/date-picker', () => {
         test('removing an external error displays an internal error when applicable', () => {
           const { inputContainer, rerenderDatePicker, getByTestId } =
             renderDatePicker({
-              value: newUTC(2100, 1, 1),
+              value: newUTC(2100, Month.January, 1),
             });
           expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
           expect(getByTestId('lg-form_field-error_message')).toHaveTextContent(
@@ -202,6 +202,42 @@ describe('packages/date-picker', () => {
             'Date must be before 2038-01-19',
           );
         });
+
+        test('internal error message updates when min value changes', () => {
+          const { inputContainer, rerenderDatePicker, getByTestId } =
+            renderDatePicker({
+              value: newUTC(1967, Month.March, 10),
+            });
+          expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
+          const errorElement = getByTestId('lg-form_field-error_message');
+          expect(errorElement).toHaveTextContent(
+            'Date must be after 1970-01-01',
+          );
+
+          rerenderDatePicker({ min: newUTC(1968, Month.July, 5) });
+
+          expect(errorElement).toHaveTextContent(
+            'Date must be after 1968-07-05',
+          );
+        });
+
+        test('internal error message updates when max value changes', () => {
+          const { inputContainer, rerenderDatePicker, getByTestId } =
+            renderDatePicker({
+              value: newUTC(2050, Month.January, 1),
+            });
+          expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
+          const errorElement = getByTestId('lg-form_field-error_message');
+          expect(errorElement).toHaveTextContent(
+            'Date must be before 2038-01-19',
+          );
+
+          rerenderDatePicker({ max: newUTC(2048, Month.July, 5) });
+
+          expect(errorElement).toHaveTextContent(
+            'Date must be before 2048-07-05',
+          );
+        });
       });
     });
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
index 18b2f10739..0d38a4050d 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
@@ -27,7 +27,8 @@ export const DatePickerContent = forwardRef<
   HTMLDivElement,
   DatePickerContentProps
 >(({ ...rest }: DatePickerContentProps, fwdRef) => {
-  const { isOpen, menuId, disabled, isSelectOpen } = useDatePickerContext();
+  const { min, max, isOpen, menuId, disabled, isSelectOpen } =
+    useDatePickerContext();
   const {
     refs,
     value,
@@ -38,6 +39,8 @@ export const DatePickerContent = forwardRef<
   } = useSingleDateContext();
 
   const prevValue = usePrevious(value);
+  const prevMin = usePrevious(min);
+  const prevMax = usePrevious(max);
 
   const formFieldRef = useForwardedRef(fwdRef, null);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -116,11 +119,23 @@ export const DatePickerContent = forwardRef<
 
   /** When value changes, validate it */
   useEffect(() => {
-    if (!isEqual(prevValue, value) && !isSameUTCDay(prevValue, value)) {
+    if (!isEqual(prevValue, value) && !isSameUTCDay(value, prevValue)) {
       handleValidation(value);
     }
   }, [handleValidation, prevValue, value]);
 
+  /**
+   * If min/max changes, re-validate the value
+   */
+  useEffect(() => {
+    if (
+      (prevMin && !isSameUTCDay(min, prevMin)) ||
+      (prevMax && !isSameUTCDay(max, prevMax))
+    ) {
+      handleValidation(value);
+    }
+  }, [min, max, value, prevMin, prevMax, handleValidation]);
+
   return (
     <>
       <DatePickerInput
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
index 32731dbba4..362ddaf719 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
@@ -2,19 +2,27 @@ import React, { PropsWithChildren } from 'react';
 import { act, waitFor } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 
+import { consoleOnce } from '@leafygreen-ui/lib';
+
+import { MAX_DATE, MIN_DATE, Month } from '../../constants';
+import { newUTC } from '../../utils';
+
 import {
   DatePickerContextProps,
   DatePickerProvider,
+  DatePickerProviderProps,
   useDatePickerContext,
 } from '.';
 
-const renderDatePickerProvider = () => {
+const renderDatePickerProvider = (props?: Partial<DatePickerProviderProps>) => {
   const { result, rerender } = renderHook<
     PropsWithChildren<{}>,
     DatePickerContextProps
   >(useDatePickerContext, {
     wrapper: ({ children }) => (
-      <DatePickerProvider label="">{children}</DatePickerProvider>
+      <DatePickerProvider label="" {...props}>
+        {children}
+      </DatePickerProvider>
     ),
   });
 
@@ -23,6 +31,68 @@ const renderDatePickerProvider = () => {
 
 describe('packages/date-picker-context', () => {
   describe('useDatePickerContext', () => {
+    describe('min/max', () => {
+      afterEach(() => {
+        jest.resetAllMocks();
+      });
+      test('uses default min/max values when not provided', () => {
+        const { result } = renderDatePickerProvider();
+        expect(result.current.min).toEqual(MIN_DATE);
+        expect(result.current.max).toEqual(MAX_DATE);
+      });
+
+      test('uses provided min/max values', () => {
+        const testMin = newUTC(1999, Month.September, 2);
+        const testMax = newUTC(2011, Month.June, 22);
+
+        const { result } = renderDatePickerProvider({
+          min: testMin,
+          max: testMax,
+        });
+        expect(result.current.min).toEqual(testMin);
+        expect(result.current.max).toEqual(testMax);
+      });
+
+      test('if min is after max, uses default & console errors', () => {
+        const errorSpy = jest.spyOn(consoleOnce, 'error');
+
+        const testMax = newUTC(1999, Month.September, 2);
+        const testMin = newUTC(2011, Month.June, 22);
+
+        const { result } = renderDatePickerProvider({
+          min: testMin,
+          max: testMax,
+        });
+        expect(result.current.min).toEqual(MIN_DATE);
+        expect(result.current.max).toEqual(MAX_DATE);
+        expect(errorSpy).toHaveBeenCalled();
+      });
+
+      test('if max is before default min, uses default & console errors', () => {
+        const errorSpy = jest.spyOn(consoleOnce, 'error');
+        const testMax = newUTC(1967, Month.March, 10);
+
+        const { result } = renderDatePickerProvider({
+          max: testMax,
+        });
+        expect(result.current.min).toEqual(MIN_DATE);
+        expect(result.current.max).toEqual(MAX_DATE);
+        expect(errorSpy).toHaveBeenCalled();
+      });
+
+      test('if min is after default max, uses default & console errors', () => {
+        const errorSpy = jest.spyOn(consoleOnce, 'error');
+        const testMin = newUTC(2067, Month.March, 10);
+
+        const { result } = renderDatePickerProvider({
+          min: testMin,
+        });
+        expect(result.current.min).toEqual(MIN_DATE);
+        expect(result.current.max).toEqual(MAX_DATE);
+        expect(errorSpy).toHaveBeenCalled();
+      });
+    });
+
     describe('isOpen', () => {
       test('is `false` by default', () => {
         const { result } = renderDatePickerProvider();
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
index 3b0ea946e5..8c1bdb4aa5 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
@@ -1,7 +1,8 @@
-import { isWithinInterval } from 'date-fns';
+import { isBefore, isWithinInterval } from 'date-fns';
 import defaults from 'lodash/defaults';
 import defaultTo from 'lodash/defaultTo';
 
+import { consoleOnce } from '@leafygreen-ui/lib';
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
 import { MAX_DATE, MIN_DATE } from '../../constants';
@@ -10,7 +11,7 @@ import {
   BaseDatePickerProps,
   DatePickerState,
 } from '../../types';
-import { getFormatParts, toDate } from '../../utils';
+import { getFormatParts, getISODate, toDate } from '../../utils';
 
 import {
   DatePickerContextProps,
@@ -91,15 +92,25 @@ export const getIsInRange =
 export const getContextProps = (
   providerProps: DatePickerProviderProps,
 ): DatePickerContextProps => {
-  const { min, max, timeZone, ...rest } = providerProps;
+  const {
+    min: minProp,
+    max: maxProp,
+    timeZone: tzProp,
+    ...rest
+  } = providerProps;
+
+  const timeZone = defaultTo(
+    tzProp,
+    Intl.DateTimeFormat().resolvedOptions().timeZone,
+  );
+
+  const [min, max] = getMinMax(toDate(minProp), toDate(maxProp));
+
   const providerValue: DatePickerContextProps = {
     ...defaults(rest, defaultDatePickerContext),
-    timeZone: defaultTo(
-      timeZone,
-      Intl.DateTimeFormat().resolvedOptions().timeZone,
-    ),
-    min: defaultTo(toDate(min), defaultDatePickerContext.min),
-    max: defaultTo(toDate(max), defaultDatePickerContext.max),
+    timeZone,
+    min,
+    max,
   };
 
   const isInRange = getIsInRange(providerValue.min, providerValue.max);
@@ -109,3 +120,54 @@ export const getContextProps = (
 
   return { ...providerValue, isInRange, formatParts };
 };
+
+const getMinMax = (min: Date | null, max: Date | null): [Date, Date] => {
+  const defaultRange: [Date, Date] = [
+    defaultDatePickerContext.min,
+    defaultDatePickerContext.max,
+  ];
+
+  // if both are defined
+  if (min && max) {
+    if (isBefore(max, min)) {
+      consoleOnce.error(
+        `LeafyGreen DatePicker: Provided max date (${getISODate(
+          max,
+        )}) is before provided min date (${getISODate(
+          min,
+        )}). Using default values.`,
+      );
+      return defaultRange;
+    }
+
+    return [min, max];
+  } else if (min) {
+    if (isBefore(defaultDatePickerContext.max, min)) {
+      consoleOnce.error(
+        `LeafyGreen DatePicker: Provided min date (${getISODate(
+          min,
+        )}) is after the default max date (${getISODate(
+          defaultDatePickerContext.max,
+        )}). Using default values.`,
+      );
+      return defaultRange;
+    }
+
+    return [min, defaultDatePickerContext.max];
+  } else if (max) {
+    if (isBefore(max, defaultDatePickerContext.min)) {
+      consoleOnce.error(
+        `LeafyGreen DatePicker: Provided max date (${getISODate(
+          max,
+        )}) is before the default min date (${getISODate(
+          defaultDatePickerContext.min,
+        )}). Using default values.`,
+      );
+      return defaultRange;
+    }
+
+    return [defaultDatePickerContext.min, max];
+  }
+
+  return defaultRange;
+};
diff --git a/packages/date-picker/src/shared/utils/sortDates/index.ts b/packages/date-picker/src/shared/utils/sortDates/index.ts
new file mode 100644
index 0000000000..a67f0d2a24
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/sortDates/index.ts
@@ -0,0 +1,20 @@
+import { isBefore, isSameDay } from 'date-fns';
+
+/**
+ * Sorts an array of dates.
+ * Sorts ascending by default
+ *
+ * @param dates `Array<Date>`
+ * @param direction `'ascending' | 'descending'`
+ * @default 'ascending'
+ * @returns Sorted `Array<Date>`
+ */
+export const sortDates = (
+  dates: Array<Date>,
+  direction: 'ascending' | 'descending' = 'ascending',
+): Array<Date> => {
+  const dir = direction === 'ascending' ? -1 : 1;
+  return dates.sort((a, b) => {
+    return isBefore(a, b) ? dir : isSameDay(a, b) ? 0 : -dir;
+  });
+};
diff --git a/packages/date-picker/src/shared/utils/sortDates/sortDates.spec.ts b/packages/date-picker/src/shared/utils/sortDates/sortDates.spec.ts
new file mode 100644
index 0000000000..b86b1ae3fb
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/sortDates/sortDates.spec.ts
@@ -0,0 +1,40 @@
+import { Month } from '../../constants';
+import { newUTC } from '../newUTC';
+
+import { sortDates } from '.';
+
+describe('packages/date-picker/utils/sortDates', () => {
+  const testDates = [
+    newUTC(2023, Month.September, 10),
+    newUTC(2020, Month.March, 13),
+    newUTC(2023, Month.September, 10),
+    newUTC(2020, Month.March, 10),
+  ];
+
+  test('ascending', () => {
+    expect(sortDates(testDates, 'ascending')).toEqual([
+      newUTC(2020, Month.March, 10),
+      newUTC(2020, Month.March, 13),
+      newUTC(2023, Month.September, 10),
+      newUTC(2023, Month.September, 10),
+    ]);
+  });
+
+  test('descending', () => {
+    expect(sortDates(testDates, 'descending')).toEqual([
+      newUTC(2023, Month.September, 10),
+      newUTC(2023, Month.September, 10),
+      newUTC(2020, Month.March, 13),
+      newUTC(2020, Month.March, 10),
+    ]);
+  });
+
+  test('ascending by default', () => {
+    expect(sortDates(testDates)).toEqual([
+      newUTC(2020, Month.March, 10),
+      newUTC(2020, Month.March, 13),
+      newUTC(2023, Month.September, 10),
+      newUTC(2023, Month.September, 10),
+    ]);
+  });
+});

From 8ea3c0d4e705b5ffe4048190b7250101966ad7f4 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 8 Dec 2023 15:47:39 -0500
Subject: [PATCH 321/351] Delete DateFormField.spec.tsx

---
 .../DateInput/DateFormField/DateFormField.spec.tsx        | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.spec.tsx

diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.spec.tsx
deleted file mode 100644
index eb56af637e..0000000000
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.spec.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { DateFormField } from '.';
-
-describe('packages/date-picker/shared/date-form-field', () => {
-  test('renders', () => {});
-});

From b08a5c419454e21eb38d347ace5a2e872020c8b2 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 8 Dec 2023 17:14:53 -0500
Subject: [PATCH 322/351] Create eighty-kings-mix.md

---
 .changeset/eighty-kings-mix.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eighty-kings-mix.md

diff --git a/.changeset/eighty-kings-mix.md b/.changeset/eighty-kings-mix.md
new file mode 100644
index 0000000000..64910cab2c
--- /dev/null
+++ b/.changeset/eighty-kings-mix.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/date-picker': major
+---
+
+Inital release of `date-picker`. Use DatePicker to allow users to input a date

From 7001dff8a289fe324dde44e1140dc6f52c94e9cb Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Mon, 11 Dec 2023 14:12:25 -0500
Subject: [PATCH 323/351] DatePicker: DateUtils (#2126)

* scaffolds new package

* mv utils

* update utils index

* mv getFormattedDateString

* package dependencies

* move common types & constants

* mv normalizeLocale

* update utils imports

* mv generic utils to lib

* export & import from lib

* rm duplicated pickAndOmit

* Update README.md

* update utils imports

* hooks & test utils

* shared components

* Update tsconfig.json

* update component imports

* constants imports

* fix internal utils

* updates changeset

* consolidate meta changes

* Create smart-steaks-care.md

* rm date-fns-tz

* update test suite names

* Adds coverage reporting for untested sub-modules

* mv utils to named file

* Adds missing test files

* Adds missing utils tests

* rm setToMidnight

* adds min/max date tests

* lint
---
 .changeset/big-carpets-sleep.md               |  3 +-
 .changeset/eleven-donkeys-tickle.md           |  5 ++
 .changeset/proud-doors-smoke.md               |  8 +-
 .changeset/slimy-camels-dance.md              |  5 --
 .changeset/smart-steaks-care.md               |  5 ++
 .changeset/wild-feet-press.md                 |  5 --
 packages/date-picker/package.json             |  2 +-
 .../date-picker/src/DatePicker.stories.tsx    |  3 +-
 .../src/DatePicker/DatePicker.spec.tsx        | 14 ++--
 .../src/DatePicker/DatePicker.testutils.tsx   |  3 +-
 .../date-picker/src/DatePicker/DatePicker.tsx |  2 +-
 .../src/DatePicker/DatePicker.types.ts        |  4 +-
 .../DatePickerContent/DatePickerContent.tsx   |  2 +-
 .../DatePickerInput/DatePickerInput.spec.tsx  |  4 +-
 .../DatePickerInput/DatePickerInput.tsx       |  4 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    |  9 +-
 .../DatePickerMenu/DatePickerMenu.stories.tsx |  3 +-
 .../DatePickerMenu/DatePickerMenu.tsx         | 20 ++---
 .../DatePickerMenuHeader.spec.tsx             |  2 +-
 .../DatePickerMenuHeader.tsx                  | 12 +--
 .../utils/shouldChevronBeDisabled/index.ts    |  2 +-
 .../isChevronDisabled.spec.ts                 |  2 +-
 .../utils/shouldMonthBeEnabled/index.ts       |  3 +-
 .../shouldMonthBeEnabled.spec.ts              |  2 +-
 .../utils/getNewHighlight/index.ts            |  2 +-
 .../SingleDateContext/SingleDateContext.tsx   | 12 +--
 .../SingleDateContext.types.ts                |  3 +-
 .../getInitialHighlight.spec.ts               |  2 +-
 .../utils/getInitialHighlight/index.ts        |  2 +-
 .../CalendarGrid/CalendarGrid.stories.tsx     |  8 +-
 .../Calendar/CalendarGrid/CalendarGrid.tsx    |  7 +-
 .../DateInputBox/DateInputBox.spec.tsx        |  4 +-
 .../DateInputBox/DateInputBox.stories.tsx     |  3 +-
 .../DateInputBox/DateInputBox.types.ts        |  2 +-
 .../DatePickerContext.spec.tsx                |  4 +-
 .../DatePickerContext.utils.ts                |  3 +-
 packages/date-picker/src/shared/constants.ts  | 20 +----
 .../hooks/useDateSegments/useDateSegments.ts  |  8 +-
 .../getProviderPropsFromStoryContext/index.ts |  2 +-
 .../mockTimeZone/mockTimeZone.spec.ts         |  3 +-
 .../shared/types/BaseDatePickerProps.types.ts |  3 +-
 .../date-picker/src/shared/types/index.ts     |  9 +-
 .../date-picker/src/shared/types/types.ts     | 23 -----
 .../utils/doesSomeSegmentExist/index.ts       |  3 +-
 .../src/shared/utils/getFormatParts/index.ts  |  2 +-
 .../getFormattedDateString.spec.ts            |  3 +-
 .../getMaxSegmentValue.spec.ts                |  3 +-
 .../shared/utils/getMaxSegmentValue/index.ts  |  4 +-
 .../getMinSegmentValue.spec.ts                |  3 +-
 .../shared/utils/getMinSegmentValue/index.ts  |  4 +-
 .../shared/utils/getRelativeSegment/index.ts  |  6 +-
 .../shared/utils/getRemainingParts/index.ts   |  2 +-
 .../shared/utils/getValueFormatter/index.ts   |  3 +-
 .../date-picker/src/shared/utils/index.ts     | 36 --------
 .../shared/utils/newDateFromSegments/index.ts |  3 +-
 .../src/shared/utils/pickAndOmit/index.ts     | 23 -----
 packages/date-picker/tsconfig.json            |  3 +
 packages/date-utils/README.md                 | 21 +++++
 packages/date-utils/package.json              | 41 +++++++++
 .../src}/addDaysUTC/addDaysUTC.spec.ts        |  4 +-
 .../src/addDaysUTC/addDaysUTC.ts}             |  0
 packages/date-utils/src/addDaysUTC/index.ts   |  1 +
 .../src/addMonthsUTC/addMonthsUTC.spec.ts     | 54 ++++++++++++
 .../src/addMonthsUTC/addMonthsUTC.ts}         |  0
 packages/date-utils/src/addMonthsUTC/index.ts |  1 +
 packages/date-utils/src/constants.ts          | 18 ++++
 .../getDaysInUTCMonth.spec.ts                 |  2 +-
 .../getDaysInUTCMonth/getDaysInUTCMonth.ts}   |  0
 .../date-utils/src/getDaysInUTCMonth/index.ts |  1 +
 .../getFirstOfMonth/getFirstOfMonth.spec.ts   |  2 +-
 .../src/getFirstOfMonth/getFirstOfMonth.ts}   |  0
 .../date-utils/src/getFirstOfMonth/index.ts   |  1 +
 .../getFullMonthLabel.spec.ts                 |  4 +-
 .../getFullMonthLabel/getFullMonthLabel.ts}   |  0
 .../date-utils/src/getFullMonthLabel/index.ts |  1 +
 .../src}/getISODate/getISODate.spec.ts        |  4 +-
 .../src/getISODate/getISODate.ts}             |  2 +-
 packages/date-utils/src/getISODate/index.ts   |  1 +
 .../getLastOfMonth/getLastOfMonth.spec.ts     |  4 +-
 .../src/getLastOfMonth/getLastOfMonth.ts}     |  0
 .../date-utils/src/getLastOfMonth/index.ts    |  1 +
 .../getLocaleMonths/getLocaleMonths.spec.ts   |  2 +-
 .../src/getLocaleMonths/getLocaleMonths.ts}   |  2 +-
 .../date-utils/src/getLocaleMonths/index.ts   |  1 +
 .../getLocaleWeekdays.spec.ts                 |  2 +-
 .../getLocaleWeekdays/getLocaleWeekdays.ts}   |  0
 .../date-utils/src/getLocaleWeekdays/index.ts |  1 +
 .../src}/getMonthIndex/getMonthIndex.spec.ts  |  2 +-
 .../src/getMonthIndex/getMonthIndex.ts}       |  0
 .../date-utils/src/getMonthIndex/index.ts     |  1 +
 .../src}/getMonthName/getMonthName.spec.ts    |  2 +-
 .../src/getMonthName/getMonthName.ts}         |  2 +-
 packages/date-utils/src/getMonthName/index.ts |  1 +
 .../getUTCDateString/getUTCDateString.spec.ts |  4 +-
 .../src/getUTCDateString/getUTCDateString.ts} |  0
 .../date-utils/src/getUTCDateString/index.ts  |  1 +
 .../getWeekdayName/getWeekdayName.spec.ts     |  2 +-
 .../src/getWeekdayName/getWeekdayName.ts}     |  4 +-
 .../date-utils/src/getWeekdayName/index.ts    |  1 +
 .../src}/getWeeksArray/getWeeksArray.spec.ts  |  4 +-
 .../src/getWeeksArray/getWeeksArray.ts}       |  9 +-
 .../date-utils/src/getWeeksArray/index.ts     |  1 +
 packages/date-utils/src/index.ts              | 34 ++++++++
 .../date-utils/src/isCurrentUTCDay/index.ts   |  1 +
 .../isCurrentUTCDay/isCurrentUTCDay.spec.ts   | 24 ++++++
 .../src/isCurrentUTCDay/isCurrentUTCDay.ts}   |  0
 packages/date-utils/src/isOnOrAfter/index.ts  |  1 +
 .../src/isOnOrAfter/isOnOrAfter.spec.ts       | 22 +++++
 .../src/isOnOrAfter/isOnOrAfter.ts}           |  0
 packages/date-utils/src/isOnOrBefore/index.ts |  1 +
 .../src/isOnOrBefore/isOnOrBefore.spec.ts     | 22 +++++
 .../src/isOnOrBefore/isOnOrBefore.ts}         |  1 -
 packages/date-utils/src/isSameTZDay/index.ts  |  1 +
 .../src}/isSameTZDay/isSameTZDay.spec.ts      |  4 +-
 .../src/isSameTZDay/isSameTZDay.ts}           |  0
 packages/date-utils/src/isSameUTCDay/index.ts |  1 +
 .../src}/isSameUTCDay/isSameUTCDay.spec.ts    |  2 +-
 .../src/isSameUTCDay/isSameUTCDay.ts}         |  0
 .../date-utils/src/isSameUTCMonth/index.ts    |  1 +
 .../isSameUTCMonth/isSameUTCMonth.spec.ts     |  4 +-
 .../src/isSameUTCMonth/isSameUTCMonth.ts}     |  0
 .../date-utils/src/isSameUTCRange/index.ts    |  1 +
 .../src/isSameUTCRange/isSameUTCRange.spec.ts | 84 +++++++++++++++++++
 .../src/isSameUTCRange/isSameUTCRange.ts}     |  0
 packages/date-utils/src/isTodayTZ/index.ts    |  1 +
 .../src}/isTodayTZ/isTodayTZ.spec.ts          |  4 +-
 .../src/isTodayTZ/isTodayTZ.ts}               |  0
 packages/date-utils/src/isValidDate/index.ts  |  5 ++
 .../src}/isValidDate/isValidDate.spec.ts      |  2 +-
 .../src/isValidDate/isValidDate.ts}           |  0
 .../date-utils/src/isValidLocale/index.ts     |  1 +
 .../src}/isValidLocale/isValidLocale.spec.ts  |  2 +-
 .../src/isValidLocale/isValidLocale.ts}       |  0
 packages/date-utils/src/maxDate/index.ts      |  1 +
 .../date-utils/src/maxDate/maxDate.spec.ts    | 42 ++++++++++
 .../src/maxDate/maxDate.ts}                   |  6 +-
 packages/date-utils/src/minDate/index.ts      |  1 +
 .../date-utils/src/minDate/minDate.spec.ts    | 42 ++++++++++
 .../src/minDate/minDate.ts}                   |  6 +-
 packages/date-utils/src/newUTC/index.ts       |  1 +
 .../src}/newUTC/newUTC.spec.ts                |  2 +-
 .../src/newUTC/newUTC.ts}                     |  0
 .../date-utils/src/normalizeLocale/index.ts   |  1 +
 .../normalizeLocale/normalizeLocale.spec.ts   |  2 +-
 .../src/normalizeLocale/normalizeLocale.ts}   |  0
 .../date-utils/src/setToUTCMidnight/index.ts  |  1 +
 .../setToUTCMidnight/setToUTCMidnight.spec.ts |  2 +-
 .../src/setToUTCMidnight/setToUTCMidnight.ts} | 10 ---
 packages/date-utils/src/setUTCDate/index.ts   |  1 +
 .../src/setUTCDate/setUTCDate.spec.ts         | 22 +++++
 .../src/setUTCDate/setUTCDate.ts}             |  0
 packages/date-utils/src/setUTCMonth/index.ts  |  1 +
 .../src}/setUTCMonth/setUTCMonth.spec.ts      |  4 +-
 .../src/setUTCMonth/setUTCMonth.ts}           |  0
 packages/date-utils/src/setUTCYear/index.ts   |  1 +
 .../src/setUTCYear/setUTCYear.spec.ts         | 22 +++++
 .../src/setUTCYear/setUTCYear.ts}             |  0
 packages/date-utils/src/sortDates/index.ts    |  1 +
 .../src}/sortDates/sortDates.spec.ts          |  4 +-
 .../src/sortDates/sortDates.ts}               |  0
 packages/date-utils/src/toDate/index.ts       |  1 +
 .../src}/toDate/toDate.spec.ts                |  2 +-
 .../src/toDate/toDate.ts}                     |  0
 packages/date-utils/src/types.ts              | 24 ++++++
 packages/date-utils/tsconfig.json             | 25 ++++++
 .../cloneReverse/cloneReverse.spec.ts         |  0
 .../src/helpers}/cloneReverse/index.ts        |  0
 packages/lib/src/helpers/index.ts             |  7 +-
 .../src/helpers}/isDefined/index.ts           |  0
 .../src/helpers}/isZeroLike/index.ts          |  0
 tools/test/config/jest.config.js              | 12 ++-
 tools/test/src/index.ts                       |  9 ++
 172 files changed, 742 insertions(+), 277 deletions(-)
 create mode 100644 .changeset/eleven-donkeys-tickle.md
 delete mode 100644 .changeset/slimy-camels-dance.md
 create mode 100644 .changeset/smart-steaks-care.md
 delete mode 100644 .changeset/wild-feet-press.md
 delete mode 100644 packages/date-picker/src/shared/utils/pickAndOmit/index.ts
 create mode 100644 packages/date-utils/README.md
 create mode 100644 packages/date-utils/package.json
 rename packages/{date-picker/src/shared/utils => date-utils/src}/addDaysUTC/addDaysUTC.spec.ts (95%)
 rename packages/{date-picker/src/shared/utils/addDaysUTC/index.ts => date-utils/src/addDaysUTC/addDaysUTC.ts} (100%)
 create mode 100644 packages/date-utils/src/addDaysUTC/index.ts
 create mode 100644 packages/date-utils/src/addMonthsUTC/addMonthsUTC.spec.ts
 rename packages/{date-picker/src/shared/utils/addMonthsUTC/index.ts => date-utils/src/addMonthsUTC/addMonthsUTC.ts} (100%)
 create mode 100644 packages/date-utils/src/addMonthsUTC/index.ts
 create mode 100644 packages/date-utils/src/constants.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts (94%)
 rename packages/{date-picker/src/shared/utils/getDaysInUTCMonth/index.ts => date-utils/src/getDaysInUTCMonth/getDaysInUTCMonth.ts} (100%)
 create mode 100644 packages/date-utils/src/getDaysInUTCMonth/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/getFirstOfMonth/getFirstOfMonth.spec.ts (91%)
 rename packages/{date-picker/src/shared/utils/getFirstOfMonth/index.ts => date-utils/src/getFirstOfMonth/getFirstOfMonth.ts} (100%)
 create mode 100644 packages/date-utils/src/getFirstOfMonth/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/getFullMonthLabel/getFullMonthLabel.spec.ts (67%)
 rename packages/{date-picker/src/shared/utils/getFullMonthLabel/index.ts => date-utils/src/getFullMonthLabel/getFullMonthLabel.ts} (100%)
 create mode 100644 packages/date-utils/src/getFullMonthLabel/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/getISODate/getISODate.spec.ts (76%)
 rename packages/{date-picker/src/shared/utils/getISODate/index.ts => date-utils/src/getISODate/getISODate.ts} (90%)
 create mode 100644 packages/date-utils/src/getISODate/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/getLastOfMonth/getLastOfMonth.spec.ts (91%)
 rename packages/{date-picker/src/shared/utils/getLastOfMonth/index.ts => date-utils/src/getLastOfMonth/getLastOfMonth.ts} (100%)
 create mode 100644 packages/date-utils/src/getLastOfMonth/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/getLocaleMonths/getLocaleMonths.spec.ts (91%)
 rename packages/{date-picker/src/shared/utils/getLocaleMonths/index.ts => date-utils/src/getLocaleMonths/getLocaleMonths.ts} (85%)
 create mode 100644 packages/date-utils/src/getLocaleMonths/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/getLocaleWeekdays/getLocaleWeekdays.spec.ts (93%)
 rename packages/{date-picker/src/shared/utils/getLocaleWeekdays/index.ts => date-utils/src/getLocaleWeekdays/getLocaleWeekdays.ts} (100%)
 create mode 100644 packages/date-utils/src/getLocaleWeekdays/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/getMonthIndex/getMonthIndex.spec.ts (93%)
 rename packages/{date-picker/src/shared/utils/getMonthIndex/index.ts => date-utils/src/getMonthIndex/getMonthIndex.ts} (100%)
 create mode 100644 packages/date-utils/src/getMonthIndex/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/getMonthName/getMonthName.spec.ts (97%)
 rename packages/{date-picker/src/shared/utils/getMonthName/index.ts => date-utils/src/getMonthName/getMonthName.ts} (92%)
 create mode 100644 packages/date-utils/src/getMonthName/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/getUTCDateString/getUTCDateString.spec.ts (83%)
 rename packages/{date-picker/src/shared/utils/getUTCDateString/index.ts => date-utils/src/getUTCDateString/getUTCDateString.ts} (100%)
 create mode 100644 packages/date-utils/src/getUTCDateString/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/getWeekdayName/getWeekdayName.spec.ts (94%)
 rename packages/{date-picker/src/shared/utils/getWeekdayName/index.ts => date-utils/src/getWeekdayName/getWeekdayName.ts} (92%)
 create mode 100644 packages/date-utils/src/getWeekdayName/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/getWeeksArray/getWeeksArray.spec.ts (99%)
 rename packages/{date-picker/src/shared/utils/getWeeksArray/index.ts => date-utils/src/getWeeksArray/getWeeksArray.ts} (89%)
 create mode 100644 packages/date-utils/src/getWeeksArray/index.ts
 create mode 100644 packages/date-utils/src/index.ts
 create mode 100644 packages/date-utils/src/isCurrentUTCDay/index.ts
 create mode 100644 packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.spec.ts
 rename packages/{date-picker/src/shared/utils/isCurrentUTCDay/index.ts => date-utils/src/isCurrentUTCDay/isCurrentUTCDay.ts} (100%)
 create mode 100644 packages/date-utils/src/isOnOrAfter/index.ts
 create mode 100644 packages/date-utils/src/isOnOrAfter/isOnOrAfter.spec.ts
 rename packages/{date-picker/src/shared/utils/isOnOrAfter/index.ts => date-utils/src/isOnOrAfter/isOnOrAfter.ts} (100%)
 create mode 100644 packages/date-utils/src/isOnOrBefore/index.ts
 create mode 100644 packages/date-utils/src/isOnOrBefore/isOnOrBefore.spec.ts
 rename packages/{date-picker/src/shared/utils/isOnOrBefore/index.ts => date-utils/src/isOnOrBefore/isOnOrBefore.ts} (93%)
 create mode 100644 packages/date-utils/src/isSameTZDay/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/isSameTZDay/isSameTZDay.spec.ts (97%)
 rename packages/{date-picker/src/shared/utils/isSameTZDay/index.ts => date-utils/src/isSameTZDay/isSameTZDay.ts} (100%)
 create mode 100644 packages/date-utils/src/isSameUTCDay/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/isSameUTCDay/isSameUTCDay.spec.ts (96%)
 rename packages/{date-picker/src/shared/utils/isSameUTCDay/index.ts => date-utils/src/isSameUTCDay/isSameUTCDay.ts} (100%)
 create mode 100644 packages/date-utils/src/isSameUTCMonth/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/isSameUTCMonth/isSameUTCMonth.spec.ts (95%)
 rename packages/{date-picker/src/shared/utils/isSameUTCMonth/index.ts => date-utils/src/isSameUTCMonth/isSameUTCMonth.ts} (100%)
 create mode 100644 packages/date-utils/src/isSameUTCRange/index.ts
 create mode 100644 packages/date-utils/src/isSameUTCRange/isSameUTCRange.spec.ts
 rename packages/{date-picker/src/shared/utils/isSameUTCRange/index.ts => date-utils/src/isSameUTCRange/isSameUTCRange.ts} (100%)
 create mode 100644 packages/date-utils/src/isTodayTZ/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/isTodayTZ/isTodayTZ.spec.ts (97%)
 rename packages/{date-picker/src/shared/utils/isTodayTZ/index.ts => date-utils/src/isTodayTZ/isTodayTZ.ts} (100%)
 create mode 100644 packages/date-utils/src/isValidDate/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/isValidDate/isValidDate.spec.ts (94%)
 rename packages/{date-picker/src/shared/utils/isValidDate/index.ts => date-utils/src/isValidDate/isValidDate.ts} (100%)
 create mode 100644 packages/date-utils/src/isValidLocale/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/isValidLocale/isValidLocale.spec.ts (88%)
 rename packages/{date-picker/src/shared/utils/isValidLocale/index.ts => date-utils/src/isValidLocale/isValidLocale.ts} (100%)
 create mode 100644 packages/date-utils/src/maxDate/index.ts
 create mode 100644 packages/date-utils/src/maxDate/maxDate.spec.ts
 rename packages/{date-picker/src/shared/utils/maxDate/index.ts => date-utils/src/maxDate/maxDate.ts} (72%)
 create mode 100644 packages/date-utils/src/minDate/index.ts
 create mode 100644 packages/date-utils/src/minDate/minDate.spec.ts
 rename packages/{date-picker/src/shared/utils/minDate/index.ts => date-utils/src/minDate/minDate.ts} (72%)
 create mode 100644 packages/date-utils/src/newUTC/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/newUTC/newUTC.spec.ts (88%)
 rename packages/{date-picker/src/shared/utils/newUTC/index.ts => date-utils/src/newUTC/newUTC.ts} (100%)
 create mode 100644 packages/date-utils/src/normalizeLocale/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/normalizeLocale/normalizeLocale.spec.ts (84%)
 rename packages/{date-picker/src/shared/utils/normalizeLocale/index.ts => date-utils/src/normalizeLocale/normalizeLocale.ts} (100%)
 create mode 100644 packages/date-utils/src/setToUTCMidnight/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/setToUTCMidnight/setToUTCMidnight.spec.ts (84%)
 rename packages/{date-picker/src/shared/utils/setToUTCMidnight/index.ts => date-utils/src/setToUTCMidnight/setToUTCMidnight.ts} (53%)
 create mode 100644 packages/date-utils/src/setUTCDate/index.ts
 create mode 100644 packages/date-utils/src/setUTCDate/setUTCDate.spec.ts
 rename packages/{date-picker/src/shared/utils/setUTCDate/index.ts => date-utils/src/setUTCDate/setUTCDate.ts} (100%)
 create mode 100644 packages/date-utils/src/setUTCMonth/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/setUTCMonth/setUTCMonth.spec.ts (92%)
 rename packages/{date-picker/src/shared/utils/setUTCMonth/index.ts => date-utils/src/setUTCMonth/setUTCMonth.ts} (100%)
 create mode 100644 packages/date-utils/src/setUTCYear/index.ts
 create mode 100644 packages/date-utils/src/setUTCYear/setUTCYear.spec.ts
 rename packages/{date-picker/src/shared/utils/setUTCYear/index.ts => date-utils/src/setUTCYear/setUTCYear.ts} (100%)
 create mode 100644 packages/date-utils/src/sortDates/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/sortDates/sortDates.spec.ts (91%)
 rename packages/{date-picker/src/shared/utils/sortDates/index.ts => date-utils/src/sortDates/sortDates.ts} (100%)
 create mode 100644 packages/date-utils/src/toDate/index.ts
 rename packages/{date-picker/src/shared/utils => date-utils/src}/toDate/toDate.spec.ts (93%)
 rename packages/{date-picker/src/shared/utils/toDate/index.ts => date-utils/src/toDate/toDate.ts} (100%)
 create mode 100644 packages/date-utils/src/types.ts
 create mode 100644 packages/date-utils/tsconfig.json
 rename packages/{date-picker/src/shared/utils => lib/src/helpers}/cloneReverse/cloneReverse.spec.ts (100%)
 rename packages/{date-picker/src/shared/utils => lib/src/helpers}/cloneReverse/index.ts (100%)
 rename packages/{date-picker/src/shared/utils => lib/src/helpers}/isDefined/index.ts (100%)
 rename packages/{date-picker/src/shared/utils => lib/src/helpers}/isZeroLike/index.ts (100%)

diff --git a/.changeset/big-carpets-sleep.md b/.changeset/big-carpets-sleep.md
index 9069a8ddfd..256de82ac7 100644
--- a/.changeset/big-carpets-sleep.md
+++ b/.changeset/big-carpets-sleep.md
@@ -2,4 +2,5 @@
 '@lg-tools/meta': minor
 ---
 
-Adds `exitWithErrorMessage` util
+- Adds `exitWithErrorMessage` util
+- Fixes recursion in `findPackageJson`
diff --git a/.changeset/eleven-donkeys-tickle.md b/.changeset/eleven-donkeys-tickle.md
new file mode 100644
index 0000000000..9a37937d1e
--- /dev/null
+++ b/.changeset/eleven-donkeys-tickle.md
@@ -0,0 +1,5 @@
+---
+'@lg-tools/test': minor
+---
+
+Adds coverage reporting for untested sub-modules
diff --git a/.changeset/proud-doors-smoke.md b/.changeset/proud-doors-smoke.md
index 95f3ac743d..7345c7fa57 100644
--- a/.changeset/proud-doors-smoke.md
+++ b/.changeset/proud-doors-smoke.md
@@ -1,5 +1,9 @@
 ---
 '@leafygreen-ui/lib': minor
 ---
-
-Creates `rollover` utility function
+- Creates new utility functions 
+  - `rollover` 
+  - `truncateStart`
+  - `cloneReverse`
+  - `isDefined`
+  - `isZeroLike` & `isNotZeroLike`
diff --git a/.changeset/slimy-camels-dance.md b/.changeset/slimy-camels-dance.md
deleted file mode 100644
index e31f8c5988..0000000000
--- a/.changeset/slimy-camels-dance.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@leafygreen-ui/lib': minor
----
-
-Creates `truncateStart` utility function
diff --git a/.changeset/smart-steaks-care.md b/.changeset/smart-steaks-care.md
new file mode 100644
index 0000000000..0f43ab654c
--- /dev/null
+++ b/.changeset/smart-steaks-care.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/date-utils': major
+---
+
+Initial release of `date-utils`. DateUtils contains utility functions for managing and manipulating JS Date objects
diff --git a/.changeset/wild-feet-press.md b/.changeset/wild-feet-press.md
deleted file mode 100644
index d1c258cdbc..0000000000
--- a/.changeset/wild-feet-press.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@lg-tools/meta': patch
----
-
-Fixes recursion in `findPackageJson`
diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 87317a2e1d..9acdc0a6f7 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -15,6 +15,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@leafygreen-ui/date-utils": "^0.1.0",
     "@leafygreen-ui/emotion": "^4.0.7",
     "@leafygreen-ui/form-field": "^0.2.0",
     "@leafygreen-ui/hooks": "^8.0.0",
@@ -27,7 +28,6 @@
     "@leafygreen-ui/tokens": "^2.2.0",
     "@leafygreen-ui/typography": "^18.0.0",
     "date-fns": "^2.30.0",
-    "date-fns-tz": "^2.0.0",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
     "weekstart": "^2.0.0"
diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
index b2cba5171a..3cb5098433 100644
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { StoryFn } from '@storybook/react';
 
 import Button from '@leafygreen-ui/button';
+import { Month, newUTC } from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 import Modal from '@leafygreen-ui/modal';
@@ -12,11 +13,9 @@ import {
   DatePickerContextProps,
   DatePickerProvider,
 } from './shared/components/DatePickerContext';
-import { Month } from './shared/constants';
 import { getProviderPropsFromStoryContext } from './shared/testutils/getProviderPropsFromStoryContext';
 import { Locales, TimeZones } from './shared/testutils/testValues';
 import { AutoComplete } from './shared/types';
-import { newUTC } from './shared/utils';
 import { DatePicker } from './DatePicker';
 
 const ProviderWrapper = (Story: StoryFn, ctx: any) => {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 97784e2e20..06b6de4dde 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -10,18 +10,18 @@ import {
 import userEvent from '@testing-library/user-event';
 import { addDays, subDays } from 'date-fns';
 
-import { transitionDuration } from '@leafygreen-ui/tokens';
-
-import { defaultMax, defaultMin, Month } from '../shared/constants';
-import { eventContainingTargetValue, tabNTimes } from '../shared/testutils';
 import {
-  getFormattedDateString,
   getISODate,
-  getValueFormatter,
+  Month,
   newUTC,
   setUTCMonth,
   setUTCYear,
-} from '../shared/utils';
+} from '@leafygreen-ui/date-utils';
+import { transitionDuration } from '@leafygreen-ui/tokens';
+
+import { defaultMax, defaultMin } from '../shared/constants';
+import { eventContainingTargetValue, tabNTimes } from '../shared/testutils';
+import { getFormattedDateString, getValueFormatter } from '../shared/utils';
 
 import {
   expectedTabStopLabels,
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index 83fe5e1294..7325c57271 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -9,8 +9,9 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { getISODate } from '@leafygreen-ui/date-utils';
+
 import { DateSegment } from '../shared/types';
-import { getISODate } from '../shared/utils';
 
 import { DatePickerProps } from './DatePicker.types';
 import { DatePicker } from '.';
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 01eab92c42..c3d0cbf0a8 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import LeafyGreenProvider, {
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
+import { pickAndOmit } from '@leafygreen-ui/lib';
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
@@ -14,7 +15,6 @@ import {
   DatePickerProvider,
 } from '../shared/components/DatePickerContext';
 import { useControlledValue } from '../shared/hooks';
-import { pickAndOmit } from '../shared/utils';
 
 import { DatePickerProps } from './DatePicker.types';
 import { DatePickerContent } from './DatePickerContent';
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index d74f8799ae..dbb839297a 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -1,6 +1,8 @@
 import { ChangeEvent } from 'react';
 
-import { BaseDatePickerProps, DateType } from '../shared/types';
+import { DateType } from '@leafygreen-ui/date-utils';
+
+import { BaseDatePickerProps } from '../shared/types';
 
 export interface DatePickerProps extends BaseDatePickerProps {
   /**
diff --git a/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
index 0d38a4050d..e0e8521c9c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
@@ -8,6 +8,7 @@ import React, {
 import { ExitHandler } from 'react-transition-group/Transition';
 import isEqual from 'lodash/isEqual';
 
+import { isSameUTCDay } from '@leafygreen-ui/date-utils';
 import {
   useBackdropClick,
   useForwardedRef,
@@ -16,7 +17,6 @@ import {
 import { keyMap } from '@leafygreen-ui/lib';
 
 import { useDatePickerContext } from '../../shared/components/DatePickerContext';
-import { isSameUTCDay } from '../../shared/utils';
 import { DatePickerInput } from '../DatePickerInput';
 import { DatePickerMenu } from '../DatePickerMenu';
 import { useSingleDateContext } from '../SingleDateContext';
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 3dd964f9f3..06f054266d 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { newUTC } from '../../shared';
+import { Month, newUTC } from '@leafygreen-ui/date-utils';
+
 import {
   DatePickerProvider,
   DatePickerProviderProps,
   defaultDatePickerContext,
 } from '../../shared/components/DatePickerContext';
-import { Month } from '../../shared/constants';
 import {
   SingleDateProvider,
   SingleDateProviderProps,
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 7d6c2f6070..4eb165e297 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -6,6 +6,8 @@ import React, {
   MouseEventHandler,
 } from 'react';
 
+import { isSameUTCDay } from '@leafygreen-ui/date-utils';
+import { isZeroLike } from '@leafygreen-ui/lib';
 import { createSyntheticEvent, keyMap } from '@leafygreen-ui/lib';
 
 import { DateFormField, DateInputBox } from '../../shared/components/DateInput';
@@ -14,8 +16,6 @@ import { useDatePickerContext } from '../../shared/components/DatePickerContext'
 import {
   getRelativeSegmentRef,
   isElementInputSegment,
-  isSameUTCDay,
-  isZeroLike,
 } from '../../shared/utils';
 import { useSingleDateContext } from '../SingleDateContext';
 import { getSegmentToFocus } from '../utils/getSegmentToFocus';
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index b606a2e00f..f4f881784c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -3,13 +3,18 @@ import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { addDays } from 'date-fns';
 
+import {
+  getISODate,
+  Month,
+  newUTC,
+  setUTCDate,
+} from '@leafygreen-ui/date-utils';
+
 import {
   DatePickerProvider,
   DatePickerProviderProps,
 } from '../../shared/components/DatePickerContext';
-import { Month } from '../../shared/constants';
 import { mockTimeZone, testTimeZones } from '../../shared/testutils';
-import { getISODate, newUTC, setUTCDate } from '../../shared/utils';
 import {
   SingleDateProvider,
   SingleDateProviderProps,
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 1929a94599..a5875c0171 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -5,6 +5,7 @@ import { userEvent, within } from '@storybook/testing-library';
 import { last, omit } from 'lodash';
 import MockDate from 'mockdate';
 
+import { Month, newUTC } from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { type StoryMetaType } from '@leafygreen-ui/lib';
 import { transitionDuration } from '@leafygreen-ui/tokens';
@@ -15,13 +16,11 @@ import {
   type DatePickerContextProps,
   DatePickerProvider,
 } from '../../shared/components/DatePickerContext';
-import { Month } from '../../shared/constants';
 import {
   getProviderPropsFromStoryContext,
   Locales,
   TimeZones,
 } from '../../shared/testutils';
-import { newUTC } from '../../shared/utils';
 import {
   type SingleDateContextProps,
   SingleDateProvider,
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index c463affb3e..1f9ecc000c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -5,6 +5,16 @@ import React, {
   useRef,
 } from 'react';
 
+import {
+  addDaysUTC,
+  getFirstOfMonth,
+  getFullMonthLabel,
+  getISODate,
+  getUTCDateString,
+  isSameTZDay,
+  isSameUTCDay,
+  isSameUTCMonth,
+} from '@leafygreen-ui/date-utils';
 import { useForwardedRef, usePrevious } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
 import { spacing } from '@leafygreen-ui/tokens';
@@ -16,16 +26,6 @@ import {
 } from '../../shared/components/Calendar';
 import { useDatePickerContext } from '../../shared/components/DatePickerContext';
 import { MenuWrapper } from '../../shared/components/MenuWrapper';
-import {
-  addDaysUTC,
-  getFirstOfMonth,
-  getFullMonthLabel,
-  getISODate,
-  getUTCDateString,
-  isSameTZDay,
-  isSameUTCDay,
-  isSameUTCMonth,
-} from '../../shared/utils';
 import { useSingleDateContext } from '../SingleDateContext';
 
 import { getNewHighlight } from './utils/getNewHighlight';
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
index 2e4cf0eeee..2da2cd7e29 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
@@ -2,9 +2,9 @@ import React, { PropsWithChildren, useState } from 'react';
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { Month, newUTC } from '@leafygreen-ui/date-utils';
 import { transitionDuration } from '@leafygreen-ui/tokens';
 
-import { Month, newUTC } from '../../../shared';
 import {
   DatePickerContext,
   defaultDatePickerContext,
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
index 12cb796526..350126a56f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
@@ -1,6 +1,12 @@
 import React, { forwardRef, MouseEventHandler, useCallback } from 'react';
 import range from 'lodash/range';
 
+import {
+  getLocaleMonths,
+  isSameUTCMonth,
+  setUTCMonth,
+  setUTCYear,
+} from '@leafygreen-ui/date-utils';
 import { cx } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
@@ -8,12 +14,6 @@ import { Option, Select } from '@leafygreen-ui/select';
 
 import { useDatePickerContext } from '../../../shared/components/DatePickerContext';
 import { selectElementProps } from '../../../shared/constants';
-import {
-  getLocaleMonths,
-  isSameUTCMonth,
-  setUTCMonth,
-  setUTCYear,
-} from '../../../shared/utils';
 import { useSingleDateContext } from '../../SingleDateContext';
 import {
   menuHeaderSelectContainerStyles,
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/index.ts
index 102ee392d3..78bd1dbfbd 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/index.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/index.ts
@@ -1,4 +1,4 @@
-import { isSameUTCMonth } from '../../../../../shared/utils';
+import { isSameUTCMonth } from '@leafygreen-ui/date-utils';
 
 /**
  * Checks if chevron should be disabled
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/isChevronDisabled.spec.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/isChevronDisabled.spec.ts
index 92173d2feb..a19486324c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/isChevronDisabled.spec.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldChevronBeDisabled/isChevronDisabled.spec.ts
@@ -1,4 +1,4 @@
-import { Month } from '../../../../../shared/constants';
+import { Month } from '@leafygreen-ui/date-utils';
 
 import { shouldChevronBeDisabled } from '.';
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldMonthBeEnabled/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldMonthBeEnabled/index.ts
index d9271f28cc..e5002e632a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldMonthBeEnabled/index.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldMonthBeEnabled/index.ts
@@ -1,7 +1,6 @@
 import isNull from 'lodash/isNull';
 
-import { DateType } from '../../../../../shared/types';
-import { getMonthIndex } from '../../../../../shared/utils';
+import { DateType, getMonthIndex } from '@leafygreen-ui/date-utils';
 
 export const shouldMonthBeEnabled = (
   monthName: string,
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldMonthBeEnabled/shouldMonthBeEnabled.spec.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldMonthBeEnabled/shouldMonthBeEnabled.spec.ts
index 26e9f9f17d..6e4cd5ee92 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldMonthBeEnabled/shouldMonthBeEnabled.spec.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/utils/shouldMonthBeEnabled/shouldMonthBeEnabled.spec.ts
@@ -1,4 +1,4 @@
-import { Month, newUTC } from '../../../../../shared';
+import { Month, newUTC } from '@leafygreen-ui/date-utils';
 
 import { shouldMonthBeEnabled } from '.';
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
index 1717dd6c1d..6ec42ee3aa 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
@@ -4,7 +4,7 @@ import {
   getFirstOfMonth,
   getLastOfMonth,
   isSameUTCMonth,
-} from '../../../../shared/utils';
+} from '@leafygreen-ui/date-utils';
 
 export const getNewHighlight = (
   currentHighlight: Date | null,
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
index d0fc683bc4..ffb0a0efe4 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
@@ -9,15 +9,17 @@ import React, {
   useState,
 } from 'react';
 
-import { usePrevious } from '@leafygreen-ui/hooks';
-
-import { DateType, getFirstOfMonth, useDatePickerContext } from '../../shared';
 import {
-  getFormattedDateString,
+  DateType,
+  getFirstOfMonth,
   getISODate,
   isOnOrBefore,
   isSameUTCDay,
-} from '../../shared/utils';
+} from '@leafygreen-ui/date-utils';
+import { usePrevious } from '@leafygreen-ui/hooks';
+
+import { useDatePickerContext } from '../../shared/components';
+import { getFormattedDateString } from '../../shared/utils';
 import { getInitialHighlight } from '../utils/getInitialHighlight';
 
 import {
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
index 70d746dc6c..5c6eb9c62a 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
+++ b/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
@@ -1,8 +1,9 @@
 import { SyntheticEvent } from 'react';
 
+import { DateType } from '@leafygreen-ui/date-utils';
 import { DynamicRefGetter } from '@leafygreen-ui/hooks';
 
-import { DateType, SegmentRefs } from '../../shared';
+import { SegmentRefs } from '../../shared';
 import { DatePickerProps } from '../DatePicker.types';
 
 export interface DatePickerComponentRefs {
diff --git a/packages/date-picker/src/DatePicker/utils/getInitialHighlight/getInitialHighlight.spec.ts b/packages/date-picker/src/DatePicker/utils/getInitialHighlight/getInitialHighlight.spec.ts
index 09e9c278b3..b73d127ce3 100644
--- a/packages/date-picker/src/DatePicker/utils/getInitialHighlight/getInitialHighlight.spec.ts
+++ b/packages/date-picker/src/DatePicker/utils/getInitialHighlight/getInitialHighlight.spec.ts
@@ -1,4 +1,4 @@
-import { Month, newUTC } from '../../../shared';
+import { Month, newUTC } from '@leafygreen-ui/date-utils';
 
 import { getInitialHighlight } from '.';
 
diff --git a/packages/date-picker/src/DatePicker/utils/getInitialHighlight/index.ts b/packages/date-picker/src/DatePicker/utils/getInitialHighlight/index.ts
index 56f453f6d0..1f79e7d695 100644
--- a/packages/date-picker/src/DatePicker/utils/getInitialHighlight/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getInitialHighlight/index.ts
@@ -1,4 +1,4 @@
-import { DateType, isValidDate } from '../../../shared';
+import { DateType, isValidDate } from '@leafygreen-ui/date-utils';
 
 /** Returns the initial highlight value when the date picker is opened */
 export const getInitialHighlight = (
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index 0c49d5ca26..80225564db 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -2,12 +2,16 @@
 import React, { useState } from 'react';
 import { StoryFn } from '@storybook/react';
 
+import {
+  getISODate,
+  isTodayTZ,
+  Month,
+  newUTC,
+} from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
-import { Month } from '../../../constants';
 import { Locales, TimeZones } from '../../../testutils';
-import { getISODate, isTodayTZ, newUTC } from '../../../utils';
 import {
   DatePickerContextProps,
   DatePickerProvider,
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
index 99f4211f47..ab4546a85a 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -2,11 +2,14 @@ import React, { forwardRef, useMemo } from 'react';
 import range from 'lodash/range';
 import { getWeekStartByLocale } from 'weekstart';
 
+import {
+  daysPerWeek,
+  getLocaleWeekdays,
+  getWeeksArray,
+} from '@leafygreen-ui/date-utils';
 import { cx } from '@leafygreen-ui/emotion';
 import { Disclaimer } from '@leafygreen-ui/typography';
 
-import { daysPerWeek } from '../../../constants';
-import { getLocaleWeekdays, getWeeksArray } from '../../../utils';
 import { useDatePickerContext } from '../../DatePickerContext';
 
 import {
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
index 32a2efcb6b..69baaf110d 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -3,9 +3,9 @@ import { jest } from '@jest/globals';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Month } from '../../../constants';
+import { Month, newUTC } from '@leafygreen-ui/date-utils';
+
 import { segmentRefsMock } from '../../../testutils';
-import { newUTC } from '../../../utils';
 import {
   DatePickerProvider,
   DatePickerProviderProps,
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
index bd06222bd7..19ae1110bd 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -3,12 +3,11 @@ import React, { useEffect, useState } from 'react';
 import { StoryFn } from '@storybook/react';
 import { isValid } from 'date-fns';
 
+import { Month, newUTC } from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { pickAndOmit, StoryMetaType, StoryType } from '@leafygreen-ui/lib';
 
-import { Month } from '../../../constants';
 import { Locales, segmentRefsMock } from '../../../testutils';
-import { newUTC } from '../../../utils';
 import {
   contextPropNames,
   DatePickerContextProps,
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
index eeab5f2df7..5c1bcede61 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
@@ -1,7 +1,7 @@
+import { DateType } from '@leafygreen-ui/date-utils';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 import { SegmentRefs } from '../../../hooks';
-import { DateType } from '../../../types';
 import { DateInputSegmentChangeEventHandler } from '../DateInputSegment/DateInputSegment.types';
 
 export interface DateInputBoxProps
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
index 362ddaf719..af42ab597c 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
@@ -2,10 +2,10 @@ import React, { PropsWithChildren } from 'react';
 import { act, waitFor } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 
+import { Month, newUTC } from '@leafygreen-ui/date-utils';
 import { consoleOnce } from '@leafygreen-ui/lib';
 
-import { MAX_DATE, MIN_DATE, Month } from '../../constants';
-import { newUTC } from '../../utils';
+import { MAX_DATE, MIN_DATE } from '../../constants';
 
 import {
   DatePickerContextProps,
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
index 8c1bdb4aa5..cca2045ceb 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
@@ -2,6 +2,7 @@ import { isBefore, isWithinInterval } from 'date-fns';
 import defaults from 'lodash/defaults';
 import defaultTo from 'lodash/defaultTo';
 
+import { getISODate, toDate } from '@leafygreen-ui/date-utils';
 import { consoleOnce } from '@leafygreen-ui/lib';
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
@@ -11,7 +12,7 @@ import {
   BaseDatePickerProps,
   DatePickerState,
 } from '../../types';
-import { getFormatParts, getISODate, toDate } from '../../utils';
+import { getFormatParts } from '../../utils';
 
 import {
   DatePickerContextProps,
diff --git a/packages/date-picker/src/shared/constants.ts b/packages/date-picker/src/shared/constants.ts
index 37303805ec..96f78df967 100644
--- a/packages/date-picker/src/shared/constants.ts
+++ b/packages/date-picker/src/shared/constants.ts
@@ -1,24 +1,6 @@
+import { Month } from '@leafygreen-ui/date-utils';
 import { DropdownWidthBasis } from '@leafygreen-ui/select';
 
-/** Days in a week */
-export const daysPerWeek = 7 as const;
-
-/** Enumerates month names to the 0-indexed value */
-export enum Month {
-  January,
-  February,
-  March,
-  April,
-  May,
-  June,
-  July,
-  August,
-  September,
-  October,
-  November,
-  December,
-}
-
 /**
  * The default earliest selectable date
  * (Unix epoch start: https://en.wikipedia.org/wiki/Unix_time)
diff --git a/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts b/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts
index dd3df4c725..e28eecc541 100644
--- a/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts
+++ b/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts
@@ -1,14 +1,10 @@
 import { useEffect, useReducer } from 'react';
 import { isSameDay } from 'date-fns';
 
+import { DateType } from '@leafygreen-ui/date-utils';
 import { usePrevious } from '@leafygreen-ui/hooks';
 
-import {
-  DateSegment,
-  DateSegmentsState,
-  DateSegmentValue,
-  DateType,
-} from '../../types';
+import { DateSegment, DateSegmentsState, DateSegmentValue } from '../../types';
 import { getFormattedSegmentsFromDate } from '../../utils';
 
 import {
diff --git a/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts b/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
index c98ce52b60..52fdcdfefc 100644
--- a/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
+++ b/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
@@ -1,6 +1,7 @@
 import { StoryContext } from '@storybook/react';
 
 import { LeafyGreenProviderProps } from '@leafygreen-ui/leafygreen-provider';
+import { pickAndOmit } from '@leafygreen-ui/lib';
 
 import {
   ContextPropKeys,
@@ -8,7 +9,6 @@ import {
   DatePickerProviderProps,
 } from '../../components/DatePickerContext';
 import { BaseDatePickerProps } from '../../types';
-import { pickAndOmit } from '../../utils';
 
 export interface ProviderPropsObject<T> {
   leafyGreenProviderProps: LeafyGreenProviderProps;
diff --git a/packages/date-picker/src/shared/testutils/mockTimeZone/mockTimeZone.spec.ts b/packages/date-picker/src/shared/testutils/mockTimeZone/mockTimeZone.spec.ts
index bd9a0eac2a..27634baa53 100644
--- a/packages/date-picker/src/shared/testutils/mockTimeZone/mockTimeZone.spec.ts
+++ b/packages/date-picker/src/shared/testutils/mockTimeZone/mockTimeZone.spec.ts
@@ -1,4 +1,5 @@
-import { Month } from '../../constants';
+import { Month } from '@leafygreen-ui/date-utils';
+
 import { testTimeZones } from '../testValues';
 
 import { mockTimeZone } from '.';
diff --git a/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
index e8b6055406..f4e0b00a24 100644
--- a/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
+++ b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
@@ -1,3 +1,4 @@
+import { LocaleString } from '@leafygreen-ui/date-utils';
 import { DarkModeProps } from '@leafygreen-ui/lib';
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
@@ -25,7 +26,7 @@ export interface BaseDatePickerProps extends DarkModeProps {
    *
    * @default 'iso8601'
    */
-  locale?: 'iso8601' | string;
+  locale?: LocaleString;
 
   /**
    * A valid IANA timezone string, or UTC offset.
diff --git a/packages/date-picker/src/shared/types/index.ts b/packages/date-picker/src/shared/types/index.ts
index 74b3318b28..d7e58585dd 100644
--- a/packages/date-picker/src/shared/types/index.ts
+++ b/packages/date-picker/src/shared/types/index.ts
@@ -5,11 +5,4 @@ export {
   type DateSegmentValue,
   isDateSegment,
 } from './DateSegment.types';
-export {
-  AutoComplete,
-  DatePickerState,
-  type DateRangeType,
-  type DateType,
-  type MonthObject,
-  type WeekdayObject,
-} from './types';
+export { AutoComplete, DatePickerState } from './types';
diff --git a/packages/date-picker/src/shared/types/types.ts b/packages/date-picker/src/shared/types/types.ts
index 70875da515..bfa625e962 100644
--- a/packages/date-picker/src/shared/types/types.ts
+++ b/packages/date-picker/src/shared/types/types.ts
@@ -6,29 +6,6 @@ export const DatePickerState = omit(FormFieldState, 'Valid');
 export type DatePickerState =
   (typeof DatePickerState)[keyof typeof DatePickerState];
 
-export type DateType = Date | null;
-export type DateRangeType = [DateType, DateType];
-
-export interface MonthObject {
-  long: string;
-  short: string;
-}
-
-/**
- * Object representing the abbreviations of a given weekday.
- * Abbreviation formats defined in Unicode: https://www.unicode.org/reports/tr35/tr35-67/tr35-dates.html#dfst-weekday
- */
-export interface WeekdayObject {
-  /** The long-form weekday name (e.g. Tuesday)*/
-  long: string;
-  /** An abbreviated weekday name (e.g. Tue) */
-  abbr: string;
-  /** A shorter weekday name (e.g. Tu)*/
-  short?: string;
-  /** The shortest weekday name (e.g. T) */
-  narrow: string;
-}
-
 export const AutoComplete = {
   Off: 'off',
   On: 'on',
diff --git a/packages/date-picker/src/shared/utils/doesSomeSegmentExist/index.ts b/packages/date-picker/src/shared/utils/doesSomeSegmentExist/index.ts
index ebad5b2104..a6de65d909 100644
--- a/packages/date-picker/src/shared/utils/doesSomeSegmentExist/index.ts
+++ b/packages/date-picker/src/shared/utils/doesSomeSegmentExist/index.ts
@@ -1,5 +1,6 @@
+import { isNotZeroLike } from '@leafygreen-ui/lib';
+
 import { DateSegmentsState } from '../../types';
-import { isNotZeroLike } from '../isZeroLike';
 
 /**
  * Returns whether at least one segment has a value
diff --git a/packages/date-picker/src/shared/utils/getFormatParts/index.ts b/packages/date-picker/src/shared/utils/getFormatParts/index.ts
index 0cc969df4c..bbd77226bc 100644
--- a/packages/date-picker/src/shared/utils/getFormatParts/index.ts
+++ b/packages/date-picker/src/shared/utils/getFormatParts/index.ts
@@ -1,4 +1,4 @@
-import { isValidLocale } from '../../utils';
+import { isValidLocale } from '@leafygreen-ui/date-utils';
 
 const now = new Date();
 const ISO = 'iso8601';
diff --git a/packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateString.spec.ts b/packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateString.spec.ts
index e8ef14cd6e..c1d43ccce3 100644
--- a/packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateString.spec.ts
+++ b/packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateString.spec.ts
@@ -1,5 +1,4 @@
-import { Month } from '../../constants';
-import { newUTC } from '../newUTC';
+import { Month, newUTC } from '@leafygreen-ui/date-utils';
 
 import { getFormattedDateString } from '.';
 
diff --git a/packages/date-picker/src/shared/utils/getMaxSegmentValue/getMaxSegmentValue.spec.ts b/packages/date-picker/src/shared/utils/getMaxSegmentValue/getMaxSegmentValue.spec.ts
index f1ae0ecd36..8fe7cbbf80 100644
--- a/packages/date-picker/src/shared/utils/getMaxSegmentValue/getMaxSegmentValue.spec.ts
+++ b/packages/date-picker/src/shared/utils/getMaxSegmentValue/getMaxSegmentValue.spec.ts
@@ -1,5 +1,4 @@
-import { Month } from '../../constants';
-import { newUTC } from '../newUTC';
+import { Month, newUTC } from '@leafygreen-ui/date-utils';
 
 import { getMaxSegmentValue } from '.';
 
diff --git a/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts b/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts
index a317719ed9..96882e0db0 100644
--- a/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts
+++ b/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts
@@ -1,5 +1,7 @@
+import { DateType } from '@leafygreen-ui/date-utils';
+
 import { defaultMax } from '../../constants';
-import { DateSegment, DateType } from '../../types';
+import { DateSegment } from '../../types';
 import { getSegmentsFromDate } from '../getSegmentsFromDate';
 
 /** Returns the maximum value for a segment, given a context */
diff --git a/packages/date-picker/src/shared/utils/getMinSegmentValue/getMinSegmentValue.spec.ts b/packages/date-picker/src/shared/utils/getMinSegmentValue/getMinSegmentValue.spec.ts
index 49d22b890c..dd86f762d4 100644
--- a/packages/date-picker/src/shared/utils/getMinSegmentValue/getMinSegmentValue.spec.ts
+++ b/packages/date-picker/src/shared/utils/getMinSegmentValue/getMinSegmentValue.spec.ts
@@ -1,5 +1,4 @@
-import { Month } from '../../constants';
-import { newUTC } from '../newUTC';
+import { Month, newUTC } from '@leafygreen-ui/date-utils';
 
 import { getMinSegmentValue } from '.';
 
diff --git a/packages/date-picker/src/shared/utils/getMinSegmentValue/index.ts b/packages/date-picker/src/shared/utils/getMinSegmentValue/index.ts
index 8f76846bd5..5d4daa71e4 100644
--- a/packages/date-picker/src/shared/utils/getMinSegmentValue/index.ts
+++ b/packages/date-picker/src/shared/utils/getMinSegmentValue/index.ts
@@ -1,5 +1,7 @@
+import { DateType } from '@leafygreen-ui/date-utils';
+
 import { defaultMin } from '../../constants';
-import { DateSegment, DateType } from '../../types';
+import { DateSegment } from '../../types';
 import { getSegmentsFromDate } from '../getSegmentsFromDate';
 
 /** Returns the minimum value for a segment, given a context */
diff --git a/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts b/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts
index a55f0d63b4..b52d90eb64 100644
--- a/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts
+++ b/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts
@@ -1,9 +1,9 @@
 import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
-import { DatePickerContextProps } from '../../../shared/components/DatePickerContext';
-import { SegmentRefs } from '../../../shared/hooks';
-import { DateSegment } from '../../../shared/types';
+import { DatePickerContextProps } from '../../components/DatePickerContext';
+import { SegmentRefs } from '../../hooks';
+import { DateSegment } from '../../types';
 
 type RelativeDirection = 'next' | 'prev' | 'first' | 'last';
 interface GetRelativeSegmentContext {
diff --git a/packages/date-picker/src/shared/utils/getRemainingParts/index.ts b/packages/date-picker/src/shared/utils/getRemainingParts/index.ts
index f1abc48b2c..a643ff2905 100644
--- a/packages/date-picker/src/shared/utils/getRemainingParts/index.ts
+++ b/packages/date-picker/src/shared/utils/getRemainingParts/index.ts
@@ -1,6 +1,6 @@
 import isUndefined from 'lodash/isUndefined';
 
-import { cloneReverse } from '../cloneReverse';
+import { cloneReverse } from '@leafygreen-ui/lib';
 
 /** Returns the ordered parts to the left or right of the provided index
  * e.g:
diff --git a/packages/date-picker/src/shared/utils/getValueFormatter/index.ts b/packages/date-picker/src/shared/utils/getValueFormatter/index.ts
index 6539832d1a..bf759d62bc 100644
--- a/packages/date-picker/src/shared/utils/getValueFormatter/index.ts
+++ b/packages/date-picker/src/shared/utils/getValueFormatter/index.ts
@@ -1,8 +1,9 @@
 import padStart from 'lodash/padStart';
 
+import { isZeroLike } from '@leafygreen-ui/lib';
+
 import { charsPerSegment } from '../../constants';
 import { DateSegment } from '../../types';
-import { isZeroLike } from '../isZeroLike';
 
 /**
  * @returns a value formatter function for the provided date segment
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index a393a53b74..924d0cea24 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -1,22 +1,10 @@
-export { addDaysUTC } from './addDaysUTC';
-export { addMonthsUTC } from './addMonthsUTC';
-export { cloneReverse } from './cloneReverse';
 export { doesSomeSegmentExist } from './doesSomeSegmentExist';
 export { getAutoComplete } from './getAutoComplete';
-export { getDaysInUTCMonth } from './getDaysInUTCMonth';
 export { getFirstEmptySegment } from './getFirstEmptySegment';
-export { getFirstOfMonth } from './getFirstOfMonth';
 export { getFormatParts, getFormatter } from './getFormatParts';
 export { getFormattedDateString } from './getFormattedDateString';
-export { getFullMonthLabel } from './getFullMonthLabel';
-export { getISODate } from './getISODate';
-export { getLastOfMonth } from './getLastOfMonth';
-export { getLocaleMonths } from './getLocaleMonths';
-export { getLocaleWeekdays } from './getLocaleWeekdays';
 export { getMaxSegmentValue } from './getMaxSegmentValue';
 export { getMinSegmentValue } from './getMinSegmentValue';
-export { getMonthIndex } from './getMonthIndex';
-export { getMonthName } from './getMonthName';
 export {
   getRelativeSegment,
   getRelativeSegmentRef,
@@ -27,33 +15,9 @@ export {
   getFormattedSegmentsFromDate,
   getSegmentsFromDate,
 } from './getSegmentsFromDate';
-export { getUTCDateString } from './getUTCDateString';
 export { getValueFormatter } from './getValueFormatter';
-export { getWeekdayName } from './getWeekdayName';
-export { getWeeksArray } from './getWeeksArray';
-export { isCurrentUTCDay } from './isCurrentUTCDay';
-export { isDefined } from './isDefined';
 export { isElementInputSegment } from './isElementInputSegment';
 export { isExplicitSegmentValue } from './isExplicitSegmentValue';
-export { isOnOrAfter } from './isOnOrAfter';
-export { isOnOrBefore } from './isOnOrBefore';
-export { isSameTZDay } from './isSameTZDay';
-export { isSameUTCDay } from './isSameUTCDay';
-export { isSameUTCMonth } from './isSameUTCMonth';
-export { isSameUTCRange } from './isSameUTCRange';
-export { isTodayTZ } from './isTodayTZ';
-export { isValidDate } from './isValidDate';
-export { isValidLocale } from './isValidLocale';
 export { isValidSegmentName, isValidSegmentValue } from './isValidSegment';
 export { isValidValueForSegment } from './isValidValueForSegment';
-export { isNotZeroLike, isZeroLike } from './isZeroLike';
-export { maxDate } from './maxDate';
-export { minDate } from './minDate';
 export { newDateFromSegments } from './newDateFromSegments';
-export { newUTC } from './newUTC';
-export { pickAndOmit } from './pickAndOmit';
-export { setToUTCMidnight } from './setToUTCMidnight';
-export { setUTCDate } from './setUTCDate';
-export { setUTCMonth } from './setUTCMonth';
-export { setUTCYear } from './setUTCYear';
-export { toDate } from './toDate';
diff --git a/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
index 6a244f9abe..cc70fdcf9d 100644
--- a/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
@@ -1,7 +1,8 @@
+import { newUTC } from '@leafygreen-ui/date-utils';
+
 import { DateSegmentsState } from '../../types';
 import { isValidSegmentName } from '../isValidSegment';
 import { isValidValueForSegment } from '../isValidValueForSegment';
-import { newUTC } from '../newUTC';
 
 /** Constructs a date object in UTC from day, month, year segments */
 export const newDateFromSegments = (
diff --git a/packages/date-picker/src/shared/utils/pickAndOmit/index.ts b/packages/date-picker/src/shared/utils/pickAndOmit/index.ts
deleted file mode 100644
index 62f9f35dfc..0000000000
--- a/packages/date-picker/src/shared/utils/pickAndOmit/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import omit from 'lodash/omit';
-import pick from 'lodash/pick';
-
-/**
- * Returns an array of 2 objects,
- * first, the result of calling `_.pick`,
- * second, the result of calling `_.omit`
- *
- * e.g.
- * ```js
- * const obj = { a: 'A', b: 'B', c: 'C', d: 'D' }
- * pickAndOmit(obj, ['a', 'b']) // [{a: "A", b: "B"}, {c: "C", d: "D"}]
- * ```
- */
-export const pickAndOmit = <T extends object, K extends keyof T>(
-  object: T,
-  keys: Array<K>,
-): [Pick<T, K>, Omit<T, K>] => {
-  const picked = pick(object, keys);
-  const omitted = omit(object, keys);
-
-  return [picked, omitted];
-};
diff --git a/packages/date-picker/tsconfig.json b/packages/date-picker/tsconfig.json
index 6d3c68274c..8423fe8c40 100644
--- a/packages/date-picker/tsconfig.json
+++ b/packages/date-picker/tsconfig.json
@@ -25,6 +25,9 @@
     {
       "path": "../button"
     },
+    {
+      "path": "../date-utils"
+    },
     {
       "path": "../emotion"
     },
diff --git a/packages/date-utils/README.md b/packages/date-utils/README.md
new file mode 100644
index 0000000000..2aaa004a24
--- /dev/null
+++ b/packages/date-utils/README.md
@@ -0,0 +1,21 @@
+# Date Utils
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/date-utils.svg)
+
+LeafyGreen DateUtils provides date manipulation & comparison utilities not included in the [`date-fns`](https://date-fns.org/) library.
+
+Note, this package only contains generic Date utilities. For implementation-specific utilities, see `date-picker/src/shared/utils`
+
+## Installation
+
+### Yarn
+
+```shell
+yarn add @leafygreen-ui/date-utils
+```
+
+### NPM
+
+```shell
+npm install @leafygreen-ui/date-utils
+```
diff --git a/packages/date-utils/package.json b/packages/date-utils/package.json
new file mode 100644
index 0000000000..5bc1e19f71
--- /dev/null
+++ b/packages/date-utils/package.json
@@ -0,0 +1,41 @@
+  
+{
+  "name": "@leafygreen-ui/date-utils",
+  "version": "0.1.0",
+  "description": "LeafyGreen UI Kit Date Utils",
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "lg build-package",
+    "tsc": "lg build-ts",
+    "docs": "lg build-tsdoc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/lib": "^13.1.0",
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0",
+    "lodash": "^4.17.21",
+    "weekstart": "^2.0.0"
+  },
+  "devDependencies": {
+    "timezone-mock": "^1.3.6"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/date-utils",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/PD/summary"
+  },
+  "keywords": [
+    "leafygreen",
+    "date",
+    "date-fns"
+  ]
+}
diff --git a/packages/date-picker/src/shared/utils/addDaysUTC/addDaysUTC.spec.ts b/packages/date-utils/src/addDaysUTC/addDaysUTC.spec.ts
similarity index 95%
rename from packages/date-picker/src/shared/utils/addDaysUTC/addDaysUTC.spec.ts
rename to packages/date-utils/src/addDaysUTC/addDaysUTC.spec.ts
index 9a7eb47fe3..1aa17335f3 100644
--- a/packages/date-picker/src/shared/utils/addDaysUTC/addDaysUTC.spec.ts
+++ b/packages/date-utils/src/addDaysUTC/addDaysUTC.spec.ts
@@ -1,9 +1,9 @@
-import { Month } from '../../constants';
+import { Month } from '../constants';
 import { newUTC } from '../newUTC';
 
 import { addDaysUTC } from '.';
 
-describe('packages/date-picker/utils/addDaysUTC', () => {
+describe('packages/date-utils/addDaysUTC', () => {
   const june30 = newUTC(2023, Month.June, 30);
   const july1 = newUTC(2023, Month.July, 1);
   const july2 = newUTC(2023, Month.July, 2);
diff --git a/packages/date-picker/src/shared/utils/addDaysUTC/index.ts b/packages/date-utils/src/addDaysUTC/addDaysUTC.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/addDaysUTC/index.ts
rename to packages/date-utils/src/addDaysUTC/addDaysUTC.ts
diff --git a/packages/date-utils/src/addDaysUTC/index.ts b/packages/date-utils/src/addDaysUTC/index.ts
new file mode 100644
index 0000000000..315f6b5fd8
--- /dev/null
+++ b/packages/date-utils/src/addDaysUTC/index.ts
@@ -0,0 +1 @@
+export { addDaysUTC } from './addDaysUTC';
diff --git a/packages/date-utils/src/addMonthsUTC/addMonthsUTC.spec.ts b/packages/date-utils/src/addMonthsUTC/addMonthsUTC.spec.ts
new file mode 100644
index 0000000000..59f729a6e8
--- /dev/null
+++ b/packages/date-utils/src/addMonthsUTC/addMonthsUTC.spec.ts
@@ -0,0 +1,54 @@
+import { Month } from '../constants';
+import { newUTC } from '../newUTC';
+
+import { addMonthsUTC } from '.';
+
+describe('packages/date-utils/addMonthsUTC', () => {
+  test('returns the same date for 0', () => {
+    const july4 = newUTC(2020, Month.July, 4);
+    expect(addMonthsUTC(july4, 0)).toEqual(july4);
+  });
+
+  test('adds a single month', () => {
+    const july4 = newUTC(2020, Month.July, 4);
+    const aug4 = newUTC(2020, Month.August, 4);
+    expect(addMonthsUTC(july4, 1)).toEqual(aug4);
+  });
+  test('adds multiple months', () => {
+    const july4 = newUTC(2020, Month.July, 4);
+    const sept4 = newUTC(2020, Month.September, 4);
+    expect(addMonthsUTC(july4, 2)).toEqual(sept4);
+  });
+  test('adds months across years', () => {
+    const dec5 = newUTC(2020, Month.December, 5);
+    const jan5 = newUTC(2021, Month.January, 5);
+    expect(addMonthsUTC(dec5, 1)).toEqual(jan5);
+  });
+  test('adds months during leap year', () => {
+    const jan29 = newUTC(2020, Month.January, 29);
+    const feb29 = newUTC(2020, Month.February, 29);
+    expect(addMonthsUTC(jan29, 1)).toEqual(feb29);
+  });
+
+  /** Subtracts */
+  test('subtracts a single month', () => {
+    const july4 = newUTC(2020, Month.July, 4);
+    const aug4 = newUTC(2020, Month.August, 4);
+    expect(addMonthsUTC(aug4, -1)).toEqual(july4);
+  });
+  test('subtracts multiple months', () => {
+    const july4 = newUTC(2020, Month.July, 4);
+    const sept4 = newUTC(2020, Month.September, 4);
+    expect(addMonthsUTC(sept4, -2)).toEqual(july4);
+  });
+  test('subtracts months across years', () => {
+    const dec5 = newUTC(2020, Month.December, 5);
+    const jan5 = newUTC(2021, Month.January, 5);
+    expect(addMonthsUTC(jan5, -1)).toEqual(dec5);
+  });
+  test('subtracts months during leap year', () => {
+    const feb29 = newUTC(2020, Month.February, 29);
+    const mar29 = newUTC(2020, Month.March, 29);
+    expect(addMonthsUTC(mar29, -1)).toEqual(feb29);
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/addMonthsUTC/index.ts b/packages/date-utils/src/addMonthsUTC/addMonthsUTC.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/addMonthsUTC/index.ts
rename to packages/date-utils/src/addMonthsUTC/addMonthsUTC.ts
diff --git a/packages/date-utils/src/addMonthsUTC/index.ts b/packages/date-utils/src/addMonthsUTC/index.ts
new file mode 100644
index 0000000000..82d1467f37
--- /dev/null
+++ b/packages/date-utils/src/addMonthsUTC/index.ts
@@ -0,0 +1 @@
+export { addMonthsUTC } from './addMonthsUTC';
diff --git a/packages/date-utils/src/constants.ts b/packages/date-utils/src/constants.ts
new file mode 100644
index 0000000000..507f192021
--- /dev/null
+++ b/packages/date-utils/src/constants.ts
@@ -0,0 +1,18 @@
+/** Days in a week */
+export const daysPerWeek = 7 as const;
+
+/** Enumerates month names to the 0-indexed value */
+export enum Month {
+  January,
+  February,
+  March,
+  April,
+  May,
+  June,
+  July,
+  August,
+  September,
+  October,
+  November,
+  December,
+}
diff --git a/packages/date-picker/src/shared/utils/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts b/packages/date-utils/src/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts
similarity index 94%
rename from packages/date-picker/src/shared/utils/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts
rename to packages/date-utils/src/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts
index 7b66d21992..bbf90b770a 100644
--- a/packages/date-picker/src/shared/utils/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts
+++ b/packages/date-utils/src/getDaysInUTCMonth/getDaysInUTCMonth.spec.ts
@@ -1,6 +1,6 @@
 import { getDaysInUTCMonth } from '.';
 
-describe('getDaysInUTCMonth', () => {
+describe('packages/date-utils/getDaysInUTCMonth', () => {
   test('returns the number of days in the month', () => {
     const result = getDaysInUTCMonth(new Date(2100, 1 /* Feb */, 11));
     expect(result).toEqual(28);
diff --git a/packages/date-picker/src/shared/utils/getDaysInUTCMonth/index.ts b/packages/date-utils/src/getDaysInUTCMonth/getDaysInUTCMonth.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/getDaysInUTCMonth/index.ts
rename to packages/date-utils/src/getDaysInUTCMonth/getDaysInUTCMonth.ts
diff --git a/packages/date-utils/src/getDaysInUTCMonth/index.ts b/packages/date-utils/src/getDaysInUTCMonth/index.ts
new file mode 100644
index 0000000000..7dc2ab8753
--- /dev/null
+++ b/packages/date-utils/src/getDaysInUTCMonth/index.ts
@@ -0,0 +1 @@
+export { getDaysInUTCMonth } from './getDaysInUTCMonth';
diff --git a/packages/date-picker/src/shared/utils/getFirstOfMonth/getFirstOfMonth.spec.ts b/packages/date-utils/src/getFirstOfMonth/getFirstOfMonth.spec.ts
similarity index 91%
rename from packages/date-picker/src/shared/utils/getFirstOfMonth/getFirstOfMonth.spec.ts
rename to packages/date-utils/src/getFirstOfMonth/getFirstOfMonth.spec.ts
index ae7c819d89..d030d61bc4 100644
--- a/packages/date-picker/src/shared/utils/getFirstOfMonth/getFirstOfMonth.spec.ts
+++ b/packages/date-utils/src/getFirstOfMonth/getFirstOfMonth.spec.ts
@@ -1,6 +1,6 @@
 import { getFirstOfMonth } from '.';
 
-describe('packages/date-picker/utils/getFirstOfMonth', () => {
+describe('packages/date-utils/getFirstOfMonth', () => {
   test('returns the first day of the provided month', () => {
     expect(getFirstOfMonth(new Date(Date.UTC(2023, 0, 31)))).toEqual(
       new Date(Date.UTC(2023, 0, 1)),
diff --git a/packages/date-picker/src/shared/utils/getFirstOfMonth/index.ts b/packages/date-utils/src/getFirstOfMonth/getFirstOfMonth.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/getFirstOfMonth/index.ts
rename to packages/date-utils/src/getFirstOfMonth/getFirstOfMonth.ts
diff --git a/packages/date-utils/src/getFirstOfMonth/index.ts b/packages/date-utils/src/getFirstOfMonth/index.ts
new file mode 100644
index 0000000000..9e8562233d
--- /dev/null
+++ b/packages/date-utils/src/getFirstOfMonth/index.ts
@@ -0,0 +1 @@
+export { getFirstOfMonth } from './getFirstOfMonth';
diff --git a/packages/date-picker/src/shared/utils/getFullMonthLabel/getFullMonthLabel.spec.ts b/packages/date-utils/src/getFullMonthLabel/getFullMonthLabel.spec.ts
similarity index 67%
rename from packages/date-picker/src/shared/utils/getFullMonthLabel/getFullMonthLabel.spec.ts
rename to packages/date-utils/src/getFullMonthLabel/getFullMonthLabel.spec.ts
index e525fcf604..b1817a99de 100644
--- a/packages/date-picker/src/shared/utils/getFullMonthLabel/getFullMonthLabel.spec.ts
+++ b/packages/date-utils/src/getFullMonthLabel/getFullMonthLabel.spec.ts
@@ -1,9 +1,9 @@
-import { Month } from '../../constants';
+import { Month } from '../constants';
 import { newUTC } from '../newUTC';
 
 import { getFullMonthLabel } from '.';
 
-describe('packages/date-picker/utils/getMonthName', () => {
+describe('packages/date-utils/getMonthName', () => {
   test('Jan', () => {
     expect(getFullMonthLabel(newUTC(2023, Month.January, 5))).toEqual(
       'January 2023',
diff --git a/packages/date-picker/src/shared/utils/getFullMonthLabel/index.ts b/packages/date-utils/src/getFullMonthLabel/getFullMonthLabel.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/getFullMonthLabel/index.ts
rename to packages/date-utils/src/getFullMonthLabel/getFullMonthLabel.ts
diff --git a/packages/date-utils/src/getFullMonthLabel/index.ts b/packages/date-utils/src/getFullMonthLabel/index.ts
new file mode 100644
index 0000000000..d2b221167f
--- /dev/null
+++ b/packages/date-utils/src/getFullMonthLabel/index.ts
@@ -0,0 +1 @@
+export { getFullMonthLabel } from './getFullMonthLabel';
diff --git a/packages/date-picker/src/shared/utils/getISODate/getISODate.spec.ts b/packages/date-utils/src/getISODate/getISODate.spec.ts
similarity index 76%
rename from packages/date-picker/src/shared/utils/getISODate/getISODate.spec.ts
rename to packages/date-utils/src/getISODate/getISODate.spec.ts
index deb7189971..5168471b7f 100644
--- a/packages/date-picker/src/shared/utils/getISODate/getISODate.spec.ts
+++ b/packages/date-utils/src/getISODate/getISODate.spec.ts
@@ -1,9 +1,9 @@
-import { Month } from '../../constants';
+import { Month } from '../constants';
 import { newUTC } from '../newUTC';
 
 import { getISODate } from '.';
 
-describe('packages/date-picker/utils/getISODate', () => {
+describe('packages/date-utils/getISODate', () => {
   test('returns an ISO Date string', () => {
     const d1 = newUTC(2023, Month.July, 10);
     expect(getISODate(d1)).toEqual('2023-07-10');
diff --git a/packages/date-picker/src/shared/utils/getISODate/index.ts b/packages/date-utils/src/getISODate/getISODate.ts
similarity index 90%
rename from packages/date-picker/src/shared/utils/getISODate/index.ts
rename to packages/date-utils/src/getISODate/getISODate.ts
index 6872036238..7d40c7a8b2 100644
--- a/packages/date-picker/src/shared/utils/getISODate/index.ts
+++ b/packages/date-utils/src/getISODate/getISODate.ts
@@ -1,5 +1,5 @@
-import { DateType } from '../../types';
 import { isValidDate } from '../isValidDate';
+import { DateType } from '../types';
 
 /**
  * Returns only the Date portion of the ISOString for a given date
diff --git a/packages/date-utils/src/getISODate/index.ts b/packages/date-utils/src/getISODate/index.ts
new file mode 100644
index 0000000000..369faacad7
--- /dev/null
+++ b/packages/date-utils/src/getISODate/index.ts
@@ -0,0 +1 @@
+export { getISODate } from './getISODate';
diff --git a/packages/date-picker/src/shared/utils/getLastOfMonth/getLastOfMonth.spec.ts b/packages/date-utils/src/getLastOfMonth/getLastOfMonth.spec.ts
similarity index 91%
rename from packages/date-picker/src/shared/utils/getLastOfMonth/getLastOfMonth.spec.ts
rename to packages/date-utils/src/getLastOfMonth/getLastOfMonth.spec.ts
index 603186c927..02898a04a5 100644
--- a/packages/date-picker/src/shared/utils/getLastOfMonth/getLastOfMonth.spec.ts
+++ b/packages/date-utils/src/getLastOfMonth/getLastOfMonth.spec.ts
@@ -1,8 +1,8 @@
-import { Month } from '../../constants';
+import { Month } from '../constants';
 
 import { getLastOfMonth } from '.';
 
-describe('packages/date-picker/utils/getLastOfMonth', () => {
+describe('packages/date-utils/getLastOfMonth', () => {
   test('sets to last of month', () => {
     expect(getLastOfMonth(new Date(Date.UTC(2023, Month.January, 5)))).toEqual(
       new Date(Date.UTC(2023, Month.January, 31)),
diff --git a/packages/date-picker/src/shared/utils/getLastOfMonth/index.ts b/packages/date-utils/src/getLastOfMonth/getLastOfMonth.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/getLastOfMonth/index.ts
rename to packages/date-utils/src/getLastOfMonth/getLastOfMonth.ts
diff --git a/packages/date-utils/src/getLastOfMonth/index.ts b/packages/date-utils/src/getLastOfMonth/index.ts
new file mode 100644
index 0000000000..efd4446dac
--- /dev/null
+++ b/packages/date-utils/src/getLastOfMonth/index.ts
@@ -0,0 +1 @@
+export { getLastOfMonth } from './getLastOfMonth';
diff --git a/packages/date-picker/src/shared/utils/getLocaleMonths/getLocaleMonths.spec.ts b/packages/date-utils/src/getLocaleMonths/getLocaleMonths.spec.ts
similarity index 91%
rename from packages/date-picker/src/shared/utils/getLocaleMonths/getLocaleMonths.spec.ts
rename to packages/date-utils/src/getLocaleMonths/getLocaleMonths.spec.ts
index a78e119722..bf3e1af3f1 100644
--- a/packages/date-picker/src/shared/utils/getLocaleMonths/getLocaleMonths.spec.ts
+++ b/packages/date-utils/src/getLocaleMonths/getLocaleMonths.spec.ts
@@ -1,6 +1,6 @@
 import { getLocaleMonths } from '.';
 
-describe('packages/date-picker/utils/getLocaleMonths', () => {
+describe('packages/date-utils/getLocaleMonths', () => {
   test('default (English)', () => {
     expect(getLocaleMonths()).toHaveLength(12);
     getLocaleMonths().forEach(mo => {
diff --git a/packages/date-picker/src/shared/utils/getLocaleMonths/index.ts b/packages/date-utils/src/getLocaleMonths/getLocaleMonths.ts
similarity index 85%
rename from packages/date-picker/src/shared/utils/getLocaleMonths/index.ts
rename to packages/date-utils/src/getLocaleMonths/getLocaleMonths.ts
index 850485d16d..2c79729053 100644
--- a/packages/date-picker/src/shared/utils/getLocaleMonths/index.ts
+++ b/packages/date-utils/src/getLocaleMonths/getLocaleMonths.ts
@@ -1,7 +1,7 @@
 import range from 'lodash/range';
 
-import { MonthObject } from '../../types';
 import { getMonthName } from '../getMonthName';
+import { MonthObject } from '../types';
 
 export const getLocaleMonths = (locale?: string): Array<MonthObject> => {
   return range(12).map(monthIndex => {
diff --git a/packages/date-utils/src/getLocaleMonths/index.ts b/packages/date-utils/src/getLocaleMonths/index.ts
new file mode 100644
index 0000000000..70b75d0daa
--- /dev/null
+++ b/packages/date-utils/src/getLocaleMonths/index.ts
@@ -0,0 +1 @@
+export { getLocaleMonths } from './getLocaleMonths';
diff --git a/packages/date-picker/src/shared/utils/getLocaleWeekdays/getLocaleWeekdays.spec.ts b/packages/date-utils/src/getLocaleWeekdays/getLocaleWeekdays.spec.ts
similarity index 93%
rename from packages/date-picker/src/shared/utils/getLocaleWeekdays/getLocaleWeekdays.spec.ts
rename to packages/date-utils/src/getLocaleWeekdays/getLocaleWeekdays.spec.ts
index 6ad1124c70..3ee2a527d3 100644
--- a/packages/date-picker/src/shared/utils/getLocaleWeekdays/getLocaleWeekdays.spec.ts
+++ b/packages/date-utils/src/getLocaleWeekdays/getLocaleWeekdays.spec.ts
@@ -1,6 +1,6 @@
 import { getLocaleWeekdays } from '.';
 
-describe('packages/date-picker/utils/getLocaleWeekdays', () => {
+describe('packages/date-utils/getLocaleWeekdays', () => {
   test('English (default)', () => {
     expect(getLocaleWeekdays()).toHaveLength(7);
     getLocaleWeekdays().forEach(w => {
diff --git a/packages/date-picker/src/shared/utils/getLocaleWeekdays/index.ts b/packages/date-utils/src/getLocaleWeekdays/getLocaleWeekdays.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/getLocaleWeekdays/index.ts
rename to packages/date-utils/src/getLocaleWeekdays/getLocaleWeekdays.ts
diff --git a/packages/date-utils/src/getLocaleWeekdays/index.ts b/packages/date-utils/src/getLocaleWeekdays/index.ts
new file mode 100644
index 0000000000..12ff84fca7
--- /dev/null
+++ b/packages/date-utils/src/getLocaleWeekdays/index.ts
@@ -0,0 +1 @@
+export { getLocaleWeekdays } from './getLocaleWeekdays';
diff --git a/packages/date-picker/src/shared/utils/getMonthIndex/getMonthIndex.spec.ts b/packages/date-utils/src/getMonthIndex/getMonthIndex.spec.ts
similarity index 93%
rename from packages/date-picker/src/shared/utils/getMonthIndex/getMonthIndex.spec.ts
rename to packages/date-utils/src/getMonthIndex/getMonthIndex.spec.ts
index cb6d7968b2..a23d62883e 100644
--- a/packages/date-picker/src/shared/utils/getMonthIndex/getMonthIndex.spec.ts
+++ b/packages/date-utils/src/getMonthIndex/getMonthIndex.spec.ts
@@ -1,6 +1,6 @@
 import { getMonthIndex } from '.';
 
-describe('packages/date-picker/utils/getMonthIndex', () => {
+describe('packages/date-utils/getMonthIndex', () => {
   test('Default (English) long', () => {
     expect(getMonthIndex('January')).toBe(0);
     expect(getMonthIndex('December')).toBe(11);
diff --git a/packages/date-picker/src/shared/utils/getMonthIndex/index.ts b/packages/date-utils/src/getMonthIndex/getMonthIndex.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/getMonthIndex/index.ts
rename to packages/date-utils/src/getMonthIndex/getMonthIndex.ts
diff --git a/packages/date-utils/src/getMonthIndex/index.ts b/packages/date-utils/src/getMonthIndex/index.ts
new file mode 100644
index 0000000000..0e076cce67
--- /dev/null
+++ b/packages/date-utils/src/getMonthIndex/index.ts
@@ -0,0 +1 @@
+export { getMonthIndex } from './getMonthIndex';
diff --git a/packages/date-picker/src/shared/utils/getMonthName/getMonthName.spec.ts b/packages/date-utils/src/getMonthName/getMonthName.spec.ts
similarity index 97%
rename from packages/date-picker/src/shared/utils/getMonthName/getMonthName.spec.ts
rename to packages/date-utils/src/getMonthName/getMonthName.spec.ts
index d14c04afb5..b157287dc9 100644
--- a/packages/date-picker/src/shared/utils/getMonthName/getMonthName.spec.ts
+++ b/packages/date-utils/src/getMonthName/getMonthName.spec.ts
@@ -1,6 +1,6 @@
 import { getMonthName } from '.';
 
-describe('packages/date-picker/utils/getMonthName', () => {
+describe('packages/date-utils/getMonthName', () => {
   test('Default (English)', () => {
     expect(getMonthName(0)).toEqual(
       expect.objectContaining({ long: 'January', short: 'Jan' }),
diff --git a/packages/date-picker/src/shared/utils/getMonthName/index.ts b/packages/date-utils/src/getMonthName/getMonthName.ts
similarity index 92%
rename from packages/date-picker/src/shared/utils/getMonthName/index.ts
rename to packages/date-utils/src/getMonthName/getMonthName.ts
index b9f68045e8..ba7d669339 100644
--- a/packages/date-picker/src/shared/utils/getMonthName/index.ts
+++ b/packages/date-utils/src/getMonthName/getMonthName.ts
@@ -1,5 +1,5 @@
-import { MonthObject } from '../../types';
 import { normalizeLocale } from '../normalizeLocale';
+import { MonthObject } from '../types';
 
 /**
  * Returns the month name from a given index and optional locale
diff --git a/packages/date-utils/src/getMonthName/index.ts b/packages/date-utils/src/getMonthName/index.ts
new file mode 100644
index 0000000000..33e4ee828f
--- /dev/null
+++ b/packages/date-utils/src/getMonthName/index.ts
@@ -0,0 +1 @@
+export { getMonthName } from './getMonthName';
diff --git a/packages/date-picker/src/shared/utils/getUTCDateString/getUTCDateString.spec.ts b/packages/date-utils/src/getUTCDateString/getUTCDateString.spec.ts
similarity index 83%
rename from packages/date-picker/src/shared/utils/getUTCDateString/getUTCDateString.spec.ts
rename to packages/date-utils/src/getUTCDateString/getUTCDateString.spec.ts
index 9fa68e52af..4839f22045 100644
--- a/packages/date-picker/src/shared/utils/getUTCDateString/getUTCDateString.spec.ts
+++ b/packages/date-utils/src/getUTCDateString/getUTCDateString.spec.ts
@@ -1,8 +1,8 @@
-import { Month } from '../../constants';
+import { Month } from '../constants';
 
 import { getUTCDateString } from '.';
 
-describe('date-picker/utils/getUTCDateString', () => {
+describe('packages/date-utils/getUTCDateString', () => {
   test('returns date string relative to UTC', () => {
     const date = new Date(Date.UTC(2023, Month.September, 10));
     const str = getUTCDateString(date);
diff --git a/packages/date-picker/src/shared/utils/getUTCDateString/index.ts b/packages/date-utils/src/getUTCDateString/getUTCDateString.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/getUTCDateString/index.ts
rename to packages/date-utils/src/getUTCDateString/getUTCDateString.ts
diff --git a/packages/date-utils/src/getUTCDateString/index.ts b/packages/date-utils/src/getUTCDateString/index.ts
new file mode 100644
index 0000000000..d9dc1b871e
--- /dev/null
+++ b/packages/date-utils/src/getUTCDateString/index.ts
@@ -0,0 +1 @@
+export { getUTCDateString } from './getUTCDateString';
diff --git a/packages/date-picker/src/shared/utils/getWeekdayName/getWeekdayName.spec.ts b/packages/date-utils/src/getWeekdayName/getWeekdayName.spec.ts
similarity index 94%
rename from packages/date-picker/src/shared/utils/getWeekdayName/getWeekdayName.spec.ts
rename to packages/date-utils/src/getWeekdayName/getWeekdayName.spec.ts
index 172db0dcef..f20940822f 100644
--- a/packages/date-picker/src/shared/utils/getWeekdayName/getWeekdayName.spec.ts
+++ b/packages/date-utils/src/getWeekdayName/getWeekdayName.spec.ts
@@ -1,5 +1,5 @@
 import { getWeekdayName } from '.';
-describe('packages/date-picker/utils/getWeekdayName', () => {
+describe('packages/date-utils/getWeekdayName', () => {
   test('default (English)', () => {
     expect(getWeekdayName(0)).toEqual(
       expect.objectContaining({
diff --git a/packages/date-picker/src/shared/utils/getWeekdayName/index.ts b/packages/date-utils/src/getWeekdayName/getWeekdayName.ts
similarity index 92%
rename from packages/date-picker/src/shared/utils/getWeekdayName/index.ts
rename to packages/date-utils/src/getWeekdayName/getWeekdayName.ts
index ab7b62bea4..08b8dfddc7 100644
--- a/packages/date-picker/src/shared/utils/getWeekdayName/index.ts
+++ b/packages/date-utils/src/getWeekdayName/getWeekdayName.ts
@@ -1,8 +1,8 @@
 import { truncate } from 'lodash';
 
-import { Month } from '../../constants';
-import { WeekdayObject } from '../../types';
+import { Month } from '../constants';
 import { normalizeLocale } from '../normalizeLocale';
+import { WeekdayObject } from '../types';
 
 export const getWeekdayName = (
   day: number,
diff --git a/packages/date-utils/src/getWeekdayName/index.ts b/packages/date-utils/src/getWeekdayName/index.ts
new file mode 100644
index 0000000000..4613d86ab2
--- /dev/null
+++ b/packages/date-utils/src/getWeekdayName/index.ts
@@ -0,0 +1 @@
+export { getWeekdayName } from './getWeekdayName';
diff --git a/packages/date-picker/src/shared/utils/getWeeksArray/getWeeksArray.spec.ts b/packages/date-utils/src/getWeeksArray/getWeeksArray.spec.ts
similarity index 99%
rename from packages/date-picker/src/shared/utils/getWeeksArray/getWeeksArray.spec.ts
rename to packages/date-utils/src/getWeeksArray/getWeeksArray.spec.ts
index e733758726..3db53666c8 100644
--- a/packages/date-picker/src/shared/utils/getWeeksArray/getWeeksArray.spec.ts
+++ b/packages/date-utils/src/getWeeksArray/getWeeksArray.spec.ts
@@ -1,10 +1,10 @@
 import { isNull } from 'lodash';
 
-import { Month } from '../../constants';
+import { Month } from '../constants';
 
 import { getWeeksArray } from '.';
 
-describe('packages/date-picker/utils/getWeeksArray', () => {
+describe('packages/date-utils/getWeeksArray', () => {
   test('starts the week on the correct day for the locale', () => {
     const month = new Date(Date.UTC(2023, Month.August, 1));
     const arr = getWeeksArray(month, { locale: 'en-US' });
diff --git a/packages/date-picker/src/shared/utils/getWeeksArray/index.ts b/packages/date-utils/src/getWeeksArray/getWeeksArray.ts
similarity index 89%
rename from packages/date-picker/src/shared/utils/getWeeksArray/index.ts
rename to packages/date-utils/src/getWeeksArray/getWeeksArray.ts
index 98670fd0d9..c62018256a 100644
--- a/packages/date-picker/src/shared/utils/getWeeksArray/index.ts
+++ b/packages/date-utils/src/getWeeksArray/getWeeksArray.ts
@@ -3,13 +3,14 @@ import fill from 'lodash/fill';
 import range from 'lodash/range';
 import { getWeekStartByLocale } from 'weekstart';
 
-import { daysPerWeek } from '../../constants';
-import { BaseDatePickerProps } from '../../types';
+import { daysPerWeek } from '../constants';
 import { getDaysInUTCMonth } from '../getDaysInUTCMonth';
 import { setToUTCMidnight } from '../setToUTCMidnight';
+import { LocaleString } from '../types';
 
-interface GetWeeksArrayOptions
-  extends Required<Pick<BaseDatePickerProps, 'locale'>> {}
+interface GetWeeksArrayOptions {
+  locale: LocaleString;
+}
 
 /**
  * Returns a 7x5 (or 7x6) 2D array of Dates for the given month
diff --git a/packages/date-utils/src/getWeeksArray/index.ts b/packages/date-utils/src/getWeeksArray/index.ts
new file mode 100644
index 0000000000..c01cda8ebc
--- /dev/null
+++ b/packages/date-utils/src/getWeeksArray/index.ts
@@ -0,0 +1 @@
+export { getWeeksArray } from './getWeeksArray';
diff --git a/packages/date-utils/src/index.ts b/packages/date-utils/src/index.ts
new file mode 100644
index 0000000000..c58f5210e8
--- /dev/null
+++ b/packages/date-utils/src/index.ts
@@ -0,0 +1,34 @@
+export { addDaysUTC } from './addDaysUTC';
+export { addMonthsUTC } from './addMonthsUTC';
+export * from './constants';
+export { getDaysInUTCMonth } from './getDaysInUTCMonth';
+export { getFirstOfMonth } from './getFirstOfMonth';
+export { getFullMonthLabel } from './getFullMonthLabel';
+export { getISODate } from './getISODate';
+export { getLastOfMonth } from './getLastOfMonth';
+export { getLocaleMonths } from './getLocaleMonths';
+export { getLocaleWeekdays } from './getLocaleWeekdays';
+export { getMonthIndex } from './getMonthIndex';
+export { getMonthName } from './getMonthName';
+export { getUTCDateString } from './getUTCDateString';
+export { getWeekdayName } from './getWeekdayName';
+export { getWeeksArray } from './getWeeksArray';
+export { isCurrentUTCDay } from './isCurrentUTCDay';
+export { isOnOrAfter } from './isOnOrAfter';
+export { isOnOrBefore } from './isOnOrBefore';
+export { isSameTZDay } from './isSameTZDay';
+export { isSameUTCDay } from './isSameUTCDay';
+export { isSameUTCMonth } from './isSameUTCMonth';
+export { isSameUTCRange } from './isSameUTCRange';
+export { isTodayTZ } from './isTodayTZ';
+export { isValidDate } from './isValidDate';
+export { isValidLocale } from './isValidLocale';
+export { maxDate } from './maxDate';
+export { minDate } from './minDate';
+export { newUTC } from './newUTC';
+export { setToUTCMidnight } from './setToUTCMidnight';
+export { setUTCDate } from './setUTCDate';
+export { setUTCMonth } from './setUTCMonth';
+export { setUTCYear } from './setUTCYear';
+export { toDate } from './toDate';
+export * from './types';
diff --git a/packages/date-utils/src/isCurrentUTCDay/index.ts b/packages/date-utils/src/isCurrentUTCDay/index.ts
new file mode 100644
index 0000000000..9a89a3cdeb
--- /dev/null
+++ b/packages/date-utils/src/isCurrentUTCDay/index.ts
@@ -0,0 +1 @@
+export { isCurrentUTCDay } from './isCurrentUTCDay';
diff --git a/packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.spec.ts b/packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.spec.ts
new file mode 100644
index 0000000000..698fcb4364
--- /dev/null
+++ b/packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.spec.ts
@@ -0,0 +1,24 @@
+import { Month } from '../constants';
+import { newUTC } from '../newUTC';
+
+import { isCurrentUTCDay } from '.';
+
+describe('packages/date-utils/isCurrentUTCDay', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  test('returns true when given UTC dates', () => {
+    const midnightUTC = newUTC(2020, Month.December, 25, 0, 0);
+    const elevenUTC = newUTC(2020, Month.December, 25, 23, 59);
+    jest.setSystemTime(midnightUTC);
+    expect(isCurrentUTCDay(elevenUTC)).toBe(true);
+  });
+
+  test('returns false when different UTC dates', () => {
+    const midnightUTC = newUTC(2020, Month.December, 25, 0, 0);
+    const elevenUTC_prev = newUTC(2020, Month.December, 24, 23, 59);
+    jest.setSystemTime(midnightUTC);
+    expect(isCurrentUTCDay(elevenUTC_prev)).toBe(false);
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/isCurrentUTCDay/index.ts b/packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/isCurrentUTCDay/index.ts
rename to packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.ts
diff --git a/packages/date-utils/src/isOnOrAfter/index.ts b/packages/date-utils/src/isOnOrAfter/index.ts
new file mode 100644
index 0000000000..e557e99838
--- /dev/null
+++ b/packages/date-utils/src/isOnOrAfter/index.ts
@@ -0,0 +1 @@
+export { isOnOrAfter } from './isOnOrAfter';
diff --git a/packages/date-utils/src/isOnOrAfter/isOnOrAfter.spec.ts b/packages/date-utils/src/isOnOrAfter/isOnOrAfter.spec.ts
new file mode 100644
index 0000000000..9d744b0dcc
--- /dev/null
+++ b/packages/date-utils/src/isOnOrAfter/isOnOrAfter.spec.ts
@@ -0,0 +1,22 @@
+import { Month } from '../constants';
+import { newUTC } from '../newUTC';
+
+import { isOnOrAfter } from '.';
+
+describe('packages/date-utils/isOnOrAfter', () => {
+  const jan = newUTC(2023, Month.January, 1);
+  const jul = newUTC(2023, Month.July, 5);
+  const dec = newUTC(2023, Month.December, 26);
+
+  test('d1 is after as d2', () => {
+    expect(isOnOrAfter(dec, jul)).toBe(true);
+  });
+
+  test('d1 is same as d2', () => {
+    expect(isOnOrAfter(jul, jul)).toBe(true);
+  });
+
+  test('d1 is before d2', () => {
+    expect(isOnOrAfter(jan, jul)).toBe(false);
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/isOnOrAfter/index.ts b/packages/date-utils/src/isOnOrAfter/isOnOrAfter.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/isOnOrAfter/index.ts
rename to packages/date-utils/src/isOnOrAfter/isOnOrAfter.ts
diff --git a/packages/date-utils/src/isOnOrBefore/index.ts b/packages/date-utils/src/isOnOrBefore/index.ts
new file mode 100644
index 0000000000..b31747156b
--- /dev/null
+++ b/packages/date-utils/src/isOnOrBefore/index.ts
@@ -0,0 +1 @@
+export { isOnOrBefore } from './isOnOrBefore';
diff --git a/packages/date-utils/src/isOnOrBefore/isOnOrBefore.spec.ts b/packages/date-utils/src/isOnOrBefore/isOnOrBefore.spec.ts
new file mode 100644
index 0000000000..d0135000f5
--- /dev/null
+++ b/packages/date-utils/src/isOnOrBefore/isOnOrBefore.spec.ts
@@ -0,0 +1,22 @@
+import { Month } from '../constants';
+import { newUTC } from '../newUTC';
+
+import { isOnOrBefore } from '.';
+
+describe('packages/date-utils/isOnOrBefore', () => {
+  const jan = newUTC(2023, Month.January, 1);
+  const jul = newUTC(2023, Month.July, 5);
+  const dec = newUTC(2023, Month.December, 26);
+
+  test('d1 is before d2', () => {
+    expect(isOnOrBefore(jan, jul)).toBe(true);
+  });
+
+  test('d1 is same as d2', () => {
+    expect(isOnOrBefore(jul, jul)).toBe(true);
+  });
+
+  test('d1 is after as d2', () => {
+    expect(isOnOrBefore(dec, jul)).toBe(false);
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/isOnOrBefore/index.ts b/packages/date-utils/src/isOnOrBefore/isOnOrBefore.ts
similarity index 93%
rename from packages/date-picker/src/shared/utils/isOnOrBefore/index.ts
rename to packages/date-utils/src/isOnOrBefore/isOnOrBefore.ts
index 46d816fdf0..3fcc704466 100644
--- a/packages/date-picker/src/shared/utils/isOnOrBefore/index.ts
+++ b/packages/date-utils/src/isOnOrBefore/isOnOrBefore.ts
@@ -2,7 +2,6 @@ import { isBefore } from 'date-fns';
 
 import { isSameUTCDay } from '../isSameUTCDay';
 
-// TODO: tests
 export const isOnOrBefore = (day: Date, dayToCompare: Date) => {
   return isSameUTCDay(day, dayToCompare) || isBefore(day, dayToCompare);
 };
diff --git a/packages/date-utils/src/isSameTZDay/index.ts b/packages/date-utils/src/isSameTZDay/index.ts
new file mode 100644
index 0000000000..4a813b593c
--- /dev/null
+++ b/packages/date-utils/src/isSameTZDay/index.ts
@@ -0,0 +1 @@
+export { isSameTZDay } from './isSameTZDay';
diff --git a/packages/date-picker/src/shared/utils/isSameTZDay/isSameTZDay.spec.ts b/packages/date-utils/src/isSameTZDay/isSameTZDay.spec.ts
similarity index 97%
rename from packages/date-picker/src/shared/utils/isSameTZDay/isSameTZDay.spec.ts
rename to packages/date-utils/src/isSameTZDay/isSameTZDay.spec.ts
index 38ba902462..ad74ecefd5 100644
--- a/packages/date-picker/src/shared/utils/isSameTZDay/isSameTZDay.spec.ts
+++ b/packages/date-utils/src/isSameTZDay/isSameTZDay.spec.ts
@@ -1,8 +1,8 @@
-import { Month } from '../../constants';
+import { Month } from '../constants';
 
 import { isSameTZDay } from './index';
 
-describe('packages/date-picker/utils/isSameTZDay', () => {
+describe('packages/date-utils/isSameTZDay', () => {
   const utc24 = new Date(Date.UTC(2023, Month.December, 24, 0, 0, 0));
   const utc25 = new Date(Date.UTC(2023, Month.December, 25, 0, 0, 0));
   const utc26 = new Date(Date.UTC(2023, Month.December, 26, 0, 0, 0));
diff --git a/packages/date-picker/src/shared/utils/isSameTZDay/index.ts b/packages/date-utils/src/isSameTZDay/isSameTZDay.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/isSameTZDay/index.ts
rename to packages/date-utils/src/isSameTZDay/isSameTZDay.ts
diff --git a/packages/date-utils/src/isSameUTCDay/index.ts b/packages/date-utils/src/isSameUTCDay/index.ts
new file mode 100644
index 0000000000..e345ca51dd
--- /dev/null
+++ b/packages/date-utils/src/isSameUTCDay/index.ts
@@ -0,0 +1 @@
+export { isSameUTCDay } from './isSameUTCDay';
diff --git a/packages/date-picker/src/shared/utils/isSameUTCDay/isSameUTCDay.spec.ts b/packages/date-utils/src/isSameUTCDay/isSameUTCDay.spec.ts
similarity index 96%
rename from packages/date-picker/src/shared/utils/isSameUTCDay/isSameUTCDay.spec.ts
rename to packages/date-utils/src/isSameUTCDay/isSameUTCDay.spec.ts
index b3df30bb3a..256bda59f9 100644
--- a/packages/date-picker/src/shared/utils/isSameUTCDay/isSameUTCDay.spec.ts
+++ b/packages/date-utils/src/isSameUTCDay/isSameUTCDay.spec.ts
@@ -2,7 +2,7 @@ import tzMock from 'timezone-mock';
 
 import { isSameUTCDay } from '.';
 
-describe('packages/date-picker/utils/isSameUTCDay', () => {
+describe('packages/date-utils/isSameUTCDay', () => {
   beforeEach(() => {
     tzMock.register('US/Eastern');
   });
diff --git a/packages/date-picker/src/shared/utils/isSameUTCDay/index.ts b/packages/date-utils/src/isSameUTCDay/isSameUTCDay.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/isSameUTCDay/index.ts
rename to packages/date-utils/src/isSameUTCDay/isSameUTCDay.ts
diff --git a/packages/date-utils/src/isSameUTCMonth/index.ts b/packages/date-utils/src/isSameUTCMonth/index.ts
new file mode 100644
index 0000000000..c6482178a7
--- /dev/null
+++ b/packages/date-utils/src/isSameUTCMonth/index.ts
@@ -0,0 +1 @@
+export { isSameUTCMonth } from './isSameUTCMonth';
diff --git a/packages/date-picker/src/shared/utils/isSameUTCMonth/isSameUTCMonth.spec.ts b/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.spec.ts
similarity index 95%
rename from packages/date-picker/src/shared/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
rename to packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.spec.ts
index f90c1cac57..8e648e00b9 100644
--- a/packages/date-picker/src/shared/utils/isSameUTCMonth/isSameUTCMonth.spec.ts
+++ b/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.spec.ts
@@ -1,10 +1,10 @@
 import tzMock from 'timezone-mock';
 
-import { Month } from '../../constants';
+import { Month } from '../constants';
 
 import { isSameUTCMonth } from '.';
 
-describe('packages/date-picker/utils/isSameUTCMonth', () => {
+describe('packages/date-utils/isSameUTCMonth', () => {
   beforeEach(() => {
     tzMock.register('US/Eastern');
   });
diff --git a/packages/date-picker/src/shared/utils/isSameUTCMonth/index.ts b/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/isSameUTCMonth/index.ts
rename to packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.ts
diff --git a/packages/date-utils/src/isSameUTCRange/index.ts b/packages/date-utils/src/isSameUTCRange/index.ts
new file mode 100644
index 0000000000..014a4a4a2d
--- /dev/null
+++ b/packages/date-utils/src/isSameUTCRange/index.ts
@@ -0,0 +1 @@
+export { isSameUTCRange } from './isSameUTCRange';
diff --git a/packages/date-utils/src/isSameUTCRange/isSameUTCRange.spec.ts b/packages/date-utils/src/isSameUTCRange/isSameUTCRange.spec.ts
new file mode 100644
index 0000000000..efb237182b
--- /dev/null
+++ b/packages/date-utils/src/isSameUTCRange/isSameUTCRange.spec.ts
@@ -0,0 +1,84 @@
+import { Month } from '../constants';
+import { newUTC } from '../newUTC';
+
+import { isSameUTCRange } from '.';
+
+describe('packages/date-utils/isSameUTCRange', () => {
+  test('same start UTC, same end UTC', () => {
+    expect(
+      isSameUTCRange(
+        [
+          newUTC(2020, Month.June, 15, 0, 0),
+          newUTC(2020, Month.July, 15, 0, 0),
+        ],
+        [
+          newUTC(2020, Month.June, 15, 23, 0),
+          newUTC(2020, Month.July, 15, 23, 0),
+        ],
+      ),
+    ).toBe(true);
+  });
+  test('same start UTC, different end UTC', () => {
+    expect(
+      isSameUTCRange(
+        [
+          newUTC(2020, Month.June, 15, 0, 0),
+          newUTC(2020, Month.July, 15, 0, 0),
+        ],
+        [
+          newUTC(2020, Month.June, 15, 23, 0),
+          newUTC(2020, Month.July, 14, 23, 0),
+        ],
+      ),
+    ).toBe(false);
+  });
+  test('different start UTC, same end UTC', () => {
+    expect(
+      isSameUTCRange(
+        [
+          newUTC(2020, Month.June, 15, 0, 0),
+          newUTC(2020, Month.July, 15, 0, 0),
+        ],
+        [
+          newUTC(2020, Month.June, 14, 23, 0),
+          newUTC(2020, Month.July, 15, 23, 0),
+        ],
+      ),
+    ).toBe(false);
+  });
+  test('different start UTC, different end UTC', () => {
+    expect(
+      isSameUTCRange(
+        [
+          newUTC(2020, Month.June, 15, 0, 0),
+          newUTC(2020, Month.July, 15, 0, 0),
+        ],
+        [
+          newUTC(2020, Month.June, 14, 23, 0),
+          newUTC(2020, Month.July, 14, 23, 0),
+        ],
+      ),
+    ).toBe(false);
+  });
+
+  test('undefined start', () => {
+    expect(
+      isSameUTCRange(undefined, [
+        newUTC(2020, Month.June, 15, 23, 0),
+        newUTC(2020, Month.July, 14, 23, 0),
+      ]),
+    ).toBe(false);
+  });
+
+  test('undefined end', () => {
+    expect(
+      isSameUTCRange(
+        [
+          newUTC(2020, Month.June, 15, 23, 0),
+          newUTC(2020, Month.July, 14, 23, 0),
+        ],
+        undefined,
+      ),
+    ).toBe(false);
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/isSameUTCRange/index.ts b/packages/date-utils/src/isSameUTCRange/isSameUTCRange.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/isSameUTCRange/index.ts
rename to packages/date-utils/src/isSameUTCRange/isSameUTCRange.ts
diff --git a/packages/date-utils/src/isTodayTZ/index.ts b/packages/date-utils/src/isTodayTZ/index.ts
new file mode 100644
index 0000000000..f8f3937d4a
--- /dev/null
+++ b/packages/date-utils/src/isTodayTZ/index.ts
@@ -0,0 +1 @@
+export { isTodayTZ } from './isTodayTZ';
diff --git a/packages/date-picker/src/shared/utils/isTodayTZ/isTodayTZ.spec.ts b/packages/date-utils/src/isTodayTZ/isTodayTZ.spec.ts
similarity index 97%
rename from packages/date-picker/src/shared/utils/isTodayTZ/isTodayTZ.spec.ts
rename to packages/date-utils/src/isTodayTZ/isTodayTZ.spec.ts
index b627b827bb..e49ad73bbe 100644
--- a/packages/date-picker/src/shared/utils/isTodayTZ/isTodayTZ.spec.ts
+++ b/packages/date-utils/src/isTodayTZ/isTodayTZ.spec.ts
@@ -1,8 +1,8 @@
-import { Month } from '../../constants';
+import { Month } from '../constants';
 
 import { isTodayTZ } from '.';
 
-describe('packages/date-picker/utils/isTodayTZ', () => {
+describe('packages/date-utils/isTodayTZ', () => {
   const utc25 = new Date(Date.UTC(2023, Month.December, 25, 0, 0, 0));
 
   describe('NYC Client', () => {
diff --git a/packages/date-picker/src/shared/utils/isTodayTZ/index.ts b/packages/date-utils/src/isTodayTZ/isTodayTZ.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/isTodayTZ/index.ts
rename to packages/date-utils/src/isTodayTZ/isTodayTZ.ts
diff --git a/packages/date-utils/src/isValidDate/index.ts b/packages/date-utils/src/isValidDate/index.ts
new file mode 100644
index 0000000000..960580c147
--- /dev/null
+++ b/packages/date-utils/src/isValidDate/index.ts
@@ -0,0 +1,5 @@
+export {
+  isValidDate,
+  isValidDateObject,
+  isValidDateString,
+} from './isValidDate';
diff --git a/packages/date-picker/src/shared/utils/isValidDate/isValidDate.spec.ts b/packages/date-utils/src/isValidDate/isValidDate.spec.ts
similarity index 94%
rename from packages/date-picker/src/shared/utils/isValidDate/isValidDate.spec.ts
rename to packages/date-utils/src/isValidDate/isValidDate.spec.ts
index 97873594e8..854974cd24 100644
--- a/packages/date-picker/src/shared/utils/isValidDate/isValidDate.spec.ts
+++ b/packages/date-utils/src/isValidDate/isValidDate.spec.ts
@@ -1,6 +1,6 @@
 import { isValidDate, isValidDateString } from '.';
 
-describe('packages/date-picker/utils/isValidDate', () => {
+describe('packages/date-utils/isValidDate', () => {
   test('accepts Date objects', () => {
     expect(isValidDate(new Date())).toBe(true);
     expect(isValidDate(new Date(Date.UTC(2023, 1, 1)))).toBe(true);
diff --git a/packages/date-picker/src/shared/utils/isValidDate/index.ts b/packages/date-utils/src/isValidDate/isValidDate.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/isValidDate/index.ts
rename to packages/date-utils/src/isValidDate/isValidDate.ts
diff --git a/packages/date-utils/src/isValidLocale/index.ts b/packages/date-utils/src/isValidLocale/index.ts
new file mode 100644
index 0000000000..0ec39a386a
--- /dev/null
+++ b/packages/date-utils/src/isValidLocale/index.ts
@@ -0,0 +1 @@
+export { isValidLocale } from './isValidLocale';
diff --git a/packages/date-picker/src/shared/utils/isValidLocale/isValidLocale.spec.ts b/packages/date-utils/src/isValidLocale/isValidLocale.spec.ts
similarity index 88%
rename from packages/date-picker/src/shared/utils/isValidLocale/isValidLocale.spec.ts
rename to packages/date-utils/src/isValidLocale/isValidLocale.spec.ts
index 785281f658..0bb8201c4e 100644
--- a/packages/date-picker/src/shared/utils/isValidLocale/isValidLocale.spec.ts
+++ b/packages/date-utils/src/isValidLocale/isValidLocale.spec.ts
@@ -1,6 +1,6 @@
 import { isValidLocale } from '.';
 
-describe('packages/date-picker/utils/isValidLocale', () => {
+describe('packages/date-utils/isValidLocale', () => {
   test('en-US is valid', () => {
     expect(isValidLocale('en-US')).toBeTruthy();
   });
diff --git a/packages/date-picker/src/shared/utils/isValidLocale/index.ts b/packages/date-utils/src/isValidLocale/isValidLocale.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/isValidLocale/index.ts
rename to packages/date-utils/src/isValidLocale/isValidLocale.ts
diff --git a/packages/date-utils/src/maxDate/index.ts b/packages/date-utils/src/maxDate/index.ts
new file mode 100644
index 0000000000..a192be531d
--- /dev/null
+++ b/packages/date-utils/src/maxDate/index.ts
@@ -0,0 +1 @@
+export { maxDate } from './maxDate';
diff --git a/packages/date-utils/src/maxDate/maxDate.spec.ts b/packages/date-utils/src/maxDate/maxDate.spec.ts
new file mode 100644
index 0000000000..84f93cd79b
--- /dev/null
+++ b/packages/date-utils/src/maxDate/maxDate.spec.ts
@@ -0,0 +1,42 @@
+import { Month } from '../constants';
+import { newUTC } from '../newUTC';
+
+import { maxDate } from '.';
+
+describe('packages/date-utils/maxDate', () => {
+  test('returns the last date', () => {
+    expect(
+      maxDate([
+        newUTC(2020, Month.January, 1),
+        newUTC(2020, Month.January, 2),
+        newUTC(2020, Month.January, 3),
+      ]),
+    ).toEqual(newUTC(2020, Month.January, 3));
+  });
+
+  test('returns the last date within seconds', () => {
+    expect(
+      maxDate([
+        newUTC(2020, Month.January, 1, 12, 0, 0),
+        newUTC(2020, Month.January, 1, 12, 0, 1),
+        newUTC(2020, Month.January, 1, 11, 59, 59),
+      ]),
+    ).toEqual(newUTC(2020, Month.January, 1, 12, 0, 1));
+  });
+
+  test('when array elements are null/undefined', () => {
+    expect(
+      maxDate([
+        newUTC(2020, Month.January, 1),
+        null,
+        newUTC(2020, Month.January, 2),
+        undefined,
+        newUTC(2020, Month.January, 3),
+      ]),
+    ).toEqual(newUTC(2020, Month.January, 3));
+  });
+
+  test('returns undefined for invalid array', () => {
+    expect(maxDate([])).toBeUndefined();
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/maxDate/index.ts b/packages/date-utils/src/maxDate/maxDate.ts
similarity index 72%
rename from packages/date-picker/src/shared/utils/maxDate/index.ts
rename to packages/date-utils/src/maxDate/maxDate.ts
index e8e7eb023a..1c03db1073 100644
--- a/packages/date-picker/src/shared/utils/maxDate/index.ts
+++ b/packages/date-utils/src/maxDate/maxDate.ts
@@ -1,8 +1,10 @@
 import { max } from 'date-fns';
 
-import { isDefined } from '../isDefined';
+import { isDefined } from '@leafygreen-ui/lib';
 
-// TODO: tests
+/**
+ * Returns the fist date of an array of dates
+ */
 export const maxDate = (
   datesArray: Array<Date | null | undefined>,
 ): Date | undefined => {
diff --git a/packages/date-utils/src/minDate/index.ts b/packages/date-utils/src/minDate/index.ts
new file mode 100644
index 0000000000..134b93e96c
--- /dev/null
+++ b/packages/date-utils/src/minDate/index.ts
@@ -0,0 +1 @@
+export { minDate } from './minDate';
diff --git a/packages/date-utils/src/minDate/minDate.spec.ts b/packages/date-utils/src/minDate/minDate.spec.ts
new file mode 100644
index 0000000000..c66db2a908
--- /dev/null
+++ b/packages/date-utils/src/minDate/minDate.spec.ts
@@ -0,0 +1,42 @@
+import { Month } from '../constants';
+import { newUTC } from '../newUTC';
+
+import { minDate } from '.';
+
+describe('packages/date-utils/minDate', () => {
+  test('returns the first date', () => {
+    expect(
+      minDate([
+        newUTC(2020, Month.January, 1),
+        newUTC(2020, Month.January, 2),
+        newUTC(2020, Month.January, 3),
+      ]),
+    ).toEqual(newUTC(2020, Month.January, 1));
+  });
+
+  test('returns the first date within seconds', () => {
+    expect(
+      minDate([
+        newUTC(2020, Month.January, 1, 12, 0, 0),
+        newUTC(2020, Month.January, 1, 12, 0, 1),
+        newUTC(2020, Month.January, 1, 11, 59, 59),
+      ]),
+    ).toEqual(newUTC(2020, Month.January, 1, 11, 59, 59));
+  });
+
+  test('when array elements are null/undefined', () => {
+    expect(
+      minDate([
+        newUTC(2020, Month.January, 1),
+        null,
+        newUTC(2020, Month.January, 2),
+        undefined,
+        newUTC(2020, Month.January, 3),
+      ]),
+    ).toEqual(newUTC(2020, Month.January, 1));
+  });
+
+  test('returns undefined for invalid array', () => {
+    expect(minDate([])).toBeUndefined();
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/minDate/index.ts b/packages/date-utils/src/minDate/minDate.ts
similarity index 72%
rename from packages/date-picker/src/shared/utils/minDate/index.ts
rename to packages/date-utils/src/minDate/minDate.ts
index dc33c66e35..d7b83b35c4 100644
--- a/packages/date-picker/src/shared/utils/minDate/index.ts
+++ b/packages/date-utils/src/minDate/minDate.ts
@@ -1,8 +1,10 @@
 import { min } from 'date-fns';
 
-import { isDefined } from '../isDefined';
+import { isDefined } from '@leafygreen-ui/lib';
 
-// TODO: tests
+/**
+ * Returns the fist date of an array of dates
+ */
 export const minDate = (
   datesArray: Array<Date | null | undefined>,
 ): Date | undefined => {
diff --git a/packages/date-utils/src/newUTC/index.ts b/packages/date-utils/src/newUTC/index.ts
new file mode 100644
index 0000000000..f4d580eea4
--- /dev/null
+++ b/packages/date-utils/src/newUTC/index.ts
@@ -0,0 +1 @@
+export { newUTC } from './newUTC';
diff --git a/packages/date-picker/src/shared/utils/newUTC/newUTC.spec.ts b/packages/date-utils/src/newUTC/newUTC.spec.ts
similarity index 88%
rename from packages/date-picker/src/shared/utils/newUTC/newUTC.spec.ts
rename to packages/date-utils/src/newUTC/newUTC.spec.ts
index 9b31c31457..3f697f1f45 100644
--- a/packages/date-picker/src/shared/utils/newUTC/newUTC.spec.ts
+++ b/packages/date-utils/src/newUTC/newUTC.spec.ts
@@ -1,6 +1,6 @@
 import { newUTC } from '.';
 
-describe('packages/date-picker/utils/newUTC', () => {
+describe('packages/date-utils/newUTC', () => {
   test('creates a new UTC date', () => {
     const date = newUTC(2023, 11, 5);
     expect(date.getUTCDate()).toEqual(5);
diff --git a/packages/date-picker/src/shared/utils/newUTC/index.ts b/packages/date-utils/src/newUTC/newUTC.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/newUTC/index.ts
rename to packages/date-utils/src/newUTC/newUTC.ts
diff --git a/packages/date-utils/src/normalizeLocale/index.ts b/packages/date-utils/src/normalizeLocale/index.ts
new file mode 100644
index 0000000000..c9dfaf2d19
--- /dev/null
+++ b/packages/date-utils/src/normalizeLocale/index.ts
@@ -0,0 +1 @@
+export { normalizeLocale } from './normalizeLocale';
diff --git a/packages/date-picker/src/shared/utils/normalizeLocale/normalizeLocale.spec.ts b/packages/date-utils/src/normalizeLocale/normalizeLocale.spec.ts
similarity index 84%
rename from packages/date-picker/src/shared/utils/normalizeLocale/normalizeLocale.spec.ts
rename to packages/date-utils/src/normalizeLocale/normalizeLocale.spec.ts
index 171c0d7ad6..4b5a4c0ba5 100644
--- a/packages/date-picker/src/shared/utils/normalizeLocale/normalizeLocale.spec.ts
+++ b/packages/date-utils/src/normalizeLocale/normalizeLocale.spec.ts
@@ -1,6 +1,6 @@
 import { normalizeLocale } from '.';
 
-describe('packages/date-picker/utils/normalizeLocale', () => {
+describe('packages/date-utils/normalizeLocale', () => {
   test('pass through valid locale', () => {
     expect(normalizeLocale('de-DE')).toBe('de-DE');
   });
diff --git a/packages/date-picker/src/shared/utils/normalizeLocale/index.ts b/packages/date-utils/src/normalizeLocale/normalizeLocale.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/normalizeLocale/index.ts
rename to packages/date-utils/src/normalizeLocale/normalizeLocale.ts
diff --git a/packages/date-utils/src/setToUTCMidnight/index.ts b/packages/date-utils/src/setToUTCMidnight/index.ts
new file mode 100644
index 0000000000..85b05b93ae
--- /dev/null
+++ b/packages/date-utils/src/setToUTCMidnight/index.ts
@@ -0,0 +1 @@
+export { setToUTCMidnight } from './setToUTCMidnight';
diff --git a/packages/date-picker/src/shared/utils/setToUTCMidnight/setToUTCMidnight.spec.ts b/packages/date-utils/src/setToUTCMidnight/setToUTCMidnight.spec.ts
similarity index 84%
rename from packages/date-picker/src/shared/utils/setToUTCMidnight/setToUTCMidnight.spec.ts
rename to packages/date-utils/src/setToUTCMidnight/setToUTCMidnight.spec.ts
index 854b340a34..79ba29569a 100644
--- a/packages/date-picker/src/shared/utils/setToUTCMidnight/setToUTCMidnight.spec.ts
+++ b/packages/date-utils/src/setToUTCMidnight/setToUTCMidnight.spec.ts
@@ -1,6 +1,6 @@
 import { setToUTCMidnight } from '.';
 
-describe('packages/date-picker/utils/setToUTCMidnight', () => {
+describe('packages/date-utils/setToUTCMidnight', () => {
   test('sets a date to UTC midnight', () => {
     const date = new Date();
     const midnight = setToUTCMidnight(date);
diff --git a/packages/date-picker/src/shared/utils/setToUTCMidnight/index.ts b/packages/date-utils/src/setToUTCMidnight/setToUTCMidnight.ts
similarity index 53%
rename from packages/date-picker/src/shared/utils/setToUTCMidnight/index.ts
rename to packages/date-utils/src/setToUTCMidnight/setToUTCMidnight.ts
index 63667fdcd6..fbf97f19ba 100644
--- a/packages/date-picker/src/shared/utils/setToUTCMidnight/index.ts
+++ b/packages/date-utils/src/setToUTCMidnight/setToUTCMidnight.ts
@@ -9,13 +9,3 @@ export const setToUTCMidnight = (date: Date): Date => {
   midnight.setUTCMilliseconds(0);
   return midnight;
 };
-
-/** @deprecated */
-export const setToMidnight = (date: Date): Date => {
-  const midnight = new Date(date);
-  midnight.setHours(0);
-  midnight.setMinutes(0);
-  midnight.setSeconds(0);
-  midnight.setMilliseconds(0);
-  return midnight;
-};
diff --git a/packages/date-utils/src/setUTCDate/index.ts b/packages/date-utils/src/setUTCDate/index.ts
new file mode 100644
index 0000000000..c2f7eaa632
--- /dev/null
+++ b/packages/date-utils/src/setUTCDate/index.ts
@@ -0,0 +1 @@
+export { setUTCDate } from './setUTCDate';
diff --git a/packages/date-utils/src/setUTCDate/setUTCDate.spec.ts b/packages/date-utils/src/setUTCDate/setUTCDate.spec.ts
new file mode 100644
index 0000000000..3c99462d8c
--- /dev/null
+++ b/packages/date-utils/src/setUTCDate/setUTCDate.spec.ts
@@ -0,0 +1,22 @@
+import { Month } from '../constants';
+import { newUTC } from '../newUTC';
+
+import { setUTCDate } from '.';
+
+describe('packages/date-utils/setUTCDate', () => {
+  test('at noon', () => {
+    expect(setUTCDate(newUTC(2020, Month.July, 4, 12, 0), 5)).toEqual(
+      newUTC(2020, Month.July, 5, 12, 0, 0),
+    );
+  });
+  test('at midnight', () => {
+    expect(setUTCDate(newUTC(2020, Month.July, 4, 0, 0), 5)).toEqual(
+      newUTC(2020, Month.July, 5, 0, 0, 0),
+    );
+  });
+  test('at 11:59pm', () => {
+    expect(setUTCDate(newUTC(2020, Month.July, 4, 23, 59), 5)).toEqual(
+      newUTC(2020, Month.July, 5, 23, 59),
+    );
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/setUTCDate/index.ts b/packages/date-utils/src/setUTCDate/setUTCDate.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/setUTCDate/index.ts
rename to packages/date-utils/src/setUTCDate/setUTCDate.ts
diff --git a/packages/date-utils/src/setUTCMonth/index.ts b/packages/date-utils/src/setUTCMonth/index.ts
new file mode 100644
index 0000000000..f488906e8d
--- /dev/null
+++ b/packages/date-utils/src/setUTCMonth/index.ts
@@ -0,0 +1 @@
+export { setUTCMonth } from './setUTCMonth';
diff --git a/packages/date-picker/src/shared/utils/setUTCMonth/setUTCMonth.spec.ts b/packages/date-utils/src/setUTCMonth/setUTCMonth.spec.ts
similarity index 92%
rename from packages/date-picker/src/shared/utils/setUTCMonth/setUTCMonth.spec.ts
rename to packages/date-utils/src/setUTCMonth/setUTCMonth.spec.ts
index 1d9b5349a8..9ec5e95b1e 100644
--- a/packages/date-picker/src/shared/utils/setUTCMonth/setUTCMonth.spec.ts
+++ b/packages/date-utils/src/setUTCMonth/setUTCMonth.spec.ts
@@ -1,10 +1,10 @@
 import tzMock from 'timezone-mock';
 
-import { Month } from '../../constants';
+import { Month } from '../constants';
 
 import { setUTCMonth } from '.';
 
-describe('packages/date-picker/utils/setUTCMonth', () => {
+describe('packages/date-utils/setUTCMonth', () => {
   test('sets the month', () => {
     const d = new Date(Date.UTC(2023, Month.September, 10));
     const d2 = setUTCMonth(d, Month.March);
diff --git a/packages/date-picker/src/shared/utils/setUTCMonth/index.ts b/packages/date-utils/src/setUTCMonth/setUTCMonth.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/setUTCMonth/index.ts
rename to packages/date-utils/src/setUTCMonth/setUTCMonth.ts
diff --git a/packages/date-utils/src/setUTCYear/index.ts b/packages/date-utils/src/setUTCYear/index.ts
new file mode 100644
index 0000000000..f2e1e60978
--- /dev/null
+++ b/packages/date-utils/src/setUTCYear/index.ts
@@ -0,0 +1 @@
+export { setUTCYear } from './setUTCYear';
diff --git a/packages/date-utils/src/setUTCYear/setUTCYear.spec.ts b/packages/date-utils/src/setUTCYear/setUTCYear.spec.ts
new file mode 100644
index 0000000000..1354ff189b
--- /dev/null
+++ b/packages/date-utils/src/setUTCYear/setUTCYear.spec.ts
@@ -0,0 +1,22 @@
+import { Month } from '../constants';
+import { newUTC } from '../newUTC';
+
+import { setUTCYear } from '.';
+
+describe('packages/date-utils/setUTCYear', () => {
+  test('sets the year of a date', () => {
+    expect(setUTCYear(newUTC(2020, Month.July, 5), 2023)).toEqual(
+      newUTC(2023, Month.July, 5),
+    );
+  });
+  test('on December 31', () => {
+    expect(setUTCYear(newUTC(2020, Month.December, 31, 23, 59), 2023)).toEqual(
+      newUTC(2023, Month.December, 31, 23, 59),
+    );
+  });
+  test('on January 1', () => {
+    expect(setUTCYear(newUTC(2020, Month.January, 1, 0, 0), 2023)).toEqual(
+      newUTC(2023, Month.January, 1, 0, 0),
+    );
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/setUTCYear/index.ts b/packages/date-utils/src/setUTCYear/setUTCYear.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/setUTCYear/index.ts
rename to packages/date-utils/src/setUTCYear/setUTCYear.ts
diff --git a/packages/date-utils/src/sortDates/index.ts b/packages/date-utils/src/sortDates/index.ts
new file mode 100644
index 0000000000..7a51618383
--- /dev/null
+++ b/packages/date-utils/src/sortDates/index.ts
@@ -0,0 +1 @@
+export { sortDates } from './sortDates';
diff --git a/packages/date-picker/src/shared/utils/sortDates/sortDates.spec.ts b/packages/date-utils/src/sortDates/sortDates.spec.ts
similarity index 91%
rename from packages/date-picker/src/shared/utils/sortDates/sortDates.spec.ts
rename to packages/date-utils/src/sortDates/sortDates.spec.ts
index b86b1ae3fb..4ef3d88a5a 100644
--- a/packages/date-picker/src/shared/utils/sortDates/sortDates.spec.ts
+++ b/packages/date-utils/src/sortDates/sortDates.spec.ts
@@ -1,9 +1,9 @@
-import { Month } from '../../constants';
+import { Month } from '../constants';
 import { newUTC } from '../newUTC';
 
 import { sortDates } from '.';
 
-describe('packages/date-picker/utils/sortDates', () => {
+describe('packages/date-utils/sortDates', () => {
   const testDates = [
     newUTC(2023, Month.September, 10),
     newUTC(2020, Month.March, 13),
diff --git a/packages/date-picker/src/shared/utils/sortDates/index.ts b/packages/date-utils/src/sortDates/sortDates.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/sortDates/index.ts
rename to packages/date-utils/src/sortDates/sortDates.ts
diff --git a/packages/date-utils/src/toDate/index.ts b/packages/date-utils/src/toDate/index.ts
new file mode 100644
index 0000000000..7ebff98224
--- /dev/null
+++ b/packages/date-utils/src/toDate/index.ts
@@ -0,0 +1 @@
+export { toDate } from './toDate';
diff --git a/packages/date-picker/src/shared/utils/toDate/toDate.spec.ts b/packages/date-utils/src/toDate/toDate.spec.ts
similarity index 93%
rename from packages/date-picker/src/shared/utils/toDate/toDate.spec.ts
rename to packages/date-utils/src/toDate/toDate.spec.ts
index 6e7dff4f81..f375f22d0c 100644
--- a/packages/date-picker/src/shared/utils/toDate/toDate.spec.ts
+++ b/packages/date-utils/src/toDate/toDate.spec.ts
@@ -1,6 +1,6 @@
 import { toDate } from '.';
 
-describe('packages/date-picker/utils/toDate', () => {
+describe('packages/date-utils/toDate', () => {
   test('Date', () => {
     const d1 = new Date();
     const d2 = toDate(d1);
diff --git a/packages/date-picker/src/shared/utils/toDate/index.ts b/packages/date-utils/src/toDate/toDate.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/toDate/index.ts
rename to packages/date-utils/src/toDate/toDate.ts
diff --git a/packages/date-utils/src/types.ts b/packages/date-utils/src/types.ts
new file mode 100644
index 0000000000..85576dd80d
--- /dev/null
+++ b/packages/date-utils/src/types.ts
@@ -0,0 +1,24 @@
+export type DateType = Date | null;
+export type DateRangeType = [DateType, DateType];
+
+export type LocaleString = 'iso8601' | string;
+
+export interface MonthObject {
+  long: string;
+  short: string;
+}
+
+/**
+ * Object representing the abbreviations of a given weekday.
+ * Abbreviation formats defined in Unicode: https://www.unicode.org/reports/tr35/tr35-67/tr35-dates.html#dfst-weekday
+ */
+export interface WeekdayObject {
+  /** The long-form weekday name (e.g. Tuesday)*/
+  long: string;
+  /** An abbreviated weekday name (e.g. Tue) */
+  abbr: string;
+  /** A shorter weekday name (e.g. Tu)*/
+  short?: string;
+  /** The shortest weekday name (e.g. T) */
+  narrow: string;
+}
diff --git a/packages/date-utils/tsconfig.json b/packages/date-utils/tsconfig.json
new file mode 100644
index 0000000000..72a0203d44
--- /dev/null
+++ b/packages/date-utils/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "extends": "@lg-tools/build/config/package.tsconfig.json",
+   "compilerOptions": {
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "rootDir": "src",
+    "baseUrl": ".",
+    "paths": {
+      "@leafygreen-ui/icon/dist/*": ["../icon/src/generated/*"],
+      "@leafygreen-ui/*": ["../*/src"]
+    }
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": ["**/*.spec.*", "**/*.story.*"],
+  "references": [
+    {
+      "path": "../emotion"
+    },
+    {
+      "path": "../lib"
+    }
+  ]
+}
diff --git a/packages/date-picker/src/shared/utils/cloneReverse/cloneReverse.spec.ts b/packages/lib/src/helpers/cloneReverse/cloneReverse.spec.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/cloneReverse/cloneReverse.spec.ts
rename to packages/lib/src/helpers/cloneReverse/cloneReverse.spec.ts
diff --git a/packages/date-picker/src/shared/utils/cloneReverse/index.ts b/packages/lib/src/helpers/cloneReverse/index.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/cloneReverse/index.ts
rename to packages/lib/src/helpers/cloneReverse/index.ts
diff --git a/packages/lib/src/helpers/index.ts b/packages/lib/src/helpers/index.ts
index 48eb071ecb..c76bd3d9cb 100644
--- a/packages/lib/src/helpers/index.ts
+++ b/packages/lib/src/helpers/index.ts
@@ -1,5 +1,8 @@
-export { pickAndOmit } from './pickAndOmit';
-export { consoleOnce } from './consoleOnce';
 export { allEqual } from './allEqual';
+export { cloneReverse } from './cloneReverse';
+export { consoleOnce } from './consoleOnce';
+export { isDefined } from './isDefined';
+export { isNotZeroLike, isZeroLike } from './isZeroLike';
+export { pickAndOmit } from './pickAndOmit';
 export { rollover } from './rollover';
 export { truncateStart } from './truncateStart';
diff --git a/packages/date-picker/src/shared/utils/isDefined/index.ts b/packages/lib/src/helpers/isDefined/index.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/isDefined/index.ts
rename to packages/lib/src/helpers/isDefined/index.ts
diff --git a/packages/date-picker/src/shared/utils/isZeroLike/index.ts b/packages/lib/src/helpers/isZeroLike/index.ts
similarity index 100%
rename from packages/date-picker/src/shared/utils/isZeroLike/index.ts
rename to packages/lib/src/helpers/isZeroLike/index.ts
diff --git a/tools/test/config/jest.config.js b/tools/test/config/jest.config.js
index 669097cb49..3213e2bb57 100644
--- a/tools/test/config/jest.config.js
+++ b/tools/test/config/jest.config.js
@@ -1,13 +1,19 @@
 // For a detailed explanation regarding each configuration property, visit:
 // https://jestjs.io/docs/en/configuration.html
 
-// When referencing files in this package,
-// note we still need to declare the path relative to `<rootDir>`
+// Note: When referencing files in this package,
+// we still need to declare the path relative to `<rootDir>` (repository root)
 
 module.exports = {
   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',
-  coveragePathIgnorePatterns: ['/node_modules/', '/dist/', '/index.ts', '.svg'],
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '/dist/',
+    '.svg',
+    '/index.tsx?',
+    '.(d|json|md|spec|stories|styles|types).tsx?',
+  ],
 
   displayName: 'Client',
 
diff --git a/tools/test/src/index.ts b/tools/test/src/index.ts
index 5159f77a6e..e12c7f4c40 100755
--- a/tools/test/src/index.ts
+++ b/tools/test/src/index.ts
@@ -32,6 +32,15 @@ export const test = (
       : passThrough
     : [];
 
+  // Add coverage options
+  if (passThroughOptions.includes('--coverage')) {
+    const testDir = passThroughOptions.find(opt => !opt.startsWith('--'));
+    const dir = testDir ? `packages/${testDir}/src/` : '';
+    const coverageFlag =
+      '--collectCoverageFrom=' + dir + '**/*.{js,jsx,ts,tsx}';
+    passThroughOptions.push(coverageFlag);
+  }
+
   const configFile = getConfigFile(options);
   const jestBinary = getJestBinary(options);
 

From 128345f2b8b4472326b96d1defaeb765fa52d272 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Mon, 11 Dec 2023 16:49:20 -0500
Subject: [PATCH 324/351] Date Picker [LG-3887] fix page scroll (#2129)

* fix scroll

* fix propType
---
 packages/date-picker/src/DatePicker.stories.tsx            | 7 +++++--
 packages/date-picker/src/DatePicker/DatePicker.tsx         | 4 ++--
 .../src/DatePicker/DatePickerMenu/DatePickerMenu.tsx       | 4 ++++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
index 3cb5098433..6c67a7b781 100644
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -13,6 +13,7 @@ import {
   DatePickerContextProps,
   DatePickerProvider,
 } from './shared/components/DatePickerContext';
+import { MAX_DATE, MIN_DATE } from './shared/constants';
 import { getProviderPropsFromStoryContext } from './shared/testutils/getProviderPropsFromStoryContext';
 import { Locales, TimeZones } from './shared/testutils/testValues';
 import { AutoComplete } from './shared/types';
@@ -36,7 +37,7 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
   component: DatePicker,
   decorators: [ProviderWrapper],
   parameters: {
-    default: null,
+    default: 'LiveExample',
     controls: {
       exclude: [
         'handleValidation',
@@ -63,6 +64,8 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
     label: 'Pick a date',
     size: Size.Default,
     autoComplete: AutoComplete.Off,
+    min: MIN_DATE,
+    max: MAX_DATE,
   },
   argTypes: {
     baseFontSize: { control: 'select' },
@@ -80,7 +83,7 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
 
 export default meta;
 
-export const Basic: StoryFn<typeof DatePicker> = props => {
+export const LiveExample: StoryFn<typeof DatePicker> = props => {
   const [value, setValue] = useState<Date | null | undefined>();
 
   return (
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index c3d0cbf0a8..812f86676b 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -86,8 +86,8 @@ DatePicker.propTypes = {
   description: PropTypes.node,
   locale: PropTypes.string,
   timeZone: PropTypes.string,
-  min: PropTypes.string || PropTypes.instanceOf(Date),
-  max: PropTypes.string || PropTypes.instanceOf(Date),
+  min: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+  max: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
   baseFontSize: PropTypes.oneOf(Object.values(BaseFontSize)),
   disabled: PropTypes.bool,
   size: PropTypes.oneOf(Object.values(Size)),
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 1f9ecc000c..56dd3a23f5 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -185,21 +185,25 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
 
       switch (key) {
         case keyMap.ArrowLeft: {
+          e.preventDefault();
           nextHighlight = addDaysUTC(currentHighlight, -1);
           break;
         }
 
         case keyMap.ArrowRight: {
+          e.preventDefault();
           nextHighlight = addDaysUTC(currentHighlight, 1);
           break;
         }
 
         case keyMap.ArrowUp: {
+          e.preventDefault();
           nextHighlight = addDaysUTC(currentHighlight, -7);
           break;
         }
 
         case keyMap.ArrowDown: {
+          e.preventDefault();
           nextHighlight = addDaysUTC(currentHighlight, 7);
           break;
         }

From cf1ff453c10f4a09552aeda71e10b65386fb3c62 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Wed, 13 Dec 2023 11:33:51 -0500
Subject: [PATCH 325/351] Date picker timezone tests (#2134)

* mv eventContainingTargetValue, tabNTimes

* updates mockTimeZone to reset properly

* mv testing utils

* imports

* Update tsconfig.json

* rename testTimeZoneLabels, testLocales

* properly restore mocks

* adds todo tests

* update mock tz

* adds queryCellISODate test util

* Update DatePicker.spec.tsx

* adds TZ calendar cell click tests
---
 packages/date-picker/package.json             |   1 +
 .../date-picker/src/DatePicker.stories.tsx    |  15 +-
 .../src/DatePicker/DatePicker.spec.tsx        | 366 +++++++++++++-----
 .../src/DatePicker/DatePicker.testutils.tsx   |  11 +
 .../DatePickerMenu/DatePickerMenu.spec.tsx    |   7 +-
 .../DatePickerMenu/DatePickerMenu.stories.tsx |  20 +-
 .../CalendarGrid/CalendarGrid.stories.tsx     |   9 +-
 .../DateInputBox/DateInputBox.stories.tsx     |   6 +-
 .../date-picker/src/shared/testutils/index.ts |  14 +-
 .../shared/testutils/mockTimeZone/index.ts    |  62 ---
 .../mockTimeZone/mockTimeZone.spec.ts         |  51 ---
 packages/date-picker/tsconfig.json            |   5 +-
 packages/date-utils/package.json              |   2 +-
 packages/date-utils/src/index.ts              |   3 +
 packages/date-utils/src/testing/index.ts      |   2 +
 .../src/testing/mockTimeZone/index.ts         |  67 ++++
 .../testing/mockTimeZone/mockTimeZone.spec.ts |  64 +++
 .../src/testing}/testValues.ts                |  16 +-
 packages/date-utils/tsconfig.json             |   6 +-
 packages/testing-lib/package.json             |  10 +-
 .../src}/eventContainingTargetValue/index.ts  |   4 +-
 packages/testing-lib/src/index.ts             |   4 +-
 .../src}/tabNTimes/index.ts                   |   0
 23 files changed, 483 insertions(+), 262 deletions(-)
 delete mode 100644 packages/date-picker/src/shared/testutils/mockTimeZone/index.ts
 delete mode 100644 packages/date-picker/src/shared/testutils/mockTimeZone/mockTimeZone.spec.ts
 create mode 100644 packages/date-utils/src/testing/index.ts
 create mode 100644 packages/date-utils/src/testing/mockTimeZone/index.ts
 create mode 100644 packages/date-utils/src/testing/mockTimeZone/mockTimeZone.spec.ts
 rename packages/{date-picker/src/shared/testutils => date-utils/src/testing}/testValues.ts (75%)
 rename packages/{date-picker/src/shared/testutils => testing-lib/src}/eventContainingTargetValue/index.ts (66%)
 rename packages/{date-picker/src/shared/testutils => testing-lib/src}/tabNTimes/index.ts (100%)

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 9acdc0a6f7..629bc4f302 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -38,6 +38,7 @@
   "devDependencies": {
     "@leafygreen-ui/button": "^21.0.7",
     "@leafygreen-ui/modal":"^16.0.3",
+    "@leafygreen-ui/testing-lib": "^0.3.4",
     "mockdate": "^3.0.5",
     "storybook-mock-date-decorator": "^1.0.1",
     "timezone-mock": "^1.3.6",
diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
index 6c67a7b781..860c60f7ce 100644
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -3,7 +3,12 @@ import React, { useState } from 'react';
 import { StoryFn } from '@storybook/react';
 
 import Button from '@leafygreen-ui/button';
-import { Month, newUTC } from '@leafygreen-ui/date-utils';
+import {
+  testLocales,
+  Month,
+  newUTC,
+  testTimeZoneLabels,
+} from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 import Modal from '@leafygreen-ui/modal';
@@ -15,7 +20,6 @@ import {
 } from './shared/components/DatePickerContext';
 import { MAX_DATE, MIN_DATE } from './shared/constants';
 import { getProviderPropsFromStoryContext } from './shared/testutils/getProviderPropsFromStoryContext';
-import { Locales, TimeZones } from './shared/testutils/testValues';
 import { AutoComplete } from './shared/types';
 import { DatePicker } from './DatePicker';
 
@@ -69,14 +73,17 @@ const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
   },
   argTypes: {
     baseFontSize: { control: 'select' },
-    locale: { control: 'select', options: Locales },
+    locale: { control: 'select', options: testLocales },
     description: { control: 'text' },
     label: { control: 'text' },
     min: { control: 'date' },
     max: { control: 'date' },
     size: { control: 'select' },
     state: { control: 'select' },
-    timeZone: { control: 'select', options: [undefined, ...TimeZones] },
+    timeZone: {
+      control: 'select',
+      options: [undefined, ...testTimeZoneLabels],
+    },
     autoComplete: { control: 'select', options: Object.values(AutoComplete) },
   },
 };
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 06b6de4dde..e27168489a 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   fireEvent,
-  // prettyDOM,
   render,
   waitFor,
   waitForElementToBeRemoved,
@@ -17,10 +16,17 @@ import {
   setUTCMonth,
   setUTCYear,
 } from '@leafygreen-ui/date-utils';
+import {
+  mockTimeZone,
+  testTimeZones,
+} from '@leafygreen-ui/date-utils/src/testing';
+import {
+  eventContainingTargetValue,
+  tabNTimes,
+} from '@leafygreen-ui/testing-lib';
 import { transitionDuration } from '@leafygreen-ui/tokens';
 
 import { defaultMax, defaultMin } from '../shared/constants';
-import { eventContainingTargetValue, tabNTimes } from '../shared/testutils';
 import { getFormattedDateString, getValueFormatter } from '../shared/utils';
 
 import {
@@ -40,6 +46,10 @@ describe('packages/date-picker', () => {
     jest.useFakeTimers().setSystemTime(testToday);
   });
 
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   describe('Rendering', () => {
     /// Note: Many rendering tests should be handled by Chromatic
 
@@ -263,35 +273,6 @@ describe('packages/date-picker', () => {
         expect(menuContainerEl).not.toBeInTheDocument();
       });
 
-      test('if no value is set, menu opens to current month', async () => {
-        const { openMenu } = renderDatePicker();
-        const { calendarGrid, monthSelect, yearSelect } = await openMenu();
-        expect(calendarGrid).toHaveAttribute('aria-label', 'December 2023');
-        expect(monthSelect).toHaveValue(Month.December.toString());
-        expect(yearSelect).toHaveValue('2023');
-      });
-
-      test('if a value is set, menu opens to the month of that value', async () => {
-        const { openMenu } = renderDatePicker({
-          value: new Date(Date.UTC(2023, Month.March, 10)),
-        });
-        const { calendarGrid, monthSelect, yearSelect } = await openMenu();
-        expect(calendarGrid).toHaveAttribute('aria-label', 'March 2023');
-        expect(monthSelect).toHaveValue(Month.March.toString());
-        expect(yearSelect).toHaveValue('2023');
-      });
-
-      test('if value is invalid, menu still opens to the month of that value', async () => {
-        const { openMenu } = renderDatePicker({
-          value: new Date(Date.UTC(2100, Month.July, 10)),
-        });
-        const { calendarGrid, calendarCells } = await openMenu();
-        expect(calendarGrid).toHaveAttribute('aria-label', 'July 2100');
-        calendarCells.forEach(cell => {
-          expect(cell).toHaveAttribute('aria-disabled', 'true');
-        });
-      });
-
       test('renders the appropriate number of cells', async () => {
         const { openMenu } = renderDatePicker({
           value: new Date(Date.UTC(2024, Month.February, 14)),
@@ -300,8 +281,8 @@ describe('packages/date-picker', () => {
         expect(calendarCells).toHaveLength(29);
       });
 
-      describe('when disabled is toggled to true', () => {
-        test('menu closes', async () => {
+      describe('when disabled is toggled to `true`', () => {
+        test('menu closes if open', async () => {
           const { findMenuElements, rerenderDatePicker } = renderDatePicker({
             initialOpen: true,
           });
@@ -452,6 +433,8 @@ describe('packages/date-picker', () => {
           });
         });
       });
+
+      describe('when menu opens', () => {});
     });
   });
 
@@ -521,70 +504,199 @@ describe('packages/date-picker', () => {
           await waitFor(() => expect(menuContainerEl).not.toBeInTheDocument());
         });
 
-        test('focuses on the `today` cell by default', async () => {
-          const { calendarButton, findMenuElements, findByRole } =
-            renderDatePicker();
-          userEvent.click(calendarButton);
-          const menuContainerEl = await findByRole('listbox');
-          const { todayCell } = await findMenuElements();
-          // Manually fire the `transitionEnd` event. This is not fired automatically by JSDOM
-          fireEvent.transitionEnd(menuContainerEl!);
-          expect(todayCell).toHaveFocus();
-        });
+        describe('if no value is set', () => {
+          describe.each(testTimeZones)(
+            'when system time is in $tz',
+            ({ tz, UTCOffset }) => {
+              const expectedISO = '2023-12-' + (UTCOffset < 0 ? '24' : '25');
 
-        test('focuses on the selected cell', async () => {
-          const value = newUTC(1994, Month.September, 10);
-          const { calendarButton, findMenuElements, findByRole } =
-            renderDatePicker({
-              value: value,
-            });
-          userEvent.click(calendarButton);
-          const menuContainerEl = await findByRole('listbox');
-          const { queryCellByDate } = await findMenuElements();
-          const valueCell = queryCellByDate(value);
-          // Manually fire the `transitionEnd` event. This is not fired automatically by JSDOM
-          fireEvent.transitionEnd(menuContainerEl!);
-          expect(valueCell).toHaveFocus();
+              beforeEach(() => {
+                mockTimeZone(tz, UTCOffset);
+                jest.setSystemTime(newUTC(2023, Month.December, 25, 0, 0)); // Midnight UTC
+              });
+              afterEach(() => {
+                jest.restoreAllMocks();
+              });
+
+              test('menu opens to current month', async () => {
+                const { calendarButton, waitForMenuToOpen } =
+                  renderDatePicker();
+                userEvent.click(calendarButton);
+                const { calendarGrid, monthSelect, yearSelect } =
+                  await waitForMenuToOpen();
+                expect(calendarGrid).toHaveAttribute(
+                  'aria-label',
+                  'December 2023',
+                );
+                expect(monthSelect).toHaveValue(Month.December.toString());
+                expect(yearSelect).toHaveValue('2023');
+              });
+
+              test('initial focus (highlight) is set to `today`', async () => {
+                const { calendarButton, waitForMenuToOpen } =
+                  renderDatePicker();
+                userEvent.click(calendarButton);
+                const { calendarCells } = await waitForMenuToOpen();
+                const highlightCell = calendarCells.find(
+                  cell => cell?.getAttribute('data-highlighted') == 'true',
+                );
+                expect(highlightCell).toHaveAttribute('data-iso', expectedISO);
+                expect(highlightCell).toHaveFocus();
+              });
+            },
+          );
+
+          describe.each(testTimeZones)(
+            'when timeZone prop is $tz',
+            ({ tz, UTCOffset }) => {
+              const expectedISO = '2023-12-' + (UTCOffset < 0 ? '24' : '25');
+
+              test('menu opens to current month', async () => {
+                const { calendarButton, waitForMenuToOpen } = renderDatePicker({
+                  timeZone: tz,
+                });
+                userEvent.click(calendarButton);
+                const { calendarGrid, monthSelect, yearSelect } =
+                  await waitForMenuToOpen();
+                expect(calendarGrid).toHaveAttribute(
+                  'aria-label',
+                  'December 2023',
+                );
+                expect(monthSelect).toHaveValue(Month.December.toString());
+                expect(yearSelect).toHaveValue('2023');
+              });
+
+              test('initial highlight is set to `today`', async () => {
+                jest.setSystemTime(newUTC(2023, Month.December, 25, 16, 0));
+
+                const { calendarButton, waitForMenuToOpen } = renderDatePicker({
+                  timeZone: tz,
+                });
+                userEvent.click(calendarButton);
+
+                const { calendarCells } = await waitForMenuToOpen();
+                const highlightCell = calendarCells.find(
+                  cell => cell?.getAttribute('data-highlighted') == 'true',
+                );
+                expect(highlightCell).toHaveAttribute('data-iso', expectedISO);
+                expect(highlightCell).toHaveFocus();
+              });
+            },
+          );
         });
-      });
 
-      describe('Clicking a Calendar cell', () => {
-        test('fires a change handler', async () => {
-          const onDateChange = jest.fn();
-          const { openMenu } = renderDatePicker({
-            onDateChange,
-          });
-          const { calendarCells } = await openMenu();
-          const firstCell = calendarCells?.[0];
-          userEvent.click(firstCell!);
-          expect(onDateChange).toHaveBeenCalled();
+        describe('if a value is set', () => {
+          describe.each(testTimeZones)(
+            'when system time is in $tz',
+            ({ tz, UTCOffset }) => {
+              beforeEach(() => {
+                jest.setSystemTime(newUTC(2023, Month.December, 25, 0, 0)); // Midnight UTC
+                mockTimeZone(tz, UTCOffset);
+              });
+              afterEach(() => {
+                jest.restoreAllMocks();
+              });
+
+              test('menu opens to the month of that `value`', async () => {
+                const testValue = new Date(Date.UTC(2023, Month.March, 1));
+                const { calendarButton, waitForMenuToOpen } = renderDatePicker({
+                  value: testValue,
+                });
+                userEvent.click(calendarButton);
+                const { calendarGrid, monthSelect, yearSelect } =
+                  await waitForMenuToOpen();
+                expect(calendarGrid).toHaveAttribute(
+                  'aria-label',
+                  'March 2023',
+                );
+                expect(monthSelect).toHaveValue(Month.March.toString());
+                expect(yearSelect).toHaveValue('2023');
+              });
+
+              test('initial focus (highlight) is on the date of `value`', async () => {
+                const testValue = new Date(Date.UTC(2023, Month.March, 1));
+                const { calendarButton, waitForMenuToOpen } = renderDatePicker({
+                  value: testValue,
+                });
+                userEvent.click(calendarButton);
+                const { calendarCells } = await waitForMenuToOpen();
+                const highlightCell = calendarCells.find(
+                  cell => cell?.getAttribute('data-highlighted') == 'true',
+                );
+                expect(highlightCell).toHaveAttribute('data-iso', '2023-03-01');
+                expect(highlightCell).toHaveFocus();
+              });
+            },
+          );
+          describe.each(testTimeZones)(
+            'when timeZone prop is $tz',
+            ({ tz, UTCOffset }) => {
+              beforeEach(() => {
+                jest.setSystemTime(newUTC(2023, Month.December, 25, 0, 0)); // Midnight UTC
+                mockTimeZone(tz, UTCOffset);
+              });
+              afterEach(() => {
+                jest.restoreAllMocks();
+              });
+
+              test('menu opens to the month of that `value`', async () => {
+                const testValue = new Date(Date.UTC(2023, Month.March, 1));
+                const { calendarButton, waitForMenuToOpen } = renderDatePicker({
+                  value: testValue,
+                });
+                userEvent.click(calendarButton);
+                const { calendarGrid, monthSelect, yearSelect } =
+                  await waitForMenuToOpen();
+                expect(calendarGrid).toHaveAttribute(
+                  'aria-label',
+                  'March 2023',
+                );
+                expect(monthSelect).toHaveValue(Month.March.toString());
+                expect(yearSelect).toHaveValue('2023');
+              });
+
+              test('initial focus (highlight) is on the date of `value`', async () => {
+                const testValue = new Date(Date.UTC(2023, Month.March, 1));
+                const { calendarButton, waitForMenuToOpen } = renderDatePicker({
+                  value: testValue,
+                });
+                userEvent.click(calendarButton);
+                const { calendarCells } = await waitForMenuToOpen();
+                const highlightCell = calendarCells.find(
+                  cell => cell?.getAttribute('data-highlighted') == 'true',
+                );
+                expect(highlightCell).toHaveAttribute('data-iso', '2023-03-01');
+                expect(highlightCell).toHaveFocus();
+              });
+            },
+          );
         });
 
-        test('does nothing if the cell is out-of-range', async () => {
-          const onDateChange = jest.fn();
-          const { openMenu } = renderDatePicker({
-            onDateChange,
-            value: new Date(Date.UTC(2023, Month.September, 15)),
-            min: new Date(Date.UTC(2023, Month.September, 10)),
+        describe('if value is invalid', () => {
+          test('menu still opens to the month of that value', async () => {
+            const testValue = new Date(Date.UTC(2100, Month.July, 10));
+            const { openMenu } = renderDatePicker({
+              value: testValue,
+            });
+            const { calendarGrid, calendarCells } = await openMenu();
+            expect(calendarGrid).toHaveAttribute('aria-label', 'July 2100');
+            calendarCells.forEach(cell => {
+              expect(cell).toHaveAttribute('aria-disabled', 'true');
+            });
           });
-          const { calendarCells } = await openMenu();
-          const firstCell = calendarCells?.[0];
-          userEvent.click(firstCell!, {}, { skipPointerEventsCheck: true });
-          expect(firstCell).toHaveAttribute('aria-disabled', 'true');
-          expect(onDateChange).not.toHaveBeenCalled();
-        });
 
-        test('fires a validation handler', async () => {
-          const handleValidation = jest.fn();
-          const { openMenu } = renderDatePicker({
-            handleValidation,
+          test('initial focus (highlight) is on a chevron', async () => {
+            const testValue = new Date(Date.UTC(2100, Month.July, 10));
+            const { openMenu } = renderDatePicker({
+              value: testValue,
+            });
+            const { leftChevron } = await openMenu();
+            expect(leftChevron).toHaveFocus();
           });
-          const { calendarCells } = await openMenu();
-          const firstCell = calendarCells?.[0];
-          userEvent.click(firstCell!);
-          expect(handleValidation).toHaveBeenCalled();
         });
+      });
 
+      describe('Clicking a Calendar cell', () => {
         test('closes the menu', async () => {
           const { openMenu } = renderDatePicker({});
           const { calendarCells, menuContainerEl } = await openMenu();
@@ -593,19 +705,73 @@ describe('packages/date-picker', () => {
           await waitForElementToBeRemoved(menuContainerEl);
         });
 
-        test('updates the input', async () => {
-          const { openMenu, dayInput, monthInput, yearInput } =
-            renderDatePicker({});
-          const { todayCell } = await openMenu();
-          userEvent.click(todayCell!);
-          await waitFor(() => {
-            expect(dayInput.value).toBe(testToday.getUTCDate().toString());
-            expect(monthInput.value).toBe(
-              (testToday.getUTCMonth() + 1).toString(),
-            );
-            expect(yearInput.value).toBe(testToday.getUTCFullYear().toString());
-          });
-        });
+        describe.each(testTimeZones)(
+          'when system time is in $tz',
+          ({ tz, UTCOffset }) => {
+            beforeEach(() => {
+              mockTimeZone(tz, UTCOffset);
+            });
+            afterEach(() => {
+              jest.restoreAllMocks();
+            });
+
+            test('fires a change handler', async () => {
+              const onDateChange = jest.fn();
+              const { openMenu } = renderDatePicker({
+                onDateChange,
+              });
+              const { calendarCells } = await openMenu();
+              const firstCell = calendarCells?.[0];
+              userEvent.click(firstCell!);
+              expect(onDateChange).toHaveBeenCalledWith(
+                newUTC(2023, Month.December, 1),
+              );
+            });
+
+            test('fires a validation handler', async () => {
+              const handleValidation = jest.fn();
+              const { openMenu } = renderDatePicker({
+                handleValidation,
+              });
+              const { calendarCells } = await openMenu();
+              const firstCell = calendarCells?.[0];
+              userEvent.click(firstCell!);
+              expect(handleValidation).toHaveBeenCalledWith(
+                newUTC(2023, Month.December, 1),
+              );
+            });
+
+            test('updates the input', async () => {
+              const { openMenu, dayInput, monthInput, yearInput } =
+                renderDatePicker({});
+              const { todayCell } = await openMenu();
+              userEvent.click(todayCell!);
+              await waitFor(() => {
+                expect(dayInput.value).toBe(testToday.getUTCDate().toString());
+                expect(monthInput.value).toBe(
+                  (testToday.getUTCMonth() + 1).toString(),
+                );
+                expect(yearInput.value).toBe(
+                  testToday.getUTCFullYear().toString(),
+                );
+              });
+            });
+
+            test('does nothing if the cell is out-of-range', async () => {
+              const onDateChange = jest.fn();
+              const { openMenu } = renderDatePicker({
+                onDateChange,
+                value: new Date(Date.UTC(2023, Month.September, 15)),
+                min: new Date(Date.UTC(2023, Month.September, 10)),
+              });
+              const { calendarCells } = await openMenu();
+              const firstCell = calendarCells?.[0];
+              expect(firstCell).toHaveAttribute('aria-disabled', 'true');
+              userEvent.click(firstCell!, {}, { skipPointerEventsCheck: true });
+              expect(onDateChange).not.toHaveBeenCalled();
+            });
+          },
+        );
       });
 
       describe('Clicking a Chevron', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index 7325c57271..54d326f470 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -62,6 +62,8 @@ export interface RenderMenuResult {
   todayCell: HTMLTableCellElement | null;
   /** Query for a cell with a given date value */
   queryCellByDate: (date: Date) => HTMLTableCellElement | null;
+  /** Query for a cell with a given ISO date string */
+  queryCellISODate: (isoString: string) => HTMLTableCellElement | null;
 }
 
 /**
@@ -131,6 +133,14 @@ export const renderDatePicker = (
       return cell as HTMLTableCellElement | null;
     };
 
+    const queryCellISODate = (
+      isoString: string,
+    ): HTMLTableCellElement | null => {
+      const cell = calendarGrid?.querySelector(`[data-iso="${isoString}"]`);
+
+      return cell as HTMLTableCellElement | null;
+    };
+
     const todayCell = queryCellByDate(new Date(Date.now()));
 
     return {
@@ -143,6 +153,7 @@ export const renderDatePicker = (
       yearSelect: yearSelect as HTMLButtonElement | null,
       todayCell,
       queryCellByDate,
+      queryCellISODate,
     };
   }
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index f4f881784c..8695d9cc0a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -9,12 +9,15 @@ import {
   newUTC,
   setUTCDate,
 } from '@leafygreen-ui/date-utils';
+import {
+  mockTimeZone,
+  testTimeZones,
+} from '@leafygreen-ui/date-utils/src/testing';
 
 import {
   DatePickerProvider,
   DatePickerProviderProps,
 } from '../../shared/components/DatePickerContext';
-import { mockTimeZone, testTimeZones } from '../../shared/testutils';
 import {
   SingleDateProvider,
   SingleDateProviderProps,
@@ -231,7 +234,7 @@ describe('packages/date-picker/date-picker-menu', () => {
             jest.useFakeTimers();
           });
           afterEach(() => {
-            jest.clearAllMocks();
+            jest.restoreAllMocks();
           });
 
           test('cell marked as `current` updates', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index a5875c0171..6a1cc4e2fd 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -5,7 +5,12 @@ import { userEvent, within } from '@storybook/testing-library';
 import { last, omit } from 'lodash';
 import MockDate from 'mockdate';
 
-import { Month, newUTC } from '@leafygreen-ui/date-utils';
+import {
+  testLocales,
+  Month,
+  newUTC,
+  testTimeZoneLabels,
+} from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { type StoryMetaType } from '@leafygreen-ui/lib';
 import { transitionDuration } from '@leafygreen-ui/tokens';
@@ -16,11 +21,7 @@ import {
   type DatePickerContextProps,
   DatePickerProvider,
 } from '../../shared/components/DatePickerContext';
-import {
-  getProviderPropsFromStoryContext,
-  Locales,
-  TimeZones,
-} from '../../shared/testutils';
+import { getProviderPropsFromStoryContext } from '../../shared/testutils';
 import {
   type SingleDateContextProps,
   SingleDateProvider,
@@ -64,8 +65,11 @@ const meta: StoryMetaType<typeof DatePickerMenu, DecoratorArgs> = {
   },
   argTypes: {
     value: { control: 'date' },
-    locale: { control: 'select', options: Locales },
-    timeZone: { control: 'select', options: [undefined, ...TimeZones] },
+    locale: { control: 'select', options: testLocales },
+    timeZone: {
+      control: 'select',
+      options: [undefined, ...testTimeZoneLabels],
+    },
   },
 };
 
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index 80225564db..5849aeba25 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -5,13 +5,14 @@ import { StoryFn } from '@storybook/react';
 import {
   getISODate,
   isTodayTZ,
+  testLocales,
   Month,
   newUTC,
+  testTimeZoneLabels,
 } from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
-import { Locales, TimeZones } from '../../../testutils';
 import {
   DatePickerContextProps,
   DatePickerProvider,
@@ -37,7 +38,7 @@ const meta: StoryMetaType<typeof CalendarGrid, DatePickerContextProps> = {
     generate: {
       combineArgs: {
         darkMode: [false, true],
-        locale: Locales,
+        locale: testLocales,
       },
       decorator: ProviderWrapper,
     },
@@ -51,11 +52,11 @@ const meta: StoryMetaType<typeof CalendarGrid, DatePickerContextProps> = {
     darkMode: { control: 'boolean' },
     locale: {
       control: 'select',
-      options: Locales,
+      options: testLocales,
     },
     timeZone: {
       control: 'select',
-      options: TimeZones,
+      options: testTimeZoneLabels,
     },
   },
 };
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
index 19ae1110bd..81c48d6f77 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -3,11 +3,11 @@ import React, { useEffect, useState } from 'react';
 import { StoryFn } from '@storybook/react';
 import { isValid } from 'date-fns';
 
-import { Month, newUTC } from '@leafygreen-ui/date-utils';
+import { testLocales, Month, newUTC } from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { pickAndOmit, StoryMetaType, StoryType } from '@leafygreen-ui/lib';
 
-import { Locales, segmentRefsMock } from '../../../testutils';
+import { segmentRefsMock } from '../../../testutils';
 import {
   contextPropNames,
   DatePickerContextProps,
@@ -58,7 +58,7 @@ const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
   },
   argTypes: {
     value: { control: 'date' },
-    locale: { control: 'select', options: Locales },
+    locale: { control: 'select', options: testLocales },
   },
 };
 
diff --git a/packages/date-picker/src/shared/testutils/index.ts b/packages/date-picker/src/shared/testutils/index.ts
index 53aacfe84e..aa8e085837 100644
--- a/packages/date-picker/src/shared/testutils/index.ts
+++ b/packages/date-picker/src/shared/testutils/index.ts
@@ -1,8 +1,14 @@
-export { eventContainingTargetValue } from './eventContainingTargetValue';
+import { createRef } from 'react';
+
+import { SegmentRefs } from '../hooks';
+
 export {
   getProviderPropsFromStoryContext,
   type ProviderPropsObject,
 } from './getProviderPropsFromStoryContext';
-export { mockTimeZone } from './mockTimeZone';
-export { tabNTimes } from './tabNTimes';
-export * from './testValues';
+
+export const segmentRefsMock: SegmentRefs = {
+  day: createRef<HTMLInputElement>(),
+  month: createRef<HTMLInputElement>(),
+  year: createRef<HTMLInputElement>(),
+};
diff --git a/packages/date-picker/src/shared/testutils/mockTimeZone/index.ts b/packages/date-picker/src/shared/testutils/mockTimeZone/index.ts
deleted file mode 100644
index 3fc1e1c6f8..0000000000
--- a/packages/date-picker/src/shared/testutils/mockTimeZone/index.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import timezoneMock, { TimeZone } from 'timezone-mock';
-
-/**
- * Mocks the `timeZone` returned from the `Intl.DateTimeFormat`,
- * and the `getTimeZoneOffset` returned from `Date`
- * @param timeZone IANA time zone string
- * @param UTCOffset UTC offset (in hours)
- */
-export const mockTimeZone = (timeZone: string, UTCOffset: number) => {
-  timezoneMock.register(
-    `Etc/GMT${UTCOffset >= 0 ? '+' : ''}${UTCOffset}` as TimeZone,
-    {
-      Date,
-    },
-  );
-
-  const realDTFOptions = Intl.DateTimeFormat().resolvedOptions();
-
-  /** DTF.resolvedOptions */
-  global.Intl.DateTimeFormat.prototype.resolvedOptions = jest
-    .fn()
-    .mockImplementation(() => ({
-      ...realDTFOptions,
-      timeZone,
-    }));
-
-  /** getTimezoneOffset */
-  global.Date.prototype.getTimezoneOffset = jest
-    .fn()
-    .mockImplementation(() => UTCOffset * 60);
-
-  /** getDate */
-  global.Date.prototype.getDate = jest
-    .fn()
-    .mockImplementation(function getDate() {
-      /// @ts-expect-error - typeof `this` is unknown
-      const utcDate: number = (this as Date).getUTCDate();
-      /// @ts-expect-error - typeof `this` is unknown
-      const utcHrs: number = (this as Date).getUTCHours();
-
-      const adjustedHr = utcHrs + UTCOffset;
-      const daysOffset = adjustedHr >= 24 ? 1 : adjustedHr < 0 ? -1 : 0;
-      return utcDate + daysOffset;
-    });
-
-  /** getHours */
-  global.Date.prototype.getHours = jest
-    .fn()
-    .mockImplementation(function getHours() {
-      /// @ts-expect-error - typeof `this` is unknown
-      const utcHrs: number = (this as Date).getUTCHours();
-      const adjustedHrs = utcHrs + UTCOffset;
-      const hours =
-        adjustedHrs >= 24
-          ? adjustedHrs % 24
-          : adjustedHrs < 0
-          ? adjustedHrs + 24
-          : adjustedHrs;
-
-      return hours;
-    });
-};
diff --git a/packages/date-picker/src/shared/testutils/mockTimeZone/mockTimeZone.spec.ts b/packages/date-picker/src/shared/testutils/mockTimeZone/mockTimeZone.spec.ts
deleted file mode 100644
index 27634baa53..0000000000
--- a/packages/date-picker/src/shared/testutils/mockTimeZone/mockTimeZone.spec.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Month } from '@leafygreen-ui/date-utils';
-
-import { testTimeZones } from '../testValues';
-
-import { mockTimeZone } from '.';
-
-describe('packages/date-picker/testutils/', () => {
-  describe('mockTimeZone', () => {
-    beforeEach(() => {
-      jest.useFakeTimers();
-    });
-    afterEach(() => {
-      jest.clearAllMocks();
-      jest.restoreAllMocks();
-    });
-
-    describe.each(testTimeZones)('$tz', ({ tz, UTCOffset }) => {
-      beforeEach(() => {
-        mockTimeZone(tz, UTCOffset);
-      });
-
-      test('midnight local', () => {
-        const mockToday = new Date(
-          Date.UTC(2020, Month.October, 14, -UTCOffset),
-        );
-        jest.setSystemTime(mockToday);
-
-        expect(Intl.DateTimeFormat().resolvedOptions().timeZone).toBe(tz);
-        expect(mockToday.getTimezoneOffset()).toBe(UTCOffset * 60);
-
-        const now = new Date(Date.now());
-        expect(now.getDate()).toBe(14);
-        expect(now.getHours()).toBe(0);
-        expect(now.getMinutes()).toBe(0);
-      });
-
-      test('midnight UTC', () => {
-        const mockToday = new Date(Date.UTC(2020, Month.December, 25, 0));
-        jest.setSystemTime(mockToday);
-
-        expect(Intl.DateTimeFormat().resolvedOptions().timeZone).toBe(tz);
-        expect(mockToday.getTimezoneOffset()).toBe(UTCOffset * 60);
-
-        const now = new Date(Date.now());
-        expect(now.getDate()).toBe(UTCOffset < 0 ? 24 : 25);
-        expect(now.getHours()).toBe(UTCOffset < 0 ? 24 + UTCOffset : UTCOffset);
-        expect(now.getMinutes()).toBe(0);
-      });
-    });
-  });
-});
diff --git a/packages/date-picker/tsconfig.json b/packages/date-picker/tsconfig.json
index 8423fe8c40..9c4efec9d9 100644
--- a/packages/date-picker/tsconfig.json
+++ b/packages/date-picker/tsconfig.json
@@ -11,7 +11,7 @@
       ],
       "@leafygreen-ui/*": [
         "../*/src"
-      ]
+      ],
     }
   },
   "include": [
@@ -61,6 +61,9 @@
     {
       "path": "../select"
     },
+    {
+      "path": "../testing-lib"
+    },
     {
       "path": "../tokens"
     },
diff --git a/packages/date-utils/package.json b/packages/date-utils/package.json
index 5bc1e19f71..ef531592c4 100644
--- a/packages/date-utils/package.json
+++ b/packages/date-utils/package.json
@@ -20,10 +20,10 @@
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "lodash": "^4.17.21",
+    "timezone-mock": "^1.3.6",
     "weekstart": "^2.0.0"
   },
   "devDependencies": {
-    "timezone-mock": "^1.3.6"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/date-utils",
   "repository": {
diff --git a/packages/date-utils/src/index.ts b/packages/date-utils/src/index.ts
index c58f5210e8..933f0267d5 100644
--- a/packages/date-utils/src/index.ts
+++ b/packages/date-utils/src/index.ts
@@ -30,5 +30,8 @@ export { setToUTCMidnight } from './setToUTCMidnight';
 export { setUTCDate } from './setUTCDate';
 export { setUTCMonth } from './setUTCMonth';
 export { setUTCYear } from './setUTCYear';
+// TODO: export /testing as a separate sub-directory
+// i.e. `import {} from '@leafygreen-ui/date-utils/testing'`
+export * from './testing';
 export { toDate } from './toDate';
 export * from './types';
diff --git a/packages/date-utils/src/testing/index.ts b/packages/date-utils/src/testing/index.ts
new file mode 100644
index 0000000000..04aa3b6792
--- /dev/null
+++ b/packages/date-utils/src/testing/index.ts
@@ -0,0 +1,2 @@
+export { mockTimeZone } from './mockTimeZone';
+export * from './testValues';
diff --git a/packages/date-utils/src/testing/mockTimeZone/index.ts b/packages/date-utils/src/testing/mockTimeZone/index.ts
new file mode 100644
index 0000000000..fb611d3bfc
--- /dev/null
+++ b/packages/date-utils/src/testing/mockTimeZone/index.ts
@@ -0,0 +1,67 @@
+import timezoneMock, { type TimeZone } from 'timezone-mock';
+
+/**
+ * Mocks the `timeZone` returned from the `Intl.DateTimeFormat`,
+ * and various `get*` methods on the `Date` prototype
+ * @param timeZone IANA time zone string
+ * @param UTCOffset UTC offset (in hours)
+ */
+export const mockTimeZone = (timeZone: string, UTCOffset: number) => {
+  timezoneMock.register(
+    `Etc/GMT${UTCOffset >= 0 ? '+' : ''}${UTCOffset}` as TimeZone,
+    {
+      Date,
+    },
+  );
+
+  const DTFResolved = Intl.DateTimeFormat().resolvedOptions();
+
+  /** DTF.resolvedOptions */
+  jest
+    .spyOn(global.Intl.DateTimeFormat.prototype, 'resolvedOptions')
+    .mockImplementation(() => ({
+      ...DTFResolved,
+      timeZone,
+    }));
+
+  /** getTimezoneOffset */
+  jest
+    .spyOn(global.Date.prototype, 'getTimezoneOffset')
+    .mockImplementation(() => UTCOffset * 60);
+
+  /** getDate */
+  jest.spyOn(global.Date.prototype, 'getDate').mockImplementation(mockGetDate);
+
+  /** getHours */
+  jest
+    .spyOn(global.Date.prototype, 'getHours')
+    .mockImplementation(mockGetHours);
+
+  /**
+   * MOCK FUNCTIONS
+   * */
+  function mockGetDate() {
+    /// @ts-expect-error - typeof `this` is unknown
+    const utcDate: number = (this as Date).getUTCDate();
+    /// @ts-expect-error - typeof `this` is unknown
+    const utcHrs: number = (this as Date).getUTCHours();
+
+    const adjustedHr = utcHrs + UTCOffset;
+    const daysOffset = adjustedHr >= 24 ? 1 : adjustedHr < 0 ? -1 : 0;
+    return utcDate + daysOffset;
+  }
+
+  function mockGetHours() {
+    /// @ts-expect-error - typeof `this` is unknown
+    const utcHrs: number = (this as Date).getUTCHours();
+    const adjustedHrs = utcHrs + UTCOffset;
+    const hours =
+      adjustedHrs >= 24
+        ? adjustedHrs % 24
+        : adjustedHrs < 0
+        ? adjustedHrs + 24
+        : adjustedHrs;
+
+    return hours;
+  }
+};
diff --git a/packages/date-utils/src/testing/mockTimeZone/mockTimeZone.spec.ts b/packages/date-utils/src/testing/mockTimeZone/mockTimeZone.spec.ts
new file mode 100644
index 0000000000..5e9bfa3aa2
--- /dev/null
+++ b/packages/date-utils/src/testing/mockTimeZone/mockTimeZone.spec.ts
@@ -0,0 +1,64 @@
+import { Month } from '../../constants';
+import { testTimeZones } from '../testValues';
+
+import { mockTimeZone } from '.';
+
+describe('packages/date-picker/testutils/mockTimeZone', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe.each(testTimeZones)('$tz', ({ tz, UTCOffset }) => {
+    beforeEach(() => {
+      mockTimeZone(tz, UTCOffset);
+    });
+
+    test('midnight local', () => {
+      const mockToday = new Date(Date.UTC(2020, Month.October, 14, -UTCOffset));
+      jest.setSystemTime(mockToday);
+
+      expect(Intl.DateTimeFormat().resolvedOptions().timeZone).toBe(tz);
+      expect(mockToday.getTimezoneOffset()).toBe(UTCOffset * 60);
+
+      const now = new Date(Date.now());
+      expect(now.getDate()).toBe(14);
+      expect(now.getHours()).toBe(0);
+      expect(now.getMinutes()).toBe(0);
+    });
+
+    test('midnight UTC', () => {
+      const mockToday = new Date(Date.UTC(2020, Month.December, 25, 0));
+      jest.setSystemTime(mockToday);
+
+      expect(Intl.DateTimeFormat().resolvedOptions().timeZone).toBe(tz);
+      expect(mockToday.getTimezoneOffset()).toBe(UTCOffset * 60);
+
+      const now = new Date(Date.now());
+      expect(now.getDate()).toBe(UTCOffset < 0 ? 24 : 25);
+      expect(now.getHours()).toBe(UTCOffset < 0 ? 24 + UTCOffset : UTCOffset);
+      expect(now.getMinutes()).toBe(0);
+    });
+
+    test('maintains default `toLocaleString(...args)` behavior', () => {
+      const date = new Date(Date.UTC(2020, Month.December, 25, 0));
+      expect(date.toLocaleString('en-US', { month: 'long' })).toEqual(
+        'December',
+      );
+    });
+  });
+
+  test('restores mocks appropriately', () => {
+    jest.useRealTimers();
+
+    const now = new Date(Date.now());
+    expect(Intl.DateTimeFormat().resolvedOptions().timeZone).toBeDefined();
+    expect(now.getTimezoneOffset()).toBeDefined();
+
+    expect(now.getDate()).toBeDefined();
+    expect(now.getHours()).toBeDefined();
+    expect(now.getMinutes()).toBeDefined();
+  });
+});
diff --git a/packages/date-picker/src/shared/testutils/testValues.ts b/packages/date-utils/src/testing/testValues.ts
similarity index 75%
rename from packages/date-picker/src/shared/testutils/testValues.ts
rename to packages/date-utils/src/testing/testValues.ts
index 1712df4ed2..9376f41404 100644
--- a/packages/date-picker/src/shared/testutils/testValues.ts
+++ b/packages/date-utils/src/testing/testValues.ts
@@ -1,13 +1,3 @@
-import { createRef } from 'react';
-
-import { SegmentRefs } from '../hooks';
-
-export const segmentRefsMock: SegmentRefs = {
-  day: createRef<HTMLInputElement>(),
-  month: createRef<HTMLInputElement>(),
-  year: createRef<HTMLInputElement>(),
-};
-
 export const testTimeZones = [
   { tz: 'Pacific/Honolulu', UTCOffset: -10 },
   { tz: 'America/Los_Angeles', UTCOffset: -8 },
@@ -19,7 +9,7 @@ export const testTimeZones = [
 ] as const;
 
 /** Time zones used to test with */
-export const TimeZones = testTimeZones.map(({ tz }) => tz);
+export const testTimeZoneLabels = testTimeZones.map(({ tz }) => tz);
 
 /** Locales (date formats) to test with:
  *
@@ -29,7 +19,7 @@ export const TimeZones = testTimeZones.map(({ tz }) => tz);
  * Farsi-Afghanistan (week starts on Sat)
  * English-Maldives (week starts on Fri.)
  */
-export const Locales = [
+export const testLocales = [
   'iso8601',
   'de-DE', // German, Germany (uses `.` char separator)
   'en-US', // English, US (week starts on Sun.)
@@ -41,4 +31,4 @@ export const Locales = [
   'he-IL', // Hebrew, Israel
   'ja-JP', // Japanese, Japan
   'zh-CN', // Chinese, China
-];
+] as const;
diff --git a/packages/date-utils/tsconfig.json b/packages/date-utils/tsconfig.json
index 72a0203d44..b5eed19ae2 100644
--- a/packages/date-utils/tsconfig.json
+++ b/packages/date-utils/tsconfig.json
@@ -6,18 +6,14 @@
     "rootDir": "src",
     "baseUrl": ".",
     "paths": {
-      "@leafygreen-ui/icon/dist/*": ["../icon/src/generated/*"],
       "@leafygreen-ui/*": ["../*/src"]
     }
   },
   "include": [
     "src/**/*"
   ],
-  "exclude": ["**/*.spec.*", "**/*.story.*"],
+  "exclude": ["**/*.spec.*"],
   "references": [
-    {
-      "path": "../emotion"
-    },
     {
       "path": "../lib"
     }
diff --git a/packages/testing-lib/package.json b/packages/testing-lib/package.json
index 3f347d498a..e2568db3a4 100644
--- a/packages/testing-lib/package.json
+++ b/packages/testing-lib/package.json
@@ -12,6 +12,13 @@
       ]
     }
   },
+  "dependencies": {
+    "@testing-library/user-event": "13.5.0",
+    "lodash": "^4.17.21"
+  },
+  "peerDependencies": {
+    "@lg-tools/test": "0.3.2"
+  },
   "scripts": {
     "build": "lg build-package",
     "tsc": "lg build-ts",
@@ -28,6 +35,5 @@
   },
   "bugs": {
     "url": "https://jira.mongodb.org/projects/PD/summary"
-  },
-  "devDependencies": {}
+  }
 }
diff --git a/packages/date-picker/src/shared/testutils/eventContainingTargetValue/index.ts b/packages/testing-lib/src/eventContainingTargetValue/index.ts
similarity index 66%
rename from packages/date-picker/src/shared/testutils/eventContainingTargetValue/index.ts
rename to packages/testing-lib/src/eventContainingTargetValue/index.ts
index cc66e1b9b8..06a86f7a7c 100644
--- a/packages/date-picker/src/shared/testutils/eventContainingTargetValue/index.ts
+++ b/packages/testing-lib/src/eventContainingTargetValue/index.ts
@@ -1,4 +1,6 @@
-/** Returns a jest object containing the expected target value  */
+/**
+ * Returns a jest object containing the expected target value
+ */
 export const eventContainingTargetValue = (value: any) =>
   expect.objectContaining({
     target: expect.objectContaining({ value }),
diff --git a/packages/testing-lib/src/index.ts b/packages/testing-lib/src/index.ts
index 1ff3db9b8a..dc9301d6b5 100644
--- a/packages/testing-lib/src/index.ts
+++ b/packages/testing-lib/src/index.ts
@@ -1,5 +1,7 @@
 import * as Context from './context';
 import * as jest from './jest';
 import * as JestDOM from './jest-dom';
-
 export { Context, jest, JestDOM };
+
+export { eventContainingTargetValue } from './eventContainingTargetValue';
+export { tabNTimes } from './tabNTimes';
diff --git a/packages/date-picker/src/shared/testutils/tabNTimes/index.ts b/packages/testing-lib/src/tabNTimes/index.ts
similarity index 100%
rename from packages/date-picker/src/shared/testutils/tabNTimes/index.ts
rename to packages/testing-lib/src/tabNTimes/index.ts

From 5dbcb490a94562047ede39beee4888f83b62151d Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Wed, 13 Dec 2023 11:35:38 -0500
Subject: [PATCH 326/351] Date picker: DateUtils: Testing (#2133)

* mv eventContainingTargetValue, tabNTimes

* updates mockTimeZone to reset properly

* mv testing utils

* imports

* Update tsconfig.json

* rename testTimeZoneLabels, testLocales

* properly restore mocks

From c4d1b753798b97b08d3865952cc39e7b01ef92b7 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed, 13 Dec 2023 11:46:59 -0500
Subject: [PATCH 327/351] lint

---
 packages/date-picker/src/DatePicker.stories.tsx                 | 2 +-
 .../src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx    | 2 +-
 .../components/Calendar/CalendarGrid/CalendarGrid.stories.tsx   | 2 +-
 .../components/DateInput/DateInputBox/DateInputBox.stories.tsx  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
index 860c60f7ce..c44902ffd3 100644
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -4,9 +4,9 @@ import { StoryFn } from '@storybook/react';
 
 import Button from '@leafygreen-ui/button';
 import {
-  testLocales,
   Month,
   newUTC,
+  testLocales,
   testTimeZoneLabels,
 } from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 6a1cc4e2fd..290a5937e2 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -6,9 +6,9 @@ import { last, omit } from 'lodash';
 import MockDate from 'mockdate';
 
 import {
-  testLocales,
   Month,
   newUTC,
+  testLocales,
   testTimeZoneLabels,
 } from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index 5849aeba25..681a40a31a 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -5,9 +5,9 @@ import { StoryFn } from '@storybook/react';
 import {
   getISODate,
   isTodayTZ,
-  testLocales,
   Month,
   newUTC,
+  testLocales,
   testTimeZoneLabels,
 } from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
index 81c48d6f77..374fa87039 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { StoryFn } from '@storybook/react';
 import { isValid } from 'date-fns';
 
-import { testLocales, Month, newUTC } from '@leafygreen-ui/date-utils';
+import { Month, newUTC,testLocales } from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { pickAndOmit, StoryMetaType, StoryType } from '@leafygreen-ui/lib';
 

From 6b53d1eda203dbc005cfbe1cb8d83eef8b355d88 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Wed, 13 Dec 2023 12:14:04 -0500
Subject: [PATCH 328/351] Adam/date picker shared context (#2136)

* mv shared context

* rename SharedDatePickerContext

* rename DatePickerContext

* fixes
---
 .../date-picker/src/DatePicker.stories.tsx    |  14 +--
 .../date-picker/src/DatePicker/DatePicker.tsx |  14 +--
 .../DatePickerContent/DatePickerContent.tsx   |   8 +-
 .../DatePickerContent.types.ts                |   2 +-
 .../DatePickerContext.tsx}                    |  26 ++--
 .../DatePickerContext.types.ts}               |   4 +-
 .../DatePickerContext/index.ts                |   5 -
 .../useDatePickerComponentRefs.ts             |   2 +-
 .../DatePickerInput/DatePickerInput.spec.tsx  |  24 ++--
 .../DatePickerInput.stories.tsx               |  22 ++--
 .../DatePickerInput/DatePickerInput.tsx       |   8 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    |  32 ++---
 .../DatePickerMenu/DatePickerMenu.stories.tsx |  32 ++---
 .../DatePickerMenu/DatePickerMenu.tsx         |   9 +-
 .../DatePickerMenuHeader.spec.tsx             | 113 +++++++++---------
 .../DatePickerMenuHeader.tsx                  |   8 +-
 .../src/DatePicker/SingleDateContext/index.ts |   9 --
 .../utils/getSegmentToFocus/index.ts          |   4 +-
 .../CalendarCell/CalendarCell.stories.tsx     |  12 +-
 .../CalendarGrid/CalendarGrid.stories.tsx     |  16 +--
 .../Calendar/CalendarGrid/CalendarGrid.tsx    |   4 +-
 .../DateFormField/DateFormField.stories.tsx   |  18 +--
 .../DateInput/DateFormField/DateFormField.tsx |   4 +-
 .../DateInputBox/DateInputBox.spec.tsx        |  18 +--
 .../DateInputBox/DateInputBox.stories.tsx     |  18 +--
 .../DateInput/DateInputBox/DateInputBox.tsx   |   4 +-
 .../DateInputSegment.spec.tsx                 |  16 +--
 .../DateInputSegment.stories.tsx              |  17 +--
 .../DateInputSegment/DateInputSegment.tsx     |   4 +-
 .../src/shared/components/index.ts            |   9 --
 .../SharedDatePickerContext.spec.tsx}         |  46 +++----
 .../SharedDatePickerContext.tsx}              |  36 +++---
 .../SharedDatePickerContext.types.ts}         |   8 +-
 .../SharedDatePickerContext.utils.ts}         |  46 ++++---
 .../date-picker/src/shared/context/index.ts   |  14 +++
 .../useDatePickerErrorNotifications.ts        |   4 +-
 packages/date-picker/src/shared/index.ts      |   1 +
 .../getProviderPropsFromStoryContext/index.ts |   8 +-
 .../utils/getFirstEmptySegment/index.ts       |   4 +-
 .../shared/utils/getRelativeSegment/index.ts  |   6 +-
 40 files changed, 322 insertions(+), 327 deletions(-)
 rename packages/date-picker/src/DatePicker/{SingleDateContext/SingleDateContext.tsx => DatePickerContext/DatePickerContext.tsx} (90%)
 rename packages/date-picker/src/DatePicker/{SingleDateContext/SingleDateContext.types.ts => DatePickerContext/DatePickerContext.types.ts} (96%)
 rename packages/date-picker/src/{shared/components => DatePicker}/DatePickerContext/index.ts (64%)
 rename packages/date-picker/src/DatePicker/{SingleDateContext => DatePickerContext}/useDatePickerComponentRefs.ts (91%)
 delete mode 100644 packages/date-picker/src/DatePicker/SingleDateContext/index.ts
 rename packages/date-picker/src/shared/{components/DatePickerContext/DatePickerContext.spec.tsx => context/SharedDatePickerContext.spec.tsx} (75%)
 rename packages/date-picker/src/shared/{components/DatePickerContext/DatePickerContext.tsx => context/SharedDatePickerContext.tsx} (61%)
 rename packages/date-picker/src/shared/{components/DatePickerContext/DatePickerContext.types.ts => context/SharedDatePickerContext.types.ts} (85%)
 rename packages/date-picker/src/shared/{components/DatePickerContext/DatePickerContext.utils.ts => context/SharedDatePickerContext.utils.ts} (74%)
 create mode 100644 packages/date-picker/src/shared/context/index.ts
 rename packages/date-picker/src/shared/{components/DatePickerContext => context}/useDatePickerErrorNotifications.ts (95%)

diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
index c44902ffd3..44cae358b8 100644
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -14,11 +14,11 @@ import { StoryMetaType } from '@leafygreen-ui/lib';
 import Modal from '@leafygreen-ui/modal';
 import { Size } from '@leafygreen-ui/tokens';
 
-import {
-  DatePickerContextProps,
-  DatePickerProvider,
-} from './shared/components/DatePickerContext';
 import { MAX_DATE, MIN_DATE } from './shared/constants';
+import {
+  SharedDatePickerContextProps,
+  SharedDatePickerProvider,
+} from './shared/context';
 import { getProviderPropsFromStoryContext } from './shared/testutils/getProviderPropsFromStoryContext';
 import { AutoComplete } from './shared/types';
 import { DatePicker } from './DatePicker';
@@ -29,14 +29,14 @@ const ProviderWrapper = (Story: StoryFn, ctx: any) => {
 
   return (
     <LeafyGreenProvider {...leafyGreenProviderProps}>
-      <DatePickerProvider {...datePickerProviderProps}>
+      <SharedDatePickerProvider {...datePickerProviderProps}>
         <Story {...storyProps} />
-      </DatePickerProvider>
+      </SharedDatePickerProvider>
     </LeafyGreenProvider>
   );
 };
 
-const meta: StoryMetaType<typeof DatePicker, DatePickerContextProps> = {
+const meta: StoryMetaType<typeof DatePicker, SharedDatePickerContextProps> = {
   title: 'Components/DatePicker/DatePicker',
   component: DatePicker,
   decorators: [ProviderWrapper],
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 812f86676b..335822b7c2 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -12,13 +12,13 @@ import { AutoComplete, DatePickerState } from '../shared';
 import {
   ContextPropKeys,
   contextPropNames,
-  DatePickerProvider,
-} from '../shared/components/DatePickerContext';
+  SharedDatePickerProvider,
+} from '../shared/context';
 import { useControlledValue } from '../shared/hooks';
 
 import { DatePickerProps } from './DatePicker.types';
 import { DatePickerContent } from './DatePickerContent';
-import { SingleDateProvider } from './SingleDateContext';
+import { DatePickerProvider } from './DatePickerContext';
 
 /**
  * LeafyGreen Date Picker component
@@ -50,12 +50,12 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     );
 
     return (
-      <DatePickerProvider
+      <SharedDatePickerProvider
         darkMode={darkMode}
         baseFontSize={baseFontSize}
         {...contextProps}
       >
-        <SingleDateProvider
+        <DatePickerProvider
           value={value}
           setValue={setValue}
           handleValidation={handleValidation}
@@ -68,8 +68,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           >
             <DatePickerContent ref={fwdRef} {...componentProps} />
           </LeafyGreenProvider>
-        </SingleDateProvider>
-      </DatePickerProvider>
+        </DatePickerProvider>
+      </SharedDatePickerProvider>
     );
   },
 );
diff --git a/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
index e0e8521c9c..2b2fd812ad 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
@@ -16,10 +16,10 @@ import {
 } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
 
-import { useDatePickerContext } from '../../shared/components/DatePickerContext';
+import { useSharedDatePickerContext } from '../../shared/context';
+import { useDatePickerContext } from '../DatePickerContext';
 import { DatePickerInput } from '../DatePickerInput';
 import { DatePickerMenu } from '../DatePickerMenu';
-import { useSingleDateContext } from '../SingleDateContext';
 
 import { DatePickerContentProps } from './DatePickerContent.types';
 
@@ -28,7 +28,7 @@ export const DatePickerContent = forwardRef<
   DatePickerContentProps
 >(({ ...rest }: DatePickerContentProps, fwdRef) => {
   const { min, max, isOpen, menuId, disabled, isSelectOpen } =
-    useDatePickerContext();
+    useSharedDatePickerContext();
   const {
     refs,
     value,
@@ -36,7 +36,7 @@ export const DatePickerContent = forwardRef<
     menuTriggerEvent,
     handleValidation,
     getHighlightedCell,
-  } = useSingleDateContext();
+  } = useDatePickerContext();
 
   const prevValue = usePrevious(value);
   const prevMin = usePrevious(min);
diff --git a/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.types.ts b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.types.ts
index dac89f8d85..d90a68a86f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.types.ts
@@ -1,4 +1,4 @@
-import { ContextPropKeys } from '../../shared/components/DatePickerContext';
+import { ContextPropKeys } from '../../shared/context';
 import { DatePickerProps } from '../DatePicker.types';
 
 /**
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
similarity index 90%
rename from packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
rename to packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
index ffb0a0efe4..4b5e780237 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
@@ -18,29 +18,29 @@ import {
 } from '@leafygreen-ui/date-utils';
 import { usePrevious } from '@leafygreen-ui/hooks';
 
-import { useDatePickerContext } from '../../shared/components';
+import { useSharedDatePickerContext } from '../../shared/context';
 import { getFormattedDateString } from '../../shared/utils';
 import { getInitialHighlight } from '../utils/getInitialHighlight';
 
 import {
-  SingleDateContextProps,
-  SingleDateProviderProps,
-} from './SingleDateContext.types';
+  DatePickerContextProps,
+  DatePickerProviderProps,
+} from './DatePickerContext.types';
 import { useDateRangeComponentRefs } from './useDatePickerComponentRefs';
 
-export const SingleDateContext = createContext<SingleDateContextProps>(
-  {} as SingleDateContextProps,
+export const DatePickerContext = createContext<DatePickerContextProps>(
+  {} as DatePickerContextProps,
 );
 
 /**
  * A provider for context values in a single DatePicker
  */
-export const SingleDateProvider = ({
+export const DatePickerProvider = ({
   children,
   value,
   setValue: _setValue,
   handleValidation: _handleValidation,
-}: PropsWithChildren<SingleDateProviderProps>) => {
+}: PropsWithChildren<DatePickerProviderProps>) => {
   const refs = useDateRangeComponentRefs();
   const {
     isOpen,
@@ -52,7 +52,7 @@ export const SingleDateProvider = ({
     setInternalErrorMessage,
     clearInternalErrorMessage,
     isInRange,
-  } = useDatePickerContext();
+  } = useSharedDatePickerContext();
   const prevValue = usePrevious(value);
 
   const hour = new Date(Date.now()).getHours();
@@ -201,7 +201,7 @@ export const SingleDateProvider = ({
   }, [prevValue, setMonth, today, value]);
 
   return (
-    <SingleDateContext.Provider
+    <DatePickerContext.Provider
       value={{
         refs,
         today,
@@ -221,13 +221,13 @@ export const SingleDateProvider = ({
       }}
     >
       {children}
-    </SingleDateContext.Provider>
+    </DatePickerContext.Provider>
   );
 };
 
 /**
  * Access single date picker context values
  */
-export const useSingleDateContext = () => {
-  return useContext(SingleDateContext);
+export const useDatePickerContext = () => {
+  return useContext(DatePickerContext);
 };
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.types.ts
similarity index 96%
rename from packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
rename to packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.types.ts
index 5c6eb9c62a..ccc7b23171 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/SingleDateContext.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.types.ts
@@ -12,7 +12,7 @@ export interface DatePickerComponentRefs {
   calendarButtonRef: React.RefObject<HTMLButtonElement>;
 }
 
-export interface SingleDateContextProps {
+export interface DatePickerContextProps {
   /**
    * Ref objects for important date picker elements
    */
@@ -90,7 +90,7 @@ export interface SingleDateContextProps {
 }
 
 /** Props passed into the provider component */
-export interface SingleDateProviderProps {
+export interface DatePickerProviderProps {
   value: DateType | undefined;
   setValue: (newVal: DateType) => void;
   handleValidation?: DatePickerProps['handleValidation'];
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/index.ts b/packages/date-picker/src/DatePicker/DatePickerContext/index.ts
similarity index 64%
rename from packages/date-picker/src/shared/components/DatePickerContext/index.ts
rename to packages/date-picker/src/DatePicker/DatePickerContext/index.ts
index 08fe7b4bed..fe01ef1b34 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/index.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerContext/index.ts
@@ -7,8 +7,3 @@ export {
   type DatePickerContextProps,
   type DatePickerProviderProps,
 } from './DatePickerContext.types';
-export {
-  type ContextPropKeys,
-  contextPropNames,
-  defaultDatePickerContext,
-} from './DatePickerContext.utils';
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/useDatePickerComponentRefs.ts b/packages/date-picker/src/DatePicker/DatePickerContext/useDatePickerComponentRefs.ts
similarity index 91%
rename from packages/date-picker/src/DatePicker/SingleDateContext/useDatePickerComponentRefs.ts
rename to packages/date-picker/src/DatePicker/DatePickerContext/useDatePickerComponentRefs.ts
index 0e61b23268..ebbdf5ec6b 100644
--- a/packages/date-picker/src/DatePicker/SingleDateContext/useDatePickerComponentRefs.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerContext/useDatePickerComponentRefs.ts
@@ -4,7 +4,7 @@ import { useDynamicRefs } from '@leafygreen-ui/hooks';
 
 import { useSegmentRefs } from '../../shared/hooks';
 
-import { DatePickerComponentRefs } from './SingleDateContext.types';
+import { DatePickerComponentRefs } from './DatePickerContext.types';
 
 /** Creates `ref` objects for any & all relevant component elements */
 export const useDateRangeComponentRefs = (): DatePickerComponentRefs => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 06f054266d..405e49f903 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -4,33 +4,33 @@ import userEvent from '@testing-library/user-event';
 
 import { Month, newUTC } from '@leafygreen-ui/date-utils';
 
+import {
+  defaultSharedDatePickerContext,
+  SharedDatePickerProvider,
+  SharedDatePickerProviderProps,
+} from '../../shared/context';
 import {
   DatePickerProvider,
   DatePickerProviderProps,
-  defaultDatePickerContext,
-} from '../../shared/components/DatePickerContext';
-import {
-  SingleDateProvider,
-  SingleDateProviderProps,
-} from '../SingleDateContext';
+} from '../DatePickerContext';
 
 import { DatePickerInput, DatePickerInputProps } from '.';
 
 const renderDatePickerInput = (
   props?: Omit<DatePickerInputProps, 'segmentRefs' | 'setValue'> | null,
-  singleDateContext?: Partial<SingleDateProviderProps>,
-  context?: Partial<DatePickerProviderProps>,
+  singleDateContext?: Partial<DatePickerProviderProps>,
+  context?: Partial<SharedDatePickerProviderProps>,
 ) => {
   const result = render(
-    <DatePickerProvider {...defaultDatePickerContext} {...context}>
-      <SingleDateProvider
+    <SharedDatePickerProvider {...defaultSharedDatePickerContext} {...context}>
+      <DatePickerProvider
         value={null}
         setValue={() => {}}
         {...singleDateContext}
       >
         <DatePickerInput {...props} />
-      </SingleDateProvider>
-    </DatePickerProvider>,
+      </DatePickerProvider>
+    </SharedDatePickerProvider>,
   );
 
   const inputContainer = result.getByRole('combobox');
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index 0aabb2322e..40486dc334 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -7,15 +7,15 @@ import { StoryMetaType } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 
 import {
-  DatePickerContextProps,
-  DatePickerProvider,
-} from '../../shared/components/DatePickerContext';
+  SharedDatePickerContextProps,
+  SharedDatePickerProvider,
+} from '../../shared/context';
 import { getProviderPropsFromStoryContext } from '../../shared/testutils';
 import { DatePickerProps } from '../DatePicker.types';
 import {
-  SingleDateContextProps,
-  SingleDateProvider,
-} from '../SingleDateContext';
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../DatePickerContext';
 
 import { DatePickerInput } from './DatePickerInput';
 
@@ -25,18 +25,18 @@ const ProviderWrapper = (Story: StoryFn, ctx: any) => {
 
   return (
     <LeafyGreenProvider {...leafyGreenProviderProps}>
-      <DatePickerProvider {...datePickerProviderProps}>
-        <SingleDateProvider value={storyProps.value} setValue={() => {}}>
+      <SharedDatePickerProvider {...datePickerProviderProps}>
+        <DatePickerProvider value={storyProps.value} setValue={() => {}}>
           <Story {...storyProps} />
-        </SingleDateProvider>
-      </DatePickerProvider>
+        </DatePickerProvider>
+      </SharedDatePickerProvider>
     </LeafyGreenProvider>
   );
 };
 
 const meta: StoryMetaType<
   typeof DatePickerInput,
-  SingleDateContextProps & DatePickerContextProps
+  DatePickerContextProps & SharedDatePickerContextProps
 > = {
   title: 'Components/DatePicker/DatePicker/DatePickerInput',
   component: DatePickerInput,
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 4eb165e297..c676f3f3e9 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -12,12 +12,12 @@ import { createSyntheticEvent, keyMap } from '@leafygreen-ui/lib';
 
 import { DateFormField, DateInputBox } from '../../shared/components/DateInput';
 import { DateInputSegmentChangeEventHandler } from '../../shared/components/DateInput/DateInputSegment';
-import { useDatePickerContext } from '../../shared/components/DatePickerContext';
+import { useSharedDatePickerContext } from '../../shared/context';
 import {
   getRelativeSegmentRef,
   isElementInputSegment,
 } from '../../shared/utils';
-import { useSingleDateContext } from '../SingleDateContext';
+import { useDatePickerContext } from '../DatePickerContext';
 import { getSegmentToFocus } from '../utils/getSegmentToFocus';
 
 import { DatePickerInputProps } from './DatePickerInput.types';
@@ -33,7 +33,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     fwdRef,
   ) => {
     const { formatParts, disabled, isDirty, setIsDirty } =
-      useDatePickerContext();
+      useSharedDatePickerContext();
     const {
       refs: { segmentRefs, calendarButtonRef },
       value,
@@ -41,7 +41,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       openMenu,
       toggleMenu,
       handleValidation,
-    } = useSingleDateContext();
+    } = useDatePickerContext();
 
     /** Called when the input's Date value has changed */
     const handleInputValueChange = (inputVal?: Date | null) => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 8695d9cc0a..9369faf3dc 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -14,14 +14,14 @@ import {
   testTimeZones,
 } from '@leafygreen-ui/date-utils/src/testing';
 
+import {
+  SharedDatePickerProvider,
+  SharedDatePickerProviderProps,
+} from '../../shared/context';
 import {
   DatePickerProvider,
   DatePickerProviderProps,
-} from '../../shared/components/DatePickerContext';
-import {
-  SingleDateProvider,
-  SingleDateProviderProps,
-} from '../SingleDateContext';
+} from '../DatePickerContext';
 
 import { DatePickerMenu, DatePickerMenuProps } from '.';
 
@@ -35,29 +35,29 @@ const standardTimeStartDate = newUTC(2023, Month.November, 6);
 
 const renderDatePickerMenu = (
   props?: Partial<DatePickerMenuProps> | null,
-  singleContext?: Partial<SingleDateProviderProps> | null,
-  context?: Partial<DatePickerProviderProps> | null,
+  singleContext?: Partial<DatePickerProviderProps> | null,
+  context?: Partial<SharedDatePickerProviderProps> | null,
 ) => {
   const result = render(
-    <DatePickerProvider label="" {...context} initialOpen={true}>
-      <SingleDateProvider
+    <SharedDatePickerProvider label="" {...context} initialOpen={true}>
+      <DatePickerProvider
         value={null}
         setValue={() => {}}
         handleValidation={undefined}
         {...singleContext}
       >
         <DatePickerMenu {...props} />,
-      </SingleDateProvider>
-    </DatePickerProvider>,
+      </DatePickerProvider>
+    </SharedDatePickerProvider>,
   );
 
   const rerenderDatePickerMenu = (
     newProps?: Partial<DatePickerMenuProps> | null,
-    newSingleContext?: Partial<SingleDateProviderProps> | null,
+    newSingleContext?: Partial<DatePickerProviderProps> | null,
   ) =>
     result.rerender(
-      <DatePickerProvider label="" {...context} initialOpen={true}>
-        <SingleDateProvider
+      <SharedDatePickerProvider label="" {...context} initialOpen={true}>
+        <DatePickerProvider
           value={null}
           setValue={() => {}}
           handleValidation={undefined}
@@ -67,8 +67,8 @@ const renderDatePickerMenu = (
           <DatePickerMenu
             {...({ ...props, ...newProps } as Partial<DatePickerMenuProps>)}
           />
-        </SingleDateProvider>
-      </DatePickerProvider>,
+        </DatePickerProvider>
+      </SharedDatePickerProvider>,
     );
 
   const calendarGrid = result.getByRole('grid');
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 290a5937e2..2c73cc13fd 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -18,22 +18,22 @@ import { InlineCode } from '@leafygreen-ui/typography';
 
 import {
   contextPropNames,
-  type DatePickerContextProps,
-  DatePickerProvider,
-} from '../../shared/components/DatePickerContext';
+  type SharedDatePickerContextProps,
+  SharedDatePickerProvider,
+} from '../../shared/context';
 import { getProviderPropsFromStoryContext } from '../../shared/testutils';
 import {
-  type SingleDateContextProps,
-  SingleDateProvider,
-} from '../SingleDateContext';
+  type DatePickerContextProps,
+  DatePickerProvider,
+} from '../DatePickerContext';
 
 import { DatePickerMenu } from './DatePickerMenu';
 import { DatePickerMenuProps } from './DatePickerMenu.types';
 
 const mockToday = newUTC(2023, Month.September, 14);
 type DecoratorArgs = DatePickerMenuProps &
-  SingleDateContextProps &
-  DatePickerContextProps;
+  DatePickerContextProps &
+  SharedDatePickerContextProps;
 
 const MenuDecorator: Decorator = (Story: StoryFn, ctx: any) => {
   const { leafyGreenProviderProps, datePickerProviderProps, storyProps } =
@@ -41,9 +41,9 @@ const MenuDecorator: Decorator = (Story: StoryFn, ctx: any) => {
 
   return (
     <LeafyGreenProvider {...leafyGreenProviderProps}>
-      <DatePickerProvider {...datePickerProviderProps} initialOpen={true}>
+      <SharedDatePickerProvider {...datePickerProviderProps} initialOpen={true}>
         <Story {...storyProps} />
-      </DatePickerProvider>
+      </SharedDatePickerProvider>
     </LeafyGreenProvider>
   );
 };
@@ -85,12 +85,12 @@ export const Basic: DatePickerMenuStoryType = {
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
     return (
-      <SingleDateProvider value={value} setValue={setValue}>
+      <DatePickerProvider value={value} setValue={setValue}>
         <InlineCode ref={refEl}>
           Today: {new Date(Date.now()).toUTCString()}
         </InlineCode>
         <DatePickerMenu {...props} refEl={refEl} />
-      </SingleDateProvider>
+      </DatePickerProvider>
     );
   },
 };
@@ -102,7 +102,7 @@ export const WithValue: DatePickerMenuStoryType = {
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
     return (
-      <SingleDateProvider
+      <DatePickerProvider
         value={newUTC(2023, Month.September, 10)}
         setValue={() => {}}
       >
@@ -112,7 +112,7 @@ export const WithValue: DatePickerMenuStoryType = {
           </InlineCode>
           <DatePickerMenu {...props} refEl={refEl} />
         </div>
-      </SingleDateProvider>
+      </DatePickerProvider>
     );
   },
 };
@@ -126,12 +126,12 @@ export const MockedToday: DatePickerMenuStoryType = {
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
     return (
-      <SingleDateProvider value={value} setValue={setValue}>
+      <DatePickerProvider value={value} setValue={setValue}>
         <InlineCode ref={refEl}>
           Today: {new Date(Date.now()).toUTCString()}
         </InlineCode>
         <DatePickerMenu {...props} refEl={refEl} />
-      </SingleDateProvider>
+      </DatePickerProvider>
     );
   },
 };
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 56dd3a23f5..a661bb2813 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -24,9 +24,9 @@ import {
   CalendarCellState,
   CalendarGrid,
 } from '../../shared/components/Calendar';
-import { useDatePickerContext } from '../../shared/components/DatePickerContext';
 import { MenuWrapper } from '../../shared/components/MenuWrapper';
-import { useSingleDateContext } from '../SingleDateContext';
+import { useSharedDatePickerContext } from '../../shared/context';
+import { useDatePickerContext } from '../DatePickerContext';
 
 import { getNewHighlight } from './utils/getNewHighlight';
 import {
@@ -39,7 +39,8 @@ import { DatePickerMenuHeader } from './DatePickerMenuHeader';
 
 export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
   ({ onKeyDown, ...rest }: DatePickerMenuProps, fwdRef) => {
-    const { isInRange, isOpen, setIsDirty, timeZone } = useDatePickerContext();
+    const { isInRange, isOpen, setIsDirty, timeZone } =
+      useSharedDatePickerContext();
     const {
       refs,
       today,
@@ -53,7 +54,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       setHighlight,
       getCellWithValue,
       getHighlightedCell,
-    } = useSingleDateContext();
+    } = useDatePickerContext();
 
     const ref = useForwardedRef(fwdRef, null);
     const cellRefs = refs.calendarCellRefs;
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
index 2da2cd7e29..aecae30f3f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
@@ -5,41 +5,42 @@ import userEvent from '@testing-library/user-event';
 import { Month, newUTC } from '@leafygreen-ui/date-utils';
 import { transitionDuration } from '@leafygreen-ui/tokens';
 
+import {} from '../../../shared/components';
 import {
-  DatePickerContext,
-  defaultDatePickerContext,
-} from '../../../shared/components';
+  defaultSharedDatePickerContext,
+  SharedDatePickerContext,
+} from '../../../shared/context';
 import {
-  SingleDateContext,
-  SingleDateContextProps,
-} from '../../SingleDateContext';
+  DatePickerContext,
+  DatePickerContextProps,
+} from '../../DatePickerContext';
 
 import { DatePickerMenuHeader } from '.';
 
+const MockSharedDatePickerProvider = SharedDatePickerContext.Provider;
 const MockDatePickerProvider = DatePickerContext.Provider;
-const MockSingleDateProvider = SingleDateContext.Provider;
 
 describe('packages/date-picker/menu/header', () => {
   describe('Rendering', () => {
     describe('Some month options are disabled', () => {
       test('When `month` and `min` are the same year, earlier month options are disabled', async () => {
         const { getByLabelText, findAllByRole } = render(
-          <MockDatePickerProvider
+          <MockSharedDatePickerProvider
             value={{
-              ...defaultDatePickerContext,
+              ...defaultSharedDatePickerContext,
               min: newUTC(2022, Month.March, 10),
             }}
           >
-            <MockSingleDateProvider
+            <MockDatePickerProvider
               value={
                 {
                   month: newUTC(2022, Month.July, 1),
-                } as SingleDateContextProps
+                } as DatePickerContextProps
               }
             >
               <DatePickerMenuHeader setMonth={() => {}} />
-            </MockSingleDateProvider>
-          </MockDatePickerProvider>,
+            </MockDatePickerProvider>
+          </MockSharedDatePickerProvider>,
         );
 
         const monthSelect = getByLabelText('Select month');
@@ -60,22 +61,22 @@ describe('packages/date-picker/menu/header', () => {
 
       test('When `month` and `max` are the same year, later month options are disabled', async () => {
         const { getByLabelText, findAllByRole } = render(
-          <MockDatePickerProvider
+          <MockSharedDatePickerProvider
             value={{
-              ...defaultDatePickerContext,
+              ...defaultSharedDatePickerContext,
               max: newUTC(2024, Month.September, 10),
             }}
           >
-            <MockSingleDateProvider
+            <MockDatePickerProvider
               value={
                 {
                   month: newUTC(2024, Month.July, 1),
-                } as SingleDateContextProps
+                } as DatePickerContextProps
               }
             >
               <DatePickerMenuHeader setMonth={() => {}} />
-            </MockSingleDateProvider>
-          </MockDatePickerProvider>,
+            </MockDatePickerProvider>
+          </MockSharedDatePickerProvider>,
         );
 
         const monthSelect = getByLabelText('Select month');
@@ -96,23 +97,23 @@ describe('packages/date-picker/menu/header', () => {
 
       test('When `month` and `max`/`min` are different years, no month options are disabled', async () => {
         const { getByLabelText, findAllByRole } = render(
-          <MockDatePickerProvider
+          <MockSharedDatePickerProvider
             value={{
-              ...defaultDatePickerContext,
+              ...defaultSharedDatePickerContext,
               min: newUTC(2022, Month.March, 10),
               max: newUTC(2024, Month.September, 10),
             }}
           >
-            <MockSingleDateProvider
+            <MockDatePickerProvider
               value={
                 {
                   month: newUTC(2023, Month.July, 5),
-                } as SingleDateContextProps
+                } as DatePickerContextProps
               }
             >
               <DatePickerMenuHeader setMonth={() => {}} />
-            </MockSingleDateProvider>
-          </MockDatePickerProvider>,
+            </MockDatePickerProvider>
+          </MockSharedDatePickerProvider>,
         );
 
         const monthSelect = getByLabelText('Select month');
@@ -131,23 +132,23 @@ describe('packages/date-picker/menu/header', () => {
       describe('When `year` is after `max`', () => {
         test('all options are disabled', async () => {
           const { getByLabelText, findAllByRole } = render(
-            <MockDatePickerProvider
+            <MockSharedDatePickerProvider
               value={{
-                ...defaultDatePickerContext,
+                ...defaultSharedDatePickerContext,
                 min: newUTC(2022, Month.March, 10),
                 max: newUTC(2024, Month.September, 10),
               }}
             >
-              <MockSingleDateProvider
+              <MockDatePickerProvider
                 value={
                   {
                     month: newUTC(2025, Month.July, 5),
-                  } as SingleDateContextProps
+                  } as DatePickerContextProps
                 }
               >
                 <DatePickerMenuHeader setMonth={() => {}} />
-              </MockSingleDateProvider>
-            </MockDatePickerProvider>,
+              </MockDatePickerProvider>
+            </MockSharedDatePickerProvider>,
           );
 
           const monthSelect = getByLabelText('Select month');
@@ -165,23 +166,23 @@ describe('packages/date-picker/menu/header', () => {
 
         test('placeholder text renders the invalid month/year', async () => {
           const { getByLabelText } = render(
-            <MockDatePickerProvider
+            <MockSharedDatePickerProvider
               value={{
-                ...defaultDatePickerContext,
+                ...defaultSharedDatePickerContext,
                 min: newUTC(2022, Month.March, 10),
                 max: newUTC(2024, Month.September, 10),
               }}
             >
-              <MockSingleDateProvider
+              <MockDatePickerProvider
                 value={
                   {
                     month: newUTC(2025, Month.July, 5),
-                  } as SingleDateContextProps
+                  } as DatePickerContextProps
                 }
               >
                 <DatePickerMenuHeader setMonth={() => {}} />
-              </MockSingleDateProvider>
-            </MockDatePickerProvider>,
+              </MockDatePickerProvider>
+            </MockSharedDatePickerProvider>,
           );
 
           const monthSelect = getByLabelText('Select month');
@@ -195,23 +196,23 @@ describe('packages/date-picker/menu/header', () => {
       describe('When `year` is before `min`', () => {
         test('all options are disabled', async () => {
           const { getByLabelText, findAllByRole } = render(
-            <MockDatePickerProvider
+            <MockSharedDatePickerProvider
               value={{
-                ...defaultDatePickerContext,
+                ...defaultSharedDatePickerContext,
                 min: newUTC(2022, Month.March, 10),
                 max: newUTC(2024, Month.September, 10),
               }}
             >
-              <MockSingleDateProvider
+              <MockDatePickerProvider
                 value={
                   {
                     month: newUTC(2021, Month.July, 5),
-                  } as SingleDateContextProps
+                  } as DatePickerContextProps
                 }
               >
                 <DatePickerMenuHeader setMonth={() => {}} />
-              </MockSingleDateProvider>
-            </MockDatePickerProvider>,
+              </MockDatePickerProvider>
+            </MockSharedDatePickerProvider>,
           );
 
           const monthSelect = getByLabelText('Select month');
@@ -229,23 +230,23 @@ describe('packages/date-picker/menu/header', () => {
 
         test('placeholder text renders the invalid month/year', async () => {
           const { getByLabelText } = render(
-            <MockDatePickerProvider
+            <MockSharedDatePickerProvider
               value={{
-                ...defaultDatePickerContext,
+                ...defaultSharedDatePickerContext,
                 min: newUTC(2022, Month.March, 10),
                 max: newUTC(2024, Month.September, 10),
               }}
             >
-              <MockSingleDateProvider
+              <MockDatePickerProvider
                 value={
                   {
                     month: newUTC(2021, Month.July, 5),
-                  } as SingleDateContextProps
+                  } as DatePickerContextProps
                 }
               >
                 <DatePickerMenuHeader setMonth={() => {}} />
-              </MockSingleDateProvider>
-            </MockDatePickerProvider>,
+              </MockDatePickerProvider>
+            </MockSharedDatePickerProvider>,
           );
 
           const monthSelect = getByLabelText('Select month');
@@ -275,27 +276,27 @@ describe('packages/date-picker/menu/header', () => {
       };
 
       return (
-        <MockDatePickerProvider
+        <MockSharedDatePickerProvider
           value={{
-            ...defaultDatePickerContext,
+            ...defaultSharedDatePickerContext,
             isSelectOpen,
             setIsSelectOpen,
           }}
         >
-          <MockSingleDateProvider
+          <MockDatePickerProvider
             value={
               {
                 month: newUTC(2022, Month.July, 1),
-              } as SingleDateContextProps
+              } as DatePickerContextProps
             }
           >
             {children}
-          </MockSingleDateProvider>
-        </MockDatePickerProvider>
+          </MockDatePickerProvider>
+        </MockSharedDatePickerProvider>
       );
     };
 
-    test('opening & closing a select menu calls `setIsSelectOpen` in DatePickerContext', async () => {
+    test('opening & closing a select menu calls `setIsSelectOpen` in SharedDatePickerContext', async () => {
       const { getByLabelText } = render(
         <AllMockProviders>
           <DatePickerMenuHeader setMonth={() => {}} />
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
index 350126a56f..1c18abd80c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
@@ -12,9 +12,9 @@ import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import { Option, Select } from '@leafygreen-ui/select';
 
-import { useDatePickerContext } from '../../../shared/components/DatePickerContext';
 import { selectElementProps } from '../../../shared/constants';
-import { useSingleDateContext } from '../../SingleDateContext';
+import { useSharedDatePickerContext } from '../../../shared/context';
+import { useDatePickerContext } from '../../DatePickerContext';
 import {
   menuHeaderSelectContainerStyles,
   menuHeaderStyles,
@@ -38,8 +38,8 @@ export const DatePickerMenuHeader = forwardRef<
   DatePickerMenuHeaderProps
 >(({ setMonth, ...rest }: DatePickerMenuHeaderProps, fwdRef) => {
   const { min, max, setIsSelectOpen, locale, isInRange } =
-    useDatePickerContext();
-  const { month } = useSingleDateContext();
+    useSharedDatePickerContext();
+  const { month } = useDatePickerContext();
 
   const monthOptions = getLocaleMonths(locale);
   const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
diff --git a/packages/date-picker/src/DatePicker/SingleDateContext/index.ts b/packages/date-picker/src/DatePicker/SingleDateContext/index.ts
deleted file mode 100644
index 5428d9e13c..0000000000
--- a/packages/date-picker/src/DatePicker/SingleDateContext/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export {
-  SingleDateContext,
-  SingleDateProvider,
-  useSingleDateContext,
-} from './SingleDateContext';
-export {
-  type SingleDateContextProps,
-  type SingleDateProviderProps,
-} from './SingleDateContext.types';
diff --git a/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
index 064a1d6e2e..cb5efb645d 100644
--- a/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts
@@ -1,14 +1,14 @@
 import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
-import { DatePickerContextProps } from '../../../shared/components/DatePickerContext';
+import { SharedDatePickerContextProps } from '../../../shared/context';
 import { SegmentRefs } from '../../../shared/hooks';
 import { DateSegment } from '../../../shared/types';
 import { getFirstEmptySegment } from '../../../shared/utils';
 
 interface GetSegmentToFocusProps {
   target: EventTarget;
-  formatParts: DatePickerContextProps['formatParts'];
+  formatParts: SharedDatePickerContextProps['formatParts'];
   segmentRefs: SegmentRefs;
 }
 
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.stories.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.stories.tsx
index d2a094fe4d..c50a9c6d8b 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.stories.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.stories.tsx
@@ -5,9 +5,9 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
 import {
-  DatePickerContextProps,
-  DatePickerProvider,
-} from '../../DatePickerContext';
+  SharedDatePickerContextProps,
+  SharedDatePickerProvider,
+} from '../../../context';
 
 import { CalendarCell } from './CalendarCell';
 import {
@@ -15,7 +15,7 @@ import {
   CalendarCellState,
 } from './CalendarCell.types';
 
-const meta: StoryMetaType<typeof CalendarCell, DatePickerContextProps> = {
+const meta: StoryMetaType<typeof CalendarCell, SharedDatePickerContextProps> = {
   title: 'Components/DatePicker/Shared/CalendarCell',
   component: CalendarCell,
   parameters: {
@@ -37,9 +37,9 @@ const meta: StoryMetaType<typeof CalendarCell, DatePickerContextProps> = {
         return (
           <LeafyGreenProvider darkMode={darkMode}>
             {/* @ts-expect-error - incomplete context value */}
-            <DatePickerProvider value={{ size }}>
+            <SharedDatePickerProvider value={{ size }}>
               <Instance {...props} />
-            </DatePickerProvider>
+            </SharedDatePickerProvider>
           </LeafyGreenProvider>
         );
       },
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index 681a40a31a..14b3ef43ae 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -14,23 +14,23 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
 import {
-  DatePickerContextProps,
-  DatePickerProvider,
-  useDatePickerContext,
-} from '../../DatePickerContext';
+  SharedDatePickerContextProps,
+  SharedDatePickerProvider,
+  useSharedDatePickerContext,
+} from '../../../context';
 import { CalendarCell } from '../CalendarCell/CalendarCell';
 
 import { CalendarGrid } from './CalendarGrid';
 
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
   <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-    <DatePickerProvider {...ctx?.args}>
+    <SharedDatePickerProvider {...ctx?.args}>
       <Story />
-    </DatePickerProvider>
+    </SharedDatePickerProvider>
   </LeafyGreenProvider>
 );
 
-const meta: StoryMetaType<typeof CalendarGrid, DatePickerContextProps> = {
+const meta: StoryMetaType<typeof CalendarGrid, SharedDatePickerContextProps> = {
   title: 'Components/DatePicker/Shared/CalendarGrid',
   component: CalendarGrid,
   parameters: {
@@ -64,7 +64,7 @@ const meta: StoryMetaType<typeof CalendarGrid, DatePickerContextProps> = {
 export default meta;
 
 export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
-  const { timeZone } = useDatePickerContext();
+  const { timeZone } = useSharedDatePickerContext();
   const [month] = useState(newUTC(2023, Month.August, 1));
 
   const [hovered, setHovered] = useState<string | undefined>();
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
index ab4546a85a..33ef117b6c 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.tsx
@@ -10,7 +10,7 @@ import {
 import { cx } from '@leafygreen-ui/emotion';
 import { Disclaimer } from '@leafygreen-ui/typography';
 
-import { useDatePickerContext } from '../../DatePickerContext';
+import { useSharedDatePickerContext } from '../../../context';
 
 import {
   calendarGridStyles,
@@ -39,7 +39,7 @@ import { CalendarGridProps } from './CalendarGrid.types';
  */
 export const CalendarGrid = forwardRef<HTMLTableElement, CalendarGridProps>(
   ({ month, children, className, ...rest }: CalendarGridProps, fwdRef) => {
-    const { locale } = useDatePickerContext();
+    const { locale } = useSharedDatePickerContext();
     const weekStartsOn = getWeekStartByLocale(locale);
     const weeks = useMemo(
       () => getWeeksArray(month, { locale }),
diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
index 5f58e42c3c..d30c5ee969 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
@@ -6,17 +6,17 @@ import { css } from '@leafygreen-ui/emotion';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 
-import { DatePickerState } from '../../../types';
 import {
-  DatePickerContextProps,
-  DatePickerProvider,
-} from '../../DatePickerContext';
+  SharedDatePickerContextProps,
+  SharedDatePickerProvider,
+} from '../../../context';
+import { DatePickerState } from '../../../types';
 
 import { DateFormField } from './DateFormField';
 
 const meta: StoryMetaType<
   typeof DateFormField,
-  Partial<DatePickerContextProps>
+  Partial<SharedDatePickerContextProps>
 > = {
   title: 'Components/DatePicker/Shared/DateFormField',
   component: DateFormField,
@@ -44,12 +44,12 @@ const meta: StoryMetaType<
           darkMode={ctx?.args.darkMode}
           baseFontSize={ctx?.args.baseFontSize}
         >
-          <DatePickerProvider
+          <SharedDatePickerProvider
             // @ts-expect-error - incomplete context value
             value={{ ...ctx?.args }}
           >
             <Instance />
-          </DatePickerProvider>
+          </SharedDatePickerProvider>
         </LeafyGreenProvider>
       ),
       args: {
@@ -83,7 +83,7 @@ export default meta;
 
 const Template: StoryFn<typeof DateFormField> = () => {
   return (
-    <DatePickerProvider
+    <SharedDatePickerProvider
       {...{
         label: 'Label',
         description: 'Description',
@@ -103,7 +103,7 @@ const Template: StoryFn<typeof DateFormField> = () => {
           placeholder="<placeholder>"
         />
       </DateFormField>
-    </DatePickerProvider>
+    </SharedDatePickerProvider>
   );
 };
 
diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
index 0d0f46dbd4..5c068baf2f 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 
 import { FormField, FormFieldInputContainer } from '@leafygreen-ui/form-field';
 
+import { useSharedDatePickerContext } from '../../../context';
 import { DatePickerState } from '../../../types';
-import { useDatePickerContext } from '../../DatePickerContext';
 import { CalendarButton } from '../CalendarButton';
 
 import { iconButtonStyles } from './DateFormField.styles';
@@ -35,7 +35,7 @@ export const DateFormField = React.forwardRef<
       isOpen,
       menuId,
       size,
-    } = useDatePickerContext();
+    } = useSharedDatePickerContext();
 
     return (
       <FormField
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
index 69baaf110d..94dfe8c27d 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -5,28 +5,28 @@ import userEvent from '@testing-library/user-event';
 
 import { Month, newUTC } from '@leafygreen-ui/date-utils';
 
-import { segmentRefsMock } from '../../../testutils';
 import {
-  DatePickerProvider,
-  DatePickerProviderProps,
-  defaultDatePickerContext,
-} from '../../DatePickerContext';
+  defaultSharedDatePickerContext,
+  SharedDatePickerProvider,
+  SharedDatePickerProviderProps,
+} from '../../../context';
+import { segmentRefsMock } from '../../../testutils';
 import { DateInputSegmentChangeEventHandler } from '../DateInputSegment/DateInputSegment.types';
 
 import { DateInputBox, type DateInputBoxProps } from '.';
 
 const renderDateInputBox = (
   props?: Omit<DateInputBoxProps, 'segmentRefs'>,
-  context?: Partial<DatePickerProviderProps>,
+  context?: Partial<SharedDatePickerProviderProps>,
 ) => {
   const result = render(
-    <DatePickerProvider {...defaultDatePickerContext} {...context}>
+    <SharedDatePickerProvider {...defaultSharedDatePickerContext} {...context}>
       <DateInputBox
         {...props}
         value={props?.value ?? null}
         segmentRefs={segmentRefsMock}
       />
-    </DatePickerProvider>,
+    </SharedDatePickerProvider>,
   );
 
   const dayInput = result.container.querySelector(
@@ -49,7 +49,7 @@ const renderDateInputBox = (
 describe('packages/date-picker/shared/date-input-box', () => {
   const onSegmentChange = jest.fn<DateInputSegmentChangeEventHandler>();
 
-  const testContext: Partial<DatePickerProviderProps> = {
+  const testContext: Partial<SharedDatePickerProviderProps> = {
     locale: 'iso8601',
     timeZone: 'UTC',
   };
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
index 374fa87039..b685a9fa1e 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -3,16 +3,16 @@ import React, { useEffect, useState } from 'react';
 import { StoryFn } from '@storybook/react';
 import { isValid } from 'date-fns';
 
-import { Month, newUTC,testLocales } from '@leafygreen-ui/date-utils';
+import { Month, newUTC, testLocales } from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { pickAndOmit, StoryMetaType, StoryType } from '@leafygreen-ui/lib';
 
-import { segmentRefsMock } from '../../../testutils';
 import {
   contextPropNames,
-  DatePickerContextProps,
-  DatePickerProvider,
-} from '../../DatePickerContext';
+  SharedDatePickerContextProps,
+  SharedDatePickerProvider,
+} from '../../../context';
+import { segmentRefsMock } from '../../../testutils';
 
 import { DateInputBox } from './DateInputBox';
 
@@ -26,14 +26,14 @@ const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => {
 
   return (
     <LeafyGreenProvider darkMode={darkMode}>
-      <DatePickerProvider {...contextProps}>
+      <SharedDatePickerProvider {...contextProps}>
         <Story {...componentProps} segmentRefs={segmentRefsMock} />
-      </DatePickerProvider>
+      </SharedDatePickerProvider>
     </LeafyGreenProvider>
   );
 };
 
-const meta: StoryMetaType<typeof DateInputBox, DatePickerContextProps> = {
+const meta: StoryMetaType<typeof DateInputBox, SharedDatePickerContextProps> = {
   title: 'Components/DatePicker/Shared/DateInputBox',
   component: DateInputBox,
   decorators: [ProviderWrapper],
@@ -92,7 +92,7 @@ export const Static: StoryFn<typeof DateInputBox> = () => {
 
 export const Formats: StoryType<
   typeof DateInputBox,
-  DatePickerContextProps
+  SharedDatePickerContextProps
 > = () => <></>;
 Formats.parameters = {
   generate: {
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index 9107c261c3..41e2b24352 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -6,6 +6,7 @@ import { useForwardedRef } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { keyMap } from '@leafygreen-ui/lib';
 
+import { useSharedDatePickerContext } from '../../../context';
 import { useDateSegments } from '../../../hooks';
 import {
   DateSegment,
@@ -22,7 +23,6 @@ import {
   isExplicitSegmentValue,
   newDateFromSegments,
 } from '../../../utils';
-import { useDatePickerContext } from '../../DatePickerContext';
 import { DateInputSegment } from '../DateInputSegment';
 import { DateInputSegmentChangeEventHandler } from '../DateInputSegment/DateInputSegment.types';
 
@@ -59,7 +59,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     }: DateInputBoxProps,
     fwdRef,
   ) => {
-    const { formatParts, disabled, min, max } = useDatePickerContext();
+    const { formatParts, disabled, min, max } = useSharedDatePickerContext();
     const { theme } = useDarkMode();
 
     const containerRef = useForwardedRef(fwdRef, null);
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 3361020277..90c6cde9d2 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
@@ -4,20 +4,20 @@ import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { defaultMax, defaultMin } from '../../../constants';
+import {
+  defaultSharedDatePickerContext,
+  SharedDatePickerProvider,
+  SharedDatePickerProviderProps,
+} from '../../../context';
 import { DateSegment } from '../../../types';
 import { getValueFormatter } from '../../../utils';
-import {
-  DatePickerProvider,
-  DatePickerProviderProps,
-  defaultDatePickerContext,
-} from '../../DatePickerContext';
 
 import { DateInputSegmentChangeEventHandler } from './DateInputSegment.types';
 import { DateInputSegment, type DateInputSegmentProps } from '.';
 
 const renderSegment = (
   props?: Partial<DateInputSegmentProps>,
-  ctx?: Partial<DatePickerProviderProps>,
+  ctx?: Partial<SharedDatePickerProviderProps>,
 ) => {
   const defaultProps = {
     value: '',
@@ -26,9 +26,9 @@ const renderSegment = (
   };
 
   const result = render(
-    <DatePickerProvider {...defaultDatePickerContext} {...ctx}>
+    <SharedDatePickerProvider {...defaultSharedDatePickerContext} {...ctx}>
       <DateInputSegment {...defaultProps} {...props} />
-    </DatePickerProvider>,
+    </SharedDatePickerProvider>,
   );
 
   const rerenderSegment = (newProps: Partial<DateInputSegmentProps>) =>
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
index fdafa48bed..833b025d3b 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
@@ -5,15 +5,18 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 
-import { DateSegmentValue } from '../../../types';
 import {
-  DatePickerContextProps,
-  DatePickerProvider,
-} from '../../DatePickerContext';
+  SharedDatePickerContextProps,
+  SharedDatePickerProvider,
+} from '../../../context';
+import { DateSegmentValue } from '../../../types';
 
 import { DateInputSegment } from './DateInputSegment';
 
-const meta: StoryMetaType<typeof DateInputSegment, DatePickerContextProps> = {
+const meta: StoryMetaType<
+  typeof DateInputSegment,
+  SharedDatePickerContextProps
+> = {
   title: 'Components/DatePicker/Shared/DateInputSegment',
   component: DateInputSegment,
   parameters: {
@@ -27,9 +30,9 @@ const meta: StoryMetaType<typeof DateInputSegment, DatePickerContextProps> = {
       },
       decorator: (Instance, ctx) => (
         // @ts-expect-error - incomplete context value
-        <DatePickerProvider value={{ size: ctx?.args.size }}>
+        <SharedDatePickerProvider value={{ size: ctx?.args.size }}>
           <Instance />
-        </DatePickerProvider>
+        </SharedDatePickerProvider>
       ),
       excludeCombinations: [
         {
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 010b49fd2a..a3ae38e55d 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -13,8 +13,8 @@ import {
   defaultMin,
   defaultPlaceholder,
 } from '../../../constants';
+import { useSharedDatePickerContext } from '../../../context';
 import { getAutoComplete, getValueFormatter } from '../../../utils';
-import { useDatePickerContext } from '../../DatePickerContext';
 
 import { calculateNewSegmentValue } from './calculateNewSegmentValue';
 import {
@@ -60,7 +60,7 @@ export const DateInputSegment = React.forwardRef<
       size,
       disabled,
       autoComplete: autoCompleteProp,
-    } = useDatePickerContext();
+    } = useSharedDatePickerContext();
     const formatter = getValueFormatter(segment);
     const autoComplete = getAutoComplete(autoCompleteProp, segment);
     const pattern = `[0-9]{${charsPerSegment[segment]}}`;
diff --git a/packages/date-picker/src/shared/components/index.ts b/packages/date-picker/src/shared/components/index.ts
index 9adeddaeb3..1b3d59912e 100644
--- a/packages/date-picker/src/shared/components/index.ts
+++ b/packages/date-picker/src/shared/components/index.ts
@@ -6,13 +6,4 @@ export {
   type CalendarGridProps,
 } from './Calendar';
 export { DateInputBox, type DateInputBoxProps } from './DateInput';
-export {
-  contextPropNames,
-  DatePickerContext,
-  type DatePickerContextProps,
-  DatePickerProvider,
-  type DatePickerProviderProps,
-  defaultDatePickerContext,
-  useDatePickerContext,
-} from './DatePickerContext';
 export { MenuWrapper, type MenuWrapperProps } from './MenuWrapper';
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx b/packages/date-picker/src/shared/context/SharedDatePickerContext.spec.tsx
similarity index 75%
rename from packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
rename to packages/date-picker/src/shared/context/SharedDatePickerContext.spec.tsx
index af42ab597c..732d553314 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.spec.tsx
+++ b/packages/date-picker/src/shared/context/SharedDatePickerContext.spec.tsx
@@ -5,24 +5,26 @@ import { renderHook } from '@testing-library/react-hooks';
 import { Month, newUTC } from '@leafygreen-ui/date-utils';
 import { consoleOnce } from '@leafygreen-ui/lib';
 
-import { MAX_DATE, MIN_DATE } from '../../constants';
+import { MAX_DATE, MIN_DATE } from '../constants';
 
 import {
-  DatePickerContextProps,
-  DatePickerProvider,
-  DatePickerProviderProps,
-  useDatePickerContext,
+  SharedDatePickerContextProps,
+  SharedDatePickerProvider,
+  SharedDatePickerProviderProps,
+  useSharedDatePickerContext,
 } from '.';
 
-const renderDatePickerProvider = (props?: Partial<DatePickerProviderProps>) => {
+const renderSharedDatePickerProvider = (
+  props?: Partial<SharedDatePickerProviderProps>,
+) => {
   const { result, rerender } = renderHook<
     PropsWithChildren<{}>,
-    DatePickerContextProps
-  >(useDatePickerContext, {
+    SharedDatePickerContextProps
+  >(useSharedDatePickerContext, {
     wrapper: ({ children }) => (
-      <DatePickerProvider label="" {...props}>
+      <SharedDatePickerProvider label="" {...props}>
         {children}
-      </DatePickerProvider>
+      </SharedDatePickerProvider>
     ),
   });
 
@@ -30,13 +32,13 @@ const renderDatePickerProvider = (props?: Partial<DatePickerProviderProps>) => {
 };
 
 describe('packages/date-picker-context', () => {
-  describe('useDatePickerContext', () => {
+  describe('useSharedDatePickerContext', () => {
     describe('min/max', () => {
       afterEach(() => {
         jest.resetAllMocks();
       });
       test('uses default min/max values when not provided', () => {
-        const { result } = renderDatePickerProvider();
+        const { result } = renderSharedDatePickerProvider();
         expect(result.current.min).toEqual(MIN_DATE);
         expect(result.current.max).toEqual(MAX_DATE);
       });
@@ -45,7 +47,7 @@ describe('packages/date-picker-context', () => {
         const testMin = newUTC(1999, Month.September, 2);
         const testMax = newUTC(2011, Month.June, 22);
 
-        const { result } = renderDatePickerProvider({
+        const { result } = renderSharedDatePickerProvider({
           min: testMin,
           max: testMax,
         });
@@ -59,7 +61,7 @@ describe('packages/date-picker-context', () => {
         const testMax = newUTC(1999, Month.September, 2);
         const testMin = newUTC(2011, Month.June, 22);
 
-        const { result } = renderDatePickerProvider({
+        const { result } = renderSharedDatePickerProvider({
           min: testMin,
           max: testMax,
         });
@@ -72,7 +74,7 @@ describe('packages/date-picker-context', () => {
         const errorSpy = jest.spyOn(consoleOnce, 'error');
         const testMax = newUTC(1967, Month.March, 10);
 
-        const { result } = renderDatePickerProvider({
+        const { result } = renderSharedDatePickerProvider({
           max: testMax,
         });
         expect(result.current.min).toEqual(MIN_DATE);
@@ -84,7 +86,7 @@ describe('packages/date-picker-context', () => {
         const errorSpy = jest.spyOn(consoleOnce, 'error');
         const testMin = newUTC(2067, Month.March, 10);
 
-        const { result } = renderDatePickerProvider({
+        const { result } = renderSharedDatePickerProvider({
           min: testMin,
         });
         expect(result.current.min).toEqual(MIN_DATE);
@@ -95,12 +97,12 @@ describe('packages/date-picker-context', () => {
 
     describe('isOpen', () => {
       test('is `false` by default', () => {
-        const { result } = renderDatePickerProvider();
+        const { result } = renderSharedDatePickerProvider();
         expect(result.current.isOpen).toBeFalsy();
       });
 
       test('setter updates the value to `true`', async () => {
-        const { result, rerender } = renderDatePickerProvider();
+        const { result, rerender } = renderSharedDatePickerProvider();
 
         act(() => result.current.setOpen(true));
         rerender();
@@ -112,12 +114,12 @@ describe('packages/date-picker-context', () => {
 
     describe('isDirty', () => {
       test('is `false` by default', () => {
-        const { result } = renderDatePickerProvider();
+        const { result } = renderSharedDatePickerProvider();
         expect(result.current.isDirty).toBeFalsy();
       });
 
       test('setter updates the value to `true`', async () => {
-        const { result, rerender } = renderDatePickerProvider();
+        const { result, rerender } = renderSharedDatePickerProvider();
 
         act(() => result.current.setIsDirty(true));
         rerender();
@@ -129,12 +131,12 @@ describe('packages/date-picker-context', () => {
 
     describe('isSelectOpen', () => {
       test('is `false` by default', () => {
-        const { result } = renderDatePickerProvider();
+        const { result } = renderSharedDatePickerProvider();
         expect(result.current.isSelectOpen).toBeFalsy();
       });
 
       test('setter updates the value to `true`', async () => {
-        const { result, rerender } = renderDatePickerProvider();
+        const { result, rerender } = renderSharedDatePickerProvider();
 
         act(() => result.current.setIsSelectOpen(true));
         rerender();
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/shared/context/SharedDatePickerContext.tsx
similarity index 61%
rename from packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
rename to packages/date-picker/src/shared/context/SharedDatePickerContext.tsx
index 18832e4711..ff75cde738 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/shared/context/SharedDatePickerContext.tsx
@@ -3,28 +3,27 @@ import { createContext, PropsWithChildren, useContext } from 'react';
 
 import { useIdAllocator } from '@leafygreen-ui/hooks';
 
-import { AutoComplete } from '../../types';
+import { AutoComplete } from '../types';
 
 import {
-  DatePickerContextProps,
-  DatePickerProviderProps,
-} from './DatePickerContext.types';
+  SharedDatePickerContextProps,
+  SharedDatePickerProviderProps,
+} from './SharedDatePickerContext.types';
 import {
-  defaultDatePickerContext,
+  defaultSharedDatePickerContext,
   getContextProps,
-} from './DatePickerContext.utils';
+} from './SharedDatePickerContext.utils';
 import { useDatePickerErrorNotifications } from './useDatePickerErrorNotifications';
 
-/** Create the DatePickerContext */
-export const DatePickerContext = createContext<DatePickerContextProps>(
-  defaultDatePickerContext,
-);
+/** Create the SharedDatePickerContext */
+export const SharedDatePickerContext =
+  createContext<SharedDatePickerContextProps>(defaultSharedDatePickerContext);
 
 // TODO: Consider renaming this to `SharedDatePickerContext`,
-// and use `DatePickerContext` for what's currently `SingleDateContext`
+// and use `SharedDatePickerContext` for what's currently `DatePickerContext`
 
-/** The Provider component for DatePickerContext */
-export const DatePickerProvider = ({
+/** The Provider component for SharedDatePickerContext */
+export const SharedDatePickerProvider = ({
   children,
   initialOpen = false,
   disabled = false,
@@ -32,7 +31,7 @@ export const DatePickerProvider = ({
   state,
   autoComplete = AutoComplete.Off,
   ...rest
-}: PropsWithChildren<DatePickerProviderProps>) => {
+}: PropsWithChildren<SharedDatePickerProviderProps>) => {
   const isInitiallyOpen = disabled ? false : initialOpen;
 
   const [isOpen, setOpen] = useState<boolean>(isInitiallyOpen);
@@ -49,7 +48,7 @@ export const DatePickerProvider = ({
   } = useDatePickerErrorNotifications(state, errorMessage);
 
   return (
-    <DatePickerContext.Provider
+    <SharedDatePickerContext.Provider
       value={{
         ...contextValue,
         disabled,
@@ -67,9 +66,10 @@ export const DatePickerProvider = ({
       }}
     >
       {children}
-    </DatePickerContext.Provider>
+    </SharedDatePickerContext.Provider>
   );
 };
 
-/** A hook to access {@link DatePickerContextProps} */
-export const useDatePickerContext = () => useContext(DatePickerContext);
+/** A hook to access {@link SharedDatePickerContextProps} */
+export const useSharedDatePickerContext = () =>
+  useContext(SharedDatePickerContext);
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/shared/context/SharedDatePickerContext.types.ts
similarity index 85%
rename from packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
rename to packages/date-picker/src/shared/context/SharedDatePickerContext.types.ts
index 4d14cf30c8..f3bb94dac8 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/shared/context/SharedDatePickerContext.types.ts
@@ -1,4 +1,4 @@
-import { BaseDatePickerProps, DatePickerState } from '../../types';
+import { BaseDatePickerProps, DatePickerState } from '../types';
 
 import { UseDatePickerErrorNotificationsReturnObject } from './useDatePickerErrorNotifications';
 
@@ -8,13 +8,13 @@ export interface StateNotification {
 }
 
 /** The props expected to pass int the provider */
-export interface DatePickerProviderProps extends BaseDatePickerProps {}
+export interface SharedDatePickerProviderProps extends BaseDatePickerProps {}
 
 /**
  * The values in context
  */
-export interface DatePickerContextProps
-  extends Omit<Required<DatePickerProviderProps>, 'state'>,
+export interface SharedDatePickerContextProps
+  extends Omit<Required<SharedDatePickerProviderProps>, 'state'>,
     UseDatePickerErrorNotificationsReturnObject {
   /** The earliest date accepted */
   min: Date;
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts b/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
similarity index 74%
rename from packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
rename to packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
index cca2045ceb..871ab5cd65 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/DatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
@@ -6,24 +6,20 @@ import { getISODate, toDate } from '@leafygreen-ui/date-utils';
 import { consoleOnce } from '@leafygreen-ui/lib';
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
-import { MAX_DATE, MIN_DATE } from '../../constants';
-import {
-  AutoComplete,
-  BaseDatePickerProps,
-  DatePickerState,
-} from '../../types';
-import { getFormatParts } from '../../utils';
+import { MAX_DATE, MIN_DATE } from '../constants';
+import { AutoComplete, BaseDatePickerProps, DatePickerState } from '../types';
+import { getFormatParts } from '../utils';
 
 import {
-  DatePickerContextProps,
-  DatePickerProviderProps,
-} from './DatePickerContext.types';
+  SharedDatePickerContextProps,
+  SharedDatePickerProviderProps,
+} from './SharedDatePickerContext.types';
 
-export type ContextPropKeys = keyof DatePickerProviderProps &
+export type ContextPropKeys = keyof SharedDatePickerProviderProps &
   keyof BaseDatePickerProps;
 
 /**
- * Prop names that are in both DatePickerProps and DatePickerProviderProps
+ * Prop names that are in both DatePickerProps and SharedDatePickerProviderProps
  * */
 export const contextPropNames: Array<ContextPropKeys> = [
   'label',
@@ -42,7 +38,7 @@ export const contextPropNames: Array<ContextPropKeys> = [
 ];
 
 /** The default context value */
-export const defaultDatePickerContext: DatePickerContextProps = {
+export const defaultSharedDatePickerContext: SharedDatePickerContextProps = {
   label: '',
   description: '',
   locale: 'iso8601',
@@ -91,8 +87,8 @@ export const getIsInRange =
  * Returns a valid `Context` value given optional provider props
  */
 export const getContextProps = (
-  providerProps: DatePickerProviderProps,
-): DatePickerContextProps => {
+  providerProps: SharedDatePickerProviderProps,
+): SharedDatePickerContextProps => {
   const {
     min: minProp,
     max: maxProp,
@@ -107,8 +103,8 @@ export const getContextProps = (
 
   const [min, max] = getMinMax(toDate(minProp), toDate(maxProp));
 
-  const providerValue: DatePickerContextProps = {
-    ...defaults(rest, defaultDatePickerContext),
+  const providerValue: SharedDatePickerContextProps = {
+    ...defaults(rest, defaultSharedDatePickerContext),
     timeZone,
     min,
     max,
@@ -124,8 +120,8 @@ export const getContextProps = (
 
 const getMinMax = (min: Date | null, max: Date | null): [Date, Date] => {
   const defaultRange: [Date, Date] = [
-    defaultDatePickerContext.min,
-    defaultDatePickerContext.max,
+    defaultSharedDatePickerContext.min,
+    defaultSharedDatePickerContext.max,
   ];
 
   // if both are defined
@@ -143,31 +139,31 @@ const getMinMax = (min: Date | null, max: Date | null): [Date, Date] => {
 
     return [min, max];
   } else if (min) {
-    if (isBefore(defaultDatePickerContext.max, min)) {
+    if (isBefore(defaultSharedDatePickerContext.max, min)) {
       consoleOnce.error(
         `LeafyGreen DatePicker: Provided min date (${getISODate(
           min,
         )}) is after the default max date (${getISODate(
-          defaultDatePickerContext.max,
+          defaultSharedDatePickerContext.max,
         )}). Using default values.`,
       );
       return defaultRange;
     }
 
-    return [min, defaultDatePickerContext.max];
+    return [min, defaultSharedDatePickerContext.max];
   } else if (max) {
-    if (isBefore(max, defaultDatePickerContext.min)) {
+    if (isBefore(max, defaultSharedDatePickerContext.min)) {
       consoleOnce.error(
         `LeafyGreen DatePicker: Provided max date (${getISODate(
           max,
         )}) is before the default min date (${getISODate(
-          defaultDatePickerContext.min,
+          defaultSharedDatePickerContext.min,
         )}). Using default values.`,
       );
       return defaultRange;
     }
 
-    return [defaultDatePickerContext.min, max];
+    return [defaultSharedDatePickerContext.min, max];
   }
 
   return defaultRange;
diff --git a/packages/date-picker/src/shared/context/index.ts b/packages/date-picker/src/shared/context/index.ts
new file mode 100644
index 0000000000..e05fe34680
--- /dev/null
+++ b/packages/date-picker/src/shared/context/index.ts
@@ -0,0 +1,14 @@
+export {
+  SharedDatePickerContext,
+  SharedDatePickerProvider,
+  useSharedDatePickerContext,
+} from './SharedDatePickerContext';
+export {
+  type SharedDatePickerContextProps,
+  type SharedDatePickerProviderProps,
+} from './SharedDatePickerContext.types';
+export {
+  type ContextPropKeys,
+  contextPropNames,
+  defaultSharedDatePickerContext,
+} from './SharedDatePickerContext.utils';
diff --git a/packages/date-picker/src/shared/components/DatePickerContext/useDatePickerErrorNotifications.ts b/packages/date-picker/src/shared/context/useDatePickerErrorNotifications.ts
similarity index 95%
rename from packages/date-picker/src/shared/components/DatePickerContext/useDatePickerErrorNotifications.ts
rename to packages/date-picker/src/shared/context/useDatePickerErrorNotifications.ts
index 1b4dce2bdd..c38ef8f0ee 100644
--- a/packages/date-picker/src/shared/components/DatePickerContext/useDatePickerErrorNotifications.ts
+++ b/packages/date-picker/src/shared/context/useDatePickerErrorNotifications.ts
@@ -1,8 +1,8 @@
 import { useMemo, useState } from 'react';
 
-import { DatePickerState } from '../../types';
+import { DatePickerState } from '../types';
 
-import { StateNotification } from './DatePickerContext.types';
+import { StateNotification } from './SharedDatePickerContext.types';
 
 export interface UseDatePickerErrorNotificationsReturnObject {
   stateNotification: StateNotification;
diff --git a/packages/date-picker/src/shared/index.ts b/packages/date-picker/src/shared/index.ts
index e7f8eabcbf..5820ebd168 100644
--- a/packages/date-picker/src/shared/index.ts
+++ b/packages/date-picker/src/shared/index.ts
@@ -1,5 +1,6 @@
 export * from './components';
 export * from './constants';
+export * from './context';
 export * from './hooks';
 export * from './types';
 export * from './utils';
diff --git a/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts b/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
index 52fdcdfefc..4af8651ef3 100644
--- a/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
+++ b/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
@@ -6,18 +6,18 @@ import { pickAndOmit } from '@leafygreen-ui/lib';
 import {
   ContextPropKeys,
   contextPropNames,
-  DatePickerProviderProps,
-} from '../../components/DatePickerContext';
+  SharedDatePickerProviderProps,
+} from '../../context';
 import { BaseDatePickerProps } from '../../types';
 
 export interface ProviderPropsObject<T> {
   leafyGreenProviderProps: LeafyGreenProviderProps;
-  datePickerProviderProps: DatePickerProviderProps;
+  datePickerProviderProps: SharedDatePickerProviderProps;
   storyProps: T;
 }
 
 export const getProviderPropsFromStoryContext = <P = BaseDatePickerProps>(
-  ctx: StoryContext<Partial<P & DatePickerProviderProps>>,
+  ctx: StoryContext<Partial<P & SharedDatePickerProviderProps>>,
 ): ProviderPropsObject<Partial<Omit<P, ContextPropKeys>>> => {
   const [
     { darkMode, baseFontSize, ...datePickerProviderProps },
diff --git a/packages/date-picker/src/shared/utils/getFirstEmptySegment/index.ts b/packages/date-picker/src/shared/utils/getFirstEmptySegment/index.ts
index 74196ed07d..93830e4748 100644
--- a/packages/date-picker/src/shared/utils/getFirstEmptySegment/index.ts
+++ b/packages/date-picker/src/shared/utils/getFirstEmptySegment/index.ts
@@ -1,4 +1,4 @@
-import { DatePickerContextProps } from '../../components/DatePickerContext';
+import { SharedDatePickerContextProps } from '../../context';
 import { SegmentRefs } from '../../hooks';
 import { DateSegment } from '../../types';
 
@@ -10,7 +10,7 @@ export const getFirstEmptySegment = ({
   formatParts,
   segmentRefs,
 }: {
-  formatParts: Required<DatePickerContextProps>['formatParts'];
+  formatParts: Required<SharedDatePickerContextProps>['formatParts'];
   segmentRefs: SegmentRefs;
 }) => {
   // if 1+ are empty, focus the first empty one
diff --git a/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts b/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts
index b52d90eb64..c298bddd5a 100644
--- a/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts
+++ b/packages/date-picker/src/shared/utils/getRelativeSegment/index.ts
@@ -1,14 +1,14 @@
 import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
-import { DatePickerContextProps } from '../../components/DatePickerContext';
+import { SharedDatePickerContextProps } from '../../context';
 import { SegmentRefs } from '../../hooks';
 import { DateSegment } from '../../types';
 
 type RelativeDirection = 'next' | 'prev' | 'first' | 'last';
 interface GetRelativeSegmentContext {
   segment: HTMLInputElement | React.RefObject<HTMLInputElement>;
-  formatParts: DatePickerContextProps['formatParts'];
+  formatParts: SharedDatePickerContextProps['formatParts'];
   segmentRefs: SegmentRefs;
 }
 
@@ -23,7 +23,7 @@ export const getRelativeSegment = (
     formatParts,
   }: {
     segment: DateSegment;
-    formatParts: DatePickerContextProps['formatParts'];
+    formatParts: SharedDatePickerContextProps['formatParts'];
   },
 ): DateSegment | undefined => {
   if (

From 76ffbf321f54a3c348cbba9e887aa7d35fcafcf6 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Wed, 13 Dec 2023 14:28:44 -0500
Subject: [PATCH 329/351] Date Picker [LG-3886] aria labels (#2135)

* add aria types

* add type test

* update DatePickerContextProps

* add changeset

* add more tests

* remove aria-label

* add a11y to dep

* add aria types

* add type test

* update DatePickerContextProps

* add changeset

* add more tests

* remove aria-label

* add a11y to dep

* a11y, not ally
---
 .changeset/stale-jeans-travel.md              |  5 ++
 packages/a11y/src/AriaLabelProps.ts           |  6 +-
 packages/date-picker/package.json             |  1 +
 .../src/DatePicker/DatePicker.spec.tsx        | 82 +++++++++++++++++++
 .../date-picker/src/DatePicker/DatePicker.tsx |  4 +-
 .../src/DatePicker/DatePicker.types.ts        |  4 +-
 .../DateInput/DateFormField/DateFormField.tsx |  8 ++
 .../context/SharedDatePickerContext.tsx       | 12 +++
 .../context/SharedDatePickerContext.types.ts  | 27 +++++-
 .../context/SharedDatePickerContext.utils.ts  |  4 +
 .../getProviderPropsFromStoryContext/index.ts |  2 +
 .../shared/types/BaseDatePickerProps.types.ts | 15 ++--
 packages/date-picker/tsconfig.json            |  3 +
 13 files changed, 156 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/stale-jeans-travel.md

diff --git a/.changeset/stale-jeans-travel.md b/.changeset/stale-jeans-travel.md
new file mode 100644
index 0000000000..bbfeb0cf30
--- /dev/null
+++ b/.changeset/stale-jeans-travel.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/a11y': patch
+---
+
+Update `AriaLabelProps` `label` type from `string` to `ReactNode`
diff --git a/packages/a11y/src/AriaLabelProps.ts b/packages/a11y/src/AriaLabelProps.ts
index d722630357..43ddb79243 100644
--- a/packages/a11y/src/AriaLabelProps.ts
+++ b/packages/a11y/src/AriaLabelProps.ts
@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 /**
  * A union interface requiring _either_ `aria-label` or `aria-labelledby`
  */
@@ -43,7 +45,7 @@ export type AriaLabelPropsWithLabel =
        *
        * Optional if `aria-labelledby` or `aria-label` is provided
        */
-      label?: string;
+      label?: ReactNode;
     } & AriaLabelProps)
   | ({
       /**
@@ -51,5 +53,5 @@ export type AriaLabelPropsWithLabel =
        *
        * Optional if `aria-labelledby` or `aria-label` is provided
        */
-      label: string;
+      label: ReactNode;
     } & Partial<AriaLabelProps>);
diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 629bc4f302..6675699eae 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -15,6 +15,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@leafygreen-ui/a11y": "^1.4.11",
     "@leafygreen-ui/date-utils": "^0.1.0",
     "@leafygreen-ui/emotion": "^4.0.7",
     "@leafygreen-ui/form-field": "^0.2.0",
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index e27168489a..f7831ab455 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -88,6 +88,42 @@ describe('packages/date-picker', () => {
         expect(inputContainer).toBeInTheDocument();
       });
 
+      test('formField contains aria-label when a label is not provided', () => {
+        const { getByRole } = render(
+          <DatePicker aria-label="Label" data-testid="lg-date-picker" />,
+        );
+        const inputContainer = getByRole('combobox');
+        expect(inputContainer).toHaveAttribute('aria-label', 'Label');
+      });
+
+      test('formField contains aria-labelledby when a label is not provided', () => {
+        const { getByRole } = render(
+          <DatePicker aria-labelledby="Label" data-testid="lg-date-picker" />,
+        );
+        const inputContainer = getByRole('combobox');
+        expect(inputContainer).toHaveAttribute('aria-labelledby', 'Label');
+      });
+
+      test('formField only contains a label if label, aria-label, and aria-labelledby are passes', () => {
+        const { getByRole, getByTestId } = render(
+          <DatePicker
+            label="Label"
+            aria-labelledby="AriaLabelledby"
+            aria-label="AriaLabel"
+            data-testid="lg-date-picker"
+          />,
+        );
+        const formField = getByTestId('lg-date-picker');
+        const inputContainer = getByRole('combobox');
+        expect(formField.querySelector('label')).toBeInTheDocument();
+        expect(formField.querySelector('label')).toHaveTextContent('Label');
+        expect(inputContainer).not.toHaveAttribute(
+          'aria-labelledby',
+          'AriaLabelledby',
+        );
+        expect(inputContainer).not.toHaveAttribute('aria-label', 'AriaLabel');
+      });
+
       test('renders 3 inputs', () => {
         const { dayInput, monthInput, yearInput } = renderDatePicker();
         expect(dayInput).toBeInTheDocument();
@@ -113,6 +149,20 @@ describe('packages/date-picker', () => {
         expect(yearInput.value).toEqual('2023');
       });
 
+      describe('console', () => {
+        test('console warning when no labels are passed in', () => {
+          const consoleSpy = jest
+            .spyOn(console, 'warn')
+            .mockImplementation(() => {});
+
+          /* @ts-expect-error - needs label/aria-label/aria-labelledby */
+          render(<DatePicker />);
+          expect(consoleSpy).toHaveBeenCalledWith(
+            'For screen-reader accessibility, label, aria-labelledby, or aria-label must be provided to DatePicker component',
+          );
+        });
+      });
+
       describe('Error states', () => {
         test('renders error state when `state` is "error"', () => {
           const { getByRole } = render(
@@ -2683,4 +2733,36 @@ describe('packages/date-picker', () => {
       });
     });
   });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  test.skip('Types behave as expected', () => {
+    <>
+      {/* @ts-expect-error - needs label/aria-label/aria-labelledby */}
+      <DatePicker />
+
+      <DatePicker label="Pick a date" />
+      <DatePicker aria-label="Pick a date" />
+      <DatePicker aria-labelledby="Pick a date" />
+      <DatePicker
+        label="Pick a date"
+        min={new Date()}
+        max={new Date()}
+        value={new Date()}
+        onDateChange={() => {}}
+        initialValue={new Date()}
+        handleValidation={() => {}}
+        onChange={() => {}}
+        locale="iso8601"
+        timeZone="utc"
+        baseFontSize={13}
+        disabled={false}
+        size="default"
+        state="none"
+        errorMessage="?"
+        initialOpen={false}
+        autoComplete="off"
+        darkMode={false}
+      />
+    </>;
+  });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 335822b7c2..43da9e94b0 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -86,8 +86,8 @@ DatePicker.propTypes = {
   description: PropTypes.node,
   locale: PropTypes.string,
   timeZone: PropTypes.string,
-  min: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
-  max: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+  min: PropTypes.instanceOf(Date),
+  max: PropTypes.instanceOf(Date),
   baseFontSize: PropTypes.oneOf(Object.values(BaseFontSize)),
   disabled: PropTypes.bool,
   size: PropTypes.oneOf(Object.values(Size)),
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index dbb839297a..3e5f8bf87d 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -4,7 +4,7 @@ import { DateType } from '@leafygreen-ui/date-utils';
 
 import { BaseDatePickerProps } from '../shared/types';
 
-export interface DatePickerProps extends BaseDatePickerProps {
+export type DatePickerProps = {
   /**
    * The selected date, given in UTC time
    */
@@ -35,4 +35,4 @@ export interface DatePickerProps extends BaseDatePickerProps {
    * Callback fired when any segment changes, (but not necessarily a full value)
    */
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-}
+} & BaseDatePickerProps;
diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
index 5c068baf2f..3f5aa93f07 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
@@ -35,6 +35,8 @@ export const DateFormField = React.forwardRef<
       isOpen,
       menuId,
       size,
+      ariaLabelProp,
+      ariaLabelledbyProp,
     } = useSharedDatePickerContext();
 
     return (
@@ -51,6 +53,12 @@ export const DateFormField = React.forwardRef<
         <FormFieldInputContainer
           role="combobox"
           tabIndex={-1}
+          aria-label={!label && ariaLabelProp ? ariaLabelProp : undefined}
+          aria-labelledby={
+            !label && !ariaLabelProp && ariaLabelledbyProp
+              ? ariaLabelledbyProp
+              : undefined
+          }
           aria-expanded={isOpen}
           aria-controls={menuId}
           aria-invalid={state === DatePickerState.Error}
diff --git a/packages/date-picker/src/shared/context/SharedDatePickerContext.tsx b/packages/date-picker/src/shared/context/SharedDatePickerContext.tsx
index ff75cde738..eceba0ca40 100644
--- a/packages/date-picker/src/shared/context/SharedDatePickerContext.tsx
+++ b/packages/date-picker/src/shared/context/SharedDatePickerContext.tsx
@@ -30,6 +30,9 @@ export const SharedDatePickerProvider = ({
   errorMessage,
   state,
   autoComplete = AutoComplete.Off,
+  label = '',
+  'aria-label': ariaLabelProp = '',
+  'aria-labelledby': ariaLabelledbyProp = '',
   ...rest
 }: PropsWithChildren<SharedDatePickerProviderProps>) => {
   const isInitiallyOpen = disabled ? false : initialOpen;
@@ -47,6 +50,12 @@ export const SharedDatePickerProvider = ({
     clearInternalErrorMessage,
   } = useDatePickerErrorNotifications(state, errorMessage);
 
+  if (!label && !ariaLabelledbyProp && !ariaLabelProp) {
+    console.warn(
+      'For screen-reader accessibility, label, aria-labelledby, or aria-label must be provided to DatePicker component',
+    );
+  }
+
   return (
     <SharedDatePickerContext.Provider
       value={{
@@ -63,6 +72,9 @@ export const SharedDatePickerProvider = ({
         setInternalErrorMessage,
         clearInternalErrorMessage,
         autoComplete,
+        label,
+        ariaLabelProp,
+        ariaLabelledbyProp,
       }}
     >
       {children}
diff --git a/packages/date-picker/src/shared/context/SharedDatePickerContext.types.ts b/packages/date-picker/src/shared/context/SharedDatePickerContext.types.ts
index f3bb94dac8..7a1b8772de 100644
--- a/packages/date-picker/src/shared/context/SharedDatePickerContext.types.ts
+++ b/packages/date-picker/src/shared/context/SharedDatePickerContext.types.ts
@@ -1,3 +1,7 @@
+import { ReactNode } from 'react';
+
+import { AriaLabelPropsWithLabel } from '@leafygreen-ui/a11y';
+
 import { BaseDatePickerProps, DatePickerState } from '../types';
 
 import { UseDatePickerErrorNotificationsReturnObject } from './useDatePickerErrorNotifications';
@@ -6,15 +10,28 @@ export interface StateNotification {
   state: DatePickerState;
   message: string;
 }
+type AriaLabelkeys = keyof AriaLabelPropsWithLabel;
 
 /** The props expected to pass int the provider */
-export interface SharedDatePickerProviderProps extends BaseDatePickerProps {}
+export type SharedDatePickerProviderProps = Omit<
+  BaseDatePickerProps,
+  AriaLabelkeys
+> & {
+  label?: ReactNode;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+};
+
+type AriaLabelkeysWithoutLabel = Exclude<AriaLabelkeys, 'label'>;
 
 /**
  * The values in context
  */
 export interface SharedDatePickerContextProps
-  extends Omit<Required<SharedDatePickerProviderProps>, 'state'>,
+  extends Omit<
+      Required<SharedDatePickerProviderProps>,
+      'state' | AriaLabelkeysWithoutLabel
+    >,
     UseDatePickerErrorNotificationsReturnObject {
   /** The earliest date accepted */
   min: Date;
@@ -57,4 +74,10 @@ export interface SharedDatePickerContextProps
 
   /** Setter for whether the select menus are open inside the menu */
   setIsSelectOpen: React.Dispatch<React.SetStateAction<boolean>>;
+
+  /** aria-label */
+  ariaLabelProp: string;
+
+  /** aria-labelledby */
+  ariaLabelledbyProp: string;
 }
diff --git a/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts b/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
index 871ab5cd65..ac64623be3 100644
--- a/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
@@ -22,6 +22,8 @@ export type ContextPropKeys = keyof SharedDatePickerProviderProps &
  * Prop names that are in both DatePickerProps and SharedDatePickerProviderProps
  * */
 export const contextPropNames: Array<ContextPropKeys> = [
+  'aria-label',
+  'aria-labelledby',
   'label',
   'description',
   'locale',
@@ -39,6 +41,8 @@ export const contextPropNames: Array<ContextPropKeys> = [
 
 /** The default context value */
 export const defaultSharedDatePickerContext: SharedDatePickerContextProps = {
+  ariaLabelProp: '',
+  ariaLabelledbyProp: '',
   label: '',
   description: '',
   locale: 'iso8601',
diff --git a/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts b/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
index 4af8651ef3..90cc2b7bff 100644
--- a/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
+++ b/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
@@ -31,6 +31,8 @@ export const getProviderPropsFromStoryContext = <P = BaseDatePickerProps>(
     },
     datePickerProviderProps: {
       label: '',
+      'aria-label': '',
+      'aria-labelledby': '',
       ...datePickerProviderProps,
     },
     storyProps,
diff --git a/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
index f4e0b00a24..526d490abf 100644
--- a/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
+++ b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
@@ -1,14 +1,10 @@
+import { AriaLabelPropsWithLabel } from '@leafygreen-ui/a11y';
 import { LocaleString } from '@leafygreen-ui/date-utils';
 import { DarkModeProps } from '@leafygreen-ui/lib';
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
 import { AutoComplete, DatePickerState } from './types';
-export interface BaseDatePickerProps extends DarkModeProps {
-  /**
-   * A label for the input
-   */
-  label: React.ReactNode;
-
+export type BaseDatePickerProps = {
   /**
    * A description for the date picker.
    *
@@ -38,10 +34,10 @@ export interface BaseDatePickerProps extends DarkModeProps {
   timeZone?: string;
 
   /** The earliest date accepted */
-  min?: string | Date;
+  min?: Date;
 
   /** The latest date accepted */
-  max?: string | Date;
+  max?: Date;
 
   /**
    * The base font size of the input. Inherits from the nearest LeafyGreenProvider
@@ -74,4 +70,5 @@ export interface BaseDatePickerProps extends DarkModeProps {
    * @default 'off'
    */
   autoComplete?: AutoComplete;
-}
+} & DarkModeProps &
+  AriaLabelPropsWithLabel;
diff --git a/packages/date-picker/tsconfig.json b/packages/date-picker/tsconfig.json
index 9c4efec9d9..4c1564dce1 100644
--- a/packages/date-picker/tsconfig.json
+++ b/packages/date-picker/tsconfig.json
@@ -22,6 +22,9 @@
     "**/*.story.*"
   ],
   "references": [
+    {
+      "path": "../a11y"
+    },
     {
       "path": "../button"
     },

From 63fcf6168c8d3a4b4b8da76329e0aba5717bbcaf Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Thu, 14 Dec 2023 11:30:34 -0500
Subject: [PATCH 330/351] Date picker [LG-3888, LG-3890] timezone prop today 
 (#2132)

* adds timezone highlight tests

* creates getSimulatedTZDate

* Update isSameTZDay.ts

* getISODateTZ isSameTZMonth

* isSameTZMonth tests

* comments

* adds todos

* Update SingleDateContext.tsx

* typo

* cleanup Content & Menu components

* getFirstOfUTCMonth

* fix getInitialHighlight

* updates menu tests

* more reorganizing tests

* update month queries

* Update DatePickerMenu.spec.tsx

* LG 3890 chevron focus

* fixes testValues

* re-enable tests

* docs
---
 .../src/DatePicker/DatePicker.spec.tsx        | 293 +++++++-----------
 .../src/DatePicker/DatePicker.testutils.tsx   |   6 +-
 .../src/DatePicker/DatePicker.types.ts        |  27 +-
 .../DatePickerContent/DatePickerContent.tsx   |  54 +---
 .../DatePickerContext/DatePickerContext.tsx   |  31 +-
 .../DatePickerContext.types.ts                |  10 +-
 .../useDatePickerComponentRefs.ts             |   8 +
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 271 ++++++++--------
 .../DatePickerMenu/DatePickerMenu.tsx         | 134 ++++++--
 .../DatePickerMenuHeader.spec.tsx             |  16 +-
 .../DatePickerMenuHeader.tsx                  |   4 +-
 .../utils/getNewHighlight/index.ts            |   4 +-
 .../getInitialHighlight.spec.ts               |  25 +-
 .../utils/getInitialHighlight/index.ts        |  15 +-
 .../shared/types/BaseDatePickerProps.types.ts |  34 +-
 .../date-utils/src/getFirstOfMonth/index.ts   |   1 -
 .../getFirstOfUTCMonth.spec.ts}               |  10 +-
 .../getFirstOfUTCMonth.ts}                    |   2 +-
 .../src/getFirstOfUTCMonth/index.ts           |   1 +
 .../src/getISODateTZ/getISODateTZ.ts          |  19 ++
 packages/date-utils/src/getISODateTZ/index.ts |   1 +
 .../getSimulatedTZDate.spec.ts                |  25 ++
 .../getSimulatedTZDate/getSimulatedTZDate.ts  |  24 ++
 .../src/getSimulatedTZDate/index.ts           |   1 +
 packages/date-utils/src/index.ts              |   5 +-
 .../date-utils/src/isSameTZDay/isSameTZDay.ts |  23 +-
 .../date-utils/src/isSameTZMonth/index.ts     |   1 +
 .../src/isSameTZMonth/isSameTZMonth.spec.ts   |  19 ++
 .../src/isSameTZMonth/isSameTZMonth.ts        |  31 ++
 packages/date-utils/src/testing/testValues.ts |   7 +-
 30 files changed, 639 insertions(+), 463 deletions(-)
 delete mode 100644 packages/date-utils/src/getFirstOfMonth/index.ts
 rename packages/date-utils/src/{getFirstOfMonth/getFirstOfMonth.spec.ts => getFirstOfUTCMonth/getFirstOfUTCMonth.spec.ts} (59%)
 rename packages/date-utils/src/{getFirstOfMonth/getFirstOfMonth.ts => getFirstOfUTCMonth/getFirstOfUTCMonth.ts} (80%)
 create mode 100644 packages/date-utils/src/getFirstOfUTCMonth/index.ts
 create mode 100644 packages/date-utils/src/getISODateTZ/getISODateTZ.ts
 create mode 100644 packages/date-utils/src/getISODateTZ/index.ts
 create mode 100644 packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.spec.ts
 create mode 100644 packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.ts
 create mode 100644 packages/date-utils/src/getSimulatedTZDate/index.ts
 create mode 100644 packages/date-utils/src/isSameTZMonth/index.ts
 create mode 100644 packages/date-utils/src/isSameTZMonth/isSameTZMonth.spec.ts
 create mode 100644 packages/date-utils/src/isSameTZMonth/isSameTZMonth.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index f7831ab455..001a822f90 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -19,6 +19,7 @@ import {
 import {
   mockTimeZone,
   testTimeZones,
+  undefinedTZ,
 } from '@leafygreen-ui/date-utils/src/testing';
 import {
   eventContainingTargetValue,
@@ -38,14 +39,16 @@ import {
 } from './DatePicker.testutils';
 import { DatePicker } from '.';
 
-const testToday = newUTC(2023, Month.December, 26);
+// Set the current time to noon UTC on 2023-12-25
+const testToday = newUTC(2023, Month.December, 25, 12);
 
 describe('packages/date-picker', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
   beforeEach(() => {
-    // Set the current time to midnight UTC on 2023-12-26
-    jest.useFakeTimers().setSystemTime(testToday);
+    jest.setSystemTime(testToday);
   });
-
   afterEach(() => {
     jest.restoreAllMocks();
   });
@@ -133,18 +136,18 @@ describe('packages/date-picker', () => {
 
       test('renders `value` prop', () => {
         const { dayInput, monthInput, yearInput } = renderDatePicker({
-          value: new Date(Date.now()),
+          value: newUTC(2023, Month.December, 25),
         });
-        expect(dayInput.value).toEqual('26');
+        expect(dayInput.value).toEqual('25');
         expect(monthInput.value).toEqual('12');
         expect(yearInput.value).toEqual('2023');
       });
 
       test('renders `initialValue` prop', () => {
         const { dayInput, monthInput, yearInput } = renderDatePicker({
-          initialValue: new Date(Date.now()),
+          initialValue: newUTC(2023, Month.December, 25),
         });
-        expect(dayInput.value).toEqual('26');
+        expect(dayInput.value).toEqual('25');
         expect(monthInput.value).toEqual('12');
         expect(yearInput.value).toEqual('2023');
       });
@@ -554,194 +557,118 @@ describe('packages/date-picker', () => {
           await waitFor(() => expect(menuContainerEl).not.toBeInTheDocument());
         });
 
-        describe('if no value is set', () => {
-          describe.each(testTimeZones)(
-            'when system time is in $tz',
-            ({ tz, UTCOffset }) => {
-              const expectedISO = '2023-12-' + (UTCOffset < 0 ? '24' : '25');
-
-              beforeEach(() => {
-                mockTimeZone(tz, UTCOffset);
-                jest.setSystemTime(newUTC(2023, Month.December, 25, 0, 0)); // Midnight UTC
-              });
-              afterEach(() => {
-                jest.restoreAllMocks();
-              });
-
-              test('menu opens to current month', async () => {
-                const { calendarButton, waitForMenuToOpen } =
-                  renderDatePicker();
-                userEvent.click(calendarButton);
-                const { calendarGrid, monthSelect, yearSelect } =
-                  await waitForMenuToOpen();
-                expect(calendarGrid).toHaveAttribute(
-                  'aria-label',
-                  'December 2023',
-                );
-                expect(monthSelect).toHaveValue(Month.December.toString());
-                expect(yearSelect).toHaveValue('2023');
-              });
-
-              test('initial focus (highlight) is set to `today`', async () => {
-                const { calendarButton, waitForMenuToOpen } =
-                  renderDatePicker();
-                userEvent.click(calendarButton);
-                const { calendarCells } = await waitForMenuToOpen();
-                const highlightCell = calendarCells.find(
-                  cell => cell?.getAttribute('data-highlighted') == 'true',
+        describe.each([testTimeZones])(
+          'when system time is in $tz',
+          ({ tz, UTCOffset }) => {
+            describe.each([undefinedTZ, ...testTimeZones])(
+              'and timeZone prop is $tz',
+              props => {
+                const offset = props.UTCOffset ?? UTCOffset;
+                const dec24Local = newUTC(
+                  2023,
+                  Month.December,
+                  24,
+                  23 - offset,
+                  59,
                 );
-                expect(highlightCell).toHaveAttribute('data-iso', expectedISO);
-                expect(highlightCell).toHaveFocus();
-              });
-            },
-          );
-
-          describe.each(testTimeZones)(
-            'when timeZone prop is $tz',
-            ({ tz, UTCOffset }) => {
-              const expectedISO = '2023-12-' + (UTCOffset < 0 ? '24' : '25');
+                const dec24ISO = '2023-12-24';
 
-              test('menu opens to current month', async () => {
-                const { calendarButton, waitForMenuToOpen } = renderDatePicker({
-                  timeZone: tz,
+                beforeEach(() => {
+                  jest.setSystemTime(dec24Local);
+                  mockTimeZone(tz, UTCOffset);
                 });
-                userEvent.click(calendarButton);
-                const { calendarGrid, monthSelect, yearSelect } =
-                  await waitForMenuToOpen();
-                expect(calendarGrid).toHaveAttribute(
-                  'aria-label',
-                  'December 2023',
-                );
-                expect(monthSelect).toHaveValue(Month.December.toString());
-                expect(yearSelect).toHaveValue('2023');
-              });
-
-              test('initial highlight is set to `today`', async () => {
-                jest.setSystemTime(newUTC(2023, Month.December, 25, 16, 0));
-
-                const { calendarButton, waitForMenuToOpen } = renderDatePicker({
-                  timeZone: tz,
+                afterEach(() => {
+                  jest.restoreAllMocks();
                 });
-                userEvent.click(calendarButton);
-
-                const { calendarCells } = await waitForMenuToOpen();
-                const highlightCell = calendarCells.find(
-                  cell => cell?.getAttribute('data-highlighted') == 'true',
-                );
-                expect(highlightCell).toHaveAttribute('data-iso', expectedISO);
-                expect(highlightCell).toHaveFocus();
-              });
-            },
-          );
-        });
 
-        describe('if a value is set', () => {
-          describe.each(testTimeZones)(
-            'when system time is in $tz',
-            ({ tz, UTCOffset }) => {
-              beforeEach(() => {
-                jest.setSystemTime(newUTC(2023, Month.December, 25, 0, 0)); // Midnight UTC
-                mockTimeZone(tz, UTCOffset);
-              });
-              afterEach(() => {
-                jest.restoreAllMocks();
-              });
-
-              test('menu opens to the month of that `value`', async () => {
-                const testValue = new Date(Date.UTC(2023, Month.March, 1));
-                const { calendarButton, waitForMenuToOpen } = renderDatePicker({
-                  value: testValue,
-                });
-                userEvent.click(calendarButton);
-                const { calendarGrid, monthSelect, yearSelect } =
-                  await waitForMenuToOpen();
-                expect(calendarGrid).toHaveAttribute(
-                  'aria-label',
-                  'March 2023',
-                );
-                expect(monthSelect).toHaveValue(Month.March.toString());
-                expect(yearSelect).toHaveValue('2023');
-              });
+                describe('if no value is set', () => {
+                  test('default focus (highlight) is on `today`', async () => {
+                    const { calendarButton, waitForMenuToOpen } =
+                      renderDatePicker({
+                        timeZone: props.tz,
+                      });
+                    userEvent.click(calendarButton);
+                    const { queryCellByISODate } = await waitForMenuToOpen();
+                    expect(queryCellByISODate(dec24ISO)).toHaveFocus();
+                  });
 
-              test('initial focus (highlight) is on the date of `value`', async () => {
-                const testValue = new Date(Date.UTC(2023, Month.March, 1));
-                const { calendarButton, waitForMenuToOpen } = renderDatePicker({
-                  value: testValue,
+                  test('menu opens to current month', async () => {
+                    const { calendarButton, waitForMenuToOpen } =
+                      renderDatePicker({
+                        timeZone: props.tz,
+                      });
+                    userEvent.click(calendarButton);
+                    const { calendarGrid, monthSelect, yearSelect } =
+                      await waitForMenuToOpen();
+                    expect(calendarGrid).toHaveAttribute(
+                      'aria-label',
+                      'December 2023',
+                    );
+                    expect(monthSelect).toHaveTextContent('Dec');
+                    expect(yearSelect).toHaveTextContent('2023');
+                  });
                 });
-                userEvent.click(calendarButton);
-                const { calendarCells } = await waitForMenuToOpen();
-                const highlightCell = calendarCells.find(
-                  cell => cell?.getAttribute('data-highlighted') == 'true',
-                );
-                expect(highlightCell).toHaveAttribute('data-iso', '2023-03-01');
-                expect(highlightCell).toHaveFocus();
-              });
-            },
-          );
-          describe.each(testTimeZones)(
-            'when timeZone prop is $tz',
-            ({ tz, UTCOffset }) => {
-              beforeEach(() => {
-                jest.setSystemTime(newUTC(2023, Month.December, 25, 0, 0)); // Midnight UTC
-                mockTimeZone(tz, UTCOffset);
-              });
-              afterEach(() => {
-                jest.restoreAllMocks();
-              });
 
-              test('menu opens to the month of that `value`', async () => {
-                const testValue = new Date(Date.UTC(2023, Month.March, 1));
-                const { calendarButton, waitForMenuToOpen } = renderDatePicker({
-                  value: testValue,
-                });
-                userEvent.click(calendarButton);
-                const { calendarGrid, monthSelect, yearSelect } =
-                  await waitForMenuToOpen();
-                expect(calendarGrid).toHaveAttribute(
-                  'aria-label',
-                  'March 2023',
-                );
-                expect(monthSelect).toHaveValue(Month.March.toString());
-                expect(yearSelect).toHaveValue('2023');
-              });
+                describe('when `value` is set', () => {
+                  test('focus (highlight) starts on current value', async () => {
+                    const testValue = newUTC(2024, Month.September, 10);
+                    const { calendarButton, waitForMenuToOpen } =
+                      renderDatePicker({
+                        value: testValue,
+                        timeZone: props.tz,
+                      });
+                    userEvent.click(calendarButton);
+                    const { queryCellByISODate } = await waitForMenuToOpen();
+                    expect(queryCellByISODate('2024-09-10')).toHaveFocus();
+                  });
 
-              test('initial focus (highlight) is on the date of `value`', async () => {
-                const testValue = new Date(Date.UTC(2023, Month.March, 1));
-                const { calendarButton, waitForMenuToOpen } = renderDatePicker({
-                  value: testValue,
+                  test('menu opens to the month of that `value`', async () => {
+                    const testValue = newUTC(2024, Month.September, 10);
+                    const { calendarButton, waitForMenuToOpen } =
+                      renderDatePicker({
+                        value: testValue,
+                        timeZone: props.tz,
+                      });
+                    userEvent.click(calendarButton);
+                    const { calendarGrid, monthSelect, yearSelect } =
+                      await waitForMenuToOpen();
+
+                    expect(calendarGrid).toHaveAttribute(
+                      'aria-label',
+                      'September 2024',
+                    );
+                    expect(monthSelect).toHaveTextContent('Sep');
+                    expect(yearSelect).toHaveTextContent('2024');
+                  });
                 });
-                userEvent.click(calendarButton);
-                const { calendarCells } = await waitForMenuToOpen();
-                const highlightCell = calendarCells.find(
-                  cell => cell?.getAttribute('data-highlighted') == 'true',
-                );
-                expect(highlightCell).toHaveAttribute('data-iso', '2023-03-01');
-                expect(highlightCell).toHaveFocus();
-              });
-            },
-          );
-        });
+              },
+            );
+          },
+        );
 
-        describe('if value is invalid', () => {
-          test('menu still opens to the month of that value', async () => {
-            const testValue = new Date(Date.UTC(2100, Month.July, 10));
-            const { openMenu } = renderDatePicker({
+        describe('if `value` is not valid', () => {
+          test('focus (highlight) starts on chevron button', async () => {
+            const testValue = newUTC(2100, Month.July, 4);
+            const { calendarButton, waitForMenuToOpen } = renderDatePicker({
               value: testValue,
             });
-            const { calendarGrid, calendarCells } = await openMenu();
-            expect(calendarGrid).toHaveAttribute('aria-label', 'July 2100');
-            calendarCells.forEach(cell => {
-              expect(cell).toHaveAttribute('aria-disabled', 'true');
-            });
+            userEvent.click(calendarButton);
+            const { leftChevron } = await waitForMenuToOpen();
+            expect(leftChevron).toHaveFocus();
           });
 
-          test('initial focus (highlight) is on a chevron', async () => {
-            const testValue = new Date(Date.UTC(2100, Month.July, 10));
-            const { openMenu } = renderDatePicker({
+          test('menu opens to the month of that `value`', async () => {
+            const testValue = newUTC(2100, Month.July, 4);
+            const { calendarButton, waitForMenuToOpen } = renderDatePicker({
               value: testValue,
             });
-            const { leftChevron } = await openMenu();
-            expect(leftChevron).toHaveFocus();
+            userEvent.click(calendarButton);
+            const { calendarGrid, monthSelect, yearSelect } =
+              await waitForMenuToOpen();
+
+            expect(calendarGrid).toHaveAttribute('aria-label', 'July 2100');
+            expect(monthSelect).toHaveTextContent('Jul');
+            expect(yearSelect).toHaveTextContent('2100');
           });
         });
       });
@@ -1239,6 +1166,7 @@ describe('packages/date-picker', () => {
           userEvent.keyboard(`[Enter]`);
           expect(handleValidation).toHaveBeenCalledWith(undefined);
         });
+        test.todo('within a form, does not submit form');
       });
 
       describe('Escape key', () => {
@@ -1580,14 +1508,15 @@ describe('packages/date-picker', () => {
             describe('when a value is set', () => {
               test('fires value change handler', () => {
                 const onDateChange = jest.fn();
+                const testVal = newUTC(2023, Month.September, 10);
                 const { monthInput } = renderDatePicker({
                   onDateChange,
-                  value: testToday,
+                  value: testVal,
                 });
                 userEvent.click(monthInput);
                 userEvent.keyboard(`{arrowdown}`);
                 expect(onDateChange).toHaveBeenCalledWith(
-                  setUTCMonth(testToday, testToday.getUTCMonth() - 1),
+                  setUTCMonth(testVal, testVal.getUTCMonth() - 1),
                 );
               });
 
@@ -2700,7 +2629,7 @@ describe('packages/date-picker', () => {
       const firstCell = calendarCells?.[0];
       userEvent.click(firstCell!);
       await waitFor(() => {
-        expect(dayInput.value).toEqual('26');
+        expect(dayInput.value).toEqual('25');
         expect(monthInput.value).toEqual('12');
         expect(yearInput.value).toEqual('2023');
       });
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index 54d326f470..91010cc604 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -63,7 +63,7 @@ export interface RenderMenuResult {
   /** Query for a cell with a given date value */
   queryCellByDate: (date: Date) => HTMLTableCellElement | null;
   /** Query for a cell with a given ISO date string */
-  queryCellISODate: (isoString: string) => HTMLTableCellElement | null;
+  queryCellByISODate: (isoString: string) => HTMLTableCellElement | null;
 }
 
 /**
@@ -133,7 +133,7 @@ export const renderDatePicker = (
       return cell as HTMLTableCellElement | null;
     };
 
-    const queryCellISODate = (
+    const queryCellByISODate = (
       isoString: string,
     ): HTMLTableCellElement | null => {
       const cell = calendarGrid?.querySelector(`[data-iso="${isoString}"]`);
@@ -153,7 +153,7 @@ export const renderDatePicker = (
       yearSelect: yearSelect as HTMLButtonElement | null,
       todayCell,
       queryCellByDate,
-      queryCellISODate,
+      queryCellByISODate,
     };
   }
 
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
index 3e5f8bf87d..0378f399ee 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -6,7 +6,17 @@ import { BaseDatePickerProps } from '../shared/types';
 
 export type DatePickerProps = {
   /**
-   * The selected date, given in UTC time
+   * The selected date.
+   *
+   * Note that this Date object will be read as UTC time.
+   * Providing `Date.now()` could result in the incorrect date being displayed,
+   * depending on the system time zone.
+   *
+   * To set `value` to today, regardless of timeZone, use `setToUTCMidnight(new Date(Date.now()))`.
+   *
+   * e.g. `2023-12-31` at 20:00 in Los Angeles, will be `2024-01-01` at 04:00 in UTC.
+   * To set the correct day (`2023-12-31`) as the DatePicker value
+   * we must first convert our local timestamp to `2023-12-31` at midnight
    */
   value?: DateType;
 
@@ -16,18 +26,23 @@ export type DatePickerProps = {
    *
    * _Not_ fired when a date segment changes, but does not create a full date
    *
-   * Callback date argument will be a Date object in ISO-8601 format, and in UTC time.
+   * Callback date argument will be a Date object in UTC time, or `null`
    */
   onDateChange?: (value?: DateType) => void;
 
-  /** The initial selected date. Ignored if `value` is provided */
+  /**
+   * The initial selected date. Ignored if `value` is provided
+   *
+   * Note that this Date object will be read as UTC time.
+   * See `value` prop documentation for more details
+   */
   initialValue?: DateType;
 
   /**
-   * A callback fired when validation should run, based on our [form validation guidelines](https://www.mongodb.design/foundation/forms/#form-validation-error-handling).
-   * Use this callback to compute the correct `state` value.
+   * A callback fired when validation should run, based on [form validation guidelines](https://www.mongodb.design/foundation/forms/#form-validation-error-handling).
+   * Use this callback to compute the correct `state` and `errorMessage` value.
    *
-   * Callback date argument will be a Date object in ISO 8601 format, and in UTC time.
+   * Callback date argument will be a Date object in UTC time, or `null`
    */
   handleValidation?: (value?: DateType) => void;
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
index 2b2fd812ad..ae36cd5ecb 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
@@ -1,11 +1,9 @@
 import React, {
   forwardRef,
   KeyboardEventHandler,
-  TransitionEventHandler,
   useEffect,
   useRef,
 } from 'react';
-import { ExitHandler } from 'react-transition-group/Transition';
 import isEqual from 'lodash/isEqual';
 
 import { isSameUTCDay } from '@leafygreen-ui/date-utils';
@@ -29,14 +27,7 @@ export const DatePickerContent = forwardRef<
 >(({ ...rest }: DatePickerContentProps, fwdRef) => {
   const { min, max, isOpen, menuId, disabled, isSelectOpen } =
     useSharedDatePickerContext();
-  const {
-    refs,
-    value,
-    closeMenu,
-    menuTriggerEvent,
-    handleValidation,
-    getHighlightedCell,
-  } = useDatePickerContext();
+  const { value, closeMenu, handleValidation } = useDatePickerContext();
 
   const prevValue = usePrevious(value);
   const prevMin = usePrevious(min);
@@ -48,7 +39,9 @@ export const DatePickerContent = forwardRef<
 
   useBackdropClick(closeMenu, [formFieldRef, menuRef], isOpen && !isSelectOpen);
 
-  /** This listens to when the disabled prop changes to true and closes the menu */
+  /**
+   * This listens to when the disabled prop changes to true and closes the menu
+   */
   useEffect(() => {
     // if disabled is true but was previously false. This prevents this effect from rerunning multiple times since other states are updated when the menu closes.
     if (disabled && !prevDisabledValue) {
@@ -57,34 +50,9 @@ export const DatePickerContent = forwardRef<
     }
   }, [closeMenu, disabled, handleValidation, value, prevDisabledValue]);
 
-  /** Fired when the CSS transition to open the menu is fired */
-  const handleMenuTransitionEntered: TransitionEventHandler = e => {
-    // Whether this event is firing in response to the menu transition
-    const isTransitionedElementMenu = e.target === menuRef.current;
-
-    // Whether the latest openMenu event was triggered by the calendar button
-    const isTriggeredByButton =
-      menuTriggerEvent &&
-      refs.calendarButtonRef.current?.contains(
-        menuTriggerEvent.target as HTMLElement,
-      );
-
-    // Only move focus to input when opened via button click
-    if (isOpen && isTransitionedElementMenu && isTriggeredByButton) {
-      // When the menu opens, set focus to the `highlight` cell
-      const highlightedCell = getHighlightedCell();
-      highlightedCell?.focus();
-    }
-  };
-
-  /** Fired when the Transform element for the menu has exited */
-  const handleMenuTransitionExited: ExitHandler<HTMLDivElement> = () => {
-    if (!isOpen) {
-      closeMenu();
-    }
-  };
-
-  /** Handle key down events that should be fired regardless of target */
+  /**
+   * Handle key down events that should be fired regardless of target.
+   */
   const handleDatePickerKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
     const { key } = e;
 
@@ -114,7 +82,7 @@ export const DatePickerContent = forwardRef<
   };
 
   /**
-   * Side Effects
+   * SIDE EFFECTS
    */
 
   /** When value changes, validate it */
@@ -124,9 +92,7 @@ export const DatePickerContent = forwardRef<
     }
   }, [handleValidation, prevValue, value]);
 
-  /**
-   * If min/max changes, re-validate the value
-   */
+  /** If min/max changes, re-validate the value */
   useEffect(() => {
     if (
       (prevMin && !isSameUTCDay(min, prevMin)) ||
@@ -148,8 +114,6 @@ export const DatePickerContent = forwardRef<
         id={menuId}
         refEl={formFieldRef}
         onKeyDown={handleDatePickerKeyDown}
-        onTransitionEnd={handleMenuTransitionEntered}
-        onExited={handleMenuTransitionExited}
       />
     </>
   );
diff --git a/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
index 4b5e780237..24ccae1239 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
@@ -11,7 +11,7 @@ import React, {
 
 import {
   DateType,
-  getFirstOfMonth,
+  getFirstOfUTCMonth,
   getISODate,
   isOnOrBefore,
   isSameUTCDay,
@@ -49,6 +49,7 @@ export const DatePickerProvider = ({
     min,
     max,
     locale,
+    timeZone,
     setInternalErrorMessage,
     clearInternalErrorMessage,
     isInRange,
@@ -67,13 +68,13 @@ export const DatePickerProvider = ({
   /**
    * Keep track of the displayed month
    */
-  const [month, _setMonth] = useState<Date>(getFirstOfMonth(value ?? today));
+  const [month, _setMonth] = useState<Date>(getFirstOfUTCMonth(value ?? today));
 
   /**
    * Keep track of the element the user is highlighting with the keyboard
    */
   const [highlight, _setHighlight] = useState<DateType>(
-    getInitialHighlight(value, today),
+    getInitialHighlight(value, today, timeZone),
   );
 
   /***********
@@ -85,7 +86,7 @@ export const DatePickerProvider = ({
    */
   const setValue = (newVal?: DateType) => {
     _setValue(newVal ?? null);
-    setMonth(getFirstOfMonth(newVal ?? today));
+    setMonth(getFirstOfUTCMonth(newVal ?? today));
   };
 
   /**
@@ -150,9 +151,9 @@ export const DatePickerProvider = ({
         refs.calendarButtonRef.current?.focus();
       }
       // update month to something valid
-      setMonth(getFirstOfMonth(value ?? today));
+      setMonth(getFirstOfUTCMonth(value ?? today));
       // update highlight to something valid
-      setHighlight(getInitialHighlight(value, today));
+      setHighlight(getInitialHighlight(value, today, timeZone));
     });
   };
 
@@ -173,17 +174,21 @@ export const DatePickerProvider = ({
    * Returns the cell element with the provided value
    */
   const getCellWithValue = (date: DateType): HTMLTableCellElement | null => {
-    const highlightKey = getISODate(date);
-    const cell = highlightKey
-      ? refs.calendarCellRefs(highlightKey)?.current
-      : null;
-    return cell;
+    if (isInRange(date)) {
+      const highlightKey = getISODate(date);
+      const cell = highlightKey
+        ? refs.calendarCellRefs(highlightKey)?.current
+        : null;
+      return cell;
+    }
+
+    return null;
   };
 
   /**
    * Returns the cell element with the current highlight value
    */
-  const getHighlightedCell = () => {
+  const getHighlightedCell = (): HTMLTableCellElement | null => {
     return getCellWithValue(highlight);
   };
 
@@ -196,7 +201,7 @@ export const DatePickerProvider = ({
    */
   useEffect(() => {
     if (!isSameUTCDay(value, prevValue)) {
-      setMonth(getFirstOfMonth(value ?? today));
+      setMonth(getFirstOfUTCMonth(value ?? today));
     }
   }, [prevValue, setMonth, today, value]);
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.types.ts
index ccc7b23171..dd09c847d2 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.types.ts
@@ -10,6 +10,10 @@ export interface DatePickerComponentRefs {
   segmentRefs: SegmentRefs;
   calendarCellRefs: DynamicRefGetter<HTMLTableCellElement>;
   calendarButtonRef: React.RefObject<HTMLButtonElement>;
+  chevronButtonRefs: {
+    left: React.RefObject<HTMLButtonElement>;
+    right: React.RefObject<HTMLButtonElement>;
+  };
 }
 
 export interface DatePickerContextProps {
@@ -34,12 +38,12 @@ export interface DatePickerContextProps {
   handleValidation: Required<DatePickerProps>['handleValidation'];
 
   /**
-   * The current date, at UTC midnight
+   * The current date, in the browser's time zone
    */
   today: Date;
 
   /**
-   * The currently displayed month in the menu
+   * The currently displayed month in the menu.
    */
   month: Date;
 
@@ -50,7 +54,7 @@ export interface DatePickerContextProps {
   setMonth: (newMonth: Date) => void;
 
   /**
-   * The Date value for the calendar cell in the menu that has, or should have focus
+   * The Date value for the calendar cell in the menu that has, or should have focus.
    */
   highlight: DateType;
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerContext/useDatePickerComponentRefs.ts b/packages/date-picker/src/DatePicker/DatePickerContext/useDatePickerComponentRefs.ts
index ebbdf5ec6b..b7bc6f0bde 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContext/useDatePickerComponentRefs.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerContext/useDatePickerComponentRefs.ts
@@ -17,9 +17,17 @@ export const useDateRangeComponentRefs = (): DatePickerComponentRefs => {
 
   const calendarButtonRef = useRef<HTMLButtonElement>(null);
 
+  const leftChevronRef = useRef<HTMLButtonElement>(null);
+  const rightChevronRef = useRef<HTMLButtonElement>(null);
+  const chevronButtonRefs = {
+    left: leftChevronRef,
+    right: rightChevronRef,
+  };
+
   return {
     segmentRefs,
     calendarCellRefs,
     calendarButtonRef,
+    chevronButtonRefs,
   };
 };
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 9369faf3dc..0a672a8eb5 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -5,6 +5,7 @@ import { addDays } from 'date-fns';
 
 import {
   getISODate,
+  getISODateTZ,
   Month,
   newUTC,
   setUTCDate,
@@ -28,11 +29,6 @@ import { DatePickerMenu, DatePickerMenuProps } from '.';
 const testToday = newUTC(2023, Month.September, 10);
 const testValue = newUTC(2023, Month.September, 14);
 
-const standardTimeEndDate = newUTC(2023, Month.March, 11);
-const daylightTimeStartDate = newUTC(2023, Month.March, 12);
-const daylightTimeEndDate = newUTC(2023, Month.November, 5);
-const standardTimeStartDate = newUTC(2023, Month.November, 6);
-
 const renderDatePickerMenu = (
   props?: Partial<DatePickerMenuProps> | null,
   singleContext?: Partial<DatePickerProviderProps> | null,
@@ -78,7 +74,10 @@ const renderDatePickerMenu = (
   ) as Array<HTMLTableCellElement>;
 
   const todayCell = calendarGrid.querySelector(
-    `[data-iso="${getISODate(testToday)}"]`,
+    `[data-iso="${getISODateTZ(
+      new Date(Date.now()),
+      context?.timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
+    )}"]`,
   );
 
   const getCellWithValue = (date: Date) =>
@@ -87,8 +86,17 @@ const renderDatePickerMenu = (
   const getCellWithISOString = (isoStr: string) =>
     calendarGrid.querySelector(`[data-iso="${isoStr}"]`);
 
-  const leftChevron = result?.queryByLabelText('Previous month');
-  const rightChevron = result?.queryByLabelText('Next month');
+  const getCurrentCell = () =>
+    calendarGrid.querySelector('[aria-current="true"]');
+
+  const leftChevron =
+    result.queryByLabelText('Previous month') ||
+    result.queryByLabelText('Previous valid month');
+  const rightChevron =
+    result.queryByLabelText('Next month') ||
+    result.queryByLabelText('Next valid month');
+  const monthSelect = result.queryByLabelText('Select month');
+  const yearSelect = result.queryByLabelText('Select year');
 
   return {
     ...result,
@@ -98,8 +106,11 @@ const renderDatePickerMenu = (
     todayCell,
     getCellWithValue,
     getCellWithISOString,
+    getCurrentCell,
     leftChevron,
     rightChevron,
+    monthSelect,
+    yearSelect,
   };
 };
 
@@ -152,25 +163,13 @@ describe('packages/date-picker/date-picker-menu', () => {
       );
     });
 
-    test('default highlight is on today', () => {
-      const { todayCell } = renderDatePickerMenu();
-      userEvent.tab();
-      expect(todayCell).toHaveFocus();
-    });
-
-    test('highlight starts on current value when provided', () => {
-      const { getCellWithValue } = renderDatePickerMenu(null, {
-        value: testValue,
-      });
-      userEvent.tab();
-      const valueCell = getCellWithValue(testValue);
-      expect(valueCell).toHaveFocus();
-    });
-
     describe('rendered cells', () => {
       test('have correct `aria-label`', () => {
-        const { todayCell } = renderDatePickerMenu();
-        expect(todayCell).toHaveAttribute('aria-label', 'Sun Sep 10 2023');
+        const { getCellWithISOString } = renderDatePickerMenu();
+        expect(getCellWithISOString('2023-09-10')).toHaveAttribute(
+          'aria-label',
+          'Sun Sep 10 2023',
+        );
       });
     });
 
@@ -214,7 +213,7 @@ describe('packages/date-picker/date-picker-menu', () => {
         expect(isEveryCellDisabled).toBe(true);
       });
 
-      test("doesn't not highlight a cell", () => {
+      test('does not highlight a cell', () => {
         const { calendarCells } = renderDatePickerMenu(null, {
           value: newUTC(2048, Month.December, 25),
         });
@@ -225,88 +224,68 @@ describe('packages/date-picker/date-picker-menu', () => {
       });
     });
 
-    describe('when system date changes', () => {
-      describe.each(testTimeZones)(
-        'when system time zone is $tz',
-        ({ tz, UTCOffset }) => {
+    describe.each(testTimeZones)(
+      'when system time is in $tz',
+      ({ tz, UTCOffset }) => {
+        describe.each([
+          { tz: undefined, UTCOffset: undefined },
+          ...testTimeZones,
+        ])('and timeZone prop is $tz', prop => {
+          const dec24Local = newUTC(
+            2023,
+            Month.December,
+            24,
+            23 - (prop.UTCOffset ?? UTCOffset),
+            59,
+          );
+          const dec25Local = newUTC(
+            2023,
+            Month.December,
+            25,
+            0 - (prop.UTCOffset ?? UTCOffset),
+            0,
+          );
+          const dec24ISO = '2023-12-24';
+          const dec25ISO = '2023-12-25';
+          const ctx = {
+            timeZone: prop?.tz,
+          };
+
           beforeEach(() => {
+            jest.setSystemTime(dec24Local);
             mockTimeZone(tz, UTCOffset);
-            jest.useFakeTimers();
           });
           afterEach(() => {
             jest.restoreAllMocks();
           });
 
-          test('cell marked as `current` updates', () => {
-            const dec24Local = newUTC(
-              2023,
-              Month.December,
-              24,
-              23 - UTCOffset,
-              59,
-            );
-
-            const dec25Local = newUTC(
-              2023,
-              Month.December,
-              25,
-              0 - UTCOffset,
-              0,
-            );
-
-            jest.setSystemTime(dec24Local);
-
+          test('when date changes, cell marked as `current` updates', () => {
             const { getCellWithISOString, rerenderDatePickerMenu } =
-              renderDatePickerMenu();
-            const dec24Cell = getCellWithISOString('2023-12-24');
+              renderDatePickerMenu(null, null, ctx);
+            const dec24Cell = getCellWithISOString(dec24ISO);
             expect(dec24Cell).toHaveAttribute('aria-current', 'true');
 
             jest.setSystemTime(dec25Local);
 
             rerenderDatePickerMenu();
-            const dec25LocalCell = getCellWithISOString('2023-12-25');
+            const dec25LocalCell = getCellWithISOString(dec25ISO);
             expect(dec25LocalCell).toHaveAttribute('aria-current', 'true');
           });
-
-          describe.each(testTimeZones)(
-            'and timeZone prop is $tz',
-            ({ tz: tzProp, UTCOffset: propOffset }) => {
-              test('cell marked as `current` updates', () => {
-                const dec24Local = newUTC(
-                  2023,
-                  Month.December,
-                  24,
-                  23 - propOffset,
-                  59,
-                );
-
-                const dec25Local = newUTC(
-                  2023,
-                  Month.December,
-                  25,
-                  0 - propOffset,
-                  0,
-                );
-
-                jest.setSystemTime(dec24Local);
-                const { getCellWithISOString, rerenderDatePickerMenu } =
-                  renderDatePickerMenu(null, null, { timeZone: tzProp });
-                const dec24Cell = getCellWithISOString('2023-12-24');
-                expect(dec24Cell).toHaveAttribute('aria-current', 'true');
-                jest.setSystemTime(dec25Local);
-                rerenderDatePickerMenu();
-                const dec25Cell = getCellWithISOString('2023-12-25');
-                expect(dec25Cell).toHaveAttribute('aria-current', 'true');
-              });
-            },
-          );
-        },
-      );
-    });
+        });
+      },
+    );
   });
 
   describe('Keyboard navigation', () => {
     describe('Arrow Keys', () => {
+      beforeEach(() => {
+        jest.setSystemTime(testToday);
+        mockTimeZone('America/New_York', -5);
+      });
+      afterEach(() => {
+        jest.restoreAllMocks();
+      });
+
       test('left arrow moves focus to the previous day', async () => {
         const { getCellWithValue } = renderDatePickerMenu(null, {
           value: testValue,
@@ -352,58 +331,66 @@ describe('packages/date-picker/date-picker-menu', () => {
       });
 
       describe('when switching between daylight savings and standard time', () => {
-        // DT: Sun, Mar 12, 2023 – Sun, Nov 5, 2023
+        // DST: Sun, Mar 12, 2023 – Sun, Nov 5, 2023
 
-        describe('daylight time start (Mar 12 2023)', () => {
-          const weekBeforeDTStart = new Date(Date.UTC(2023, Month.March, 5));
+        const standardTimeEndDate = newUTC(2023, Month.March, 11, 22);
+        const weekBeforeDTStart = newUTC(2023, Month.March, 5, 22);
+        const daylightTimeStartDate = newUTC(2023, Month.March, 12, 22);
+        const daylightTimeEndDate = newUTC(2023, Month.November, 5, 22);
+        const weekAfterDTEnd = newUTC(2023, Month.November, 12, 22);
+        const standardTimeStartDate = newUTC(2023, Month.November, 6, 22);
 
+        describe('DST start (Mar 12 2023)', () => {
           test('left arrow moves focus to prev day', async () => {
             jest.setSystemTime(daylightTimeStartDate); // Mar 12
-            const { getCellWithValue } = renderDatePickerMenu();
+            const { getCellWithISOString } = renderDatePickerMenu();
             userEvent.tab();
-            userEvent.keyboard('{arrowleft}');
-            const prevDayCell = getCellWithValue(standardTimeEndDate); // Mar 11
+            const currentDayCell = getCellWithISOString('2023-03-12'); // Mar 12
+            await waitFor(() => expect(currentDayCell).toHaveFocus());
 
+            userEvent.keyboard('{arrowleft}');
+            const prevDayCell = getCellWithISOString('2023-03-11'); // Mar 11
             await waitFor(() => expect(prevDayCell).toHaveFocus());
           });
 
           test('right arrow moves focus to next day', async () => {
             jest.setSystemTime(standardTimeEndDate); // Mar 11
-            const { getCellWithValue } = renderDatePickerMenu();
+            const { getCellWithISOString } = renderDatePickerMenu();
             userEvent.tab();
+            const currentDayCell = getCellWithISOString('2023-03-11'); // Mar 11
+            await waitFor(() => expect(currentDayCell).toHaveFocus());
+
             userEvent.keyboard('{arrowright}');
-            const nextDayCell = getCellWithValue(daylightTimeStartDate); // Mar 12
+            const nextDayCell = getCellWithISOString('2023-03-12'); // Mar 12
             await waitFor(() => expect(nextDayCell).toHaveFocus());
           });
 
           test('up arrow moves focus to the previous week', async () => {
             jest.setSystemTime(daylightTimeStartDate); // Mar 12
-            const { getCellWithValue } = renderDatePickerMenu();
+            const { getCellWithISOString } = renderDatePickerMenu();
             userEvent.tab();
             userEvent.keyboard('{arrowup}');
-            const prevWeekCell = getCellWithValue(weekBeforeDTStart); // Mar 5
+            const prevWeekCell = getCellWithISOString('2023-03-05'); // Mar 5
             await waitFor(() => expect(prevWeekCell).toHaveFocus());
           });
 
           test('down arrow moves focus to the next week', async () => {
             jest.setSystemTime(weekBeforeDTStart); // Mar 5
-            const { getCellWithValue } = renderDatePickerMenu();
+            const { getCellWithISOString } = renderDatePickerMenu();
             userEvent.tab();
             userEvent.keyboard('{arrowdown}');
-            const nextWeekCell = getCellWithValue(daylightTimeStartDate); // Mar 12
+            const nextWeekCell = getCellWithISOString('2023-03-12'); // Mar 12
             await waitFor(() => expect(nextWeekCell).toHaveFocus());
           });
         });
 
-        describe('daylight time end (Nov 5 2023)', () => {
-          const weekAfterDTEnd = new Date(Date.UTC(2023, Month.November, 12));
-
+        describe('DST end (Nov 5 2023)', () => {
           test('left arrow moves focus to prev day', async () => {
             jest.setSystemTime(standardTimeStartDate); // Nov 6
-            const { getCellWithValue } = renderDatePickerMenu();
+            const { getCellWithISOString } = renderDatePickerMenu();
             userEvent.tab();
             userEvent.keyboard('{arrowleft}');
-            const prevDayCell = getCellWithValue(daylightTimeEndDate); // Nov 5
+            const prevDayCell = getCellWithISOString('2023-11-05'); // Nov 5
 
             await waitFor(() => expect(prevDayCell).toHaveFocus());
           });
@@ -411,73 +398,99 @@ describe('packages/date-picker/date-picker-menu', () => {
           test('right arrow moves focus to next day', async () => {
             jest.setSystemTime(daylightTimeEndDate); // Nov 5
 
-            const { getCellWithValue } = renderDatePickerMenu();
+            const { getCellWithISOString } = renderDatePickerMenu();
             userEvent.tab();
             userEvent.keyboard('{arrowright}');
 
-            const nextDayCell = getCellWithValue(standardTimeStartDate); // Nov 6
+            const nextDayCell = getCellWithISOString('2023-11-06'); // Nov 6
             await waitFor(() => expect(nextDayCell).toHaveFocus());
           });
 
           test('up arrow moves focus to the previous week', async () => {
             jest.setSystemTime(weekAfterDTEnd); // Nov 12
-            const { getCellWithValue } = renderDatePickerMenu();
+            const { getCellWithISOString } = renderDatePickerMenu();
             userEvent.tab();
             userEvent.keyboard('{arrowup}');
 
-            const prevWeekCell = getCellWithValue(daylightTimeEndDate); // Nov 5
+            const prevWeekCell = getCellWithISOString('2023-11-05'); // Nov 5
             await waitFor(() => expect(prevWeekCell).toHaveFocus());
           });
 
           test('down arrow moves focus to the next week', async () => {
             jest.setSystemTime(daylightTimeEndDate); // Nov 5
-            const { getCellWithValue } = renderDatePickerMenu();
+            const { getCellWithISOString } = renderDatePickerMenu();
             userEvent.tab();
             userEvent.keyboard('{arrowdown}');
 
-            const nextWeekCell = getCellWithValue(weekAfterDTEnd); // Nov 12
+            const nextWeekCell = getCellWithISOString('2023-11-12'); // Nov 12
             await waitFor(() => expect(nextWeekCell).toHaveFocus());
           });
         });
       });
 
       describe('when next day would be out of range', () => {
+        const testValue = newUTC(2023, Month.September, 10);
+        const isoString = '2023-09-10';
         const singleCtx = {
-          value: testToday,
+          value: testValue,
         };
         test('left arrow does nothing', async () => {
-          const { todayCell } = renderDatePickerMenu(null, singleCtx, {
-            min: testToday,
-          });
+          const { getCellWithISOString } = renderDatePickerMenu(
+            null,
+            singleCtx,
+            {
+              min: testValue,
+            },
+          );
           userEvent.tab();
           userEvent.keyboard('{arrowleft}');
-          await waitFor(() => expect(todayCell).toHaveFocus());
+          await waitFor(() =>
+            expect(getCellWithISOString(isoString)).toHaveFocus(),
+          );
         });
 
         test('right arrow does nothing', async () => {
-          const { todayCell } = renderDatePickerMenu(null, singleCtx, {
-            max: testToday,
-          });
+          const { getCellWithISOString } = renderDatePickerMenu(
+            null,
+            singleCtx,
+            {
+              max: testValue,
+            },
+          );
           userEvent.tab();
           userEvent.keyboard('{arrowright}');
-          await waitFor(() => expect(todayCell).toHaveFocus());
+          await waitFor(() =>
+            expect(getCellWithISOString(isoString)).toHaveFocus(),
+          );
         });
 
         test('up arrow does nothing', async () => {
-          const { todayCell } = renderDatePickerMenu(null, singleCtx, {
-            min: addDays(testToday, -6),
-          });
+          const { getCellWithISOString } = renderDatePickerMenu(
+            null,
+            singleCtx,
+            {
+              min: addDays(testValue, -6),
+            },
+          );
           userEvent.tab();
           userEvent.keyboard('{arrowup}');
-          await waitFor(() => expect(todayCell).toHaveFocus());
+          await waitFor(() =>
+            expect(getCellWithISOString(isoString)).toHaveFocus(),
+          );
         });
         test('down arrow does nothing', async () => {
-          const { todayCell } = renderDatePickerMenu(null, singleCtx, {
-            max: addDays(testToday, 6),
-          });
+          const { getCellWithISOString } = renderDatePickerMenu(
+            null,
+            singleCtx,
+            {
+              max: addDays(testValue, 6),
+            },
+          );
           userEvent.tab();
           userEvent.keyboard('{arrowdown}');
-          await waitFor(() => expect(todayCell).toHaveFocus());
+          await waitFor(() =>
+            expect(getCellWithISOString(isoString)).toHaveFocus(),
+          );
         });
       });
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index a661bb2813..744ed4a530 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -1,13 +1,15 @@
 import React, {
   forwardRef,
   KeyboardEventHandler,
+  TransitionEventHandler,
   useEffect,
   useRef,
 } from 'react';
+import { ExitHandler } from 'react-transition-group/Transition';
 
 import {
   addDaysUTC,
-  getFirstOfMonth,
+  getFirstOfUTCMonth,
   getFullMonthLabel,
   getISODate,
   getUTCDateString,
@@ -28,6 +30,7 @@ import { MenuWrapper } from '../../shared/components/MenuWrapper';
 import { useSharedDatePickerContext } from '../../shared/context';
 import { useDatePickerContext } from '../DatePickerContext';
 
+import { shouldChevronBeDisabled } from './DatePickerMenuHeader/utils';
 import { getNewHighlight } from './utils/getNewHighlight';
 import {
   menuCalendarGridStyles,
@@ -39,7 +42,7 @@ import { DatePickerMenuHeader } from './DatePickerMenuHeader';
 
 export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
   ({ onKeyDown, ...rest }: DatePickerMenuProps, fwdRef) => {
-    const { isInRange, isOpen, setIsDirty, timeZone } =
+    const { min, max, isInRange, isOpen, setIsDirty, timeZone } =
       useSharedDatePickerContext();
     const {
       refs,
@@ -54,6 +57,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       setHighlight,
       getCellWithValue,
       getHighlightedCell,
+      menuTriggerEvent,
     } = useDatePickerContext();
 
     const ref = useForwardedRef(fwdRef, null);
@@ -65,12 +69,22 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
 
     const monthLabel = getFullMonthLabel(month);
 
-    /** Set the highlighted cell when the value changes in the input */
-    useEffect(() => {
-      if (value && !isSameUTCDay(value, prevValue) && isInRange(value)) {
-        setHighlight(value);
+    /** Returns the current state of the cell */
+    const getCellState = (cellDay: Date | null): CalendarCellState => {
+      if (isInRange(cellDay)) {
+        if (isSameUTCDay(cellDay, value)) {
+          return CalendarCellState.Active;
+        }
+
+        return CalendarCellState.Default;
       }
-    }, [value, isInRange, setHighlight, prevValue]);
+
+      return CalendarCellState.Disabled;
+    };
+
+    /**
+     * SETTERS
+     */
 
     /** setDisplayMonth with side effects */
     const updateMonth = (newMonth: Date) => {
@@ -99,6 +113,17 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       });
     };
 
+    /**
+     * SIDE EFFECTS
+     */
+
+    /** Set the highlighted cell when the value changes in the input */
+    useEffect(() => {
+      if (value && !isSameUTCDay(value, prevValue) && isInRange(value)) {
+        setHighlight(value);
+      }
+    }, [value, isInRange, setHighlight, prevValue]);
+
     /**
      * If the new value is not the current month, update the month
      */
@@ -108,21 +133,52 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
         !isSameUTCDay(value, prevValue) &&
         !isSameUTCMonth(value, month)
       ) {
-        setDisplayMonth(getFirstOfMonth(value));
+        setDisplayMonth(getFirstOfUTCMonth(value));
       }
     }, [month, prevValue, setDisplayMonth, value]);
 
-    /** Returns the current state of the cell */
-    const getCellState = (cellDay: Date | null): CalendarCellState => {
-      if (isInRange(cellDay)) {
-        if (isSameUTCDay(cellDay, value)) {
-          return CalendarCellState.Active;
-        }
+    /**
+     * EVENT HANDLERS
+     */
 
-        return CalendarCellState.Default;
+    /**
+     * Fired when the CSS transition to open the menu is finished.
+     * Sets the initial focus on the highlighted cell
+     */
+    const handleMenuTransitionEntered: TransitionEventHandler = e => {
+      // Whether this event is firing in response to the menu transition
+      const isTransitionedElementMenu = e.target === ref.current;
+
+      // Whether the latest openMenu event was triggered by the calendar button
+      const isTriggeredByButton =
+        menuTriggerEvent &&
+        refs.calendarButtonRef.current?.contains(
+          menuTriggerEvent.target as HTMLElement,
+        );
+
+      // Only move focus to input when opened via button click
+      if (isOpen && isTransitionedElementMenu && isTriggeredByButton) {
+        // When the menu opens, set focus to the `highlight` cell
+        const highlightedCell = getHighlightedCell();
+
+        if (highlightedCell) {
+          highlightedCell.focus();
+        } else if (!shouldChevronBeDisabled('left', month, min)) {
+          refs.chevronButtonRefs.left.current?.focus();
+        } else if (!shouldChevronBeDisabled('right', month, max)) {
+          refs.chevronButtonRefs.right.current?.focus();
+        }
       }
+    };
 
-      return CalendarCellState.Disabled;
+    /**
+     * Fired when the Transform element for the menu has exited.
+     * Fires side effects when the menu closes
+     */
+    const handleMenuTransitionExited: ExitHandler<HTMLDivElement> = () => {
+      if (!isOpen) {
+        closeMenu();
+      }
     };
 
     /** Called when any calendar cell is clicked */
@@ -146,7 +202,10 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       }
     };
 
-    // Focus trap
+    /**
+     * Fired on any key press.
+     * Handles custom focus trap logic
+     */
     const handleMenuKeyPress: KeyboardEventHandler<HTMLDivElement> = e => {
       const { key } = e;
 
@@ -177,7 +236,10 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
       onKeyDown?.(e);
     };
 
-    /** Called on any keydown within the CalendarGrid element */
+    /**
+     * Called on any keydown within the CalendarGrid element.
+     * Responsible for updating the highlight +/- 1 day or 1 week
+     */
     const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {
       const { key } = e;
 
@@ -228,10 +290,12 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
         role="listbox"
         active={isOpen}
         spacing={spacing[1]}
+        data-today={today.toISOString()}
         className={menuWrapperStyles}
         usePortal
         onKeyDown={handleMenuKeyPress}
-        data-today={today.toISOString()}
+        onTransitionEnd={handleMenuTransitionEntered}
+        onExited={handleMenuTransitionExited}
         {...rest}
       >
         <div className={menuContentStyles}>
@@ -246,22 +310,26 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
             month={month}
             className={menuCalendarGridStyles}
             onKeyDown={handleCalendarKeyDown}
+            // TODO: Test month label in different time zones
             aria-label={monthLabel}
           >
-            {(day, i) => (
-              <CalendarCell
-                key={i}
-                ref={cellRefs(getISODate(day))}
-                aria-label={getUTCDateString(day)}
-                isHighlighted={isSameUTCDay(day, highlight)}
-                isCurrent={isSameTZDay(today, day, timeZone)}
-                state={getCellState(day)}
-                onClick={cellClickHandlerForDay(day)}
-                data-iso={getISODate(day)}
-              >
-                {day.getUTCDate()}
-              </CalendarCell>
-            )}
+            {(day, i) => {
+              return (
+                // TODO: Test highlight rendering in different time zones
+                <CalendarCell
+                  key={i}
+                  ref={cellRefs(getISODate(day))}
+                  data-iso={getISODate(day)}
+                  aria-label={getUTCDateString(day)}
+                  isHighlighted={isSameUTCDay(highlight, day)}
+                  isCurrent={isSameTZDay(today, day, timeZone)}
+                  state={getCellState(day)}
+                  onClick={cellClickHandlerForDay(day)}
+                >
+                  {day.getUTCDate()}
+                </CalendarCell>
+              );
+            }}
           </CalendarGrid>
           <DatePickerMenuHeader ref={headerRef} setMonth={updateMonth} />
         </div>
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
index aecae30f3f..7224921344 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useState } from 'react';
+import React, { createRef, PropsWithChildren, useState } from 'react';
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -19,6 +19,12 @@ import { DatePickerMenuHeader } from '.';
 
 const MockSharedDatePickerProvider = SharedDatePickerContext.Provider;
 const MockDatePickerProvider = DatePickerContext.Provider;
+const mockRefs = {
+  chevronButtonRefs: {
+    left: createRef<HTMLButtonElement>(),
+    right: createRef<HTMLButtonElement>(),
+  },
+};
 
 describe('packages/date-picker/menu/header', () => {
   describe('Rendering', () => {
@@ -34,6 +40,7 @@ describe('packages/date-picker/menu/header', () => {
             <MockDatePickerProvider
               value={
                 {
+                  refs: mockRefs,
                   month: newUTC(2022, Month.July, 1),
                 } as DatePickerContextProps
               }
@@ -70,6 +77,7 @@ describe('packages/date-picker/menu/header', () => {
             <MockDatePickerProvider
               value={
                 {
+                  refs: mockRefs,
                   month: newUTC(2024, Month.July, 1),
                 } as DatePickerContextProps
               }
@@ -107,6 +115,7 @@ describe('packages/date-picker/menu/header', () => {
             <MockDatePickerProvider
               value={
                 {
+                  refs: mockRefs,
                   month: newUTC(2023, Month.July, 5),
                 } as DatePickerContextProps
               }
@@ -142,6 +151,7 @@ describe('packages/date-picker/menu/header', () => {
               <MockDatePickerProvider
                 value={
                   {
+                    refs: mockRefs,
                     month: newUTC(2025, Month.July, 5),
                   } as DatePickerContextProps
                 }
@@ -176,6 +186,7 @@ describe('packages/date-picker/menu/header', () => {
               <MockDatePickerProvider
                 value={
                   {
+                    refs: mockRefs,
                     month: newUTC(2025, Month.July, 5),
                   } as DatePickerContextProps
                 }
@@ -206,6 +217,7 @@ describe('packages/date-picker/menu/header', () => {
               <MockDatePickerProvider
                 value={
                   {
+                    refs: mockRefs,
                     month: newUTC(2021, Month.July, 5),
                   } as DatePickerContextProps
                 }
@@ -240,6 +252,7 @@ describe('packages/date-picker/menu/header', () => {
               <MockDatePickerProvider
                 value={
                   {
+                    refs: mockRefs,
                     month: newUTC(2021, Month.July, 5),
                   } as DatePickerContextProps
                 }
@@ -286,6 +299,7 @@ describe('packages/date-picker/menu/header', () => {
           <MockDatePickerProvider
             value={
               {
+                refs: mockRefs,
                 month: newUTC(2022, Month.July, 1),
               } as DatePickerContextProps
             }
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
index 1c18abd80c..b4ed2b53cf 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
@@ -39,7 +39,7 @@ export const DatePickerMenuHeader = forwardRef<
 >(({ setMonth, ...rest }: DatePickerMenuHeaderProps, fwdRef) => {
   const { min, max, setIsSelectOpen, locale, isInRange } =
     useSharedDatePickerContext();
-  const { month } = useDatePickerContext();
+  const { refs, month } = useDatePickerContext();
 
   const monthOptions = getLocaleMonths(locale);
   const yearOptions = range(min.getUTCFullYear(), max.getUTCFullYear() + 1);
@@ -111,6 +111,7 @@ export const DatePickerMenuHeader = forwardRef<
   return (
     <div ref={fwdRef} className={menuHeaderStyles} {...rest}>
       <IconButton
+        ref={refs.chevronButtonRefs.left}
         aria-label={
           isMonthInValid('left') ? 'Previous valid month' : 'Previous month'
         }
@@ -165,6 +166,7 @@ export const DatePickerMenuHeader = forwardRef<
         </Select>
       </div>
       <IconButton
+        ref={refs.chevronButtonRefs.right}
         aria-label={isMonthInValid('right') ? 'Next valid month' : 'Next month'}
         disabled={shouldChevronBeDisabled('right', month, max)}
         onClick={handleChevronClick('right')}
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
index 6ec42ee3aa..fefa68a54a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/utils/getNewHighlight/index.ts
@@ -1,7 +1,7 @@
 import { isAfter } from 'date-fns';
 
 import {
-  getFirstOfMonth,
+  getFirstOfUTCMonth,
   getLastOfMonth,
   isSameUTCMonth,
 } from '@leafygreen-ui/date-utils';
@@ -21,7 +21,7 @@ export const getNewHighlight = (
   let newHighlight: Date;
 
   if (isAfter(newMonth, currentMonth)) {
-    newHighlight = getFirstOfMonth(newMonth);
+    newHighlight = getFirstOfUTCMonth(newMonth);
   } else {
     newHighlight = getLastOfMonth(newMonth);
   }
diff --git a/packages/date-picker/src/DatePicker/utils/getInitialHighlight/getInitialHighlight.spec.ts b/packages/date-picker/src/DatePicker/utils/getInitialHighlight/getInitialHighlight.spec.ts
index b73d127ce3..a938b87e35 100644
--- a/packages/date-picker/src/DatePicker/utils/getInitialHighlight/getInitialHighlight.spec.ts
+++ b/packages/date-picker/src/DatePicker/utils/getInitialHighlight/getInitialHighlight.spec.ts
@@ -1,18 +1,27 @@
 import { Month, newUTC } from '@leafygreen-ui/date-utils';
+import { testTimeZones } from '@leafygreen-ui/date-utils';
 
 import { getInitialHighlight } from '.';
 
 describe('packages/date-picker/utils/getInitialHighlight', () => {
   const value = newUTC(2023, Month.September, 10);
-  const today = newUTC(2023, Month.December, 26);
+  const today = newUTC(2023, Month.December, 25, 1);
 
-  test('returns `value` when provided', () => {
-    const highlight = getInitialHighlight(value, today);
-    expect(highlight).toBe(value);
-  });
+  describe.each(testTimeZones)('for timeZone $tz', ({ tz, UTCOffset }) => {
+    test('returns `value` when provided', () => {
+      const highlight = getInitialHighlight(value, today, tz);
+      expect(highlight).toEqual(value);
+    });
 
-  test('returns `today` if no value is provided', () => {
-    const highlight = getInitialHighlight(null, today);
-    expect(highlight).toBe(today);
+    test('returns `today` if no value is provided', () => {
+      const highlight = getInitialHighlight(null, today, tz);
+      const expectedDate = newUTC(
+        2023,
+        Month.December,
+        UTCOffset < -1 ? 24 : 25,
+        0,
+      );
+      expect(highlight).toEqual(expectedDate);
+    });
   });
 });
diff --git a/packages/date-picker/src/DatePicker/utils/getInitialHighlight/index.ts b/packages/date-picker/src/DatePicker/utils/getInitialHighlight/index.ts
index 1f79e7d695..c98d697fb6 100644
--- a/packages/date-picker/src/DatePicker/utils/getInitialHighlight/index.ts
+++ b/packages/date-picker/src/DatePicker/utils/getInitialHighlight/index.ts
@@ -1,10 +1,21 @@
-import { DateType, isValidDate } from '@leafygreen-ui/date-utils';
+import {
+  DateType,
+  getSimulatedTZDate,
+  isValidDate,
+  setToUTCMidnight,
+} from '@leafygreen-ui/date-utils';
 
 /** Returns the initial highlight value when the date picker is opened */
 export const getInitialHighlight = (
   value: DateType | undefined,
   today: Date,
+  timeZone: string,
 ) => {
   if (isValidDate(value)) return value;
-  return today;
+
+  // return the UTC-midnight representation of the local `today`
+  // e.g. given `today` = "2023-12-24T12:00:00Z", and `timeZone` = 'Pacific/Auckland' (UTC+13)
+  // Locally, the date is `2023-12-25`, and so we should return that date
+  const simulatedToday = getSimulatedTZDate(today, timeZone);
+  return setToUTCMidnight(simulatedToday);
 };
diff --git a/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
index 526d490abf..273cda29a9 100644
--- a/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
+++ b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
@@ -8,13 +8,16 @@ export type BaseDatePickerProps = {
   /**
    * A description for the date picker.
    *
-   * It's recommended to set a meaningful time zone representation as the description (e.g. "Coordinated Universal Time")
+   * It's recommended to set a meaningful time zone representation as the description
+   * (e.g. "Coordinated Universal Time")
    */
   description?: React.ReactNode;
 
   /**
-   * Sets the _presentation format_ for the displayed date.
-   * Fallback to the user’s browser preference (if supported), otherwise ISO-8601.
+   * Sets the _presentation format_ for the displayed date,
+   * and localizes month & weekday labels.
+   * Defaults to the user’s browser preference (if available),
+   * otherwise ISO-8601.
    *
    * Currently only the following values are officially supported: 'en-US' | 'en-GB' | 'iso8601'
    * Other valid [Locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)
@@ -25,18 +28,20 @@ export type BaseDatePickerProps = {
   locale?: LocaleString;
 
   /**
-   * A valid IANA timezone string, or UTC offset.
-   * Sets the _presentation time zone_ for the displayed date.
-   * Fallback to the user’s browser preference (if available), otherwise UTC.
-   *
-   * @default 'utc'
+   * A valid IANA timezone string, or UTC offset,
+   * used to calculate initial values.
+   * Defaults to the user’s browser settings.
    */
   timeZone?: string;
 
-  /** The earliest date accepted */
+  /**
+   * The earliest date accepted, in UTC
+   */
   min?: Date;
 
-  /** The latest date accepted */
+  /**
+   * The latest date accepted, in UTC
+   */
   max?: Date;
 
   /**
@@ -49,7 +54,9 @@ export type BaseDatePickerProps = {
    */
   disabled?: boolean;
 
-  /** The size of the input */
+  /**
+   * The size of the input
+   */
   size?: Size;
 
   /**
@@ -62,7 +69,10 @@ export type BaseDatePickerProps = {
    */
   errorMessage?: string;
 
-  /** Whether the calendar menu is initially open. Note: The calendar menu will not open if disabled is set to true.  */
+  /**
+   * Whether the calendar menu is initially open.
+   * Note: The calendar menu will not open if disabled is set to `true`.
+   */
   initialOpen?: boolean;
 
   /**
diff --git a/packages/date-utils/src/getFirstOfMonth/index.ts b/packages/date-utils/src/getFirstOfMonth/index.ts
deleted file mode 100644
index 9e8562233d..0000000000
--- a/packages/date-utils/src/getFirstOfMonth/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { getFirstOfMonth } from './getFirstOfMonth';
diff --git a/packages/date-utils/src/getFirstOfMonth/getFirstOfMonth.spec.ts b/packages/date-utils/src/getFirstOfUTCMonth/getFirstOfUTCMonth.spec.ts
similarity index 59%
rename from packages/date-utils/src/getFirstOfMonth/getFirstOfMonth.spec.ts
rename to packages/date-utils/src/getFirstOfUTCMonth/getFirstOfUTCMonth.spec.ts
index d030d61bc4..e01ac5f1ef 100644
--- a/packages/date-utils/src/getFirstOfMonth/getFirstOfMonth.spec.ts
+++ b/packages/date-utils/src/getFirstOfUTCMonth/getFirstOfUTCMonth.spec.ts
@@ -1,20 +1,20 @@
-import { getFirstOfMonth } from '.';
+import { getFirstOfUTCMonth } from '.';
 
-describe('packages/date-utils/getFirstOfMonth', () => {
+describe('packages/date-utils/getFirstOfUTCMonth', () => {
   test('returns the first day of the provided month', () => {
-    expect(getFirstOfMonth(new Date(Date.UTC(2023, 0, 31)))).toEqual(
+    expect(getFirstOfUTCMonth(new Date(Date.UTC(2023, 0, 31)))).toEqual(
       new Date(Date.UTC(2023, 0, 1)),
     );
   });
 
   test('returns the same day if provided the 1st', () => {
-    expect(getFirstOfMonth(new Date(Date.UTC(2023, 11, 1)))).toEqual(
+    expect(getFirstOfUTCMonth(new Date(Date.UTC(2023, 11, 1)))).toEqual(
       new Date(Date.UTC(2023, 11, 1)),
     );
   });
 
   test('returned time is midnight', () => {
-    const first = getFirstOfMonth(new Date(Date.UTC(2023, 11, 1)));
+    const first = getFirstOfUTCMonth(new Date(Date.UTC(2023, 11, 1)));
     expect(first.getUTCHours()).toEqual(0);
     expect(first.getUTCMinutes()).toEqual(0);
     expect(first.getUTCSeconds()).toEqual(0);
diff --git a/packages/date-utils/src/getFirstOfMonth/getFirstOfMonth.ts b/packages/date-utils/src/getFirstOfUTCMonth/getFirstOfUTCMonth.ts
similarity index 80%
rename from packages/date-utils/src/getFirstOfMonth/getFirstOfMonth.ts
rename to packages/date-utils/src/getFirstOfUTCMonth/getFirstOfUTCMonth.ts
index 4d297b8a8e..de3a653efe 100644
--- a/packages/date-utils/src/getFirstOfMonth/getFirstOfMonth.ts
+++ b/packages/date-utils/src/getFirstOfUTCMonth/getFirstOfUTCMonth.ts
@@ -2,6 +2,6 @@ import { setToUTCMidnight } from '../setToUTCMidnight';
 import { setUTCDate } from '../setUTCDate';
 
 /** Returns midnight on the fist day of the provided month */
-export const getFirstOfMonth = (date: Date) => {
+export const getFirstOfUTCMonth = (date: Date) => {
   return setToUTCMidnight(setUTCDate(date, 1));
 };
diff --git a/packages/date-utils/src/getFirstOfUTCMonth/index.ts b/packages/date-utils/src/getFirstOfUTCMonth/index.ts
new file mode 100644
index 0000000000..2a79d0cd48
--- /dev/null
+++ b/packages/date-utils/src/getFirstOfUTCMonth/index.ts
@@ -0,0 +1 @@
+export { getFirstOfUTCMonth } from './getFirstOfUTCMonth';
diff --git a/packages/date-utils/src/getISODateTZ/getISODateTZ.ts b/packages/date-utils/src/getISODateTZ/getISODateTZ.ts
new file mode 100644
index 0000000000..754c63b5d7
--- /dev/null
+++ b/packages/date-utils/src/getISODateTZ/getISODateTZ.ts
@@ -0,0 +1,19 @@
+import { addMilliseconds } from 'date-fns';
+import { getTimezoneOffset } from 'date-fns-tz';
+
+import { getISODate } from '../getISODate';
+import { DateType } from '../types';
+
+export const getISODateTZ = (date: DateType, timeZone: string) => {
+  const offsetMs = getTimezoneOffset(timeZone);
+
+  if (!date || isNaN(offsetMs)) return getISODate(date);
+
+  // a date object that, when printed in ISO format,
+  // _looks like_ the local time for the given time zone.
+  // e.g. given date = "2023-12-26T01:00Z" and timeZone = "America/New_York",
+  // we get the date "2023-12-25T20:00Z" which _looks like_ the NYC local time (even though the date object technically incorrect)
+  const zonedInUtc = addMilliseconds(date, offsetMs);
+
+  return getISODate(zonedInUtc);
+};
diff --git a/packages/date-utils/src/getISODateTZ/index.ts b/packages/date-utils/src/getISODateTZ/index.ts
new file mode 100644
index 0000000000..1cc45869a7
--- /dev/null
+++ b/packages/date-utils/src/getISODateTZ/index.ts
@@ -0,0 +1 @@
+export { getISODateTZ } from './getISODateTZ';
diff --git a/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.spec.ts b/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.spec.ts
new file mode 100644
index 0000000000..265d31de63
--- /dev/null
+++ b/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.spec.ts
@@ -0,0 +1,25 @@
+import { padStart } from 'lodash';
+
+import { Month } from '../constants';
+import { newUTC } from '../newUTC';
+import { testTimeZones } from '../testing/testValues';
+
+import { getSimulatedTZDate } from './getSimulatedTZDate';
+
+describe('packages/date-utils/getSimulatedTZDate', () => {
+  test.each(testTimeZones)('Simulates a date in $tz', ({ tz, UTCOffset }) => {
+    // 2023-07-04
+    const testDate = newUTC(2023, Month.December, 25, 0, 0);
+
+    const sim = getSimulatedTZDate(testDate, tz);
+
+    const TZDay = UTCOffset < 0 ? '24' : '25';
+    const TZHr =
+      UTCOffset < 0
+        ? String(24 + UTCOffset)
+        : padStart(String(UTCOffset), 2, '0');
+
+    const expectedISOString = '2023-12-' + TZDay + 'T' + TZHr + ':00:00.000Z';
+    expect(sim?.toISOString()).toEqual(expectedISOString);
+  });
+});
diff --git a/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.ts b/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.ts
new file mode 100644
index 0000000000..5673a10e7a
--- /dev/null
+++ b/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.ts
@@ -0,0 +1,24 @@
+import { addMilliseconds } from 'date-fns';
+import { getTimezoneOffset } from 'date-fns-tz';
+
+import { isValidDate } from '../isValidDate';
+
+/**
+ * Returns a date object that, _looks like_ the local time
+ * for the given time zone when printed in ISO format.
+ *
+ * e.g. given `date = "2023-12-25T01:00Z"` and `timeZone = "America/Los_Angeles"`,
+ * we get a date with the ISO date stamp `"2023-12-24T17:00Z"`,
+ * which _looks like_ the LA local time,
+ * (though the date object technically incorrect).
+ */
+export const getSimulatedTZDate = (date: Date, timeZone: string): Date => {
+  if (!isValidDate(date)) return date;
+
+  // Milliseconds offset between the given time zone & UTC
+  const offsetMs = getTimezoneOffset(timeZone, date);
+  if (isNaN(offsetMs)) return date;
+
+  const zonedInUtc = addMilliseconds(date, offsetMs);
+  return zonedInUtc;
+};
diff --git a/packages/date-utils/src/getSimulatedTZDate/index.ts b/packages/date-utils/src/getSimulatedTZDate/index.ts
new file mode 100644
index 0000000000..bb04d850ff
--- /dev/null
+++ b/packages/date-utils/src/getSimulatedTZDate/index.ts
@@ -0,0 +1 @@
+export { getSimulatedTZDate } from './getSimulatedTZDate';
diff --git a/packages/date-utils/src/index.ts b/packages/date-utils/src/index.ts
index 933f0267d5..e0ecea381a 100644
--- a/packages/date-utils/src/index.ts
+++ b/packages/date-utils/src/index.ts
@@ -2,14 +2,16 @@ export { addDaysUTC } from './addDaysUTC';
 export { addMonthsUTC } from './addMonthsUTC';
 export * from './constants';
 export { getDaysInUTCMonth } from './getDaysInUTCMonth';
-export { getFirstOfMonth } from './getFirstOfMonth';
+export { getFirstOfUTCMonth } from './getFirstOfUTCMonth';
 export { getFullMonthLabel } from './getFullMonthLabel';
 export { getISODate } from './getISODate';
+export { getISODateTZ } from './getISODateTZ';
 export { getLastOfMonth } from './getLastOfMonth';
 export { getLocaleMonths } from './getLocaleMonths';
 export { getLocaleWeekdays } from './getLocaleWeekdays';
 export { getMonthIndex } from './getMonthIndex';
 export { getMonthName } from './getMonthName';
+export { getSimulatedTZDate } from './getSimulatedTZDate';
 export { getUTCDateString } from './getUTCDateString';
 export { getWeekdayName } from './getWeekdayName';
 export { getWeeksArray } from './getWeeksArray';
@@ -17,6 +19,7 @@ export { isCurrentUTCDay } from './isCurrentUTCDay';
 export { isOnOrAfter } from './isOnOrAfter';
 export { isOnOrBefore } from './isOnOrBefore';
 export { isSameTZDay } from './isSameTZDay';
+export { isSameTZMonth } from './isSameTZMonth';
 export { isSameUTCDay } from './isSameUTCDay';
 export { isSameUTCMonth } from './isSameUTCMonth';
 export { isSameUTCRange } from './isSameUTCRange';
diff --git a/packages/date-utils/src/isSameTZDay/isSameTZDay.ts b/packages/date-utils/src/isSameTZDay/isSameTZDay.ts
index 995a2b1e9c..a26ff61c03 100644
--- a/packages/date-utils/src/isSameTZDay/isSameTZDay.ts
+++ b/packages/date-utils/src/isSameTZDay/isSameTZDay.ts
@@ -1,7 +1,7 @@
-import { addMilliseconds } from 'date-fns';
-import { getTimezoneOffset } from 'date-fns-tz';
-
+import { getSimulatedTZDate } from '../getSimulatedTZDate';
 import { isSameUTCDay } from '../isSameUTCDay';
+import { isValidDate } from '../isValidDate';
+import { DateType } from '../types';
 
 /**
  *
@@ -23,23 +23,18 @@ import { isSameUTCDay } from '../isSameUTCDay';
  * @param timeZone An IANA timeZone string
  */
 export const isSameTZDay = (
-  zoned: Date,
-  utc: Date,
+  zoned: DateType,
+  utc: DateType,
   timeZone: string,
 ): boolean => {
-  // Milliseconds offset between the given time zone & UTC
-  const offsetMs = getTimezoneOffset(timeZone, zoned);
-  if (isNaN(offsetMs)) return false;
+  if (!(isValidDate(zoned) && isValidDate(utc))) return false;
 
-  // a date object that, when printed in ISO format,
-  // _looks like_ the local time for the given time zone.
-  // e.g. given zoned = "2023-12-26T01:00Z" and timeZone = "America/New_York",
-  // we get the date "2023-12-25T20:00Z" which _looks like_ the NYC local time (even though the date object technically incorrect)
-  const zonedInUtc = addMilliseconds(zoned, offsetMs);
+  // Get a date object that _looks_ like the zoned date when rendered in ISO format
+  const simulatedTZDate = getSimulatedTZDate(zoned, timeZone);
 
   // We then use this date object to check if it's the same day as the provided utc date
   // e.g. is "2023-12-25T20:00Z" the same day as "2023-12-25T00:00Z"?
-  const isSameDay = isSameUTCDay(utc, zonedInUtc);
+  const isSameDay = isSameUTCDay(utc, simulatedTZDate);
 
   return isSameDay;
 };
diff --git a/packages/date-utils/src/isSameTZMonth/index.ts b/packages/date-utils/src/isSameTZMonth/index.ts
new file mode 100644
index 0000000000..2b5c95c89f
--- /dev/null
+++ b/packages/date-utils/src/isSameTZMonth/index.ts
@@ -0,0 +1 @@
+export { isSameTZMonth } from './isSameTZMonth';
diff --git a/packages/date-utils/src/isSameTZMonth/isSameTZMonth.spec.ts b/packages/date-utils/src/isSameTZMonth/isSameTZMonth.spec.ts
new file mode 100644
index 0000000000..6659cd1b38
--- /dev/null
+++ b/packages/date-utils/src/isSameTZMonth/isSameTZMonth.spec.ts
@@ -0,0 +1,19 @@
+import { Month } from '../constants';
+import { newUTC } from '../newUTC';
+import { testTimeZones } from '../testing/testValues';
+
+import { isSameTZMonth } from './isSameTZMonth';
+
+describe('packages/date-utils/isSameTZMonth', () => {
+  test.each(testTimeZones)('returns true in $tz', ({ tz, UTCOffset }) => {
+    if (UTCOffset <= 0) {
+      const testUTC = newUTC(2023, Month.November, 30);
+      const testZoned = newUTC(2023, Month.December, 1, -(UTCOffset + 1));
+      expect(isSameTZMonth(testZoned, testUTC, tz)).toBe(true);
+    } else {
+      const testUTC = newUTC(2023, Month.December, 1);
+      const testZoned = newUTC(2023, Month.November, 30, 24 - UTCOffset);
+      expect(isSameTZMonth(testZoned, testUTC, tz)).toBe(true);
+    }
+  });
+});
diff --git a/packages/date-utils/src/isSameTZMonth/isSameTZMonth.ts b/packages/date-utils/src/isSameTZMonth/isSameTZMonth.ts
new file mode 100644
index 0000000000..07224b9b24
--- /dev/null
+++ b/packages/date-utils/src/isSameTZMonth/isSameTZMonth.ts
@@ -0,0 +1,31 @@
+import { getSimulatedTZDate } from '../getSimulatedTZDate';
+import { isSameUTCMonth } from '../isSameUTCMonth';
+import { isValidDate } from '../isValidDate';
+import { DateType } from '../types';
+
+/**
+ * Returns whether the `zonedTime`, in a given `timeZone`,
+ * has the same date as the provided UTC date,
+ *
+ *  * e.g.
+ * ```js
+ * isSameTZDay(
+ *  Date("2023-11-01T01:00Z"), // Nov. 1 UCT, but 11:00 on Oct. 31 in NYC
+ *  Date("2023-10-31T00:00Z"), // 00:00 on Oct 31 2023 in UTC
+ *  "America/New_York"
+ * )
+ * // Returns `true`
+ */
+export const isSameTZMonth = (
+  zoned: DateType,
+  utc: DateType,
+  timeZone: string,
+) => {
+  if (!(isValidDate(zoned) && isValidDate(utc))) return false;
+
+  // Get a date object that _looks_ like the zoned date when rendered in ISO format
+  const simulatedTZDate = getSimulatedTZDate(zoned, timeZone);
+
+  const isSameMonth = isSameUTCMonth(utc, simulatedTZDate);
+  return isSameMonth;
+};
diff --git a/packages/date-utils/src/testing/testValues.ts b/packages/date-utils/src/testing/testValues.ts
index 9376f41404..eb0b420c00 100644
--- a/packages/date-utils/src/testing/testValues.ts
+++ b/packages/date-utils/src/testing/testValues.ts
@@ -5,9 +5,14 @@ export const testTimeZones = [
   { tz: 'Europe/London', UTCOffset: +0 },
   { tz: 'Asia/Istanbul', UTCOffset: +3 },
   { tz: 'Asia/Seoul', UTCOffset: +9 },
-  { tz: 'Pacific/Auckland', UTCOffset: +13 },
+  { tz: 'Pacific/Kiritimati', UTCOffset: +14 },
 ] as const;
 
+export const undefinedTZ = {
+  tz: undefined,
+  UTCOffset: undefined,
+};
+
 /** Time zones used to test with */
 export const testTimeZoneLabels = testTimeZones.map(({ tz }) => tz);
 

From c9f7c74fdd78ef5d4153b7303e512d04f9abacd4 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Thu, 14 Dec 2023 15:46:32 -0500
Subject: [PATCH 331/351] Date picker [LG-3894] Local date strings (#2137)

* docs

* updates getUTCDateString implementation
---
 .../src/DatePicker/DatePicker.spec.tsx        |  4 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 45 +++++++++----------
 .../getSimulatedTZDate.spec.ts                |  2 +-
 .../getSimulatedTZDate/getSimulatedTZDate.ts  |  2 +-
 .../getSimulatedUTCDate.spec.ts               | 16 +++++++
 .../getSimulatedUTCDate.ts                    | 32 +++++++++++++
 .../src/getSimulatedUTCDate/index.ts          |  1 +
 .../getUTCDateString/getUTCDateString.spec.ts | 12 +++--
 .../src/getUTCDateString/getUTCDateString.ts  | 41 ++++++++++++++---
 packages/date-utils/src/index.ts              |  1 +
 packages/date-utils/src/types.ts              |  2 +
 11 files changed, 117 insertions(+), 41 deletions(-)
 create mode 100644 packages/date-utils/src/getSimulatedUTCDate/getSimulatedUTCDate.spec.ts
 create mode 100644 packages/date-utils/src/getSimulatedUTCDate/getSimulatedUTCDate.ts
 create mode 100644 packages/date-utils/src/getSimulatedUTCDate/index.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 001a822f90..58d508efd6 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1244,7 +1244,9 @@ describe('packages/date-picker', () => {
       /**
        * Arrow Keys:
        * Since arrow key behavior changes based on whether the input or menu is focused,
-       * many tests exist in the "DatePickerInput" and "DatePickerMenu" components
+       * more detailed tests suites are located in
+       * - DatePickerInput: (./DatePickerInput/DatePickerInput.spec.tsx) and
+       * - DatePickerMenu: (./DatePickerMenu/DatePickerMenu.spec.tsx)
        */
       describe('Arrow key', () => {
         describe('Input', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 0a672a8eb5..08d046410a 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -163,16 +163,6 @@ describe('packages/date-picker/date-picker-menu', () => {
       );
     });
 
-    describe('rendered cells', () => {
-      test('have correct `aria-label`', () => {
-        const { getCellWithISOString } = renderDatePickerMenu();
-        expect(getCellWithISOString('2023-09-10')).toHaveAttribute(
-          'aria-label',
-          'Sun Sep 10 2023',
-        );
-      });
-    });
-
     describe('when value is updated', () => {
       test('grid is labelled as the current month', () => {
         const { getByRole, rerenderDatePickerMenu } = renderDatePickerMenu();
@@ -224,6 +214,23 @@ describe('packages/date-picker/date-picker-menu', () => {
       });
     });
 
+    // TODO: Test in multiple time zones with a properly mocked Date object
+    describe('rendered cells', () => {
+      test('have correct text content and `aria-label`', () => {
+        const { calendarCells } = renderDatePickerMenu();
+
+        calendarCells.forEach((cell, i) => {
+          const date = String(i + 1);
+          expect(cell).toHaveTextContent(date);
+
+          expect(cell).toHaveAttribute(
+            'aria-label',
+            expect.stringContaining(`September ${date}, 2023`),
+          );
+        });
+      });
+    });
+
     describe.each(testTimeZones)(
       'when system time is in $tz',
       ({ tz, UTCOffset }) => {
@@ -231,20 +238,10 @@ describe('packages/date-picker/date-picker-menu', () => {
           { tz: undefined, UTCOffset: undefined },
           ...testTimeZones,
         ])('and timeZone prop is $tz', prop => {
-          const dec24Local = newUTC(
-            2023,
-            Month.December,
-            24,
-            23 - (prop.UTCOffset ?? UTCOffset),
-            59,
-          );
-          const dec25Local = newUTC(
-            2023,
-            Month.December,
-            25,
-            0 - (prop.UTCOffset ?? UTCOffset),
-            0,
-          );
+          const elevenLocal = 23 - (prop.UTCOffset ?? UTCOffset);
+          const midnightLocal = 0 - (prop.UTCOffset ?? UTCOffset);
+          const dec24Local = newUTC(2023, Month.December, 24, elevenLocal, 59);
+          const dec25Local = newUTC(2023, Month.December, 25, midnightLocal, 0);
           const dec24ISO = '2023-12-24';
           const dec25ISO = '2023-12-25';
           const ctx = {
diff --git a/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.spec.ts b/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.spec.ts
index 265d31de63..0f68389191 100644
--- a/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.spec.ts
+++ b/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.spec.ts
@@ -8,7 +8,7 @@ import { getSimulatedTZDate } from './getSimulatedTZDate';
 
 describe('packages/date-utils/getSimulatedTZDate', () => {
   test.each(testTimeZones)('Simulates a date in $tz', ({ tz, UTCOffset }) => {
-    // 2023-07-04
+    // 2023-12-25
     const testDate = newUTC(2023, Month.December, 25, 0, 0);
 
     const sim = getSimulatedTZDate(testDate, tz);
diff --git a/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.ts b/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.ts
index 5673a10e7a..9a30080e04 100644
--- a/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.ts
+++ b/packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.ts
@@ -4,7 +4,7 @@ import { getTimezoneOffset } from 'date-fns-tz';
 import { isValidDate } from '../isValidDate';
 
 /**
- * Returns a date object that, _looks like_ the local time
+ * Returns a date object that _looks like_ the local time
  * for the given time zone when printed in ISO format.
  *
  * e.g. given `date = "2023-12-25T01:00Z"` and `timeZone = "America/Los_Angeles"`,
diff --git a/packages/date-utils/src/getSimulatedUTCDate/getSimulatedUTCDate.spec.ts b/packages/date-utils/src/getSimulatedUTCDate/getSimulatedUTCDate.spec.ts
new file mode 100644
index 0000000000..0ee6a80f41
--- /dev/null
+++ b/packages/date-utils/src/getSimulatedUTCDate/getSimulatedUTCDate.spec.ts
@@ -0,0 +1,16 @@
+import { Month } from '../constants';
+import { newUTC } from '../newUTC';
+
+import { getSimulatedUTCDate } from '.';
+
+describe('packages/date-utils/getSimulatedUTCDate', () => {
+  // TODO: Test in multiple time zones with properly mocked Date object
+  test('Simulates a date in UTC', () => {
+    // 2023-12-25
+    const testDate = newUTC(2023, Month.December, 25, 0, 0);
+
+    const sim = getSimulatedUTCDate(testDate);
+
+    expect(sim?.toDateString()).toEqual('Mon Dec 25 2023');
+  });
+});
diff --git a/packages/date-utils/src/getSimulatedUTCDate/getSimulatedUTCDate.ts b/packages/date-utils/src/getSimulatedUTCDate/getSimulatedUTCDate.ts
new file mode 100644
index 0000000000..3493a4879b
--- /dev/null
+++ b/packages/date-utils/src/getSimulatedUTCDate/getSimulatedUTCDate.ts
@@ -0,0 +1,32 @@
+import { addMilliseconds } from 'date-fns';
+import { getTimezoneOffset } from 'date-fns-tz';
+
+import { isValidDate } from '../isValidDate';
+
+/**
+ * The inverse of `getSimulatedTZDate`, returns a date object that _looks like_
+ * the UTC representation when printed in the local time zone.
+ *
+ * e.g. given `date = "2023-12-25T01:00Z"` and `timeZone = "America/Los_Angeles"`,
+ * by default using `date.toDateString` (or similar)
+ * this would print the locale string:
+ * "Sun Dec 24 2023"
+ *
+ * This function returns a modified, (technically incorrect) date object,
+ * such that the function `date.toDateString` (or similar)
+ * returns the locale string:
+ * `Mon Dec 25 2023`
+ */
+export const getSimulatedUTCDate = (date: Date, timeZone?: string): Date => {
+  timeZone = timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+  if (!isValidDate(date)) return date;
+
+  // Milliseconds offset between the given time zone & UTC
+  const offsetMs = getTimezoneOffset(timeZone, date);
+  if (isNaN(offsetMs)) return date;
+
+  const simulatedUTC = addMilliseconds(date, -offsetMs);
+
+  return simulatedUTC;
+};
diff --git a/packages/date-utils/src/getSimulatedUTCDate/index.ts b/packages/date-utils/src/getSimulatedUTCDate/index.ts
new file mode 100644
index 0000000000..7a039c83c8
--- /dev/null
+++ b/packages/date-utils/src/getSimulatedUTCDate/index.ts
@@ -0,0 +1 @@
+export { getSimulatedUTCDate } from './getSimulatedUTCDate';
diff --git a/packages/date-utils/src/getUTCDateString/getUTCDateString.spec.ts b/packages/date-utils/src/getUTCDateString/getUTCDateString.spec.ts
index 4839f22045..194748b338 100644
--- a/packages/date-utils/src/getUTCDateString/getUTCDateString.spec.ts
+++ b/packages/date-utils/src/getUTCDateString/getUTCDateString.spec.ts
@@ -1,17 +1,15 @@
 import { Month } from '../constants';
+import { newUTC } from '../newUTC';
 
 import { getUTCDateString } from '.';
 
 describe('packages/date-utils/getUTCDateString', () => {
+  // TODO: Test in multiple time zones with a properly mocked Date object
   test('returns date string relative to UTC', () => {
-    const date = new Date(Date.UTC(2023, Month.September, 10));
+    const date = newUTC(2023, Month.September, 10);
     const str = getUTCDateString(date);
-    expect(str).toBe('Sun Sep 10 2023');
+    expect(str).toBe('Sunday, September 10, 2023');
   });
 
-  test('returns date string relative with time provided', () => {
-    const date = new Date(Date.UTC(2023, Month.September, 10, 12, 0));
-    const str = getUTCDateString(date);
-    expect(str).toBe('Sun Sep 10 2023');
-  });
+  test.todo('returns a localized date string');
 });
diff --git a/packages/date-utils/src/getUTCDateString/getUTCDateString.ts b/packages/date-utils/src/getUTCDateString/getUTCDateString.ts
index 6a5930d8e8..cf5d991033 100644
--- a/packages/date-utils/src/getUTCDateString/getUTCDateString.ts
+++ b/packages/date-utils/src/getUTCDateString/getUTCDateString.ts
@@ -1,12 +1,39 @@
-import { addMinutes } from 'date-fns';
+import { getSimulatedUTCDate } from '../getSimulatedUTCDate';
+import { isValidLocale } from '../isValidLocale';
 
-export const getUTCDateString = (date: Date): string => {
-  const utcOffsetMins = date.getTimezoneOffset();
+interface GetUTCDateStringOptions {
+  locale?: string;
+}
 
-  // Create a timestamp that, when printed in local time,
-  // appears as the UTC equivalent of the provided date
-  const fakeUTCDate = addMinutes(date, utcOffsetMins);
+/**
+ * Returns a localized date string for the UTC representation of a date, regardless of system time zone
+ *
+ * e.g.
+ * ```
+ * getUTCDateString(
+ *  Date("2023-12-25T01:00:00Z"),
+ *  { locale: 'en-US' }
+ * ) // "Monday, December 25, 2023"
+ * ```
+ */
+export const getUTCDateString = (
+  date: Date,
+  options?: GetUTCDateStringOptions,
+): string => {
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+  const dateInTZ = getSimulatedUTCDate(date, timeZone);
+
+  const locale = isValidLocale(options?.locale)
+    ? options?.locale
+    : Intl.DateTimeFormat().resolvedOptions().locale;
+
+  const utcDateString = dateInTZ.toLocaleDateString(locale, {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  });
 
-  const utcDateString = fakeUTCDate.toDateString();
   return utcDateString;
 };
diff --git a/packages/date-utils/src/index.ts b/packages/date-utils/src/index.ts
index e0ecea381a..e9f4c920fe 100644
--- a/packages/date-utils/src/index.ts
+++ b/packages/date-utils/src/index.ts
@@ -12,6 +12,7 @@ export { getLocaleWeekdays } from './getLocaleWeekdays';
 export { getMonthIndex } from './getMonthIndex';
 export { getMonthName } from './getMonthName';
 export { getSimulatedTZDate } from './getSimulatedTZDate';
+export { getSimulatedUTCDate } from './getSimulatedUTCDate';
 export { getUTCDateString } from './getUTCDateString';
 export { getWeekdayName } from './getWeekdayName';
 export { getWeeksArray } from './getWeeksArray';
diff --git a/packages/date-utils/src/types.ts b/packages/date-utils/src/types.ts
index 85576dd80d..2bb0b1c94a 100644
--- a/packages/date-utils/src/types.ts
+++ b/packages/date-utils/src/types.ts
@@ -4,7 +4,9 @@ export type DateRangeType = [DateType, DateType];
 export type LocaleString = 'iso8601' | string;
 
 export interface MonthObject {
+  /** The localized long-form month name (e.g. December, July) */
   long: string;
+  /** A localized short-form month name (e.g. Dec, Jul) */
   short: string;
 }
 

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 332/351] 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({

From 2414e5e98fda34ba604068d8c7e02ec92a394b72 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Fri, 15 Dec 2023 16:04:57 -0500
Subject: [PATCH 333/351] Date picker [LG-3895] Segment input restriction
 (#2140)

* reorganize segment tests

* create getNewSegmentValueFromArrowKeyPress

* updates getNewSegmentValueFromInputValue

* tests for getNewSegmentValueFromInputValue

* only fires change handler for explicit values

* lint

* Update DateInputSegment.tsx
---
 .../date-picker/src/DatePicker.stories.tsx    |   6 +-
 .../src/DatePicker/DatePicker.spec.tsx        | 166 ++++++++++-------
 .../src/DatePicker/DatePicker.testutils.tsx   |   2 +-
 .../DateInput/DateInputBox/DateInputBox.tsx   |  12 +-
 .../DateInputSegment.spec.tsx                 | 115 ++++++------
 .../DateInputSegment/DateInputSegment.tsx     |  52 +++---
 .../calculateNewSegmentValue/index.ts         |  29 ---
 .../getNewSegmentValueFromArrowKeyPress.ts    |  31 ++++
 .../getNewSegmentValueFromInputValue.spec.ts  | 173 ++++++++++++++++++
 .../getNewSegmentValueFromInputValue.ts       |  56 ++++++
 .../DateInput/DateInputSegment/utils/index.ts |   1 +
 .../date-picker/src/shared/utils/index.ts     |   1 +
 .../isEverySegmentValueExplicit/index.ts      |   1 +
 .../isEverySegmentValueExplicit.ts            |  14 ++
 14 files changed, 478 insertions(+), 181 deletions(-)
 delete mode 100644 packages/date-picker/src/shared/components/DateInput/DateInputSegment/calculateNewSegmentValue/index.ts
 create mode 100644 packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromArrowKeyPress/getNewSegmentValueFromArrowKeyPress.ts
 create mode 100644 packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromInputValue/getNewSegmentValueFromInputValue.spec.ts
 create mode 100644 packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromInputValue/getNewSegmentValueFromInputValue.ts
 create mode 100644 packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/isEverySegmentValueExplicit/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/isEverySegmentValueExplicit/isEverySegmentValueExplicit.ts

diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
index 44cae358b8..7b531334b7 100644
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -97,7 +97,11 @@ export const LiveExample: StoryFn<typeof DatePicker> = props => {
     <DatePicker
       {...props}
       value={value}
-      onDateChange={setValue}
+      onDateChange={v => {
+        // eslint-disable-next-line no-console
+        console.log('Storybook: onDateChange', { v });
+        setValue(v);
+      }}
       handleValidation={date =>
         // eslint-disable-next-line no-console
         console.log('Storybook: handleValidation', { date })
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index f18de797d8..b60b7a66b0 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1656,43 +1656,71 @@ describe('packages/date-picker', () => {
       });
 
       describe('into a single segment', () => {
-        test('does not fire a value change handler', () => {
+        test('does not fire a value change handler', async () => {
           const onDateChange = jest.fn();
           const { yearInput } = renderDatePicker({
             onDateChange,
           });
           userEvent.type(yearInput, '2023');
-          expect(onDateChange).not.toHaveBeenCalled();
+          await waitFor(() => expect(onDateChange).not.toHaveBeenCalled());
         });
 
-        test('does not fire a validation handler', () => {
+        test('does not fire a validation handler', async () => {
           const handleValidation = jest.fn();
           const { yearInput } = renderDatePicker({
             handleValidation,
           });
           userEvent.type(yearInput, '2023');
-          expect(handleValidation).not.toHaveBeenCalled();
+          await waitFor(() => expect(handleValidation).not.toHaveBeenCalled());
         });
 
-        test('fires a segment change handler', () => {
+        test('fires a segment change handler', async () => {
           const onChange = jest.fn();
           const { yearInput } = renderDatePicker({
             onChange,
           });
           userEvent.type(yearInput, '2023');
-          expect(onChange).toHaveBeenCalledWith(
-            eventContainingTargetValue('2023'),
+          await waitFor(() =>
+            expect(onChange).toHaveBeenCalledWith(
+              eventContainingTargetValue('2023'),
+            ),
           );
         });
 
-        test('does not immediately format the segment', () => {
+        test('does not immediately format the segment (year)', async () => {
           const onChange = jest.fn();
-          const { monthInput } = renderDatePicker({ onChange });
-          userEvent.type(monthInput, '1');
-          expect(onChange).toHaveBeenCalledWith(
-            eventContainingTargetValue('1'),
-          );
-          expect(monthInput.value).toBe('1');
+          const { yearInput } = renderDatePicker({ onChange });
+          userEvent.type(yearInput, '20');
+          await waitFor(() => {
+            expect(onChange).toHaveBeenCalledWith(
+              eventContainingTargetValue('20'),
+            );
+            expect(yearInput.value).toBe('20');
+          });
+        });
+
+        test('does not immediately format the segment (day)', async () => {
+          const onChange = jest.fn();
+          const { dayInput } = renderDatePicker({ onChange });
+          userEvent.type(dayInput, '2');
+          await waitFor(() => {
+            expect(onChange).toHaveBeenCalledWith(
+              eventContainingTargetValue('2'),
+            );
+            expect(dayInput.value).toBe('2');
+          });
+        });
+
+        test('allows typing multiple digits', async () => {
+          const onChange = jest.fn();
+          const { dayInput } = renderDatePicker({ onChange });
+          userEvent.type(dayInput, '26');
+          await waitFor(() => {
+            expect(onChange).toHaveBeenCalledWith(
+              eventContainingTargetValue('26'),
+            );
+            expect(dayInput.value).toBe('26');
+          });
         });
 
         describe('typing space', () => {
@@ -1926,6 +1954,15 @@ describe('packages/date-picker', () => {
               expect(dayInput).toHaveFocus();
               await waitFor(() => expect(dayInput).toHaveValue('2'));
             });
+
+            test('when day value is explicit, segment is formatted', async () => {
+              const { dayInput } = renderDatePicker({
+                locale,
+              });
+              userEvent.type(dayInput, '26');
+              expect(dayInput).toHaveFocus();
+              await waitFor(() => expect(dayInput).toHaveValue('26'));
+            });
           });
 
           describe('for en-US format', () => {
@@ -1976,8 +2013,8 @@ describe('packages/date-picker', () => {
         });
       });
 
-      describe('typing a full value', () => {
-        test('fires value change handler', () => {
+      describe('typing a full date value', () => {
+        test('fires value change handler for explicit values', async () => {
           const onDateChange = jest.fn();
           const { yearInput, monthInput, dayInput } = renderDatePicker({
             onDateChange,
@@ -1985,12 +2022,27 @@ describe('packages/date-picker', () => {
           userEvent.type(yearInput, '2003');
           userEvent.type(monthInput, '12');
           userEvent.type(dayInput, '26');
-          expect(onDateChange).toHaveBeenCalledWith(
-            expect.objectContaining(newUTC(2003, Month.December, 26)),
+
+          await waitFor(() =>
+            expect(onDateChange).toHaveBeenCalledWith(
+              expect.objectContaining(newUTC(2003, Month.December, 26)),
+            ),
           );
         });
 
-        test('properly renders the input', () => {
+        test('does not fire value change handler for ambiguous values', async () => {
+          const onDateChange = jest.fn();
+          const { yearInput, monthInput, dayInput } = renderDatePicker({
+            onDateChange,
+          });
+          userEvent.type(yearInput, '2003');
+          userEvent.type(monthInput, '12');
+          userEvent.type(dayInput, '2');
+
+          await waitFor(() => expect(onDateChange).not.toHaveBeenCalled());
+        });
+
+        test('properly renders the input', async () => {
           const onDateChange = jest.fn();
           const { yearInput, monthInput, dayInput } = renderDatePicker({
             onDateChange,
@@ -1998,9 +2050,11 @@ describe('packages/date-picker', () => {
           userEvent.type(yearInput, '2003');
           userEvent.type(monthInput, '12');
           userEvent.type(dayInput, '26');
-          expect(yearInput).toHaveValue('2003');
-          expect(monthInput).toHaveValue('12');
-          expect(dayInput).toHaveValue('26');
+          await waitFor(() => {
+            expect(yearInput).toHaveValue('2003');
+            expect(monthInput).toHaveValue('12');
+            expect(dayInput).toHaveValue('26');
+          });
         });
 
         describe('if value is out of range', () => {
@@ -2019,7 +2073,7 @@ describe('packages/date-picker', () => {
             );
           });
 
-          test('properly renders input if value is after MAX', () => {
+          test('properly renders input if value is after MAX', async () => {
             const onDateChange = jest.fn();
             const { yearInput, monthInput, dayInput } = renderDatePicker({
               onDateChange,
@@ -2027,12 +2081,15 @@ describe('packages/date-picker', () => {
             userEvent.type(yearInput, '2048');
             userEvent.type(monthInput, '12');
             userEvent.type(dayInput, '23');
-            expect(yearInput).toHaveValue('2048');
-            expect(monthInput).toHaveValue('12');
-            expect(dayInput).toHaveValue('23');
+
+            await waitFor(() => {
+              expect(yearInput).toHaveValue('2048');
+              expect(monthInput).toHaveValue('12');
+              expect(dayInput).toHaveValue('23');
+            });
           });
 
-          test('fire a value change handler if value is before MIN', () => {
+          test('fire a value change handler if value is before MIN', async () => {
             const onDateChange = jest.fn();
             const { yearInput, monthInput, dayInput } = renderDatePicker({
               onDateChange,
@@ -2040,12 +2097,14 @@ describe('packages/date-picker', () => {
             userEvent.type(yearInput, '1969');
             userEvent.type(monthInput, '7');
             userEvent.type(dayInput, '20');
-            expect(onDateChange).toHaveBeenCalledWith(
-              expect.objectContaining(newUTC(1969, Month.July, 20)),
+            await waitFor(() =>
+              expect(onDateChange).toHaveBeenCalledWith(
+                expect.objectContaining(newUTC(1969, Month.July, 20)),
+              ),
             );
           });
 
-          test('properly renders input if value is before MIN', () => {
+          test('properly renders input if value is before MIN', async () => {
             const onDateChange = jest.fn();
             const { yearInput, monthInput, dayInput } = renderDatePicker({
               onDateChange,
@@ -2053,9 +2112,11 @@ describe('packages/date-picker', () => {
             userEvent.type(yearInput, '1969');
             userEvent.type(monthInput, '7');
             userEvent.type(dayInput, '20');
-            expect(yearInput).toHaveValue('1969');
-            expect(monthInput).toHaveValue('07');
-            expect(dayInput).toHaveValue('20');
+            await waitFor(() => {
+              expect(yearInput).toHaveValue('1969');
+              expect(monthInput).toHaveValue('07');
+              expect(dayInput).toHaveValue('20');
+            });
           });
         });
       });
@@ -2095,42 +2156,21 @@ describe('packages/date-picker', () => {
         });
 
         describe('typing new characters', () => {
-          test('does not immediately format the year', () => {
-            const { yearInput, monthInput, dayInput } = renderDatePicker({});
-            userEvent.type(yearInput, '2019');
-            userEvent.type(monthInput, '6');
-            userEvent.type(dayInput, '1');
-
-            userEvent.type(yearInput, '9');
-            userEvent.type(yearInput, '9');
-            expect(yearInput).toHaveValue('1999');
-          });
-
-          test('appends to the segment value if the resulting value is valid', () => {
+          test('even if the resulting value is valid, keeps the input as-is', async () => {
             const { monthInput } = renderDatePicker({});
             userEvent.type(monthInput, '1');
             userEvent.tab();
-            expect(monthInput).toHaveValue('01');
+            await waitFor(() => expect(monthInput).toHaveValue('01'));
             userEvent.type(monthInput, '2');
-            expect(monthInput).toHaveValue('12');
+            await waitFor(() => expect(monthInput).toHaveValue('01'));
           });
 
-          describe('if the resulting value is not valid', () => {
-            test('overwrites the segment with the incoming digit 1-9', () => {
-              const { monthInput } = renderDatePicker({});
-              userEvent.type(monthInput, '6');
-              expect(monthInput).toHaveValue('06');
-              userEvent.type(monthInput, '9');
-              expect(monthInput).toHaveValue('09');
-            });
-
-            test('overwrites the segment with the incoming digit 0', () => {
-              const { monthInput } = renderDatePicker({});
-              userEvent.type(monthInput, '6');
-              expect(monthInput).toHaveValue('06');
-              userEvent.type(monthInput, '0');
-              expect(monthInput).toHaveValue('0');
-            });
+          test('if the resulting value is not valid, keeps the input as-is', async () => {
+            const { monthInput } = renderDatePicker({});
+            userEvent.type(monthInput, '6');
+            await waitFor(() => expect(monthInput).toHaveValue('06'));
+            userEvent.type(monthInput, '9');
+            await waitFor(() => expect(monthInput).toHaveValue('06'));
           });
         });
       });
diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index 91010cc604..d8309869d5 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -72,7 +72,7 @@ export interface RenderMenuResult {
 export const renderDatePicker = (
   props?: Partial<DatePickerProps>,
 ): RenderDatePickerResult => {
-  const defaultProps = { label: '' };
+  const defaultProps = { label: 'label' };
   const result = render(
     <DatePicker data-testid="lg-date-picker" {...defaultProps} {...props} />,
   );
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index 41e2b24352..c915db5a03 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -20,6 +20,7 @@ import {
   getMinSegmentValue,
   getRelativeSegment,
   getValueFormatter,
+  isEverySegmentValueExplicit,
   isExplicitSegmentValue,
   newDateFromSegments,
 } from '../../../utils';
@@ -86,15 +87,16 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
       const hasAnySegmentChanged = !isEqual(newSegments, prevSegments);
 
       if (hasAnySegmentChanged) {
-        const utcDate = newDateFromSegments(newSegments);
         const areAllSegmentsEmpty = !doesSomeSegmentExist(newSegments);
+        const areAllExplicit = isEverySegmentValueExplicit(newSegments);
+        const utcDate = newDateFromSegments(newSegments);
 
-        if (utcDate) {
-          // Update the value iff all segments create a valid date.
-          setValue?.(utcDate);
-        } else if (areAllSegmentsEmpty) {
+        if (areAllSegmentsEmpty) {
           // otherwise, if no segment exists, set the external value to null
           setValue?.(null);
+        } else if (areAllExplicit && !!utcDate) {
+          // Update the value iff all segments create a valid date.
+          setValue?.(utcDate);
         }
       }
     };
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 4b32dac90d..3997c91569 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
@@ -5,7 +5,6 @@ import userEvent from '@testing-library/user-event';
 
 import { defaultMax, defaultMin } from '../../../constants';
 import {
-  defaultSharedDatePickerContext,
   SharedDatePickerProvider,
   SharedDatePickerProviderProps,
 } from '../../../context';
@@ -26,14 +25,16 @@ const renderSegment = (
   };
 
   const result = render(
-    <SharedDatePickerProvider {...defaultSharedDatePickerContext} {...ctx}>
+    <SharedDatePickerProvider label="label" {...ctx}>
       <DateInputSegment {...defaultProps} {...props} />
     </SharedDatePickerProvider>,
   );
 
   const rerenderSegment = (newProps: Partial<DateInputSegmentProps>) =>
     result.rerender(
-      <DateInputSegment {...defaultProps} {...props} {...newProps} />,
+      <SharedDatePickerProvider label="label" {...ctx}>
+        <DateInputSegment {...defaultProps} {...props} {...newProps} />,
+      </SharedDatePickerProvider>,
     );
 
   const getInput = () =>
@@ -141,75 +142,77 @@ describe('packages/date-picker/shared/date-input-segment', () => {
   });
 
   describe('Typing', () => {
-    test('calls the change handler', () => {
-      const { input } = renderSegment({
-        onChange: onChangeHandler,
+    describe('into an empty segment', () => {
+      test('calls the change handler', () => {
+        const { input } = renderSegment({
+          onChange: onChangeHandler,
+        });
+
+        userEvent.type(input, '8');
+        expect(onChangeHandler).toHaveBeenCalledWith(
+          expect.objectContaining({ value: '8' }),
+        );
       });
 
-      userEvent.type(input, '8');
-      expect(onChangeHandler).toHaveBeenCalledWith(
-        expect.objectContaining({ value: '8' }),
-      );
-    });
+      test('allows zero character', () => {
+        const { input } = renderSegment({
+          onChange: onChangeHandler,
+        });
 
-    test('allows typing additional characters to create a valid value', () => {
-      const { input } = renderSegment({
-        value: '02',
-        onChange: onChangeHandler,
+        userEvent.type(input, '0');
+        expect(onChangeHandler).toHaveBeenCalledWith(
+          expect.objectContaining({ value: '0' }),
+        );
       });
 
-      userEvent.type(input, '6');
-      expect(onChangeHandler).toHaveBeenCalled();
-      expect(onChangeHandler).toHaveBeenCalledWith(
-        expect.objectContaining({ value: '26' }),
-      );
-    });
+      test('allows typing leading zeroes', async () => {
+        const { input, rerenderSegment } = renderSegment({
+          onChange: onChangeHandler,
+        });
+
+        userEvent.type(input, '0');
+        rerenderSegment({ value: '0' });
 
-    test('does not allow additional characters that create an invalid value', () => {
-      const { input } = renderSegment({
-        value: '26',
-        onChange: onChangeHandler,
+        userEvent.type(input, '2');
+        await waitFor(() => {
+          expect(onChangeHandler).toHaveBeenCalledWith(
+            expect.objectContaining({ value: '02' }),
+          );
+        });
       });
 
-      userEvent.type(input, '6');
-      expect(onChangeHandler).toHaveBeenCalled();
-      expect(onChangeHandler).toHaveBeenCalledWith(
-        expect.objectContaining({ value: '06' }),
-      );
-    });
+      test('does not allow non-number characters', () => {
+        const { input } = renderSegment({
+          onChange: onChangeHandler,
+        });
 
-    test('allows zero character', () => {
-      const { input } = renderSegment({
-        onChange: onChangeHandler,
+        userEvent.type(input, 'aB$/');
+        expect(onChangeHandler).not.toHaveBeenCalled();
       });
-
-      userEvent.type(input, '0');
-      expect(onChangeHandler).toHaveBeenCalledWith(
-        expect.objectContaining({ value: '0' }),
-      );
     });
 
-    test('allows leading zeroes', async () => {
-      const { input } = renderSegment({
-        value: '0',
-        onChange: onChangeHandler,
-      });
+    describe('into a segment with a value', () => {
+      test('allows typing additional characters if the current value is incomplete', () => {
+        const { input } = renderSegment({
+          value: '2',
+          onChange: onChangeHandler,
+        });
 
-      userEvent.type(input, '2');
-      await waitFor(() =>
+        userEvent.type(input, '6');
         expect(onChangeHandler).toHaveBeenCalledWith(
-          expect.objectContaining({ value: '02' }),
-        ),
-      );
-    });
-
-    test('does not allow non-number characters', () => {
-      const { input } = renderSegment({
-        onChange: onChangeHandler,
+          expect.objectContaining({ value: '26' }),
+        );
       });
 
-      userEvent.type(input, 'aB$/');
-      expect(onChangeHandler).not.toHaveBeenCalled();
+      test('does not allow additional characters that create an invalid value', () => {
+        const { input } = renderSegment({
+          value: '26',
+          onChange: onChangeHandler,
+        });
+
+        userEvent.type(input, '6');
+        expect(onChangeHandler).not.toHaveBeenCalled();
+      });
     });
   });
 
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 b754db4d50..57c23f8aac 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -3,7 +3,7 @@ import React, { ChangeEventHandler, KeyboardEventHandler } from 'react';
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { keyMap, rollover } from '@leafygreen-ui/lib';
+import { keyMap } from '@leafygreen-ui/lib';
 import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
@@ -16,7 +16,7 @@ import {
 import { useSharedDatePickerContext } from '../../../context';
 import { getAutoComplete, getValueFormatter } from '../../../utils';
 
-import { calculateNewSegmentValue } from './calculateNewSegmentValue';
+import { getNewSegmentValueFromArrowKeyPress } from './utils/getNewSegmentValueFromArrowKeyPress/getNewSegmentValueFromArrowKeyPress';
 import {
   baseStyles,
   fontSizeStyles,
@@ -25,6 +25,7 @@ import {
   segmentWidthStyles,
 } from './DateInputSegment.styles';
 import { DateInputSegmentProps } from './DateInputSegment.types';
+import { getNewSegmentValueFromInputValue } from './utils';
 
 /**
  * Renders a single date segment with the
@@ -65,29 +66,30 @@ export const DateInputSegment = React.forwardRef<
     const autoComplete = getAutoComplete(autoCompleteProp, segment);
     const pattern = `[0-9]{${charsPerSegment[segment]}}`;
 
-    /** Prevent non-numeric values from triggering a change event */
+    /**
+     * Receives native input events,
+     * determines whether the input value is valid and should change,
+     * and fires a custom `DateInputSegmentChangeEvent`.
+     */
     const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
       const { target } = e;
-      const containsPeriod = /\./.test(target.value);
-      const prevValue = value ?? '';
-
-      // macOS adds a period when pressing SPACE twice inside a text input.
-      // If there is a period replace the value with the prevValue.
-      if (containsPeriod) {
-        target.value = prevValue;
-        return;
-      }
 
-      const hasValueChanged = target.value !== prevValue;
-      const numericValue = Number(target.value);
+      const newValue = getNewSegmentValueFromInputValue(
+        segment,
+        value,
+        target.value,
+      );
 
-      if (!isNaN(numericValue) && hasValueChanged) {
-        const newValue = calculateNewSegmentValue(segment, target.value);
+      const hasValueChanged = newValue !== value;
 
+      if (hasValueChanged) {
         onChange({
           segment,
           value: newValue,
         });
+      } else {
+        // If the value has not changed, ensure the input value is reset
+        target.value = value;
       }
     };
 
@@ -103,17 +105,14 @@ export const DateInputSegment = React.forwardRef<
           /** Fire a custom change event when the up/down arrow keys are pressed */
 
           e.preventDefault();
-          const valueDiff = key === keyMap.ArrowUp ? 1 : -1;
-          const defaultVal = key === keyMap.ArrowUp ? min : max;
-
-          const incrementedValue: number = value
-            ? Number(value) + valueDiff
-            : defaultVal;
 
-          const newValue =
-            segment === 'year'
-              ? incrementedValue
-              : rollover(incrementedValue, min, max);
+          const newValue = getNewSegmentValueFromArrowKeyPress({
+            key,
+            value,
+            min,
+            max,
+            segment,
+          });
           const valueString = formatter(newValue);
 
           onChange({
@@ -163,6 +162,7 @@ export const DateInputSegment = React.forwardRef<
         ref={inputRef}
         type="text"
         pattern={pattern}
+        maxLength={charsPerSegment[segment]}
         role="spinbutton"
         value={value}
         min={min}
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/calculateNewSegmentValue/index.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/calculateNewSegmentValue/index.ts
deleted file mode 100644
index be09df0bdf..0000000000
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/calculateNewSegmentValue/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import last from 'lodash/last';
-
-import { truncateStart } from '@leafygreen-ui/lib';
-
-import { charsPerSegment } from '../../../../constants';
-import { DateSegment, DateSegmentValue } from '../../../../types';
-import { getValueFormatter, isValidValueForSegment } from '../../../../utils';
-
-/**
- * Calculates the new value for the segment given an incoming change
- */
-export const calculateNewSegmentValue = (
-  segmentName: DateSegment,
-  incomingValue: DateSegmentValue,
-): DateSegmentValue => {
-  if (
-    !isValidValueForSegment(segmentName, incomingValue) &&
-    segmentName !== 'year'
-  ) {
-    const formatter = getValueFormatter(segmentName);
-    const typedChar = last(incomingValue.split(''));
-    const newValue = typedChar === '0' ? '0' : formatter(typedChar);
-    return newValue;
-  }
-
-  return truncateStart(incomingValue, {
-    length: charsPerSegment[segmentName],
-  });
-};
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromArrowKeyPress/getNewSegmentValueFromArrowKeyPress.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromArrowKeyPress/getNewSegmentValueFromArrowKeyPress.ts
new file mode 100644
index 0000000000..c52f81774c
--- /dev/null
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromArrowKeyPress/getNewSegmentValueFromArrowKeyPress.ts
@@ -0,0 +1,31 @@
+import { keyMap, rollover } from '@leafygreen-ui/lib';
+
+import { DateSegment, DateSegmentValue } from '../../../../../types';
+
+export const getNewSegmentValueFromArrowKeyPress = ({
+  value,
+  key,
+  segment,
+  min,
+  max,
+}: {
+  value: DateSegmentValue;
+  key: typeof keyMap.ArrowUp | typeof keyMap.ArrowDown;
+  segment: DateSegment;
+  min: number;
+  max: number;
+}) => {
+  const valueDiff = key === keyMap.ArrowUp ? 1 : -1;
+  const defaultVal = key === keyMap.ArrowUp ? min : max;
+
+  const incrementedValue: number = value
+    ? Number(value) + valueDiff
+    : defaultVal;
+
+  const newValue =
+    segment === 'year'
+      ? incrementedValue
+      : rollover(incrementedValue, min, max);
+
+  return newValue;
+};
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromInputValue/getNewSegmentValueFromInputValue.spec.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromInputValue/getNewSegmentValueFromInputValue.spec.ts
new file mode 100644
index 0000000000..cdfedfb522
--- /dev/null
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromInputValue/getNewSegmentValueFromInputValue.spec.ts
@@ -0,0 +1,173 @@
+import { range } from 'lodash';
+
+import { defaultMax, defaultMin } from '../../../../../constants';
+import { DateSegment } from '../../../../../types';
+import { getValueFormatter } from '../../../../../utils';
+
+import { getNewSegmentValueFromInputValue } from './getNewSegmentValueFromInputValue';
+
+describe('packages/date-picker/shared/date-input-segment/getNewSegmentValueFromInputValue', () => {
+  describe.each(['day', 'month', 'year'])(
+    'For segment %p',
+    (segment: DateSegment) => {
+      describe('when current value is empty', () => {
+        test.each(range(10))('accepts %i character as input', i => {
+          const newValue = getNewSegmentValueFromInputValue(
+            segment,
+            '',
+            `${i}`,
+          );
+          expect(newValue).toEqual(`${i}`);
+        });
+
+        const validValues = [defaultMin[segment], defaultMax[segment]];
+        test.each(validValues)(`accepts value "%i" as input`, v => {
+          const newValue = getNewSegmentValueFromInputValue(
+            segment,
+            '',
+            `${v}`,
+          );
+          expect(newValue).toEqual(`${v}`);
+        });
+
+        test('does not accept non-numeric characters', () => {
+          const newValue = getNewSegmentValueFromInputValue(segment, '', `b`);
+          expect(newValue).toEqual('');
+        });
+
+        test('does not accept input with a period/decimal', () => {
+          const newValue = getNewSegmentValueFromInputValue(segment, '', `2.`);
+          expect(newValue).toEqual('');
+        });
+      });
+
+      describe('when current value is 0', () => {
+        if (segment !== 'year') {
+          test('rejects additional 0 as input', () => {
+            const newValue = getNewSegmentValueFromInputValue(
+              segment,
+              '0',
+              `00`,
+            );
+            expect(newValue).toEqual(`0`);
+          });
+        }
+        test.each(range(1, 10))('accepts 0%i as input', i => {
+          const newValue = getNewSegmentValueFromInputValue(
+            segment,
+            '0',
+            `0${i}`,
+          );
+          expect(newValue).toEqual(`0${i}`);
+        });
+        test('value can be deleted', () => {
+          const newValue = getNewSegmentValueFromInputValue(segment, '0', ``);
+          expect(newValue).toEqual(``);
+        });
+      });
+
+      describe('when current value is 1', () => {
+        test('value can be deleted', () => {
+          const newValue = getNewSegmentValueFromInputValue(segment, '1', ``);
+          expect(newValue).toEqual(``);
+        });
+
+        if (segment === 'month') {
+          test.each(range(0, 3))('accepts 1%i as input', i => {
+            const newValue = getNewSegmentValueFromInputValue(
+              segment,
+              '1',
+              `1${i}`,
+            );
+            expect(newValue).toEqual(`1${i}`);
+          });
+          describe.each(range(3, 10))('rejects 1%i', i => {
+            test(`and sets input "${i}"`, () => {
+              const newValue = getNewSegmentValueFromInputValue(
+                segment,
+                '1',
+                `1${i}`,
+              );
+              expect(newValue).toEqual(`${i}`);
+            });
+          });
+        } else {
+          test.each(range(10))('accepts 1%i as input', i => {
+            const newValue = getNewSegmentValueFromInputValue(
+              segment,
+              '1',
+              `1${i}`,
+            );
+            expect(newValue).toEqual(`1${i}`);
+          });
+        }
+      });
+
+      describe('when current value is 3', () => {
+        test('value can be deleted', () => {
+          const newValue = getNewSegmentValueFromInputValue(segment, '3', ``);
+          expect(newValue).toEqual(``);
+        });
+
+        switch (segment) {
+          case 'day': {
+            test.each(range(0, 2))('accepts 3%i as input', i => {
+              const newValue = getNewSegmentValueFromInputValue(
+                segment,
+                '3',
+                `3${i}`,
+              );
+              expect(newValue).toEqual(`3${i}`);
+            });
+            describe.each(range(3, 10))('rejects 3%i', i => {
+              test(`and sets input to ${i}`, () => {
+                const newValue = getNewSegmentValueFromInputValue(
+                  segment,
+                  '3',
+                  `3${i}`,
+                );
+                expect(newValue).toEqual(`${i}`);
+              });
+            });
+            break;
+          }
+
+          case 'month': {
+            describe.each(range(10))('rejects 3%i', i => {
+              test(`and sets input "${i}"`, () => {
+                const newValue = getNewSegmentValueFromInputValue(
+                  segment,
+                  '3',
+                  `3${i}`,
+                );
+                expect(newValue).toEqual(`${i}`);
+              });
+            });
+            break;
+          }
+
+          default:
+            break;
+        }
+      });
+
+      describe('when current value is a full formatted value', () => {
+        const formatter = getValueFormatter(segment);
+        const testValues = [defaultMin[segment], defaultMax[segment]].map(
+          formatter,
+        );
+        test.each(testValues)(
+          'when current value is %p, rejects additional input',
+          val => {
+            const newValue = getNewSegmentValueFromInputValue(
+              segment,
+              val,
+              `${val}1`,
+            );
+            expect(newValue).toEqual(val);
+          },
+        );
+      });
+    },
+  );
+});
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromInputValue/getNewSegmentValueFromInputValue.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromInputValue/getNewSegmentValueFromInputValue.ts
new file mode 100644
index 0000000000..1aff779713
--- /dev/null
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromInputValue/getNewSegmentValueFromInputValue.ts
@@ -0,0 +1,56 @@
+import last from 'lodash/last';
+
+import { truncateStart } from '@leafygreen-ui/lib';
+
+import { charsPerSegment } from '../../../../../constants';
+import { DateSegment, DateSegmentValue } from '../../../../../types';
+import { isValidValueForSegment } from '../../../../../utils';
+
+/**
+ * Calculates the new value for the segment given an incoming change.
+ *
+ * Does not allow incoming values that
+ * - are not valid numbers
+ * - include a period
+ * - would cause the segment to overflow
+ */
+export const getNewSegmentValueFromInputValue = (
+  segmentName: DateSegment,
+  currentValue: DateSegmentValue,
+  incomingValue: DateSegmentValue,
+): DateSegmentValue => {
+  // If the incoming value is not a valid number
+  const isIncomingValueNumber = !isNaN(Number(incomingValue));
+  // macOS adds a period when pressing SPACE twice inside a text input.
+  const doesIncomingValueContainPeriod = /\./.test(incomingValue);
+
+  // if the current value is "full", do not allow any additional characters to be entered
+  const wouldCauseOverflow =
+    currentValue.length === charsPerSegment[segmentName] &&
+    incomingValue.length > charsPerSegment[segmentName];
+
+  if (
+    !isIncomingValueNumber ||
+    doesIncomingValueContainPeriod ||
+    wouldCauseOverflow
+  ) {
+    return currentValue;
+  }
+
+  const isIncomingValueValid = isValidValueForSegment(
+    segmentName,
+    incomingValue,
+  );
+
+  if (isIncomingValueValid || segmentName === 'year') {
+    const newValue = truncateStart(incomingValue, {
+      length: charsPerSegment[segmentName],
+    });
+
+    return newValue;
+  }
+
+  const typedChar = last(incomingValue.split(''));
+  const newValue = typedChar === '0' ? '0' : typedChar ?? '';
+  return newValue;
+};
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/index.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/index.ts
new file mode 100644
index 0000000000..f71520a27c
--- /dev/null
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/index.ts
@@ -0,0 +1 @@
+export { getNewSegmentValueFromInputValue } from './getNewSegmentValueFromInputValue/getNewSegmentValueFromInputValue';
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index 924d0cea24..cf15e082e0 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -17,6 +17,7 @@ export {
 } from './getSegmentsFromDate';
 export { getValueFormatter } from './getValueFormatter';
 export { isElementInputSegment } from './isElementInputSegment';
+export { isEverySegmentValueExplicit } from './isEverySegmentValueExplicit';
 export { isExplicitSegmentValue } from './isExplicitSegmentValue';
 export { isValidSegmentName, isValidSegmentValue } from './isValidSegment';
 export { isValidValueForSegment } from './isValidValueForSegment';
diff --git a/packages/date-picker/src/shared/utils/isEverySegmentValueExplicit/index.ts b/packages/date-picker/src/shared/utils/isEverySegmentValueExplicit/index.ts
new file mode 100644
index 0000000000..f808d60b69
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/isEverySegmentValueExplicit/index.ts
@@ -0,0 +1 @@
+export { isEverySegmentValueExplicit } from './isEverySegmentValueExplicit';
diff --git a/packages/date-picker/src/shared/utils/isEverySegmentValueExplicit/isEverySegmentValueExplicit.ts b/packages/date-picker/src/shared/utils/isEverySegmentValueExplicit/isEverySegmentValueExplicit.ts
new file mode 100644
index 0000000000..10ec19bd54
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/isEverySegmentValueExplicit/isEverySegmentValueExplicit.ts
@@ -0,0 +1,14 @@
+import { DateSegment, DateSegmentsState } from '../../types';
+import { isExplicitSegmentValue } from '../isExplicitSegmentValue';
+
+/**
+ * Returns whether every segment's value is explicit and unambiguous
+ * (see {@link isExplicitSegmentValue})
+ */
+export const isEverySegmentValueExplicit = (
+  segments: DateSegmentsState,
+): boolean => {
+  return Object.entries(segments).every(([segment, value]) =>
+    isExplicitSegmentValue(segment as DateSegment, value),
+  );
+};

From 95af767b939892d4c073e43ef10e9c7a04a3c179 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Mon, 18 Dec 2023 15:43:23 -0500
Subject: [PATCH 334/351] Date Picker chromatic fixes (#2141)

* fix stories

* remove space

* update type, does this work??

* wip

* fix type

* rename ctx to storyContextProps

* chromatic updates

* change date in interaction test

* remove time from story

* add withVal date
---
 .../date-picker/src/DatePicker.stories.tsx    |  6 ++
 .../DatePickerInput.stories.tsx               |  4 +
 .../DatePickerMenu/DatePickerMenu.stories.tsx | 78 ++++++++++++++-----
 .../CalendarCell/CalendarCell.stories.tsx     |  5 +-
 .../CalendarGrid/CalendarGrid.stories.tsx     |  6 +-
 .../DateFormField/DateFormField.stories.tsx   | 32 ++++----
 .../DateInputBox/DateInputBox.stories.tsx     | 28 ++++---
 .../DateInputSegment.stories.tsx              | 19 +++--
 .../context/SharedDatePickerContext.utils.ts  |  1 +
 .../getProviderPropsFromStoryContext/index.ts | 13 +---
 10 files changed, 130 insertions(+), 62 deletions(-)

diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
index 7b531334b7..b06747480c 100644
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -66,6 +66,7 @@ const meta: StoryMetaType<typeof DatePicker, SharedDatePickerContextProps> = {
   args: {
     locale: 'iso8601',
     label: 'Pick a date',
+    description: 'description',
     size: Size.Default,
     autoComplete: AutoComplete.Off,
     min: MIN_DATE,
@@ -113,6 +114,11 @@ export const LiveExample: StoryFn<typeof DatePicker> = props => {
 export const Uncontrolled: StoryFn<typeof DatePicker> = props => {
   return <DatePicker {...props} />;
 };
+Uncontrolled.parameters = {
+  chromatic: {
+    disableSnapshots: true,
+  },
+};
 
 export const InModal: StoryFn<typeof DatePicker> = props => {
   const [value, setValue] = useState<Date | null | undefined>();
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
index 40486dc334..8b3bf00f78 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.stories.tsx
@@ -70,4 +70,8 @@ export default meta;
 
 export const Basic: StoryFn<DatePickerProps> = () => <DatePickerInput />;
 
+Basic.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
 export const Generated: StoryFn<DatePickerProps> = () => <></>;
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 2c73cc13fd..6bfd0212e9 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -82,25 +82,37 @@ export const Basic: DatePickerMenuStoryType = {
     MockDate.reset();
     const [value, setValue] = useState<Date | null>(null);
 
+    const date = new Date(Date.now());
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
     return (
       <DatePickerProvider value={value} setValue={setValue}>
-        <InlineCode ref={refEl}>
-          Today: {new Date(Date.now()).toUTCString()}
-        </InlineCode>
-        <DatePickerMenu {...props} refEl={refEl} />
+        <div style={{ minHeight: '50vh' }}>
+          <InlineCode ref={refEl}>
+            Today:{' '}
+            {new Intl.DateTimeFormat('en-GB', {
+              dateStyle: 'full',
+            }).format(date)}
+          </InlineCode>
+          <DatePickerMenu {...props} refEl={refEl} />
+        </div>
       </DatePickerProvider>
     );
   },
 };
 
+Basic.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
 export const WithValue: DatePickerMenuStoryType = {
   render: args => {
     MockDate.reset();
 
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
+    const date = new Date(Date.now());
+    const withValueDate = new Date(2023, Month.September, 10);
     return (
       <DatePickerProvider
         value={newUTC(2023, Month.September, 10)}
@@ -108,7 +120,17 @@ export const WithValue: DatePickerMenuStoryType = {
       >
         <div style={{ minHeight: '50vh' }}>
           <InlineCode ref={refEl}>
-            Today: {new Date(Date.now()).toUTCString()}
+            Today:{' '}
+            {new Intl.DateTimeFormat('en-GB', {
+              dateStyle: 'full',
+            }).format(date)}
+          </InlineCode>
+          <br></br>
+          <InlineCode ref={refEl}>
+            Value:{' '}
+            {new Intl.DateTimeFormat('en-GB', {
+              dateStyle: 'full',
+            }).format(withValueDate)}
           </InlineCode>
           <DatePickerMenu {...props} refEl={refEl} />
         </div>
@@ -117,6 +139,14 @@ export const WithValue: DatePickerMenuStoryType = {
   },
 };
 
+export const WithValueDarkMode: DatePickerMenuStoryType = {
+  ...WithValue,
+  args: {
+    // @ts-expect-error - DatePickerMenuStoryType does not include Context props
+    darkMode: true,
+  },
+};
+
 export const MockedToday: DatePickerMenuStoryType = {
   render: args => {
     // Force `new Date()` to return `mockToday`
@@ -125,19 +155,25 @@ export const MockedToday: DatePickerMenuStoryType = {
 
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
+    const date = new Date(Date.now());
     return (
       <DatePickerProvider value={value} setValue={setValue}>
-        <InlineCode ref={refEl}>
-          Today: {new Date(Date.now()).toUTCString()}
-        </InlineCode>
-        <DatePickerMenu {...props} refEl={refEl} />
+        <div style={{ minHeight: '50vh' }}>
+          <InlineCode ref={refEl}>
+            Today:{' '}
+            {new Intl.DateTimeFormat('en-GB', {
+              dateStyle: 'full',
+            }).format(date)}
+          </InlineCode>
+          <DatePickerMenu {...props} refEl={refEl} />
+        </div>
       </DatePickerProvider>
     );
   },
 };
 
-export const DarkMode: DatePickerMenuStoryType = {
-  ...WithValue,
+export const MockedTodayDarkMode: DatePickerMenuStoryType = {
+  ...MockedToday,
   args: {
     // @ts-expect-error - DatePickerMenuStoryType does not include Context props
     darkMode: true,
@@ -169,7 +205,7 @@ export const InitialFocusValue: DatePickerMenuInteractionTestType = {
 };
 
 export const LeftArrowKey: DatePickerMenuInteractionTestType = {
-  ...Basic,
+  ...WithValue,
   play: async ctx => {
     await InitialFocusToday.play(ctx);
     userEvent.keyboard('{arrowleft}');
@@ -177,7 +213,7 @@ export const LeftArrowKey: DatePickerMenuInteractionTestType = {
 };
 
 export const RightArrowKey: DatePickerMenuInteractionTestType = {
-  ...Basic,
+  ...WithValue,
   play: async ctx => {
     await InitialFocusToday.play(ctx);
     userEvent.keyboard('{arrowright}');
@@ -185,7 +221,7 @@ export const RightArrowKey: DatePickerMenuInteractionTestType = {
 };
 
 export const UpArrowKey: DatePickerMenuInteractionTestType = {
-  ...Basic,
+  ...WithValue,
   play: async ctx => {
     await InitialFocusToday.play(ctx);
     userEvent.keyboard('{arrowup}');
@@ -193,7 +229,7 @@ export const UpArrowKey: DatePickerMenuInteractionTestType = {
 };
 
 export const DownArrowKey: DatePickerMenuInteractionTestType = {
-  ...Basic,
+  ...WithValue,
   play: async ctx => {
     await InitialFocusToday.play(ctx);
     userEvent.keyboard('{arrowdown}');
@@ -201,7 +237,7 @@ export const DownArrowKey: DatePickerMenuInteractionTestType = {
 };
 
 export const UpToPrevMonth: DatePickerMenuInteractionTestType = {
-  ...Basic,
+  ...WithValue,
   play: async ctx => {
     await InitialFocusToday.play(ctx);
     userEvent.keyboard('{arrowup}{arrowup}');
@@ -209,7 +245,7 @@ export const UpToPrevMonth: DatePickerMenuInteractionTestType = {
 };
 
 export const DownToNextMonth: DatePickerMenuInteractionTestType = {
-  ...Basic,
+  ...WithValue,
   play: async ctx => {
     await InitialFocusToday.play(ctx);
     userEvent.keyboard('{arrowdown}{arrowdown}{arrowdown}');
@@ -217,7 +253,7 @@ export const DownToNextMonth: DatePickerMenuInteractionTestType = {
 };
 
 export const OpenMonthMenu: DatePickerMenuInteractionTestType = {
-  ...Basic,
+  ...WithValue,
   play: async ctx => {
     const canvas = within(ctx.canvasElement.parentElement!);
     await canvas.findByRole('listbox');
@@ -227,7 +263,7 @@ export const OpenMonthMenu: DatePickerMenuInteractionTestType = {
 };
 
 export const SelectJanuary: DatePickerMenuInteractionTestType = {
-  ...Basic,
+  ...WithValue,
   play: async ctx => {
     await OpenMonthMenu.play(ctx);
     const { findAllByRole } = within(ctx.canvasElement.parentElement!);
@@ -238,7 +274,7 @@ export const SelectJanuary: DatePickerMenuInteractionTestType = {
 };
 
 export const OpenYearMenu: DatePickerMenuInteractionTestType = {
-  ...Basic,
+  ...WithValue,
   play: async ctx => {
     const canvas = within(ctx.canvasElement.parentElement!);
     await canvas.findByRole('listbox');
@@ -248,7 +284,7 @@ export const OpenYearMenu: DatePickerMenuInteractionTestType = {
 };
 
 export const Select2026: DatePickerMenuInteractionTestType = {
-  ...Basic,
+  ...WithValue,
   play: async ctx => {
     await OpenYearMenu.play(ctx);
     const { findAllByRole } = within(ctx.canvasElement.parentElement!);
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.stories.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.stories.tsx
index c50a9c6d8b..1b5a6b492d 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.stories.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.stories.tsx
@@ -62,7 +62,10 @@ const Template: StoryFn<typeof CalendarCell> = props => (
 
 export const Basic = Template.bind({});
 
-// export const Generated = () => {};
+Basic.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
 export const DefaultCells: StoryFn<typeof CalendarCell> = () => <></>;
 DefaultCells.parameters = {
   generate: {
diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
index 14b3ef43ae..1d268731f2 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarGrid/CalendarGrid.stories.tsx
@@ -63,7 +63,7 @@ const meta: StoryMetaType<typeof CalendarGrid, SharedDatePickerContextProps> = {
 
 export default meta;
 
-export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
+export const Basic: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
   const { timeZone } = useSharedDatePickerContext();
   const [month] = useState(newUTC(2023, Month.August, 1));
 
@@ -95,6 +95,10 @@ export const Demo: StoryFn<typeof CalendarGrid> = ({ ...props }) => {
   );
 };
 
+Basic.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
 export const Generated: StoryFn<typeof CalendarGrid> = () => <></>;
 Generated.parameters = {
   generate: {
diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
index d30c5ee969..f945f25cef 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.stories.tsx
@@ -5,6 +5,7 @@ import { StoryFn } from '@storybook/react';
 import { css } from '@leafygreen-ui/emotion';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
 
 import {
   SharedDatePickerContextProps,
@@ -14,6 +15,16 @@ import { DatePickerState } from '../../../types';
 
 import { DateFormField } from './DateFormField';
 
+const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => {
+  return (
+    <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
+      <SharedDatePickerProvider {...ctx?.args}>
+        <Story />
+      </SharedDatePickerProvider>
+    </LeafyGreenProvider>
+  );
+};
+
 const meta: StoryMetaType<
   typeof DateFormField,
   Partial<SharedDatePickerContextProps>
@@ -30,8 +41,9 @@ const meta: StoryMetaType<
         darkMode: [false, true],
         label: ['Label', undefined],
         description: [undefined, 'Description'],
-        // state: Object.values(DatePickerState),
+        state: Object.values(DatePickerState),
         disabled: [false, true],
+        size: Object.values(Size),
       },
       excludeCombinations: [
         {
@@ -39,19 +51,7 @@ const meta: StoryMetaType<
           description: 'Description',
         },
       ],
-      decorator: (Instance, ctx) => (
-        <LeafyGreenProvider
-          darkMode={ctx?.args.darkMode}
-          baseFontSize={ctx?.args.baseFontSize}
-        >
-          <SharedDatePickerProvider
-            // @ts-expect-error - incomplete context value
-            value={{ ...ctx?.args }}
-          >
-            <Instance />
-          </SharedDatePickerProvider>
-        </LeafyGreenProvider>
-      ),
+      decorator: ProviderWrapper,
       args: {
         children: (
           <input
@@ -109,4 +109,8 @@ const Template: StoryFn<typeof DateFormField> = () => {
 
 export const Basic = Template.bind({});
 
+Basic.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
 export const Generated = () => {};
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
index b685a9fa1e..1f084f8435 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -5,29 +5,29 @@ import { isValid } from 'date-fns';
 
 import { Month, newUTC, testLocales } from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
-import { pickAndOmit, StoryMetaType, StoryType } from '@leafygreen-ui/lib';
+import { StoryMetaType, StoryType } from '@leafygreen-ui/lib';
 
 import {
-  contextPropNames,
   SharedDatePickerContextProps,
   SharedDatePickerProvider,
 } from '../../../context';
-import { segmentRefsMock } from '../../../testutils';
+import {
+  getProviderPropsFromStoryContext,
+  segmentRefsMock,
+} from '../../../testutils';
 
 import { DateInputBox } from './DateInputBox';
 
 const testDate = newUTC(1993, Month.December, 26);
 
 const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => {
-  const [{ darkMode, ...contextProps }, componentProps] = pickAndOmit(
-    ctx?.args,
-    contextPropNames,
-  );
+  const { leafyGreenProviderProps, datePickerProviderProps, storyProps } =
+    getProviderPropsFromStoryContext(ctx?.args);
 
   return (
-    <LeafyGreenProvider darkMode={darkMode}>
-      <SharedDatePickerProvider {...contextProps}>
-        <Story {...componentProps} segmentRefs={segmentRefsMock} />
+    <LeafyGreenProvider {...leafyGreenProviderProps}>
+      <SharedDatePickerProvider {...datePickerProviderProps}>
+        <Story {...storyProps} segmentRefs={segmentRefsMock} />
       </SharedDatePickerProvider>
     </LeafyGreenProvider>
   );
@@ -86,10 +86,18 @@ export const Basic: StoryFn<typeof DateInputBox> = props => {
   );
 };
 
+Basic.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
 export const Static: StoryFn<typeof DateInputBox> = () => {
   return <DateInputBox value={testDate} segmentRefs={segmentRefsMock} />;
 };
 
+Static.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
 export const Formats: StoryType<
   typeof DateInputBox,
   SharedDatePickerContextProps
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
index 833b025d3b..2f3964d88c 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.stories.tsx
@@ -13,6 +13,14 @@ import { DateSegmentValue } from '../../../types';
 
 import { DateInputSegment } from './DateInputSegment';
 
+const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
+  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
+    <SharedDatePickerProvider {...ctx?.args}>
+      <Story />
+    </SharedDatePickerProvider>
+  </LeafyGreenProvider>
+);
+
 const meta: StoryMetaType<
   typeof DateInputSegment,
   SharedDatePickerContextProps
@@ -28,12 +36,7 @@ const meta: StoryMetaType<
         segment: ['day', 'month', 'year'],
         size: Object.values(Size),
       },
-      decorator: (Instance, ctx) => (
-        // @ts-expect-error - incomplete context value
-        <SharedDatePickerProvider value={{ size: ctx?.args.size }}>
-          <Instance />
-        </SharedDatePickerProvider>
-      ),
+      decorator: ProviderWrapper,
       excludeCombinations: [
         {
           value: '6',
@@ -77,4 +80,8 @@ const Template: StoryFn<typeof DateInputSegment> = props => {
 
 export const Basic = Template.bind({});
 
+Basic.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
 export const Generated = () => {};
diff --git a/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts b/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
index ac64623be3..f762191fdc 100644
--- a/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
@@ -37,6 +37,7 @@ export const contextPropNames: Array<ContextPropKeys> = [
   'initialOpen',
   'state',
   'autoComplete',
+  'darkMode',
 ];
 
 /** The default context value */
diff --git a/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts b/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
index 90cc2b7bff..633afcdcdc 100644
--- a/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
+++ b/packages/date-picker/src/shared/testutils/getProviderPropsFromStoryContext/index.ts
@@ -1,14 +1,12 @@
-import { StoryContext } from '@storybook/react';
-
 import { LeafyGreenProviderProps } from '@leafygreen-ui/leafygreen-provider';
 import { pickAndOmit } from '@leafygreen-ui/lib';
 
+import { DatePickerProps } from '../../../DatePicker/DatePicker.types';
 import {
   ContextPropKeys,
   contextPropNames,
   SharedDatePickerProviderProps,
 } from '../../context';
-import { BaseDatePickerProps } from '../../types';
 
 export interface ProviderPropsObject<T> {
   leafyGreenProviderProps: LeafyGreenProviderProps;
@@ -16,13 +14,13 @@ export interface ProviderPropsObject<T> {
   storyProps: T;
 }
 
-export const getProviderPropsFromStoryContext = <P = BaseDatePickerProps>(
-  ctx: StoryContext<Partial<P & SharedDatePickerProviderProps>>,
+export const getProviderPropsFromStoryContext = <P = DatePickerProps>(
+  storyContextProps: Partial<P & SharedDatePickerProviderProps>,
 ): ProviderPropsObject<Partial<Omit<P, ContextPropKeys>>> => {
   const [
     { darkMode, baseFontSize, ...datePickerProviderProps },
     { ...storyProps },
-  ] = pickAndOmit(ctx.args, [...contextPropNames]);
+  ] = pickAndOmit(storyContextProps, [...contextPropNames]);
 
   return {
     leafyGreenProviderProps: {
@@ -30,9 +28,6 @@ export const getProviderPropsFromStoryContext = <P = BaseDatePickerProps>(
       baseFontSize: baseFontSize === 13 ? 14 : baseFontSize,
     },
     datePickerProviderProps: {
-      label: '',
-      'aria-label': '',
-      'aria-labelledby': '',
       ...datePickerProviderProps,
     },
     storyProps,

From ab16f9e54b136790591ac0091732472fbdb5ece5 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Mon, 18 Dec 2023 17:32:52 -0500
Subject: [PATCH 335/351] Date Picker [LG-3897] backspace (#2143)

* add tests

* move test
---
 .../src/DatePicker/DatePicker.spec.tsx        | 94 ++++++++++++++-----
 .../DatePickerInput/DatePickerInput.tsx       |  9 +-
 2 files changed, 73 insertions(+), 30 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index b60b7a66b0..57f9a24f4c 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1250,6 +1250,26 @@ describe('packages/date-picker', () => {
        */
       describe('Arrow key', () => {
         describe('Input', () => {
+          describe('Left Arrow', () => {
+            test('moves the cursor when the value starts with 0', () => {
+              const { monthInput } = renderDatePicker({});
+              userEvent.type(monthInput, '04{arrowleft}{arrowleft}');
+              expect(monthInput).toHaveFocus();
+            });
+
+            test('moves the cursor when the value is 0', () => {
+              const { monthInput } = renderDatePicker({});
+              userEvent.type(monthInput, '0{arrowleft}');
+              expect(monthInput).toHaveFocus();
+            });
+
+            test('moves the cursor to the next segment when the value is 0', () => {
+              const { yearInput, monthInput } = renderDatePicker({});
+              userEvent.type(monthInput, '0{arrowleft}{arrowleft}');
+              expect(yearInput).toHaveFocus();
+            });
+          });
+
           test('right arrow moves focus through segments', () => {
             const { yearInput, monthInput, dayInput } = renderDatePicker();
             userEvent.click(yearInput);
@@ -2122,37 +2142,59 @@ describe('packages/date-picker', () => {
       });
 
       describe('updating a segment', () => {
-        test('clearing the segment updates the input', () => {
-          const { yearInput, monthInput, dayInput } = renderDatePicker({});
-          userEvent.type(yearInput, '2020');
-          userEvent.type(monthInput, '7');
-          userEvent.type(dayInput, '4');
+        describe('backspace', () => {
+          test('clearing the segment updates the input', () => {
+            const { yearInput, monthInput, dayInput } = renderDatePicker({});
+            userEvent.type(yearInput, '2020');
+            userEvent.type(monthInput, '7');
+            userEvent.type(dayInput, '4');
 
-          yearInput.setSelectionRange(0, 4);
-          userEvent.type(yearInput, '{backspace}');
-          expect(yearInput).toHaveValue('');
-        });
+            yearInput.setSelectionRange(0, 4);
+            userEvent.type(yearInput, '{backspace}');
+            expect(yearInput).toHaveValue('');
+          });
 
-        test('clearing and typing a new value does not format the input', () => {
-          const { yearInput, monthInput, dayInput } = renderDatePicker({});
-          userEvent.type(yearInput, '2020');
-          userEvent.type(monthInput, '7');
-          userEvent.type(dayInput, '4');
+          test('keeps the focus inside the segment if it is not empty', () => {
+            const { monthInput } = renderDatePicker({});
 
-          yearInput.setSelectionRange(0, 4);
-          userEvent.type(yearInput, '{backspace}');
-          userEvent.type(yearInput, '2');
-          expect(yearInput).toHaveValue('2');
-        });
+            userEvent.type(monthInput, '0');
+            userEvent.type(monthInput, '{backspace}');
 
-        test('deleting characters does not format the segment', () => {
-          const { yearInput, monthInput, dayInput } = renderDatePicker({});
-          userEvent.type(yearInput, '2020');
-          userEvent.type(monthInput, '7');
-          userEvent.type(dayInput, '4');
+            expect(monthInput).toHaveValue('');
+            expect(monthInput).toHaveFocus();
+          });
+
+          test('moves the focus to the next segment', () => {
+            const { yearInput, monthInput } = renderDatePicker({});
+
+            userEvent.type(monthInput, '0');
+            userEvent.type(monthInput, '{backspace}{backspace}');
+
+            expect(monthInput).toHaveValue('');
+            expect(yearInput).toHaveFocus();
+          });
 
-          userEvent.type(yearInput, '{backspace}{backspace}');
-          expect(yearInput).toHaveValue('20');
+          test('clearing and typing a new value does not format the input', () => {
+            const { yearInput, monthInput, dayInput } = renderDatePicker({});
+            userEvent.type(yearInput, '2020');
+            userEvent.type(monthInput, '7');
+            userEvent.type(dayInput, '4');
+
+            yearInput.setSelectionRange(0, 4);
+            userEvent.type(yearInput, '{backspace}');
+            userEvent.type(yearInput, '2');
+            expect(yearInput).toHaveValue('2');
+          });
+
+          test('deleting characters does not format the segment', () => {
+            const { yearInput, monthInput, dayInput } = renderDatePicker({});
+            userEvent.type(yearInput, '2020');
+            userEvent.type(monthInput, '7');
+            userEvent.type(dayInput, '4');
+
+            userEvent.type(yearInput, '{backspace}{backspace}');
+            expect(yearInput).toHaveValue('20');
+          });
         });
 
         describe('typing new characters', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index c676f3f3e9..b0bb090d07 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -7,7 +7,6 @@ import React, {
 } from 'react';
 
 import { isSameUTCDay } from '@leafygreen-ui/date-utils';
-import { isZeroLike } from '@leafygreen-ui/lib';
 import { createSyntheticEvent, keyMap } from '@leafygreen-ui/lib';
 
 import { DateFormField, DateInputBox } from '../../shared/components/DateInput';
@@ -88,7 +87,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       // if target is not a segment, do nothing
       if (!isSegment) return;
 
-      const isSegmentEmpty = isZeroLike(target.value);
+      const isSegmentEmpty = !target.value;
 
       const { selectionStart, selectionEnd } = target;
 
@@ -97,7 +96,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           // if input is empty,
           // or the cursor is at the beginning of the input
           // set focus to prev. input (if it exists)
-          if (isSegmentEmpty || selectionStart === 0) {
+          if (selectionStart === 0) {
             const segmentToFocus = getRelativeSegmentRef('prev', {
               segment: target,
               formatParts,
@@ -115,7 +114,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           // if input is empty,
           // or the cursor is at the end of the input
           // set focus to next. input (if it exists)
-          if (isSegmentEmpty || selectionEnd === target.value.length) {
+          if (selectionEnd === target.value.length) {
             const segmentToFocus = getRelativeSegmentRef('next', {
               segment: target,
               formatParts,
@@ -137,6 +136,8 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
         case keyMap.Backspace: {
           if (isSegmentEmpty) {
+            // prevent the backspace in the previous segment
+            e.preventDefault();
             const segmentToFocus = getRelativeSegmentRef('prev', {
               segment: target,
               formatParts,

From 9335adaa894af61cecce11ec2119deb21211745d Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Tue, 19 Dec 2023 11:31:34 -0500
Subject: [PATCH 336/351] Date picker: restructure ixn tests (#2142)

* removes interaction tests from Menu

* Moves interaction tests to DatePicker.spec

* moves arrow key tests from Input to DatePicker

* Update DatePicker.spec.tsx

* adds test for typing an invalid date

* Update DatePicker.spec.tsx

* test up/down input arrow keys on each segment

* fix year rollover tests

* queryByTestId

* Add tests for arrow up/down errors

* adds utils

* adds error state persistence tests
---
 .../src/DatePicker/DatePicker.spec.tsx        | 1450 ++++++++++++-----
 .../DatePickerInput/DatePickerInput.spec.tsx  |  159 +-
 .../DatePickerMenu/DatePickerMenu.spec.tsx    |  355 +---
 .../doSegmentsFormValidDate.ts                |   21 +
 .../utils/doSegmentsFormValidDate/index.ts    |    1 +
 .../getFormattedDateString.ts                 |    9 +
 .../getFormattedDateStringFromSegments.ts     |   25 +
 .../utils/getFormattedDateString/index.ts     |   22 +-
 .../date-picker/src/shared/utils/index.ts     |    8 +-
 .../utils/isEverySegmentFilled/index.ts       |    1 +
 .../isEverySegmentFilled.ts                   |    7 +
 .../shared/utils/isEverySegmentValid/index.ts |    1 +
 .../isEverySegmentValid.ts                    |   11 +
 13 files changed, 1162 insertions(+), 908 deletions(-)
 create mode 100644 packages/date-picker/src/shared/utils/doSegmentsFormValidDate/doSegmentsFormValidDate.ts
 create mode 100644 packages/date-picker/src/shared/utils/doSegmentsFormValidDate/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateString.ts
 create mode 100644 packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateStringFromSegments.ts
 create mode 100644 packages/date-picker/src/shared/utils/isEverySegmentFilled/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/isEverySegmentFilled/isEverySegmentFilled.ts
 create mode 100644 packages/date-picker/src/shared/utils/isEverySegmentValid/index.ts
 create mode 100644 packages/date-picker/src/shared/utils/isEverySegmentValid/isEverySegmentValid.ts

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 57f9a24f4c..cde3711fa5 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -9,13 +9,7 @@ import {
 import userEvent from '@testing-library/user-event';
 import { addDays, subDays } from 'date-fns';
 
-import {
-  getISODate,
-  Month,
-  newUTC,
-  setUTCMonth,
-  setUTCYear,
-} from '@leafygreen-ui/date-utils';
+import { getISODate, Month, newUTC } from '@leafygreen-ui/date-utils';
 import {
   mockTimeZone,
   testTimeZones,
@@ -27,8 +21,13 @@ import {
 } from '@leafygreen-ui/testing-lib';
 import { transitionDuration } from '@leafygreen-ui/tokens';
 
+import { DateSegment } from '../shared';
 import { defaultMax, defaultMin } from '../shared/constants';
-import { getFormattedDateString, getValueFormatter } from '../shared/utils';
+import {
+  getFormattedDateString,
+  getFormattedSegmentsFromDate,
+  getValueFormatter,
+} from '../shared/utils';
 
 import {
   expectedTabStopLabels,
@@ -39,6 +38,20 @@ import {
 } from './DatePicker.testutils';
 import { DatePicker } from '.';
 
+/**
+ * There are HUNDREDS of tests for this component.
+ * To keep things organized we've attempted to adopt the following testing philosophy.
+ *
+ * Rendering Tests:
+ * Tests that assert that certain elements are rendered to the DOM.
+ * These tests should not have any user interaction (except when absolutely necessary to arrive in a certain state)
+ * These tests should exist on each sub-component to simplify test suites
+ *
+ * Interaction tests:
+ * Tests that assert some behavior following user interaction.
+ * Generally, this type of tests should _only_ exist in a test file for user-facing components.
+ */
+
 // Set the current time to noon UTC on 2023-12-25
 const testToday = newUTC(2023, Month.December, 25, 12);
 
@@ -152,18 +165,16 @@ describe('packages/date-picker', () => {
         expect(yearInput.value).toEqual('2023');
       });
 
-      describe('console', () => {
-        test('console warning when no labels are passed in', () => {
-          const consoleSpy = jest
-            .spyOn(console, 'warn')
-            .mockImplementation(() => {});
+      test('console warning when no labels are passed in', () => {
+        const consoleSpy = jest
+          .spyOn(console, 'warn')
+          .mockImplementation(() => {});
 
-          /* @ts-expect-error - needs label/aria-label/aria-labelledby */
-          render(<DatePicker />);
-          expect(consoleSpy).toHaveBeenCalledWith(
-            'For screen-reader accessibility, label, aria-labelledby, or aria-label must be provided to DatePicker component',
-          );
-        });
+        /* @ts-expect-error - needs label/aria-label/aria-labelledby */
+        render(<DatePicker />);
+        expect(consoleSpy).toHaveBeenCalledWith(
+          'For screen-reader accessibility, label, aria-labelledby, or aria-label must be provided to DatePicker component',
+        );
       });
 
       describe('Error states', () => {
@@ -203,13 +214,13 @@ describe('packages/date-picker', () => {
         });
 
         test('renders with internal error state when value is out of range', () => {
-          const { getByTestId, getByRole } = render(
+          const { queryByTestId, getByRole } = render(
             <DatePicker label="Label" value={newUTC(2100, 1, 1)} />,
           );
           const inputContainer = getByRole('combobox');
           expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
 
-          const errorElement = getByTestId('lg-form_field-error_message');
+          const errorElement = queryByTestId('lg-form_field-error_message');
           expect(errorElement).toBeInTheDocument();
           expect(errorElement).toHaveTextContent(
             'Date must be before 2038-01-19',
@@ -217,7 +228,7 @@ describe('packages/date-picker', () => {
         });
 
         test('external error message overrides internal error message', () => {
-          const { getByTestId, getByRole } = renderDatePicker({
+          const { queryByTestId, getByRole } = renderDatePicker({
             value: newUTC(2100, 1, 1),
             state: 'error',
             errorMessage: 'Custom error message',
@@ -225,54 +236,54 @@ describe('packages/date-picker', () => {
           const inputContainer = getByRole('combobox');
           expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
 
-          const errorElement = getByTestId('lg-form_field-error_message');
+          const errorElement = queryByTestId('lg-form_field-error_message');
           expect(errorElement).toBeInTheDocument();
           expect(errorElement).toHaveTextContent('Custom error message');
         });
 
         test('renders internal message if external error message is not set', () => {
-          const { inputContainer, getByTestId } = renderDatePicker({
+          const { inputContainer, queryByTestId } = renderDatePicker({
             value: newUTC(2100, 1, 1),
             state: 'error',
             errorMessage: undefined,
           });
           expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
-          expect(getByTestId('lg-form_field-error_message')).toHaveTextContent(
-            'Date must be before 2038-01-19',
-          );
+          expect(
+            queryByTestId('lg-form_field-error_message'),
+          ).toHaveTextContent('Date must be before 2038-01-19');
         });
 
         test('removing an external error displays an internal error when applicable', () => {
-          const { inputContainer, rerenderDatePicker, getByTestId } =
+          const { inputContainer, rerenderDatePicker, queryByTestId } =
             renderDatePicker({
               value: newUTC(2100, Month.January, 1),
             });
           expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
-          expect(getByTestId('lg-form_field-error_message')).toHaveTextContent(
-            'Date must be before 2038-01-19',
-          );
+          expect(
+            queryByTestId('lg-form_field-error_message'),
+          ).toHaveTextContent('Date must be before 2038-01-19');
 
           rerenderDatePicker({ errorMessage: 'Some error', state: 'error' });
 
           expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
-          expect(getByTestId('lg-form_field-error_message')).toHaveTextContent(
-            'Some error',
-          );
+          expect(
+            queryByTestId('lg-form_field-error_message'),
+          ).toHaveTextContent('Some error');
 
           rerenderDatePicker({ state: 'none' });
           expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
-          expect(getByTestId('lg-form_field-error_message')).toHaveTextContent(
-            'Date must be before 2038-01-19',
-          );
+          expect(
+            queryByTestId('lg-form_field-error_message'),
+          ).toHaveTextContent('Date must be before 2038-01-19');
         });
 
         test('internal error message updates when min value changes', () => {
-          const { inputContainer, rerenderDatePicker, getByTestId } =
+          const { inputContainer, rerenderDatePicker, queryByTestId } =
             renderDatePicker({
               value: newUTC(1967, Month.March, 10),
             });
           expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
-          const errorElement = getByTestId('lg-form_field-error_message');
+          const errorElement = queryByTestId('lg-form_field-error_message');
           expect(errorElement).toHaveTextContent(
             'Date must be after 1970-01-01',
           );
@@ -285,12 +296,12 @@ describe('packages/date-picker', () => {
         });
 
         test('internal error message updates when max value changes', () => {
-          const { inputContainer, rerenderDatePicker, getByTestId } =
+          const { inputContainer, rerenderDatePicker, queryByTestId } =
             renderDatePicker({
               value: newUTC(2050, Month.January, 1),
             });
           expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
-          const errorElement = getByTestId('lg-form_field-error_message');
+          const errorElement = queryByTestId('lg-form_field-error_message');
           expect(errorElement).toHaveTextContent(
             'Date must be before 2038-01-19',
           );
@@ -1241,16 +1252,51 @@ describe('packages/date-picker', () => {
         });
       });
 
+      describe('Backspace key', () => {
+        test('deletes any value in the input', () => {
+          const { dayInput } = renderDatePicker();
+          userEvent.type(dayInput, '26{backspace}');
+          expect(dayInput.value).toBe('2');
+          userEvent.tab();
+          expect(dayInput.value).toBe('02');
+        });
+
+        test('deletes the whole value on multiple presses', () => {
+          const { monthInput } = renderDatePicker();
+          userEvent.type(monthInput, '11');
+          userEvent.type(monthInput, '{backspace}{backspace}');
+          expect(monthInput.value).toBe('');
+        });
+
+        test('focuses the previous segment if current segment is empty', () => {
+          const { yearInput, monthInput } = renderDatePicker();
+          userEvent.type(monthInput, '{backspace}');
+          expect(yearInput).toHaveFocus();
+        });
+      });
+
       /**
-       * Arrow Keys:
-       * Since arrow key behavior changes based on whether the input or menu is focused,
-       * more detailed tests suites are located in
-       * - DatePickerInput: (./DatePickerInput/DatePickerInput.spec.tsx) and
-       * - DatePickerMenu: (./DatePickerMenu/DatePickerMenu.spec.tsx)
+       * Arrow Keys behavior changes based on whether the input or menu is focused
        */
       describe('Arrow key', () => {
         describe('Input', () => {
           describe('Left Arrow', () => {
+            test('focuses the previous segment when the segment is empty', () => {
+              const { yearInput, monthInput } = renderDatePicker();
+              userEvent.click(monthInput);
+              userEvent.keyboard('{arrowleft}');
+              expect(yearInput).toHaveFocus();
+            });
+
+            test('moves the cursor when the segment has a value', () => {
+              const { monthInput } = renderDatePicker({
+                value: testToday,
+              });
+              userEvent.click(monthInput);
+              userEvent.keyboard('{arrowleft}');
+              expect(monthInput).toHaveFocus();
+            });
+
             test('moves the cursor when the value starts with 0', () => {
               const { monthInput } = renderDatePicker({});
               userEvent.type(monthInput, '04{arrowleft}{arrowleft}');
@@ -1263,403 +1309,1003 @@ describe('packages/date-picker', () => {
               expect(monthInput).toHaveFocus();
             });
 
-            test('moves the cursor to the next segment when the value is 0', () => {
+            test('moves the cursor to the previous segment when the value is 0', () => {
               const { yearInput, monthInput } = renderDatePicker({});
               userEvent.type(monthInput, '0{arrowleft}{arrowleft}');
               expect(yearInput).toHaveFocus();
             });
-          });
-
-          test('right arrow moves focus through segments', () => {
-            const { yearInput, monthInput, dayInput } = renderDatePicker();
-            userEvent.click(yearInput);
-            userEvent.keyboard('{arrowright}');
-            expect(monthInput).toHaveFocus();
-
-            userEvent.keyboard('{arrowright}');
-            expect(dayInput).toHaveFocus();
-          });
-
-          test('left arrow moves focus back through segments', () => {
-            const { yearInput, monthInput, dayInput } = renderDatePicker();
-            userEvent.click(dayInput);
-            userEvent.keyboard('{arrowleft}');
-            expect(monthInput).toHaveFocus();
 
-            userEvent.keyboard('{arrowleft}');
-            expect(yearInput).toHaveFocus();
+            test('focuses the previous segment if the cursor is at the start of the input text', () => {
+              const { yearInput, monthInput } = renderDatePicker({
+                value: testToday,
+              });
+              userEvent.click(monthInput);
+              userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
+              expect(yearInput).toHaveFocus();
+            });
           });
 
-          describe('Up Arrow', () => {
-            describe('month input', () => {
-              const formatter = getValueFormatter('month');
-              test('updates segment value to the default min', () => {
-                const { monthInput } = renderDatePicker();
-                userEvent.click(monthInput);
-                userEvent.keyboard(`{arrowup}`);
-
-                expect(monthInput).toHaveValue(formatter(defaultMin.month));
-              });
+          describe('Right Arrow', () => {
+            test('focuses the next segment when the segment is empty', () => {
+              const { yearInput, monthInput } = renderDatePicker();
+              userEvent.click(yearInput);
+              userEvent.keyboard('{arrowright}');
+              expect(monthInput).toHaveFocus();
+            });
 
-              test(`fires segment change handler`, () => {
-                const onChange = jest.fn();
-                const { monthInput } = renderDatePicker({ onChange });
-                userEvent.click(monthInput);
-                userEvent.keyboard(`{arrowup}`);
-                expect(onChange).toHaveBeenCalledWith(
-                  eventContainingTargetValue(formatter(defaultMin.month)),
-                );
+            test('focuses the next segment if the cursor is at the start of the input text', () => {
+              const { yearInput, monthInput } = renderDatePicker({
+                value: testToday,
               });
+              userEvent.click(yearInput);
+              userEvent.keyboard('{arrowright}');
+              expect(monthInput).toHaveFocus();
+            });
 
-              test(`does not fire value change handler`, () => {
-                const onDateChange = jest.fn();
-                const { monthInput } = renderDatePicker({ onDateChange });
-                userEvent.click(monthInput);
-                userEvent.keyboard(`{arrowup}`);
-                expect(onDateChange).not.toHaveBeenCalled();
+            test('moves the cursor when the segment has a value', () => {
+              const { yearInput } = renderDatePicker({
+                value: testToday,
               });
+              userEvent.click(yearInput);
+              userEvent.keyboard('{arrowleft}{arrowright}');
+              expect(yearInput).toHaveFocus();
             });
+          });
 
-            describe('year input', () => {
-              const formatter = getValueFormatter('year');
-
-              test('updates segment value to the default min', () => {
-                const { yearInput } = renderDatePicker();
-                userEvent.click(yearInput);
-                userEvent.keyboard(`{arrowup}`);
+          const segmentCases = ['year', 'month', 'day'] as Array<DateSegment>;
+          describe.each(segmentCases)('%p segment', segment => {
+            const formatter = getValueFormatter(segment);
+            /** Utility only for this suite. Returns the day|month|year element from the render result */
+            const getRelevantInput = (renderResult: RenderDatePickerResult) =>
+              segment === 'year'
+                ? renderResult.yearInput
+                : segment === 'month'
+                ? renderResult.monthInput
+                : renderResult.dayInput;
+
+            describe('Up Arrow', () => {
+              describe('when no value has been set', () => {
+                test('keeps the focus in the current segment', () => {
+                  const result = renderDatePicker();
+                  const input = getRelevantInput(result);
+                  userEvent.click(input);
+                  userEvent.keyboard('{arrowup}');
+                  expect(input).toHaveFocus();
+                });
 
-                expect(yearInput).toHaveValue(formatter(defaultMin.year));
-              });
+                test('updates segment value to the default min', () => {
+                  const result = renderDatePicker();
+                  const input = getRelevantInput(result);
+                  userEvent.click(input);
+                  userEvent.keyboard(`{arrowup}`);
+                  const expectedValue = formatter(defaultMin[segment]);
+                  expect(input).toHaveValue(expectedValue);
+                });
 
-              test('updates segment value to the provided min year', () => {
-                const { yearInput } = renderDatePicker({
-                  min: newUTC(1969, Month.June, 20),
+                test('updates segment value to the provided min year', () => {
+                  const result = renderDatePicker({
+                    min: newUTC(1967, Month.March, 10),
+                  });
+                  const input = getRelevantInput(result);
+                  userEvent.click(input);
+                  userEvent.keyboard(`{arrowup}`);
+                  const expectedValue = formatter(
+                    segment === 'year' ? 1967 : defaultMin[segment],
+                  );
+                  expect(input).toHaveValue(expectedValue);
                 });
-                userEvent.click(yearInput);
-                userEvent.keyboard(`{arrowup}`);
 
-                expect(yearInput).toHaveValue(formatter(1969));
-              });
+                test('keeps the focus in the current segment even if the value is valid', () => {
+                  const result = renderDatePicker();
+                  const input = getRelevantInput(result);
+                  userEvent.click(input);
+                  userEvent.keyboard('{arrowup}{arrowup}{arrowup}');
+                  expect(input).toHaveFocus();
+                  const expectedValue = formatter(defaultMin[segment] + 2);
+                  expect(input).toHaveValue(expectedValue);
+                });
 
-              test(`fires segment change handler`, () => {
-                const onChange = jest.fn();
-                const { yearInput } = renderDatePicker({ onChange });
-                userEvent.click(yearInput);
-                userEvent.keyboard(`{arrowup}`);
-                expect(onChange).toHaveBeenCalledWith(
-                  eventContainingTargetValue(formatter(defaultMin.year)),
-                );
-              });
+                test(`fires segment change handler`, () => {
+                  const onChange = jest.fn();
+                  const result = renderDatePicker({ onChange });
+                  const input = getRelevantInput(result);
+                  userEvent.click(input);
+                  userEvent.keyboard(`{arrowup}`);
+                  const expectedValue = formatter(defaultMin[segment]);
+                  expect(onChange).toHaveBeenCalledWith(
+                    eventContainingTargetValue(expectedValue),
+                  );
+                });
 
-              test(`does not fire value change handler`, () => {
-                const onDateChange = jest.fn();
-                const { yearInput } = renderDatePicker({ onDateChange });
-                userEvent.click(yearInput);
-                userEvent.keyboard(`{arrowup}`);
-                expect(onDateChange).not.toHaveBeenCalled();
-              });
-            });
+                test(`does not fire value change handler`, () => {
+                  const onDateChange = jest.fn();
+                  const result = renderDatePicker({ onDateChange });
+                  const input = getRelevantInput(result);
+                  userEvent.click(input);
+                  userEvent.keyboard(`{arrowup}`);
+                  expect(onDateChange).not.toHaveBeenCalled();
+                });
 
-            describe('when a value is set', () => {
-              test('fires value change handler', () => {
-                const onDateChange = jest.fn();
-                const { monthInput } = renderDatePicker({
-                  onDateChange,
-                  value: testToday,
+                describe('when segment value is max', () => {
+                  if (segment === 'year') {
+                    test('does not roll over to the min value', () => {
+                      const result = renderDatePicker();
+                      const input = getRelevantInput(result);
+                      const initialValue = formatter(defaultMax[segment]);
+                      const expectedValue = formatter(defaultMax[segment] + 1);
+                      userEvent.type(input, initialValue);
+                      expect(input).toHaveValue(initialValue);
+                      userEvent.click(input);
+                      userEvent.keyboard('{arrowup}');
+                      expect(input).toHaveValue(expectedValue);
+                    });
+                  } else {
+                    test('rolls over to the min value', () => {
+                      const result = renderDatePicker();
+                      const input = getRelevantInput(result);
+                      const initialValue = formatter(defaultMax[segment]);
+                      const expectedValue = formatter(defaultMin[segment]);
+                      userEvent.type(input, initialValue);
+                      expect(input).toHaveValue(initialValue);
+                      userEvent.click(input);
+                      userEvent.keyboard('{arrowup}');
+                      expect(input).toHaveValue(expectedValue);
+                    });
+                  }
                 });
-                userEvent.click(monthInput);
-                userEvent.keyboard(`{arrowup}`);
-                expect(onDateChange).toHaveBeenCalled();
               });
 
-              test('does not roll over year', () => {
-                const onDateChange = jest.fn();
-                const { yearInput } = renderDatePicker({
-                  onDateChange,
-                  value: newUTC(2020, Month.July, 5),
-                  min: newUTC(1969, Month.June, 20),
-                  max: newUTC(2020, Month.September, 10),
+              describe('when a value is set', () => {
+                describe('when the value is valid', () => {
+                  const onDateChange = jest.fn();
+                  const handleValidation = jest.fn();
+                  const initialValue = newUTC(2023, Month.September, 10);
+                  const expectedValue = {
+                    year: newUTC(2024, Month.September, 10),
+                    month: newUTC(2023, Month.October, 10),
+                    day: newUTC(2023, Month.September, 11),
+                  }[segment];
+
+                  beforeEach(() => {
+                    const result = renderDatePicker({
+                      onDateChange,
+                      handleValidation,
+                      value: initialValue,
+                    });
+                    const input = getRelevantInput(result);
+                    userEvent.click(input);
+                    userEvent.keyboard(`{arrowup}`);
+                  });
+
+                  test('fires value change handler', () => {
+                    expect(onDateChange).toHaveBeenCalledWith(expectedValue);
+                  });
+
+                  test('fires validation handler', () => {
+                    expect(handleValidation).toHaveBeenCalledWith(
+                      expectedValue,
+                    );
+                  });
                 });
-                userEvent.click(yearInput);
-                userEvent.keyboard(`{arrowup}`);
-                expect(onDateChange).toHaveBeenCalledWith(
-                  newUTC(2021, Month.July, 5),
-                );
-              });
 
-              describe('if new value would be out of range', () => {
-                const onDateChange = jest.fn();
-                const onSegmentChange = jest.fn();
-                const handleValidation = jest.fn();
-                const max = newUTC(2020, Month.July, 4);
-                const startValue = newUTC(2019, Month.August, 1);
-                const newYearVal = '2020';
-                const expectedMessage = `Date must be before ${getFormattedDateString(
-                  max,
-                  'iso8601',
-                )}`;
+                describe('if the new value would be invalid', () => {
+                  // E.g. Feb 30 2020 or Feb 29 2021
+                  switch (segment) {
+                    case 'year': {
+                      test('changing year sets error state', async () => {
+                        const result = renderDatePicker({
+                          value: newUTC(2020, Month.February, 29),
+                        });
+                        const input = getRelevantInput(result);
+                        userEvent.click(input);
+                        userEvent.keyboard('{arrowup}');
+
+                        await waitFor(() => {
+                          expect(result.yearInput).toHaveValue('2021');
+                          expect(result.monthInput).toHaveValue('02');
+                          expect(result.dayInput).toHaveValue('29');
+                          expect(result.inputContainer).toHaveAttribute(
+                            'aria-invalid',
+                            'true',
+                          );
+                          const errorElement = result.queryByTestId(
+                            'lg-form_field-error_message',
+                          );
+                          expect(errorElement).toBeInTheDocument();
+                        });
+                      });
 
-                let renderResult: RenderDatePickerResult;
+                      break;
+                    }
+
+                    case 'month': {
+                      test('changing month sets error state', async () => {
+                        const result = renderDatePicker({
+                          value: newUTC(2020, Month.January, 31),
+                        });
+                        const input = getRelevantInput(result);
+                        userEvent.click(input);
+                        userEvent.keyboard('{arrowup}');
+
+                        await waitFor(() => {
+                          expect(result.yearInput).toHaveValue('2020');
+                          expect(result.monthInput).toHaveValue('02');
+                          expect(result.dayInput).toHaveValue('31');
+                          expect(result.inputContainer).toHaveAttribute(
+                            'aria-invalid',
+                            'true',
+                          );
+                          const errorElement = result.queryByTestId(
+                            'lg-form_field-error_message',
+                          );
+                          expect(errorElement).toBeInTheDocument();
+                        });
+                      });
 
-                beforeEach(() => {
-                  onDateChange.mockReset();
-                  onSegmentChange.mockReset();
-                  handleValidation.mockReset();
+                      test('error state stays after menu is closed', async () => {
+                        const result = renderDatePicker({
+                          value: newUTC(2020, Month.February, 29),
+                        });
+                        const input = getRelevantInput(result);
+                        userEvent.click(input);
+                        userEvent.keyboard('{arrowup}');
+                        userEvent.click(result.container.parentElement!);
+                        await waitFor(() => {
+                          const errorElement = result.queryByTestId(
+                            'lg-form_field-error_message',
+                          );
+                          expect(errorElement).toBeInTheDocument();
+                        });
+                      });
 
-                  renderResult = renderDatePicker({
+                      break;
+                    }
+
+                    case 'day': {
+                      test('changing date rolls value over sooner', async () => {
+                        const result = renderDatePicker({
+                          value: newUTC(2020, Month.February, 29),
+                        });
+                        const input = getRelevantInput(result);
+                        userEvent.click(input);
+                        userEvent.keyboard('{arrowup}');
+
+                        await waitFor(() => {
+                          expect(result.yearInput).toHaveValue('2020');
+                          expect(result.monthInput).toHaveValue('02');
+                          expect(result.dayInput).toHaveValue('01');
+                          expect(result.inputContainer).toHaveAttribute(
+                            'aria-invalid',
+                            'false',
+                          );
+                          const errorElement = result.queryByTestId(
+                            'lg-form_field-error_message',
+                          );
+                          expect(errorElement).not.toBeInTheDocument();
+                        });
+                      });
+                      break;
+                    }
+
+                    default:
+                      break;
+                  }
+                });
+
+                describe('if new value would be out of range', () => {
+                  const onDateChange = jest.fn();
+                  const onSegmentChange = jest.fn();
+                  const handleValidation = jest.fn();
+                  const max = newUTC(2020, Month.August, 1);
+                  const startValue = newUTC(2020, Month.August, 1);
+                  const incrementedValues = {
+                    year: newUTC(2021, Month.August, 1),
+                    month: newUTC(2020, Month.September, 1),
+                    day: newUTC(2020, Month.August, 2),
+                  };
+                  const expectedMessage = `Date must be before ${getFormattedDateString(
                     max,
-                    value: startValue,
-                    onDateChange,
-                    onChange: onSegmentChange,
-                    handleValidation,
+                    'iso8601',
+                  )}`;
+
+                  let renderResult: RenderDatePickerResult;
+                  let input: HTMLInputElement;
+
+                  beforeEach(() => {
+                    onDateChange.mockReset();
+                    onSegmentChange.mockReset();
+                    handleValidation.mockReset();
+
+                    renderResult = renderDatePicker({
+                      max,
+                      value: startValue,
+                      onDateChange,
+                      onChange: onSegmentChange,
+                      handleValidation,
+                    });
+
+                    input = getRelevantInput(renderResult);
+
+                    userEvent.click(input);
+                    userEvent.keyboard(`{arrowup}`);
+                  });
+
+                  test('fires the segment change handler', () => {
+                    const expectedInputValue = getFormattedSegmentsFromDate(
+                      incrementedValues[segment],
+                    )[segment];
+
+                    expect(onSegmentChange).toHaveBeenCalledWith(
+                      eventContainingTargetValue(expectedInputValue),
+                    );
+                  });
+
+                  test('updates the input', () => {
+                    const expectedInputValue = getFormattedSegmentsFromDate(
+                      incrementedValues[segment],
+                    )[segment];
+
+                    expect(input).toHaveValue(expectedInputValue);
+                  });
+
+                  test('fires the change handler', () => {
+                    expect(onDateChange).toHaveBeenCalledWith(
+                      incrementedValues[segment],
+                    );
+                  });
+
+                  test('fires the validation handler', () => {
+                    expect(handleValidation).toHaveBeenCalledWith(
+                      incrementedValues[segment],
+                    );
+                  });
+
+                  test('sets aria-invalid', () => {
+                    expect(renderResult.inputContainer).toHaveAttribute(
+                      'aria-invalid',
+                      'true',
+                    );
+                  });
+
+                  test('sets error message', () => {
+                    const errorMessageElement = within(
+                      renderResult.formField,
+                    ).queryByText(expectedMessage);
+                    expect(errorMessageElement).toBeInTheDocument();
                   });
-                  userEvent.click(renderResult.yearInput);
-                  userEvent.keyboard(`{arrowup}`);
                 });
+              });
+            });
 
-                test('updates the input', () => {
-                  expect(renderResult.yearInput).toHaveValue(newYearVal);
+            describe('Down Arrow', () => {
+              describe('when no value has been set', () => {
+                test('keeps the focus in the current segment', () => {
+                  const result = renderDatePicker();
+                  const input = getRelevantInput(result);
+                  userEvent.click(input);
+                  userEvent.keyboard('{arrowdown}');
+                  expect(input).toHaveFocus();
                 });
 
-                test('fires the change handler', () => {
-                  expect(onDateChange).toHaveBeenCalledWith(
-                    setUTCYear(startValue, Number(newYearVal)),
-                  );
+                test('updates segment value to the default max', () => {
+                  const result = renderDatePicker();
+                  const input = getRelevantInput(result);
+                  userEvent.click(input);
+                  userEvent.keyboard(`{arrowdown}`);
+                  const expectedValue = formatter(defaultMax[segment]);
+                  expect(input).toHaveValue(expectedValue);
                 });
 
-                test('fires the segment change handler', () => {
-                  expect(onSegmentChange).toHaveBeenCalledWith(
-                    eventContainingTargetValue(newYearVal),
+                test('updates segment value to the provided max year', () => {
+                  const result = renderDatePicker({
+                    max: newUTC(2067, Month.March, 10),
+                  });
+                  const input = getRelevantInput(result);
+                  userEvent.click(input);
+                  userEvent.keyboard(`{arrowdown}`);
+                  const expectedValue = formatter(
+                    segment === 'year' ? 2067 : defaultMax[segment],
                   );
+                  expect(input).toHaveValue(expectedValue);
                 });
 
-                test('fires the validation handler', () => {
-                  expect(handleValidation).toHaveBeenCalledWith(
-                    setUTCYear(startValue, Number(newYearVal)),
-                  );
+                test('keeps the focus in the current segment even if the value is valid', () => {
+                  const result = renderDatePicker();
+                  const input = getRelevantInput(result);
+                  userEvent.click(input);
+                  userEvent.keyboard('{arrowdown}{arrowdown}{arrowdown}');
+                  expect(input).toHaveFocus();
+                  const expectedValue = formatter(defaultMax[segment] - 2);
+                  expect(input).toHaveValue(expectedValue);
                 });
 
-                test('sets aria-invalid', () => {
-                  expect(renderResult.inputContainer).toHaveAttribute(
-                    'aria-invalid',
-                    'true',
+                test(`fires segment change handler`, () => {
+                  const onChange = jest.fn();
+                  const result = renderDatePicker({ onChange });
+                  const input = getRelevantInput(result);
+                  userEvent.click(input);
+                  userEvent.keyboard(`{arrowdown}`);
+                  const expectedValue = formatter(defaultMax[segment]);
+                  expect(onChange).toHaveBeenCalledWith(
+                    eventContainingTargetValue(expectedValue),
                   );
                 });
 
-                test('sets error message', () => {
-                  const errorMessageElement = within(
-                    renderResult.formField,
-                  ).queryByText(expectedMessage);
-                  expect(errorMessageElement).toBeInTheDocument();
+                test(`does not fire value change handler`, () => {
+                  const onDateChange = jest.fn();
+                  const result = renderDatePicker({ onDateChange });
+                  const input = getRelevantInput(result);
+                  userEvent.click(input);
+                  userEvent.keyboard(`{arrowdown}`);
+                  expect(onDateChange).not.toHaveBeenCalled();
+                });
+
+                describe('when segment value is min', () => {
+                  if (segment === 'year') {
+                    test('does not roll over to the max value', () => {
+                      const result = renderDatePicker();
+                      const input = getRelevantInput(result);
+                      const initialValue = formatter(defaultMin[segment]);
+                      const expectedValue = formatter(defaultMin[segment] - 1);
+                      userEvent.type(input, initialValue);
+                      expect(input).toHaveValue(initialValue);
+                      userEvent.click(input);
+                      userEvent.keyboard('{arrowdown}');
+                      expect(input).toHaveValue(expectedValue);
+                    });
+                  } else {
+                    test('rolls over to the max value', () => {
+                      const result = renderDatePicker();
+                      const input = getRelevantInput(result);
+                      const initialValue = formatter(defaultMin[segment]);
+                      const expectedValue = formatter(defaultMax[segment]);
+                      userEvent.type(input, initialValue);
+                      expect(input).toHaveValue(initialValue);
+                      userEvent.click(input);
+                      userEvent.keyboard('{arrowdown}');
+                      expect(input).toHaveValue(expectedValue);
+                    });
+                  }
+                });
+              });
+
+              describe('when a value is set', () => {
+                describe('when the value is valid', () => {
+                  const onDateChange = jest.fn();
+                  const handleValidation = jest.fn();
+                  const initialValue = newUTC(2023, Month.September, 10);
+                  const expectedValue = {
+                    year: newUTC(2022, Month.September, 10),
+                    month: newUTC(2023, Month.August, 10),
+                    day: newUTC(2023, Month.September, 9),
+                  }[segment];
+
+                  beforeEach(() => {
+                    const result = renderDatePicker({
+                      onDateChange,
+                      handleValidation,
+                      value: initialValue,
+                    });
+                    const input = getRelevantInput(result);
+                    userEvent.click(input);
+                    userEvent.keyboard(`{arrowdown}`);
+                  });
+
+                  test('fires value change handler', () => {
+                    expect(onDateChange).toHaveBeenCalledWith(expectedValue);
+                  });
+
+                  test('fires validation handler', () => {
+                    expect(handleValidation).toHaveBeenCalledWith(
+                      expectedValue,
+                    );
+                  });
+                });
+
+                // TODO:
+                describe('if the new value would be invalid', () => {
+                  // E.g. Feb 30 2020 or Feb 29 2021
+                  switch (segment) {
+                    case 'year': {
+                      test('changing year sets error state', async () => {
+                        const result = renderDatePicker({
+                          value: newUTC(2020, Month.February, 29),
+                        });
+                        const input = getRelevantInput(result);
+                        userEvent.click(input);
+                        userEvent.keyboard('{arrowdown}');
+
+                        await waitFor(() => {
+                          expect(result.yearInput).toHaveValue('2019');
+                          expect(result.monthInput).toHaveValue('02');
+                          expect(result.dayInput).toHaveValue('29');
+                          expect(result.inputContainer).toHaveAttribute(
+                            'aria-invalid',
+                            'true',
+                          );
+                          const errorElement = result.queryByTestId(
+                            'lg-form_field-error_message',
+                          );
+                          expect(errorElement).toBeInTheDocument();
+                        });
+                      });
+
+                      break;
+                    }
+
+                    case 'month': {
+                      test('changing month sets error state', async () => {
+                        const result = renderDatePicker({
+                          value: newUTC(2020, Month.March, 31),
+                        });
+                        const input = getRelevantInput(result);
+                        userEvent.click(input);
+                        userEvent.keyboard('{arrowdown}');
+
+                        await waitFor(() => {
+                          expect(result.yearInput).toHaveValue('2020');
+                          expect(result.monthInput).toHaveValue('02');
+                          expect(result.dayInput).toHaveValue('31');
+                          expect(result.inputContainer).toHaveAttribute(
+                            'aria-invalid',
+                            'true',
+                          );
+                          const errorElement = result.queryByTestId(
+                            'lg-form_field-error_message',
+                          );
+                          expect(errorElement).toBeInTheDocument();
+                        });
+                      });
+
+                      test('error state stays after menu is closed', async () => {
+                        const result = renderDatePicker({
+                          value: newUTC(2020, Month.February, 29),
+                        });
+                        const input = getRelevantInput(result);
+                        userEvent.click(input);
+                        userEvent.keyboard('{arrowdown}');
+                        userEvent.click(result.container.parentElement!);
+                        await waitFor(() => {
+                          const errorElement = result.queryByTestId(
+                            'lg-form_field-error_message',
+                          );
+                          expect(errorElement).toBeInTheDocument();
+                        });
+                      });
+
+                      break;
+                    }
+
+                    case 'day': {
+                      // There is no case where decrementing a day results in an invalid date value
+                      break;
+                    }
+
+                    default:
+                      break;
+                  }
+                });
+
+                describe('if new value would be out of range', () => {
+                  const onDateChange = jest.fn();
+                  const onSegmentChange = jest.fn();
+                  const handleValidation = jest.fn();
+                  const max = newUTC(2020, Month.August, 1);
+                  const startValue = newUTC(2020, Month.August, 1);
+                  const incrementedValues = {
+                    year: newUTC(2021, Month.August, 1),
+                    month: newUTC(2020, Month.September, 1),
+                    day: newUTC(2020, Month.August, 2),
+                  };
+                  const expectedMessage = `Date must be before ${getFormattedDateString(
+                    max,
+                    'iso8601',
+                  )}`;
+
+                  let renderResult: RenderDatePickerResult;
+                  let input: HTMLInputElement;
+
+                  beforeEach(() => {
+                    onDateChange.mockReset();
+                    onSegmentChange.mockReset();
+                    handleValidation.mockReset();
+
+                    renderResult = renderDatePicker({
+                      max,
+                      value: startValue,
+                      onDateChange,
+                      onChange: onSegmentChange,
+                      handleValidation,
+                    });
+
+                    input = getRelevantInput(renderResult);
+
+                    userEvent.click(input);
+                    userEvent.keyboard(`{arrowup}`);
+                  });
+
+                  test('fires the segment change handler', () => {
+                    const expectedInputValue = getFormattedSegmentsFromDate(
+                      incrementedValues[segment],
+                    )[segment];
+
+                    expect(onSegmentChange).toHaveBeenCalledWith(
+                      eventContainingTargetValue(expectedInputValue),
+                    );
+                  });
+
+                  test('updates the input', () => {
+                    const expectedInputValue = getFormattedSegmentsFromDate(
+                      incrementedValues[segment],
+                    )[segment];
+
+                    expect(input).toHaveValue(expectedInputValue);
+                  });
+
+                  test('fires the change handler', () => {
+                    expect(onDateChange).toHaveBeenCalledWith(
+                      incrementedValues[segment],
+                    );
+                  });
+
+                  test('fires the validation handler', () => {
+                    expect(handleValidation).toHaveBeenCalledWith(
+                      incrementedValues[segment],
+                    );
+                  });
+
+                  test('sets aria-invalid', () => {
+                    expect(renderResult.inputContainer).toHaveAttribute(
+                      'aria-invalid',
+                      'true',
+                    );
+                  });
+
+                  test('sets error message', () => {
+                    const errorMessageElement = within(
+                      renderResult.formField,
+                    ).queryByText(expectedMessage);
+                    expect(errorMessageElement).toBeInTheDocument();
+                  });
                 });
               });
             });
           });
+        });
 
-          describe('Down Arrow', () => {
-            describe('month input', () => {
-              const formatter = getValueFormatter('month');
+        describe('Menu', () => {
+          beforeEach(() => {
+            jest.setSystemTime(testToday);
+            mockTimeZone('America/New_York', -5);
+          });
+          afterEach(() => {
+            jest.restoreAllMocks();
+          });
 
-              test('updates segment value to the default max', () => {
-                const { monthInput } = renderDatePicker();
-                userEvent.click(monthInput);
-                userEvent.keyboard(`{arrowdown}`);
+          describe('basic arrow key behavior', () => {
+            let menuResult: RenderMenuResult;
 
-                expect(monthInput).toHaveValue(formatter(defaultMax.month));
+            beforeEach(async () => {
+              const renderResult = renderDatePicker({
+                value: newUTC(2023, Month.September, 10),
               });
+              menuResult = await renderResult.openMenu();
+            });
 
-              test(`fires segment change handler`, () => {
-                const onChange = jest.fn();
-                const { monthInput } = renderDatePicker({ onChange });
-                userEvent.click(monthInput);
-                userEvent.keyboard(`{arrowdown}`);
-                expect(onChange).toHaveBeenCalledWith(
-                  eventContainingTargetValue(formatter(defaultMax.month)),
-                );
-              });
+            test('left arrow moves focus to the previous day', async () => {
+              const { queryCellByISODate } = menuResult;
+              userEvent.keyboard('{arrowleft}');
+              const prevDay = queryCellByISODate('2023-09-09');
+              await waitFor(() => expect(prevDay).toHaveFocus());
+            });
 
-              test(`does not fire value change handler`, () => {
-                const onDateChange = jest.fn();
-                const { monthInput } = renderDatePicker({ onDateChange });
-                userEvent.click(monthInput);
-                userEvent.keyboard(`{arrowdown}`);
-                expect(onDateChange).not.toHaveBeenCalled();
-              });
+            test('right arrow moves focus to the next day', async () => {
+              const { queryCellByISODate } = menuResult;
+              userEvent.keyboard('{arrowright}');
+              const nextDay = queryCellByISODate('2023-09-11');
+              await waitFor(() => expect(nextDay).toHaveFocus());
+            });
+
+            test('up arrow moves focus to the previous week', async () => {
+              const { queryCellByISODate } = menuResult;
+              userEvent.keyboard('{arrowup}');
+              const prevWeek = queryCellByISODate('2023-09-03');
+              await waitFor(() => expect(prevWeek).toHaveFocus());
             });
 
-            describe('year input', () => {
-              const formatter = getValueFormatter('year');
+            test('down arrow moves focus to the next week', async () => {
+              const { queryCellByISODate } = menuResult;
+              userEvent.keyboard('{arrowdown}');
+              const nextWeek = queryCellByISODate('2023-09-17');
+              await waitFor(() => expect(nextWeek).toHaveFocus());
+            });
+          });
+
+          describe('when switching between daylight savings and standard time', () => {
+            // DST: Sun, Mar 12, 2023 – Sun, Nov 5, 2023
 
-              test('updates segment value to the default max', () => {
-                const { yearInput } = renderDatePicker();
-                userEvent.click(yearInput);
-                userEvent.keyboard(`{arrowdown}`);
+            const standardTimeEndDate = newUTC(2023, Month.March, 11, 22);
+            const weekBeforeDTStart = newUTC(2023, Month.March, 5, 22);
+            const daylightTimeStartDate = newUTC(2023, Month.March, 12, 22);
+            const daylightTimeEndDate = newUTC(2023, Month.November, 5, 22);
+            const weekAfterDTEnd = newUTC(2023, Month.November, 12, 22);
+            const standardTimeStartDate = newUTC(2023, Month.November, 6, 22);
 
-                expect(yearInput).toHaveValue(formatter(defaultMax.year));
+            describe('DST start (Mar 12 2023)', () => {
+              test('left arrow moves focus to prev day', async () => {
+                jest.setSystemTime(daylightTimeStartDate); // Mar 12
+                const { openMenu } = renderDatePicker();
+                const { queryCellByISODate } = await openMenu();
+                const currentDayCell = queryCellByISODate('2023-03-12'); // Mar 12
+                await waitFor(() => expect(currentDayCell).toHaveFocus());
+
+                userEvent.keyboard('{arrowleft}');
+                const prevDayCell = queryCellByISODate('2023-03-11'); // Mar 11
+                await waitFor(() => expect(prevDayCell).toHaveFocus());
               });
 
-              test('updates segment value to the provided min year', () => {
-                const { yearInput } = renderDatePicker({
-                  max: newUTC(2020, Month.March, 13),
-                });
-                userEvent.click(yearInput);
-                userEvent.keyboard(`{arrowdown}`);
+              test('right arrow moves focus to next day', async () => {
+                jest.setSystemTime(standardTimeEndDate); // Mar 11
+                const { openMenu } = renderDatePicker();
+                const { queryCellByISODate } = await openMenu();
+                const currentDayCell = queryCellByISODate('2023-03-11'); // Mar 11
+                await waitFor(() => expect(currentDayCell).toHaveFocus());
 
-                expect(yearInput).toHaveValue(formatter(2020));
+                userEvent.keyboard('{arrowright}');
+                const nextDayCell = queryCellByISODate('2023-03-12'); // Mar 12
+                await waitFor(() => expect(nextDayCell).toHaveFocus());
               });
 
-              test(`fires segment change handler`, () => {
-                const onChange = jest.fn();
-                const { yearInput } = renderDatePicker({ onChange });
-                userEvent.click(yearInput);
-                userEvent.keyboard(`{arrowdown}`);
-                expect(onChange).toHaveBeenCalledWith(
-                  eventContainingTargetValue(formatter(defaultMax.year)),
-                );
+              test('up arrow moves focus to the previous week', async () => {
+                jest.setSystemTime(daylightTimeStartDate); // Mar 12
+                const { openMenu } = renderDatePicker();
+                const { queryCellByISODate } = await openMenu();
+                userEvent.keyboard('{arrowup}');
+                const prevWeekCell = queryCellByISODate('2023-03-05'); // Mar 5
+                await waitFor(() => expect(prevWeekCell).toHaveFocus());
               });
 
-              test(`does not fire value change handler`, () => {
-                const onDateChange = jest.fn();
-                const { yearInput } = renderDatePicker({ onDateChange });
-                userEvent.click(yearInput);
-                userEvent.keyboard(`{arrowdown}`);
-                expect(onDateChange).not.toHaveBeenCalled();
+              test('down arrow moves focus to the next week', async () => {
+                jest.setSystemTime(weekBeforeDTStart); // Mar 5
+                const { openMenu } = renderDatePicker();
+                const { queryCellByISODate } = await openMenu();
+                userEvent.keyboard('{arrowdown}');
+                const nextWeekCell = queryCellByISODate('2023-03-12'); // Mar 12
+                await waitFor(() => expect(nextWeekCell).toHaveFocus());
               });
             });
 
-            describe('when a value is set', () => {
-              test('fires value change handler', () => {
-                const onDateChange = jest.fn();
-                const testVal = newUTC(2023, Month.September, 10);
-                const { monthInput } = renderDatePicker({
-                  onDateChange,
-                  value: testVal,
-                });
-                userEvent.click(monthInput);
-                userEvent.keyboard(`{arrowdown}`);
-                expect(onDateChange).toHaveBeenCalledWith(
-                  setUTCMonth(testVal, testVal.getUTCMonth() - 1),
-                );
-              });
+            describe('DST end (Nov 5 2023)', () => {
+              test('left arrow moves focus to prev day', async () => {
+                jest.setSystemTime(standardTimeStartDate); // Nov 6
+                const { openMenu } = renderDatePicker();
+                const { queryCellByISODate } = await openMenu();
+                userEvent.keyboard('{arrowleft}');
+                const prevDayCell = queryCellByISODate('2023-11-05'); // Nov 5
 
-              test('does not roll over year', () => {
-                const onDateChange = jest.fn();
-                const { yearInput } = renderDatePicker({
-                  onDateChange,
-                  value: newUTC(1969, Month.July, 5),
-                  min: newUTC(1969, Month.June, 20),
-                  max: newUTC(2020, Month.September, 10),
-                });
-                userEvent.click(yearInput);
-                userEvent.keyboard(`{arrowdown}`);
-                expect(onDateChange).toHaveBeenCalledWith(
-                  newUTC(1968, Month.July, 5),
-                );
+                await waitFor(() => expect(prevDayCell).toHaveFocus());
               });
 
-              describe('if new value would be out of range', () => {
-                const onDateChange = jest.fn();
-                const onSegmentChange = jest.fn();
-                const handleValidation = jest.fn();
-                const min = newUTC(1999, Month.November, 11);
-                const startValue = newUTC(2000, Month.August, 1);
-                const newYearVal = '1999';
+              test('right arrow moves focus to next day', async () => {
+                jest.setSystemTime(daylightTimeEndDate); // Nov 5
 
-                const expectedMessage = `Date must be after ${getFormattedDateString(
-                  min,
-                  'iso8601',
-                )}`;
+                const { openMenu } = renderDatePicker();
+                const { queryCellByISODate } = await openMenu();
+                userEvent.keyboard('{arrowright}');
 
-                let renderResult: RenderDatePickerResult;
+                const nextDayCell = queryCellByISODate('2023-11-06'); // Nov 6
+                await waitFor(() => expect(nextDayCell).toHaveFocus());
+              });
 
-                beforeEach(() => {
-                  onDateChange.mockReset();
-                  onSegmentChange.mockReset();
-                  handleValidation.mockReset();
-
-                  renderResult = renderDatePicker({
-                    min,
-                    value: startValue,
-                    onDateChange,
-                    onChange: onSegmentChange,
-                    handleValidation,
-                  });
-                  userEvent.click(renderResult.yearInput);
-                  userEvent.keyboard(`{arrowdown}`);
-                });
+              test('up arrow moves focus to the previous week', async () => {
+                jest.setSystemTime(weekAfterDTEnd); // Nov 12
+                const { openMenu } = renderDatePicker();
+                const { queryCellByISODate } = await openMenu();
+                userEvent.keyboard('{arrowup}');
 
-                test('updates the input', () => {
-                  expect(renderResult.yearInput).toHaveValue(newYearVal);
-                });
+                const prevWeekCell = queryCellByISODate('2023-11-05'); // Nov 5
+                await waitFor(() => expect(prevWeekCell).toHaveFocus());
+              });
 
-                test('fires the change handler', () => {
-                  expect(onDateChange).toHaveBeenCalledWith(
-                    setUTCYear(startValue, Number(newYearVal)),
-                  );
-                });
+              test('down arrow moves focus to the next week', async () => {
+                jest.setSystemTime(daylightTimeEndDate); // Nov 5
+                const { openMenu } = renderDatePicker();
+                const { queryCellByISODate } = await openMenu();
+                userEvent.keyboard('{arrowdown}');
 
-                test('fires the segment change handler', () => {
-                  expect(onSegmentChange).toHaveBeenCalledWith(
-                    eventContainingTargetValue(newYearVal),
-                  );
-                });
+                const nextWeekCell = queryCellByISODate('2023-11-12'); // Nov 12
+                await waitFor(() => expect(nextWeekCell).toHaveFocus());
+              });
+            });
+          });
 
-                test('fires the validation handler', () => {
-                  expect(handleValidation).toHaveBeenCalledWith(
-                    setUTCYear(startValue, Number(newYearVal)),
-                  );
-                });
+          describe('when next day would be out of range', () => {
+            const testValue = newUTC(2023, Month.September, 10);
+            const isoString = '2023-09-10';
 
-                test('sets aria-invalid', () => {
-                  expect(renderResult.inputContainer).toHaveAttribute(
-                    'aria-invalid',
-                    'true',
-                  );
-                });
+            test('left arrow does nothing', async () => {
+              const { openMenu } = renderDatePicker({
+                value: testValue,
+                min: testValue,
+              });
+              const { queryCellByISODate } = await openMenu();
+              userEvent.keyboard('{arrowleft}');
+              await waitFor(() =>
+                expect(queryCellByISODate(isoString)).toHaveFocus(),
+              );
+            });
 
-                test('sets error message', () => {
-                  const errorMessageElement = within(
-                    renderResult.formField,
-                  ).queryByText(expectedMessage);
-                  expect(errorMessageElement).toBeInTheDocument();
-                });
+            test('right arrow does nothing', async () => {
+              const { openMenu } = renderDatePicker({
+                value: testValue,
+                max: testValue,
+              });
+              const { queryCellByISODate } = await openMenu();
+
+              userEvent.keyboard('{arrowright}');
+              await waitFor(() =>
+                expect(queryCellByISODate(isoString)).toHaveFocus(),
+              );
+            });
+
+            test('up arrow does nothing', async () => {
+              const { openMenu } = renderDatePicker({
+                value: testValue,
+                min: addDays(testValue, -6),
               });
+              const { queryCellByISODate } = await openMenu();
+              userEvent.keyboard('{arrowup}');
+              await waitFor(() =>
+                expect(queryCellByISODate(isoString)).toHaveFocus(),
+              );
+            });
+            test('down arrow does nothing', async () => {
+              const { openMenu } = renderDatePicker({
+                value: testValue,
+                max: addDays(testValue, 6),
+              });
+              const { queryCellByISODate } = await openMenu();
+              userEvent.keyboard('{arrowdown}');
+              await waitFor(() =>
+                expect(queryCellByISODate(isoString)).toHaveFocus(),
+              );
             });
           });
-        });
 
-        describe('Menu', () => {
-          test('left arrow moves focus to the previous day', async () => {
-            const { openMenu } = renderDatePicker();
-            const { todayCell, queryCellByDate } = await openMenu();
-            expect(todayCell).toHaveFocus();
+          describe('update the displayed month', () => {
+            test('left arrow updates displayed month to previous', async () => {
+              const value = new Date(Date.UTC(2023, Month.September, 1));
+              const { openMenu } = renderDatePicker({ value });
+              const { calendarGrid } = await openMenu();
 
-            userEvent.keyboard('{arrowleft}');
-            const prevDayCell = queryCellByDate(subDays(testToday, 1));
-            await waitFor(() => expect(prevDayCell).toHaveFocus());
-          });
+              userEvent.keyboard('{arrowleft}');
+              expect(calendarGrid).toHaveAttribute('aria-label', 'August 2023');
+            });
 
-          test('down arrow moves focus to next week', async () => {
-            const { openMenu } = renderDatePicker();
-            const { todayCell, queryCellByDate } = await openMenu();
-            expect(todayCell).toHaveFocus();
+            test('right arrow updates displayed month to next', async () => {
+              const value = new Date(Date.UTC(2023, Month.September, 30));
+              const { openMenu } = renderDatePicker({ value });
+              const { calendarGrid } = await openMenu();
+              userEvent.keyboard('{arrowright}');
+              expect(calendarGrid).toHaveAttribute(
+                'aria-label',
+                'October 2023',
+              );
+            });
+
+            test('up arrow updates displayed month to previous', async () => {
+              const value = new Date(Date.UTC(2023, Month.September, 6));
+              const { openMenu } = renderDatePicker({ value });
+              const { calendarGrid } = await openMenu();
+
+              userEvent.keyboard('{arrowup}');
+              expect(calendarGrid).toHaveAttribute('aria-label', 'August 2023');
+            });
 
-            userEvent.keyboard('{arrowdown}');
-            const nextWeekCell = queryCellByDate(addDays(testToday, 7));
-            await waitFor(() => expect(nextWeekCell).toHaveFocus());
+            test('down arrow updates displayed month to next', async () => {
+              const value = new Date(Date.UTC(2023, Month.September, 25));
+              const { openMenu } = renderDatePicker({ value });
+              const { calendarGrid } = await openMenu();
+
+              userEvent.keyboard('{arrowdown}');
+              expect(calendarGrid).toHaveAttribute(
+                'aria-label',
+                'October 2023',
+              );
+            });
+
+            test('does not update month when month does not need to change', async () => {
+              const { openMenu } = renderDatePicker({
+                value: newUTC(2023, Month.September, 10),
+              });
+              const { calendarGrid } = await openMenu();
+
+              userEvent.tab();
+              userEvent.keyboard('{arrowleft}{arrowright}{arrowup}{arrowdown}');
+              expect(calendarGrid).toHaveAttribute(
+                'aria-label',
+                'September 2023',
+              );
+            });
           });
 
-          test('down arrow can change month', async () => {
-            const { calendarButton, findByRole } = renderDatePicker();
-            userEvent.click(calendarButton);
-            const menuContainerEl = await findByRole('listbox');
-            const calendarGrid = within(menuContainerEl).getByRole('grid');
-            fireEvent.transitionEnd(menuContainerEl!);
+          describe('when month should be updated', () => {
+            test('left arrow focuses the previous day', async () => {
+              const value = newUTC(2023, Month.September, 1);
+              const { openMenu } = renderDatePicker({
+                value,
+              });
+              const { queryCellByISODate } = await openMenu();
+              userEvent.keyboard('{arrowleft}');
+              const highlightedCell = queryCellByISODate('2023-08-31');
+              await waitFor(() => expect(highlightedCell).toHaveFocus());
+            });
+            test('right arrow focuses the next day', async () => {
+              const value = newUTC(2023, Month.September, 30);
+              const { openMenu } = renderDatePicker({
+                value,
+              });
+              const { queryCellByISODate } = await openMenu();
+              userEvent.keyboard('{arrowright}');
+              const highlightedCell = queryCellByISODate('2023-10-01');
+              await waitFor(() => expect(highlightedCell).toHaveFocus());
+            });
+            test('up arrow focuses the previous week', async () => {
+              const value = newUTC(2023, Month.September, 7);
+              const { openMenu } = renderDatePicker({
+                value,
+              });
+              const { queryCellByISODate } = await openMenu();
+              userEvent.keyboard('{arrowup}');
+              const highlightedCell = queryCellByISODate('2023-08-31');
+              await waitFor(() => expect(highlightedCell).toHaveFocus());
+            });
+            test('down arrow focuses the next week', async () => {
+              const value = newUTC(2023, Month.September, 24);
+              const { openMenu } = renderDatePicker({
+                value,
+              });
+              const { queryCellByISODate } = await openMenu();
+              userEvent.keyboard('{arrowdown}');
+              const highlightedCell = queryCellByISODate('2023-10-01');
+              await waitFor(() => expect(highlightedCell).toHaveFocus());
+            });
+          });
 
-            expect(calendarGrid).toHaveAttribute('aria-label', 'December 2023');
+          describe('focus-trap', () => {
+            test('when a cell is focused, pressing tab moves the focus to the left chevron', async () => {
+              const { openMenu } = renderDatePicker();
+              const { todayCell, leftChevron } = await openMenu();
+              expect(todayCell).toHaveFocus();
+              userEvent.tab();
+              expect(leftChevron).toHaveFocus();
+            });
 
-            userEvent.keyboard('{arrowdown}');
-            expect(calendarGrid).toHaveAttribute('aria-label', 'January 2024');
+            test('when a cell is focused, pressing tab + shift moves the focus to the right chevron', async () => {
+              const { openMenu } = renderDatePicker();
+              const { todayCell, rightChevron } = await openMenu();
+              expect(todayCell).toHaveFocus();
+              userEvent.tab({ shift: true });
+              expect(rightChevron).toHaveFocus();
+            });
+
+            test('when the left chevron is focused, pressing tab + shift moves the focus to todays cell', async () => {
+              const { openMenu } = renderDatePicker();
+              const { todayCell, leftChevron } = await openMenu();
+              userEvent.tab();
+              expect(leftChevron).toHaveFocus();
+              userEvent.tab({ shift: true });
+              expect(todayCell).toHaveFocus();
+            });
+
+            test('when the right chevron is focused, pressing tab moves the focus to todays cell', async () => {
+              const { openMenu } = renderDatePicker();
+              const { todayCell, rightChevron } = await openMenu();
+              userEvent.tab({ shift: true });
+              expect(rightChevron).toHaveFocus();
+              userEvent.tab();
+              expect(todayCell).toHaveFocus();
+            });
           });
         });
       });
@@ -2034,46 +2680,80 @@ describe('packages/date-picker', () => {
       });
 
       describe('typing a full date value', () => {
-        test('fires value change handler for explicit values', async () => {
-          const onDateChange = jest.fn();
-          const { yearInput, monthInput, dayInput } = renderDatePicker({
-            onDateChange,
+        describe('if the date is valid', () => {
+          test('fires value change handler for explicit values', async () => {
+            const onDateChange = jest.fn();
+            const { yearInput, monthInput, dayInput } = renderDatePicker({
+              onDateChange,
+            });
+            userEvent.type(yearInput, '2003');
+            userEvent.type(monthInput, '12');
+            userEvent.type(dayInput, '26');
+
+            await waitFor(() =>
+              expect(onDateChange).toHaveBeenCalledWith(
+                expect.objectContaining(newUTC(2003, Month.December, 26)),
+              ),
+            );
           });
-          userEvent.type(yearInput, '2003');
-          userEvent.type(monthInput, '12');
-          userEvent.type(dayInput, '26');
 
-          await waitFor(() =>
-            expect(onDateChange).toHaveBeenCalledWith(
-              expect.objectContaining(newUTC(2003, Month.December, 26)),
-            ),
-          );
-        });
+          test('does not fire value change handler for ambiguous values', async () => {
+            const onDateChange = jest.fn();
+            const { yearInput, monthInput, dayInput } = renderDatePicker({
+              onDateChange,
+            });
+            userEvent.type(yearInput, '2003');
+            userEvent.type(monthInput, '12');
+            userEvent.type(dayInput, '2');
 
-        test('does not fire value change handler for ambiguous values', async () => {
-          const onDateChange = jest.fn();
-          const { yearInput, monthInput, dayInput } = renderDatePicker({
-            onDateChange,
+            await waitFor(() => expect(onDateChange).not.toHaveBeenCalled());
           });
-          userEvent.type(yearInput, '2003');
-          userEvent.type(monthInput, '12');
-          userEvent.type(dayInput, '2');
 
-          await waitFor(() => expect(onDateChange).not.toHaveBeenCalled());
+          test('properly renders the input', async () => {
+            const onDateChange = jest.fn();
+            const { yearInput, monthInput, dayInput } = renderDatePicker({
+              onDateChange,
+            });
+            userEvent.type(yearInput, '2003');
+            userEvent.type(monthInput, '12');
+            userEvent.type(dayInput, '26');
+            await waitFor(() => {
+              expect(yearInput).toHaveValue('2003');
+              expect(monthInput).toHaveValue('12');
+              expect(dayInput).toHaveValue('26');
+            });
+          });
         });
 
-        test('properly renders the input', async () => {
-          const onDateChange = jest.fn();
-          const { yearInput, monthInput, dayInput } = renderDatePicker({
-            onDateChange,
+        // TODO:
+        describe('if the value is not a valid date', () => {
+          // E.g. Feb 31 2020
+          test('the input is rendered with the typed date', async () => {
+            const { yearInput, monthInput, dayInput } = renderDatePicker({});
+            userEvent.type(yearInput, '2020');
+            userEvent.type(monthInput, '02');
+            userEvent.type(dayInput, '31');
+            await waitFor(() => {
+              expect(yearInput).toHaveValue('2020');
+              expect(monthInput).toHaveValue('02');
+              expect(dayInput).toHaveValue('31');
+            });
           });
-          userEvent.type(yearInput, '2003');
-          userEvent.type(monthInput, '12');
-          userEvent.type(dayInput, '26');
-          await waitFor(() => {
-            expect(yearInput).toHaveValue('2003');
-            expect(monthInput).toHaveValue('12');
-            expect(dayInput).toHaveValue('26');
+
+          test('an error is displayed', () => {
+            const {
+              yearInput,
+              monthInput,
+              dayInput,
+              inputContainer,
+              queryByTestId,
+            } = renderDatePicker({});
+            userEvent.type(yearInput, '2020');
+            userEvent.type(monthInput, '02');
+            userEvent.type(dayInput, '31');
+            expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
+            const errorElement = queryByTestId('lg-form_field-error_message');
+            expect(errorElement).toBeInTheDocument();
           });
         });
 
@@ -2310,7 +2990,7 @@ describe('packages/date-picker', () => {
         );
       });
 
-      describe('setting the date to an invalid value', () => {
+      describe('setting the date to an out-of-range value', () => {
         describe('with initial value', () => {
           let menuElements: RenderMenuResult;
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
index 405e49f903..6b456d95d5 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx
@@ -74,161 +74,24 @@ describe('packages/date-picker/date-picker-input', () => {
       userEvent.tab();
       expect(dayInput.value).toBe('02');
     });
-  });
-
-  describe('Keyboard interaction', () => {
-    // yyyy-mm-dd
-    describe('Left Arrow', () => {
-      test('focuses the previous segment when the segment is empty', () => {
-        const { yearInput, monthInput } = renderDatePickerInput();
-        userEvent.click(monthInput);
-        userEvent.keyboard('{arrowleft}');
-        expect(yearInput).toHaveFocus();
-      });
-
-      test('moves the cursor when the segment has a value', () => {
-        const { monthInput } = renderDatePickerInput(null, {
-          value: testDate,
-        });
-        userEvent.click(monthInput);
-        userEvent.keyboard('{arrowleft}');
-        expect(monthInput).toHaveFocus();
-      });
-
-      test('focuses the previous segment if the cursor is at the start of the input text', () => {
-        const { yearInput, monthInput } = renderDatePickerInput(null, {
-          value: testDate,
-        });
-        userEvent.click(monthInput);
-        userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
-        expect(yearInput).toHaveFocus();
-      });
-    });
-
-    describe('Right Arrow', () => {
-      test('focuses the next segment when the segment is empty', () => {
-        const { yearInput, monthInput } = renderDatePickerInput();
-        userEvent.click(yearInput);
-        userEvent.keyboard('{arrowright}');
-        expect(monthInput).toHaveFocus();
-      });
-
-      test('focuses the next segment if the cursor is at the start of the input text', () => {
-        const { yearInput, monthInput } = renderDatePickerInput(null, {
-          value: testDate,
-        });
-        userEvent.click(yearInput);
-        userEvent.keyboard('{arrowright}');
-        expect(monthInput).toHaveFocus();
-      });
-
-      test('moves the cursor when the segment has a value', () => {
-        const { yearInput } = renderDatePickerInput(null, {
-          value: new Date(),
-        });
-        userEvent.click(yearInput);
-        userEvent.keyboard('{arrowleft}{arrowright}');
-        expect(yearInput).toHaveFocus();
-      });
-    });
-
-    describe('Backspace key', () => {
-      test('deletes any value in the input', () => {
+    describe('allows only 2 characters', () => {
+      test('in day input', () => {
         const { dayInput } = renderDatePickerInput();
-        userEvent.type(dayInput, '26{backspace}');
-        expect(dayInput.value).toBe('2');
-        userEvent.tab();
-        expect(dayInput.value).toBe('02');
-      });
-
-      test('deletes the whole value on multiple presses', () => {
-        const { monthInput } = renderDatePickerInput();
-        userEvent.type(monthInput, '11');
-        userEvent.type(monthInput, '{backspace}{backspace}');
-        expect(monthInput.value).toBe('');
-      });
-
-      test('focuses the previous segment if current segment is empty', () => {
-        const { yearInput, monthInput } = renderDatePickerInput();
-        userEvent.type(monthInput, '{backspace}');
-        expect(yearInput).toHaveFocus();
-      });
-    });
-
-    describe('Up Arrow', () => {
-      test('keeps the focus in the current segment', () => {
-        const { monthInput } = renderDatePickerInput();
-        userEvent.click(monthInput);
-        userEvent.keyboard('{arrowup}');
-        expect(monthInput).toHaveFocus();
+        userEvent.type(dayInput, '22222222');
+        expect(dayInput.value.length).toBe(2);
       });
 
-      test('keeps the focus in the current segment even if the value is valid', () => {
+      test('in month input', () => {
         const { monthInput } = renderDatePickerInput();
-        userEvent.click(monthInput);
-        userEvent.keyboard('{arrowup}{arrowup}{arrowup}');
-        expect(monthInput).toHaveValue('03');
-        expect(monthInput).toHaveFocus();
-      });
-
-      test('Resets the value to the min value when the new value is greater than the max value', () => {
-        const { monthInput } = renderDatePickerInput();
-        userEvent.click(monthInput);
-        userEvent.keyboard('{arrowup}');
-        expect(monthInput).toHaveValue('01');
-        userEvent.keyboard(
-          '{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}{arrowup}',
-        );
-        expect(monthInput).toHaveValue('01');
+        userEvent.type(monthInput, '22222222');
+        expect(monthInput.value.length).toBe(2);
       });
     });
 
-    describe('Down Arrow', () => {
-      test('keeps the focus in the current segment', () => {
-        const { monthInput } = renderDatePickerInput();
-        userEvent.click(monthInput);
-        userEvent.keyboard('{arrowdown}');
-        expect(monthInput).toHaveFocus();
-      });
-
-      test('keeps the focus in the current segment even if the value is valid', () => {
-        const { monthInput } = renderDatePickerInput();
-        userEvent.click(monthInput);
-        userEvent.keyboard('{arrowdown}{arrowdown}{arrowdown}');
-        expect(monthInput).toHaveValue('10');
-        expect(monthInput).toHaveFocus();
-      });
-
-      test('Resets the value to the max value when the new value is less than the min value', () => {
-        const { monthInput } = renderDatePickerInput();
-        userEvent.click(monthInput);
-        userEvent.keyboard('{arrowdown}');
-        expect(monthInput).toHaveValue('12');
-      });
-    });
-
-    describe('typing', () => {
-      describe('allows only 2 characters', () => {
-        test('in day input', () => {
-          const { dayInput } = renderDatePickerInput();
-          userEvent.type(dayInput, '22222222');
-          expect(dayInput.value.length).toBe(2);
-        });
-
-        test('in month input', () => {
-          const { monthInput } = renderDatePickerInput();
-          userEvent.type(monthInput, '22222222');
-          expect(monthInput.value.length).toBe(2);
-        });
-      });
-
-      describe('allows only 4 characters', () => {
-        test('in year input', () => {
-          const { yearInput } = renderDatePickerInput();
-          userEvent.type(yearInput, '22222222');
-          expect(yearInput.value.length).toBe(4);
-        });
-      });
+    test('allows only 4 characters in year input', () => {
+      const { yearInput } = renderDatePickerInput();
+      userEvent.type(yearInput, '22222222');
+      expect(yearInput.value.length).toBe(4);
     });
   });
 });
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 08d046410a..088c4e73f7 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { addDays } from 'date-fns';
+import { render } from '@testing-library/react';
 
 import {
   getISODate,
   getISODateTZ,
   Month,
   newUTC,
-  setUTCDate,
 } from '@leafygreen-ui/date-utils';
 import {
   mockTimeZone,
@@ -27,7 +24,6 @@ import {
 import { DatePickerMenu, DatePickerMenuProps } from '.';
 
 const testToday = newUTC(2023, Month.September, 10);
-const testValue = newUTC(2023, Month.September, 14);
 
 const renderDatePickerMenu = (
   props?: Partial<DatePickerMenuProps> | null,
@@ -272,353 +268,4 @@ describe('packages/date-picker/date-picker-menu', () => {
       },
     );
   });
-
-  describe('Keyboard navigation', () => {
-    describe('Arrow Keys', () => {
-      beforeEach(() => {
-        jest.setSystemTime(testToday);
-        mockTimeZone('America/New_York', -5);
-      });
-      afterEach(() => {
-        jest.restoreAllMocks();
-      });
-
-      test('left arrow moves focus to the previous day', async () => {
-        const { getCellWithValue } = renderDatePickerMenu(null, {
-          value: testValue,
-        });
-        userEvent.tab();
-        userEvent.keyboard('{arrowleft}');
-        const prevDay = getCellWithValue(setUTCDate(testValue, 13));
-
-        await waitFor(() => expect(prevDay).toHaveFocus());
-      });
-
-      test('right arrow moves focus to the next day', async () => {
-        const { getCellWithValue } = renderDatePickerMenu(null, {
-          value: testValue,
-        });
-        userEvent.tab();
-        userEvent.keyboard('{arrowright}');
-
-        const nextDay = getCellWithValue(setUTCDate(testValue, 15));
-        await waitFor(() => expect(nextDay).toHaveFocus());
-      });
-
-      test('up arrow moves focus to the previous week', async () => {
-        const { getCellWithValue } = renderDatePickerMenu(null, {
-          value: testValue,
-        });
-        userEvent.tab();
-        userEvent.keyboard('{arrowup}');
-
-        const prevWeek = getCellWithValue(setUTCDate(testValue, 7));
-        await waitFor(() => expect(prevWeek).toHaveFocus());
-      });
-
-      test('down arrow moves focus to the next week', async () => {
-        const { getCellWithValue } = renderDatePickerMenu(null, {
-          value: testValue,
-        });
-        userEvent.tab();
-        userEvent.keyboard('{arrowdown}');
-
-        const nextWeek = getCellWithValue(setUTCDate(testValue, 21));
-        await waitFor(() => expect(nextWeek).toHaveFocus());
-      });
-
-      describe('when switching between daylight savings and standard time', () => {
-        // DST: Sun, Mar 12, 2023 – Sun, Nov 5, 2023
-
-        const standardTimeEndDate = newUTC(2023, Month.March, 11, 22);
-        const weekBeforeDTStart = newUTC(2023, Month.March, 5, 22);
-        const daylightTimeStartDate = newUTC(2023, Month.March, 12, 22);
-        const daylightTimeEndDate = newUTC(2023, Month.November, 5, 22);
-        const weekAfterDTEnd = newUTC(2023, Month.November, 12, 22);
-        const standardTimeStartDate = newUTC(2023, Month.November, 6, 22);
-
-        describe('DST start (Mar 12 2023)', () => {
-          test('left arrow moves focus to prev day', async () => {
-            jest.setSystemTime(daylightTimeStartDate); // Mar 12
-            const { getCellWithISOString } = renderDatePickerMenu();
-            userEvent.tab();
-            const currentDayCell = getCellWithISOString('2023-03-12'); // Mar 12
-            await waitFor(() => expect(currentDayCell).toHaveFocus());
-
-            userEvent.keyboard('{arrowleft}');
-            const prevDayCell = getCellWithISOString('2023-03-11'); // Mar 11
-            await waitFor(() => expect(prevDayCell).toHaveFocus());
-          });
-
-          test('right arrow moves focus to next day', async () => {
-            jest.setSystemTime(standardTimeEndDate); // Mar 11
-            const { getCellWithISOString } = renderDatePickerMenu();
-            userEvent.tab();
-            const currentDayCell = getCellWithISOString('2023-03-11'); // Mar 11
-            await waitFor(() => expect(currentDayCell).toHaveFocus());
-
-            userEvent.keyboard('{arrowright}');
-            const nextDayCell = getCellWithISOString('2023-03-12'); // Mar 12
-            await waitFor(() => expect(nextDayCell).toHaveFocus());
-          });
-
-          test('up arrow moves focus to the previous week', async () => {
-            jest.setSystemTime(daylightTimeStartDate); // Mar 12
-            const { getCellWithISOString } = renderDatePickerMenu();
-            userEvent.tab();
-            userEvent.keyboard('{arrowup}');
-            const prevWeekCell = getCellWithISOString('2023-03-05'); // Mar 5
-            await waitFor(() => expect(prevWeekCell).toHaveFocus());
-          });
-
-          test('down arrow moves focus to the next week', async () => {
-            jest.setSystemTime(weekBeforeDTStart); // Mar 5
-            const { getCellWithISOString } = renderDatePickerMenu();
-            userEvent.tab();
-            userEvent.keyboard('{arrowdown}');
-            const nextWeekCell = getCellWithISOString('2023-03-12'); // Mar 12
-            await waitFor(() => expect(nextWeekCell).toHaveFocus());
-          });
-        });
-
-        describe('DST end (Nov 5 2023)', () => {
-          test('left arrow moves focus to prev day', async () => {
-            jest.setSystemTime(standardTimeStartDate); // Nov 6
-            const { getCellWithISOString } = renderDatePickerMenu();
-            userEvent.tab();
-            userEvent.keyboard('{arrowleft}');
-            const prevDayCell = getCellWithISOString('2023-11-05'); // Nov 5
-
-            await waitFor(() => expect(prevDayCell).toHaveFocus());
-          });
-
-          test('right arrow moves focus to next day', async () => {
-            jest.setSystemTime(daylightTimeEndDate); // Nov 5
-
-            const { getCellWithISOString } = renderDatePickerMenu();
-            userEvent.tab();
-            userEvent.keyboard('{arrowright}');
-
-            const nextDayCell = getCellWithISOString('2023-11-06'); // Nov 6
-            await waitFor(() => expect(nextDayCell).toHaveFocus());
-          });
-
-          test('up arrow moves focus to the previous week', async () => {
-            jest.setSystemTime(weekAfterDTEnd); // Nov 12
-            const { getCellWithISOString } = renderDatePickerMenu();
-            userEvent.tab();
-            userEvent.keyboard('{arrowup}');
-
-            const prevWeekCell = getCellWithISOString('2023-11-05'); // Nov 5
-            await waitFor(() => expect(prevWeekCell).toHaveFocus());
-          });
-
-          test('down arrow moves focus to the next week', async () => {
-            jest.setSystemTime(daylightTimeEndDate); // Nov 5
-            const { getCellWithISOString } = renderDatePickerMenu();
-            userEvent.tab();
-            userEvent.keyboard('{arrowdown}');
-
-            const nextWeekCell = getCellWithISOString('2023-11-12'); // Nov 12
-            await waitFor(() => expect(nextWeekCell).toHaveFocus());
-          });
-        });
-      });
-
-      describe('when next day would be out of range', () => {
-        const testValue = newUTC(2023, Month.September, 10);
-        const isoString = '2023-09-10';
-        const singleCtx = {
-          value: testValue,
-        };
-        test('left arrow does nothing', async () => {
-          const { getCellWithISOString } = renderDatePickerMenu(
-            null,
-            singleCtx,
-            {
-              min: testValue,
-            },
-          );
-          userEvent.tab();
-          userEvent.keyboard('{arrowleft}');
-          await waitFor(() =>
-            expect(getCellWithISOString(isoString)).toHaveFocus(),
-          );
-        });
-
-        test('right arrow does nothing', async () => {
-          const { getCellWithISOString } = renderDatePickerMenu(
-            null,
-            singleCtx,
-            {
-              max: testValue,
-            },
-          );
-          userEvent.tab();
-          userEvent.keyboard('{arrowright}');
-          await waitFor(() =>
-            expect(getCellWithISOString(isoString)).toHaveFocus(),
-          );
-        });
-
-        test('up arrow does nothing', async () => {
-          const { getCellWithISOString } = renderDatePickerMenu(
-            null,
-            singleCtx,
-            {
-              min: addDays(testValue, -6),
-            },
-          );
-          userEvent.tab();
-          userEvent.keyboard('{arrowup}');
-          await waitFor(() =>
-            expect(getCellWithISOString(isoString)).toHaveFocus(),
-          );
-        });
-        test('down arrow does nothing', async () => {
-          const { getCellWithISOString } = renderDatePickerMenu(
-            null,
-            singleCtx,
-            {
-              max: addDays(testValue, 6),
-            },
-          );
-          userEvent.tab();
-          userEvent.keyboard('{arrowdown}');
-          await waitFor(() =>
-            expect(getCellWithISOString(isoString)).toHaveFocus(),
-          );
-        });
-      });
-
-      describe('update the displayed month', () => {
-        test('left arrow updates displayed month to previous', () => {
-          const value = new Date(Date.UTC(2023, Month.September, 1));
-          const { calendarGrid } = renderDatePickerMenu(null, { value });
-          userEvent.tab();
-          userEvent.keyboard('{arrowleft}');
-          expect(calendarGrid).toHaveAttribute('aria-label', 'August 2023');
-        });
-
-        test('right arrow updates displayed month to next', () => {
-          const value = new Date(Date.UTC(2023, Month.September, 30));
-          const { calendarGrid } = renderDatePickerMenu(null, { value });
-          userEvent.tab();
-          userEvent.keyboard('{arrowright}');
-          expect(calendarGrid).toHaveAttribute('aria-label', 'October 2023');
-        });
-
-        test('up arrow updates displayed month to previous', () => {
-          const value = new Date(Date.UTC(2023, Month.September, 6));
-          const { calendarGrid } = renderDatePickerMenu(null, { value });
-          userEvent.tab();
-          userEvent.keyboard('{arrowup}');
-          expect(calendarGrid).toHaveAttribute('aria-label', 'August 2023');
-        });
-
-        test('down arrow updates displayed month to next', () => {
-          const value = new Date(Date.UTC(2023, Month.September, 25));
-          const { calendarGrid } = renderDatePickerMenu(null, { value });
-          userEvent.tab();
-          userEvent.keyboard('{arrowdown}');
-          expect(calendarGrid).toHaveAttribute('aria-label', 'October 2023');
-        });
-
-        test('does not update month when month does not need to change', () => {
-          const { calendarGrid } = renderDatePickerMenu(null, {
-            value: testValue,
-          });
-          userEvent.tab();
-          userEvent.keyboard('{arrowleft}{arrowright}{arrowup}{arrowdown}');
-          expect(calendarGrid).toHaveAttribute('aria-label', 'September 2023');
-        });
-      });
-
-      describe('when month should be updated', () => {
-        test('left arrow focuses the previous day', async () => {
-          const value = newUTC(2023, Month.September, 1);
-          const { getCellWithValue } = renderDatePickerMenu(null, {
-            value,
-          });
-          userEvent.tab();
-          userEvent.keyboard('{arrowleft}');
-          const highlightedCell = getCellWithValue(
-            newUTC(2023, Month.August, 31),
-          );
-
-          await waitFor(() => expect(highlightedCell).toHaveFocus());
-        });
-        test('right arrow focuses the next day', async () => {
-          const value = newUTC(2023, Month.September, 30);
-          const { getCellWithValue } = renderDatePickerMenu(null, {
-            value,
-          });
-          userEvent.tab();
-          userEvent.keyboard('{arrowright}');
-          const highlightedCell = getCellWithValue(
-            newUTC(2023, Month.October, 1),
-          );
-          await waitFor(() => expect(highlightedCell).toHaveFocus());
-        });
-        test('up arrow focuses the previous week', async () => {
-          const value = newUTC(2023, Month.September, 7);
-          const { getCellWithValue } = renderDatePickerMenu(null, {
-            value,
-          });
-          userEvent.tab();
-          userEvent.keyboard('{arrowup}');
-          const highlightedCell = getCellWithValue(
-            newUTC(2023, Month.August, 31),
-          );
-          await waitFor(() => expect(highlightedCell).toHaveFocus());
-        });
-        test('down arrow focuses the next week', async () => {
-          const value = newUTC(2023, Month.September, 24);
-          const { getCellWithValue } = renderDatePickerMenu(null, {
-            value,
-          });
-          userEvent.tab();
-          userEvent.keyboard('{arrowdown}');
-          const highlightedCell = getCellWithValue(
-            newUTC(2023, Month.October, 1),
-          );
-          await waitFor(() => expect(highlightedCell).toHaveFocus());
-        });
-      });
-
-      describe('focus-trap', () => {
-        test('when a cell is focused, pressing tab moves the focus to the left chevron', () => {
-          const { todayCell, leftChevron } = renderDatePickerMenu();
-          userEvent.tab();
-          expect(todayCell).toHaveFocus();
-          userEvent.tab();
-          expect(leftChevron).toHaveFocus();
-        });
-
-        test('when a cell is focused, pressing tab + shift moves the focus to the right chevron', () => {
-          const { todayCell, rightChevron } = renderDatePickerMenu();
-          userEvent.tab();
-          expect(todayCell).toHaveFocus();
-          userEvent.tab({ shift: true });
-          expect(rightChevron).toHaveFocus();
-        });
-
-        test('when the left chevron is focused, pressing tab + shift moves the focus to todays cell', () => {
-          const { todayCell, leftChevron } = renderDatePickerMenu();
-          leftChevron?.focus();
-          expect(leftChevron).toHaveFocus();
-          userEvent.tab({ shift: true });
-          expect(todayCell).toHaveFocus();
-        });
-
-        test('when the right chevron is focused, pressing tab moves the focus to todays cell', () => {
-          const { todayCell, rightChevron } = renderDatePickerMenu();
-          rightChevron?.focus();
-          expect(rightChevron).toHaveFocus();
-          userEvent.tab();
-          expect(todayCell).toHaveFocus();
-        });
-      });
-    });
-  });
 });
diff --git a/packages/date-picker/src/shared/utils/doSegmentsFormValidDate/doSegmentsFormValidDate.ts b/packages/date-picker/src/shared/utils/doSegmentsFormValidDate/doSegmentsFormValidDate.ts
new file mode 100644
index 0000000000..32ce1263ba
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/doSegmentsFormValidDate/doSegmentsFormValidDate.ts
@@ -0,0 +1,21 @@
+import { DateSegmentsState } from '../..//types';
+import { isEverySegmentFilled } from '../isEverySegmentFilled';
+import { isEverySegmentValid } from '../isEverySegmentValid';
+import { newDateFromSegments } from '../newDateFromSegments';
+
+/**
+ * Returns whether the provided {@link DateSegmentsState} forms a valid date
+ */
+export const doSegmentsFormValidDate = (
+  segments: DateSegmentsState,
+): boolean => {
+  const areAllFilled = isEverySegmentFilled(segments);
+  const areAllValid = isEverySegmentValid(segments);
+
+  if (areAllFilled && areAllValid) {
+    const utcDate = newDateFromSegments(segments);
+    return !!utcDate;
+  }
+
+  return false;
+};
diff --git a/packages/date-picker/src/shared/utils/doSegmentsFormValidDate/index.ts b/packages/date-picker/src/shared/utils/doSegmentsFormValidDate/index.ts
new file mode 100644
index 0000000000..a59efb6314
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/doSegmentsFormValidDate/index.ts
@@ -0,0 +1 @@
+export { doSegmentsFormValidDate } from './doSegmentsFormValidDate';
diff --git a/packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateString.ts b/packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateString.ts
new file mode 100644
index 0000000000..ba59e6b5dd
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateString.ts
@@ -0,0 +1,9 @@
+import { getFormattedSegmentsFromDate } from '../getSegmentsFromDate';
+
+import { getFormattedDateStringFromSegments } from './getFormattedDateStringFromSegments';
+
+export const getFormattedDateString = (date: Date, locale: string) => {
+  const dateSegments = getFormattedSegmentsFromDate(date);
+
+  return getFormattedDateStringFromSegments(dateSegments, locale);
+};
diff --git a/packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateStringFromSegments.ts b/packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateStringFromSegments.ts
new file mode 100644
index 0000000000..0b9d7ac777
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getFormattedDateString/getFormattedDateStringFromSegments.ts
@@ -0,0 +1,25 @@
+import { DateSegment, DateSegmentsState } from '../../../shared/types';
+import { getFormatParts } from '../getFormatParts';
+import { getValueFormatter } from '../getValueFormatter';
+
+export const getFormattedDateStringFromSegments = (
+  segments: DateSegmentsState,
+  locale: string,
+): string | undefined => {
+  const formatParts = getFormatParts(locale);
+
+  // Note: looping through `formatParts`, instead of using `Intl.DateTimeFormat(locale).format(date)`
+  // since the locale `iso8601` does not return a valid formatter
+  const formattedDate = formatParts?.reduce((dateString, part) => {
+    if (part.type === 'literal') {
+      return dateString + part.value;
+    }
+
+    const segment = part.type as DateSegment;
+    const formatter = getValueFormatter(segment);
+    const formattedSegment = formatter(segments[segment]);
+    return dateString + formattedSegment;
+  }, '');
+
+  return formattedDate;
+};
diff --git a/packages/date-picker/src/shared/utils/getFormattedDateString/index.ts b/packages/date-picker/src/shared/utils/getFormattedDateString/index.ts
index f5e8293ca6..3e8df435aa 100644
--- a/packages/date-picker/src/shared/utils/getFormattedDateString/index.ts
+++ b/packages/date-picker/src/shared/utils/getFormattedDateString/index.ts
@@ -1,20 +1,2 @@
-import { DateSegment } from '../../types';
-import { getFormatParts } from '../getFormatParts';
-import { getFormattedSegmentsFromDate } from '../getSegmentsFromDate';
-
-export const getFormattedDateString = (date: Date, locale: string) => {
-  const formatParts = getFormatParts(locale);
-  const dateSegments = getFormattedSegmentsFromDate(date);
-
-  // Note: looping through `formatParts`, instead of using `Intl.DateTimeFormat(locale).format(date)`
-  // since the locale `iso8601` does not return a valid formatter
-  const formattedDate = formatParts?.reduce((dateString, part) => {
-    const partString =
-      part.type === 'literal'
-        ? part.value
-        : dateSegments[part.type as DateSegment];
-    return dateString + partString;
-  }, '');
-
-  return formattedDate;
-};
+export { getFormattedDateString } from './getFormattedDateString';
+export { getFormattedDateStringFromSegments } from './getFormattedDateStringFromSegments';
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index cf15e082e0..f31a0841ec 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -1,8 +1,12 @@
 export { doesSomeSegmentExist } from './doesSomeSegmentExist';
+export { doSegmentsFormValidDate } from './doSegmentsFormValidDate';
 export { getAutoComplete } from './getAutoComplete';
 export { getFirstEmptySegment } from './getFirstEmptySegment';
 export { getFormatParts, getFormatter } from './getFormatParts';
-export { getFormattedDateString } from './getFormattedDateString';
+export {
+  getFormattedDateString,
+  getFormattedDateStringFromSegments,
+} from './getFormattedDateString';
 export { getMaxSegmentValue } from './getMaxSegmentValue';
 export { getMinSegmentValue } from './getMinSegmentValue';
 export {
@@ -17,6 +21,8 @@ export {
 } from './getSegmentsFromDate';
 export { getValueFormatter } from './getValueFormatter';
 export { isElementInputSegment } from './isElementInputSegment';
+export { isEverySegmentFilled } from './isEverySegmentFilled';
+export { isEverySegmentValid } from './isEverySegmentValid';
 export { isEverySegmentValueExplicit } from './isEverySegmentValueExplicit';
 export { isExplicitSegmentValue } from './isExplicitSegmentValue';
 export { isValidSegmentName, isValidSegmentValue } from './isValidSegment';
diff --git a/packages/date-picker/src/shared/utils/isEverySegmentFilled/index.ts b/packages/date-picker/src/shared/utils/isEverySegmentFilled/index.ts
new file mode 100644
index 0000000000..9e54a49314
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/isEverySegmentFilled/index.ts
@@ -0,0 +1 @@
+export { isEverySegmentFilled } from './isEverySegmentFilled';
diff --git a/packages/date-picker/src/shared/utils/isEverySegmentFilled/isEverySegmentFilled.ts b/packages/date-picker/src/shared/utils/isEverySegmentFilled/isEverySegmentFilled.ts
new file mode 100644
index 0000000000..e4f2ea6212
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/isEverySegmentFilled/isEverySegmentFilled.ts
@@ -0,0 +1,7 @@
+import { isNotZeroLike } from '@leafygreen-ui/lib';
+
+import { DateSegmentsState } from '../../types';
+
+export const isEverySegmentFilled = (segments: DateSegmentsState) => {
+  return Object.values(segments).every(isNotZeroLike);
+};
diff --git a/packages/date-picker/src/shared/utils/isEverySegmentValid/index.ts b/packages/date-picker/src/shared/utils/isEverySegmentValid/index.ts
new file mode 100644
index 0000000000..3dec1d2d9c
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/isEverySegmentValid/index.ts
@@ -0,0 +1 @@
+export { isEverySegmentValid } from './isEverySegmentValid';
diff --git a/packages/date-picker/src/shared/utils/isEverySegmentValid/isEverySegmentValid.ts b/packages/date-picker/src/shared/utils/isEverySegmentValid/isEverySegmentValid.ts
new file mode 100644
index 0000000000..6e338ec5b9
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/isEverySegmentValid/isEverySegmentValid.ts
@@ -0,0 +1,11 @@
+import { DateSegment, DateSegmentsState } from '../../types';
+import { isValidValueForSegment } from '../isValidValueForSegment';
+
+/**
+ * Whether every segment in a {@link DateSegmentsState} object is valid
+ */
+export const isEverySegmentValid = (segments: DateSegmentsState): boolean => {
+  return Object.entries(segments).every(([segment, value]) =>
+    isValidValueForSegment(segment as DateSegment, value),
+  );
+};

From 363a15d09b17c6d4afcdfaa565bc70cb4b19a18c Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Tue, 19 Dec 2023 16:38:53 -0500
Subject: [PATCH 337/351] DatePicker [LG-3899] arrow key errors (#2145)

* getSegmentStateFromRefs

* Adds error handling

* adds getSegmentStateFromRefs tests

* updates how dates rollover

* Update DatePicker.spec.tsx

* Test errors don't appear from tabbing

* setIsDirty. show error only if areAllFilled

* Update DateInputBox.tsx
---
 .../date-picker/src/DatePicker.stories.tsx    |  8 ++-
 .../src/DatePicker/DatePicker.spec.tsx        | 72 ++++++++++++++-----
 .../DatePickerContext/DatePickerContext.tsx   | 30 +++++++-
 .../DatePickerInput/DatePickerInput.tsx       |  2 +-
 .../DateInput/DateInputBox/DateInputBox.tsx   | 65 ++++++++++++++---
 .../context/SharedDatePickerContext.tsx       |  3 -
 .../getSegmentStateFromRefs.spec.ts           | 34 +++++++++
 .../getSegmentStateFromRefs.ts                | 15 ++++
 .../utils/getSegmentStateFromRefs/index.ts    |  1 +
 .../date-picker/src/shared/utils/index.ts     |  1 +
 10 files changed, 195 insertions(+), 36 deletions(-)
 create mode 100644 packages/date-picker/src/shared/utils/getSegmentStateFromRefs/getSegmentStateFromRefs.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/getSegmentStateFromRefs/getSegmentStateFromRefs.ts
 create mode 100644 packages/date-picker/src/shared/utils/getSegmentStateFromRefs/index.ts

diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
index b06747480c..3711a9edc4 100644
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -4,6 +4,8 @@ import { StoryFn } from '@storybook/react';
 
 import Button from '@leafygreen-ui/button';
 import {
+  DateType,
+  isValidDate,
   Month,
   newUTC,
   testLocales,
@@ -92,7 +94,7 @@ const meta: StoryMetaType<typeof DatePicker, SharedDatePickerContextProps> = {
 export default meta;
 
 export const LiveExample: StoryFn<typeof DatePicker> = props => {
-  const [value, setValue] = useState<Date | null | undefined>();
+  const [value, setValue] = useState<DateType>();
 
   return (
     <DatePicker
@@ -101,7 +103,9 @@ export const LiveExample: StoryFn<typeof DatePicker> = props => {
       onDateChange={v => {
         // eslint-disable-next-line no-console
         console.log('Storybook: onDateChange', { v });
-        setValue(v);
+        if (isValidDate(v)) {
+          setValue(v);
+        }
       }}
       handleValidation={date =>
         // eslint-disable-next-line no-console
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index cde3711fa5..67f2c921e4 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   fireEvent,
+  // prettyDOM,
   render,
   waitFor,
   waitForElementToBeRemoved,
@@ -1052,6 +1053,13 @@ describe('packages/date-picker', () => {
                   ).toBeFalsy();
                 }
 
+                const errorElement = renderResult.queryByTestId(
+                  'lg-form_field-error_message',
+                );
+
+                await waitFor(() =>
+                  expect(errorElement).not.toBeInTheDocument(),
+                );
                 userEvent.tab();
               }
             });
@@ -1079,6 +1087,14 @@ describe('packages/date-picker', () => {
                   ).toBeFalsy();
                 }
 
+                const errorElement = renderResult.queryByTestId(
+                  'lg-form_field-error_message',
+                );
+
+                await waitFor(() =>
+                  expect(errorElement).not.toBeInTheDocument(),
+                );
+
                 userEvent.tab();
                 // There are side-effects triggered on CSS transition-end events.
                 // Fire this event here to ensure these side-effects don't impact Tab order
@@ -1544,18 +1560,20 @@ describe('packages/date-picker', () => {
 
                       test('error state stays after menu is closed', async () => {
                         const result = renderDatePicker({
-                          value: newUTC(2020, Month.February, 29),
+                          value: newUTC(2020, Month.January, 31),
                         });
                         const input = getRelevantInput(result);
                         userEvent.click(input);
                         userEvent.keyboard('{arrowup}');
+                        const { menuContainerEl } =
+                          await result.findMenuElements();
                         userEvent.click(result.container.parentElement!);
-                        await waitFor(() => {
-                          const errorElement = result.queryByTestId(
-                            'lg-form_field-error_message',
-                          );
-                          expect(errorElement).toBeInTheDocument();
-                        });
+
+                        await waitForElementToBeRemoved(menuContainerEl);
+                        const errorElement = result.queryByTestId(
+                          'lg-form_field-error_message',
+                        );
+                        expect(errorElement).toBeInTheDocument();
                       });
 
                       break;
@@ -1802,7 +1820,6 @@ describe('packages/date-picker', () => {
                   });
                 });
 
-                // TODO:
                 describe('if the new value would be invalid', () => {
                   // E.g. Feb 30 2020 or Feb 29 2021
                   switch (segment) {
@@ -1859,25 +1876,48 @@ describe('packages/date-picker', () => {
 
                       test('error state stays after menu is closed', async () => {
                         const result = renderDatePicker({
-                          value: newUTC(2020, Month.February, 29),
+                          value: newUTC(2020, Month.March, 31),
                         });
                         const input = getRelevantInput(result);
                         userEvent.click(input);
                         userEvent.keyboard('{arrowdown}');
+                        const { menuContainerEl } =
+                          await result.findMenuElements();
                         userEvent.click(result.container.parentElement!);
-                        await waitFor(() => {
-                          const errorElement = result.queryByTestId(
-                            'lg-form_field-error_message',
-                          );
-                          expect(errorElement).toBeInTheDocument();
-                        });
+
+                        await waitForElementToBeRemoved(menuContainerEl);
+                        const errorElement = result.queryByTestId(
+                          'lg-form_field-error_message',
+                        );
+                        expect(errorElement).toBeInTheDocument();
                       });
 
                       break;
                     }
 
                     case 'day': {
-                      // There is no case where decrementing a day results in an invalid date value
+                      test('changing date rolls over to number of days-in-month', async () => {
+                        const result = renderDatePicker({
+                          value: newUTC(2020, Month.February, 1),
+                        });
+                        const input = getRelevantInput(result);
+                        userEvent.click(input);
+                        userEvent.keyboard('{arrowdown}');
+
+                        await waitFor(() => {
+                          expect(result.yearInput).toHaveValue('2020');
+                          expect(result.monthInput).toHaveValue('02');
+                          expect(result.dayInput).toHaveValue('29');
+                          expect(result.inputContainer).toHaveAttribute(
+                            'aria-invalid',
+                            'false',
+                          );
+                          const errorElement = result.queryByTestId(
+                            'lg-form_field-error_message',
+                          );
+                          expect(errorElement).not.toBeInTheDocument();
+                        });
+                      });
                       break;
                     }
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
index 24ccae1239..47b5cb45e7 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
@@ -19,7 +19,13 @@ import {
 import { usePrevious } from '@leafygreen-ui/hooks';
 
 import { useSharedDatePickerContext } from '../../shared/context';
-import { getFormattedDateString } from '../../shared/utils';
+import {
+  doSegmentsFormValidDate,
+  getFormattedDateString,
+  getFormattedDateStringFromSegments,
+  getSegmentStateFromRefs,
+  isEverySegmentFilled,
+} from '../../shared/utils';
 import { getInitialHighlight } from '../utils/getInitialHighlight';
 
 import {
@@ -107,7 +113,7 @@ export const DatePickerProvider = ({
    * Handles internal validation,
    * and calls the provided `handleValidation` callback
    */
-  const handleValidation = (val?: DateType) => {
+  const handleValidation = (val?: DateType): void => {
     // Set an internal error state if necessary
     if (val && !isInRange(val)) {
       if (isOnOrBefore(val, min)) {
@@ -120,7 +126,25 @@ export const DatePickerProvider = ({
         );
       }
     } else {
-      clearInternalErrorMessage();
+      // Wait for the inputs to update, then check they're valid
+      setTimeout(() => {
+        const segments = getSegmentStateFromRefs(refs.segmentRefs);
+        const areAllFilled = isEverySegmentFilled(segments);
+        const areSegmentsValidDate = doSegmentsFormValidDate(segments);
+
+        // If the segments are valid, clear any error messages
+        if (areSegmentsValidDate) {
+          clearInternalErrorMessage();
+        } else if (areAllFilled) {
+          // Show an error iff areAllFilled
+          const dateString = getFormattedDateStringFromSegments(
+            segments,
+            locale,
+          );
+          // Setting the error message here is likely redundant (handled by DateInputBox)
+          setInternalErrorMessage(`${dateString} is not a valid date`);
+        }
+      });
     }
 
     _handleValidation?.(val);
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index b0bb090d07..e682bb8a16 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -197,10 +197,10 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         /**
          * Fire a simulated `change` event
          */
-        const changeEvent = new Event('change');
         const target = segmentRefs[segment].current;
 
         if (target) {
+          const changeEvent = new Event('change');
           const reactEvent = createSyntheticEvent<
             ChangeEvent<HTMLInputElement>
           >(changeEvent, target);
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index c915db5a03..8067c37d71 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -1,6 +1,8 @@
 import React, { FocusEventHandler } from 'react';
+import { getDaysInMonth } from 'date-fns';
 import isEqual from 'lodash/isEqual';
 
+import { newUTC } from '@leafygreen-ui/date-utils';
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
@@ -16,10 +18,13 @@ import {
 } from '../../../types';
 import {
   doesSomeSegmentExist,
+  doSegmentsFormValidDate,
+  getFormattedDateStringFromSegments,
   getMaxSegmentValue,
   getMinSegmentValue,
   getRelativeSegment,
   getValueFormatter,
+  isEverySegmentFilled,
   isEverySegmentValueExplicit,
   isExplicitSegmentValue,
   newDateFromSegments,
@@ -60,7 +65,15 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     }: DateInputBoxProps,
     fwdRef,
   ) => {
-    const { formatParts, disabled, min, max } = useSharedDatePickerContext();
+    const {
+      formatParts,
+      disabled,
+      min,
+      max,
+      locale,
+      setIsDirty,
+      setInternalErrorMessage,
+    } = useSharedDatePickerContext();
     const { theme } = useDarkMode();
 
     const containerRef = useForwardedRef(fwdRef, null);
@@ -87,16 +100,30 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
       const hasAnySegmentChanged = !isEqual(newSegments, prevSegments);
 
       if (hasAnySegmentChanged) {
-        const areAllSegmentsEmpty = !doesSomeSegmentExist(newSegments);
-        const areAllExplicit = isEverySegmentValueExplicit(newSegments);
-        const utcDate = newDateFromSegments(newSegments);
+        const areAllEmpty = !doesSomeSegmentExist(newSegments);
+        const areAllFilled = isEverySegmentFilled(newSegments);
 
-        if (areAllSegmentsEmpty) {
-          // otherwise, if no segment exists, set the external value to null
+        if (areAllEmpty) {
+          // if no segment exists, set the external value to null
           setValue?.(null);
-        } else if (areAllExplicit && !!utcDate) {
-          // Update the value iff all segments create a valid date.
-          setValue?.(utcDate);
+        } else if (areAllFilled) {
+          const areAllExplicit = isEverySegmentValueExplicit(newSegments);
+          const utcDate = newDateFromSegments(newSegments);
+          const isValidDate = doSegmentsFormValidDate(newSegments);
+
+          if (areAllExplicit && !!utcDate) {
+            // Update the value iff all segments create a valid date.
+            setValue?.(utcDate);
+          } else if (!isValidDate) {
+            const dateString = getFormattedDateStringFromSegments(
+              newSegments,
+              locale,
+            );
+            // This error state will be removed by `handleValidation` once a value is set
+            setInternalErrorMessage(`${dateString} is not a valid date`);
+          }
+          // If all values are filled, set the input as dirty
+          setIsDirty(true);
         }
       }
     };
@@ -114,14 +141,30 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
         const changedViaArrowKeys =
           meta?.key === keyMap.ArrowDown || meta?.key === keyMap.ArrowUp;
 
-        // Auto-format the segment
+        // If we've updated the "day" segment via arrow keys,
+        // we can update it's rollover behavior based on the month
+        if (changedViaArrowKeys && segmentName === 'day') {
+          const year = Number(segments['year']);
+          const month = Number(segments['month']);
+          const daysInMonth = getDaysInMonth(newUTC(year, month, 1));
+
+          if (Number(segmentValue) > daysInMonth) {
+            if (meta?.key === keyMap.ArrowDown) {
+              segmentValue = String(daysInMonth);
+            } else if (meta?.key === keyMap.ArrowUp) {
+              segmentValue = '01';
+            }
+          }
+        }
+
+        // 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
+          // Auto-advance focus (if possible)
           const nextSegmentName = getRelativeSegment('next', {
             segment: segmentName,
             formatParts,
diff --git a/packages/date-picker/src/shared/context/SharedDatePickerContext.tsx b/packages/date-picker/src/shared/context/SharedDatePickerContext.tsx
index eceba0ca40..a9c38ac2f6 100644
--- a/packages/date-picker/src/shared/context/SharedDatePickerContext.tsx
+++ b/packages/date-picker/src/shared/context/SharedDatePickerContext.tsx
@@ -19,9 +19,6 @@ import { useDatePickerErrorNotifications } from './useDatePickerErrorNotificatio
 export const SharedDatePickerContext =
   createContext<SharedDatePickerContextProps>(defaultSharedDatePickerContext);
 
-// TODO: Consider renaming this to `SharedDatePickerContext`,
-// and use `SharedDatePickerContext` for what's currently `DatePickerContext`
-
 /** The Provider component for SharedDatePickerContext */
 export const SharedDatePickerProvider = ({
   children,
diff --git a/packages/date-picker/src/shared/utils/getSegmentStateFromRefs/getSegmentStateFromRefs.spec.ts b/packages/date-picker/src/shared/utils/getSegmentStateFromRefs/getSegmentStateFromRefs.spec.ts
new file mode 100644
index 0000000000..0f114a1bf7
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getSegmentStateFromRefs/getSegmentStateFromRefs.spec.ts
@@ -0,0 +1,34 @@
+import { SegmentRefs } from '../../hooks';
+import { segmentRefsMock } from '../../testutils';
+
+import { getSegmentStateFromRefs } from '.';
+
+describe('packages/date-picker/utils/getSegmentStateFromRefs', () => {
+  test('empty refs', () => {
+    expect(getSegmentStateFromRefs(segmentRefsMock)).toEqual({
+      day: '',
+      month: '',
+      year: '',
+    });
+  });
+
+  test('Refs with values', () => {
+    const refs: SegmentRefs = { ...segmentRefsMock };
+    // @ts-expect-error - current is read-only
+    refs.day.current = document.createElement('input');
+    // @ts-expect-error - current is read-only
+    refs.month.current = document.createElement('input');
+    // @ts-expect-error - current is read-only
+    refs.year.current = document.createElement('input');
+
+    refs.day.current.value = '02';
+    refs.month.current.value = '02';
+    refs.year.current.value = '2020';
+
+    expect(getSegmentStateFromRefs(refs)).toEqual({
+      day: '02',
+      month: '02',
+      year: '2020',
+    });
+  });
+});
diff --git a/packages/date-picker/src/shared/utils/getSegmentStateFromRefs/getSegmentStateFromRefs.ts b/packages/date-picker/src/shared/utils/getSegmentStateFromRefs/getSegmentStateFromRefs.ts
new file mode 100644
index 0000000000..d8becca997
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getSegmentStateFromRefs/getSegmentStateFromRefs.ts
@@ -0,0 +1,15 @@
+import { SegmentRefs } from '../../hooks';
+import { DateSegmentsState } from '../../types';
+
+/**
+ * Returns a {@link DateSegmentsState} object given a {@link SegmentRefs} Ref object
+ */
+export const getSegmentStateFromRefs = (
+  refs: SegmentRefs,
+): DateSegmentsState => {
+  return {
+    day: refs.day.current?.value ?? '',
+    month: refs.month.current?.value ?? '',
+    year: refs.year.current?.value ?? '',
+  };
+};
diff --git a/packages/date-picker/src/shared/utils/getSegmentStateFromRefs/index.ts b/packages/date-picker/src/shared/utils/getSegmentStateFromRefs/index.ts
new file mode 100644
index 0000000000..0d0ea88407
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getSegmentStateFromRefs/index.ts
@@ -0,0 +1 @@
+export { getSegmentStateFromRefs } from './getSegmentStateFromRefs';
diff --git a/packages/date-picker/src/shared/utils/index.ts b/packages/date-picker/src/shared/utils/index.ts
index f31a0841ec..354af9cf99 100644
--- a/packages/date-picker/src/shared/utils/index.ts
+++ b/packages/date-picker/src/shared/utils/index.ts
@@ -19,6 +19,7 @@ export {
   getFormattedSegmentsFromDate,
   getSegmentsFromDate,
 } from './getSegmentsFromDate';
+export { getSegmentStateFromRefs } from './getSegmentStateFromRefs';
 export { getValueFormatter } from './getValueFormatter';
 export { isElementInputSegment } from './isElementInputSegment';
 export { isEverySegmentFilled } from './isEverySegmentFilled';

From 8ad30637c84d42cf846542363083e1712e0a16a0 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Wed, 20 Dec 2023 15:12:50 -0500
Subject: [PATCH 338/351] Date Picker [LG-3899] arrow key errors (#2144)

* removes interaction tests from Menu

* Moves interaction tests to DatePicker.spec

* moves arrow key tests from Input to DatePicker

* Update DatePicker.spec.tsx

* adds test for typing an invalid date

* Update DatePicker.spec.tsx

* test up/down input arrow keys on each segment

* fix year rollover tests

* queryByTestId

* Add tests for arrow up/down errors

* adds utils

* adds error state persistence tests

From e7f66529b69146f7da09f61399a0365ff6ad8f0e Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Wed, 20 Dec 2023 17:26:40 -0500
Subject: [PATCH 339/351] Date picker [LG-3912] Test for invalid dates (#2146)

* add component tests for invalid date

* move types

* creates InvalidDate

* update isValidDate

* update checks in getISODateTZ & getISODate

* update stories TS

* updates getSegmentsFromDate

* add test to ensure mocked dates are valid

* updates some utils to accept DateType as param

* update sameDay check in useDateSegment

* updates Context

* Update DatePickerInput.tsx

* fixes menu TS

* updates & tests useDateSegments

* Add re-render tests to DateInputBox

* Adds DateInputBox test for invalid date

* adds invalidDate tests for DatePicker

* update builds
---
 packages/date-picker/package.json             |   1 -
 .../date-picker/src/DatePicker.stories.tsx    |   2 +-
 .../src/DatePicker/DatePicker.spec.tsx        | 125 +++++++++--
 .../DatePickerContext/DatePickerContext.tsx   |  21 +-
 .../DatePickerContext.types.ts                |   4 +-
 .../DatePickerInput/DatePickerInput.tsx       |   4 +-
 .../DatePickerMenu/DatePickerMenu.stories.tsx |   5 +-
 .../DatePickerMenu/DatePickerMenu.tsx         |  12 +-
 .../DateInputBox/DateInputBox.spec.tsx        | 127 +++++++++--
 .../DateInputBox/DateInputBox.stories.tsx     |  17 +-
 .../context/SharedDatePickerContext.types.ts  |  11 +-
 .../context/SharedDatePickerContext.utils.ts  |  11 +-
 .../useDateSegments/useDateSegments.spec.ts   | 201 ++++++++++++++++++
 .../hooks/useDateSegments/useDateSegments.ts  |  14 +-
 .../getFormattedSegmentsFromDate.ts           |  19 ++
 .../getSegmentsFromDate.spec.ts               |  43 +++-
 .../getSegmentsFromDate.ts                    |  12 ++
 .../shared/utils/getSegmentsFromDate/index.ts |  26 +--
 .../date-utils/src/getISODate/getISODate.ts   |   2 +-
 .../src/getISODateTZ/getISODateTZ.ts          |   3 +-
 .../isCurrentUTCDay/isCurrentUTCDay.spec.ts   |   9 +-
 .../src/isCurrentUTCDay/isCurrentUTCDay.ts    |   3 +-
 .../src/isOnOrAfter/isOnOrAfter.spec.ts       |   6 +
 .../date-utils/src/isOnOrAfter/isOnOrAfter.ts |  10 +-
 .../src/isOnOrBefore/isOnOrBefore.spec.ts     |   6 +
 .../src/isOnOrBefore/isOnOrBefore.ts          |  10 +-
 .../src/isSameUTCDay/isSameUTCDay.spec.ts     |  13 +-
 .../src/isSameUTCDay/isSameUTCDay.ts          |  10 +-
 .../src/isSameUTCMonth/isSameUTCMonth.spec.ts |  16 +-
 .../src/isSameUTCMonth/isSameUTCMonth.ts      |  10 +-
 .../src/isSameUTCRange/isSameUTCRange.ts      |   5 +-
 packages/date-utils/src/isValidDate/index.ts  |   6 +-
 .../src/isValidDate/isValidDate.spec.ts       |  40 ++--
 .../date-utils/src/isValidDate/isValidDate.ts |  40 ++--
 packages/date-utils/src/toDate/toDate.ts      |   4 +-
 packages/date-utils/src/types/InvalidDate.ts  |  52 +++++
 .../src/{types.ts => types/index.ts}          |   3 +-
 37 files changed, 726 insertions(+), 177 deletions(-)
 create mode 100644 packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.spec.ts
 create mode 100644 packages/date-picker/src/shared/utils/getSegmentsFromDate/getFormattedSegmentsFromDate.ts
 create mode 100644 packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.ts
 create mode 100644 packages/date-utils/src/types/InvalidDate.ts
 rename packages/date-utils/src/{types.ts => types/index.ts} (88%)

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index 6675699eae..b53935c609 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -42,7 +42,6 @@
     "@leafygreen-ui/testing-lib": "^0.3.4",
     "mockdate": "^3.0.5",
     "storybook-mock-date-decorator": "^1.0.1",
-    "timezone-mock": "^1.3.6",
     "@jest/globals": "^29.6.2"
   },
   "resolutions": {
diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
index 3711a9edc4..06d7e01533 100644
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -125,7 +125,7 @@ Uncontrolled.parameters = {
 };
 
 export const InModal: StoryFn<typeof DatePicker> = props => {
-  const [value, setValue] = useState<Date | null | undefined>();
+  const [value, setValue] = useState<DateType>();
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 67f2c921e4..a13deb026d 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -77,6 +77,18 @@ describe('packages/date-picker', () => {
         expect(label).toBeInTheDocument();
       });
 
+      test('warn when no labels are passed in', () => {
+        const consoleSpy = jest
+          .spyOn(console, 'warn')
+          .mockImplementation(() => {});
+
+        /* @ts-expect-error - needs label/aria-label/aria-labelledby */
+        render(<DatePicker />);
+        expect(consoleSpy).toHaveBeenCalledWith(
+          'For screen-reader accessibility, label, aria-labelledby, or aria-label must be provided to DatePicker component',
+        );
+      });
+
       test('renders description', () => {
         const { getByText } = render(
           <DatePicker label="Label" description="Description" />,
@@ -148,34 +160,101 @@ describe('packages/date-picker', () => {
         expect(yearInput).toBeInTheDocument();
       });
 
-      test('renders `value` prop', () => {
-        const { dayInput, monthInput, yearInput } = renderDatePicker({
-          value: newUTC(2023, Month.December, 25),
+      describe('rendering values', () => {
+        test('renders `value` prop', () => {
+          const { dayInput, monthInput, yearInput } = renderDatePicker({
+            value: newUTC(2023, Month.December, 25),
+          });
+          expect(dayInput.value).toEqual('25');
+          expect(monthInput.value).toEqual('12');
+          expect(yearInput.value).toEqual('2023');
         });
-        expect(dayInput.value).toEqual('25');
-        expect(monthInput.value).toEqual('12');
-        expect(yearInput.value).toEqual('2023');
-      });
 
-      test('renders `initialValue` prop', () => {
-        const { dayInput, monthInput, yearInput } = renderDatePicker({
-          initialValue: newUTC(2023, Month.December, 25),
+        test('renders `initialValue` prop', () => {
+          const { dayInput, monthInput, yearInput } = renderDatePicker({
+            initialValue: newUTC(2023, Month.December, 25),
+          });
+          expect(dayInput.value).toEqual('25');
+          expect(monthInput.value).toEqual('12');
+          expect(yearInput.value).toEqual('2023');
         });
-        expect(dayInput.value).toEqual('25');
-        expect(monthInput.value).toEqual('12');
-        expect(yearInput.value).toEqual('2023');
-      });
 
-      test('console warning when no labels are passed in', () => {
-        const consoleSpy = jest
-          .spyOn(console, 'warn')
-          .mockImplementation(() => {});
+        test('renders nothing when  `value` is null', () => {
+          const { dayInput, monthInput, yearInput } = renderDatePicker({
+            value: null,
+          });
+          expect(dayInput.value).toEqual('');
+          expect(monthInput.value).toEqual('');
+          expect(yearInput.value).toEqual('');
+        });
 
-        /* @ts-expect-error - needs label/aria-label/aria-labelledby */
-        render(<DatePicker />);
-        expect(consoleSpy).toHaveBeenCalledWith(
-          'For screen-reader accessibility, label, aria-labelledby, or aria-label must be provided to DatePicker component',
-        );
+        test('renders nothing when `initialValue` is null', () => {
+          const { dayInput, monthInput, yearInput } = renderDatePicker({
+            initialValue: null,
+          });
+          expect(dayInput.value).toEqual('');
+          expect(monthInput.value).toEqual('');
+          expect(yearInput.value).toEqual('');
+        });
+
+        test('renders nothing when  `value` is an invalid date', () => {
+          const { dayInput, monthInput, yearInput } = renderDatePicker({
+            value: new Date('invalid'),
+          });
+          expect(dayInput.value).toEqual('');
+          expect(monthInput.value).toEqual('');
+          expect(yearInput.value).toEqual('');
+        });
+
+        test('renders nothing when `initialValue` is an invalid date', () => {
+          const { dayInput, monthInput, yearInput } = renderDatePicker({
+            initialValue: new Date('invalid'),
+          });
+          expect(dayInput.value).toEqual('');
+          expect(monthInput.value).toEqual('');
+          expect(yearInput.value).toEqual('');
+        });
+
+        describe('re-rendering with a new value', () => {
+          test('updates inputs with new valid value', () => {
+            const { dayInput, monthInput, yearInput, rerenderDatePicker } =
+              renderDatePicker({
+                value: newUTC(2023, Month.December, 25),
+              });
+
+            rerenderDatePicker({ value: newUTC(2024, Month.September, 10) });
+
+            expect(dayInput.value).toEqual('10');
+            expect(monthInput.value).toEqual('09');
+            expect(yearInput.value).toEqual('2024');
+          });
+
+          test('clears inputs when value is `null`', () => {
+            const { dayInput, monthInput, yearInput, rerenderDatePicker } =
+              renderDatePicker({
+                value: newUTC(2023, Month.December, 25),
+              });
+
+            rerenderDatePicker({ value: null });
+
+            expect(dayInput.value).toEqual('');
+            expect(monthInput.value).toEqual('');
+            expect(yearInput.value).toEqual('');
+          });
+
+          test('renders previous input if value is invalid', () => {
+            const { dayInput, monthInput, yearInput, rerenderDatePicker } =
+              renderDatePicker({
+                value: newUTC(2023, Month.December, 25),
+              });
+
+            rerenderDatePicker({ value: new Date('invalid') });
+
+            expect(dayInput.value).toEqual('25');
+            expect(monthInput.value).toEqual('12');
+            expect(yearInput.value).toEqual('2023');
+          });
+        });
       });
 
       describe('Error states', () => {
diff --git a/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
index 47b5cb45e7..5028c07dfb 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
@@ -15,6 +15,7 @@ import {
   getISODate,
   isOnOrBefore,
   isSameUTCDay,
+  isValidDate,
 } from '@leafygreen-ui/date-utils';
 import { usePrevious } from '@leafygreen-ui/hooks';
 
@@ -71,15 +72,21 @@ export const DatePickerProvider = ({
     [hour],
   );
 
+  /** Internal callback to get a valid `month` from a given date value */
+  const getMonthFromValue = useCallback(
+    (val?: DateType) => getFirstOfUTCMonth(isValidDate(val) ? val : today),
+    [today],
+  );
+
   /**
    * Keep track of the displayed month
    */
-  const [month, _setMonth] = useState<Date>(getFirstOfUTCMonth(value ?? today));
+  const [month, _setMonth] = useState<Date>(getMonthFromValue(value));
 
   /**
    * Keep track of the element the user is highlighting with the keyboard
    */
-  const [highlight, _setHighlight] = useState<DateType>(
+  const [highlight, _setHighlight] = useState<Date>(
     getInitialHighlight(value, today, timeZone),
   );
 
@@ -92,7 +99,7 @@ export const DatePickerProvider = ({
    */
   const setValue = (newVal?: DateType) => {
     _setValue(newVal ?? null);
-    setMonth(getFirstOfUTCMonth(newVal ?? today));
+    setMonth(getMonthFromValue(newVal));
   };
 
   /**
@@ -105,7 +112,7 @@ export const DatePickerProvider = ({
   /**
    * Set the `highlight` value & handle side effects
    */
-  const setHighlight = useCallback((newHighlight: DateType) => {
+  const setHighlight = useCallback((newHighlight: Date) => {
     _setHighlight(newHighlight);
   }, []);
 
@@ -175,7 +182,7 @@ export const DatePickerProvider = ({
         refs.calendarButtonRef.current?.focus();
       }
       // update month to something valid
-      setMonth(getFirstOfUTCMonth(value ?? today));
+      setMonth(getMonthFromValue(value));
       // update highlight to something valid
       setHighlight(getInitialHighlight(value, today, timeZone));
     });
@@ -225,9 +232,9 @@ export const DatePickerProvider = ({
    */
   useEffect(() => {
     if (!isSameUTCDay(value, prevValue)) {
-      setMonth(getFirstOfUTCMonth(value ?? today));
+      setMonth(getMonthFromValue(value));
     }
-  }, [prevValue, setMonth, today, value]);
+  }, [getMonthFromValue, prevValue, setMonth, today, value]);
 
   return (
     <DatePickerContext.Provider
diff --git a/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.types.ts b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.types.ts
index dd09c847d2..30c412685e 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.types.ts
@@ -56,13 +56,13 @@ export interface DatePickerContextProps {
   /**
    * The Date value for the calendar cell in the menu that has, or should have focus.
    */
-  highlight: DateType;
+  highlight: Date;
 
   /**
    * Sets the value of the calendar cell that should have focus,
    * and performs any side-effects
    */
-  setHighlight: (newHighlight: DateType) => void;
+  setHighlight: (newHighlight: Date) => void;
 
   /**
    * Opens the menu and handles side effects
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index e682bb8a16..9d2b71fd4e 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -6,7 +6,7 @@ import React, {
   MouseEventHandler,
 } from 'react';
 
-import { isSameUTCDay } from '@leafygreen-ui/date-utils';
+import { DateType, isSameUTCDay } from '@leafygreen-ui/date-utils';
 import { createSyntheticEvent, keyMap } from '@leafygreen-ui/lib';
 
 import { DateFormField, DateInputBox } from '../../shared/components/DateInput';
@@ -43,7 +43,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     } = useDatePickerContext();
 
     /** Called when the input's Date value has changed */
-    const handleInputValueChange = (inputVal?: Date | null) => {
+    const handleInputValueChange = (inputVal?: DateType) => {
       if (!isSameUTCDay(inputVal, value)) {
         handleValidation?.(inputVal);
         setValue(inputVal || null);
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
index 6bfd0212e9..04dfec8fa6 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx
@@ -6,6 +6,7 @@ import { last, omit } from 'lodash';
 import MockDate from 'mockdate';
 
 import {
+  DateType,
   Month,
   newUTC,
   testLocales,
@@ -80,7 +81,7 @@ type DatePickerMenuStoryType = StoryObj<typeof DatePickerMenu>;
 export const Basic: DatePickerMenuStoryType = {
   render: args => {
     MockDate.reset();
-    const [value, setValue] = useState<Date | null>(null);
+    const [value, setValue] = useState<DateType>(null);
 
     const date = new Date(Date.now());
     const props = omit(args, [...contextPropNames, 'isOpen']);
@@ -151,7 +152,7 @@ export const MockedToday: DatePickerMenuStoryType = {
   render: args => {
     // Force `new Date()` to return `mockToday`
     MockDate.set(mockToday);
-    const [value, setValue] = useState<Date | null>(null);
+    const [value, setValue] = useState<DateType>(null);
 
     const props = omit(args, [...contextPropNames, 'isOpen']);
     const refEl = useRef<HTMLDivElement>(null);
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index 744ed4a530..4537871f66 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -16,6 +16,7 @@ import {
   isSameTZDay,
   isSameUTCDay,
   isSameUTCMonth,
+  isValidDate,
 } from '@leafygreen-ui/date-utils';
 import { useForwardedRef, usePrevious } from '@leafygreen-ui/hooks';
 import { keyMap } from '@leafygreen-ui/lib';
@@ -119,7 +120,11 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
 
     /** Set the highlighted cell when the value changes in the input */
     useEffect(() => {
-      if (value && !isSameUTCDay(value, prevValue) && isInRange(value)) {
+      if (
+        isValidDate(value) &&
+        !isSameUTCDay(value, prevValue) &&
+        isInRange(value)
+      ) {
         setHighlight(value);
       }
     }, [value, isInRange, setHighlight, prevValue]);
@@ -129,7 +134,7 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
      */
     useEffect(() => {
       if (
-        value &&
+        isValidDate(value) &&
         !isSameUTCDay(value, prevValue) &&
         !isSameUTCMonth(value, month)
       ) {
@@ -243,7 +248,8 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
     const handleCalendarKeyDown: KeyboardEventHandler<HTMLTableElement> = e => {
       const { key } = e;
 
-      const currentHighlight = highlight || value || today;
+      const currentHighlight =
+        highlight || (isValidDate(value) ? value : today);
       let nextHighlight = currentHighlight;
 
       switch (key) {
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
index 94dfe8c27d..8e16735c09 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -20,15 +20,24 @@ const renderDateInputBox = (
   context?: Partial<SharedDatePickerProviderProps>,
 ) => {
   const result = render(
-    <SharedDatePickerProvider {...defaultSharedDatePickerContext} {...context}>
-      <DateInputBox
-        {...props}
-        value={props?.value ?? null}
-        segmentRefs={segmentRefsMock}
-      />
+    <SharedDatePickerProvider label="label" {...context}>
+      <DateInputBox {...props} segmentRefs={segmentRefsMock} />
     </SharedDatePickerProvider>,
   );
 
+  const rerenderDateInputBox = (
+    newProps?: Omit<DateInputBoxProps, 'segmentRefs'>,
+  ) => {
+    result.rerender(
+      <SharedDatePickerProvider
+        {...defaultSharedDatePickerContext}
+        {...context}
+      >
+        <DateInputBox {...props} {...newProps} segmentRefs={segmentRefsMock} />
+      </SharedDatePickerProvider>,
+    );
+  };
+
   const dayInput = result.container.querySelector(
     'input[aria-label="day"]',
   ) as HTMLInputElement;
@@ -43,7 +52,7 @@ const renderDateInputBox = (
     throw new Error('Some or all input segments are missing');
   }
 
-  return { ...result, dayInput, monthInput, yearInput };
+  return { ...result, rerenderDateInputBox, dayInput, monthInput, yearInput };
 };
 
 describe('packages/date-picker/shared/date-input-box', () => {
@@ -95,7 +104,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
       });
     });
 
-    test('renders an empty text box when no value is passed', () => {
+    test('renders empty segments when no props are passed', () => {
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
         undefined,
         testContext,
@@ -105,7 +114,17 @@ describe('packages/date-picker/shared/date-input-box', () => {
       expect(yearInput).toHaveValue('');
     });
 
-    test('renders a filled text box when value is passed', () => {
+    test('renders empty segments when value is null', () => {
+      const { dayInput, monthInput, yearInput } = renderDateInputBox(
+        { value: null },
+        testContext,
+      );
+      expect(dayInput).toHaveValue('');
+      expect(monthInput).toHaveValue('');
+      expect(yearInput).toHaveValue('');
+    });
+
+    test('renders filled segments when a value is passed', () => {
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
         { value: newUTC(1993, Month.December, 26) },
         testContext,
@@ -115,6 +134,61 @@ describe('packages/date-picker/shared/date-input-box', () => {
       expect(monthInput.value).toBe('12');
       expect(yearInput.value).toBe('1993');
     });
+
+    test('renders empty segments when an invalid value is passed', () => {
+      const { dayInput, monthInput, yearInput } = renderDateInputBox(
+        { value: new Date('invalid') },
+        testContext,
+      );
+
+      expect(dayInput.value).toBe('');
+      expect(monthInput.value).toBe('');
+      expect(yearInput.value).toBe('');
+    });
+
+    describe('re-rendering', () => {
+      test('with new value updates the segments', () => {
+        const { rerenderDateInputBox, dayInput, monthInput, yearInput } =
+          renderDateInputBox(
+            { value: newUTC(1993, Month.December, 26) },
+            testContext,
+          );
+
+        rerenderDateInputBox({ value: newUTC(1994, Month.September, 10) });
+
+        expect(dayInput.value).toBe('10');
+        expect(monthInput.value).toBe('09');
+        expect(yearInput.value).toBe('1994');
+      });
+
+      test('with null clears the segments', () => {
+        const { rerenderDateInputBox, dayInput, monthInput, yearInput } =
+          renderDateInputBox(
+            { value: newUTC(1993, Month.December, 26) },
+            testContext,
+          );
+
+        rerenderDateInputBox({ value: null });
+
+        expect(dayInput.value).toBe('');
+        expect(monthInput.value).toBe('');
+        expect(yearInput.value).toBe('');
+      });
+
+      test('with invalid value does not update the segments', () => {
+        const { rerenderDateInputBox, dayInput, monthInput, yearInput } =
+          renderDateInputBox(
+            { value: newUTC(1993, Month.December, 26) },
+            testContext,
+          );
+
+        rerenderDateInputBox({ value: new Date('invalid') });
+
+        expect(dayInput.value).toBe('26');
+        expect(monthInput.value).toBe('12');
+        expect(yearInput.value).toBe('1993');
+      });
+    });
   });
 
   describe('Typing', () => {
@@ -137,7 +211,7 @@ describe('packages/date-picker/shared/date-input-box', () => {
       expect(dayInput.value).toBe('02');
     });
 
-    test('deleting characters works as expected', () => {
+    test('backspace deletes characters', () => {
       const { dayInput, yearInput } = renderDateInputBox(
         { value: newUTC(1993, Month.December, 26) },
         testContext,
@@ -148,7 +222,22 @@ describe('packages/date-picker/shared/date-input-box', () => {
       expect(yearInput.value).toBe('199');
     });
 
-    test('typing into a segment does not immediately fire the value setter', () => {
+    test('segment change handler is called when typing into a segment', () => {
+      const { yearInput } = renderDateInputBox(
+        {
+          value: null,
+          onSegmentChange,
+        },
+        testContext,
+      );
+      userEvent.type(yearInput, '1993');
+
+      expect(onSegmentChange).toHaveBeenCalledWith(
+        expect.objectContaining({ value: '1993' }),
+      );
+    });
+
+    test('value setter is not called when typing into a segment', () => {
       const setValue = jest.fn();
       const { dayInput } = renderDateInputBox(
         {
@@ -162,22 +251,22 @@ describe('packages/date-picker/shared/date-input-box', () => {
       expect(setValue).not.toHaveBeenCalled();
     });
 
-    test('typing into a segment fires the segment change handler', () => {
-      const { yearInput } = renderDateInputBox(
+    test('value setter is not called when an ambiguous date is entered', () => {
+      const setValue = jest.fn();
+      const { dayInput, monthInput, yearInput } = renderDateInputBox(
         {
           value: null,
-          onSegmentChange,
+          setValue,
         },
         testContext,
       );
       userEvent.type(yearInput, '1993');
-
-      expect(onSegmentChange).toHaveBeenCalledWith(
-        expect.objectContaining({ value: '1993' }),
-      );
+      userEvent.type(monthInput, '12');
+      userEvent.type(dayInput, '2');
+      expect(setValue).not.toHaveBeenCalled();
     });
 
-    test('value setter is called when a complete date is entered', () => {
+    test('value setter is only called when an explicit date is entered', () => {
       const setValue = jest.fn();
       const { dayInput, monthInput, yearInput } = renderDateInputBox(
         {
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
index 1f084f8435..adf60460b5 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -1,9 +1,14 @@
 /* eslint-disable react/prop-types */
 import React, { useEffect, useState } from 'react';
 import { StoryFn } from '@storybook/react';
-import { isValid } from 'date-fns';
 
-import { Month, newUTC, testLocales } from '@leafygreen-ui/date-utils';
+import {
+  DateType,
+  isValidDate,
+  Month,
+  newUTC,
+  testLocales,
+} from '@leafygreen-ui/date-utils';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType, StoryType } from '@leafygreen-ui/lib';
 
@@ -65,15 +70,15 @@ const meta: StoryMetaType<typeof DateInputBox, SharedDatePickerContextProps> = {
 export default meta;
 
 export const Basic: StoryFn<typeof DateInputBox> = props => {
-  const [date, setDate] = useState<Date | null>(null);
+  const [date, setDate] = useState<DateType>(null);
 
   useEffect(() => {
-    if (props.value && isValid(new Date(props.value))) {
-      setDate(new Date(props.value));
+    if (props.value && isValidDate(props.value)) {
+      setDate(props.value);
     }
   }, [props.value]);
 
-  const updateDate = (date: Date | null) => {
+  const updateDate = (date: DateType) => {
     setDate(date);
   };
 
diff --git a/packages/date-picker/src/shared/context/SharedDatePickerContext.types.ts b/packages/date-picker/src/shared/context/SharedDatePickerContext.types.ts
index 7a1b8772de..0581d08379 100644
--- a/packages/date-picker/src/shared/context/SharedDatePickerContext.types.ts
+++ b/packages/date-picker/src/shared/context/SharedDatePickerContext.types.ts
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 
 import { AriaLabelPropsWithLabel } from '@leafygreen-ui/a11y';
+import { DateType } from '@leafygreen-ui/date-utils';
 
 import { BaseDatePickerProps, DatePickerState } from '../types';
 
@@ -10,19 +11,19 @@ export interface StateNotification {
   state: DatePickerState;
   message: string;
 }
-type AriaLabelkeys = keyof AriaLabelPropsWithLabel;
+type AriaLabelKeys = keyof AriaLabelPropsWithLabel;
 
 /** The props expected to pass int the provider */
 export type SharedDatePickerProviderProps = Omit<
   BaseDatePickerProps,
-  AriaLabelkeys
+  AriaLabelKeys
 > & {
   label?: ReactNode;
   'aria-label'?: string;
   'aria-labelledby'?: string;
 };
 
-type AriaLabelkeysWithoutLabel = Exclude<AriaLabelkeys, 'label'>;
+type AriaLabelKeysWithoutLabel = Exclude<AriaLabelKeys, 'label'>;
 
 /**
  * The values in context
@@ -30,7 +31,7 @@ type AriaLabelkeysWithoutLabel = Exclude<AriaLabelkeys, 'label'>;
 export interface SharedDatePickerContextProps
   extends Omit<
       Required<SharedDatePickerProviderProps>,
-      'state' | AriaLabelkeysWithoutLabel
+      'state' | AriaLabelKeysWithoutLabel
     >,
     UseDatePickerErrorNotificationsReturnObject {
   /** The earliest date accepted */
@@ -42,7 +43,7 @@ export interface SharedDatePickerContextProps
   /**
    * Returns whether the given date is within the component's min/max dates
    */
-  isInRange: (d?: Date | null) => boolean;
+  isInRange: (d?: DateType) => boolean;
 
   /**
    * An array of {@link Intl.DateTimeFormatPart},
diff --git a/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts b/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
index f762191fdc..e7d4981ae5 100644
--- a/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
@@ -2,7 +2,12 @@ import { isBefore, isWithinInterval } from 'date-fns';
 import defaults from 'lodash/defaults';
 import defaultTo from 'lodash/defaultTo';
 
-import { getISODate, toDate } from '@leafygreen-ui/date-utils';
+import {
+  DateType,
+  getISODate,
+  isValidDate,
+  toDate,
+} from '@leafygreen-ui/date-utils';
 import { consoleOnce } from '@leafygreen-ui/lib';
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
@@ -79,9 +84,9 @@ export const defaultSharedDatePickerContext: SharedDatePickerContextProps = {
  */
 export const getIsInRange =
   (min: Date, max: Date) =>
-  (d?: Date | null): boolean =>
+  (d?: DateType): boolean =>
     !!(
-      d &&
+      isValidDate(d) &&
       isWithinInterval(d, {
         start: min,
         end: max,
diff --git a/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.spec.ts b/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.spec.ts
new file mode 100644
index 0000000000..7a4c2e6d25
--- /dev/null
+++ b/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.spec.ts
@@ -0,0 +1,201 @@
+import { renderHook } from '@testing-library/react';
+
+import { DateType, Month, newUTC } from '@leafygreen-ui/date-utils';
+
+import { useDateSegments } from './useDateSegments';
+import { OnUpdateCallback } from './useDateSegments.types';
+
+const renderUseDateSegmentsHook = (
+  initialDate: DateType,
+  callback?: OnUpdateCallback,
+) => {
+  return renderHook(
+    props => useDateSegments(props.date, { onUpdate: props.callback }),
+    {
+      initialProps: {
+        date: initialDate,
+        callback,
+      },
+    },
+  );
+};
+
+describe('packages/date-picker/shared/useDateSegments', () => {
+  describe('initial render', () => {
+    test('returns segments object and setter function', () => {
+      const testDate = newUTC(2023, Month.December, 26);
+      const callback = jest.fn();
+      const { result } = renderUseDateSegmentsHook(testDate, callback);
+
+      const { segments, setSegment } = result.current;
+
+      expect(segments).toBeDefined();
+      expect(setSegment).toBeDefined();
+      expect(segments.day).toEqual('26');
+      expect(segments.month).toEqual('12');
+      expect(segments.year).toEqual('2023');
+    });
+
+    test('returns empty segments when date is null', () => {
+      const callback = jest.fn();
+      const { result } = renderUseDateSegmentsHook(null, callback);
+
+      const { segments, setSegment } = result.current;
+
+      expect(segments).toBeDefined();
+      expect(setSegment).toBeDefined();
+      expect(segments.day).toEqual('');
+      expect(segments.month).toEqual('');
+      expect(segments.year).toEqual('');
+    });
+
+    test('returns empty segments when date is invalid', () => {
+      const invalidDate = new Date('invalid');
+
+      const callback = jest.fn();
+      const { result } = renderUseDateSegmentsHook(invalidDate, callback);
+
+      const { segments, setSegment } = result.current;
+
+      expect(segments).toBeDefined();
+      expect(setSegment).toBeDefined();
+      expect(segments.day).toEqual('');
+      expect(segments.month).toEqual('');
+      expect(segments.year).toEqual('');
+    });
+  });
+
+  describe('re-rendering', () => {
+    describe('with a valid value', () => {
+      test('calls callback with new segments', () => {
+        const testDate = newUTC(2023, Month.December, 26);
+        const callback = jest.fn();
+        const { rerender } = renderUseDateSegmentsHook(testDate, callback);
+
+        rerender({ date: newUTC(2024, Month.September, 10), callback });
+
+        expect(callback).toHaveBeenCalledWith(
+          expect.objectContaining({
+            day: '10',
+            month: '09',
+            year: '2024',
+          }),
+          expect.objectContaining({
+            day: '26',
+            month: '12',
+            year: '2023',
+          }),
+        );
+      });
+      test('returns new segments', () => {
+        const testDate = newUTC(2023, Month.December, 26);
+        const callback = jest.fn();
+        const { rerender, result } = renderUseDateSegmentsHook(
+          testDate,
+          callback,
+        );
+
+        rerender({ date: newUTC(2024, Month.September, 10), callback });
+        expect(result.current.segments.day).toEqual('10');
+        expect(result.current.segments.month).toEqual('09');
+        expect(result.current.segments.year).toEqual('2024');
+      });
+    });
+
+    describe('with a null value', () => {
+      test('calls callback with empty segments', () => {
+        const testDate = newUTC(2023, Month.December, 26);
+        const callback = jest.fn();
+        const { rerender } = renderUseDateSegmentsHook(testDate, callback);
+
+        rerender({ date: null, callback });
+
+        expect(callback).toHaveBeenCalledWith(
+          expect.objectContaining({
+            day: '',
+            month: '',
+            year: '',
+          }),
+          expect.objectContaining({
+            day: '26',
+            month: '12',
+            year: '2023',
+          }),
+        );
+      });
+      test('returns empty segments', () => {
+        const testDate = newUTC(2023, Month.December, 26);
+        const callback = jest.fn();
+        const { rerender, result } = renderUseDateSegmentsHook(
+          testDate,
+          callback,
+        );
+
+        rerender({ date: null, callback });
+        expect(result.current.segments.day).toEqual('');
+        expect(result.current.segments.month).toEqual('');
+        expect(result.current.segments.year).toEqual('');
+      });
+    });
+
+    describe('with an invalid Date value', () => {
+      test('calls callback with previous segments', () => {
+        const testDate = newUTC(2023, Month.December, 26);
+        const callback = jest.fn();
+        const { rerender } = renderUseDateSegmentsHook(testDate, callback);
+
+        rerender({ date: new Date('invalid'), callback });
+
+        expect(callback).toHaveBeenCalledWith(
+          expect.objectContaining({
+            day: '26',
+            month: '12',
+            year: '2023',
+          }),
+          expect.objectContaining({
+            day: '26',
+            month: '12',
+            year: '2023',
+          }),
+        );
+      });
+      test('returns previous segments', () => {
+        const testDate = newUTC(2023, Month.December, 26);
+        const callback = jest.fn();
+        const { rerender, result } = renderUseDateSegmentsHook(
+          testDate,
+          callback,
+        );
+
+        rerender({ date: new Date('invalid'), callback });
+        expect(result.current.segments.day).toEqual('26');
+        expect(result.current.segments.month).toEqual('12');
+        expect(result.current.segments.year).toEqual('2023');
+      });
+    });
+  });
+
+  describe('setSegment', () => {
+    test('calls callback when setSegment is called', () => {
+      const testDate = newUTC(2023, Month.December, 26);
+      const callback = jest.fn();
+      const { result } = renderUseDateSegmentsHook(testDate, callback);
+
+      result.current.setSegment('day', '25');
+
+      expect(callback).toHaveBeenCalledWith(
+        expect.objectContaining({
+          day: '25',
+          month: '12',
+          year: '2023',
+        }),
+        expect.objectContaining({
+          day: '26',
+          month: '12',
+          year: '2023',
+        }),
+        'day',
+      );
+    });
+  });
+});
diff --git a/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts b/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts
index e28eecc541..90ecb1b6f7 100644
--- a/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts
+++ b/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts
@@ -1,7 +1,7 @@
 import { useEffect, useReducer } from 'react';
-import { isSameDay } from 'date-fns';
+import { isNull, isUndefined } from 'lodash';
 
-import { DateType } from '@leafygreen-ui/date-utils';
+import { DateType, isSameUTCDay, isValidDate } from '@leafygreen-ui/date-utils';
 import { usePrevious } from '@leafygreen-ui/hooks';
 
 import { DateSegment, DateSegmentsState, DateSegmentValue } from '../../types';
@@ -44,7 +44,15 @@ export const useDateSegments = (
 
   // If `date` prop changes, update the segments
   useEffect(() => {
-    if (date && !(prevDate && isSameDay(date, prevDate))) {
+    // If the date has changed to a valid value
+    const hasDateValueChanged =
+      isValidDate(date) && !isSameUTCDay(date, prevDate);
+
+    // If the date has been set to null from a previously valid date
+    const hasDateBeenCleared =
+      (isNull(date) || isUndefined(date)) && isValidDate(prevDate);
+
+    if (hasDateValueChanged || hasDateBeenCleared) {
       const newSegments = getFormattedSegmentsFromDate(date);
       onUpdate?.(newSegments, { ...segments });
       dispatch(newSegments);
diff --git a/packages/date-picker/src/shared/utils/getSegmentsFromDate/getFormattedSegmentsFromDate.ts b/packages/date-picker/src/shared/utils/getSegmentsFromDate/getFormattedSegmentsFromDate.ts
new file mode 100644
index 0000000000..bcbf01f260
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getSegmentsFromDate/getFormattedSegmentsFromDate.ts
@@ -0,0 +1,19 @@
+import { DateType } from '@leafygreen-ui/date-utils';
+
+import { DateSegmentsState } from '../../types';
+import { getValueFormatter } from '../getValueFormatter';
+
+import { getSegmentsFromDate } from './getSegmentsFromDate';
+
+/** Returns a single object with _formatted_ day, month & year segments */
+export const getFormattedSegmentsFromDate = (
+  date: DateType,
+): DateSegmentsState => {
+  const segments = getSegmentsFromDate(date);
+
+  return {
+    day: getValueFormatter('day')(segments['day']),
+    month: getValueFormatter('month')(segments['month']),
+    year: getValueFormatter('year')(segments['year']),
+  };
+};
diff --git a/packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts b/packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
index 418fb428f6..d1fa08a8a5 100644
--- a/packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
+++ b/packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.spec.ts
@@ -1,13 +1,13 @@
-import { getSegmentsFromDate } from '.';
+import { getFormattedSegmentsFromDate, getSegmentsFromDate } from '.';
 
 describe('packages/date-picker/utils/getSegmentsFromDate', () => {
   test('returns UTC d/m/y values', () => {
     const utc = new Date(Date.UTC(2023, 8, 1));
     const segments = getSegmentsFromDate(utc);
     expect(segments).toBeDefined();
-    expect(segments.day).toBe(1);
-    expect(segments.month).toBe(9);
-    expect(segments.year).toBe(2023);
+    expect(segments.day).toBe('1');
+    expect(segments.month).toBe('9');
+    expect(segments.year).toBe('2023');
   });
 
   test('returns empty string for each segment when date is null', () => {
@@ -17,4 +17,39 @@ describe('packages/date-picker/utils/getSegmentsFromDate', () => {
     expect(segments.month).toEqual('');
     expect(segments.year).toEqual('');
   });
+
+  test('returns empty string for each segment when date is invalid', () => {
+    const segments = getSegmentsFromDate(new Date('invalid'));
+    expect(segments).toBeDefined();
+    expect(segments.day).toEqual('');
+    expect(segments.month).toEqual('');
+    expect(segments.year).toEqual('');
+  });
+});
+
+describe('packages/date-picker/utils/getFormattedSegmentsFromDate', () => {
+  test('returns UTC d/m/y values', () => {
+    const utc = new Date(Date.UTC(2023, 8, 1));
+    const segments = getFormattedSegmentsFromDate(utc);
+    expect(segments).toBeDefined();
+    expect(segments.day).toBe('01');
+    expect(segments.month).toBe('09');
+    expect(segments.year).toBe('2023');
+  });
+
+  test('returns empty string for each segment when date is null', () => {
+    const segments = getFormattedSegmentsFromDate(null);
+    expect(segments).toBeDefined();
+    expect(segments.day).toEqual('');
+    expect(segments.month).toEqual('');
+    expect(segments.year).toEqual('');
+  });
+
+  test('returns empty string for each segment when date is invalid', () => {
+    const segments = getFormattedSegmentsFromDate(new Date('invalid'));
+    expect(segments).toBeDefined();
+    expect(segments.day).toEqual('');
+    expect(segments.month).toEqual('');
+    expect(segments.year).toEqual('');
+  });
 });
diff --git a/packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.ts b/packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.ts
new file mode 100644
index 0000000000..cfa06dc9db
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/getSegmentsFromDate/getSegmentsFromDate.ts
@@ -0,0 +1,12 @@
+import { DateType, isValidDate } from '@leafygreen-ui/date-utils';
+
+import { DateSegmentsState } from '../../types';
+
+/** Returns a single object with day, month & year segments */
+export const getSegmentsFromDate = (date: DateType): DateSegmentsState => {
+  return {
+    day: isValidDate(date) ? String(date.getUTCDate()) : '',
+    month: isValidDate(date) ? String(date.getUTCMonth() + 1) : '',
+    year: isValidDate(date) ? String(date.getUTCFullYear()) : '',
+  };
+};
diff --git a/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts b/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts
index 24af6209bc..8d4fde2b8d 100644
--- a/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts
+++ b/packages/date-picker/src/shared/utils/getSegmentsFromDate/index.ts
@@ -1,24 +1,2 @@
-import { DateSegmentsState } from '../../types';
-import { getValueFormatter } from '../getValueFormatter';
-
-/** Returns a single object with day, month & year segments */
-export const getSegmentsFromDate = (date: Date | null): DateSegmentsState => {
-  return {
-    day: date ? date.getUTCDate() : '',
-    month: date ? date.getUTCMonth() + 1 : '',
-    year: date ? date.getUTCFullYear() : '',
-  } as DateSegmentsState;
-};
-
-/** Returns a single object with _formatted_ day, month & year segments */
-export const getFormattedSegmentsFromDate = (
-  date: Date | null,
-): DateSegmentsState => {
-  const segments = getSegmentsFromDate(date);
-
-  return {
-    day: getValueFormatter('day')(segments['day']),
-    month: getValueFormatter('month')(segments['month']),
-    year: getValueFormatter('year')(segments['year']),
-  };
-};
+export { getFormattedSegmentsFromDate } from './getFormattedSegmentsFromDate';
+export { getSegmentsFromDate } from './getSegmentsFromDate';
diff --git a/packages/date-utils/src/getISODate/getISODate.ts b/packages/date-utils/src/getISODate/getISODate.ts
index 7d40c7a8b2..afce73f6ca 100644
--- a/packages/date-utils/src/getISODate/getISODate.ts
+++ b/packages/date-utils/src/getISODate/getISODate.ts
@@ -5,7 +5,7 @@ import { DateType } from '../types';
  * Returns only the Date portion of the ISOString for a given date
  * i.e. 2023-11-01T00:00:00.000Z => 2023-11-01
  */
-export const getISODate = (date?: DateType): string => {
+export const getISODate = (date: DateType): string => {
   if (!isValidDate(date)) return '';
 
   const isoString = date.toISOString();
diff --git a/packages/date-utils/src/getISODateTZ/getISODateTZ.ts b/packages/date-utils/src/getISODateTZ/getISODateTZ.ts
index 754c63b5d7..5a504c82c3 100644
--- a/packages/date-utils/src/getISODateTZ/getISODateTZ.ts
+++ b/packages/date-utils/src/getISODateTZ/getISODateTZ.ts
@@ -2,12 +2,13 @@ import { addMilliseconds } from 'date-fns';
 import { getTimezoneOffset } from 'date-fns-tz';
 
 import { getISODate } from '../getISODate';
+import { isValidDate } from '../isValidDate';
 import { DateType } from '../types';
 
 export const getISODateTZ = (date: DateType, timeZone: string) => {
   const offsetMs = getTimezoneOffset(timeZone);
 
-  if (!date || isNaN(offsetMs)) return getISODate(date);
+  if (!isValidDate(date) || isNaN(offsetMs)) return getISODate(date);
 
   // a date object that, when printed in ISO format,
   // _looks like_ the local time for the given time zone.
diff --git a/packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.spec.ts b/packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.spec.ts
index 698fcb4364..18acfd16f2 100644
--- a/packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.spec.ts
+++ b/packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.spec.ts
@@ -8,17 +8,22 @@ describe('packages/date-utils/isCurrentUTCDay', () => {
     jest.useFakeTimers();
   });
 
-  test('returns true when given UTC dates', () => {
+  test('returns true with UTC dates', () => {
     const midnightUTC = newUTC(2020, Month.December, 25, 0, 0);
     const elevenUTC = newUTC(2020, Month.December, 25, 23, 59);
     jest.setSystemTime(midnightUTC);
     expect(isCurrentUTCDay(elevenUTC)).toBe(true);
   });
 
-  test('returns false when different UTC dates', () => {
+  test('returns false with different UTC dates', () => {
     const midnightUTC = newUTC(2020, Month.December, 25, 0, 0);
     const elevenUTC_prev = newUTC(2020, Month.December, 24, 23, 59);
     jest.setSystemTime(midnightUTC);
     expect(isCurrentUTCDay(elevenUTC_prev)).toBe(false);
   });
+
+  test('returns false with invalid dates', () => {
+    const date = new Date('invalid');
+    expect(isCurrentUTCDay(date)).toBe(false);
+  });
 });
diff --git a/packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.ts b/packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.ts
index 130f91de57..0c65a5db92 100644
--- a/packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.ts
+++ b/packages/date-utils/src/isCurrentUTCDay/isCurrentUTCDay.ts
@@ -1,11 +1,12 @@
 import { isSameUTCDay } from '../isSameUTCDay';
+import { DateType } from '../types';
 
 /**
  * Returns whether a given day is today, in UTC
  *
  * Compare to `date-fns.isToday`, which compares using local time
  */
-export const isCurrentUTCDay = (day?: Date | null): day is Date => {
+export const isCurrentUTCDay = (day?: DateType): day is Date => {
   const today = new Date(Date.now());
   return isSameUTCDay(day, today);
 };
diff --git a/packages/date-utils/src/isOnOrAfter/isOnOrAfter.spec.ts b/packages/date-utils/src/isOnOrAfter/isOnOrAfter.spec.ts
index 9d744b0dcc..be1e7fa260 100644
--- a/packages/date-utils/src/isOnOrAfter/isOnOrAfter.spec.ts
+++ b/packages/date-utils/src/isOnOrAfter/isOnOrAfter.spec.ts
@@ -19,4 +19,10 @@ describe('packages/date-utils/isOnOrAfter', () => {
   test('d1 is before d2', () => {
     expect(isOnOrAfter(jan, jul)).toBe(false);
   });
+
+  test('returns false when one or both dates is invalid', () => {
+    expect(isOnOrAfter(new Date(), new Date('invalid'))).toBe(false);
+    expect(isOnOrAfter(new Date('invalid'), new Date())).toBe(false);
+    expect(isOnOrAfter(new Date('invalid'), new Date('invalid'))).toBe(false);
+  });
 });
diff --git a/packages/date-utils/src/isOnOrAfter/isOnOrAfter.ts b/packages/date-utils/src/isOnOrAfter/isOnOrAfter.ts
index ccf012439b..5327c48960 100644
--- a/packages/date-utils/src/isOnOrAfter/isOnOrAfter.ts
+++ b/packages/date-utils/src/isOnOrAfter/isOnOrAfter.ts
@@ -1,8 +1,14 @@
 import { isAfter } from 'date-fns';
 
 import { isSameUTCDay } from '../isSameUTCDay';
+import { isValidDate } from '../isValidDate';
+import { DateType } from '../types';
 
 // TODO: tests
-export const isOnOrAfter = (day: Date, dayToCompare: Date) => {
-  return isSameUTCDay(day, dayToCompare) || isAfter(day, dayToCompare);
+export const isOnOrAfter = (day: DateType, dayToCompare: Date) => {
+  return (
+    isValidDate(day) &&
+    isValidDate(dayToCompare) &&
+    (isSameUTCDay(day, dayToCompare) || isAfter(day, dayToCompare))
+  );
 };
diff --git a/packages/date-utils/src/isOnOrBefore/isOnOrBefore.spec.ts b/packages/date-utils/src/isOnOrBefore/isOnOrBefore.spec.ts
index d0135000f5..7ce2495533 100644
--- a/packages/date-utils/src/isOnOrBefore/isOnOrBefore.spec.ts
+++ b/packages/date-utils/src/isOnOrBefore/isOnOrBefore.spec.ts
@@ -19,4 +19,10 @@ describe('packages/date-utils/isOnOrBefore', () => {
   test('d1 is after as d2', () => {
     expect(isOnOrBefore(dec, jul)).toBe(false);
   });
+
+  test('returns false when one or both dates is invalid', () => {
+    expect(isOnOrBefore(new Date(), new Date('invalid'))).toBe(false);
+    expect(isOnOrBefore(new Date('invalid'), new Date())).toBe(false);
+    expect(isOnOrBefore(new Date('invalid'), new Date('invalid'))).toBe(false);
+  });
 });
diff --git a/packages/date-utils/src/isOnOrBefore/isOnOrBefore.ts b/packages/date-utils/src/isOnOrBefore/isOnOrBefore.ts
index 3fcc704466..c8a9acc167 100644
--- a/packages/date-utils/src/isOnOrBefore/isOnOrBefore.ts
+++ b/packages/date-utils/src/isOnOrBefore/isOnOrBefore.ts
@@ -1,7 +1,13 @@
 import { isBefore } from 'date-fns';
 
 import { isSameUTCDay } from '../isSameUTCDay';
+import { isValidDate } from '../isValidDate';
+import { DateType } from '../types';
 
-export const isOnOrBefore = (day: Date, dayToCompare: Date) => {
-  return isSameUTCDay(day, dayToCompare) || isBefore(day, dayToCompare);
+export const isOnOrBefore = (day: DateType, dayToCompare: DateType) => {
+  return (
+    isValidDate(day) &&
+    isValidDate(dayToCompare) &&
+    (isSameUTCDay(day, dayToCompare) || isBefore(day, dayToCompare))
+  );
 };
diff --git a/packages/date-utils/src/isSameUTCDay/isSameUTCDay.spec.ts b/packages/date-utils/src/isSameUTCDay/isSameUTCDay.spec.ts
index 256bda59f9..3edfb4c3d6 100644
--- a/packages/date-utils/src/isSameUTCDay/isSameUTCDay.spec.ts
+++ b/packages/date-utils/src/isSameUTCDay/isSameUTCDay.spec.ts
@@ -1,10 +1,13 @@
-import tzMock from 'timezone-mock';
+import { mockTimeZone } from '../testing/mockTimeZone';
 
 import { isSameUTCDay } from '.';
 
 describe('packages/date-utils/isSameUTCDay', () => {
   beforeEach(() => {
-    tzMock.register('US/Eastern');
+    mockTimeZone('America/New_York', -5);
+  });
+  afterEach(() => {
+    jest.resetAllMocks();
   });
 
   describe(' when both dates are defined in UTC', () => {
@@ -54,4 +57,10 @@ describe('packages/date-utils/isSameUTCDay', () => {
     expect(isSameUTCDay(null, new Date())).toBe(false);
     expect(isSameUTCDay(null, null)).toBe(false);
   });
+
+  test('returns false when one or both dates is invalid', () => {
+    expect(isSameUTCDay(new Date(), new Date('invalid'))).toBe(false);
+    expect(isSameUTCDay(new Date('invalid'), new Date())).toBe(false);
+    expect(isSameUTCDay(new Date('invalid'), new Date('invalid'))).toBe(false);
+  });
 });
diff --git a/packages/date-utils/src/isSameUTCDay/isSameUTCDay.ts b/packages/date-utils/src/isSameUTCDay/isSameUTCDay.ts
index 015b1ea4a3..7df93d93bb 100644
--- a/packages/date-utils/src/isSameUTCDay/isSameUTCDay.ts
+++ b/packages/date-utils/src/isSameUTCDay/isSameUTCDay.ts
@@ -1,13 +1,13 @@
+import { isValidDate } from '../isValidDate';
+import { DateType } from '../types';
+
 /**
  * Returns whether 2 Dates are the same day in UTC.
  *
  * Compare to `date-fns.isSameDay`, which uses local time
  */
-export const isSameUTCDay = (
-  day1?: Date | null,
-  day2?: Date | null,
-): boolean => {
-  if (!day1 || !day2) return false;
+export const isSameUTCDay = (day1?: DateType, day2?: DateType): boolean => {
+  if (!isValidDate(day1) || !isValidDate(day2)) return false;
 
   return (
     day1.getUTCDate() === day2.getUTCDate() &&
diff --git a/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.spec.ts b/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.spec.ts
index 8e648e00b9..2bcfa91693 100644
--- a/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.spec.ts
+++ b/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.spec.ts
@@ -1,12 +1,14 @@
-import tzMock from 'timezone-mock';
-
 import { Month } from '../constants';
+import { mockTimeZone } from '../testing/mockTimeZone';
 
 import { isSameUTCMonth } from '.';
 
 describe('packages/date-utils/isSameUTCMonth', () => {
   beforeEach(() => {
-    tzMock.register('US/Eastern');
+    mockTimeZone('America/New_York', -5);
+  });
+  afterEach(() => {
+    jest.resetAllMocks();
   });
 
   describe('when both dates are defined in UTC', () => {
@@ -62,4 +64,12 @@ describe('packages/date-utils/isSameUTCMonth', () => {
     const utc2 = new Date(Date.UTC(2024, Month.September, 10));
     expect(isSameUTCMonth(utc1, utc2)).toBe(false);
   });
+
+  test('returns false when one or both dates is invalid', () => {
+    expect(isSameUTCMonth(new Date(), new Date('invalid'))).toBe(false);
+    expect(isSameUTCMonth(new Date('invalid'), new Date())).toBe(false);
+    expect(isSameUTCMonth(new Date('invalid'), new Date('invalid'))).toBe(
+      false,
+    );
+  });
 });
diff --git a/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.ts b/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.ts
index ac937a09ff..fad9583b56 100644
--- a/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.ts
+++ b/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.ts
@@ -1,13 +1,13 @@
+import { isValidDate } from '../isValidDate';
+import { DateType } from '../types';
+
 /**
  * Returns whether 2 Dates are the same Month in UTC.
  *
  * Compare to `date-fns.isSameDay`, which uses local time
  */
-export const isSameUTCMonth = (
-  day1?: Date | null,
-  day2?: Date | null,
-): boolean => {
-  if (!day1 || !day2) return false;
+export const isSameUTCMonth = (day1?: DateType, day2?: DateType): boolean => {
+  if (!isValidDate(day1) || !isValidDate(day2)) return false;
 
   return (
     day1.getUTCMonth() === day2.getUTCMonth() &&
diff --git a/packages/date-utils/src/isSameUTCRange/isSameUTCRange.ts b/packages/date-utils/src/isSameUTCRange/isSameUTCRange.ts
index 2fb6b1f514..2d91041dd7 100644
--- a/packages/date-utils/src/isSameUTCRange/isSameUTCRange.ts
+++ b/packages/date-utils/src/isSameUTCRange/isSameUTCRange.ts
@@ -1,10 +1,11 @@
 import isUndefined from 'lodash/isUndefined';
 
 import { isSameUTCDay } from '../isSameUTCDay';
+import { DateType } from '../types';
 
 export const isSameUTCRange = (
-  range1?: [Date | null, Date | null],
-  range2?: [Date | null, Date | null],
+  range1?: [DateType, DateType],
+  range2?: [DateType, DateType],
 ): boolean => {
   if (isUndefined(range1) || isUndefined(range2)) return false;
 
diff --git a/packages/date-utils/src/isValidDate/index.ts b/packages/date-utils/src/isValidDate/index.ts
index 960580c147..5afda48f1d 100644
--- a/packages/date-utils/src/isValidDate/index.ts
+++ b/packages/date-utils/src/isValidDate/index.ts
@@ -1,5 +1 @@
-export {
-  isValidDate,
-  isValidDateObject,
-  isValidDateString,
-} from './isValidDate';
+export { isValidDate, isValidDateString } from './isValidDate';
diff --git a/packages/date-utils/src/isValidDate/isValidDate.spec.ts b/packages/date-utils/src/isValidDate/isValidDate.spec.ts
index 854974cd24..801e4afdb9 100644
--- a/packages/date-utils/src/isValidDate/isValidDate.spec.ts
+++ b/packages/date-utils/src/isValidDate/isValidDate.spec.ts
@@ -1,3 +1,5 @@
+import { mockTimeZone } from '../testing/mockTimeZone';
+
 import { isValidDate, isValidDateString } from '.';
 
 describe('packages/date-utils/isValidDate', () => {
@@ -6,31 +8,35 @@ describe('packages/date-utils/isValidDate', () => {
     expect(isValidDate(new Date(Date.UTC(2023, 1, 1)))).toBe(true);
   });
 
-  test('accepts numbers', () => {
-    expect(isValidDate(Date.now())).toBe(true);
-    expect(isValidDate(0)).toBe(true);
+  test('accepts Date objects when the time zone is mocked', () => {
+    mockTimeZone('America/Los_Angeles', -8);
+    expect(isValidDate(new Date())).toBe(true);
+    jest.resetAllMocks();
   });
 
-  test('accepts strings', () => {
-    expect(isValidDate('1993-12-26')).toBe(true);
-    expect(isValidDate('not a date')).toBe(false);
+  test('rejects invalid date objects', () => {
+    expect(isValidDate(new Date('invalid'))).toBe(false);
+    expect(isValidDate({} as Date)).toBe(false);
   });
 
-  test('accepts null', () => {
+  test('rejects undefined', () => {
+    expect(isValidDate(undefined)).toBe(false);
+  });
+  test('rejects null', () => {
     expect(isValidDate(null)).toBe(false);
   });
+});
 
-  describe('isValidDateString', () => {
-    test('us format is valid', () => {
-      expect(isValidDateString('12/26/1993')).toBeTruthy();
-    });
+describe('packages/date-utils/isValidDateString', () => {
+  test('us format is valid', () => {
+    expect(isValidDateString('12/26/1993')).toBeTruthy();
+  });
 
-    test('iso format is valid', () => {
-      expect(isValidDateString('1993-12-26')).toBeTruthy();
-    });
+  test('iso format is valid', () => {
+    expect(isValidDateString('1993-12-26')).toBeTruthy();
+  });
 
-    test('undefined format is not valid', () => {
-      expect(isValidDateString(undefined)).toBeFalsy();
-    });
+  test('undefined format is not valid', () => {
+    expect(isValidDateString(undefined)).toBeFalsy();
   });
 });
diff --git a/packages/date-utils/src/isValidDate/isValidDate.ts b/packages/date-utils/src/isValidDate/isValidDate.ts
index 2eba483799..274b204310 100644
--- a/packages/date-utils/src/isValidDate/isValidDate.ts
+++ b/packages/date-utils/src/isValidDate/isValidDate.ts
@@ -2,31 +2,31 @@ import { isValid } from 'date-fns';
 import isNull from 'lodash/isNull';
 import isUndefined from 'lodash/isUndefined';
 
-export const isValidDate = (
-  maybeDate?: Date | string | number | null,
-): maybeDate is Date | string => {
-  if (isUndefined(maybeDate) || isNull(maybeDate)) return false;
+import { DateType } from '../types';
 
-  switch (typeof maybeDate) {
-    case 'string':
-      return isValidDateString(maybeDate);
-    case 'number':
-      return isValid(maybeDate);
+/**
+ * An extension of `date-fns` {@link isValid}
+ * that accepts a {@link DateType}
+ */
+export const isValidDate = (date?: DateType): date is Date => {
+  // Enumerating all cases to ensure test coverage
+  if (isUndefined(date)) return false;
+  if (isNull(date)) return false;
+  if (date.constructor.name !== 'Date') return false;
 
-    default:
-      return isValidDateObject(maybeDate);
+  try {
+    date?.toISOString();
+    return isValid(date);
+  } catch (error) {
+    return false;
   }
 };
 
-export const isValidDateObject = (date?: any): date is Date => {
-  return (
-    !isUndefined(date) &&
-    typeof date === 'object' &&
-    date.constructor.name === 'Date'
-  );
-};
-
-/** Returns whether the provided string is a valid date */
+/**
+ * Returns whether the provided string is a valid date
+ *
+ * @deprecated Prefer {@link isValid} from `date-fns`
+ */
 export const isValidDateString = (str?: any): str is string => {
   return (
     !isUndefined(str) && typeof str === 'string' && !isNaN(Date.parse(str))
diff --git a/packages/date-utils/src/toDate/toDate.ts b/packages/date-utils/src/toDate/toDate.ts
index 00fc82df73..61951fc1d5 100644
--- a/packages/date-utils/src/toDate/toDate.ts
+++ b/packages/date-utils/src/toDate/toDate.ts
@@ -2,12 +2,10 @@ import { isValid, toDate as _toDate } from 'date-fns';
 import isNull from 'lodash/isNull';
 import isUndefined from 'lodash/isUndefined';
 
-import { isValidDateObject } from '../isValidDate';
-
 /** A wrapper around `date-fns.toDate` that also accepts strings */
 export function toDate(dateLike?: string | number | Date | null): Date | null {
   if (isUndefined(dateLike) || isNull(dateLike)) return null;
-  if (isValidDateObject(dateLike)) return new Date(dateLike);
+  if (isValid(dateLike)) return new Date(dateLike);
   if (typeof dateLike === 'number') return _toDate(dateLike);
   const newDate = new Date(dateLike);
   return isValid(newDate) ? newDate : null;
diff --git a/packages/date-utils/src/types/InvalidDate.ts b/packages/date-utils/src/types/InvalidDate.ts
new file mode 100644
index 0000000000..8f1d4d8bd0
--- /dev/null
+++ b/packages/date-utils/src/types/InvalidDate.ts
@@ -0,0 +1,52 @@
+export type InvalidDate = Omit<
+  Date,
+  // | 'getUTCDate'
+  // | 'getUTCDay'
+  // | 'getUTCFullYear'
+  // | 'getUTCHours'
+  // | 'getUTCMilliseconds'
+  // | 'getUTCMinutes'
+  // | 'getUTCMonth'
+  // | 'getUTCSeconds'
+  // | 'getDate'
+  // | 'getDay'
+  // | 'getFullYear'
+  // | 'getHours'
+  // | 'getMilliseconds'
+  // | 'getMinutes'
+  // | 'getMonth'
+  // | 'getSeconds'
+  | 'toLocaleDateString'
+  | 'toLocaleString'
+  | 'toLocaleTimeString'
+  | 'toString'
+  | 'toTimeString'
+  | 'toUTCString'
+  | 'toISOString'
+  | 'toJSON'
+> & {
+  // getUTCDate: () => number | undefined;
+  // getUTCDay: () => number | undefined;
+  // getUTCFullYear: () => number | undefined;
+  // getUTCHours: () => number | undefined;
+  // getUTCMilliseconds: () => number | undefined;
+  // getUTCMinutes: () => number | undefined;
+  // getUTCMonth: () => number | undefined;
+  // getUTCSeconds: () => number | undefined;
+  // getDate: () => number | undefined;
+  // getDay: () => number | undefined;
+  // getFullYear: () => number | undefined;
+  // getHours: () => number | undefined;
+  // getMilliseconds: () => number | undefined;
+  // getMinutes: () => number | undefined;
+  // getMonth: () => number | undefined;
+  // getSeconds: () => number | undefined;
+  toLocaleDateString: () => 'Invalid Date';
+  toLocaleString: () => 'Invalid Date';
+  toLocaleTimeString: () => 'Invalid Date';
+  toString: () => 'Invalid Date';
+  toTimeString: () => 'Invalid Date';
+  toUTCString: () => 'Invalid Date';
+  toISOString: () => Error;
+  toJSON: () => null;
+};
diff --git a/packages/date-utils/src/types.ts b/packages/date-utils/src/types/index.ts
similarity index 88%
rename from packages/date-utils/src/types.ts
rename to packages/date-utils/src/types/index.ts
index 2bb0b1c94a..357b7b46e5 100644
--- a/packages/date-utils/src/types.ts
+++ b/packages/date-utils/src/types/index.ts
@@ -1,4 +1,5 @@
-export type DateType = Date | null;
+import { InvalidDate } from './InvalidDate';
+export type DateType = Date | InvalidDate | null;
 export type DateRangeType = [DateType, DateType];
 
 export type LocaleString = 'iso8601' | string;

From 09ae2156019d7e934ae791a70234f88b2f91fdf3 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Fri, 5 Jan 2024 16:36:08 -0500
Subject: [PATCH 340/351] move menu position (#2157)

---
 .../shared/components/DateInput/DateFormField/DateFormField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
index 3f5aa93f07..624f7c600d 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateFormField/DateFormField.tsx
@@ -41,7 +41,6 @@ export const DateFormField = React.forwardRef<
 
     return (
       <FormField
-        ref={fwdRef}
         label={label}
         description={description}
         disabled={disabled}
@@ -51,6 +50,7 @@ export const DateFormField = React.forwardRef<
         {...rest}
       >
         <FormFieldInputContainer
+          ref={fwdRef}
           role="combobox"
           tabIndex={-1}
           aria-label={!label && ariaLabelProp ? ariaLabelProp : undefined}

From dc270c647d14b557c26f242f1b211f64fe447e33 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 8 Jan 2024 13:53:39 -0800
Subject: [PATCH 341/351] creates newTZDate

---
 packages/date-utils/src/index.ts              |  1 +
 packages/date-utils/src/newTZDate/index.ts    |  1 +
 .../src/newTZDate/newTZDate.spec.ts           | 44 +++++++++++++++++++
 .../date-utils/src/newTZDate/newTZDate.ts     | 11 +++++
 4 files changed, 57 insertions(+)
 create mode 100644 packages/date-utils/src/newTZDate/index.ts
 create mode 100644 packages/date-utils/src/newTZDate/newTZDate.spec.ts
 create mode 100644 packages/date-utils/src/newTZDate/newTZDate.ts

diff --git a/packages/date-utils/src/index.ts b/packages/date-utils/src/index.ts
index e9f4c920fe..6f79645133 100644
--- a/packages/date-utils/src/index.ts
+++ b/packages/date-utils/src/index.ts
@@ -29,6 +29,7 @@ export { isValidDate } from './isValidDate';
 export { isValidLocale } from './isValidLocale';
 export { maxDate } from './maxDate';
 export { minDate } from './minDate';
+export { newTZDate } from './newTZDate';
 export { newUTC } from './newUTC';
 export { setToUTCMidnight } from './setToUTCMidnight';
 export { setUTCDate } from './setUTCDate';
diff --git a/packages/date-utils/src/newTZDate/index.ts b/packages/date-utils/src/newTZDate/index.ts
new file mode 100644
index 0000000000..ac631bccf1
--- /dev/null
+++ b/packages/date-utils/src/newTZDate/index.ts
@@ -0,0 +1 @@
+export { newTZDate } from './newTZDate';
diff --git a/packages/date-utils/src/newTZDate/newTZDate.spec.ts b/packages/date-utils/src/newTZDate/newTZDate.spec.ts
new file mode 100644
index 0000000000..7879bea539
--- /dev/null
+++ b/packages/date-utils/src/newTZDate/newTZDate.spec.ts
@@ -0,0 +1,44 @@
+import { Month } from '../constants';
+
+import { newTZDate } from './newTZDate';
+
+describe('packages/date-utils/newTZDate', () => {
+  test('creates a UTC date when 0 offset is provided', () => {
+    const date = newTZDate(0, 2020, Month.January, 5);
+    expect(date.getUTCFullYear()).toBe(2020);
+    expect(date.getUTCMonth()).toBe(0);
+    expect(date.getUTCDate()).toBe(5);
+    expect(date.getUTCHours()).toBe(0);
+  });
+
+  test('positive UTC offset (2020-01-05 UTC => 2020-01-04T19:00 UTC+5)', () => {
+    const date = newTZDate(5, 2020, Month.January, 5);
+    expect(date.getUTCFullYear()).toBe(2020);
+    expect(date.getUTCMonth()).toBe(0);
+    expect(date.getUTCDate()).toBe(4);
+    expect(date.getUTCHours()).toBe(19);
+  });
+
+  test('positive UTC offset with hours (2020-01-05T23:00 UTC => 2020-01-05T18:00 UTC+5)', () => {
+    const date = newTZDate(5, 2020, Month.January, 5, 23);
+    expect(date.getUTCFullYear()).toBe(2020);
+    expect(date.getUTCMonth()).toBe(0);
+    expect(date.getUTCDate()).toBe(5);
+    expect(date.getUTCHours()).toBe(18);
+  });
+
+  test('negative UTC offset (2020-01-05 UTC => 2020-01-05T05:00 UTC-5)', () => {
+    const date = newTZDate(-5, 2020, Month.January, 5);
+    expect(date.getUTCFullYear()).toBe(2020);
+    expect(date.getUTCMonth()).toBe(0);
+    expect(date.getUTCDate()).toBe(5);
+    expect(date.getUTCHours()).toBe(5);
+  });
+  test('negative UTC offset with hours (2020-01-05T23:00 UTC => 2020-01-06T04:00 UTC-5)', () => {
+    const date = newTZDate(-5, 2020, Month.January, 5, 23);
+    expect(date.getUTCFullYear()).toBe(2020);
+    expect(date.getUTCMonth()).toBe(0);
+    expect(date.getUTCDate()).toBe(6);
+    expect(date.getUTCHours()).toBe(4);
+  });
+});
diff --git a/packages/date-utils/src/newTZDate/newTZDate.ts b/packages/date-utils/src/newTZDate/newTZDate.ts
new file mode 100644
index 0000000000..b0d36d5cc9
--- /dev/null
+++ b/packages/date-utils/src/newTZDate/newTZDate.ts
@@ -0,0 +1,11 @@
+/**
+ * Creates a Date object for a given UTC offset
+ */
+export const newTZDate = (
+  UTCOffset = 0,
+  ...args: Parameters<typeof Date.UTC>
+): Date => {
+  const [y, m, d, h, ...rest] = args;
+  const hour = (h ?? 0) - UTCOffset;
+  return new Date(Date.UTC(y, m, d, hour, ...rest));
+};

From f5f315f0062331eb99b821443a5dbfa52577d55c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 8 Jan 2024 14:00:49 -0800
Subject: [PATCH 342/351] updates isSameUTCDay & isSameUTCMonth tests

---
 .../src/isSameUTCDay/isSameUTCDay.spec.ts     | 33 +++++++++++-------
 .../src/isSameUTCMonth/isSameUTCMonth.spec.ts | 34 +++++++++++--------
 .../date-utils/src/newTZDate/newTZDate.ts     |  6 +++-
 3 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/packages/date-utils/src/isSameUTCDay/isSameUTCDay.spec.ts b/packages/date-utils/src/isSameUTCDay/isSameUTCDay.spec.ts
index 3edfb4c3d6..d6385c4c52 100644
--- a/packages/date-utils/src/isSameUTCDay/isSameUTCDay.spec.ts
+++ b/packages/date-utils/src/isSameUTCDay/isSameUTCDay.spec.ts
@@ -1,7 +1,11 @@
+import { newTZDate } from '../newTZDate';
+import { newUTC } from '../newUTC';
 import { mockTimeZone } from '../testing/mockTimeZone';
 
 import { isSameUTCDay } from '.';
 
+const TZOffset = -5;
+
 describe('packages/date-utils/isSameUTCDay', () => {
   beforeEach(() => {
     mockTimeZone('America/New_York', -5);
@@ -10,44 +14,47 @@ describe('packages/date-utils/isSameUTCDay', () => {
     jest.resetAllMocks();
   });
 
-  describe(' when both dates are defined in UTC', () => {
+  describe('when both dates are defined in UTC', () => {
     test('returns true', () => {
-      const utc1 = new Date(Date.UTC(2023, 8, 1, 0, 0, 0));
-      const utc2 = new Date(Date.UTC(2023, 8, 1, 21, 0, 0));
+      const utc1 = newUTC(2023, 8, 1, 0, 0, 0);
+      const utc2 = newUTC(2023, 8, 1, 21, 0, 0);
       expect(isSameUTCDay(utc1, utc2)).toBe(true);
     });
 
     test('returns false', () => {
-      const utc1 = new Date(Date.UTC(2023, 8, 1, 0, 0, 0));
-      const utc2 = new Date(Date.UTC(2023, 8, 2, 0, 0, 0));
+      const utc1 = newUTC(2023, 8, 1, 0, 0, 0);
+      const utc2 = newUTC(2023, 8, 2, 0, 0, 0);
       expect(isSameUTCDay(utc1, utc2)).toBe(false);
     });
   });
 
   describe('when one date is defined locally', () => {
     test('returns true ', () => {
-      const utc = new Date(Date.UTC(2023, 8, 10, 0, 0, 0));
-      const local = new Date('2023-09-09T21:00:00'); //2023-09-10T01:00:00Z
+      const utc = newUTC(2023, 8, 10, 0, 0, 0);
+      // '2023-09-09T21:00:00' NY time
+      const local = newTZDate(TZOffset, 2023, 8, 9, 21, 0); //2023-09-10 02:00:00 UTC
+
       expect(isSameUTCDay(utc, local)).toBe(true);
     });
 
     test('returns false', () => {
-      const utc = new Date(Date.UTC(2023, 8, 10));
-      const local = new Date('2023-09-09T12:00'); //2023-09-09T16:00:00Z
+      const utc = newUTC(2023, 8, 10);
+      // '2023-09-09T12:00' NY time
+      const local = newTZDate(TZOffset, 2023, 8, 9, 12, 0); //2023-09-09 17:00:00 UTC
       expect(isSameUTCDay(utc, local)).toBe(false);
     });
   });
 
   describe('when both dates are defined locally', () => {
     test('returns true', () => {
-      const local1 = new Date('2023-09-09T00:00');
-      const local2 = new Date('2023-09-09T19:00');
+      const local1 = newTZDate(TZOffset, 2023, 8, 8, 20, 0); // 02:00 UTC + 1day
+      const local2 = newTZDate(TZOffset, 2023, 8, 9, 18, 0); // 23:00 UTC
       expect(isSameUTCDay(local1, local2)).toBe(true);
     });
 
     test('returns false', () => {
-      const local1 = new Date('2023-09-09T00:00');
-      const local2 = new Date('2023-09-09T20:00');
+      const local1 = newTZDate(TZOffset, 2023, 8, 9, 0, 0); // 05:00 UTC
+      const local2 = newTZDate(TZOffset, 2023, 8, 9, 20, 0); // 02:00 UTC +1 day
       expect(isSameUTCDay(local1, local2)).toBe(false);
     });
   });
diff --git a/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.spec.ts b/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.spec.ts
index 2bcfa91693..b10e224ca9 100644
--- a/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.spec.ts
+++ b/packages/date-utils/src/isSameUTCMonth/isSameUTCMonth.spec.ts
@@ -1,11 +1,15 @@
 import { Month } from '../constants';
+import { newTZDate } from '../newTZDate';
+import { newUTC } from '../newUTC';
 import { mockTimeZone } from '../testing/mockTimeZone';
 
 import { isSameUTCMonth } from '.';
 
+const TZOffset = -5;
+
 describe('packages/date-utils/isSameUTCMonth', () => {
   beforeEach(() => {
-    mockTimeZone('America/New_York', -5);
+    mockTimeZone('America/New_York', TZOffset);
   });
   afterEach(() => {
     jest.resetAllMocks();
@@ -13,42 +17,42 @@ describe('packages/date-utils/isSameUTCMonth', () => {
 
   describe('when both dates are defined in UTC', () => {
     test('true', () => {
-      const utc1 = new Date(Date.UTC(2023, Month.September, 1));
-      const utc2 = new Date(Date.UTC(2023, Month.September, 10));
+      const utc1 = newUTC(2023, Month.September, 1);
+      const utc2 = newUTC(2023, Month.September, 10);
       expect(isSameUTCMonth(utc1, utc2)).toBe(true);
     });
 
     test('false', () => {
-      const utc1 = new Date(Date.UTC(2023, Month.September, 1));
-      const utc2 = new Date(Date.UTC(2023, Month.August, 31));
+      const utc1 = newUTC(2023, Month.September, 1);
+      const utc2 = newUTC(2023, Month.August, 31);
       expect(isSameUTCMonth(utc1, utc2)).toBe(false);
     });
   });
 
   describe('when one date is defined locally', () => {
     test('true', () => {
-      const utc = new Date(Date.UTC(2023, Month.September, 10));
-      const local = new Date('2023-08-31T21:00:00');
+      const utc = newUTC(2023, Month.September, 10);
+      const local = newTZDate(TZOffset, 2023, Month.August, 31, 21, 0, 0);
       expect(isSameUTCMonth(utc, local)).toBe(true);
     });
 
     test('false', () => {
-      const utc = new Date(Date.UTC(2023, Month.September, 10));
-      const local = new Date('2023-08-31T12:00');
+      const utc = newUTC(2023, Month.September, 10);
+      const local = newTZDate(TZOffset, 2023, Month.August, 31, 12, 0);
       expect(isSameUTCMonth(utc, local)).toBe(false);
     });
   });
 
   describe(' when both dates are defined locally', () => {
     test('true', () => {
-      const local1 = new Date('2023-09-01T00:00');
-      const local2 = new Date('2023-09-30T19:00');
+      const local1 = newTZDate(TZOffset, 2023, Month.September, 1, 0, 0);
+      const local2 = newTZDate(TZOffset, 2023, Month.September, 30, 18, 0);
       expect(isSameUTCMonth(local1, local2)).toBe(true);
     });
 
     test('false', () => {
-      const local1 = new Date('2023-09-01T00:00');
-      const local2 = new Date('2023-09-30T20:00');
+      const local1 = newTZDate(TZOffset, 2023, Month.September, 1, 0, 0);
+      const local2 = newTZDate(TZOffset, 2023, Month.September, 30, 20, 0);
       expect(isSameUTCMonth(local1, local2)).toBe(false);
     });
   });
@@ -60,8 +64,8 @@ describe('packages/date-utils/isSameUTCMonth', () => {
   });
 
   test('false for different years', () => {
-    const utc1 = new Date(Date.UTC(2023, Month.September, 1));
-    const utc2 = new Date(Date.UTC(2024, Month.September, 10));
+    const utc1 = newUTC(2023, Month.September, 1);
+    const utc2 = newUTC(2024, Month.September, 10);
     expect(isSameUTCMonth(utc1, utc2)).toBe(false);
   });
 
diff --git a/packages/date-utils/src/newTZDate/newTZDate.ts b/packages/date-utils/src/newTZDate/newTZDate.ts
index b0d36d5cc9..97c67ce2d7 100644
--- a/packages/date-utils/src/newTZDate/newTZDate.ts
+++ b/packages/date-utils/src/newTZDate/newTZDate.ts
@@ -1,6 +1,10 @@
 /**
- * Creates a Date object for a given UTC offset
+ * Creates a Date object for a given UTC offset.
+ * @internal
  */
+// This API is less than perfect,
+// but we shouldn't be constructing many (if any)
+// TZ dependent dates other than for testing
 export const newTZDate = (
   UTCOffset = 0,
   ...args: Parameters<typeof Date.UTC>

From a117c9b5f2f8c49929598363ef45c48cd2c64150 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 8 Jan 2024 12:30:53 -1000
Subject: [PATCH 343/351] moves special rollover logic to getMaxSegmentValue

---
 .../DateInput/DateInputBox/DateInputBox.tsx   | 18 --------------
 .../DateInputSegment/DateInputSegment.tsx     |  3 +--
 .../getNewSegmentValueFromArrowKeyPress.ts    | 19 +++++++++------
 .../getMaxSegmentValue.spec.ts                | 12 ++++++----
 .../shared/utils/getMaxSegmentValue/index.ts  | 24 +++++++++++++------
 5 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index 8067c37d71..7a55005d68 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -1,8 +1,6 @@
 import React, { FocusEventHandler } from 'react';
-import { getDaysInMonth } from 'date-fns';
 import isEqual from 'lodash/isEqual';
 
-import { newUTC } from '@leafygreen-ui/date-utils';
 import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
@@ -141,22 +139,6 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
         const changedViaArrowKeys =
           meta?.key === keyMap.ArrowDown || meta?.key === keyMap.ArrowUp;
 
-        // If we've updated the "day" segment via arrow keys,
-        // we can update it's rollover behavior based on the month
-        if (changedViaArrowKeys && segmentName === 'day') {
-          const year = Number(segments['year']);
-          const month = Number(segments['month']);
-          const daysInMonth = getDaysInMonth(newUTC(year, month, 1));
-
-          if (Number(segmentValue) > daysInMonth) {
-            if (meta?.key === keyMap.ArrowDown) {
-              segmentValue = String(daysInMonth);
-            } else if (meta?.key === keyMap.ArrowUp) {
-              segmentValue = '01';
-            }
-          }
-        }
-
         // Auto-format the segment if it is explicit and was not changed via arrow-keys
         if (
           !changedViaArrowKeys &&
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 57c23f8aac..c722fe5515 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -102,8 +102,6 @@ export const DateInputSegment = React.forwardRef<
       switch (key) {
         case keyMap.ArrowUp:
         case keyMap.ArrowDown: {
-          /** Fire a custom change event when the up/down arrow keys are pressed */
-
           e.preventDefault();
 
           const newValue = getNewSegmentValueFromArrowKeyPress({
@@ -115,6 +113,7 @@ export const DateInputSegment = React.forwardRef<
           });
           const valueString = formatter(newValue);
 
+          /** Fire a custom change event when the up/down arrow keys are pressed */
           onChange({
             segment,
             value: valueString,
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromArrowKeyPress/getNewSegmentValueFromArrowKeyPress.ts b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromArrowKeyPress/getNewSegmentValueFromArrowKeyPress.ts
index c52f81774c..832c7c978a 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromArrowKeyPress/getNewSegmentValueFromArrowKeyPress.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromArrowKeyPress/getNewSegmentValueFromArrowKeyPress.ts
@@ -2,19 +2,24 @@ import { keyMap, rollover } from '@leafygreen-ui/lib';
 
 import { DateSegment, DateSegmentValue } from '../../../../../types';
 
+interface DateSegmentKeypressContext {
+  value: DateSegmentValue;
+  key: typeof keyMap.ArrowUp | typeof keyMap.ArrowDown;
+  segment: DateSegment;
+  min: number;
+  max: number;
+}
+
+/**
+ * Returns a new segment value given the current state
+ */
 export const getNewSegmentValueFromArrowKeyPress = ({
   value,
   key,
   segment,
   min,
   max,
-}: {
-  value: DateSegmentValue;
-  key: typeof keyMap.ArrowUp | typeof keyMap.ArrowDown;
-  segment: DateSegment;
-  min: number;
-  max: number;
-}) => {
+}: DateSegmentKeypressContext): number => {
   const valueDiff = key === keyMap.ArrowUp ? 1 : -1;
   const defaultVal = key === keyMap.ArrowUp ? min : max;
 
diff --git a/packages/date-picker/src/shared/utils/getMaxSegmentValue/getMaxSegmentValue.spec.ts b/packages/date-picker/src/shared/utils/getMaxSegmentValue/getMaxSegmentValue.spec.ts
index 8fe7cbbf80..68b1baf519 100644
--- a/packages/date-picker/src/shared/utils/getMaxSegmentValue/getMaxSegmentValue.spec.ts
+++ b/packages/date-picker/src/shared/utils/getMaxSegmentValue/getMaxSegmentValue.spec.ts
@@ -2,16 +2,20 @@ import { Month, newUTC } from '@leafygreen-ui/date-utils';
 
 import { getMaxSegmentValue } from '.';
 
-describe('packages/date-picker/utils/getMinSegmentValue', () => {
+describe('packages/date-picker/utils/getMaxSegmentValue', () => {
   describe('day', () => {
-    test('returns 1 by default', () => {
+    test('returns 31 by default', () => {
       expect(getMaxSegmentValue('day')).toBe(31);
     });
-    test.todo('returns max day in provided month');
+    test('returns max day in provided month', () => {
+      expect(
+        getMaxSegmentValue('day', { date: newUTC(2023, Month.February, 14) }),
+      ).toBe(28);
+    });
   });
 
   describe('month', () => {
-    test('returns 1 by default', () => {
+    test('returns 12 by default', () => {
       expect(getMaxSegmentValue('month')).toBe(12);
     });
   });
diff --git a/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts b/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts
index 96882e0db0..a33974f57e 100644
--- a/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts
+++ b/packages/date-picker/src/shared/utils/getMaxSegmentValue/index.ts
@@ -1,4 +1,8 @@
-import { DateType } from '@leafygreen-ui/date-utils';
+import {
+  DateType,
+  getDaysInUTCMonth,
+  isValidDate,
+} from '@leafygreen-ui/date-utils';
 
 import { defaultMax } from '../../constants';
 import { DateSegment } from '../../types';
@@ -12,11 +16,17 @@ export const getMaxSegmentValue = (
     max?: Date;
   },
 ): number => {
-  if (segment === 'year') {
-    return context?.max
-      ? Number(getSegmentsFromDate(context.max)['year'])
-      : defaultMax['year'];
-  }
+  switch (segment) {
+    case 'year':
+      return context?.max
+        ? Number(getSegmentsFromDate(context.max)['year'])
+        : defaultMax['year'];
+    case 'month':
+      return defaultMax['month'];
 
-  return defaultMax[segment];
+    case 'day':
+      return context && isValidDate(context?.date)
+        ? getDaysInUTCMonth(context.date)
+        : defaultMax['day'];
+  }
 };

From 429fcaa213bb3daeb316f1ab9b09e9eb95926738 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Thu, 11 Jan 2024 12:48:06 -0500
Subject: [PATCH 344/351] add readme (#2164)

---
 packages/date-picker/README.md                | 45 +++++++++++++++++++
 .../shared/types/BaseDatePickerProps.types.ts |  6 ++-
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/README.md b/packages/date-picker/README.md
index f6e3e2c39d..b79b6c888c 100644
--- a/packages/date-picker/README.md
+++ b/packages/date-picker/README.md
@@ -17,3 +17,48 @@ yarn add @leafygreen-ui/date-picker
 ```shell
 npm install @leafygreen-ui/date-picker
 ```
+
+## Example
+
+```js
+import { DatePicker } from '@leafygreen-ui/date-picker';
+import { setToUTCMidnight } from '@leafygreen-ui/date-utils';
+
+<DatePicker
+  label="Pick a date"
+  value={setToUTCMidnight(new Date(Date.now()))}
+  onDateChange={() => {}}
+  locale="iso8601"
+  timeZone="utc"
+/>;
+```
+
+## Properties
+
+| Prop               | Type                                                | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default   |
+| ------------------ | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
+| `label`            | `ReactNode`                                         | Label shown above the number input.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |           |
+| `description`      | `ReactNode`                                         | A description for the date picker. It's recommended to set a meaningful time zone representation as the description. (e.g. "Coordinated Universal Time")                                                                                                                                                                                                                                                                                                                                                                    |           |
+| `locale`           | `'iso8601'`\| `'string'`                            | Sets the _presentation format_ for the displayed date, and localizes month & weekday labels. Defaults to the user’s browser preference (if available), otherwise ISO-8601.                                                                                                                                                                                                                                                                                                                                                  | `iso8601` |
+| `timeZone`         | `string`                                            | A valid IANA timezone string, or UTC offset, used to calculate initial values. Defaults to the user’s browser settings.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `min`              | `Date`                                              | The earliest date accepted, in UTC                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |           |
+| `max`              | `Date`                                              | The latest date accepted, in UTC                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |           |
+| `value`            | `'Date'` \| `'InvalidDate'` \| `'null'`             | The selected date. Note that this Date object will be read as UTC time. Providing `Date.now()` could result in the incorrect date being displayed, depending on the system time zone. <br><br> To set `value` to today, regardless of timeZone, use `setToUTCMidnight(new Date(Date.now()))`. <br><br> e.g. `2023-12-31` at 20:00 in Los Angeles, will be `2024-01-01` at 04:00 in UTC. To set the correct day (`2023-12-31`) as the DatePicker value we must first convert our local timestamp to `2023-12-31` at midnight |           |
+| `onDateChange`     | `(value?: Date \| InvalidDate \| null) => void`     | Callback fired when the user makes a value change. Fired on click of a new date in the menu, or on keydown if the input contains a valid date. <br><br> _Not_ fired when a date segment changes, but does not create a full date <br><br> Callback date argument will be a Date object in UTC time, or `null`                                                                                                                                                                                                               |           |
+| `initialValue`     | `'Date'` \| `'InvalidDate'` \| `'null'`             | The initial selected date. Ignored if `value` is provided <br><br> Note that this Date object will be read as UTC time. See `value` prop documentation for more details                                                                                                                                                                                                                                                                                                                                                     |           |
+| `handleValidation` | `(value?: Date \| InvalidDate \| null) => void`     | A callback fired when validation should run, based on [form validation guidelines](https://www.mongodb.design/foundation/forms/#form-validation-error-handling). Use this callback to compute the correct `state` and `errorMessage` value.<br> <br> Callback date argument will be a Date object in UTC time, or `null`                                                                                                                                                                                                    |           |
+| `onChange`         | `(event: ChangeEvent<HTMLInputElement>) => void`    | Callback fired when any segment changes, (but not necessarily a full value)                                                                                                                                                                                                                                                                                                                                                                                                                                                 |           |
+| `baseFontSize`     | `'13'` \| `'16'`                                    | The base font size of the input. Inherits from the nearest LeafyGreenProvider                                                                                                                                                                                                                                                                                                                                                                                                                                               |           |
+| `disabled`         | `boolean`                                           | Whether the input is disabled. _Note_: will not set the `disabled` attribute on an input and the calendar menu will not open if disabled is set to true.                                                                                                                                                                                                                                                                                                                                                                    | `false`   |
+| `size`             | `'small'` \| `'xsmall'` \| `'default'` \| `'large'` | Whether the input is disabled. Note: will not set the `disabled` attribute on an input and the calendar menu will not open if disabled is set to true.                                                                                                                                                                                                                                                                                                                                                                      | `default` |
+| `state`            | `'none'` \| `'error'`                               | Whether to show an error message                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `none`    |
+| `errorMessage`     | `string`                                            | A message to show in red underneath the input when state is `Error`                                                                                                                                                                                                                                                                                                                                                                                                                                                         |           |
+| `initialOpen`      | `boolean`                                           | Whether the calendar menu is initially open. _Note_: The calendar menu will not open if disabled is set to `true`.                                                                                                                                                                                                                                                                                                                                                                                                          | `false`   |
+| `autoComplete`     | `'off'` \| `'on'` \| `'bday'`                       | Whether the input should autofill                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `off`     |
+| `darkMode`         | `boolean`                                           | Render the component in dark mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `false`   |
+
+## Special Case
+
+### Aria Labels
+
+Either `label` or `aria-labelledby` or `aria-label` must be provided, or there will be a console error. This is to ensure that screenreaders have a description for what the DatePicker does.
diff --git a/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
index 273cda29a9..db4064906e 100644
--- a/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
+++ b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
@@ -56,16 +56,20 @@ export type BaseDatePickerProps = {
 
   /**
    * The size of the input
+   *
+   * @default 'default'
    */
   size?: Size;
 
   /**
    * Whether to show an error message
+   *
+   * @default 'none'
    */
   state?: DatePickerState;
 
   /**
-   * A message to show in red underneath the input when state is Error
+   * A message to show in red underneath the input when state is `Error`
    */
   errorMessage?: string;
 

From d548aca9623204121fe5d5d1b46e5eeb6fdb70e9 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Thu, 11 Jan 2024 13:04:19 -0500
Subject: [PATCH 345/351] update README

---
 packages/date-picker/README.md | 42 +++++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/packages/date-picker/README.md b/packages/date-picker/README.md
index b79b6c888c..d2e2b352d5 100644
--- a/packages/date-picker/README.md
+++ b/packages/date-picker/README.md
@@ -22,12 +22,14 @@ npm install @leafygreen-ui/date-picker
 
 ```js
 import { DatePicker } from '@leafygreen-ui/date-picker';
-import { setToUTCMidnight } from '@leafygreen-ui/date-utils';
+
+const [date, setDate] = useState<Date>();
 
 <DatePicker
   label="Pick a date"
-  value={setToUTCMidnight(new Date(Date.now()))}
-  onDateChange={() => {}}
+  value={date}
+  max={new Date("2026-12-26")}
+  onDateChange={setDate}
   locale="iso8601"
   timeZone="utc"
 />;
@@ -57,6 +59,40 @@ import { setToUTCMidnight } from '@leafygreen-ui/date-utils';
 | `autoComplete`     | `'off'` \| `'on'` \| `'bday'`                       | Whether the input should autofill                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `off`     |
 | `darkMode`         | `boolean`                                           | Render the component in dark mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `false`   |
 
+## 🔎 Glossary
+
+### Date format
+
+The pattern in which a string stores date (& time) information. E.g. `“YYYY-DD-MM”`, `“MM/DD/YYYY”`, `“YYYY-MM-DDTHH:mm:ss.sssZ”`
+
+### Wire format (or Data format)
+
+The format of the date string passed into the component. This will typically be [ISO-8601](https://www.iso.org/iso-8601-date-and-time-format.html), but could be any format accepted by the [Date constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date).
+
+### Presentation format
+
+The format in which the date is presented to the user. By default, the HTML date input element presents this in the format of the user’s Locale (as defined in browser or OS settings).
+
+### Locale
+
+Language, script, & region information. Can also include [other data](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale).
+
+### Time Zone
+
+A string representing a user’s local time zone (e.g. “America/New_York”) or UTC offset. Valid time zones are defined by IANA, and [listed on Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List). A UTC offset can be [provided in a DateTime string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format).
+
+### UTC offset
+
+The offset of a time zone vs UTC. E.g. The UTC offset for `“America/New_York”` is -5:00, (or -4:00 depending on daylight savings).
+
+### Wire time zone (or Data time zone)
+
+The time zone information contained in the date string/object passed into the component.
+
+### Presentation time zone
+
+The time zone relative to which we present date information to the user. Can result in a different day than the wire time zone. E.g. `“2023-08-08T00:00:00Z”` (Aug. 8/2023 at midnight UTC) => `“2023-08-07T20:00:00-04:00”` (Aug. 7 at 8pm EDT)
+
 ## Special Case
 
 ### Aria Labels

From b36e61607d60fbb60a7ced45cd05da79cf604a89 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Thu, 11 Jan 2024 14:30:20 -0500
Subject: [PATCH 346/351] Date Picker x React 17 (#2163)

* LG-3697: Expose value type for useLeafyGreenTable (#2127)

* expose value type for useLeafyGreenTable

* changeset

* Remove unused code

* change header value

* Squashed commit of the following:

commit 5a5565942ef4b6a585edadc82ef2e7a695801a0a
Merge: 9578ad8a0 c080ec01a
Author: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date:   Thu Jan 11 11:12:50 2024 -0500

    Merge branch 'main' into adam/React17-renderHook

commit 9578ad8a0d49d60cdccb34bb99f1213057abdb00
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Thu Jan 11 10:43:18 2024 -0500

    Update hooks.spec.tsx

commit c080ec01a0f76d18ad513a5fc41696dd7f91e3b1
Author: Sean Park <seanpark1107@gmail.com>
Date:   Wed Jan 10 23:16:32 2024 -0500

    LG-3697: Expose value type for useLeafyGreenTable (#2127)

    * expose value type for useLeafyGreenTable

    * changeset

    * Remove unused code

    * change header value

commit 44f32b6fedf4d651ad55f4fc9a736c927bb7b7c8
Author: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date:   Wed Jan 10 17:14:50 2024 -0500

    Update config.ts

commit 030772e5008e705fc66fe220d2153728c401d802
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Wed Jan 10 15:43:51 2024 -0500

    adds docs to Exists

commit f7fdbfda8f00c5ecfc132a399ebba2f72696c196
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Wed Jan 10 15:42:57 2024 -0500

    moves globToRegex

commit 55c328392307f10ae6df9381569f239d7ba5147e
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Wed Jan 10 15:33:41 2024 -0500

    adds comment for @ts-expect-error

commit ee41597c00da439962d04cd45d1c31fc72285026
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Wed Jan 10 12:32:55 2024 -0500

    update testing-lib build script

commit f11ddfee4985acbfbb6a8d708e0aae559bc3e296
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Wed Jan 10 12:04:59 2024 -0500

    updates externalDependencies

commit 9b6023b78e0d69d3026bba8e5aeee72096b34e7b
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Wed Jan 10 11:49:18 2024 -0500

    updates dependencies

commit f921f8e649a00f1664ca5d6f8793e75b1672348b
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Wed Jan 10 11:30:41 2024 -0500

    adds changesets

commit f25d2e8191161f914c20b4a86a915493daf26009
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Wed Jan 10 11:18:03 2024 -0500

    updates hooks & toast tests

commit 232d059f4cc0aa611a2935cfd6edb8c15fa6d005
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Wed Jan 10 11:17:52 2024 -0500

    Creates `waitForState `

commit 085cad242bc401c3549b0311f9fe7cc4c9a3e323
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Tue Jan 9 16:00:33 2024 -0500

    update types in RTLOverrides

commit 021551d3ae383aab797d7c7b92c9d04b639c8793
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Tue Jan 9 15:27:02 2024 -0500

    remove `act` warnings

commit 9e6e2a95a725e37f7ab1b93f613f923d9fc17b44
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Tue Jan 9 15:21:59 2024 -0500

    Updates return value of `useToast.updateToast`

commit 77007356b0c657e41caa5f2f4bf483fb367d8f54
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Tue Jan 9 15:06:33 2024 -0500

    update usage in `hooks`

commit 3ce1187bb3f1383deb46a8e0eccdf3a7c842bd82
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Tue Jan 9 14:07:32 2024 -0500

    export `act` from @lg-tl

commit 5292c246bbb72af39ad0b5252d5812c56c26f08f
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Tue Jan 9 13:53:21 2024 -0500

    update usage in toast

commit 488ad00ee2bc22330a8712466e80a44f076d758d
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Tue Jan 9 13:53:15 2024 -0500

    update renderHook imports in basic packages

commit b46ad881984016a3ce29718a26044f2ebe12fb4b
Author: Adam Thompson <adam.thompson@mongodb.com>
Date:   Tue Jan 9 13:25:08 2024 -0500

    adds renderHook override to testing-lib

* update dp tests

* useControlledValue properly sets isControlled

* Update hooks.spec.tsx

---------

Co-authored-by: Sean Park <seanpark1107@gmail.com>
---
 .changeset/bright-walls-glow.md               |   6 ++
 .changeset/fast-bananas-watch.md              |   5 +
 .changeset/healthy-needles-learn.md           |   8 ++
 .changeset/khaki-lies-carry.md                |   5 +
 .changeset/real-tomatoes-sneeze.md            |   5 +
 .changeset/strange-scissors-prove.md          |   5 +
 packages/a11y/src/A11y.spec.tsx               |   3 +-
 .../context/SharedDatePickerContext.spec.tsx  |  24 ++---
 .../useControlledValue.spec.tsx               |  17 ++-
 .../useControlledValue/useControlledValue.ts  |   8 +-
 .../useDateSegments/useDateSegments.spec.ts   |   3 +-
 packages/hooks/src/hooks.spec.tsx             |  36 ++++---
 .../useDynamicRefs/useDynamicRefs.spec.tsx    |  29 +++--
 .../PopoverContext/PopoverContext.spec.tsx    |   3 +-
 .../TableHeaderCheckbox.tsx                   |   4 +-
 .../useLeafyGreenTable/TableRowCheckbox.tsx   |   6 +-
 .../useLeafyGreenTable/useLeafyGreenTable.tsx |  30 +++---
 .../useLeafyGreenTable.types.ts               |  13 ++-
 packages/testing-lib/package.json             |  13 ++-
 packages/testing-lib/src/RTLOverrides.ts      |  36 +++++++
 packages/testing-lib/src/index.ts             |   3 +
 packages/testing-lib/src/waitForState.ts      |  19 ++++
 packages/testing-lib/tsconfig.json            |   1 -
 .../ToastReducer/useToastReducer.spec.ts      |   3 +-
 .../ToastReducer/useToastReducer.ts           |  17 ++-
 .../ToastContext/useToast/useToast.spec.tsx   | 101 ++++++++++--------
 tools/test/package.json                       |   1 +
 tools/validate/src/dependencies/config.ts     |  20 ++--
 .../src/dependencies/utils/globToRegex.ts     |  13 +++
 .../validate/src/dependencies/utils/index.ts  |   4 +-
 .../validateListedDependencies.ts             |  12 ++-
 yarn.lock                                     |   2 +-
 32 files changed, 314 insertions(+), 141 deletions(-)
 create mode 100644 .changeset/bright-walls-glow.md
 create mode 100644 .changeset/fast-bananas-watch.md
 create mode 100644 .changeset/healthy-needles-learn.md
 create mode 100644 .changeset/khaki-lies-carry.md
 create mode 100644 .changeset/real-tomatoes-sneeze.md
 create mode 100644 .changeset/strange-scissors-prove.md
 create mode 100644 packages/testing-lib/src/RTLOverrides.ts
 create mode 100644 packages/testing-lib/src/waitForState.ts
 create mode 100644 tools/validate/src/dependencies/utils/globToRegex.ts

diff --git a/.changeset/bright-walls-glow.md b/.changeset/bright-walls-glow.md
new file mode 100644
index 0000000000..6c87c10c91
--- /dev/null
+++ b/.changeset/bright-walls-glow.md
@@ -0,0 +1,6 @@
+---
+'@lg-tools/validate': patch
+---
+
+- Adds `'@leafygreen-ui/testing-lib'` to list of external dependencies.
+- Updates handling of external dependencies with glob patterns
diff --git a/.changeset/fast-bananas-watch.md b/.changeset/fast-bananas-watch.md
new file mode 100644
index 0000000000..17e7b97cb5
--- /dev/null
+++ b/.changeset/fast-bananas-watch.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/toast': patch
+---
+
+Updates `updateToast` function to consistently return the new toast object
diff --git a/.changeset/healthy-needles-learn.md b/.changeset/healthy-needles-learn.md
new file mode 100644
index 0000000000..ffc6f8cf3d
--- /dev/null
+++ b/.changeset/healthy-needles-learn.md
@@ -0,0 +1,8 @@
+---
+'@leafygreen-ui/leafygreen-provider': patch
+'@leafygreen-ui/hooks': patch
+'@leafygreen-ui/toast': patch
+'@leafygreen-ui/a11y': patch
+---
+
+Updates test to import `renderHook` from `@leafygreen-ui/testing-lib`
diff --git a/.changeset/khaki-lies-carry.md b/.changeset/khaki-lies-carry.md
new file mode 100644
index 0000000000..cdb701c7cd
--- /dev/null
+++ b/.changeset/khaki-lies-carry.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/testing-lib': minor
+---
+
+Exports `waitForState`, a wrapper around `act` that returns the result of the state update callback
diff --git a/.changeset/real-tomatoes-sneeze.md b/.changeset/real-tomatoes-sneeze.md
new file mode 100644
index 0000000000..a0c3f8114c
--- /dev/null
+++ b/.changeset/real-tomatoes-sneeze.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/table': minor
+---
+
+Table now exposes an optional second generic type for useLeafyGreenTable that controls the type of the value
diff --git a/.changeset/strange-scissors-prove.md b/.changeset/strange-scissors-prove.md
new file mode 100644
index 0000000000..5621823002
--- /dev/null
+++ b/.changeset/strange-scissors-prove.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/testing-lib': minor
+---
+
+Exports overrides for `renderHook` and `act` that will work in both a React 17 and React 18 test environment
diff --git a/packages/a11y/src/A11y.spec.tsx b/packages/a11y/src/A11y.spec.tsx
index 410cf6afa3..020ec39814 100644
--- a/packages/a11y/src/A11y.spec.tsx
+++ b/packages/a11y/src/A11y.spec.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
 import { axe } from 'jest-axe';
 
+import { renderHook } from '@leafygreen-ui/testing-lib';
+
 import { AriaLabelProps, AriaLabelPropsWithLabel } from './AriaLabelProps';
 import {
   prefersReducedMotion,
diff --git a/packages/date-picker/src/shared/context/SharedDatePickerContext.spec.tsx b/packages/date-picker/src/shared/context/SharedDatePickerContext.spec.tsx
index 732d553314..6ea620c425 100644
--- a/packages/date-picker/src/shared/context/SharedDatePickerContext.spec.tsx
+++ b/packages/date-picker/src/shared/context/SharedDatePickerContext.spec.tsx
@@ -1,9 +1,9 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { act, waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
 
 import { Month, newUTC } from '@leafygreen-ui/date-utils';
 import { consoleOnce } from '@leafygreen-ui/lib';
+import { renderHook } from '@leafygreen-ui/testing-lib';
 
 import { MAX_DATE, MIN_DATE } from '../constants';
 
@@ -17,16 +17,16 @@ import {
 const renderSharedDatePickerProvider = (
   props?: Partial<SharedDatePickerProviderProps>,
 ) => {
-  const { result, rerender } = renderHook<
-    PropsWithChildren<{}>,
-    SharedDatePickerContextProps
-  >(useSharedDatePickerContext, {
-    wrapper: ({ children }) => (
-      <SharedDatePickerProvider label="" {...props}>
-        {children}
-      </SharedDatePickerProvider>
-    ),
-  });
+  const { result, rerender } = renderHook<SharedDatePickerContextProps, {}>(
+    useSharedDatePickerContext,
+    {
+      wrapper: ({ children }) => (
+        <SharedDatePickerProvider label="" {...props}>
+          {children}
+        </SharedDatePickerProvider>
+      ),
+    },
+  );
 
   return { result, rerender };
 };
diff --git a/packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.spec.tsx b/packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.spec.tsx
index a1cec55d7e..c380814afa 100644
--- a/packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.spec.tsx
+++ b/packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.spec.tsx
@@ -1,16 +1,21 @@
 import React from 'react';
 import { ChangeEventHandler } from 'react';
 import { render } from '@testing-library/react';
-import { renderHook, RenderHookResult } from '@testing-library/react-hooks';
+import { RenderHookResult } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { act, renderHook } from '@leafygreen-ui/testing-lib';
+
 import { useControlledValue } from './useControlledValue';
 
 const errorSpy = jest.spyOn(console, 'error');
 
 const renderUseControlledValueHook = <T extends any>(
   ...[valueProp, callback, initial]: Parameters<typeof useControlledValue<T>>
-): RenderHookResult<T, ReturnType<typeof useControlledValue<T>>> => {
+): RenderHookResult<
+  ReturnType<typeof useControlledValue<T>>,
+  typeof valueProp
+> => {
   const result = renderHook(v => useControlledValue(v, callback, initial), {
     initialProps: valueProp,
   });
@@ -18,7 +23,7 @@ const renderUseControlledValueHook = <T extends any>(
   return { ...result };
 };
 
-describe('packages/hooks/useControlledValue', () => {
+describe('packages/date-picker/hooks/useControlledValue', () => {
   beforeEach(() => {
     errorSpy.mockImplementation(() => {});
   });
@@ -109,7 +114,7 @@ describe('packages/hooks/useControlledValue', () => {
     test('setting value to undefined should keep the component controlled', () => {
       const { rerender, result } = renderUseControlledValueHook('apple');
       expect(result.current.isControlled).toBe(true);
-      rerender(undefined);
+      act(() => rerender(undefined));
       expect(result.current.isControlled).toBe(true);
     });
 
@@ -144,8 +149,10 @@ describe('packages/hooks/useControlledValue', () => {
     });
 
     test('setValue updates the value', () => {
-      const { result } = renderUseControlledValueHook<string>(undefined);
+      const { result, rerender } =
+        renderUseControlledValueHook<string>(undefined);
       result.current.setValue('banana');
+      rerender();
       expect(result.current.value).toBe('banana');
     });
   });
diff --git a/packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.ts b/packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.ts
index ffad96bf35..db1e3fe143 100644
--- a/packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.ts
+++ b/packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.ts
@@ -37,9 +37,11 @@ export const useControlledValue = <T extends any>(
   // If the value prop changes from undefined to something defined,
   // then isControlled is set to true,
   // and will remain true for the life of the component
-  const isControlled: boolean = useMemo(() => {
-    return isControlled || !isUndefined(valueProp);
-  }, [valueProp]);
+  const [isControlled, setControlled] = useState(!isUndefined(valueProp));
+  useEffect(() => {
+    setControlled(isControlled || !isUndefined(valueProp));
+  }, [isControlled, valueProp]);
+
   const wasControlled = usePrevious(isControlled);
 
   useEffect(() => {
diff --git a/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.spec.ts b/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.spec.ts
index 7a4c2e6d25..2ab50ece93 100644
--- a/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.spec.ts
+++ b/packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.spec.ts
@@ -1,6 +1,5 @@
-import { renderHook } from '@testing-library/react';
-
 import { DateType, Month, newUTC } from '@leafygreen-ui/date-utils';
+import { renderHook } from '@leafygreen-ui/testing-lib';
 
 import { useDateSegments } from './useDateSegments';
 import { OnUpdateCallback } from './useDateSegments.types';
diff --git a/packages/hooks/src/hooks.spec.tsx b/packages/hooks/src/hooks.spec.tsx
index f9ec105871..1a15480309 100644
--- a/packages/hooks/src/hooks.spec.tsx
+++ b/packages/hooks/src/hooks.spec.tsx
@@ -1,4 +1,6 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { waitFor } from '@testing-library/react';
+
+import { act, renderHook } from '@leafygreen-ui/testing-lib';
 
 import {
   useEventListener,
@@ -94,7 +96,7 @@ describe('packages/hooks', () => {
   describe.skip('useMutationObserver', () => {}); //eslint-disable-line jest/no-disabled-tests
 
   test('useViewportSize responds to updates in window size', async () => {
-    const { result, waitForNextUpdate } = renderHook(() => useViewportSize());
+    const { result, rerender } = renderHook(() => useViewportSize());
 
     const mutableWindow: { -readonly [K in keyof Window]: Window[K] } = window;
     const initialHeight = 360;
@@ -104,10 +106,11 @@ describe('packages/hooks', () => {
     mutableWindow.innerWidth = initialWidth;
 
     window.dispatchEvent(new Event('resize'));
-    await act(waitForNextUpdate);
-
-    expect(result?.current?.height).toBe(initialHeight);
-    expect(result?.current?.width).toBe(initialWidth);
+    rerender();
+    await waitFor(() => {
+      expect(result?.current?.height).toBe(initialHeight);
+      expect(result?.current?.width).toBe(initialWidth);
+    });
 
     const updateHeight = 768;
     const updateWidth = 1024;
@@ -116,10 +119,10 @@ describe('packages/hooks', () => {
     mutableWindow.innerWidth = updateWidth;
 
     window.dispatchEvent(new Event('resize'));
-    await act(waitForNextUpdate);
-
-    expect(result?.current?.height).toBe(updateHeight);
-    expect(result?.current?.width).toBe(updateWidth);
+    await waitFor(() => {
+      expect(result?.current?.height).toBe(updateHeight);
+      expect(result?.current?.width).toBe(updateWidth);
+    });
   });
 
   describe('usePoller', () => {
@@ -249,10 +252,10 @@ describe('packages/hooks', () => {
       expect(pollHandler).toHaveBeenCalledTimes(0);
     });
 
-    test('when document is not visible', () => {
+    test('when document is not visible', async () => {
       const pollHandler = jest.fn();
 
-      renderHook(() => usePoller(pollHandler));
+      const { rerender } = renderHook(() => usePoller(pollHandler));
 
       expect(pollHandler).toHaveBeenCalledTimes(1);
 
@@ -260,15 +263,18 @@ describe('packages/hooks', () => {
       act(() => {
         document.dispatchEvent(new Event('visibilitychange'));
       });
-
       jest.advanceTimersByTime(30e3);
 
       expect(pollHandler).toHaveBeenCalledTimes(1);
 
       mutableDocument.visibilityState = 'visible';
+
       act(() => {
         document.dispatchEvent(new Event('visibilitychange'));
       });
+      jest.advanceTimersByTime(30e3);
+
+      rerender(pollHandler);
 
       // immediate triggers the pollHandler
       expect(pollHandler).toHaveBeenCalledTimes(2);
@@ -308,11 +314,11 @@ describe('packages/hooks', () => {
       rerender(2020);
       expect(result.current).toEqual(42);
 
-      rerender();
+      rerender(123);
       expect(result.current).toEqual(2020);
 
       rerender();
-      expect(result.current).toEqual(2020);
+      expect(result.current).toEqual(123);
     });
   });
 
diff --git a/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx b/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
index 19c22a3b65..90a878abb3 100644
--- a/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
+++ b/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
@@ -1,6 +1,6 @@
-import { renderHook } from '@testing-library/react-hooks';
-
+// import { renderHook } from '@testing-library/react-hooks';
 import { consoleOnce } from '@leafygreen-ui/lib';
+import { renderHook } from '@leafygreen-ui/testing-lib';
 
 import { DynamicRefGetter, useDynamicRefs } from '.';
 
@@ -11,11 +11,13 @@ describe('packages/hooks/useDynamicRefs', () => {
   });
 
   test('returns identical getter when rerendered ', () => {
+    const props = { prefix: 'A' };
     const { result, rerender } = renderHook(v => useDynamicRefs(v), {
-      initialProps: { prefix: 'A' },
+      initialProps: props,
     });
-    rerender();
-    expect(result.all[0]).toBe(result.all[1]);
+    const initialValue = result.current;
+    rerender(props);
+    expect(result.current).toStrictEqual(initialValue);
   });
 
   test('returns unique getters when called with the same prefix', () => {
@@ -33,11 +35,14 @@ describe('packages/hooks/useDynamicRefs', () => {
 
   test('returns unique getters when re-rendered with a different prefix', () => {
     // This is an edge-case, but this is the behavior we want if it happens
+    const props = { prefix: 'A' };
     const { result, rerender } = renderHook(v => useDynamicRefs(v), {
-      initialProps: { prefix: 'A' },
+      initialProps: props,
     });
-    rerender({ prefix: 'B' });
-    expect(result.all[0]).not.toBe(result.all[1]);
+    const initialValue = result.current;
+    const newProps = { prefix: 'B' };
+    rerender(newProps);
+    expect(result.current).not.toBe(initialValue);
   });
 
   describe('ref getter function', () => {
@@ -66,18 +71,20 @@ describe('packages/hooks/useDynamicRefs', () => {
     });
 
     test('returns identical refs when called with the same key', () => {
-      const { result } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
+      const props = { prefix: 'A' };
+      const { result } = renderHook(() => useDynamicRefs(props));
       const ref1 = result.current('key');
       const ref2 = result.current('key');
       expect(ref1).toBe(ref2);
     });
 
     test('returns identical refs when rerendered', () => {
+      const props = { prefix: 'A' };
       const { result, rerender } = renderHook(v => useDynamicRefs(v), {
-        initialProps: { prefix: 'A' },
+        initialProps: props,
       });
       const ref1 = result.current('key');
-      rerender();
+      rerender(props);
       const ref2 = result.current('key');
       expect(ref1).toBe(ref2);
     });
diff --git a/packages/leafygreen-provider/src/PopoverContext/PopoverContext.spec.tsx b/packages/leafygreen-provider/src/PopoverContext/PopoverContext.spec.tsx
index 1f53ec961c..00b3d8dd18 100644
--- a/packages/leafygreen-provider/src/PopoverContext/PopoverContext.spec.tsx
+++ b/packages/leafygreen-provider/src/PopoverContext/PopoverContext.spec.tsx
@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { act, fireEvent, render, waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+
+import { renderHook } from '@leafygreen-ui/testing-lib';
 
 import { PopoverProvider, type PopoverState, usePopoverContext } from '.';
 
diff --git a/packages/table/src/useLeafyGreenTable/TableHeaderCheckbox.tsx b/packages/table/src/useLeafyGreenTable/TableHeaderCheckbox.tsx
index 8efe2654cb..7d8c957c40 100644
--- a/packages/table/src/useLeafyGreenTable/TableHeaderCheckbox.tsx
+++ b/packages/table/src/useLeafyGreenTable/TableHeaderCheckbox.tsx
@@ -10,10 +10,10 @@ import { useRowContext } from '../Row/RowContext';
 import { disabledTableRowCheckStyles } from './useLeafyGreenTable.styles';
 import { LGRowData, LGTableDataType } from '.';
 
-export const TableHeaderCheckbox = ({
+export const TableHeaderCheckbox = <T extends LGRowData>({
   table,
 }: {
-  table: Table<LGTableDataType<LGRowData>>;
+  table: Table<LGTableDataType<T>>;
 }) => {
   const { theme } = useDarkMode();
   const { disabled: rowIsDisabled } = useRowContext();
diff --git a/packages/table/src/useLeafyGreenTable/TableRowCheckbox.tsx b/packages/table/src/useLeafyGreenTable/TableRowCheckbox.tsx
index d0557ed2a4..c16551ca12 100644
--- a/packages/table/src/useLeafyGreenTable/TableRowCheckbox.tsx
+++ b/packages/table/src/useLeafyGreenTable/TableRowCheckbox.tsx
@@ -10,12 +10,12 @@ import { useRowContext } from '../Row/RowContext';
 import { disabledTableRowCheckStyles } from './useLeafyGreenTable.styles';
 import { LGRowData, LGTableDataType } from '.';
 
-export const TableRowCheckbox = ({
+export const TableRowCheckbox = <T extends LGRowData>({
   row,
   table,
 }: {
-  table: Table<LGTableDataType<LGRowData>>;
-  row: Row<LGTableDataType<LGRowData>>;
+  table: Table<LGTableDataType<T>>;
+  row: Row<LGTableDataType<T>>;
 }) => {
   const { theme } = useDarkMode();
   const { disabled: rowIsDisabled } = useRowContext();
diff --git a/packages/table/src/useLeafyGreenTable/useLeafyGreenTable.tsx b/packages/table/src/useLeafyGreenTable/useLeafyGreenTable.tsx
index b1ebcc62d4..7070e7f751 100644
--- a/packages/table/src/useLeafyGreenTable/useLeafyGreenTable.tsx
+++ b/packages/table/src/useLeafyGreenTable/useLeafyGreenTable.tsx
@@ -15,17 +15,7 @@ import { LeafyGreenTable, LGColumnDef, LGTableDataType } from '.';
 
 const CHECKBOX_WIDTH = 14;
 
-/**
- * A `ColumnDef` object injected into `useReactTable`'s `columns` option when the user is using selectable rows.
- */
-const baseSelectColumnConfig: LGColumnDef<LGRowData> = {
-  id: 'select',
-  size: CHECKBOX_WIDTH,
-  header: TableHeaderCheckbox,
-  cell: TableRowCheckbox,
-};
-
-function useLeafyGreenTable<T extends LGRowData>({
+function useLeafyGreenTable<T extends LGRowData, V extends unknown = unknown>({
   containerRef,
   data,
   columns: columnsProp,
@@ -34,7 +24,17 @@ function useLeafyGreenTable<T extends LGRowData>({
   useVirtualScrolling = false,
   allowSelectAll = true,
   ...rest
-}: LeafyGreenTableOptions<T>): LeafyGreenTable<T> {
+}: LeafyGreenTableOptions<T, V>): LeafyGreenTable<T> {
+  /**
+   * A `ColumnDef` object injected into `useReactTable`'s `columns` option when the user is using selectable rows.
+   */
+  const baseSelectColumnConfig: LGColumnDef<T, V> = {
+    id: 'select',
+    size: CHECKBOX_WIDTH,
+    header: TableHeaderCheckbox,
+    cell: TableRowCheckbox,
+  };
+
   const hasSortableColumns = React.useMemo(
     () => columnsProp.some(propCol => !!propCol.enableSorting),
     [columnsProp],
@@ -42,15 +42,15 @@ function useLeafyGreenTable<T extends LGRowData>({
   const selectColumnConfig = allowSelectAll
     ? baseSelectColumnConfig
     : omit(baseSelectColumnConfig, 'header');
-  const columns = React.useMemo<Array<LGColumnDef<T>>>(
+  const columns = React.useMemo<Array<LGColumnDef<T, V>>>(
     () => [
-      ...(hasSelectableRows ? [selectColumnConfig as LGColumnDef<T>] : []),
+      ...(hasSelectableRows ? [selectColumnConfig as LGColumnDef<T, V>] : []),
       ...columnsProp.map(propColumn => {
         return {
           ...propColumn,
           align: propColumn.align ?? 'left',
           enableSorting: propColumn.enableSorting ?? false,
-        } as LGColumnDef<T>;
+        } as LGColumnDef<T, V>;
       }),
     ],
     [columnsProp, hasSelectableRows, selectColumnConfig],
diff --git a/packages/table/src/useLeafyGreenTable/useLeafyGreenTable.types.ts b/packages/table/src/useLeafyGreenTable/useLeafyGreenTable.types.ts
index 0556a31eaa..f8cef2f587 100644
--- a/packages/table/src/useLeafyGreenTable/useLeafyGreenTable.types.ts
+++ b/packages/table/src/useLeafyGreenTable/useLeafyGreenTable.types.ts
@@ -31,17 +31,22 @@ export type LeafyGreenTableCell<T extends LGRowData> = Cell<
 export interface LeafyGreenTableRow<T extends LGRowData>
   extends Row<LGTableDataType<T>> {}
 
-export type LGColumnDef<T extends LGRowData> = ColumnDef<LGTableDataType<T>> & {
+export type LGColumnDef<
+  T extends LGRowData,
+  V extends unknown = unknown,
+> = ColumnDef<LGTableDataType<T>, V> & {
   align?: HTMLElementProps<'td'>['align'];
 };
 
 /** LeafyGreen extension of `useReactTable` {@link TableOptions}*/
-export interface LeafyGreenTableOptions<T extends LGRowData>
-  extends Omit<TableOptions<LGTableDataType<T>>, 'getCoreRowModel'> {
+export interface LeafyGreenTableOptions<
+  T extends LGRowData,
+  V extends unknown = unknown,
+> extends Omit<TableOptions<LGTableDataType<T>>, 'getCoreRowModel'> {
   containerRef: RefObject<HTMLDivElement>;
   hasSelectableRows?: boolean;
   useVirtualScrolling?: boolean;
-  columns: Array<LGColumnDef<T>>;
+  columns: Array<LGColumnDef<T, V>>;
   withPagination?: boolean;
   allowSelectAll?: boolean;
 }
diff --git a/packages/testing-lib/package.json b/packages/testing-lib/package.json
index e2568db3a4..e4f59a42bb 100644
--- a/packages/testing-lib/package.json
+++ b/packages/testing-lib/package.json
@@ -16,13 +16,18 @@
     "@testing-library/user-event": "13.5.0",
     "lodash": "^4.17.21"
   },
+  "devDependencies": {
+    "@lg-tools/build": "0.3.1"
+  },
   "peerDependencies": {
-    "@lg-tools/test": "0.3.2"
+    "@testing-library/react": "^12.0.0 || ^13.1.0 || ^14.0.0"
+  },
+  "optionalDependencies": {
+    "@testing-library/react-hooks": ">=3.7.0"
   },
   "scripts": {
-    "build": "lg build-package",
-    "tsc": "lg build-ts",
-    "docs": "lg build-tsdoc"
+    "build": "lg-internal-build-package",
+    "tsc": "tsc --build tsconfig.json"
   },
   "license": "Apache-2.0",
   "publishConfig": {
diff --git a/packages/testing-lib/src/RTLOverrides.ts b/packages/testing-lib/src/RTLOverrides.ts
new file mode 100644
index 0000000000..2562f60e0a
--- /dev/null
+++ b/packages/testing-lib/src/RTLOverrides.ts
@@ -0,0 +1,36 @@
+import * as RTL from '@testing-library/react';
+
+/**
+ * Utility type that returns `X.Y` if it exists, otherwise defaults to fallback type `Z`, or `any`
+ */
+export type Exists<
+  X,
+  Y extends keyof X | string,
+  Z = unknown,
+> = Y extends keyof X ? X[Y] : Z;
+
+/**
+ * Re-exports `renderHook` from `"@testing-library/react"` if it exists,
+ * or from `"@testing-library/react-hooks"`
+ *
+ * (used when running in a React 17 test environment)
+ */
+export const renderHook: Exists<typeof RTL, 'renderHook'> =
+  (RTL as any).renderHook ??
+  (() => {
+    const RHTL = require('@testing-library/react-hooks');
+    return RHTL.renderHook;
+  })();
+
+/**
+ * Re-exports `act` from `"@testing-library/react"` if it exists,
+ * or from `"@testing-library/react-hooks"`
+ *
+ * (used when running in a React 17 test environment)
+ */
+export const act: Exists<typeof RTL, 'act'> =
+  RTL.act ??
+  (() => {
+    const RHTL = require('@testing-library/react-hooks');
+    return RHTL.act;
+  })();
diff --git a/packages/testing-lib/src/index.ts b/packages/testing-lib/src/index.ts
index dc9301d6b5..6d8ae4de56 100644
--- a/packages/testing-lib/src/index.ts
+++ b/packages/testing-lib/src/index.ts
@@ -1,6 +1,9 @@
 import * as Context from './context';
 import * as jest from './jest';
 import * as JestDOM from './jest-dom';
+export { act, renderHook } from './RTLOverrides';
+export { waitForState } from './waitForState';
+
 export { Context, jest, JestDOM };
 
 export { eventContainingTargetValue } from './eventContainingTargetValue';
diff --git a/packages/testing-lib/src/waitForState.ts b/packages/testing-lib/src/waitForState.ts
new file mode 100644
index 0000000000..b7f0b67c8c
--- /dev/null
+++ b/packages/testing-lib/src/waitForState.ts
@@ -0,0 +1,19 @@
+import { act } from './RTLOverrides';
+
+/**
+ * Wrapper around `act`.
+ *
+ * Awaits an `act` call,
+ * and returns the value of the state update callback
+ */
+export const waitForState = async <T extends any>(
+  callback: () => T,
+): Promise<T> => {
+  let val: T;
+  await act(() => {
+    val = callback();
+  });
+
+  // @ts-expect-error - val is returned before TS sees it as being defined
+  return val;
+};
diff --git a/packages/testing-lib/tsconfig.json b/packages/testing-lib/tsconfig.json
index 9f2d965a63..edb1c03f02 100644
--- a/packages/testing-lib/tsconfig.json
+++ b/packages/testing-lib/tsconfig.json
@@ -6,7 +6,6 @@
     "rootDir": "src",
     "baseUrl": ".",
     "paths": {
-      "@leafygreen-ui/icon/dist/*": ["../icon/src/generated/*"],
       "@leafygreen-ui/*": ["../*/src"]
     }
   },
diff --git a/packages/toast/src/ToastContext/ToastReducer/useToastReducer.spec.ts b/packages/toast/src/ToastContext/ToastReducer/useToastReducer.spec.ts
index a8d8e631f0..b79aa3f886 100644
--- a/packages/toast/src/ToastContext/ToastReducer/useToastReducer.spec.ts
+++ b/packages/toast/src/ToastContext/ToastReducer/useToastReducer.spec.ts
@@ -1,6 +1,7 @@
 import { act } from 'react-dom/test-utils';
 import { cleanup } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+
+import { renderHook } from '@leafygreen-ui/testing-lib';
 
 import { Variant } from '../../Toast.types';
 import { ToastId, ToastStack } from '../ToastContext.types';
diff --git a/packages/toast/src/ToastContext/ToastReducer/useToastReducer.ts b/packages/toast/src/ToastContext/ToastReducer/useToastReducer.ts
index 6cf56148dc..501c87657a 100644
--- a/packages/toast/src/ToastContext/ToastReducer/useToastReducer.ts
+++ b/packages/toast/src/ToastContext/ToastReducer/useToastReducer.ts
@@ -113,16 +113,25 @@ export const useToastReducer = (initialValue?: ToastStack) => {
 
   const updateToast: ToastContextProps['updateToast'] = useCallback(
     (id: ToastId, props: Partial<ToastProps>) => {
-      dispatch({
+      const action: ToastReducerAction = {
         type: ToastReducerActionType.Update,
         payload: {
           id,
           props,
         },
-      });
-      return getToast(id);
+      };
+
+      dispatch(action);
+
+      // `getToast` will return the previous toast value,
+      // so we need to apply the state change manually
+      // in order to return the updated value
+      const { stack: newStack } = toastReducer({ stack }, action);
+      const updatedToast = newStack.get(id);
+
+      return updatedToast;
     },
-    [getToast],
+    [stack],
   );
 
   const clearStack: ToastContextProps['clearStack'] = useCallback(() => {
diff --git a/packages/toast/src/ToastContext/useToast/useToast.spec.tsx b/packages/toast/src/ToastContext/useToast/useToast.spec.tsx
index 78b606f7b0..e3da1e5c4b 100644
--- a/packages/toast/src/ToastContext/useToast/useToast.spec.tsx
+++ b/packages/toast/src/ToastContext/useToast/useToast.spec.tsx
@@ -1,14 +1,11 @@
 import React, { PropsWithChildren, useEffect } from 'react';
 import { render } from '@testing-library/react';
-import {
-  cleanup,
-  renderHook,
-  RenderHookResult,
-} from '@testing-library/react-hooks';
+import { cleanup } from '@testing-library/react-hooks';
+
+import { renderHook, waitForState } from '@leafygreen-ui/testing-lib';
 
 import { ToastProps, Variant } from '../../Toast.types';
 import { ToastContext } from '../ToastContext';
-import { ToastContextProps } from '../ToastContext.types';
 import { useToastReducer } from '../ToastReducer';
 import {
   makeToast,
@@ -56,63 +53,83 @@ describe('packages/toast/useToast', () => {
     });
 
     describe('returned functions return correct values', () => {
-      let current: RenderHookResult<
-        unknown,
-        ToastContextProps
-      >['result']['current'];
-
-      beforeEach(() => {
-        const { result } = renderHook(useToast, { wrapper: ToastProviderMock });
-        current = result.current;
-      });
-
-      test('pushToast => ToastId', () => {
-        const { pushToast } = current;
-        const toastId = pushToast({ title: 'test' });
+      test('pushToast => ToastId', async () => {
+        const { result } = renderHook(useToast, {
+          wrapper: ToastProviderMock,
+        });
+        const { pushToast } = result.current;
+        const toastId = await waitForState(() => pushToast({ title: 'test' }));
         expect(toastId).toEqual(expect.stringContaining('toast-'));
       });
 
-      test('getToast => ToastProps', () => {
-        const { pushToast, getToast } = current;
-        const toastId = pushToast({ title: 'test' });
+      test('getToast => ToastProps', async () => {
+        const { result, rerender } = renderHook(useToast, {
+          wrapper: ToastProviderMock,
+        });
+        const { pushToast, getToast } = result.current;
+
+        const toastId = await waitForState(() => pushToast({ title: 'test' }));
+        rerender();
         expect(getToast(toastId)).toEqual(
           expect.objectContaining({ title: 'test' }),
         );
       });
 
-      test('updateToast => ToastProps', () => {
-        const { pushToast, updateToast } = current;
-        const toastId = pushToast({
-          title: 'test',
-          variant: Variant.Progress,
-          progress: 0,
+      test('updateToast => ToastProps', async () => {
+        const { result, rerender } = renderHook(useToast, {
+          wrapper: ToastProviderMock,
+        });
+        const { pushToast, updateToast } = result.current;
+        const toastId = await waitForState(() =>
+          pushToast({
+            title: 'test',
+            variant: Variant.Progress,
+            progress: 0,
+          }),
+        );
+        const updatedToast = await waitForState(() => {
+          rerender();
+          return updateToast(toastId, {
+            progress: 0.5,
+          });
         });
 
-        expect(updateToast(toastId, { progress: 0.5 })).toEqual(
+        expect(updatedToast).toEqual(
           expect.objectContaining({ progress: 0.5 }),
         );
       });
 
-      test('popToast => ToastProps', () => {
-        const { pushToast, popToast } = current;
-        const toastId = pushToast({ title: 'test' });
-        expect(popToast(toastId)).toEqual(
-          expect.objectContaining({ title: 'test' }),
-        );
+      test('popToast => ToastProps', async () => {
+        const { result, rerender } = renderHook(useToast, {
+          wrapper: ToastProviderMock,
+        });
+        const { pushToast, popToast } = result.current;
+        const toastId = await waitForState(() => pushToast({ title: 'test' }));
+        rerender();
+        const poppedToast = await waitForState(() => popToast(toastId));
+        expect(poppedToast).toEqual(expect.objectContaining({ title: 'test' }));
       });
 
-      test('getStack => ToastStack (Map)', () => {
-        const { pushToast, getStack } = current;
-        pushToast({ title: 'test' });
+      test('getStack => ToastStack (Map)', async () => {
+        const { result, rerender } = renderHook(useToast, {
+          wrapper: ToastProviderMock,
+        });
+        const { pushToast, getStack } = result.current;
+        await waitForState(() => pushToast({ title: 'test' }));
+        rerender();
 
         expect(getStack()).toBeDefined();
         expect(getStack()?.size).toEqual(1);
       });
 
-      test('clearStack => void', () => {
-        const { pushToast, clearStack, getStack } = current;
-        pushToast({ title: 'test' });
-        expect(clearStack()).toBeUndefined();
+      test('clearStack => void', async () => {
+        const { result } = renderHook(useToast, {
+          wrapper: ToastProviderMock,
+        });
+        const { pushToast, clearStack, getStack } = result.current;
+        await waitForState(() => pushToast({ title: 'test' }));
+        const clearedStack = await waitForState(() => clearStack());
+        expect(clearedStack).toBeUndefined();
         expect(getStack()?.size).toEqual(0);
       });
     });
diff --git a/tools/test/package.json b/tools/test/package.json
index 31e827c99e..2561068ccf 100644
--- a/tools/test/package.json
+++ b/tools/test/package.json
@@ -19,6 +19,7 @@
     "@emotion/server": "11.11.0",
     "@lg-tools/build": "0.3.1",
     "@lg-tools/meta": "0.1.5",
+    "@leafygreen-ui/testing-lib": "^0.3.4",
     "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
diff --git a/tools/validate/src/dependencies/config.ts b/tools/validate/src/dependencies/config.ts
index 5fc01cf7d5..421ff2ae26 100644
--- a/tools/validate/src/dependencies/config.ts
+++ b/tools/validate/src/dependencies/config.ts
@@ -38,34 +38,38 @@ export const ignoreFilePatterns: Array<RegExp> = [
 ];
 
 /**
- * These dependencies will be ignored when listed in a package.json.
  * These are globally available dev dependencies.
- * We don't want every component flagged for not having
- * these packages explicitly declared in its package.json
+ *
+ * Packages that omit these dependencies will not be flagged for missing dependencies.
+ *
+ * Packages that list these dependencies will not be flagged for unused dependencies
  */
-export const ignoreDependencies = [
-  '@leafygreen-ui/mongo-nav',
+export const externalDependencies = [
   '@babel/*',
   '@emotion/*',
+  '@leafygreen-ui/mongo-nav',
+  '@leafygreen-ui/testing-lib',
   '@rollup/*',
   '@storybook/*',
   '@svgr/*',
   '@testing-library/*',
   '@types/*',
-  '@typescript-*',
+  '@typescript-eslint/*',
   'buffer',
   'eslint*',
-  'jest*',
+  'jest',
+  'jest-*',
   'jest-axe',
   'prettier*',
   'prop-types',
   'react-*',
   'rollup*',
   'storybook-*',
+  'typescript',
   '*-loader',
   '*-lint*',
 ];
 
 export const depcheckOptions: depcheck.Options = {
-  ignoreMatches: ignoreDependencies,
+  ignoreMatches: externalDependencies,
 };
diff --git a/tools/validate/src/dependencies/utils/globToRegex.ts b/tools/validate/src/dependencies/utils/globToRegex.ts
new file mode 100644
index 0000000000..55c7c3359c
--- /dev/null
+++ b/tools/validate/src/dependencies/utils/globToRegex.ts
@@ -0,0 +1,13 @@
+/**
+ * Returns a _very_ rough approximation of a regex pattern,
+ * given a glob pattern.
+ *
+ * e.g. `globToRegex('@leafygreen-ui/*') // /@leafygreen-ui\/.+/`
+ *
+ * @internal
+ */
+export const globToRegex = (globPattern: string): RegExp => {
+  const regexPattern = globPattern.replace('*', '.+').replace('/', '\\/');
+  const regEx = new RegExp(regexPattern);
+  return regEx;
+};
diff --git a/tools/validate/src/dependencies/utils/index.ts b/tools/validate/src/dependencies/utils/index.ts
index 5230b90160..9df9de2655 100644
--- a/tools/validate/src/dependencies/utils/index.ts
+++ b/tools/validate/src/dependencies/utils/index.ts
@@ -7,7 +7,7 @@ import path from 'path';
 
 import {
   devFilePatterns,
-  ignoreDependencies,
+  externalDependencies,
   ignoreFilePatterns,
 } from '../config';
 
@@ -106,7 +106,7 @@ export const isDependencyUsedInSourceFile = (
   importedPackages: depcheck.Results['using'],
 ): boolean => {
   // consider a dependency used in a package file if its in `ignoreMatches`
-  const isIgnored = ignoreDependencies.includes(depName);
+  const isIgnored = externalDependencies.includes(depName);
   const usedInPackageFile = importedPackages?.[depName]?.some(
     // is used in at least one...
     // file that is not ignored
diff --git a/tools/validate/src/dependencies/validateListedDependencies.ts b/tools/validate/src/dependencies/validateListedDependencies.ts
index 9aa9797f33..3af60c4fe8 100644
--- a/tools/validate/src/dependencies/validateListedDependencies.ts
+++ b/tools/validate/src/dependencies/validateListedDependencies.ts
@@ -5,7 +5,8 @@ import path from 'path';
 
 import { ValidateCommandOptions } from '../validate.types';
 
-import { DepCheckFunctionProps, ignoreDependencies } from './config';
+import { globToRegex } from './utils/globToRegex';
+import { DepCheckFunctionProps, externalDependencies } from './config';
 import {
   isDependencyOnlyUsedInTestFile,
   sortDependenciesByUsage,
@@ -38,16 +39,18 @@ export function validateListedDependencies(
     const listedButOnlyUsedAsDev = listedDependencies.filter(
       listedDepName =>
         !importedPackagesInSourceFile.includes(listedDepName) &&
-        !ignoreDependencies.includes(listedDepName),
+        !externalDependencies.some(glob => {
+          const regEx = globToRegex(glob);
+          return regEx.test(listedDepName);
+        }),
     );
 
-    verbose &&
+    if (listedButOnlyUsedAsDev.length && verbose) {
       console.log(
         `${chalk.blue(
           pkgName,
         )}: lists packages as dependency, but only uses them in test files`,
       );
-    verbose &&
       console.log(
         listedButOnlyUsedAsDev
           .map(
@@ -60,6 +63,7 @@ export function validateListedDependencies(
           )
           .join('\n'),
       );
+    }
 
     return listedButOnlyUsedAsDev;
   }
diff --git a/yarn.lock b/yarn.lock
index 9af9789a06..8f1def6e4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4189,7 +4189,7 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react-hooks@8.0.1":
+"@testing-library/react-hooks@8.0.1", "@testing-library/react-hooks@>=3.7.0":
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12"
   integrity sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==

From a24d14a5e2407cbaa39290f8110750952e2ef19d Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Thu, 11 Jan 2024 15:25:55 -0500
Subject: [PATCH 347/351] fix label in README

---
 packages/date-picker/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/README.md b/packages/date-picker/README.md
index d2e2b352d5..23e4a1de37 100644
--- a/packages/date-picker/README.md
+++ b/packages/date-picker/README.md
@@ -39,7 +39,7 @@ const [date, setDate] = useState<Date>();
 
 | Prop               | Type                                                | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default   |
 | ------------------ | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| `label`            | `ReactNode`                                         | Label shown above the number input.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |           |
+| `label`            | `ReactNode`                                         | Label shown above the date picker.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |           |
 | `description`      | `ReactNode`                                         | A description for the date picker. It's recommended to set a meaningful time zone representation as the description. (e.g. "Coordinated Universal Time")                                                                                                                                                                                                                                                                                                                                                                    |           |
 | `locale`           | `'iso8601'`\| `'string'`                            | Sets the _presentation format_ for the displayed date, and localizes month & weekday labels. Defaults to the user’s browser preference (if available), otherwise ISO-8601.                                                                                                                                                                                                                                                                                                                                                  | `iso8601` |
 | `timeZone`         | `string`                                            | A valid IANA timezone string, or UTC offset, used to calculate initial values. Defaults to the user’s browser settings.                                                                                                                                                                                                                                                                                                                                                                                                     |

From 87f1260df60be7d9227e71df7b4b86ecf72a8af7 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Thu, 11 Jan 2024 17:03:39 -0500
Subject: [PATCH 348/351] Date picker [LG-3911] Responding to `null` and
 `"Invalid Date"` values (#2147)

* add component tests for invalid date

* move types

* creates InvalidDate

* update isValidDate

* update checks in getISODateTZ & getISODate

* update stories TS

* updates getSegmentsFromDate

* add test to ensure mocked dates are valid

* updates some utils to accept DateType as param

* update sameDay check in useDateSegment

* updates Context

* Update DatePickerInput.tsx

* fixes menu TS

* updates & tests useDateSegments

* Add re-render tests to DateInputBox

* Adds DateInputBox test for invalid date

* adds invalidDate tests for DatePicker

* adds DateInputBox tests

* adds isInvalidDateObject

* updates newDateFromSegments

* Sets values to `Invalid Date`

* run range validation only for valid dates

* Update DatePickerInput.tsx

* add value debugging to story

* Displays Error message for invalid dates

* update dateInputBox setValue signature

* add more complex error tests

* clear error message if value to validate is null

* Update DatePickerInput.tsx

* re-enable tests

* Change story update fn signature to DateInputChangeEventHandler

* fix ts

* rm flaky tests

* improve isNextFocusElementASegment check

* fix ts
---
 .../date-picker/src/DatePicker.stories.tsx    |  42 ++-
 .../src/DatePicker/DatePicker.spec.tsx        | 102 ++++---
 .../DatePickerContext/DatePickerContext.tsx   |  50 ++--
 .../DatePickerInput/DatePickerInput.tsx       |  44 +--
 .../DateInputBox/DateInputBox.spec.tsx        | 251 ++++++++++++------
 .../DateInputBox/DateInputBox.stories.tsx     |  24 +-
 .../DateInput/DateInputBox/DateInputBox.tsx   |  66 ++---
 .../DateInputBox/DateInputBox.types.ts        |  12 +-
 .../shared/utils/newDateFromSegments/index.ts |  27 +-
 .../newDateFromSegments.spec.ts               | 106 +++++---
 .../newDateFromSegments.ts                    |  26 ++
 packages/date-utils/src/index.ts              |   2 +-
 packages/date-utils/src/isValidDate/index.ts  |   7 +-
 .../src/isValidDate/isValidDate.spec.ts       |  47 +++-
 .../date-utils/src/isValidDate/isValidDate.ts |  37 ++-
 15 files changed, 538 insertions(+), 305 deletions(-)
 create mode 100644 packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.ts

diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
index 06d7e01533..e6e5bdff42 100644
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useState } from 'react';
 import { StoryFn } from '@storybook/react';
+import { isNull, isUndefined } from 'lodash';
 
 import Button from '@leafygreen-ui/button';
 import {
@@ -11,10 +12,12 @@ import {
   testLocales,
   testTimeZoneLabels,
 } from '@leafygreen-ui/date-utils';
+import { css } from '@leafygreen-ui/emotion';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
 import Modal from '@leafygreen-ui/modal';
 import { Size } from '@leafygreen-ui/tokens';
+import { Overline } from '@leafygreen-ui/typography';
 
 import { MAX_DATE, MIN_DATE } from './shared/constants';
 import {
@@ -97,21 +100,34 @@ export const LiveExample: StoryFn<typeof DatePicker> = props => {
   const [value, setValue] = useState<DateType>();
 
   return (
-    <DatePicker
-      {...props}
-      value={value}
-      onDateChange={v => {
-        // eslint-disable-next-line no-console
-        console.log('Storybook: onDateChange', { v });
-        if (isValidDate(v)) {
+    <div
+      className={css`
+        width: 200px;
+      `}
+    >
+      <DatePicker
+        {...props}
+        value={value}
+        onDateChange={v => {
+          // eslint-disable-next-line no-console
+          console.log('Storybook: onDateChange', { v });
           setValue(v);
+        }}
+        handleValidation={date =>
+          // eslint-disable-next-line no-console
+          console.log('Storybook: handleValidation', { date })
         }
-      }}
-      handleValidation={date =>
-        // eslint-disable-next-line no-console
-        console.log('Storybook: handleValidation', { date })
-      }
-    />
+      />
+      <br />
+      <Overline>Current value</Overline>
+      <code>
+        {isValidDate(value)
+          ? value.toISOString()
+          : isNull(value) || isUndefined(value)
+          ? String(value)
+          : value.toDateString()}
+      </code>
+    </div>
   );
 };
 
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index a13deb026d..7cd1afade7 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1607,6 +1607,9 @@ describe('packages/date-picker', () => {
                             'lg-form_field-error_message',
                           );
                           expect(errorElement).toBeInTheDocument();
+                          expect(errorElement).toHaveTextContent(
+                            '2021-02-29 is not a valid date',
+                          );
                         });
                       });
 
@@ -1634,27 +1637,12 @@ describe('packages/date-picker', () => {
                             'lg-form_field-error_message',
                           );
                           expect(errorElement).toBeInTheDocument();
+                          expect(errorElement).toHaveTextContent(
+                            '2020-02-31 is not a valid date',
+                          );
                         });
                       });
 
-                      test('error state stays after menu is closed', async () => {
-                        const result = renderDatePicker({
-                          value: newUTC(2020, Month.January, 31),
-                        });
-                        const input = getRelevantInput(result);
-                        userEvent.click(input);
-                        userEvent.keyboard('{arrowup}');
-                        const { menuContainerEl } =
-                          await result.findMenuElements();
-                        userEvent.click(result.container.parentElement!);
-
-                        await waitForElementToBeRemoved(menuContainerEl);
-                        const errorElement = result.queryByTestId(
-                          'lg-form_field-error_message',
-                        );
-                        expect(errorElement).toBeInTheDocument();
-                      });
-
                       break;
                     }
 
@@ -1923,6 +1911,9 @@ describe('packages/date-picker', () => {
                             'lg-form_field-error_message',
                           );
                           expect(errorElement).toBeInTheDocument();
+                          expect(errorElement).toHaveTextContent(
+                            '2019-02-29 is not a valid date',
+                          );
                         });
                       });
 
@@ -1950,27 +1941,12 @@ describe('packages/date-picker', () => {
                             'lg-form_field-error_message',
                           );
                           expect(errorElement).toBeInTheDocument();
+                          expect(errorElement).toHaveTextContent(
+                            '2020-02-31 is not a valid date',
+                          );
                         });
                       });
 
-                      test('error state stays after menu is closed', async () => {
-                        const result = renderDatePicker({
-                          value: newUTC(2020, Month.March, 31),
-                        });
-                        const input = getRelevantInput(result);
-                        userEvent.click(input);
-                        userEvent.keyboard('{arrowdown}');
-                        const { menuContainerEl } =
-                          await result.findMenuElements();
-                        userEvent.click(result.container.parentElement!);
-
-                        await waitForElementToBeRemoved(menuContainerEl);
-                        const errorElement = result.queryByTestId(
-                          'lg-form_field-error_message',
-                        );
-                        expect(errorElement).toBeInTheDocument();
-                      });
-
                       break;
                     }
 
@@ -2844,7 +2820,6 @@ describe('packages/date-picker', () => {
           });
         });
 
-        // TODO:
         describe('if the value is not a valid date', () => {
           // E.g. Feb 31 2020
           test('the input is rendered with the typed date', async () => {
@@ -2873,6 +2848,9 @@ describe('packages/date-picker', () => {
             expect(inputContainer).toHaveAttribute('aria-invalid', 'true');
             const errorElement = queryByTestId('lg-form_field-error_message');
             expect(errorElement).toBeInTheDocument();
+            expect(errorElement).toHaveTextContent(
+              '2020-02-31 is not a valid date',
+            );
           });
         });
 
@@ -3484,6 +3462,56 @@ describe('packages/date-picker', () => {
         });
       });
 
+      describe('Error messages', () => {
+        test('Updating the input to a still-invalid date updates the error message', () => {
+          const { yearInput, monthInput, dayInput, queryByTestId } =
+            renderDatePicker({});
+          userEvent.type(yearInput, '2020');
+          userEvent.type(monthInput, '02');
+          userEvent.type(dayInput, '31');
+          userEvent.tab();
+          let errorElement = queryByTestId('lg-form_field-error_message');
+          expect(errorElement).toHaveTextContent(
+            '2020-02-31 is not a valid date',
+          );
+
+          userEvent.type(dayInput, '{backspace}0');
+          userEvent.tab();
+          errorElement = queryByTestId('lg-form_field-error_message');
+          expect(errorElement).toHaveTextContent(
+            '2020-02-30 is not a valid date',
+          );
+
+          userEvent.type(dayInput, '{backspace}{backspace}');
+          userEvent.tab();
+          errorElement = queryByTestId('lg-form_field-error_message');
+          expect(errorElement).toHaveTextContent(
+            '2020-02- is not a valid date',
+          );
+        });
+
+        test('Clearing the input after an invalid date error message is displayed removes the message', () => {
+          const { yearInput, monthInput, dayInput, queryByTestId } =
+            renderDatePicker({});
+          userEvent.type(yearInput, '2020');
+          userEvent.type(monthInput, '02');
+          userEvent.type(dayInput, '31');
+          const errorElement = queryByTestId('lg-form_field-error_message');
+          expect(errorElement).toHaveTextContent(
+            '2020-02-31 is not a valid date',
+          );
+
+          userEvent.type(dayInput, '{backspace}{backspace}');
+          userEvent.type(monthInput, '{backspace}{backspace}');
+          userEvent.type(
+            yearInput,
+            '{backspace}{backspace}{backspace}{backspace}',
+          );
+          const errorElement2 = queryByTestId('lg-form_field-error_message');
+          expect(errorElement2).not.toBeInTheDocument();
+        });
+      });
+
       // JSDOM does not support layout: https://github.com/testing-library/react-testing-library/issues/671
       test.todo('page does not scroll when arrow keys are pressed');
     });
diff --git a/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
index 5028c07dfb..06e1cf2948 100644
--- a/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx
@@ -8,6 +8,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import { isNull } from 'lodash';
 
 import {
   DateType,
@@ -20,13 +21,7 @@ import {
 import { usePrevious } from '@leafygreen-ui/hooks';
 
 import { useSharedDatePickerContext } from '../../shared/context';
-import {
-  doSegmentsFormValidDate,
-  getFormattedDateString,
-  getFormattedDateStringFromSegments,
-  getSegmentStateFromRefs,
-  isEverySegmentFilled,
-} from '../../shared/utils';
+import { getFormattedDateString } from '../../shared/utils';
 import { getInitialHighlight } from '../utils/getInitialHighlight';
 
 import {
@@ -122,36 +117,23 @@ export const DatePickerProvider = ({
    */
   const handleValidation = (val?: DateType): void => {
     // Set an internal error state if necessary
-    if (val && !isInRange(val)) {
-      if (isOnOrBefore(val, min)) {
-        setInternalErrorMessage(
-          `Date must be after ${getFormattedDateString(min, locale)}`,
-        );
+    if (isValidDate(val)) {
+      if (isInRange(val)) {
+        clearInternalErrorMessage();
       } else {
-        setInternalErrorMessage(
-          `Date must be before ${getFormattedDateString(max, locale)}`,
-        );
-      }
-    } else {
-      // Wait for the inputs to update, then check they're valid
-      setTimeout(() => {
-        const segments = getSegmentStateFromRefs(refs.segmentRefs);
-        const areAllFilled = isEverySegmentFilled(segments);
-        const areSegmentsValidDate = doSegmentsFormValidDate(segments);
-
-        // If the segments are valid, clear any error messages
-        if (areSegmentsValidDate) {
-          clearInternalErrorMessage();
-        } else if (areAllFilled) {
-          // Show an error iff areAllFilled
-          const dateString = getFormattedDateStringFromSegments(
-            segments,
-            locale,
+        if (isOnOrBefore(val, min)) {
+          setInternalErrorMessage(
+            `Date must be after ${getFormattedDateString(min, locale)}`,
+          );
+        } else {
+          setInternalErrorMessage(
+            `Date must be before ${getFormattedDateString(max, locale)}`,
           );
-          // Setting the error message here is likely redundant (handled by DateInputBox)
-          setInternalErrorMessage(`${dateString} is not a valid date`);
         }
-      });
+      }
+    } else if (isNull(val)) {
+      // This could still be an error, but it's not defined internally
+      clearInternalErrorMessage();
     }
 
     _handleValidation?.(val);
diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index 9d2b71fd4e..a883b12c28 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -5,14 +5,17 @@ import React, {
   KeyboardEventHandler,
   MouseEventHandler,
 } from 'react';
+import { isNull } from 'lodash';
+import { DateInputChangeEventHandler } from 'src/shared/components/DateInput/DateInputBox/DateInputBox.types';
 
-import { DateType, isSameUTCDay } from '@leafygreen-ui/date-utils';
+import { isInvalidDateObject, isSameUTCDay } from '@leafygreen-ui/date-utils';
 import { createSyntheticEvent, keyMap } from '@leafygreen-ui/lib';
 
 import { DateFormField, DateInputBox } from '../../shared/components/DateInput';
 import { DateInputSegmentChangeEventHandler } from '../../shared/components/DateInput/DateInputSegment';
 import { useSharedDatePickerContext } from '../../shared/context';
 import {
+  getFormattedDateStringFromSegments,
   getRelativeSegmentRef,
   isElementInputSegment,
 } from '../../shared/utils';
@@ -31,8 +34,13 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     }: DatePickerInputProps,
     fwdRef,
   ) => {
-    const { formatParts, disabled, isDirty, setIsDirty } =
-      useSharedDatePickerContext();
+    const {
+      formatParts,
+      disabled,
+      locale,
+      setIsDirty,
+      setInternalErrorMessage,
+    } = useSharedDatePickerContext();
     const {
       refs: { segmentRefs, calendarButtonRef },
       value,
@@ -43,10 +51,18 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
     } = useDatePickerContext();
 
     /** Called when the input's Date value has changed */
-    const handleInputValueChange = (inputVal?: DateType) => {
-      if (!isSameUTCDay(inputVal, value)) {
-        handleValidation?.(inputVal);
-        setValue(inputVal || null);
+    const handleInputValueChange: DateInputChangeEventHandler = ({
+      value: newVal,
+      segments,
+    }) => {
+      if (!isSameUTCDay(newVal, value)) {
+        handleValidation?.(newVal);
+        setValue(newVal);
+      }
+
+      if (!isNull(newVal) && isInvalidDateObject(newVal)) {
+        const dateString = getFormattedDateStringFromSegments(segments, locale);
+        setInternalErrorMessage(`${dateString} is not a valid date`);
       }
     };
 
@@ -170,13 +186,11 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
      */
     const handleInputBlur: FocusEventHandler = e => {
       const nextFocus = e.relatedTarget as HTMLInputElement;
+      const isNextFocusElementASegment = Object.values(segmentRefs)
+        .map(ref => ref.current)
+        .includes(nextFocus);
 
-      // If the next focus is _not_ on a segment
-      if (
-        !Object.values(segmentRefs)
-          .map(ref => ref.current)
-          .includes(nextFocus)
-      ) {
+      if (!isNextFocusElementASegment) {
         setIsDirty(true);
         handleValidation?.(value);
       }
@@ -190,10 +204,6 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       segmentChangeEvent => {
         const { segment } = segmentChangeEvent;
 
-        if (isDirty) {
-          handleValidation?.(value);
-        }
-
         /**
          * Fire a simulated `change` event
          */
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
index 8e16735c09..157f27b7d4 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -6,7 +6,6 @@ import userEvent from '@testing-library/user-event';
 import { Month, newUTC } from '@leafygreen-ui/date-utils';
 
 import {
-  defaultSharedDatePickerContext,
   SharedDatePickerProvider,
   SharedDatePickerProviderProps,
 } from '../../../context';
@@ -29,10 +28,7 @@ const renderDateInputBox = (
     newProps?: Omit<DateInputBoxProps, 'segmentRefs'>,
   ) => {
     result.rerender(
-      <SharedDatePickerProvider
-        {...defaultSharedDatePickerContext}
-        {...context}
-      >
+      <SharedDatePickerProvider label="label" {...context}>
         <DateInputBox {...props} {...newProps} segmentRefs={segmentRefsMock} />
       </SharedDatePickerProvider>,
     );
@@ -192,95 +188,184 @@ describe('packages/date-picker/shared/date-input-box', () => {
   });
 
   describe('Typing', () => {
-    test('updates the rendered segment value', () => {
-      const { dayInput } = renderDateInputBox(undefined, testContext);
-      userEvent.type(dayInput, '26');
-      expect(dayInput.value).toBe('26');
-    });
+    describe('single segment', () => {
+      test('updates the rendered segment value', () => {
+        const { dayInput } = renderDateInputBox(undefined, testContext);
+        userEvent.type(dayInput, '26');
+        expect(dayInput.value).toBe('26');
+      });
 
-    test('segment value is not immediately formatted', () => {
-      const { dayInput } = renderDateInputBox(undefined, testContext);
-      userEvent.type(dayInput, '2');
-      expect(dayInput.value).toBe('2');
-    });
+      test('segment value is not immediately formatted', () => {
+        const { dayInput } = renderDateInputBox(undefined, testContext);
+        userEvent.type(dayInput, '2');
+        expect(dayInput.value).toBe('2');
+      });
 
-    test('value is formatted on segment blur', () => {
-      const { dayInput } = renderDateInputBox(undefined, testContext);
-      userEvent.type(dayInput, '2');
-      userEvent.tab();
-      expect(dayInput.value).toBe('02');
-    });
+      test('value is formatted on segment blur', () => {
+        const { dayInput } = renderDateInputBox(undefined, testContext);
+        userEvent.type(dayInput, '2');
+        userEvent.tab();
+        expect(dayInput.value).toBe('02');
+      });
 
-    test('backspace deletes characters', () => {
-      const { dayInput, yearInput } = renderDateInputBox(
-        { value: newUTC(1993, Month.December, 26) },
-        testContext,
-      );
-      userEvent.type(dayInput, '{backspace}');
-      expect(dayInput.value).toBe('2');
-      userEvent.type(yearInput, '{backspace}');
-      expect(yearInput.value).toBe('199');
-    });
+      test('backspace deletes characters', () => {
+        const { dayInput, yearInput } = renderDateInputBox(
+          { value: null },
+          testContext,
+        );
+        userEvent.type(dayInput, '21');
+        userEvent.type(dayInput, '{backspace}');
+        expect(dayInput.value).toBe('2');
+
+        userEvent.type(yearInput, '1993');
+        userEvent.type(yearInput, '{backspace}');
+        expect(yearInput.value).toBe('199');
+      });
 
-    test('segment change handler is called when typing into a segment', () => {
-      const { yearInput } = renderDateInputBox(
-        {
-          value: null,
-          onSegmentChange,
-        },
-        testContext,
-      );
-      userEvent.type(yearInput, '1993');
+      test('segment change handler is called when typing into a segment', () => {
+        const { yearInput } = renderDateInputBox(
+          { onSegmentChange },
+          testContext,
+        );
+        userEvent.type(yearInput, '1993');
 
-      expect(onSegmentChange).toHaveBeenCalledWith(
-        expect.objectContaining({ value: '1993' }),
-      );
-    });
+        expect(onSegmentChange).toHaveBeenCalledWith(
+          expect.objectContaining({ value: '1993' }),
+        );
+      });
 
-    test('value setter is not called when typing into a segment', () => {
-      const setValue = jest.fn();
-      const { dayInput } = renderDateInputBox(
-        {
-          value: null,
-          setValue,
-        },
-        testContext,
-      );
+      test('value setter is not called when typing into a segment', () => {
+        const setValue = jest.fn();
+        const { dayInput } = renderDateInputBox({ setValue }, testContext);
+
+        userEvent.type(dayInput, '26');
+      });
+
+      test('segment change handler is called when deleting from a single segment', () => {
+        const { dayInput } = renderDateInputBox(
+          { onSegmentChange },
+          testContext,
+        );
+        userEvent.type(dayInput, '21');
+        userEvent.type(dayInput, '{backspace}');
+        expect(onSegmentChange).toHaveBeenCalledWith(
+          expect.objectContaining({ value: '2' }),
+        );
+      });
 
-      userEvent.type(dayInput, '26');
-      expect(setValue).not.toHaveBeenCalled();
+      test('value setter is not called when deleting from a single segment', () => {
+        const setValue = jest.fn();
+
+        const { dayInput } = renderDateInputBox({ setValue }, testContext);
+        userEvent.type(dayInput, '21');
+        userEvent.type(dayInput, '{backspace}');
+        expect(setValue).not.toHaveBeenCalled();
+      });
     });
 
-    test('value setter is not called when an ambiguous date is entered', () => {
-      const setValue = jest.fn();
-      const { dayInput, monthInput, yearInput } = renderDateInputBox(
-        {
-          value: null,
-          setValue,
-        },
-        testContext,
-      );
-      userEvent.type(yearInput, '1993');
-      userEvent.type(monthInput, '12');
-      userEvent.type(dayInput, '2');
-      expect(setValue).not.toHaveBeenCalled();
+    describe('with no initial value', () => {
+      test('value setter is not called when an ambiguous date is entered', () => {
+        const setValue = jest.fn();
+        const { dayInput, monthInput, yearInput } = renderDateInputBox(
+          {
+            value: null,
+            setValue,
+          },
+          testContext,
+        );
+        userEvent.type(yearInput, '1993');
+        userEvent.type(monthInput, '12');
+        userEvent.type(dayInput, '2');
+        expect(setValue).not.toHaveBeenCalled();
+      });
+
+      test('value setter is called when an explicit date is entered', () => {
+        const setValue = jest.fn();
+        const { dayInput, monthInput, yearInput } = renderDateInputBox(
+          {
+            value: null,
+            setValue,
+          },
+          testContext,
+        );
+        userEvent.type(yearInput, '1993');
+        userEvent.type(monthInput, '12');
+        userEvent.type(dayInput, '26');
+        expect(setValue).toHaveBeenCalledWith(
+          expect.objectContaining(newUTC(1993, Month.December, 26)),
+        );
+      });
     });
 
-    test('value setter is only called when an explicit date is entered', () => {
-      const setValue = jest.fn();
-      const { dayInput, monthInput, yearInput } = renderDateInputBox(
-        {
-          value: null,
-          setValue,
-        },
-        testContext,
-      );
-      userEvent.type(yearInput, '1993');
-      userEvent.type(monthInput, '12');
-      userEvent.type(dayInput, '26');
-      expect(setValue).toHaveBeenCalledWith(
-        expect.objectContaining(newUTC(1993, Month.December, 26)),
-      );
+    describe('with an initial value', () => {
+      test('value setter is called when a new date is typed', () => {
+        const setValue = jest.fn();
+        const { dayInput } = renderDateInputBox(
+          {
+            value: newUTC(1993, Month.December, 26),
+            setValue,
+          },
+          testContext,
+        );
+        userEvent.type(dayInput, '{backspace}5');
+        expect(setValue).toHaveBeenCalledWith(
+          expect.objectContaining(newUTC(1993, Month.December, 25)),
+        );
+        expect(dayInput).toHaveValue('25');
+      });
+
+      test('value setter is _not_ called when new input is ambiguous', () => {
+        const setValue = jest.fn();
+        const { dayInput } = renderDateInputBox(
+          {
+            value: newUTC(1993, Month.December, 26),
+            setValue,
+          },
+          testContext,
+        );
+        userEvent.type(dayInput, '{backspace}');
+        expect(setValue).not.toHaveBeenCalled();
+        expect(dayInput).toHaveValue('2');
+      });
+
+      test('value setter is called when the input is cleared', () => {
+        const setValue = jest.fn();
+        const { dayInput, monthInput, yearInput } = renderDateInputBox(
+          {
+            value: newUTC(1993, Month.December, 26),
+            setValue,
+          },
+          testContext,
+        );
+        userEvent.type(dayInput, '{backspace}{backspace}');
+        userEvent.type(monthInput, '{backspace}{backspace}');
+        userEvent.type(
+          yearInput,
+          '{backspace}{backspace}{backspace}{backspace}',
+        );
+        expect(setValue).toHaveBeenCalledWith(expect.objectContaining(null));
+        expect(dayInput).toHaveValue('');
+        expect(monthInput).toHaveValue('');
+        expect(yearInput).toHaveValue('');
+      });
+
+      test('value setter is called when new date is invalid', () => {
+        const setValue = jest.fn();
+        const { yearInput, monthInput, dayInput } = renderDateInputBox(
+          {
+            value: newUTC(1993, Month.December, 26),
+            setValue,
+          },
+          testContext,
+        );
+
+        userEvent.type(monthInput, '{backspace}{backspace}');
+        // TODO: with InvalidDate
+        expect(setValue).toHaveBeenCalled();
+        expect(dayInput).toHaveValue('26');
+        expect(monthInput).toHaveValue('');
+        expect(yearInput).toHaveValue('1993');
+      });
     });
   });
 
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
index adf60460b5..b18f073813 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.stories.tsx
@@ -22,6 +22,7 @@ import {
 } from '../../../testutils';
 
 import { DateInputBox } from './DateInputBox';
+import { DateInputChangeEventHandler } from './DateInputBox.types';
 
 const testDate = newUTC(1993, Month.December, 26);
 
@@ -78,16 +79,25 @@ export const Basic: StoryFn<typeof DateInputBox> = props => {
     }
   }, [props.value]);
 
-  const updateDate = (date: DateType) => {
-    setDate(date);
+  const updateDate: DateInputChangeEventHandler = ({ value }) => {
+    setDate(value);
   };
 
   return (
-    <DateInputBox
-      value={date}
-      setValue={updateDate}
-      segmentRefs={segmentRefsMock}
-    />
+    <div>
+      <DateInputBox
+        value={date}
+        setValue={updateDate}
+        segmentRefs={segmentRefsMock}
+      />
+      <code>
+        {isValidDate(date)
+          ? date.toISOString()
+          : date
+          ? 'Invalid'
+          : 'undefined'}
+      </code>
+    </div>
   );
 };
 
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
index 7a55005d68..883fa43f63 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx
@@ -1,6 +1,12 @@
-import React, { FocusEventHandler } from 'react';
+import React, { FocusEventHandler, useEffect } from 'react';
+import { isNull } from 'lodash';
 import isEqual from 'lodash/isEqual';
 
+import {
+  isDateObject,
+  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';
@@ -15,9 +21,6 @@ import {
   isDateSegment,
 } from '../../../types';
 import {
-  doesSomeSegmentExist,
-  doSegmentsFormValidDate,
-  getFormattedDateStringFromSegments,
   getMaxSegmentValue,
   getMinSegmentValue,
   getRelativeSegment,
@@ -63,15 +66,8 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
     }: DateInputBoxProps,
     fwdRef,
   ) => {
-    const {
-      formatParts,
-      disabled,
-      min,
-      max,
-      locale,
-      setIsDirty,
-      setInternalErrorMessage,
-    } = useSharedDatePickerContext();
+    const { isDirty, formatParts, disabled, min, max, setIsDirty } =
+      useSharedDatePickerContext();
     const { theme } = useDarkMode();
 
     const containerRef = useForwardedRef(fwdRef, null);
@@ -86,6 +82,13 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
       return formattedValue;
     };
 
+    /** if the value is a `Date` the component is dirty */
+    useEffect(() => {
+      if (isDateObject(value) && !isDirty) {
+        setIsDirty(true);
+      }
+    }, [isDirty, setIsDirty, value]);
+
     /**
      * When a segment is updated,
      * trigger a `change` event for the segment, and
@@ -98,30 +101,19 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
       const hasAnySegmentChanged = !isEqual(newSegments, prevSegments);
 
       if (hasAnySegmentChanged) {
-        const areAllEmpty = !doesSomeSegmentExist(newSegments);
-        const areAllFilled = isEverySegmentFilled(newSegments);
-
-        if (areAllEmpty) {
-          // if no segment exists, set the external value to null
-          setValue?.(null);
-        } else if (areAllFilled) {
-          const areAllExplicit = isEverySegmentValueExplicit(newSegments);
-          const utcDate = newDateFromSegments(newSegments);
-          const isValidDate = doSegmentsFormValidDate(newSegments);
-
-          if (areAllExplicit && !!utcDate) {
-            // Update the value iff all segments create a valid date.
-            setValue?.(utcDate);
-          } else if (!isValidDate) {
-            const dateString = getFormattedDateStringFromSegments(
-              newSegments,
-              locale,
-            );
-            // This error state will be removed by `handleValidation` once a value is set
-            setInternalErrorMessage(`${dateString} is not a valid date`);
-          }
-          // If all values are filled, set the input as dirty
-          setIsDirty(true);
+        const newDate = newDateFromSegments(newSegments);
+
+        const shouldSetValue =
+          isNull(newDate) ||
+          (isValidDate(newDate) && isEverySegmentValueExplicit(newSegments)) ||
+          (isInvalidDateObject(newDate) &&
+            (isDirty || isEverySegmentFilled(newSegments)));
+
+        if (shouldSetValue) {
+          setValue?.({
+            value: newDate,
+            segments: newSegments,
+          });
         }
       }
     };
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
index 5c1bcede61..4d131eb8d5 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.types.ts
@@ -2,8 +2,18 @@ import { DateType } from '@leafygreen-ui/date-utils';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
 import { SegmentRefs } from '../../../hooks';
+import { DateSegmentsState } from '../../../types';
 import { DateInputSegmentChangeEventHandler } from '../DateInputSegment/DateInputSegment.types';
 
+export interface DateInputChangeEvent {
+  value: DateType;
+  segments: DateSegmentsState;
+}
+
+export type DateInputChangeEventHandler = (
+  changeEvent: DateInputChangeEvent,
+) => void;
+
 export interface DateInputBoxProps
   extends Omit<HTMLElementProps<'div'>, 'onChange'> {
   /**
@@ -15,7 +25,7 @@ export interface DateInputBoxProps
    * Value setter callback.
    * Date object is in UTC time
    */
-  setValue?: (date: DateType) => void;
+  setValue?: DateInputChangeEventHandler;
 
   /**
    * Callback fired when any segment changes, but not necessarily a full value
diff --git a/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
index cc70fdcf9d..a7a38f2493 100644
--- a/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/index.ts
@@ -1,26 +1 @@
-import { newUTC } from '@leafygreen-ui/date-utils';
-
-import { DateSegmentsState } from '../../types';
-import { isValidSegmentName } from '../isValidSegment';
-import { isValidValueForSegment } from '../isValidValueForSegment';
-
-/** Constructs a date object in UTC from day, month, year segments */
-export const newDateFromSegments = (
-  segments: DateSegmentsState,
-): Date | undefined => {
-  const isEverySegmentValid = Object.entries(segments).every(
-    ([key, value]) =>
-      isValidSegmentName(key) && isValidValueForSegment(key, value),
-  );
-
-  if (isEverySegmentValid) {
-    const { day, month, year } = segments;
-    const newDate = newUTC(Number(year), Number(month) - 1, Number(day));
-    // If day > daysInMonth, then the month will roll-over
-    const isCorrectMonth = newDate.getUTCMonth() === Number(month) - 1;
-
-    if (isCorrectMonth) {
-      return newDate;
-    }
-  }
-};
+export { newDateFromSegments } from './newDateFromSegments';
diff --git a/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
index a07f7d7f72..89bc4bfe8d 100644
--- a/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.spec.ts
@@ -1,59 +1,85 @@
+import { isInvalidDateObject, Month, newUTC } from '@leafygreen-ui/date-utils';
+
 import { newDateFromSegments } from '.';
 
-describe('packages/date=picker/utils/newDateFromSegments', () => {
-  test('returns the date in UTC', () => {
-    const newDate = newDateFromSegments({
-      day: '1',
-      month: '1',
-      year: '2023',
+describe('packages/date-picker/utils/newDateFromSegments', () => {
+  describe('valid dates', () => {
+    test('returns the date in UTC', () => {
+      const newDate = newDateFromSegments({
+        day: '01',
+        month: '01',
+        year: '2023',
+      });
+      expect(newDate).toEqual(newUTC(2023, Month.January, 1));
     });
-    expect(newDate?.toISOString()).toEqual('2023-01-01T00:00:00.000Z');
-  });
 
-  test('returns a date outside the default range', () => {
-    const newDate = newDateFromSegments({
-      day: '1',
-      month: '1',
-      year: '2100',
+    test('returns a date outside the default range', () => {
+      const newDate = newDateFromSegments({
+        day: '01',
+        month: '01',
+        year: '2100',
+      });
+      expect(newDate).toEqual(newUTC(2100, Month.January, 1));
+    });
+
+    test('returns a date if day segment is truncated', () => {
+      const newDate = newDateFromSegments({
+        day: '1',
+        month: '01',
+        year: '2023',
+      });
+      expect(newDate).toEqual(newUTC(2023, Month.January, 1));
     });
-    expect(newDate?.toISOString()).toEqual('2100-01-01T00:00:00.000Z');
-  });
 
-  test('returns undefined if year is truncated (2-digits)', () => {
-    const newDate = newDateFromSegments({
-      day: '1',
-      month: '1',
-      year: '20',
+    test('returns a date if month segment is truncated', () => {
+      const newDate = newDateFromSegments({
+        day: '01',
+        month: '1',
+        year: '2023',
+      });
+      expect(newDate).toEqual(newUTC(2023, Month.January, 1));
     });
-    expect(newDate).toBeUndefined();
   });
 
-  test('returns undefined if year is truncated (3-digits)', () => {
-    const newDate = newDateFromSegments({
-      day: '1',
-      month: '1',
-      year: '199',
+  describe('null', () => {
+    test('returns `null` if all segments are empty', () => {
+      const newDate = newDateFromSegments({
+        day: '',
+        month: '',
+        year: '',
+      });
+      expect(newDate).toBeNull();
     });
-    expect(newDate).toBeUndefined();
   });
 
-  test('returns undefined if month/day combo is invalid', () => {
-    const newDate = newDateFromSegments({
-      day: '31',
-      month: '02',
-      year: '2024',
+  describe('Invalid', () => {
+    test('returns "Invalid Date" if year segment is truncated', () => {
+      const newDate = newDateFromSegments({
+        day: '01',
+        month: '01',
+        year: '20',
+      });
+      expect(isInvalidDateObject(newDate)).toBe(true);
     });
 
-    expect(newDate).toBeUndefined();
-  });
+    test('returns "Invalid Date" if month/day combo is invalid', () => {
+      const newDate = newDateFromSegments({
+        day: '31',
+        month: '02',
+        year: '2024',
+      });
 
-  test('returns undefined if any segment is empty', () => {
-    const newDate = newDateFromSegments({
-      day: '',
-      month: '1',
-      year: '2023',
+      expect(isInvalidDateObject(newDate)).toBe(true);
     });
 
-    expect(newDate).toBeUndefined();
+    test('returns "Invalid Date" if any segment is empty', () => {
+      const newDate = newDateFromSegments({
+        day: '',
+        month: '1',
+        year: '2023',
+      });
+
+      expect(isInvalidDateObject(newDate)).toBe(true);
+    });
   });
 });
diff --git a/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.ts b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.ts
new file mode 100644
index 0000000000..70847799b5
--- /dev/null
+++ b/packages/date-picker/src/shared/utils/newDateFromSegments/newDateFromSegments.ts
@@ -0,0 +1,26 @@
+import { DateType, newUTC } from '@leafygreen-ui/date-utils';
+
+import { DateSegmentsState } from '../../types';
+import { doesSomeSegmentExist } from '../doesSomeSegmentExist';
+import { isEverySegmentFilled } from '../isEverySegmentFilled';
+import { isEverySegmentValid } from '../isEverySegmentValid';
+
+/**
+ * Constructs a date object in UTC from day, month, year segments
+ */
+export const newDateFromSegments = (segments: DateSegmentsState): DateType => {
+  if (isEverySegmentFilled(segments) && isEverySegmentValid(segments)) {
+    const { day, month, year } = segments;
+    const newDate = newUTC(Number(year), Number(month) - 1, Number(day));
+    // If day > daysInMonth, then the month will roll-over
+    const isCorrectMonth = newDate.getUTCMonth() === Number(month) - 1;
+
+    if (isCorrectMonth) {
+      return newDate;
+    }
+  } else if (!doesSomeSegmentExist(segments)) {
+    return null;
+  }
+
+  return new Date('invalid');
+};
diff --git a/packages/date-utils/src/index.ts b/packages/date-utils/src/index.ts
index 6f79645133..de8b401315 100644
--- a/packages/date-utils/src/index.ts
+++ b/packages/date-utils/src/index.ts
@@ -25,7 +25,7 @@ export { isSameUTCDay } from './isSameUTCDay';
 export { isSameUTCMonth } from './isSameUTCMonth';
 export { isSameUTCRange } from './isSameUTCRange';
 export { isTodayTZ } from './isTodayTZ';
-export { isValidDate } from './isValidDate';
+export { isDateObject, isInvalidDateObject, isValidDate } from './isValidDate';
 export { isValidLocale } from './isValidLocale';
 export { maxDate } from './maxDate';
 export { minDate } from './minDate';
diff --git a/packages/date-utils/src/isValidDate/index.ts b/packages/date-utils/src/isValidDate/index.ts
index 5afda48f1d..7944165c74 100644
--- a/packages/date-utils/src/isValidDate/index.ts
+++ b/packages/date-utils/src/isValidDate/index.ts
@@ -1 +1,6 @@
-export { isValidDate, isValidDateString } from './isValidDate';
+export {
+  isDateObject,
+  isInvalidDateObject,
+  isValidDate,
+  isValidDateString,
+} from './isValidDate';
diff --git a/packages/date-utils/src/isValidDate/isValidDate.spec.ts b/packages/date-utils/src/isValidDate/isValidDate.spec.ts
index 801e4afdb9..490276bd13 100644
--- a/packages/date-utils/src/isValidDate/isValidDate.spec.ts
+++ b/packages/date-utils/src/isValidDate/isValidDate.spec.ts
@@ -1,6 +1,12 @@
+import { DateType } from '../../dist';
 import { mockTimeZone } from '../testing/mockTimeZone';
 
-import { isValidDate, isValidDateString } from '.';
+import {
+  isDateObject,
+  isInvalidDateObject,
+  isValidDate,
+  isValidDateString,
+} from '.';
 
 describe('packages/date-utils/isValidDate', () => {
   test('accepts Date objects', () => {
@@ -27,6 +33,30 @@ describe('packages/date-utils/isValidDate', () => {
   });
 });
 
+describe('packages/date-utils/isDateObject', () => {
+  test('valid date', () => {
+    expect(isDateObject(new Date())).toBe(true);
+  });
+  test('invalid date object', () => {
+    expect(isDateObject(new Date('invalid'))).toBe(true);
+  });
+  test('null', () => {
+    expect(isDateObject(null)).toBe(false);
+  });
+  test('undefined', () => {
+    expect(isDateObject(undefined)).toBe(false);
+  });
+  test('string', () => {
+    expect(isDateObject('string')).toBe(false);
+  });
+  test('number', () => {
+    expect(isDateObject(5)).toBe(false);
+  });
+  test('empty object', () => {
+    expect(isDateObject({})).toBe(false);
+  });
+});
+
 describe('packages/date-utils/isValidDateString', () => {
   test('us format is valid', () => {
     expect(isValidDateString('12/26/1993')).toBeTruthy();
@@ -40,3 +70,18 @@ describe('packages/date-utils/isValidDateString', () => {
     expect(isValidDateString(undefined)).toBeFalsy();
   });
 });
+
+describe('packages/date-utils/isInvalidDateObject', () => {
+  test('valid date', () => {
+    expect(isInvalidDateObject(new Date())).toBe(false);
+  });
+  test('null', () => {
+    expect(isInvalidDateObject(null)).toBe(false);
+  });
+  test('empty object', () => {
+    expect(isInvalidDateObject({} as DateType)).toBe(false);
+  });
+  test('invalid Date', () => {
+    expect(isInvalidDateObject(new Date('invalid'))).toBe(true);
+  });
+});
diff --git a/packages/date-utils/src/isValidDate/isValidDate.ts b/packages/date-utils/src/isValidDate/isValidDate.ts
index 274b204310..718e2b176e 100644
--- a/packages/date-utils/src/isValidDate/isValidDate.ts
+++ b/packages/date-utils/src/isValidDate/isValidDate.ts
@@ -3,6 +3,7 @@ import isNull from 'lodash/isNull';
 import isUndefined from 'lodash/isUndefined';
 
 import { DateType } from '../types';
+import { InvalidDate } from '../types/InvalidDate';
 
 /**
  * An extension of `date-fns` {@link isValid}
@@ -12,14 +13,10 @@ export const isValidDate = (date?: DateType): date is Date => {
   // Enumerating all cases to ensure test coverage
   if (isUndefined(date)) return false;
   if (isNull(date)) return false;
-  if (date.constructor.name !== 'Date') return false;
+  if (!isDateObject(date)) return false;
+  if (isInvalidDateObject(date)) return false;
 
-  try {
-    date?.toISOString();
-    return isValid(date);
-  } catch (error) {
-    return false;
-  }
+  return isValid(date);
 };
 
 /**
@@ -32,3 +29,29 @@ export const isValidDateString = (str?: any): str is string => {
     !isUndefined(str) && typeof str === 'string' && !isNaN(Date.parse(str))
   );
 };
+
+/** Whether the given object is a `Date` object */
+export const isDateObject = (date: any): date is Date | InvalidDate => {
+  return (
+    !isNull(date) &&
+    !isUndefined(date) &&
+    typeof date === 'object' &&
+    date.constructor.name == 'Date' &&
+    typeof date.toISOString === 'function'
+  );
+};
+
+/**
+ * Returns whether a given object is a Date object that will print `"Invalid Date"`
+ */
+export const isInvalidDateObject = (date: DateType): date is InvalidDate => {
+  if (isNull(date)) return false;
+  if (!isDateObject(date)) return false;
+
+  try {
+    date.toISOString();
+    return false;
+  } catch {
+    return true;
+  }
+};

From 19e601fe421802ae0f71ef46488393688dbe17af Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 11 Jan 2024 17:25:43 -0500
Subject: [PATCH 349/351] fix DateInputChangeEventHandler import

---
 .../src/DatePicker/DatePickerInput/DatePickerInput.tsx     | 7 +++++--
 .../src/shared/components/DateInput/DateInputBox/index.ts  | 5 ++++-
 .../date-picker/src/shared/components/DateInput/index.ts   | 6 +++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
index a883b12c28..8f24c10f5f 100644
--- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -6,12 +6,15 @@ import React, {
   MouseEventHandler,
 } from 'react';
 import { isNull } from 'lodash';
-import { DateInputChangeEventHandler } from 'src/shared/components/DateInput/DateInputBox/DateInputBox.types';
 
 import { isInvalidDateObject, isSameUTCDay } from '@leafygreen-ui/date-utils';
 import { createSyntheticEvent, keyMap } from '@leafygreen-ui/lib';
 
-import { DateFormField, DateInputBox } from '../../shared/components/DateInput';
+import {
+  DateFormField,
+  DateInputBox,
+  DateInputChangeEventHandler,
+} from '../../shared/components/DateInput';
 import { DateInputSegmentChangeEventHandler } from '../../shared/components/DateInput/DateInputSegment';
 import { useSharedDatePickerContext } from '../../shared/context';
 import {
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputBox/index.ts b/packages/date-picker/src/shared/components/DateInput/DateInputBox/index.ts
index 6334727ac3..d027909952 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputBox/index.ts
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputBox/index.ts
@@ -1,2 +1,5 @@
 export { DateInputBox } from './DateInputBox';
-export type { DateInputBoxProps } from './DateInputBox.types';
+export type {
+  DateInputBoxProps,
+  DateInputChangeEventHandler,
+} from './DateInputBox.types';
diff --git a/packages/date-picker/src/shared/components/DateInput/index.ts b/packages/date-picker/src/shared/components/DateInput/index.ts
index 74de023c3c..8ba05e3866 100644
--- a/packages/date-picker/src/shared/components/DateInput/index.ts
+++ b/packages/date-picker/src/shared/components/DateInput/index.ts
@@ -1,4 +1,8 @@
 export { CalendarButton } from './CalendarButton';
 export { DateFormField } from './DateFormField';
-export { DateInputBox, type DateInputBoxProps } from './DateInputBox';
+export {
+  DateInputBox,
+  type DateInputBoxProps,
+  type DateInputChangeEventHandler,
+} from './DateInputBox';
 export { DateInputSegment } from './DateInputSegment';

From 28a733cc4562d25dcdb0618c4b46ca1b0c379022 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 11 Jan 2024 17:32:15 -0500
Subject: [PATCH 350/351] updates changeset version

---
 .changeset/eighty-kings-mix.md    | 4 ++--
 .changeset/smart-steaks-care.md   | 4 ++--
 packages/date-picker/package.json | 2 +-
 packages/date-utils/package.json  | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.changeset/eighty-kings-mix.md b/.changeset/eighty-kings-mix.md
index 64910cab2c..56b8c543ab 100644
--- a/.changeset/eighty-kings-mix.md
+++ b/.changeset/eighty-kings-mix.md
@@ -1,5 +1,5 @@
 ---
-'@leafygreen-ui/date-picker': major
+'@leafygreen-ui/date-picker': minor
 ---
 
-Inital release of `date-picker`. Use DatePicker to allow users to input a date
+Initial pre-release of `date-picker`. Use DatePicker to allow users to input a date
diff --git a/.changeset/smart-steaks-care.md b/.changeset/smart-steaks-care.md
index 0f43ab654c..5489ec9ad3 100644
--- a/.changeset/smart-steaks-care.md
+++ b/.changeset/smart-steaks-care.md
@@ -1,5 +1,5 @@
 ---
-'@leafygreen-ui/date-utils': major
+'@leafygreen-ui/date-utils': minor
 ---
 
-Initial release of `date-utils`. DateUtils contains utility functions for managing and manipulating JS Date objects
+Initial pre-release of `date-utils`. DateUtils contains utility functions for managing and manipulating JS Date objects
diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index b53935c609..d3bdc374f1 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/date-picker",
-  "version": "0.1.0",
+  "version": "0.0.1",
   "description": "LeafyGreen UI Kit Date Picker",
   "license": "Apache-2.0",
   "main": "./dist/index.js",
diff --git a/packages/date-utils/package.json b/packages/date-utils/package.json
index ef531592c4..5fa9496b68 100644
--- a/packages/date-utils/package.json
+++ b/packages/date-utils/package.json
@@ -1,7 +1,7 @@
   
 {
   "name": "@leafygreen-ui/date-utils",
-  "version": "0.1.0",
+  "version": "0.0.1",
   "description": "LeafyGreen UI Kit Date Utils",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",

From ae4b58d7fe3ffddf045d1fd29251372cfaa7cb2e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 11 Jan 2024 17:33:46 -0500
Subject: [PATCH 351/351] Update package.json

---
 packages/date-picker/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index d3bdc374f1..e6dc619952 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@leafygreen-ui/a11y": "^1.4.11",
-    "@leafygreen-ui/date-utils": "^0.1.0",
+    "@leafygreen-ui/date-utils": "^0.0.1",
     "@leafygreen-ui/emotion": "^4.0.7",
     "@leafygreen-ui/form-field": "^0.2.0",
     "@leafygreen-ui/hooks": "^8.0.0",