[datepicker] Add fixes for composed date range selections (#5391)

* [datepicker] Add fixes for composed date range selections

* Add major version

---------

Co-authored-by: Jimmy Li <jimmy.li+UBER@uber.com>

Author: lijim

documentation-site/examples/datepicker/composed-range-pickers.tsx

@@ -54,7 +54,7 @@ export default function Example() {
               value={dates[0]}
               onChange={(time) => {
                 if (time) {
-                  if (isAfter(time, dates[1])) {
+                  if (dates[1] && isAfter(time, dates[1])) {
                     setDates([time, time]);
                   } else {
                     setDates([time, dates[1]]);
@@ -108,7 +108,7 @@ export default function Example() {
               value={dates[1]}
               onChange={(time) => {
                 if (time) {
-                  if (isBefore(time, dates[0])) {
+                  if (dates[0] && isBefore(time, dates[0])) {
                     setDates([time, time]);
                   } else {
                     setDates([dates[0], time]);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "16.2.1",
+  "version": "17.0.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

src/datepicker/__tests__/calendar.test.tsx

@@ -63,4 +63,68 @@ describe('Component', () => {
     fireEvent.click(await getByText(container.parentElement as any as HTMLElement, 'Past Week'));
     expect(onQuickSelectChange).toHaveBeenCalledWith(expect.objectContaining({ id: 'Past Week' }));
   });
+
+  it('constrains time options when selected date matches minDate', () => {
+    const minDate = new Date('2021-11-10T14:00:00');
+    const value = new Date('2021-11-10T15:00:00');
+    const { container } = render(
+      <TestBaseProvider>
+        <Calendar
+          value={value}
+          minDate={minDate}
+          timeSelectStart
+          overrides={{
+            TimeSelectContainer: { props: { 'data-testid': 'time-select' } },
+          }}
+        />
+      </TestBaseProvider>
+    );
+
+    const timeSelect = queryByTestId(container, 'time-select');
+    expect(timeSelect).not.toBeNull();
+
+    const selectInput = timeSelect!.querySelector('[data-baseweb="select"]');
+    if (selectInput?.firstChild) {
+      fireEvent.click(selectInput.firstChild as HTMLElement);
+    }
+
+    const listbox = container.parentElement!.querySelector('[role="listbox"]');
+    expect(listbox).not.toBeNull();
+    const options = Array.from(listbox!.querySelectorAll('[role="option"]'));
+    const optionTexts = options.map((o) => o.textContent);
+    expect(optionTexts).not.toContain('12:00 PM');
+    expect(optionTexts).toContain('3:00 PM');
+  });
+
+  it('does not constrain time when selected date differs from minDate', () => {
+    const minDate = new Date('2021-11-10T14:00:00');
+    const value = new Date('2021-11-11T10:00:00');
+    const { container } = render(
+      <TestBaseProvider>
+        <Calendar
+          value={value}
+          minDate={minDate}
+          timeSelectStart
+          overrides={{
+            TimeSelectContainer: { props: { 'data-testid': 'time-select' } },
+          }}
+        />
+      </TestBaseProvider>
+    );
+
+    const timeSelect = queryByTestId(container, 'time-select');
+    expect(timeSelect).not.toBeNull();
+
+    const selectInput = timeSelect!.querySelector('[data-baseweb="select"]');
+    if (selectInput?.firstChild) {
+      fireEvent.click(selectInput.firstChild as HTMLElement);
+    }
+
+    const listbox = container.parentElement!.querySelector('[role="listbox"]');
+    expect(listbox).not.toBeNull();
+    const options = Array.from(listbox!.querySelectorAll('[role="option"]'));
+    const optionTexts = options.map((o) => o.textContent);
+    expect(optionTexts).toContain('12:00 AM');
+    expect(optionTexts).toContain('12:00 PM');
+  });
 });