@mui/x-date-pickers-pro 5.0.0-alpha.2 → 5.0.0-alpha.3

package/CHANGELOG.md

@@ -3,6 +3,159 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.11.0
+
+_May 13, 2022_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Premium plan release
+
+  We’re happy to announce that the Premium plan is [finally out](https://mui.com/blog/premium-plan-release/)!
+  With it, MUI X officially steps up to the next level, supporting the most advanced use cases for UI components.
+
+  This plan is available through the new `@mui/x-data-grid-premium` package, which contains the row grouping and the Excel export features.
+
+  If you were already using the row grouping feature, you can upgrade by [installing](https://mui.com/x/react-data-grid/getting-started/#installation) `@mui/x-data-grid-premium` and replace `DataGridPro` with `DataGridPremium`, as follows.
+  Note that the experimental flag is not required anymore to use the row grouping.
+
+  ```diff
+  -import { DataGridPro } from '@mui/x-data-grid-pro';
+  +import { DataGridPremium } from '@mui/x-data-grid-premium';
+
+  -<DataGridPro experimentalFeatures={{ rowGrouping: true }} />
+  +<DataGridPremium />
+  ```
+
+  For more information about the revised pricing model please have a look at the [blog post](https://mui.com/blog/premium-plan-release/#the-new-licensing-model).
+
+- 👔 Add Excel export
+
+- 🔎 Quick filtering
+
+  You can now add a quick filtering search bar to your grid.
+  To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar.
+
+  More information about how to customize the filtering logic is in the [documentation](https://mui.com/x/react-data-grid/filtering/#quick-filter)
+
+  ![image](https://user-images.githubusercontent.com/13808724/167700105-5a5acc7c-5463-4871-8514-3d09e2f365ae.png)
+
+- 🐞 Bugs fixes
+
+### `@mui/x-data-grid@v5.11.0` / `@mui/x-data-grid-pro@v5.11.0` / `@mui/x-data-grid-premium@v5.11.0`
+
+#### Breaking changes
+
+- Moving row grouping to premium package
+
+  The use of `rowGrouping` in the `@mui/x-data-grid-pro` package is deprecated. The experimental flag will be removed in an upcoming release.
+
+#### Changes
+
+- [DataGrid] Add TypeScript support to the `sx` prop in inner components (#4743) @lindapaiste
+- [DataGrid] Add props to control cell mode (#4210) @m4theushw
+- [DataGrid] Add quick filtering engine (#4317) @alexfauquette
+- [DataGrid] Check focus validity whenever the rows in state changes (#4683) @flaviendelangle
+- [DataGrid] Fix infinite scroll when dragging column header cell over row cell (#4735) @DjoSmer
+- [DataGrid] Fix scroll jump when using keyboard navigation (#4515) @cherniavskii
+- [DataGrid] Improve sorting accessibility (#4379) @cherniavskii
+- [DataGrid] New `getRowGroupChildren` API method (#4304) @flaviendelangle
+- [DataGrid] Publish `preferencePanelClose` event only once when clicking on another panel button (#4810) @flaviendelangle
+- [DataGrid] Update focused action if the currently focused one is removed (#4694) @m4theushw
+- [DataGrid] Add `onChange` callback to edit components (#4621) @m4theushw
+- [DataGrid] Add `keepNonExistentRowsSelected` prop (#4786) @willsoto
+- [DataGrid] Prevent crash if row is removed with click (#4831) @m4theushw
+- [DataGridPro] Fix detail panel not taking full width (#4610) @cherniavskii
+- [DataGridPremium] Add Excel export (#3981) @alexfauquette
+- [DataGridPremium] Bootstrap `@mui/x-data-grid-premium` (#4223) @flaviendelangle
+- [DataGridPremium] Fix Excel date serialization when row grouping is enabled (#4774) @cherniavskii
+- [l10n] Improve German (de-DE) locale (#4748) @sebastianfrey
+- [l10n] Improve German (de-DE) locale (#4668) @izu-co
+
+### `@mui/x-date-pickers@5.0.0-alpha.3` / `@mui/x-date-pickers-pro@5.0.0-alpha.3`
+
+#### Breaking changes
+
+- Rework the auto-closing behavior of the pickers.
+
+  The `disableCloseOnSelect` prop has been replaced by a new `closeOnSelect` prop which has the opposite behavior.
+  The default behavior remains the same (close after the last step on desktop but not on mobile).
+
+  ```diff
+   // If you don't want to close after the last step
+  -<DatePicker disableCloseOnSelect={false} />
+  +<DatePicker closeOnSelect />
+
+   // If you want to close after the last step
+  -<DatePicker disableCloseOnSelect />
+  +<DatePicker closeOnSelect={false} />
+  ```
+
+#### Changes
+
+- [DatePicker] Ignore <kbd>Escape</kbd> when the picker is already closed (#4770) @mikewolfd
+- [DatePicker] Make month year order changeable in header (#4695) @gky360
+- [DateRangePicker] Open view on click, <kbd>Enter</kbd> or <kbd>Space</kbd> instead of focus (#4747) @alexfauquette
+- [DateRangePicker] Refactor tests (#4745) @flaviendelangle
+- [DateRangePicker] Remove `orientation` prop (#4665) @m4theushw
+- [DateTimePicker] `Toolbar` should be visible by default on mobile (#4833) @flaviendelangle
+- [MonthPicker] New prop `shouldDisableMonth` (#4708) @someone635
+- [TimePicker] Disable and invalidate date with minutes not matching `minutesStep` (#4726) @flaviendelangle
+- [TimePicker] Don't merge with previous value when new value is not valid (#4847) @flaviendelangle
+- [TimePicker] Refactor `isTimeDisabled` method (#4688) @flaviendelangle
+- [pickers] Add details in invalid mask error (#4501) @alexfauquette
+- [pickers] Add explicit interfaces for components slots and components slots props (#4589) @flaviendelangle
+- [pickers] Add missing `peerDependencies` for `yarn pnp` users (#4763) @nate-summercook
+- [pickers] Add overrides to `PickersArrowSwitcher` (#4672) @m4theushw
+- [pickers] Clean component interfaces and remove non-implemented props (#4758) @flaviendelangle
+- [pickers] Do not apply the current time when no date provided in `DayPicker` (#4649) @flaviendelangle
+- [pickers] Document and refacto the value manager (#4701) @flaviendelangle
+- [pickers] Drop `allowSameDateSelection` prop (#4808) @flaviendelangle
+- [pickers] Enable mask by default when using `ampm=true` (#4731) @alexfauquette
+- [pickers] Fix `disabled` and `readOnly` behavior on calendar and clock (#4645) @alexfauquette
+- [pickers] Invalid character does not delete last digit (#4839) @alexfauquette
+- [pickers] Rename prop `date` into `parsedValue` when it can contain a range (#4736) @flaviendelangle
+- [pickers] Rework `TDate`, `TInputDate`, `TValue` and `TInputValue` generics (#4617) @flaviendelangle
+- [pickers] Rework the date lifecycle in `usePickerState` (#4408) @flaviendelangle
+
+### Docs
+
+- [docs] Add `scopePathNames` property to column page (#4811) @flaviendelangle
+- [docs] Add label to each demo (#4667) @m4theushw
+- [docs] Correctly capitalize <kbd>Ctrl</kbd> (#4707) @oliviertassinari
+- [docs] Fix documentation on `ampm` prop (#4846) @alexfauquette
+- [docs] Generate the event documentation from `GridEventLookup` (#4725) @flaviendelangle
+- [docs] Keep columns section expanded when switching between pages (#4816) @cherniavskii
+- [docs] Move `useKeepGroupingColumnsHidden` on `@mui/x-data-grid-premium` (#4319) @flaviendelangle
+- [docs] Remove legacy pages for old URLs (#4575) @m4theushw
+- [docs] Remove remaining pages in `docs/pages/api-docs` folder (#4709) @m4theushw
+- [docs] SEO fixes (#4711) @oliviertassinari
+- [docs] Set type number to movie column year (#4753) @flaviendelangle
+- [docs] Simplify server examples (#4186) @alexfauquette
+- [docs] Small typo (#4670) @flaviendelangle
+- [docs] Split the 'Columns' page (#4600) @flaviendelangle
+- [docs] Stop using `GridEvents` enum in documentation (#4699) @flaviendelangle
+- [docs] Update mono repo to get copy code block (#4691) @siriwatknp
+- [docs] Update the feature table in the Getting Started page of the data grid (#4619) @flaviendelangle
+- [docs] Add demo for Premium (#4750) @m4theushw
+
+### Core
+
+- [core] Check if `process` is available (#4193) @m4theushw
+- [core] Fix naming collision (#4853) @alexfauquette
+- [core] Prevent out-of-memory when type-checking in CI (#4697) @flaviendelangle
+- [core] Remove `rowsCache` from state (#4480) @m4theushw
+- [core] Rework `DayPicker` api (#4783) @flaviendelangle
+- [core] Update `x-license-pro` license to handle premium package (#4315) @DanailH
+- [core] Update monorepo & version (#4789) @oliviertassinari
+- [core] Update monorepo (#4772) @flaviendelangle
+- [core] Stop using `GridEvents` enum (#4698, #4696, #4685) @flaviendelangle
+- [core] Update monorepo (#4854) @cherniavskii
+- [license] Allow to limit some packages to a specific license plan (#4651) @flaviendelangle
+- [test] Fix path to detect `DataGrid` tests (#4752) @m4theushw
+- [test] Reset cleanup tracking on Karma tests (#4679) @m4theushw
+- [test] Restore `sinon` sandbox after each `karma` test (#4689) @m4theushw
+
 ## v5.10.0
 
 _Apr 25, 2022_
@@ -49,7 +202,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 
   Now the data grid and pickers components support the concurrent mode.
 
-- 🎁 Add support for [Column spanning](https://mui.com/x/react-data-grid/columns/#column-spanning) (#4020) @cherniavskii
+- 🎁 Add support for [Column spanning](https://mui.com/x/react-data-grid/column-spanning/) (#4020) @cherniavskii
 
   <img src="https://user-images.githubusercontent.com/13808724/162926746-93bcb180-3c9d-4eb9-afc7-c3908a5c6406.png" width="788">
 
@@ -672,7 +825,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some
   />
   ```
 
-  See the [documentation](https://mui.com/x/react-data-grid/columns/#column-visibility) for more details.
+  See the [documentation](https://mui.com/x/react-data-grid/column-visibility/) for more details.
 
   The `hide` property from `GridColDef` still works but has been deprecated.
 
@@ -828,7 +981,7 @@ A big thanks to the 5 contributors who made this release possible. Here are some
 
 ### `@mui/x-data-grid@v5.2.0` / `@mui/x-data-grid-pro@v5.2.0`
 
-- 🚀 Introduce the [column pinning](https://mui.com/x/react-data-grid/columns/#column-pinning) feature (#2946) @m4theushw
+- 🚀 Introduce the [column pinning](https://mui.com/x/react-data-grid/column-pinning/) feature (#2946) @m4theushw
 
   <img src="https://user-images.githubusercontent.com/42154031/145425635-b6314fbe-2f1e-4b73-908f-33ee1fda20c7.gif" width="964" height="657">
 
@@ -1782,7 +1935,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some
 - 📚 Migrate to the new documentation infrastructure and design (#2441) (@DanailH, @m4theushw)
 - 🎁 Add `actions` column type (#2385) @m4theushw
 
-  See the documentation for [more details](https://mui.com/x/react-data-grid/columns/#column-types).
+  See the documentation for [more details](https://mui.com/x/react-data-grid/column-definition/#column-types).
 
 - 👁 Allow to disable virtualization with the `disableVirtualization` prop (#2326) @m4theushw
 - 🚀 Introduce the new `isRowSelected` api method (#2523) @flaviendelangle
@@ -2404,11 +2557,11 @@ _July 1, 2021_
 Big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
 
 - 🐞 As a focus of Q2, we have kept fixing bugs
-- 💅 End users are now allowed to copy the selected rows to the clipboard with <kbd>CTRL</kbd> + <kbd>c</kbd> (#1929) @m4theushw
+- 💅 End users are now allowed to copy the selected rows to the clipboard with <kbd>Ctrl</kbd> + <kbd>c</kbd> (#1929) @m4theushw
 - 🐛 We have fixed the `Select all` checkbox. When triggered, it should only select the filtered rows (#1879) @ZeeshanTamboli
 - ⚡️ We have added a new `singleSelect` column type (#1956) @DanailH
 
-  Using the column `type: 'singleSelect'` defaults to `Select` component when the cell is in `edit` mode. You can find the documentation [following this link](https://mui.com/x/react-data-grid/columns/#column-types).
+  Using the column `type: 'singleSelect'` defaults to `Select` component when the cell is in `edit` mode. You can find the documentation [following this link](https://mui.com/x/react-data-grid/column-definition/#column-types).
 
   ```jsx
   <DataGrid
@@ -2604,7 +2757,7 @@ _June 9, 2021_
 Big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
 
 - 💅 Allow to customize GridToolbarExport's CSV export (#1695) @michallukowski
-- 🐛 Allow to deselect rows with <kbd>CTRL</kbd> + click (#1813) @ZeeshanTamboli
+- 🐛 Allow to deselect rows with <kbd>Ctrl</kbd> + click (#1813) @ZeeshanTamboli
 - ⚡️ Refactor scroll size detector (#1703) @dtassone
 - 📖 Add [documentation](https://mui.com/x/api/data-grid/) for interfaces and events (#1529) @m4theushw
 - 🐞 Bugfixes
@@ -2631,7 +2784,7 @@ Big thanks to the 6 contributors who made this release possible. Here are some h
 
 - [DataGrid] Add `valueParser` to parse values entered by the user (#1785) @m4theushw
 - [DataGrid] Allow to customize GridToolbarExport's CSV export (#1695) @michallukowski
-- [DataGrid] Allow to deselect rows with <kbd>CTRL</kbd> + click (#1813) @ZeeshanTamboli
+- [DataGrid] Allow to deselect rows with <kbd>Ctrl</kbd> + click (#1813) @ZeeshanTamboli
 - [DataGrid] Improve general architecture to better isolate hooks (#1720) @dtassone
 - [DataGrid] Fix cell height after changing grid density (#1819) @DanailH
 - [DataGrid] Fix fluid columns width when available `viewportWidth` < 0 (#1816) @DanailH
@@ -3153,7 +3306,7 @@ Big thanks to the 8 contributors who made this release possible. Here are some h
 - [DataGrid] Rename `useGridBaseComponentProps` hook to `useGridSlotComponentProps` (#1252) @DanailH
 - [DataGrid] Rename modules (#1292) @DanailH
 - [DataGrid] Rename all events related to column reordering, e.g. `GRID_COL_REORDER_START` -> `GRID_COLUMN_REORDER_START` (#1299) @m4theushw
-- [DataGrid] Methods `onColItemDragStart`, `onColHeaderDragOver`, `onColItemDragOver`, `onColItemDragEnter` removed from the grid API. Prefer listening to [column reordering events](https://mui.com/x/react-data-grid/columns/#column-reorder) (#1299) @m4theushw
+- [DataGrid] Methods `onColItemDragStart`, `onColHeaderDragOver`, `onColItemDragOver`, `onColItemDragEnter` removed from the grid API. Prefer listening to [column reordering events](https://mui.com/x/react-data-grid/column-ordering/) (#1299) @m4theushw
 - [DataGrid] Calling `apiRef.current.getColumnHeaderParams` returns a `GridColumnHeaderParams` instead of `GridColParams` (#1299) @m4theushw
 - [DataGrid] Events that follow the pattern `GRID_COLUMN_HEADER_xxx` will be called with a `GridColumnHeaderParams` instead of `GridColParams` (#1299) @m4theushw
 - [DataGrid] The `renderHeader` will be called with a `GridColumnHeaderParams` instead of `GridColParams` (#1299) @m4theushw
@@ -3521,7 +3674,7 @@ _Jan 14, 2021_
 Big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
 
 - 🎛 Add support for Column selector (#837) @DanailH @dtassone.
-  The feature can be triggered from the toolbar or the column menu. Check [the documentation](https://mui.com/x/react-data-grid/columns/#column-selector).
+  The feature can be triggered from the toolbar or the column menu. Check [the documentation](https://mui.com/x/react-data-grid/column-definition/#column-selector).
 
   ![column selector](https://user-images.githubusercontent.com/3165635/104791267-6ff77300-579a-11eb-9338-11a8fde83258.gif)
 

package/DateRangePicker/DateRangePicker.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DesktopDateRangePickerProps } from '../DesktopDateRangePicker';
 import { MobileDateRangePickerProps } from '../MobileDateRangePicker';
-export interface DateRangePickerProps<TDate> extends DesktopDateRangePickerProps<TDate>, MobileDateRangePickerProps<TDate> {
+export interface DateRangePickerProps<TInputDate, TDate> extends DesktopDateRangePickerProps<TInputDate, TDate>, MobileDateRangePickerProps<TInputDate, TDate> {
     /**
      * CSS media query when `Mobile` mode will be changed to `Desktop`.
      * @default '@media (pointer: fine)'
@@ -9,7 +9,7 @@ export interface DateRangePickerProps<TDate> extends DesktopDateRangePickerProps
      */
     desktopModeMediaQuery?: string;
 }
-declare type DateRangePickerComponent = (<TDate>(props: DateRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+declare type DateRangePickerComponent = (<TInputDate, TDate = TInputDate>(props: DateRangePickerProps<TInputDate, TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };
 /**

package/DateRangePicker/DateRangePicker.js

@@ -71,12 +71,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-
-  /**
-   * If `true`, `onChange` is fired on click even if the same date is selected.
-   * @default false
-   */
-  allowSameDateSelection: PropTypes.bool,
   autoFocus: PropTypes.bool,
 
   /**
@@ -109,6 +103,12 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    */
   clearText: PropTypes.node,
 
+  /**
+   * If `true` the popup or dialog will immediately close after submitting full date.
+   * @default `true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   */
+  closeOnSelect: PropTypes.bool,
+
   /**
    * The components used for each slot.
    * Either a string to use an HTML element or a component.
@@ -145,12 +145,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    */
   disableAutoMonthSwitching: PropTypes.bool,
 
-  /**
-   * If `true` the popup or dialog will immediately close after submitting full date.
-   * @default `true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
-   */
-  disableCloseOnSelect: PropTypes.bool,
-
   /**
    * If `true`, the picker and text field are disabled.
    * @default false
@@ -193,11 +187,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
 
   /**
    * Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType
-   * @template TDateValue
-   * @param {ParseableDate<TDateValue>} value The date from which we want to add an aria-text.
-   * @param {MuiPickersAdapter<TDateValue>} utils The utils to manipulate the date.
+   * @template TInputDate, TDate
+   * @param {TInputDate} date The date from which we want to add an aria-text.
+   * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
    * @returns {string} The aria-text to render inside the dialog.
-   * @default (value, utils) => `Choose date, selected date is ${utils.format(utils.date(value), 'fullDate')}`
+   * @default (date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`
    */
   getOpenDialogAriaText: PropTypes.func,
 
@@ -248,13 +242,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
 
   /**
    * Max selectable date. @DateIOType
-   * @default defaultMaxDate
    */
   maxDate: PropTypes.any,
 
   /**
    * Min selectable date. @DateIOType
-   * @default defaultMinDate
    */
   minDate: PropTypes.any,
 
@@ -266,8 +258,8 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
 
   /**
    * Callback fired when date is accepted @DateIOType.
-   * @template TDateValue
-   * @param {TDateValue} date The date that was just accepted.
+   * @template TValue
+   * @param {TValue} value The value that was just accepted.
    */
   onAccept: PropTypes.func,
 
@@ -293,16 +285,17 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * [Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.
    * @DateIOType
    *
-   * @template TError, TDateValue
+   * @template TError, TInputValue
    * @param {TError} reason The reason why the current value is not valid.
-   * @param {TDateValue} value The invalid value.
+   * @param {TInputValue} value The invalid value.
    */
   onError: PropTypes.func,
 
   /**
-   * Callback firing on month change. @DateIOType
+   * Callback firing on month change @DateIOType.
    * @template TDate
-   * @param {TDate} month The new month.
+   * @param {TDate} month The new year.
+   * @returns {void|Promise} -
    */
   onMonthChange: PropTypes.func,
 
@@ -328,11 +321,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    */
   OpenPickerButtonProps: PropTypes.object,
 
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation: PropTypes.oneOf(['landscape', 'portrait']),
-
   /**
    * Paper props passed down to [Paper](https://mui.com/material-ui/api/paper/) component.
    */
@@ -415,6 +403,15 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    */
   shouldDisableDate: PropTypes.func,
 
+  /**
+   * Disable specific months dynamically.
+   * Works like `shouldDisableDate` but for month selection view @DateIOType.
+   * @template TDate
+   * @param {TDate} month The month to check.
+   * @returns {boolean} If `true` the month will be disabled.
+   */
+  shouldDisableMonth: PropTypes.func,
+
   /**
    * Disable specific years dynamically.
    * Works like `shouldDisableDate` but for year selection view @DateIOType.
@@ -453,22 +450,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    */
   todayText: PropTypes.node,
 
-  /**
-   * Component that will replace default toolbar renderer.
-   */
-  ToolbarComponent: PropTypes.elementType,
-
   /**
    * Date format, that is displaying in toolbar.
    */
   toolbarFormat: PropTypes.string,
 
-  /**
-   * Mobile picker date value placeholder, displaying if `value` === `null`.
-   * @default '–'
-   */
-  toolbarPlaceholder: PropTypes.node,
-
   /**
    * Mobile picker title, displaying in the toolbar.
    * @default 'Select date range'
@@ -481,7 +467,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   TransitionComponent: PropTypes.elementType,
 
   /**
-   * The value of the date range picker.
+   * The value of the picker.
    */
-  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.any, PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string])).isRequired
+  value: PropTypes.arrayOf(PropTypes.any).isRequired
 } : void 0;

package/DateRangePicker/DateRangePickerInput.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { DateInputProps, ExportedDateInputProps, MuiTextFieldProps } from '@mui/x-date-pickers/internals';
-import { RangeInput, DateRange, CurrentlySelectingRangeEndProps } from '../internal/models/dateRange';
+import { CurrentlySelectingRangeEndProps, DateRange } from '../internal/models/dateRange';
 import { DateRangeValidationError } from '../internal/hooks/validation/useDateRangeValidation';
-export interface ExportedDateRangePickerInputProps extends Omit<ExportedDateInputProps<RangeInput<any>, DateRange<any>>, 'renderInput'> {
+export interface ExportedDateRangePickerInputProps<TInputDate, TDate> extends Omit<ExportedDateInputProps<TInputDate, TDate>, 'renderInput'> {
     /**
      * The `renderInput` prop allows you to customize the rendered input.
      * The `startProps` and `endProps` arguments of this render prop contains props of [TextField](https://mui.com/material-ui/api/text-field/#props),
@@ -25,13 +25,17 @@ export interface ExportedDateRangePickerInputProps extends Omit<ExportedDateInpu
      * @returns {React.ReactElement} The range input to render.
      */
     renderInput: (startProps: MuiTextFieldProps, endProps: MuiTextFieldProps) => React.ReactElement;
+    onChange: (date: DateRange<TDate>, keyboardInputValue?: string) => void;
 }
-export interface DateRangeInputProps extends ExportedDateRangePickerInputProps, CurrentlySelectingRangeEndProps, Omit<DateInputProps<RangeInput<any>, DateRange<any>>, 'validationError' | 'renderInput'> {
+export interface DateRangeInputProps<TInputDate, TDate> extends ExportedDateRangePickerInputProps<TInputDate, TDate>, Omit<DateInputProps<TInputDate, TDate>, keyof ExportedDateRangePickerInputProps<TInputDate, TDate> | 'rawValue' | 'validationError'>, CurrentlySelectingRangeEndProps {
     startText: React.ReactNode;
     endText: React.ReactNode;
     validationError: DateRangeValidationError;
+    rawValue: DateRange<TInputDate>;
 }
+declare type DatePickerInputComponent = <TInputDate, TDate>(props: DateRangeInputProps<TInputDate, TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
 /**
  * @ignore - internal component.
  */
-export declare const DateRangePickerInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DateRangePickerInput: DatePickerInputComponent;
+export {};

package/DateRangePicker/DateRangePickerInput.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["currentlySelectingRangeEnd", "disableOpenPicker", "endText", "onBlur", "onChange", "open", "openPicker", "rawValue", "rawValue", "readOnly", "renderInput", "setCurrentlySelectingRangeEnd", "startText", "TextFieldProps", "validationError"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { useUtils, executeInTheNextEventLoopTick, WrapperVariantContext, useMaskedInput } from '@mui/x-date-pickers/internals';
+import { useUtils, executeInTheNextEventLoopTick, useMaskedInput, onSpaceOrEnter } from '@mui/x-date-pickers/internals';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DateRangePickerInputRoot = styled('div')(({
   theme
@@ -41,7 +41,6 @@ export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateR
   const utils = useUtils();
   const startRef = React.useRef(null);
   const endRef = React.useRef(null);
-  const wrapperVariant = React.useContext(WrapperVariantContext);
   React.useEffect(() => {
     if (!open) {
       return;
@@ -89,7 +88,18 @@ export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateR
     }
   };
 
-  const openOnFocus = wrapperVariant === 'desktop';
+  const focusOnRangeEnd = () => {
+    if (open && setCurrentlySelectingRangeEnd) {
+      setCurrentlySelectingRangeEnd('end');
+    }
+  };
+
+  const focusOnRangeStart = () => {
+    if (open && setCurrentlySelectingRangeEnd) {
+      setCurrentlySelectingRangeEnd('start');
+    }
+  };
+
   const startInputProps = useMaskedInput(_extends({}, other, {
     readOnly,
     rawValue: start,
@@ -101,8 +111,9 @@ export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateR
       focused: open && currentlySelectingRangeEnd === 'start'
     }),
     inputProps: {
-      onClick: !openOnFocus ? openRangeStartSelection : undefined,
-      onFocus: openOnFocus ? openRangeStartSelection : undefined
+      onClick: openRangeStartSelection,
+      onKeyDown: onSpaceOrEnter(openRangeStartSelection),
+      onFocus: focusOnRangeStart
     }
   }));
   const endInputProps = useMaskedInput(_extends({}, other, {
@@ -116,8 +127,9 @@ export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateR
       focused: open && currentlySelectingRangeEnd === 'end'
     }),
     inputProps: {
-      onClick: !openOnFocus ? openRangeEndSelection : undefined,
-      onFocus: openOnFocus ? openRangeEndSelection : undefined
+      onClick: openRangeEndSelection,
+      onKeyDown: onSpaceOrEnter(openRangeEndSelection),
+      onFocus: focusOnRangeEnd
     }
   }));
   return /*#__PURE__*/_jsx(DateRangePickerInputRoot, {

package/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { BaseToolbarProps } from '@mui/x-date-pickers/internals';
 import { DateRange, CurrentlySelectingRangeEndProps } from '../internal/models';
-interface DateRangePickerToolbarProps<TDate> extends CurrentlySelectingRangeEndProps, Pick<BaseToolbarProps<TDate>, 'isMobileKeyboardViewOpen' | 'toggleMobileKeyboardView' | 'toolbarTitle' | 'toolbarFormat'> {
-    date: DateRange<TDate>;
+interface DateRangePickerToolbarProps<TDate> extends CurrentlySelectingRangeEndProps, Pick<BaseToolbarProps<TDate, DateRange<TDate>>, 'isMobileKeyboardViewOpen' | 'toggleMobileKeyboardView' | 'toolbarTitle' | 'toolbarFormat' | 'parsedValue'> {
     startText: React.ReactNode;
     endText: React.ReactNode;
 }
 /**
  * @ignore - internal component.
  */
-export declare const DateRangePickerToolbar: <TDate extends unknown>({ currentlySelectingRangeEnd, date: [start, end], endText, isMobileKeyboardViewOpen, setCurrentlySelectingRangeEnd, startText, toggleMobileKeyboardView, toolbarFormat, toolbarTitle, }: DateRangePickerToolbarProps<TDate>) => JSX.Element;
+export declare const DateRangePickerToolbar: <TDate extends unknown>({ currentlySelectingRangeEnd, parsedValue: [start, end], endText, isMobileKeyboardViewOpen, setCurrentlySelectingRangeEnd, startText, toggleMobileKeyboardView, toolbarFormat, toolbarTitle, }: DateRangePickerToolbarProps<TDate>) => JSX.Element;
 export {};

package/DateRangePicker/DateRangePickerToolbar.js

@@ -21,7 +21,7 @@ const DateRangePickerToolbarContainer = styled('div')({
 
 export const DateRangePickerToolbar = ({
   currentlySelectingRangeEnd,
-  date: [start, end],
+  parsedValue: [start, end],
   endText,
   isMobileKeyboardViewOpen,
   setCurrentlySelectingRangeEnd,

package/DateRangePicker/DateRangePickerView.d.ts

@@ -1,10 +1,25 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import { BasePickerProps, WrapperVariant, PickerSelectionState, ExportedCalendarPickerProps } from '@mui/x-date-pickers/internals';
-import { DateRange, CurrentlySelectingRangeEndProps, RangeInput } from '../internal/models/dateRange';
+import { ExportedCalendarPickerProps, PickerStatePickerProps } from '@mui/x-date-pickers/internals';
+import { DateRange, CurrentlySelectingRangeEndProps } from '../internal/models/dateRange';
+import { DateRangePickerViewMobileSlotsComponent, DateRangePickerViewMobileSlotsComponentsProps } from './DateRangePickerViewMobile';
 import { DateRangeInputProps } from './DateRangePickerInput';
 import { ExportedDesktopDateRangeCalendarProps } from './DateRangePickerViewDesktop';
-export interface ExportedDateRangePickerViewProps<TDate> extends ExportedDesktopDateRangeCalendarProps<TDate>, Omit<ExportedCalendarPickerProps<TDate>, 'onYearChange' | 'renderDay'>, Omit<BasePickerProps<RangeInput<TDate>, DateRange<TDate>>, 'value' | 'onChange'> {
+export interface DateRangePickerViewSlotsComponent extends DateRangePickerViewMobileSlotsComponent {
+}
+export interface DateRangePickerViewSlotsComponentsProps extends DateRangePickerViewMobileSlotsComponentsProps {
+}
+export interface ExportedDateRangePickerViewProps<TDate> extends ExportedDesktopDateRangeCalendarProps<TDate>, Omit<ExportedCalendarPickerProps<TDate>, 'onYearChange' | 'renderDay'> {
+    /**
+     * The components used for each slot.
+     * Either a string to use an HTML element or a component.
+     * @default {}
+     */
+    components?: Partial<DateRangePickerViewSlotsComponent>;
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    componentsProps?: Partial<DateRangePickerViewSlotsComponentsProps>;
     /**
      * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
      * @default false
@@ -15,26 +30,28 @@ export interface ExportedDateRangePickerViewProps<TDate> extends ExportedDesktop
      * @default 'Select date range'
      */
     toolbarTitle?: React.ReactNode;
+    /**
+     * Date format, that is displaying in toolbar.
+     */
+    toolbarFormat?: string;
+    /**
+     * If `true`, show the toolbar even in desktop mode.
+     */
+    showToolbar?: boolean;
+    /**
+     * className applied to the root component.
+     */
+    className?: string;
 }
-interface DateRangePickerViewProps<TDate> extends CurrentlySelectingRangeEndProps, ExportedDateRangePickerViewProps<TDate> {
+interface DateRangePickerViewProps<TInputDate, TDate> extends CurrentlySelectingRangeEndProps, ExportedDateRangePickerViewProps<TDate>, PickerStatePickerProps<DateRange<TDate>> {
     calendars: 1 | 2 | 3;
     open: boolean;
     startText: React.ReactNode;
     endText: React.ReactNode;
-    isMobileKeyboardViewOpen: boolean;
-    toggleMobileKeyboardView: () => void;
-    DateInputProps: DateRangeInputProps;
-    date: DateRange<TDate>;
-    onDateChange: (date: DateRange<TDate>, currentWrapperVariant: WrapperVariant, isFinish?: PickerSelectionState) => void;
-}
-/**
- * @ignore - internal component.
- */
-export declare function DateRangePickerView<TDate>(props: DateRangePickerViewProps<TDate>): JSX.Element;
-export declare namespace DateRangePickerView {
-    var propTypes: {
-        calendars: PropTypes.Requireable<number>;
-        disableAutoMonthSwitching: PropTypes.Requireable<boolean>;
-    };
+    DateInputProps: DateRangeInputProps<TInputDate, TDate>;
 }
+declare type DateRangePickerViewComponent = (<TInputDate, TDate = TInputDate>(props: DateRangePickerViewProps<TInputDate, TDate>) => JSX.Element) & {
+    propTypes?: any;
+};
+export declare const DateRangePickerView: DateRangePickerViewComponent;
 export {};