Update Vite ecosystem

Author: wojtekmaj

packages/react-date-picker/package.json

@@ -62,14 +62,14 @@
     "@types/node": "*",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "@vitest/browser-playwright": "^4.0.1",
+    "@vitest/browser-playwright": "^4.1.0",
     "cpy-cli": "^5.0.0",
     "playwright": "^1.55.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "typescript": "^6.0.2",
-    "vitest": "^4.0.1",
-    "vitest-browser-react": "^2.0.0"
+    "vitest": "^4.1.0",
+    "vitest-browser-react": "^2.2.0"
   },
   "peerDependencies": {
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",

packages/react-date-picker/src/DateInput.spec.tsx

@@ -492,6 +492,27 @@ describe('DateInput', () => {
     expect(onChange).toHaveBeenCalledWith(new Date(currentYear, 8, 20), false);
   });
 
+  it('does not call onChange for leap day until yyyy year is complete', async () => {
+    const onChange = vi.fn();
+
+    await render(<DateInput {...defaultProps} format="MM/dd/yyyy" onChange={onChange} />);
+
+    const monthInput = page.getByRole('spinbutton', { name: 'month' });
+    const dayInput = page.getByRole('spinbutton', { name: 'day' });
+    const yearInput = page.getByRole('spinbutton', { name: 'year' });
+
+    await userEvent.fill(monthInput, '02');
+    await userEvent.fill(dayInput, '29');
+    await userEvent.type(yearInput, '200');
+
+    expect(onChange).not.toHaveBeenCalled();
+
+    await userEvent.type(yearInput, '0');
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(new Date(2000, 1, 29), false);
+  });
+
   it('triggers onChange correctly when cleared custom inputs', async () => {
     const onChange = vi.fn();
     const date = new Date(2017, 8, 30);

packages/react-date-picker/src/DateInput.tsx

@@ -235,6 +235,7 @@ export default function DateInput({
   const dayInput = useRef<HTMLInputElement>(null);
   const [isCalendarOpen, setIsCalendarOpen] = useState(isCalendarOpenProps);
   const lastPressedKey = useRef<KeyboardEvent['key'] | undefined>(undefined);
+  const hasPendingInternalChange = useRef(false);
 
   useEffect(() => {
     setIsCalendarOpen(isCalendarOpenProps);
@@ -365,6 +366,16 @@ export default function DateInput({
     return dividers ? dividers[0] : null;
   })();
 
+  const yearMinLength = (() => {
+    const yearMatch = format?.match(/y+/);
+
+    if (!yearMatch || yearMatch[0].length <= 1) {
+      return null;
+    }
+
+    return yearMatch[0].length;
+  })();
+
   function onClick(event: React.MouseEvent<HTMLDivElement> & { target: HTMLDivElement }) {
     if (event.target === event.currentTarget) {
       // Wrapper was directly clicked
@@ -468,6 +479,15 @@ export default function DateInput({
       return;
     }
 
+    const isIncompleteYear =
+      yearMinLength !== null &&
+      yearInput.current?.value &&
+      yearInput.current.value.length < yearMinLength;
+
+    if (isIncompleteYear) {
+      return;
+    }
+
     const isEveryValueFilled = formElements.every((formElement) => formElement.value);
     const isEveryValueValid = formElements.every((formElement) => formElement.validity.valid);
 
@@ -500,6 +520,8 @@ export default function DateInput({
   ) {
     const { name, value } = event.target;
 
+    hasPendingInternalChange.current = true;
+
     switch (name) {
       case 'year':
         setYear(value);
@@ -511,9 +533,17 @@ export default function DateInput({
         setDay(value);
         break;
     }
+  }
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: onChangeExternal must run after internal value state updates
+  useEffect(() => {
+    if (!hasPendingInternalChange.current) {
+      return;
+    }
 
+    hasPendingInternalChange.current = false;
     onChangeExternal();
-  }
+  }, [day, month, year]);
 
   /**
    * Called when native date input is changed.

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

@@ -590,6 +590,38 @@ describe('DatePicker', () => {
     expect(onChange).toHaveBeenCalledWith(new Date(2023, 0, 1));
   });
 
+  it('does not call onChange for leap day until yyyy year is complete', async () => {
+    const onChange = vi.fn();
+
+    await render(
+      <DatePicker
+        {...defaultProps}
+        format="MM/dd/yyyy"
+        onChange={onChange}
+        openCalendarOnFocus={false}
+      />,
+    );
+
+    const monthInput = page.getByRole('spinbutton', { name: 'month' });
+    const dayInput = page.getByRole('spinbutton', { name: 'day' });
+    const yearInput = page.getByRole('spinbutton', { name: 'year' });
+
+    await act(async () => {
+      await userEvent.fill(monthInput, '02');
+      await userEvent.fill(dayInput, '29');
+      await userEvent.type(yearInput, '200');
+    });
+
+    expect(onChange).not.toHaveBeenCalled();
+
+    await act(async () => {
+      await userEvent.type(yearInput, '0');
+    });
+
+    await vi.waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
+    expect(onChange).toHaveBeenCalledWith(new Date(2000, 1, 29));
+  });
+
   it('calls onInvalidChange callback when changing value to an invalid one', async () => {
     const value = new Date(2023, 0, 31);
     const onInvalidChange = vi.fn();

sample/package.json

@@ -20,9 +20,9 @@
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^6.0.1",
     "typescript": "^6.0.2",
-    "vite": "^7.1.11"
+    "vite": "^8.0.5"
   },
   "packageManager": "yarn@4.10.3"
 }