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

package/CHANGELOG.md

@@ -5,6 +5,137 @@
 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_

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/DateTimePicker/DateTimePicker.types.d.ts

@@ -1,11 +1,11 @@
 import { DesktopDateTimePickerProps, DesktopDateTimePickerSlots, DesktopDateTimePickerSlotProps } from "../DesktopDateTimePicker/index.js";
-import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem } 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)'

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

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -98,13 +98,7 @@ const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = (0, _shared.useDateTimePickerDefaultizedProps)(inProps, 'MuiDesktopDateTimePicker');
-  const {
-    shouldRenderTimeInASingleColumn,
-    thresholdToRenderTimeInASingleColumn,
-    views: resolvedViews,
-    timeSteps
-  } = (0, _dateTimeUtils.resolveTimeViewsResponse)(defaultizedProps);
-  const renderTimeView = shouldRenderTimeInASingleColumn ? _timeViewRenderers.renderDigitalClockTimeView : _timeViewRenderers.renderMultiSectionDigitalClockTimeView;
+  const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? _timeViewRenderers.renderDigitalClockTimeView : _timeViewRenderers.renderMultiSectionDigitalClockTimeView;
   const viewRenderers = (0, _extends2.default)({
     day: _dateViewRenderers.renderDateViewCalendar,
     month: _dateViewRenderers.renderDateViewCalendar,
@@ -117,7 +111,7 @@ const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React
   const ampmInClock = defaultizedProps.ampmInClock ?? true;
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
   const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === _timeViewRenderers.renderMultiSectionDigitalClockTimeView.name;
-  const views = !shouldHoursRendererContainMeridiemView ? resolvedViews.filter(view => view !== 'meridiem') : resolvedViews;
+  const views = !shouldHoursRendererContainMeridiemView ? defaultizedProps.views.filter(view => view !== 'meridiem') : defaultizedProps.views;
 
   // Props with the default values specific to the desktop variant
   const props = (0, _extends2.default)({}, defaultizedProps, {
@@ -126,9 +120,6 @@ const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React
     views,
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     ampmInClock,
-    timeSteps,
-    thresholdToRenderTimeInASingleColumn,
-    shouldRenderTimeInASingleColumn,
     slots: (0, _extends2.default)({
       field: _DateTimeField.DateTimeField,
       layout: _DesktopDateTimePickerLayout.DesktopDateTimePickerLayout

package/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts

@@ -2,14 +2,11 @@ import { MakeOptional } from '@mui/x-internals/types';
 import { UseDesktopPickerSlots, ExportedUseDesktopPickerSlotProps, DesktopOnlyPickerProps } from "../internals/hooks/useDesktopPicker/index.js";
 import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from "../DateTimePicker/shared.js";
 import { DateOrTimeView } from "../models/index.js";
-import { DesktopOnlyTimePickerProps } from "../internals/models/props/time.js";
-import { DateOrTimeViewWithMeridiem } from "../internals/models/index.js";
-import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from "../MultiSectionDigitalClock/index.js";
-import { DigitalClockSlots, DigitalClockSlotProps } from "../DigitalClock/index.js";
+import { DigitalTimePickerProps } from "../internals/models/props/time.js";
 import { ExportedYearCalendarProps } from "../YearCalendar/YearCalendar.types.js";
-export interface DesktopDateTimePickerSlots extends BaseDateTimePickerSlots, MakeOptional<UseDesktopPickerSlots, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {}
-export interface DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps, ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {}
-export interface DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimePickerProps<DateOrTimeViewWithMeridiem>, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps, ExportedYearCalendarProps {
+export interface DesktopDateTimePickerSlots extends BaseDateTimePickerSlots, MakeOptional<UseDesktopPickerSlots, 'field' | 'openPickerIcon'> {}
+export interface DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps, ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
+export interface DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimePickerProps, DesktopOnlyPickerProps, DigitalTimePickerProps, ExportedYearCalendarProps {
   /**
    * Overridable component slots.
    * @default {}

package/DesktopTimePicker/DesktopTimePicker.types.d.ts

@@ -2,13 +2,13 @@ import { MakeOptional } from '@mui/x-internals/types';
 import { UseDesktopPickerSlots, ExportedUseDesktopPickerSlotProps, DesktopOnlyPickerProps } from "../internals/hooks/useDesktopPicker/index.js";
 import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } from "../TimePicker/shared.js";
 import { TimeViewWithMeridiem } from "../internals/models/index.js";
-import { DesktopOnlyTimePickerProps } from "../internals/models/props/time.js";
+import { DigitalTimePickerProps } from "../internals/models/props/time.js";
 import { DigitalClockSlots, DigitalClockSlotProps } from "../DigitalClock/index.js";
 import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from "../MultiSectionDigitalClock/index.js";
 import { TimeView } from "../models/index.js";
 export interface DesktopTimePickerSlots extends BaseTimePickerSlots, MakeOptional<UseDesktopPickerSlots, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {}
 export interface DesktopTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseTimePickerSlotProps, ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {}
-export interface DesktopTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseTimePickerProps<TimeViewWithMeridiem>, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps {
+export interface DesktopTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseTimePickerProps<TimeViewWithMeridiem>, DesktopOnlyPickerProps, DigitalTimePickerProps {
   /**
    * Available views.
    */

package/MobileDateTimePicker/MobileDateTimePicker.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { MobileDateTimePickerProps } from "./MobileDateTimePicker.types.js";
-import { DateOrTimeView } from "../models/index.js";
-type MobileDateTimePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: MobileDateTimePickerProps<DateOrTimeView, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type MobileDateTimePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: MobileDateTimePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };
 /**

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -21,6 +21,10 @@ var _useMobilePicker = require("../internals/hooks/useMobilePicker");
 var _dateViewRenderers = require("../dateViewRenderers");
 var _timeViewRenderers = require("../timeViewRenderers");
 var _dateTimeUtils = require("../internals/utils/date-time-utils");
+var _dimensions = require("../internals/constants/dimensions");
+var _MultiSectionDigitalClock = require("../MultiSectionDigitalClock");
+var _utils2 = require("../internals/utils/utils");
+var _DigitalClock = require("../DigitalClock");
 /**
  * Demos:
  *
@@ -36,20 +40,26 @@ const MobileDateTimePicker = exports.MobileDateTimePicker = /*#__PURE__*/React.f
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = (0, _shared.useDateTimePickerDefaultizedProps)(inProps, 'MuiMobileDateTimePicker');
+  const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? _timeViewRenderers.renderDigitalClockTimeView : _timeViewRenderers.renderMultiSectionDigitalClockTimeView;
   const viewRenderers = (0, _extends2.default)({
     day: _dateViewRenderers.renderDateViewCalendar,
     month: _dateViewRenderers.renderDateViewCalendar,
     year: _dateViewRenderers.renderDateViewCalendar,
-    hours: _timeViewRenderers.renderTimeViewClock,
-    minutes: _timeViewRenderers.renderTimeViewClock,
-    seconds: _timeViewRenderers.renderTimeViewClock
+    hours: renderTimeView,
+    minutes: renderTimeView,
+    seconds: renderTimeView,
+    meridiem: renderTimeView
   }, defaultizedProps.viewRenderers);
   const ampmInClock = defaultizedProps.ampmInClock ?? false;
+  // Need to avoid adding the `meridiem` view when unexpected renderer is specified
+  const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === _timeViewRenderers.renderMultiSectionDigitalClockTimeView.name;
+  const views = !shouldHoursRendererContainMeridiemView ? defaultizedProps.views.filter(view => view !== 'meridiem') : defaultizedProps.views;
 
   // Props with the default values specific to the mobile variant
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
     format: (0, _dateTimeUtils.resolveDateTimeFormat)(utils, defaultizedProps),
+    views,
     ampmInClock,
     slots: (0, _extends2.default)({
       field: _DateTimeField.DateTimeField
@@ -62,7 +72,30 @@ const MobileDateTimePicker = exports.MobileDateTimePicker = /*#__PURE__*/React.f
       }, defaultizedProps.slotProps?.toolbar),
       tabs: (0, _extends2.default)({
         hidden: false
-      }, defaultizedProps.slotProps?.tabs)
+      }, defaultizedProps.slotProps?.tabs),
+      layout: (0, _extends2.default)({}, defaultizedProps.slotProps?.layout, {
+        sx: (0, _utils2.mergeSx)([{
+          [`& .${_MultiSectionDigitalClock.multiSectionDigitalClockClasses.root}`]: {
+            width: _dimensions.DIALOG_WIDTH
+          },
+          [`& .${_MultiSectionDigitalClock.multiSectionDigitalClockSectionClasses.root}`]: {
+            flex: 1,
+            // account for the border on `MultiSectionDigitalClock`
+            maxHeight: _dimensions.VIEW_HEIGHT - 1,
+            [`.${_MultiSectionDigitalClock.multiSectionDigitalClockSectionClasses.item}`]: {
+              width: 'auto'
+            }
+          },
+          [`& .${_DigitalClock.digitalClockClasses.root}`]: {
+            width: _dimensions.DIALOG_WIDTH,
+            maxHeight: _dimensions.VIEW_HEIGHT,
+            flex: 1,
+            [`.${_DigitalClock.digitalClockClasses.item}`]: {
+              justifyContent: 'center'
+            }
+          }
+        }], defaultizedProps.slotProps?.layout?.sx)
+      })
     })
   });
   const {
@@ -299,7 +332,7 @@ MobileDateTimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: _propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  openTo: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Force rendering in particular orientation.
    */
@@ -375,6 +408,11 @@ MobileDateTimePicker.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: _propTypes.default.bool,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -389,6 +427,22 @@ MobileDateTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn: _propTypes.default.number,
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps: _propTypes.default.shape({
+    hours: _propTypes.default.number,
+    minutes: _propTypes.default.number,
+    seconds: _propTypes.default.number
+  }),
   /**
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
@@ -407,7 +461,7 @@ MobileDateTimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: _propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -416,6 +470,7 @@ MobileDateTimePicker.propTypes = {
   viewRenderers: _propTypes.default.shape({
     day: _propTypes.default.func,
     hours: _propTypes.default.func,
+    meridiem: _propTypes.default.func,
     minutes: _propTypes.default.func,
     month: _propTypes.default.func,
     seconds: _propTypes.default.func,

package/MobileDateTimePicker/MobileDateTimePicker.types.d.ts

@@ -1,11 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseMobilePickerSlots, ExportedUseMobilePickerSlotProps, MobileOnlyPickerProps } from "../internals/hooks/useMobilePicker/index.js";
 import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from "../DateTimePicker/shared.js";
-import { DateOrTimeView } from "../models/index.js";
-import { DateOrTimeViewWithMeridiem } from "../internals/models/index.js";
 export interface MobileDateTimePickerSlots extends BaseDateTimePickerSlots, MakeOptional<UseMobilePickerSlots, 'field'> {}
 export interface MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps, ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
-export interface MobileDateTimePickerProps<TView extends DateOrTimeViewWithMeridiem = DateOrTimeView, TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimePickerProps<TView>, MobileOnlyPickerProps {
+export interface MobileDateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimePickerProps, MobileOnlyPickerProps {
   /**
    * Overridable component slots.
    * @default {}

package/PickersTextField/PickersTextField.js

@@ -161,7 +161,9 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
         label: label,
         name: name,
         role: "group",
-        "aria-labelledby": inputLabelId
+        "aria-labelledby": inputLabelId,
+        "aria-describedby": helperTextId,
+        "aria-live": helperTextId ? 'polite' : undefined
       }, InputProps)), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormHelperText.default, (0, _extends2.default)({
         id: helperTextId
       }, FormHelperTextProps, {