Add support for onInvalidChange prop

Replaces #398

Co-Authored-By: irunner-toptal <94855173+irunner-toptal@users.noreply.github.com>

Author: wojtekmaj

README.md

@@ -111,6 +111,7 @@ Displays an input field complete with custom inputs, native input, and a calenda
 | onCalendarOpen       | Function called when the calendar opens.                                                                                                                                                                                                     | n/a                     | `() => alert('Calendar opened')`                                                                                                                                                                                    |
 | onChange             | Function called when the user picks a valid date. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a "base".                                      | n/a                     | `(value) => alert('New date is: ', value)`                                                                                                                                                                          |
 | onFocus              | Function called when the focuses an input.                                                                                                                                                                                                   | n/a                     | `(event) => alert('Focused input: ', event.target.name)`                                                                                                                                                            |
+| onInvalidChange      | Function called when the user picks an invalid date.                                                                                                                                                                                         | n/a                     | `() => alert('Invalid date')`                                                                                                                                                                                       |
 | openCalendarOnFocus  | Whether to open the calendar on input focus. Note: It's recommended to use shouldOpenCalendar function instead.                                                                                                                              | `true`                  | `false`                                                                                                                                                                                                             |
 | portalContainer      | Element to render the calendar in using portal.                                                                                                                                                                                              | n/a                     | `document.getElementById('my-div')`                                                                                                                                                                                 |
 | required             | Whether date input should be required.                                                                                                                                                                                                       | `false`                 | `true`                                                                                                                                                                                                              |

src/DateInput.tsx

@@ -191,6 +191,7 @@ type DateInputProps = {
   name?: string;
   nativeInputAriaLabel?: string;
   onChange?: (value: Value, shouldCloseCalendar: boolean) => void;
+  onInvalidChange?: () => void;
   required?: boolean;
   returnValue?: 'start' | 'end' | 'range';
   showLeadingZeros?: boolean;
@@ -216,6 +217,7 @@ export default function DateInput({
   name = 'date',
   nativeInputAriaLabel,
   onChange: onChangeProps,
+  onInvalidChange,
   required,
   returnValue = 'start',
   showLeadingZeros,
@@ -483,6 +485,12 @@ export default function DateInput({
       onChangeProps(processedValue, false);
       return;
     }
+
+    if (!onInvalidChange) {
+      return;
+    }
+
+    onInvalidChange();
   }
 
   /**

src/DatePicker.spec.tsx

@@ -537,6 +537,21 @@ describe('DatePicker', () => {
     expect(onChange).toHaveBeenCalledWith(new Date(2023, 0, 1));
   });
 
+  it('calls onInvalidChange callback when changing value to an invalid one', () => {
+    const value = new Date(2023, 0, 31);
+    const onInvalidChange = vi.fn();
+
+    const { container } = render(<DatePicker onInvalidChange={onInvalidChange} value={value} />);
+
+    const dayInput = container.querySelector('input[name="day"]') as HTMLInputElement;
+
+    act(() => {
+      fireEvent.change(dayInput, { target: { value: '32' } });
+    });
+
+    expect(onInvalidChange).toHaveBeenCalled();
+  });
+
   it('clears the value when clicking on a button', () => {
     const onChange = vi.fn();
 

src/DatePicker.tsx

@@ -86,6 +86,7 @@ export type DatePickerProps = {
   onCalendarOpen?: () => void;
   onChange?: (value: Value) => void;
   onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  onInvalidChange?: () => void;
   openCalendarOnFocus?: boolean;
   portalContainer?: HTMLElement | null;
   required?: boolean;
@@ -128,6 +129,7 @@ export default function DatePicker(props: DatePickerProps) {
     onCalendarOpen,
     onChange: onChangeProps,
     onFocus: onFocusProps,
+    onInvalidChange,
     openCalendarOnFocus = true,
     required,
     returnValue = 'start',
@@ -314,6 +316,7 @@ export default function DatePicker(props: DatePickerProps) {
           minDate={minDate}
           name={name}
           onChange={onChange}
+          onInvalidChange={onInvalidChange}
           required={required}
           returnValue={returnValue}
           showLeadingZeros={showLeadingZeros}