@mui/x-date-pickers 7.0.0-alpha.7 → 7.0.0-alpha.8

package/AdapterDateFnsBase/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/AdapterDateFnsBase/index.js",
+  "types": "./index.d.ts"
+}

package/AdapterDateFnsJalali/AdapterDateFnsJalali.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="date-fns-jalali" />
 import defaultLocale from 'date-fns-jalali/locale/fa-IR';
 import { AdapterFormats, AdapterOptions, DateBuilderReturnType, FieldFormatTokenMap, MuiPickersAdapter } from '../models';
 type DateFnsLocale = typeof defaultLocale;

package/AdapterDateFnsV3/AdapterDateFnsV3.d.ts

@@ -0,0 +1,80 @@
+import { Locale as DateFnsLocale } from 'date-fns/locale/types';
+import { AdapterFormats, AdapterOptions, MuiPickersAdapter } from '../models';
+import { AdapterDateFnsBase } from '../AdapterDateFnsBase';
+/**
+ * Based on `@date-io/date-fns`
+ *
+ * MIT License
+ *
+ * Copyright (c) 2017 Dmitriy Kovalenko
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export declare class AdapterDateFns extends AdapterDateFnsBase<DateFnsLocale> implements MuiPickersAdapter<Date, DateFnsLocale> {
+    constructor({ locale, formats }?: AdapterOptions<DateFnsLocale, never>);
+    parse: (value: string, format: string) => any;
+    isValid: (value: Date | null) => any;
+    format: (value: Date, formatKey: keyof AdapterFormats) => any;
+    formatByString: (value: Date, formatString: string) => any;
+    isEqual: (value: Date | null, comparing: Date | null) => any;
+    isSameYear: (value: Date, comparing: Date) => any;
+    isSameMonth: (value: Date, comparing: Date) => any;
+    isSameDay: (value: Date, comparing: Date) => any;
+    isSameHour: (value: Date, comparing: Date) => any;
+    isAfter: (value: Date, comparing: Date) => any;
+    isAfterYear: (value: Date, comparing: Date) => any;
+    isAfterDay: (value: Date, comparing: Date) => any;
+    isBefore: (value: Date, comparing: Date) => any;
+    isBeforeYear: (value: Date, comparing: Date) => any;
+    isBeforeDay: (value: Date, comparing: Date) => any;
+    isWithinRange: (value: Date, [start, end]: [Date, Date]) => any;
+    startOfYear: (value: Date) => any;
+    startOfMonth: (value: Date) => any;
+    startOfWeek: (value: Date) => any;
+    startOfDay: (value: Date) => any;
+    endOfYear: (value: Date) => any;
+    endOfMonth: (value: Date) => any;
+    endOfWeek: (value: Date) => any;
+    endOfDay: (value: Date) => any;
+    addYears: (value: Date, amount: number) => any;
+    addMonths: (value: Date, amount: number) => any;
+    addWeeks: (value: Date, amount: number) => any;
+    addDays: (value: Date, amount: number) => any;
+    addHours: (value: Date, amount: number) => any;
+    addMinutes: (value: Date, amount: number) => any;
+    addSeconds: (value: Date, amount: number) => any;
+    getYear: (value: Date) => any;
+    getMonth: (value: Date) => any;
+    getDate: (value: Date) => any;
+    getHours: (value: Date) => any;
+    getMinutes: (value: Date) => any;
+    getSeconds: (value: Date) => any;
+    getMilliseconds: (value: Date) => any;
+    setYear: (value: Date, year: number) => any;
+    setMonth: (value: Date, month: number) => any;
+    setDate: (value: Date, date: number) => any;
+    setHours: (value: Date, hours: number) => any;
+    setMinutes: (value: Date, minutes: number) => any;
+    setSeconds: (value: Date, seconds: number) => any;
+    setMilliseconds: (value: Date, milliseconds: number) => any;
+    getDaysInMonth: (value: Date) => any;
+    getWeekArray: (value: Date) => Date[][];
+    getWeekNumber: (value: Date) => any;
+    getYearRange: ([start, end]: [Date, Date]) => Date[];
+}

package/AdapterDateFnsV3/AdapterDateFnsV3.js

@@ -0,0 +1,287 @@
+/* eslint-disable class-methods-use-this */
+// TODO remove when date-fns-v3 is the default
+// @ts-nocheck
+import { addDays } from 'date-fns/addDays';
+import { addSeconds } from 'date-fns/addSeconds';
+import { addMinutes } from 'date-fns/addMinutes';
+import { addHours } from 'date-fns/addHours';
+import { addWeeks } from 'date-fns/addWeeks';
+import { addMonths } from 'date-fns/addMonths';
+import { addYears } from 'date-fns/addYears';
+import { endOfDay } from 'date-fns/endOfDay';
+import { endOfWeek } from 'date-fns/endOfWeek';
+import { endOfYear } from 'date-fns/endOfYear';
+// @ts-ignore TODO remove when date-fns-v3 is the default
+import { format as dateFnsFormat, longFormatters } from 'date-fns/format';
+import { getDate } from 'date-fns/getDate';
+import { getDaysInMonth } from 'date-fns/getDaysInMonth';
+import { getHours } from 'date-fns/getHours';
+import { getMinutes } from 'date-fns/getMinutes';
+import { getMonth } from 'date-fns/getMonth';
+import { getSeconds } from 'date-fns/getSeconds';
+import { getMilliseconds } from 'date-fns/getMilliseconds';
+import { getWeek } from 'date-fns/getWeek';
+import { getYear } from 'date-fns/getYear';
+import { isAfter } from 'date-fns/isAfter';
+import { isBefore } from 'date-fns/isBefore';
+import { isEqual } from 'date-fns/isEqual';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isSameYear } from 'date-fns/isSameYear';
+import { isSameMonth } from 'date-fns/isSameMonth';
+import { isSameHour } from 'date-fns/isSameHour';
+import { isValid } from 'date-fns/isValid';
+import { parse as dateFnsParse } from 'date-fns/parse';
+import { setDate } from 'date-fns/setDate';
+import { setHours } from 'date-fns/setHours';
+import { setMinutes } from 'date-fns/setMinutes';
+import { setMonth } from 'date-fns/setMonth';
+import { setSeconds } from 'date-fns/setSeconds';
+import { setMilliseconds } from 'date-fns/setMilliseconds';
+import { setYear } from 'date-fns/setYear';
+import { startOfDay } from 'date-fns/startOfDay';
+import { startOfMonth } from 'date-fns/startOfMonth';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { startOfWeek } from 'date-fns/startOfWeek';
+import { startOfYear } from 'date-fns/startOfYear';
+import { isWithinInterval } from 'date-fns/isWithinInterval';
+import { enUS } from 'date-fns/locale/en-US';
+// date-fns v2 does not export types
+// @ts-ignore TODO remove when date-fns-v3 is the default
+
+import { AdapterDateFnsBase } from '../AdapterDateFnsBase';
+
+/**
+ * Based on `@date-io/date-fns`
+ *
+ * MIT License
+ *
+ * Copyright (c) 2017 Dmitriy Kovalenko
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export class AdapterDateFns extends AdapterDateFnsBase {
+  constructor({
+    locale,
+    formats
+  } = {}) {
+    if (typeof addDays !== 'function') {
+      throw new Error([`MUI: The \`date-fns\` package v2.x is not compatible with this adapter.`, 'Please, install v3.x of the package or use the `AdapterDateFns` instead.'].join('\n'));
+    }
+    if (!longFormatters) {
+      throw new Error('MUI: The minimum supported `date-fns` package version compatible with this adapter is `3.2.x`.');
+    }
+    super({
+      locale: locale != null ? locale : enUS,
+      formats,
+      longFormatters
+    });
+    this.parse = (value, format) => {
+      if (value === '') {
+        return null;
+      }
+      return dateFnsParse(value, format, new Date(), {
+        locale: this.locale
+      });
+    };
+    this.isValid = value => {
+      if (value == null) {
+        return false;
+      }
+      return isValid(value);
+    };
+    this.format = (value, formatKey) => {
+      return this.formatByString(value, this.formats[formatKey]);
+    };
+    this.formatByString = (value, formatString) => {
+      return dateFnsFormat(value, formatString, {
+        locale: this.locale
+      });
+    };
+    this.isEqual = (value, comparing) => {
+      if (value === null && comparing === null) {
+        return true;
+      }
+      if (value === null || comparing === null) {
+        return false;
+      }
+      return isEqual(value, comparing);
+    };
+    this.isSameYear = (value, comparing) => {
+      return isSameYear(value, comparing);
+    };
+    this.isSameMonth = (value, comparing) => {
+      return isSameMonth(value, comparing);
+    };
+    this.isSameDay = (value, comparing) => {
+      return isSameDay(value, comparing);
+    };
+    this.isSameHour = (value, comparing) => {
+      return isSameHour(value, comparing);
+    };
+    this.isAfter = (value, comparing) => {
+      return isAfter(value, comparing);
+    };
+    this.isAfterYear = (value, comparing) => {
+      return isAfter(value, endOfYear(comparing));
+    };
+    this.isAfterDay = (value, comparing) => {
+      return isAfter(value, endOfDay(comparing));
+    };
+    this.isBefore = (value, comparing) => {
+      return isBefore(value, comparing);
+    };
+    this.isBeforeYear = (value, comparing) => {
+      return isBefore(value, this.startOfYear(comparing));
+    };
+    this.isBeforeDay = (value, comparing) => {
+      return isBefore(value, this.startOfDay(comparing));
+    };
+    this.isWithinRange = (value, [start, end]) => {
+      return isWithinInterval(value, {
+        start,
+        end
+      });
+    };
+    this.startOfYear = value => {
+      return startOfYear(value);
+    };
+    this.startOfMonth = value => {
+      return startOfMonth(value);
+    };
+    this.startOfWeek = value => {
+      return startOfWeek(value, {
+        locale: this.locale
+      });
+    };
+    this.startOfDay = value => {
+      return startOfDay(value);
+    };
+    this.endOfYear = value => {
+      return endOfYear(value);
+    };
+    this.endOfMonth = value => {
+      return endOfMonth(value);
+    };
+    this.endOfWeek = value => {
+      return endOfWeek(value, {
+        locale: this.locale
+      });
+    };
+    this.endOfDay = value => {
+      return endOfDay(value);
+    };
+    this.addYears = (value, amount) => {
+      return addYears(value, amount);
+    };
+    this.addMonths = (value, amount) => {
+      return addMonths(value, amount);
+    };
+    this.addWeeks = (value, amount) => {
+      return addWeeks(value, amount);
+    };
+    this.addDays = (value, amount) => {
+      return addDays(value, amount);
+    };
+    this.addHours = (value, amount) => {
+      return addHours(value, amount);
+    };
+    this.addMinutes = (value, amount) => {
+      return addMinutes(value, amount);
+    };
+    this.addSeconds = (value, amount) => {
+      return addSeconds(value, amount);
+    };
+    this.getYear = value => {
+      return getYear(value);
+    };
+    this.getMonth = value => {
+      return getMonth(value);
+    };
+    this.getDate = value => {
+      return getDate(value);
+    };
+    this.getHours = value => {
+      return getHours(value);
+    };
+    this.getMinutes = value => {
+      return getMinutes(value);
+    };
+    this.getSeconds = value => {
+      return getSeconds(value);
+    };
+    this.getMilliseconds = value => {
+      return getMilliseconds(value);
+    };
+    this.setYear = (value, year) => {
+      return setYear(value, year);
+    };
+    this.setMonth = (value, month) => {
+      return setMonth(value, month);
+    };
+    this.setDate = (value, date) => {
+      return setDate(value, date);
+    };
+    this.setHours = (value, hours) => {
+      return setHours(value, hours);
+    };
+    this.setMinutes = (value, minutes) => {
+      return setMinutes(value, minutes);
+    };
+    this.setSeconds = (value, seconds) => {
+      return setSeconds(value, seconds);
+    };
+    this.setMilliseconds = (value, milliseconds) => {
+      return setMilliseconds(value, milliseconds);
+    };
+    this.getDaysInMonth = value => {
+      return getDaysInMonth(value);
+    };
+    this.getWeekArray = value => {
+      const start = this.startOfWeek(this.startOfMonth(value));
+      const end = this.endOfWeek(this.endOfMonth(value));
+      let count = 0;
+      let current = start;
+      const nestedWeeks = [];
+      while (this.isBefore(current, end)) {
+        const weekNumber = Math.floor(count / 7);
+        nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
+        nestedWeeks[weekNumber].push(current);
+        current = this.addDays(current, 1);
+        count += 1;
+      }
+      return nestedWeeks;
+    };
+    this.getWeekNumber = value => {
+      return getWeek(value, {
+        locale: this.locale
+      });
+    };
+    this.getYearRange = ([start, end]) => {
+      const startDate = this.startOfYear(start);
+      const endDate = this.endOfYear(end);
+      const years = [];
+      let current = startDate;
+      while (this.isBefore(current, endDate)) {
+        years.push(current);
+        current = this.addYears(current, 1);
+      }
+      return years;
+    };
+  }
+}

package/AdapterDateFnsV3/index.d.ts

@@ -0,0 +1 @@
+export { AdapterDateFns } from './AdapterDateFnsV3';

package/AdapterDateFnsV3/index.js

@@ -0,0 +1 @@
+export { AdapterDateFns } from './AdapterDateFnsV3';

package/AdapterDateFnsV3/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/AdapterDateFnsV3/index.js",
+  "types": "./index.d.ts"
+}

package/CHANGELOG.md

@@ -3,6 +3,90 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-alpha.8
+
+_Jan 11, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- ⏰ Support date-fns v3 (#11659) @LukasTy
+  Pickers support both v2 and v3 of date-fns. For v3 use `AdapterDateFnsV3`.
+  ```js
+  // with date-fns v2.x
+  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+  import de from 'date-fns/locale/de';
+  ```
+  ```js
+  // with date-fns v3.x
+  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+  import { de } from 'date-fns/locale/de';
+  ```
+
+### Data Grid
+
+#### Breaking changes
+
+- The import path for locales has been changed:
+
+  ```diff
+  -import { enUS } from '@mui/x-data-grid';
+  +import { enUS } from '@mui/x-data-grid/locales';
+
+  -import { enUS } from '@mui/x-data-grid-pro';
+  +import { enUS } from '@mui/x-data-grid-pro/locales';
+
+  -import { enUS } from '@mui/x-data-grid-premium';
+  +import { enUS } from '@mui/x-data-grid-premium/locales';
+  ```
+
+#### `@mui/x-data-grid@7.0.0-alpha.8`
+
+- [DataGrid] Stop exporting locales from the package root (#11614) @cherniavskii
+
+#### `@mui/x-data-grid-pro@7.0.0-alpha.8` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0-alpha.8`.
+
+#### `@mui/x-data-grid-premium@7.0.0-alpha.8` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.8`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@7.0.0-alpha.8`
+
+- [pickers] Add `date-fns@3.x` adapter (#11462) @LukasTy
+- [pickers] Avoid deeper than 2nd level imports (#11588) @LukasTy
+- [pickers] Fix clearable behavior blocking focus return to `OpenPickerButton` (#11642) @noraleonte
+- [pickers] Move `DateRange` to `@mui/x-date-pickers-pro/models` (#11611) @flaviendelangle
+- [l10n] Add missing Danish (da-DK) locale export (#11640) @etlos
+
+#### `@mui/x-date-pickers-pro@7.0.0-alpha.8` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0-alpha.8`.
+
+### Tree View / `@mui/x-tree-view@7.0.0-alpha.8`
+
+- [tree view] Cleanup `onKeyDown` handler (#11481) @flaviendelangle
+- [tree view] Define the parameters used by each plugin to avoid listing them in each component (#11473) @flaviendelangle
+
+### Docs
+
+- [docs] Fix parsing of `x-date-pickers-pro` demo adapter imports (#11628) @LukasTy
+- [docs] Improve `git diff` format @oliviertassinari
+- [docs] Push up the MUI X brand (#11533) @oliviertassinari
+- [docs] Remove old data grid translation files (#11646) @cherniavskii
+- [docs] Improve Server-side data grid docs (#11589) @oliviertassinari
+- [docs] Improve charts landing page (#11570) @oliviertassinari
+
+### Core
+
+- [core] Lock `jsdom` version (#11652) @cherniavskii
+- [core] Remove PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD (#11608) @oliviertassinari
+- [core] Simplify isSsr logic (#11606) @oliviertassinari
+- [core] Sync playwright cache between MUI X and Material UI (#11607) @oliviertassinari
+- [core] Use MUI X official name in errors (#11645) @oliviertassinari
+
 ## 7.0.0-alpha.7
 
 _Jan 5, 2024_
@@ -28,7 +112,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
       label: 'Node 2',
     },
   ];
-  
+
   <RichTreeView
     items={MUI_X_PRODUCTS}
     defaultCollapseIcon={<ExpandMoreIcon />}
@@ -88,10 +172,10 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.7`.
     <TreeView
   -   onNodeToggle={handleExpansionChange}
   +   onExpandedNodesChange={handleExpansionChange}
-  
+
   -   expanded={expandedNodes}
   +   expandedNodes={expandedNodes}
-  
+
   -   defaultExpanded={defaultExpandedNodes}
   +   defaultExpandedNodes={defaultExpandedNodes}
     />
@@ -274,10 +358,10 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.5`.
 The `SlotsComponent` suffix has been replaced with `Slots` and `SlotsComponentsProps` with `SlotProps`.
 
   ```diff
-  - DateCalendarSlotsComponent
-  + DateCalendarSlots
-  - DateCalendarSlotsComponentsProps
-  + DateCalendarSlotProps
+  -DateCalendarSlotsComponent
+  -DateCalendarSlotsComponentsProps
+  +DateCalendarSlots
+  +DateCalendarSlotProps
   ```
 
 - Move `inputRef` inside the props passed to the field hooks
@@ -285,26 +369,26 @@ The `SlotsComponent` suffix has been replaced with `Slots` and `SlotsComponentsP
   The field hooks now only receive the props instead of an object containing both the props and the `inputRef`.
 
   ```diff
-  - const { inputRef, ...otherProps } = props
-  - const fieldResponse = useDateField({ props: otherProps, inputRef });
-  + const fieldResponse = useDateField(props);
+  -const { inputRef, ...otherProps } = props
+  -const fieldResponse = useDateField({ props: otherProps, inputRef });
+  +const fieldResponse = useDateField(props);
   ```
 
   If you are using a multi input range field hook, the same applies to `startInputRef` and `endInputRef` params
 
   ```diff
-  - const { inputRef: startInputRef, ...otherStartTextFieldProps } = startTextFieldProps
-  - const { inputRef: endInputRef, ...otherEndTextFieldProps } = endTextFieldProps
-
-    const fieldResponse = useMultiInputDateRangeField({
-      sharedProps,
-  -   startTextFieldProps: otherStartTextFieldProps,
-  -   endTextFieldProps: otherEndTextFieldProps,
-  -   startInputRef
-  -   endInputRef,
-  +   startTextFieldProps, 
-  +   endTextFieldProps
-    });
+  -const { inputRef: startInputRef, ...otherStartTextFieldProps } = startTextFieldProps
+  -const { inputRef: endInputRef, ...otherEndTextFieldProps } = endTextFieldProps
+
+   const fieldResponse = useMultiInputDateRangeField({
+     sharedProps,
+  -  startTextFieldProps: otherStartTextFieldProps,
+  -  endTextFieldProps: otherEndTextFieldProps,
+  -  startInputRef
+  -  endInputRef,
+  +  startTextFieldProps,
+  +  endTextFieldProps
+   });
   ```
 
 - Rename the ref returned by the field hooks to `inputRef`
@@ -313,26 +397,26 @@ The `SlotsComponent` suffix has been replaced with `Slots` and `SlotsComponentsP
   This ref was previously named `ref` and has been renamed `inputRef` for extra clarity.
 
   ```diff
-    const fieldResponse = useDateField(props);
+   const fieldResponse = useDateField(props);
 
-  - return <input ref={fieldResponse.ref} /> 
-  + return <input ref={fieldResponse.inputRef} />
+  -return <input ref={fieldResponse.ref} />
+  +return <input ref={fieldResponse.inputRef} />
   ```
 
   If you are using a multi input range field hook, the same applies to the ref in the `startDate` and `endDate` objects
 
   ```diff
-    const fieldResponse = useDateField(props);
+   const fieldResponse = useDateField(props);
 
-    return (
-      <div>
-  -     <input ref={fieldResponse.startDate.ref} />
-  +     <input ref={fieldResponse.startDate.inputRef} />
-        <span>–</span>
-  -     <input ref={fieldResponse.endDate.ref} />
-  +     <input ref={fieldResponse.endDate.inputRef} />
-      </div>
-    )
+   return (
+     <div>
+  -    <input ref={fieldResponse.startDate.ref} />
+  +    <input ref={fieldResponse.startDate.inputRef} />
+       <span>–</span>
+  -    <input ref={fieldResponse.endDate.ref} />
+  +    <input ref={fieldResponse.endDate.inputRef} />
+     </div>
+   )
   ```
 
 - Restructure the API of `useClearableField`
@@ -342,23 +426,23 @@ The `SlotsComponent` suffix has been replaced with `Slots` and `SlotsComponentsP
   You should now be able to directly pass the returned value from your field hook (e.g: `useDateField`) to `useClearableField`
 
   ```diff
-    const fieldResponse = useDateField(props);
-
-  - const { InputProps, onClear, clearable, slots, slotProps, ...otherFieldProps } = fieldResponse
-  - const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField({
-  -   fieldProps: otherFieldProps,
-  -   InputProps,
-  -   clearable,
-  -   onClear,
-  -   slots,
-  -   slotProps,
-  - }); 
+   const fieldResponse = useDateField(props);
+
+  -const { InputProps, onClear, clearable, slots, slotProps, ...otherFieldProps } = fieldResponse
+  -const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField({
+  -  fieldProps: otherFieldProps,
+  -  InputProps,
+  -  clearable,
+  -  onClear,
+  -  slots,
+  -  slotProps,
+  -});
   -
-  -  return <MyCustomTextField {...processedFieldProps} InputProps={ProcessedInputProps} />
+  - return <MyCustomTextField {...processedFieldProps} InputProps={ProcessedInputProps} />
 
-  + const processedFieldProps = useClearableField(fieldResponse);
+  +const processedFieldProps = useClearableField(fieldResponse);
   +
-  + return <MyCustomTextField {...processedFieldProps} />
+  +return <MyCustomTextField {...processedFieldProps} />
   ```
 
 #### `@mui/x-date-pickers@7.0.0-alpha.5`
@@ -1340,6 +1424,48 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.0
+
+_Jan 11, 2024_
+
+We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- ⏰ Support date-fns v3 (#11659) @LukasTy
+  Pickers support both v2 and v3 of date-fns. For v3 use `AdapterDateFnsV3`.
+  ```js
+  // with date-fns v2.x
+  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+  import de from 'date-fns/locale/de';
+  ```
+  ```js
+  // with date-fns v3.x
+  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+  import { de } from 'date-fns/locale/de';
+  ```
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.0`
+
+- [pickers] Add date-fns@3.x adapter (#11659) @LukasTy
+- [pickers] Fix clearable behavior blocking focus return to `OpenPickerButton` (#11643) @noraleonte
+- [l10n] Add missing Danish (da-DK) locale export (#11641) @etlos
+
+#### `@mui/x-date-pickers-pro@6.19.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.19.0`.
+
+### Docs
+
+- [docs] Add missing component @oliviertassinari
+- [docs] Fix parsing of `x-date-pickers-pro` demo adapter imports (#11637) @LukasTy
+- [docs] Push up the MUI X brand (#11533) @oliviertassinari
+- [docs] Improve Server-side data grid docs (#11589) @oliviertassinari
+- [docs] Add demo to the charts overview page (#11586) @danilo-leal
+- [docs] Fix 404 links in the docs @oliviertassinari
+- [docs] Improve landing page (#11570) @oliviertassinari
+- [docs] Give a general revision to the docs (#11249) @danilo-leal
+
 ## 6.18.7
 
 _Jan 5, 2024_