UI: Upgrade React DayPicker to version 10 (#81439)

* UI: Upgrade React DayPicker to version 10

* UI: Add React DayPicker upgrade changelog

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: aduth <aduth@git.wordpress.org>

Author: ciampo

package-lock.json

@@ -19,6 +19,7 @@
 
 ### Internal
 
+-   Update React DayPicker from 9.14.0 to 10.0.1 and adopt the scoped package. ([#81439](https://github.com/WordPress/gutenberg/pull/81439))
 -   Remove obsolete dependency grouping comments as part of the repository-wide separator-free import migration. ([#81248](https://github.com/WordPress/gutenberg/pull/81248))
 -   Refactor shared focus utilities to use the `outset-ring__focus()` mixin from `@wordpress/base-styles` ([#80635](https://github.com/WordPress/gutenberg/pull/80635)).
 -   `Button`: Expand the Storybook e2e `VariantStates` matrix with compact, small, and with-icon rows ([#80793](https://github.com/WordPress/gutenberg/pull/80793)).

packages/ui/CHANGELOG.md

@@ -44,6 +44,7 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@base-ui/react": "^1.6.0",
+		"@daypicker/react": "^10.0.1",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/element": "file:../element",
@@ -56,7 +57,6 @@
 		"@wordpress/theme": "file:../theme",
 		"clsx": "^2.1.1",
 		"date-fns": "^4.4.0",
-		"react-day-picker": "^9.14.0",
 		"tabbable": "^6.4.0"
 	},
 	"devDependencies": {

packages/ui/package.json

@@ -1,5 +1,5 @@
-import { DayPicker } from 'react-day-picker';
-import { enUS } from 'react-day-picker/locale';
+import { DayPicker } from '@daypicker/react';
+import { enUS } from '@daypicker/react/locale';
 import { forwardRef, useCallback, useMemo } from '@wordpress/element';
 import { COMMON_PROPS } from './utils/constants';
 import { clampNumberOfMonths } from './utils/misc';

packages/ui/src/calendar/calendar.tsx

@@ -1,6 +1,6 @@
 import { differenceInCalendarDays } from 'date-fns';
-import { DayPicker, rangeContainsModifiers } from 'react-day-picker';
-import { enUS } from 'react-day-picker/locale';
+import { DayPicker, rangeContainsModifiers } from '@daypicker/react';
+import { enUS } from '@daypicker/react/locale';
 import { forwardRef, useMemo, useState, useCallback } from '@wordpress/element';
 import { COMMON_PROPS, MODIFIER_CLASSNAMES } from './utils/constants';
 import { clampNumberOfMonths } from './utils/misc';

packages/ui/src/calendar/range-calendar.tsx

@@ -1,5 +1,5 @@
 import { fn } from 'storybook/test';
-import { TZDate } from 'react-day-picker';
+import { TZDate } from '@daypicker/react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState, useEffect } from '@wordpress/element';
 import { Calendar } from '../index';

packages/ui/src/calendar/stories/index.story.tsx

@@ -1,5 +1,5 @@
 import { fn } from 'storybook/test';
-import { TZDate } from 'react-day-picker';
+import { TZDate } from '@daypicker/react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState, useEffect } from '@wordpress/element';
 import { RangeCalendar } from '../index';

packages/ui/src/calendar/stories/range-calendar.story.tsx

@@ -18,7 +18,7 @@ import {
 	sv,
 } from 'date-fns/locale';
 
-// Storybook date controls pass a number, but react-day-picker expects a Date
+// Storybook date controls pass a number, but DayPicker expects a Date.
 // for props such as `endMonth`.
 export function toDate( value: Date | number | undefined ): Date | undefined {
 	return value === undefined ? undefined : new Date( value );

packages/ui/src/calendar/stories/shared.ts

@@ -15,7 +15,7 @@ import {
 } from 'date-fns';
 import { ar } from 'date-fns/locale';
 import { useState } from '@wordpress/element';
-import { TZDate } from 'react-day-picker';
+import { TZDate } from '@daypicker/react';
 import { Calendar } from '..';
 import {
 	getDateButton,

packages/ui/src/calendar/test/calendar.test.tsx

@@ -15,7 +15,7 @@ import {
 } from 'date-fns';
 import { ar } from 'date-fns/locale';
 import { useState } from '@wordpress/element';
-import { TZDate } from 'react-day-picker';
+import { TZDate } from '@daypicker/react';
 import { usePreviewRange, RangeCalendar } from '../range-calendar';
 import { getDateButton, getDateCell, monthNameFormatter } from './__utils__';
 import type { DateRange, RangeCalendarProps } from '../types';