@mui/x-date-pickers 8.0.0-alpha.12 → 8.0.0-alpha.14

package/CHANGELOG.md

@@ -5,6 +5,436 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.14
+
+_Mar 7, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀📊 New Pro Chart: It is now possible to create Funnel charts—perfect for visualizing conversions, sales pipelines and more!
+  <img width="418" alt="Screenshot 2025-01-31 at 12 22 31" src="https://github.com/user-attachments/assets/8cd26821-5f11-46bf-a9bb-34d212880a47" />
+- 🎁 The first iteration of the radar chart is available. Features and refinements will be added in the coming weeks.
+- 🛠️ New and improved [Toolbar component](https://next.mui.com/x/react-data-grid/components/toolbar/) for the data grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community member for their valuable contributions:
+@vadimka123.
+
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @noraleonte, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The density selector has been removed from the toolbar. It is still possible to set the density programmatically via the `density` prop. A density selector can be added to a custom toolbar passed to `slots.toolbar`. See [Toolbar component—Settings menu](https://next.mui.com/x/react-data-grid/components/toolbar/#settings-menu) for an example.
+- The quick filter is now shown in the toolbar by default. Use `slotProps={{ toolbar: { showQuickFilter: false } }}` to hide it.
+- The `<GridSaveAltIcon />` icon is not exported anymore. Import `SaveAlt` from `@mui/icons-material` instead.
+
+#### `@mui/x-data-grid@8.0.0-alpha.14`
+
+- [DataGrid] Fix `aria-hidden` console error when scrollbar is dragged (#16829) @arminmeh
+- [DataGrid] Fix scroll jump with dynamic row height (#16763) @cherniavskii
+- [DataGrid] New `<Toolbar />` component (#14611) @KenanYusuf
+- [DataGrid] Use new toolbar by default (#16814) @KenanYusuf
+- [DataGrid] Remove the quick filtering on a given column (#16738) @vadimka123
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.14` [![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@8.0.0-alpha.14`.
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.14` [![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@8.0.0-alpha.14`.
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- All Date Time Picker variants now use Digital Clock for time editing.
+- Stop passing invalid date to `onChange` when the date is partially filled — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#treat-partially-filled-date-as-null-in-onchange).
+
+#### `@mui/x-date-pickers@8.0.0-alpha.14`
+
+- [DateTimePicker] Use Digital Clock in all component variants (#16678) @LukasTy
+- [fields] Always use `props.value` as the source of truth when defined (#15875) @flaviendelangle
+- [fields] Fix Fields aria relationship with `helperText` (#16821) @LukasTy
+- [pickers] Add `TValidationProps` generic to the `PickerManager` interface (#16832) @flaviendelangle
+- [pickers] Fix `edge` property setting in different button position cases (#16838) @LukasTy
+- [pickers] Fix typo in JSDoc (#16831) @flaviendelangle
+- [pickers] Refactor the files in the `usePicker` folder (#16680) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.14` [![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@8.0.0-alpha.14`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.14`
+
+- [charts] Fix `undefined` behaving differently from missing value for axis size (#16844) @bernardobelchior
+- [charts] Fix x-axis text anchor default when language is RTL (#16836) @bernardobelchior
+- [charts] Add Radar chart (#16406) @alexfauquette
+- [charts] Move series default color generation in the series config (#16752) @alexfauquette
+- [charts] Render axis title within axis size (#16730) @bernardobelchior
+- [charts] Split `defaultizeAxis` function into two (#16745) @bernardobelchior
+- [charts] Warn if axes data don't have enough elements (#16830) @alexfauquette
+- [charts] XAxis: Add defaults for `textAnchor` and `dominantBaseline` based on `angle` (#16817) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.0.0-alpha.14` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.14`, plus:
+
+- [charts] Add Funnel chart (#14804) @JCQuintas
+
+### Tree View
+
+#### Breaking changes
+
+- The `selectItem` method has been renamed `setItemSelection`:
+
+  ```diff
+   const { publicAPI } = useTreeItemUtils();
+  
+   const handleSelectItem() {
+  -  publicAPI.selectItem({ event, itemId: props.itemId, shouldBeSelected: true })
+  +  publicAPI.setItemSelection({ event, itemId: props.itemId, shouldBeSelected: true })
+   }
+  ```
+
+- The `setItemExpansion` method now receives a single object instead of a list of parameters:
+
+  ```diff
+   const { publicAPI } = useTreeItemUtils();
+  
+   const handleExpandItem() {
+  -  publicAPI.setItemExpansion(event, props.itemId, true)
+  +  publicAPI.setItemExpansion({ event, itemId: props.itemId, shouldBeExpanded: true })
+   }
+  ```
+
+#### `@mui/x-tree-view@8.0.0-alpha.14`
+
+- [TreeView] Clean the expansion and selection API methods (#16795) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.14` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.14`.
+
+### Docs
+
+- [docs] Fix padding package install on mobile (#16794) @oliviertassinari
+- [docs] Typo fixes (#16835) @alexfauquette
+
+### Core
+
+- [code-infra] Fix console warning in telemetry package (#16816) @JCQuintas
+- [code-infra] Split date-picker test files (#16825) @JCQuintas
+- [infra] Replace PR label check workflow with reusable version (#16762) @michelengelen
+- [infra] Update label in priority-support issue template (#16767) @michelengelen
+- [test] Add timeout to flaky screenshot tests (#16852) @LukasTy
+
+## 8.0.0-alpha.13
+
+_Feb 28, 2025_
+
+We'd like to offer a big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Decouple `margin` and `axis-size`. A new API to support multiple axes (#16418) @JCQuintas
+- 🗺️ Added Bangla (bn-BD) locale
+- 🗺️ Improve Russian (ru-RU) and Hungarian (hu-HU) locale on the Data Grid
+
+Special thanks go out to the community members for their contributions:
+@denpiligrim, @lhilgert9, @noherczeg, @officialkidmax, @pcorpet.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @MBilalShafi, @oliviertassinari, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The `slots.baseFormControl` component was removed.
+
+- The "Reset" button in the column visibility panel now resets to the initial column visibility model. Previously it was reset to the model that was active at the time the panel was opened. The reset behavior follows these rules:
+
+  1. If an initial `columnVisibilityModel` is provided, it resets to that model.
+  2. If a controlled `columnVisibilityModel` is provided, it resets to the first model value.
+  3. When the columns are updated (via the `columns` prop or `updateColumns()` API method), the reset reference point updates to the current `columnVisibilityModel`.
+
+  To revert to the previous behavior, provide a custom component to the `slots.columnsManagement`.
+
+- The deprecated `LicenseInfo` export has been removed from the `@mui/x-data-grid-pro` and `@mui/x-data-grid-premium` packages.
+  You have to import it from `@mui/x-license` instead:
+
+  ```diff
+  - import { LicenseInfo } from '@mui/x-data-grid-pro';
+  - import { LicenseInfo } from '@mui/x-data-grid-premium';
+  + import { LicenseInfo } from '@mui/x-license';
+
+   LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');
+  ```
+
+- The row selection model has been changed from `GridRowId[]` to `{ type: 'include' | 'exclude'; ids: Set<GridRowId> }`.
+  Using `Set` allows for a more efficient row selection management.
+  The `exclude` selection type allows to select all rows except the ones in the `ids` set.
+
+  This change impacts the following props:
+
+  - `rowSelectionModel`
+  - `onRowSelectionModelChange`
+  - `initialState.rowSelectionModel`
+
+  ```diff
+  - const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>([]);
+  + const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>({ type: 'include', ids: new Set() });
+  ```
+
+  This change also impacts the `gridRowSelectionStateSelector` selector.
+  For convenience, use the `gridRowSelectionManagerSelector` selector to handle both selection types:
+
+  ```diff
+  - const rowSelection = gridRowSelectionStateSelector(apiRef);
+  - const isRowSelected = rowSelection.includes(rowId);
+  + const rowSelectionManager = gridRowSelectionManagerSelector(apiRef);
+  + const isRowSelected = rowSelectionManager.has(rowId);
+  ```
+
+  There is also a `createRowSelectionManager` utility function that can be used to manage the row selection:
+
+  ```ts
+  const rowSelectionManager = createRowSelectionManager({
+    type: 'include',
+    ids: new Set(),
+  });
+  rowSelectionManager.select(rowId);
+  rowSelectionManager.unselect(rowId);
+  rowSelectionManager.has(rowId);
+  ```
+
+- The `selectedIdsLookupSelector` selector has been removed. Use the `gridRowSelectionManagerSelector` or `gridRowSelectionStateSelector` selectors instead.
+- The `selectedGridRowsSelector` has been renamed to `gridRowSelectionIdsSelector`.
+- The `selectedGridRowsCountSelector` has been renamed to `gridRowSelectionCountSelector`.
+
+- The data source feature and its related props are now stable.
+
+  ```diff
+   <DataGridPro
+  -  unstable_dataSource={dataSource}
+  -  unstable_dataSourceCache={cache}
+  -  unstable_lazyLoading
+  -  unstable_lazyLoadingRequestThrottleMs={100}
+  +  dataSource={dataSource}
+  +  dataSourceCache={cache}
+  +  lazyLoading
+  +  lazyLoadingRequestThrottleMs={100}
+   />
+  ```
+
+- The data source API is now stable.
+
+  ```diff
+  - apiRef.current.unstable_dataSource.getRows()
+  + apiRef.current.dataSource.getRows()
+  ```
+
+- The signature of `unstable_onDataSourceError()` has been updated to support future use-cases.
+
+  ```diff
+   <DataGrid
+  -  unstable_onDataSourceError={(error: Error, params: GridGetRowsParams) => {
+  -    if (params.filterModel) {
+  -      // do something
+  -    }
+  -  }}
+  +  unstable_onDataSourceError={(error: GridGetRowsError | GridUpdateRowError) => {
+  +    if (error instanceof GridGetRowsError && error.params.filterModel) {
+  +      // do something
+  +    }
+  +  }}
+   />
+  ```
+
+- Fix the type of the `GridSortModel` to allow readonly arrays.
+
+- `GridSortItem` interface is not exported anymore.
+
+- The `showToolbar` prop is now required to display the toolbar.
+
+  It is no longer necessary to pass `GridToolbar` as a slot to display the default toolbar.
+
+  ```diff
+   <DataGrid
+  +  showToolbar
+  -  slots={{
+  -    toolbar: GridToolbar,
+  -  }}
+   />
+  ```
+
+#### `@mui/x-data-grid@8.0.0-alpha.13`
+
+- [DataGrid] Add `showToolbar` prop to enable default toolbar (#16687) @KenanYusuf
+- [DataGrid] Column Visibility: Update "Reset" button behavior (#16626) @MBilalShafi
+- [DataGrid] Column management design updates (#16630) @KenanYusuf
+- [DataGrid] Fix `showColumnVerticalBorder` prop (#16715) @KenanYusuf
+- [DataGrid] Fix scrollbar overlapping cells on mount (#16639) @KenanYusuf
+- [DataGrid] Fix: base `Select` menuprops `onClose()` (#16643) @romgrk
+- [DataGrid] Make `GridSortItem` internal (#16732) @arminmeh
+- [DataGrid] Make data source stable (#16710) @MBilalShafi
+- [DataGrid] Reshape row selection model (#15651) @cherniavskii
+- [DataGrid] Replace `sx` prop usage with `styled()` components (#16665) @KenanYusuf
+- [DataGrid] Refactor: create base `Autocomplete` (#16390) @romgrk
+- [DataGrid] Refactor: remove base form control (#16634) @romgrk
+- [DataGrid] Refactor: remove base input label & adornment (#16646) @romgrk
+- [DataGrid] Refactor: remove material containers (#16633) @romgrk
+- [DataGrid] Refactor: theme to CSS variables (#16588) @romgrk
+- [DataGrid] Update the signature of the `onDataSourceError()` callback (#16718) @MBilalShafi
+- [DataGrid] Use readonly array for the `GridSortModel` (#16627) @pcorpet
+- [DataGrid] Fix the popper focus trap (#16736) @romgrk
+- [l10n] Added Bangla (bn-BD) locale (#16648) @officialkidmax
+- [l10n] Improve Hungarian (hu-HU) locale (#16578) @noherczeg
+- [l10n] Improve Russian (ru-RU) locale (#16591) @denpiligrim
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.13` [![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@8.0.0-alpha.13`, plus:
+
+- [DataGridPro] Remove `LicenseInfo` reexports (#16671) @cherniavskii
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.13` [![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@8.0.0-alpha.13`, plus:
+
+- [DataGridPremium] Use `valueGetter` to get row group keys (#16016) @cherniavskii
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `<DateRangePicker />` now uses a `dialog` instead of a `tooltip` to render their view when used with a single input range field.
+
+#### `@mui/x-date-pickers@8.0.0-alpha.13`
+
+- [l10n] Added Bangla (bn-BD) locale (#16648) @officialkidmax
+- [pickers] Clean the typing of the slots on the range pickers (#16670) @flaviendelangle
+- [pickers] Fix Time Clock meridiem button selected styles (#16681) @LukasTy
+- [pickers] Make the single input field the default field on range pickers (#16656) @flaviendelangle
+- [pickers] Move the opening logic to the range fields (#16175) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.13` [![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@8.0.0-alpha.13`.
+
+### Charts
+
+#### Breaking changes
+
+- Charts array inputs are now `readonly`. Allowing externally defined `as const` to be used as a prop value of the React component.
+
+  ```tsx
+  const xAxis = [{ position: 'bottom' }] as const
+  <BarChart xAxis={xAxis} />
+  ```
+
+- Replace `topAxis`, `rightAxis`, `bottomAxis` and `leftAxis` props by the `position` property in the axis config.
+  If you were using them to place axis, set the `position` property to the corresponding value `'top' | 'right' | 'bottom' | 'left'`.
+  If you were disabling an axis by setting it to `null`, set its `position` to `'none'`.
+
+  ```diff
+   <LineChart
+     yAxis={[
+       {
+         scaleType: 'linear',
+  +      position: 'right',
+       },
+     ]}
+     series={[{ data: [1, 10, 30, 50, 70, 90, 100], label: 'linear' }]}
+     height={400}
+  -  rightAxis={{}}
+   />
+  ```
+
+- Remove `position` prop from `ChartsXAxis` and `ChartsYAxis`.
+  The `position` prop has been removed from the `ChartsXAxis` and `ChartsYAxis` components. Configure it directly in the axis config.
+
+  ```diff
+   <ChartContainer
+     yAxis={[
+       {
+         id: 'my-axis',
+  +      position: 'right',
+       },
+     ]}
+   >
+  -  <ChartsYAxis axisId="my-axis" position="right" />
+  +  <ChartsYAxis axisId="my-axis" />
+   </ChartContainer>
+  ```
+
+- Add `minTickLabelGap` to x-axis, which allows users to define the minimum gap, in pixels, between two tick labels. The default value is 4px. Make sure to check your charts as the spacing between tick labels might have changed.
+
+#### `@mui/x-charts@8.0.0-alpha.13`
+
+- [charts] Accept component in `labelMarkType` (#16739) @bernardobelchior
+- [charts] Add `minTickLabelGap` to x-axis (#16548) @bernardobelchior
+- [charts] Add unit test for pie chart with empty series (#16663) @bernardobelchior
+- [charts] Decouple `margin` and `axis-size` (#16418) @JCQuintas
+- [charts] Display slider tooltip on demos (#16723) @JCQuintas
+- [charts] Fix composition docs link (#16761) @bernardobelchior
+- [charts] Fix default label measurement being off (#16635) @bernardobelchior
+- [charts] Fix is highlighted memoization (#16592) @alexfauquette
+- [charts] Fix missing `theme.shape` error in the tooltip (#16748) @alexfauquette
+- [charts] Fix typo in error message (#16641) @JCQuintas
+- [charts] Improve axis size docs (#16673) @JCQuintas
+- [charts] Improve performance of rendering ticks in x-axis (#16536) @bernardobelchior
+- [charts] Make `defaultizeAxis` function type-safe (#16642) @JCQuintas
+- [charts] Make `series.data` readonly (#16645) @JCQuintas
+- [charts] Migrate `ChartsUsageDemo` to TSX and removed NoSnap (#16686) @JCQuintas
+- [charts] Prevent `position='none'` axes from rendering (#16727) @JCQuintas
+- [charts] Make array inputs readonly (#16632) @JCQuintas
+- [charts] Remove state initialization hack (#16520) @alexfauquette
+- [charts] Remove redundant default axis (#16734) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.0.0-alpha.13` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.13`, plus:
+
+- [charts-pro] Add back zoom control (#16550) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.13`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.13` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.13`.
+
+### `@mui/x-codemod@8.0.0-alpha.13`
+
+- [codemod] Add a few Data Grid codemods (#16711) @MBilalShafi
+- [codemod] Improve Pickers renaming codemod (#16685) @LukasTy
+
+### Docs
+
+- [docs] Fix charts with on bar and line pages (#16712) @alexfauquette
+- [docs] Fix migration guide introduction for charts (#16679) @alexfauquette
+- [docs] Fix remaining charts demos on mobile (#16728) @alexfauquette
+- [docs] Fix scroll overflow on mobile (#16675) @oliviertassinari
+- [docs] Improve Pickers migration page (#16682) @LukasTy
+- [docs] Update small Pickers doc inconsistencies (#16724) @LukasTy
+- [code-infra] Charts changes for `vitest` (#16755) @JCQuintas
+- [code-infra] General packages changes for `vitest` (#16757) @JCQuintas
+- [code-infra] Native Node.js ESM (#16603) @Janpot
+- [infra] Update contributor acknowledgment wording (#16751) @michelengelen
+- [test] Revert timeout increase for possibly slow tests (#16651) @LukasTy
+- [x-license] Introduce usage telemetry (#13530) @hasdfa
+
 ## 8.0.0-alpha.12
 
 _Feb 17, 2025_

package/DateCalendar/DateCalendar.js

@@ -351,6 +351,7 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
           referenceDate: referenceDate
         })), view === 'day' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayCalendar.DayCalendar, (0, _extends2.default)({}, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
+          hasFocus: hasFocus,
           onFocusedDayChange: focusedDate => setVisibleDate({
             target: focusedDate,
             reason: 'cell-interaction'
@@ -361,7 +362,6 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
           shouldDisableDate: shouldDisableDate,
           shouldDisableMonth: shouldDisableMonth,
           shouldDisableYear: shouldDisableYear,
-          hasFocus: hasFocus,
           onFocusedViewChange: isViewFocused => setFocusedView('day', isViewFocused),
           showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
           fixedWeekNumber: fixedWeekNumber,

package/DateField/useDateField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateFieldProps } from "./DateField.types.js";
-export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "timezone" | keyof import("../internals").BaseDateValidationProps | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;
+export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | keyof import("../internals").BaseDateValidationProps | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "referenceDate" | "formatDensity" | "timezone" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;

package/DatePicker/DatePicker.types.d.ts

@@ -1,5 +1,5 @@
 import { DesktopDatePickerProps, DesktopDatePickerSlots, DesktopDatePickerSlotProps } from "../DesktopDatePicker/index.js";
-import { BaseSingleInputFieldProps, PickerValue } from "../internals/models/index.js";
+import { BaseSingleInputFieldProps } from "../internals/models/index.js";
 import { MobileDatePickerProps, MobileDatePickerSlots, MobileDatePickerSlotProps } from "../MobileDatePicker/index.js";
 import { ValidateDateProps } from "../validation/validateDate.js";
 export interface DatePickerSlots extends DesktopDatePickerSlots, MobileDatePickerSlots {}
@@ -35,4 +35,4 @@ export interface DatePickerProps<TEnableAccessibleFieldDOMStructure extends bool
 /**
  * Props the field can receive when used inside a date picker (<DatePicker />, <DesktopDatePicker /> or <MobileDatePicker /> component).
  */
-export type DatePickerFieldProps = ValidateDateProps & BaseSingleInputFieldProps<PickerValue>;
+export type DatePickerFieldProps = ValidateDateProps & BaseSingleInputFieldProps;

package/DatePicker/shared.d.ts

@@ -5,7 +5,7 @@ import { DateValidationError, DateView } from "../models/index.js";
 import { BasePickerInputProps } from "../internals/models/props/basePickerProps.js";
 import { LocalizedComponent } from "../locales/utils/pickersLocaleTextApi.js";
 import { DatePickerToolbarProps, ExportedDatePickerToolbarProps } from "./DatePickerToolbar.js";
-import { PickerViewRendererLookup } from "../internals/hooks/usePicker/usePickerViews.js";
+import { PickerViewRendererLookup } from "../internals/hooks/usePicker/index.js";
 import { DateViewRendererProps } from "../dateViewRenderers/index.js";
 import { PickerValue } from "../internals/models/index.js";
 import { ValidateDatePropsToDefault } from "../validation/validateDate.js";

package/DateTimeField/useDateTimeField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateTimeFieldProps } from "./DateTimeField.types.js";
-export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "ampm" | "disableFuture" | "disablePast" | "maxDate" | "minDate" | "timezone" | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "minTime" | "maxTime" | "minutesStep" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "minDateTime" | "maxDateTime" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;
+export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | "maxDate" | "minDate" | "disablePast" | "disableFuture" | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "minTime" | "maxTime" | "minutesStep" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "ampm" | "minDateTime" | "maxDateTime" | "referenceDate" | "formatDensity" | "timezone" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;

package/DateTimePicker/DateTimePicker.types.d.ts

@@ -1,11 +1,11 @@
 import { DesktopDateTimePickerProps, DesktopDateTimePickerSlots, DesktopDateTimePickerSlotProps } from "../DesktopDateTimePicker/index.js";
-import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem, PickerValue } from "../internals/models/index.js";
+import { BaseSingleInputFieldProps } from "../internals/models/index.js";
 import { MobileDateTimePickerProps, MobileDateTimePickerSlots, MobileDateTimePickerSlotProps } from "../MobileDateTimePicker/index.js";
 import { ValidateDateTimeProps } from "../validation/index.js";
 import { ExportedYearCalendarProps } from "../YearCalendar/YearCalendar.types.js";
 export interface DateTimePickerSlots extends DesktopDateTimePickerSlots, MobileDateTimePickerSlots {}
 export interface DateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
-export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure>, ExportedYearCalendarProps, Omit<MobileDateTimePickerProps<DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
+export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure>, ExportedYearCalendarProps, Omit<MobileDateTimePickerProps<TEnableAccessibleFieldDOMStructure>, 'views'> {
   /**
    * CSS media query when `Mobile` mode will be changed to `Desktop`.
    * @default '@media (pointer: fine)'
@@ -31,4 +31,4 @@ export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends
 /**
  * Props the field can receive when used inside a date time picker (<DateTimePicker />, <DesktopDateTimePicker /> or <MobileDateTimePicker /> component).
  */
-export type DateTimePickerFieldProps = ValidateDateTimeProps & BaseSingleInputFieldProps<PickerValue>;
+export type DateTimePickerFieldProps = ValidateDateTimeProps & BaseSingleInputFieldProps;

package/DateTimePicker/DateTimePickerToolbar.d.ts

@@ -3,7 +3,7 @@ import { BaseToolbarProps, ExportedBaseToolbarProps } from "../internals/models/
 import { DateTimePickerToolbarClasses } from "./dateTimePickerToolbarClasses.js";
 import { DateOrTimeViewWithMeridiem, PickerValue } from "../internals/models/index.js";
 import { DateTimeValidationError } from "../models/index.js";
-import { SetValueActionOptions } from "../internals/hooks/usePicker/usePickerValue.types.js";
+import { SetValueActionOptions } from "../internals/components/PickerProvider.js";
 export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps {
   /**
    * Override or extend the styles applied to the component.

package/DateTimePicker/DateTimePickerToolbar.js

@@ -65,7 +65,7 @@ const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToo
     },
     style: {
       borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-      [`& .${_pickersToolbarClasses.pickersToolbarClasses.content} .${_pickersToolbarTextClasses.pickersToolbarTextClasses.selected}`]: {
+      [`& .${_pickersToolbarClasses.pickersToolbarClasses.content} .${_pickersToolbarTextClasses.pickersToolbarTextClasses.root}[data-selected]`]: {
         color: (theme.vars || theme).palette.primary.main,
         fontWeight: theme.typography.fontWeightBold
       }

package/DateTimePicker/shared.d.ts

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
-import { DateTimeValidationError } from "../models/index.js";
+import { DateOrTimeView, DateTimeValidationError } from "../models/index.js";
 import { DateCalendarSlots, DateCalendarSlotProps, ExportedDateCalendarProps } from "../DateCalendar/DateCalendar.types.js";
-import { TimeClockSlots, TimeClockSlotProps } from "../TimeClock/TimeClock.types.js";
 import { BasePickerInputProps } from "../internals/models/props/basePickerProps.js";
 import { DateTimePickerTabsProps } from "./DateTimePickerTabs.js";
 import { LocalizedComponent } from "../locales/utils/pickersLocaleTextApi.js";
 import { DateTimePickerToolbarProps, ExportedDateTimePickerToolbarProps } from "./DateTimePickerToolbar.js";
-import { PickerViewRendererLookup } from "../internals/hooks/usePicker/usePickerViews.js";
+import { PickerViewRendererLookup } from "../internals/hooks/usePicker/index.js";
 import { DateViewRendererProps } from "../dateViewRenderers/index.js";
 import { TimeViewRendererProps } from "../timeViewRenderers/index.js";
-import { BaseClockProps, ExportedBaseClockProps } from "../internals/models/props/time.js";
+import { BaseClockProps, DigitalTimePickerProps } from "../internals/models/props/time.js";
 import { DateOrTimeViewWithMeridiem, PickerValue, TimeViewWithMeridiem } from "../internals/models/index.js";
 import { ExportedValidateDateTimeProps, ValidateDateTimePropsToDefault } from "../validation/validateDateTime.js";
-export interface BaseDateTimePickerSlots extends DateCalendarSlots, TimeClockSlots {
+import { DigitalClockSlotProps, DigitalClockSlots } from "../DigitalClock/index.js";
+import { MultiSectionDigitalClockSlotProps, MultiSectionDigitalClockSlots } from "../MultiSectionDigitalClock/index.js";
+export interface BaseDateTimePickerSlots extends DateCalendarSlots, DigitalClockSlots, MultiSectionDigitalClockSlots {
   /**
    * Tabs enabling toggling between date and time pickers.
    * @default DateTimePickerTabs
@@ -25,7 +26,7 @@ export interface BaseDateTimePickerSlots extends DateCalendarSlots, TimeClockSlo
    */
   toolbar?: React.JSXElementConstructor<DateTimePickerToolbarProps>;
 }
-export interface BaseDateTimePickerSlotProps extends DateCalendarSlotProps, TimeClockSlotProps {
+export interface BaseDateTimePickerSlotProps extends DateCalendarSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
   /**
    * Props passed down to the tabs component.
    */
@@ -36,7 +37,7 @@ export interface BaseDateTimePickerSlotProps extends DateCalendarSlotProps, Time
   toolbar?: ExportedDateTimePickerToolbarProps;
 }
 export type DateTimePickerViewRenderers<TView extends DateOrTimeViewWithMeridiem> = PickerViewRendererLookup<PickerValue, TView, Omit<DateViewRendererProps<TView>, 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>>, 'slots' | 'slotProps'>>;
-export interface BaseDateTimePickerProps<TView extends DateOrTimeViewWithMeridiem> extends BasePickerInputProps<PickerValue, TView, DateTimeValidationError>, Omit<ExportedDateCalendarProps, 'onViewChange'>, ExportedBaseClockProps, ExportedValidateDateTimeProps {
+export interface BaseDateTimePickerProps extends Omit<BasePickerInputProps<PickerValue, DateOrTimeViewWithMeridiem, DateTimeValidationError>, 'views'>, Omit<ExportedDateCalendarProps, 'onViewChange' | 'views'>, DigitalTimePickerProps, ExportedValidateDateTimeProps {
   /**
    * Display ampm controls under the clock (instead of in the toolbar).
    * @default true on desktop, false on mobile
@@ -57,8 +58,15 @@ export interface BaseDateTimePickerProps<TView extends DateOrTimeViewWithMeridie
    * If `null`, the section will only have field editing.
    * If `undefined`, internally defined view will be used.
    */
-  viewRenderers?: Partial<DateTimePickerViewRenderers<TView>>;
+  viewRenderers?: Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>;
+  /**
+   * Available views.
+   */
+  views?: readonly DateOrTimeView[];
 }
-type UseDateTimePickerDefaultizedProps<TView extends DateOrTimeViewWithMeridiem, Props extends BaseDateTimePickerProps<TView>> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | 'orientation' | 'ampm' | ValidateDateTimePropsToDefault>>;
-export declare function useDateTimePickerDefaultizedProps<TView extends DateOrTimeViewWithMeridiem, Props extends BaseDateTimePickerProps<TView>>(props: Props, name: string): UseDateTimePickerDefaultizedProps<TView, Props>;
+type UseDateTimePickerDefaultizedProps<Props extends BaseDateTimePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'orientation' | 'ampm' | ValidateDateTimePropsToDefault>, 'views'>> & {
+  shouldRenderTimeInASingleColumn: boolean;
+  views: readonly DateOrTimeViewWithMeridiem[];
+};
+export declare function useDateTimePickerDefaultizedProps<Props extends BaseDateTimePickerProps>(props: Props, name: string): UseDateTimePickerDefaultizedProps<Props>;
 export {};

package/DateTimePicker/shared.js

@@ -14,6 +14,7 @@ var _dateUtils = require("../internals/utils/date-utils");
 var _DateTimePickerTabs = require("./DateTimePickerTabs");
 var _DateTimePickerToolbar = require("./DateTimePickerToolbar");
 var _views = require("../internals/utils/views");
+var _dateTimeUtils = require("../internals/utils/date-time-utils");
 function useDateTimePickerDefaultizedProps(props, name) {
   const utils = (0, _useUtils.useUtils)();
   const defaultDates = (0, _useUtils.useDefaultDates)();
@@ -30,12 +31,32 @@ function useDateTimePickerDefaultizedProps(props, name) {
       dateTimePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  return (0, _extends2.default)({}, themeProps, (0, _views.applyDefaultViewProps)({
+  const {
+    openTo,
+    views: defaultViews
+  } = (0, _views.applyDefaultViewProps)({
     views: themeProps.views,
     openTo: themeProps.openTo,
     defaultViews: ['year', 'day', 'hours', 'minutes'],
     defaultOpenTo: 'day'
-  }), {
+  });
+  const {
+    shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn,
+    views,
+    timeSteps
+  } = (0, _dateTimeUtils.resolveTimeViewsResponse)({
+    thresholdToRenderTimeInASingleColumn: themeProps.thresholdToRenderTimeInASingleColumn,
+    ampm,
+    timeSteps: themeProps.timeSteps,
+    views: defaultViews
+  });
+  return (0, _extends2.default)({}, themeProps, {
+    timeSteps,
+    openTo,
+    shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn,
+    views,
     ampm,
     localeText,
     orientation: themeProps.orientation ?? 'portrait',