ciampo · Aug 11, 2026 · Aug 11, 2026 · Aug 11, 2026 · Aug 11, 2026
diff --git a/package-lock.json b/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)).

@@ -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": {

@@ -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';

@@ -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';

@@ -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';

@@ -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';

@@ -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 );

@@ -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,

@@ -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';

@@ -1,5 +1,5 @@
 import { useRender } from '@base-ui/react';
-import type { CalendarDay, RootProps, ChevronProps } from 'react-day-picker';
+import type { CalendarDay, RootProps, ChevronProps } from '@daypicker/react';
 import { useContext } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
@@ -143,7 +143,7 @@ export function Day(
 export function Root( { rootRef, ...props }: RootProps ) {
 	const { render, ref } = useContext( RootContext );
 
-	// `rootRef` is only set by `react-day-picker` when `animate` is enabled.
+	// `rootRef` is only set by `@daypicker/react` when `animate` is enabled.
 	const mergedRef = useMergeRefs( [ rootRef ?? null, ref ?? null ] );
 
 	return useRender( {
@@ -170,7 +170,7 @@ export function Chevron( { orientation, className }: ChevronProps ) {
 /**
  * Render a month navigation button.
  *
- * `react-day-picker` marks the button as `aria-disabled` (rather than
+ * `@daypicker/react` marks the button as `aria-disabled` (rather than
  * `disabled`) when there is no month to navigate to, so that it stays
  * discoverable. `Button`'s `focusableWhenDisabled` produces the same DOM.
  * @see https://daypicker.dev/guides/custom-components

@@ -29,7 +29,7 @@ const CLASSNAMES = {
 	 * Disabled days are styled through `:has(.day-button:disabled)` rather than
 	 * a modifier class on the cell, because the two are not equivalent: the
 	 * focused day keeps its button enabled so it stays reachable. Mapped to
-	 * `undefined` on purpose, so `react-day-picker` doesn't fall back to its
+	 * `undefined` on purpose, so `@daypicker/react` doesn't fall back to its
 	 * own `rdp-disabled` class for a modifier we don't style.
 	 */
 	disabled: undefined,

@@ -8,7 +8,7 @@ export type RootContextValue = {
 };
 
 /**
- * `react-day-picker` only accepts custom components through its `components`
+ * `@daypicker/react` only accepts custom components through its `components`
  * prop, which needs to be referentially stable across renders — a new component
  * type would remount the whole calendar on every render, losing focus.
  *