@mui/x-date-pickers 6.19.4 → 6.19.5

package/CHANGELOG.md

@@ -3,7 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## v6.19.4
+## 6.19.5
+
+_Feb 23, 2024_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.5`
+
+- [DataGrid] Fix styling grid filter input single select (#12079) @FreakDroid
+
+#### `@mui/x-data-grid-pro@6.19.5` [![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@6.19.5`.
+
+#### `@mui/x-data-grid-premium@6.19.5` [![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@6.19.5`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.5`
+
+- [pickers] Fix `referenceDate` day calendar focus (#12136) @LukasTy
+- [pickers] Fix styling props propagation to `DateTimePickerTabs` (#12131) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.19.5`.
+
+### Charts / `@mui/x-charts@6.19.5`
+
+- [charts] Allow to skip animation on sparkline bar (#12160) @alexfauquette
+
+### Docs
+
+- [docs] Clarify Pickers 'Component composition' section (#12147) @LukasTy
+- [docs] Fix 301 redirection to StackBlitz @oliviertassinari
+- [docs] Fix 301 to Material UI @oliviertassinari
+- [docs] Fix 301 to Material UI @oliviertassinari
+- [docs] Fix 404 links to translation source @oliviertassinari
+- [docs] Fix dead link to translations @oliviertassinari
+- [docs] Fix the Treemap illustration (#12189) @danilo-leal
+- [docs] Fix typo for `AdapterDateFnsV3` (#12037) @flaviendelangle
+- [docs] Improve performance on Charts entry point @oliviertassinari
+- [docs] Move Heatmap to pro (#12170) @alexfauquette
+- [docs] Remove Charts installation next tag call-out (#12133) @LukasTy
+- [docs] Removed `focused` prop from demo (#12126) @michelengelen
+- [docs] Add missing Heatmap pro icon @oliviertassinari
+- [docs] Add more illustrations to the Overview page (#12041) @danilo-leal
+- [docs] Avoid use of shorthand (#12009) @oliviertassinari
+
+### Core
+
+- [core] Fix CI @oliviertassinari
+- [core] Fix docs link check (#12137) @LukasTy
+
+## 6.19.4
 
 _Feb 9, 2024_
 
@@ -15,7 +76,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 ### Data Grid
 
-#### `@mui/x-data-grid@v6.19.4`
+#### `@mui/x-data-grid@6.19.4`
 
 - [DataGrid] Add support for dialogs in menu actions (#11937) @cherniavskii
 - [DataGrid] Allow passing readonly arrays to `pageSizeOptions` prop (#11992) @pcorpet
@@ -23,28 +84,28 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [DataGrid] Replace `eval` with `new Function` (#11962) @cherniavskii
 - [l10n] Improve Danish (da-DK) locale (#11972) @ShahrazH
 
-#### `@mui/x-data-grid-pro@v6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-data-grid-pro@6.19.4` [![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@v6.19.4`.
+Same changes as in `@mui/x-data-grid@6.19.4`.
 
-#### `@mui/x-data-grid-premium@v6.19.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+#### `@mui/x-data-grid-premium@6.19.4` [![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@v6.19.4`, plus:
+Same changes as in `@mui/x-data-grid-pro@6.19.4`, plus:
 
 - [DataGridPremium] Fix autosize grouping cell (#11990) @romgrk
 - [DataGridPremium] Fix error after closing print export (#11889) @cherniavskii
 
 ### Date Pickers
 
-#### `@mui/x-date-pickers@v6.19.4`
+#### `@mui/x-date-pickers@6.19.4`
 
 - [pickers] Avoid relying on locale in Luxon `isWithinRange` method (#11940) @LukasTy
 
-#### `@mui/x-date-pickers-pro@v6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-date-pickers-pro@6.19.4` [![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@v6.19.4`.
+Same changes as in `@mui/x-date-pickers@6.19.4`.
 
-### Charts / `@mui/x-charts@v6.19.4`
+### Charts / `@mui/x-charts@6.19.4`
 
 - [charts] Add `reverse` property to axes (#11959) @alexfauquette
 - [charts] Allow series ids to be numbers (#11960) @alexfauquette

package/DateCalendar/DateCalendar.js

@@ -362,6 +362,9 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   /**

package/DateCalendar/DateCalendar.types.d.ts

@@ -80,6 +80,9 @@ export interface DateCalendarProps<TDate> extends ExportedDateCalendarProps<TDat
      */
     referenceDate?: TDate;
     className?: string;
+    /**
+     * Override or extend the styles applied to the component.
+     */
     classes?: Partial<DateCalendarClasses>;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.

package/DateCalendar/DayCalendar.d.ts

@@ -72,6 +72,9 @@ export interface DayCalendarProps<TDate> extends ExportedDayCalendarProps<TDate>
     hasFocus?: boolean;
     onFocusedViewChange?: (newHasFocus: boolean) => void;
     gridLabelId?: string;
+    /**
+     * Override or extend the styles applied to the component.
+     */
     classes?: Partial<DayCalendarClasses>;
 }
 /**

package/DateCalendar/PickersFadeTransitionGroup.d.ts

@@ -5,6 +5,9 @@ export interface PickersFadeTransitionGroupProps {
     className?: string;
     reduceAnimations: boolean;
     transKey: React.Key;
+    /**
+     * Override or extend the styles applied to the component.
+     */
     classes?: Partial<PickersFadeTransitionGroupClasses>;
 }
 /**

package/DateCalendar/PickersSlideTransition.d.ts

@@ -3,6 +3,9 @@ import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { PickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
 export type SlideDirection = 'right' | 'left';
 export interface ExportedSlideTransitionProps {
+    /**
+     * Override or extend the styles applied to the component.
+     */
     classes?: Partial<PickersSlideTransitionClasses>;
 }
 export interface SlideTransitionProps extends Omit<CSSTransitionProps, 'timeout'>, ExportedSlideTransitionProps {

package/DateCalendar/useCalendarState.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useIsDateDisabled } from './useIsDateDisabled';
-import { useUtils, useNow } from '../internals/hooks/useUtils';
+import { useUtils } from '../internals/hooks/useUtils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
@@ -49,7 +49,6 @@ export const useCalendarState = params => {
     shouldDisableDate,
     timezone
   } = params;
-  const now = useNow(timezone);
   const utils = useUtils();
   const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
   const referenceDate = React.useMemo(() => {
@@ -72,7 +71,7 @@ export const useCalendarState = params => {
   );
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
-    focusedDay: utils.isValid(value) ? value : now,
+    focusedDay: referenceDate,
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });

package/DatePicker/DatePickerToolbar.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { DateView } from '../models';
 import { DatePickerToolbarClasses } from './datePickerToolbarClasses';
-export interface DatePickerToolbarProps<TDate> extends BaseToolbarProps<TDate | null, DateView> {
-    classes?: Partial<DatePickerToolbarClasses>;
-    sx?: SxProps<Theme>;
+export interface DatePickerToolbarProps<TDate> extends BaseToolbarProps<TDate | null, DateView>, ExportedDatePickerToolbarProps {
 }
 export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps {
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<DatePickerToolbarClasses>;
 }
 type DatePickerToolbarComponent = (<TDate>(props: DatePickerToolbarProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;

package/DatePicker/DatePickerToolbar.js

@@ -1,7 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views"];
+const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className"];
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
@@ -55,7 +56,8 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
       isLandscape,
       toolbarFormat,
       toolbarPlaceholder = '––',
-      views
+      views,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
@@ -76,7 +78,7 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     ref: ref,
     toolbarTitle: localeText.datePickerToolbarTitle,
     isLandscape: isLandscape,
-    className: classes.root
+    className: clsx(classes.root, className)
   }, other, {
     children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {
       variant: "h4",
@@ -92,6 +94,9 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   /**
    * className applied to the root component.
@@ -112,6 +117,9 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   titleId: PropTypes.string,
   /**

package/DateTimePicker/DateTimePickerTabs.d.ts

@@ -18,13 +18,13 @@ export interface ExportedDateTimePickerTabsProps extends ExportedBaseTabsProps {
      * @default Time
      */
     timeIcon?: React.ReactNode;
-}
-export interface DateTimePickerTabsProps extends ExportedDateTimePickerTabsProps, BaseTabsProps<DateOrTimeViewWithMeridiem> {
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<DateTimePickerTabsClasses>;
 }
+export interface DateTimePickerTabsProps extends ExportedDateTimePickerTabsProps, BaseTabsProps<DateOrTimeViewWithMeridiem> {
+}
 /**
  * Demos:
  *

package/DateTimePicker/DateTimePickerTabs.js

@@ -70,7 +70,8 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     timeIcon = /*#__PURE__*/_jsx(TimeIcon, {}),
     view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
-    className
+    className,
+    sx
   } = props;
   const localeText = useLocaleText();
   const classes = useUtilityClasses(props);
@@ -86,6 +87,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     value: viewToTab(view),
     onChange: handleChange,
     className: clsx(className, classes.root),
+    sx: sx,
     children: [/*#__PURE__*/_jsx(Tab, {
       value: "date",
       "aria-label": localeText.dateTableLabel,
@@ -127,6 +129,10 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * Time tab icon.
    * @default Time

package/DateTimePicker/DateTimePickerToolbar.d.ts

@@ -5,12 +5,12 @@ import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models'
 export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps {
     ampm?: boolean;
     ampmInClock?: boolean;
-}
-export interface DateTimePickerToolbarProps<TDate> extends ExportedDateTimePickerToolbarProps, BaseToolbarProps<TDate | null, DateOrTimeViewWithMeridiem> {
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<DateTimePickerToolbarClasses>;
+}
+export interface DateTimePickerToolbarProps<TDate> extends ExportedDateTimePickerToolbarProps, BaseToolbarProps<TDate | null, DateOrTimeViewWithMeridiem> {
     toolbarVariant?: WrapperVariant;
 }
 /**

package/DateTimePicker/DateTimePickerToolbar.js

@@ -327,6 +327,9 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   titleId: PropTypes.string,
   /**

package/PickersLayout/PickersLayout.js

@@ -122,6 +122,9 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   /**
@@ -164,6 +167,9 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * @default {}
    */
   slots: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   value: PropTypes.any,
   view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),

package/PickersLayout/PickersLayout.types.d.ts

@@ -71,11 +71,17 @@ export interface PickersLayoutProps<TValue, TDate, TView extends DateOrTimeViewW
     value?: TValue;
     className?: string;
     children?: React.ReactNode;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
     sx?: SxProps<Theme>;
     /**
      * Ref to pass to the root element
      */
     ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Override or extend the styles applied to the component.
+     */
     classes?: Partial<PickersLayoutClasses>;
     /**
      * Overridable components.

package/TimePicker/TimePickerToolbar.d.ts

@@ -2,14 +2,15 @@ import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { TimePickerToolbarClasses } from './timePickerToolbarClasses';
 import { TimeViewWithMeridiem } from '../internals/models';
-export interface TimePickerToolbarProps<TDate> extends BaseToolbarProps<TDate | null, TimeViewWithMeridiem> {
+export interface TimePickerToolbarProps<TDate> extends BaseToolbarProps<TDate | null, TimeViewWithMeridiem>, ExportedTimePickerToolbarProps {
     ampm?: boolean;
     ampmInClock?: boolean;
-    classes?: Partial<TimePickerToolbarClasses>;
 }
 export interface ExportedTimePickerToolbarProps extends ExportedBaseToolbarProps {
-    ampm?: boolean;
-    ampmInClock?: boolean;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<TimePickerToolbarClasses>;
 }
 /**
  * Demos:

package/TimePicker/TimePickerToolbar.js

@@ -1,7 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly"];
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { useTheme, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -132,7 +133,8 @@ function TimePickerToolbar(inProps) {
       onViewChange,
       views,
       disabled,
-      readOnly
+      readOnly,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
@@ -160,7 +162,7 @@ function TimePickerToolbar(inProps) {
     toolbarTitle: localeText.timePickerToolbarTitle,
     isLandscape: isLandscape,
     ownerState: ownerState,
-    className: classes.root
+    className: clsx(classes.root, className)
   }, other, {
     children: [/*#__PURE__*/_jsxs(TimePickerToolbarHourMinuteLabel, {
       className: classes.hourMinuteLabel,
@@ -213,6 +215,9 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   // ----------------------------------------------------------------------
   ampm: PropTypes.bool,
   ampmInClock: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   /**
    * className applied to the root component.
@@ -233,6 +238,9 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   titleId: PropTypes.string,
   /**

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.19.4
+ * @mui/x-date-pickers v6.19.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.d.ts

@@ -15,6 +15,9 @@ export interface ExportedPickersArrowSwitcherProps {
      * @default {}
      */
     slotProps?: PickersArrowSwitcherSlotsComponentsProps;
+    /**
+     * Override or extend the styles applied to the component.
+     */
     classes?: Partial<PickersArrowSwitcherClasses>;
 }
 export interface PickersArrowSwitcherProps extends ExportedPickersArrowSwitcherProps, Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'as'> {

package/internals/components/PickersPopper.d.ts

@@ -60,6 +60,9 @@ export interface PickerPopperProps extends UsePickerValueActions {
     onBlur?: () => void;
     slots?: UncapitalizeObjectKeys<PickersPopperSlotsComponent>;
     slotProps?: PickersPopperSlotsComponentsProps;
+    /**
+     * Override or extend the styles applied to the component.
+     */
     classes?: Partial<PickersPopperClasses>;
     shouldRestoreFocus?: () => boolean;
     reduceAnimations?: boolean;

package/internals/models/props/tabs.d.ts

@@ -1,3 +1,5 @@
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 import { DateOrTimeViewWithMeridiem } from '../common';
 export interface BaseTabsProps<TView extends DateOrTimeViewWithMeridiem> {
     /**
@@ -11,6 +13,10 @@ export interface BaseTabsProps<TView extends DateOrTimeViewWithMeridiem> {
      */
     onViewChange: (view: TView) => void;
     className?: string;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
 }
 export interface ExportedBaseTabsProps {
 }

package/internals/models/props/toolbar.d.ts

@@ -40,5 +40,8 @@ export interface ExportedBaseToolbarProps {
      * @default `true` for Desktop, `false` for Mobile.
      */
     hidden?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
     sx?: SxProps<Theme>;
 }

package/legacy/DateCalendar/DateCalendar.js

@@ -371,6 +371,9 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   /**

package/legacy/DateCalendar/useCalendarState.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useIsDateDisabled } from './useIsDateDisabled';
-import { useUtils, useNow } from '../internals/hooks/useUtils';
+import { useUtils } from '../internals/hooks/useUtils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 export var createCalendarStateReducer = function createCalendarStateReducer(reduceAnimations, disableSwitchToMonthOnDayFocus, utils) {
@@ -51,7 +51,6 @@ export var useCalendarState = function useCalendarState(params) {
     reduceAnimations = params.reduceAnimations,
     shouldDisableDate = params.shouldDisableDate,
     timezone = params.timezone;
-  var now = useNow(timezone);
   var utils = useUtils();
   var reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
   var referenceDate = React.useMemo(function () {
@@ -74,7 +73,7 @@ export var useCalendarState = function useCalendarState(params) {
   );
   var _React$useReducer = React.useReducer(reducerFn, {
       isMonthSwitchingAnimating: false,
-      focusedDay: utils.isValid(value) ? value : now,
+      focusedDay: referenceDate,
       currentMonth: utils.startOfMonth(referenceDate),
       slideDirection: 'left'
     }),

package/legacy/DatePicker/DatePickerToolbar.js

@@ -1,7 +1,8 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views"];
+var _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className"];
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
@@ -60,6 +61,7 @@ export var DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePicker
     _props$toolbarPlaceho = props.toolbarPlaceholder,
     toolbarPlaceholder = _props$toolbarPlaceho === void 0 ? '––' : _props$toolbarPlaceho,
     views = props.views,
+    className = props.className,
     other = _objectWithoutProperties(props, _excluded);
   var utils = useUtils();
   var localeText = useLocaleText();
@@ -79,7 +81,7 @@ export var DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePicker
     ref: ref,
     toolbarTitle: localeText.datePickerToolbarTitle,
     isLandscape: isLandscape,
-    className: classes.root
+    className: clsx(classes.root, className)
   }, other, {
     children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {
       variant: "h4",
@@ -95,6 +97,9 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   /**
    * className applied to the root component.
@@ -115,6 +120,9 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   titleId: PropTypes.string,
   /**

package/legacy/DateTimePicker/DateTimePickerTabs.js

@@ -73,7 +73,8 @@ var DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     view = props.view,
     _props$hidden = props.hidden,
     hidden = _props$hidden === void 0 ? typeof window === 'undefined' || window.innerHeight < 667 : _props$hidden,
-    className = props.className;
+    className = props.className,
+    sx = props.sx;
   var localeText = useLocaleText();
   var classes = useUtilityClasses(props);
   var handleChange = function handleChange(event, value) {
@@ -88,6 +89,7 @@ var DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     value: viewToTab(view),
     onChange: handleChange,
     className: clsx(className, classes.root),
+    sx: sx,
     children: [/*#__PURE__*/_jsx(Tab, {
       value: "date",
       "aria-label": localeText.dateTableLabel,
@@ -129,6 +131,10 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * Time tab icon.
    * @default Time

package/legacy/DateTimePicker/DateTimePickerToolbar.js

@@ -352,6 +352,9 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   titleId: PropTypes.string,
   /**

package/legacy/PickersLayout/PickersLayout.js

@@ -120,6 +120,9 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   /**
@@ -162,6 +165,9 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * @default {}
    */
   slots: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   value: PropTypes.any,
   view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),

package/legacy/TimePicker/TimePickerToolbar.js

@@ -1,8 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly"];
+var _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { useTheme, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -132,6 +133,7 @@ function TimePickerToolbar(inProps) {
     views = props.views,
     disabled = props.disabled,
     readOnly = props.readOnly,
+    className = props.className,
     other = _objectWithoutProperties(props, _excluded);
   var utils = useUtils();
   var localeText = useLocaleText();
@@ -159,7 +161,7 @@ function TimePickerToolbar(inProps) {
     toolbarTitle: localeText.timePickerToolbarTitle,
     isLandscape: isLandscape,
     ownerState: ownerState,
-    className: classes.root
+    className: clsx(classes.root, className)
   }, other, {
     children: [/*#__PURE__*/_jsxs(TimePickerToolbarHourMinuteLabel, {
       className: classes.hourMinuteLabel,
@@ -222,6 +224,9 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   // ----------------------------------------------------------------------
   ampm: PropTypes.bool,
   ampmInClock: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   /**
    * className applied to the root component.
@@ -242,6 +247,9 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   titleId: PropTypes.string,
   /**

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.19.4
+ * @mui/x-date-pickers v6.19.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/DateCalendar/DateCalendar.js

@@ -360,6 +360,9 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   /**

package/modern/DateCalendar/useCalendarState.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useIsDateDisabled } from './useIsDateDisabled';
-import { useUtils, useNow } from '../internals/hooks/useUtils';
+import { useUtils } from '../internals/hooks/useUtils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
@@ -49,7 +49,6 @@ export const useCalendarState = params => {
     shouldDisableDate,
     timezone
   } = params;
-  const now = useNow(timezone);
   const utils = useUtils();
   const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
   const referenceDate = React.useMemo(() => {
@@ -72,7 +71,7 @@ export const useCalendarState = params => {
   );
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
-    focusedDay: utils.isValid(value) ? value : now,
+    focusedDay: referenceDate,
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });

package/modern/DatePicker/DatePickerToolbar.js

@@ -1,7 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views"];
+const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className"];
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
@@ -55,7 +56,8 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
       isLandscape,
       toolbarFormat,
       toolbarPlaceholder = '––',
-      views
+      views,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
@@ -76,7 +78,7 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     ref: ref,
     toolbarTitle: localeText.datePickerToolbarTitle,
     isLandscape: isLandscape,
-    className: classes.root
+    className: clsx(classes.root, className)
   }, other, {
     children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {
       variant: "h4",
@@ -92,6 +94,9 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   /**
    * className applied to the root component.
@@ -112,6 +117,9 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   titleId: PropTypes.string,
   /**

package/modern/DateTimePicker/DateTimePickerTabs.js

@@ -70,7 +70,8 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     timeIcon = /*#__PURE__*/_jsx(TimeIcon, {}),
     view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
-    className
+    className,
+    sx
   } = props;
   const localeText = useLocaleText();
   const classes = useUtilityClasses(props);
@@ -86,6 +87,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     value: viewToTab(view),
     onChange: handleChange,
     className: clsx(className, classes.root),
+    sx: sx,
     children: [/*#__PURE__*/_jsx(Tab, {
       value: "date",
       "aria-label": localeText.dateTableLabel,
@@ -127,6 +129,10 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * Time tab icon.
    * @default Time

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -327,6 +327,9 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   titleId: PropTypes.string,
   /**

package/modern/PickersLayout/PickersLayout.js

@@ -122,6 +122,9 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   /**
@@ -164,6 +167,9 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * @default {}
    */
   slots: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   value: PropTypes.any,
   view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),

package/modern/TimePicker/TimePickerToolbar.js

@@ -1,7 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly"];
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { useTheme, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -132,7 +133,8 @@ function TimePickerToolbar(inProps) {
       onViewChange,
       views,
       disabled,
-      readOnly
+      readOnly,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
@@ -160,7 +162,7 @@ function TimePickerToolbar(inProps) {
     toolbarTitle: localeText.timePickerToolbarTitle,
     isLandscape: isLandscape,
     ownerState: ownerState,
-    className: classes.root
+    className: clsx(classes.root, className)
   }, other, {
     children: [/*#__PURE__*/_jsxs(TimePickerToolbarHourMinuteLabel, {
       className: classes.hourMinuteLabel,
@@ -213,6 +215,9 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   // ----------------------------------------------------------------------
   ampm: PropTypes.bool,
   ampmInClock: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   /**
    * className applied to the root component.
@@ -233,6 +238,9 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   titleId: PropTypes.string,
   /**

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.19.4
+ * @mui/x-date-pickers v6.19.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/DateCalendar/DateCalendar.js

@@ -368,6 +368,9 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   /**

package/node/DateCalendar/useCalendarState.js

@@ -59,7 +59,6 @@ const useCalendarState = params => {
     shouldDisableDate,
     timezone
   } = params;
-  const now = (0, _useUtils.useNow)(timezone);
   const utils = (0, _useUtils.useUtils)();
   const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
   const referenceDate = React.useMemo(() => {
@@ -82,7 +81,7 @@ const useCalendarState = params => {
   );
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
-    focusedDay: utils.isValid(value) ? value : now,
+    focusedDay: referenceDate,
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });

package/node/DatePicker/DatePickerToolbar.js

@@ -8,6 +8,7 @@ exports.DatePickerToolbar = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
@@ -17,7 +18,7 @@ var _useUtils = require("../internals/hooks/useUtils");
 var _datePickerToolbarClasses = require("./datePickerToolbarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views"];
+const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -64,7 +65,8 @@ const DatePickerToolbar = exports.DatePickerToolbar = /*#__PURE__*/React.forward
       isLandscape,
       toolbarFormat,
       toolbarPlaceholder = '––',
-      views
+      views,
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
@@ -85,7 +87,7 @@ const DatePickerToolbar = exports.DatePickerToolbar = /*#__PURE__*/React.forward
     ref: ref,
     toolbarTitle: localeText.datePickerToolbarTitle,
     isLandscape: isLandscape,
-    className: classes.root
+    className: (0, _clsx.default)(classes.root, className)
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerToolbarTitle, {
       variant: "h4",
@@ -101,6 +103,9 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: _propTypes.default.object,
   /**
    * className applied to the root component.
@@ -121,6 +126,9 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    */
   onViewChange: _propTypes.default.func.isRequired,
   readOnly: _propTypes.default.bool,
+  /**
+   * 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]),
   titleId: _propTypes.default.string,
   /**

package/node/DateTimePicker/DateTimePickerTabs.js

@@ -78,7 +78,8 @@ const DateTimePickerTabs = exports.DateTimePickerTabs = function DateTimePickerT
     timeIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.TimeIcon, {}),
     view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
-    className
+    className,
+    sx
   } = props;
   const localeText = (0, _useUtils.useLocaleText)();
   const classes = useUtilityClasses(props);
@@ -94,6 +95,7 @@ const DateTimePickerTabs = exports.DateTimePickerTabs = function DateTimePickerT
     value: viewToTab(view),
     onChange: handleChange,
     className: (0, _clsx.default)(className, classes.root),
+    sx: sx,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
       value: "date",
       "aria-label": localeText.dateTableLabel,
@@ -135,6 +137,10 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: _propTypes.default.func.isRequired,
+  /**
+   * 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]),
   /**
    * Time tab icon.
    * @default Time

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -335,6 +335,9 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    */
   onViewChange: _propTypes.default.func.isRequired,
   readOnly: _propTypes.default.bool,
+  /**
+   * 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]),
   titleId: _propTypes.default.string,
   /**

package/node/PickersLayout/PickersLayout.js

@@ -129,6 +129,9 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   /**
@@ -171,6 +174,9 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * @default {}
    */
   slots: _propTypes.default.object,
+  /**
+   * 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]),
   value: _propTypes.default.any,
   view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),

package/node/TimePicker/TimePickerToolbar.js

@@ -8,6 +8,7 @@ exports.TimePickerToolbar = TimePickerToolbar;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
@@ -20,7 +21,7 @@ var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 var _timePickerToolbarClasses = require("./timePickerToolbarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly"];
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -140,7 +141,8 @@ function TimePickerToolbar(inProps) {
       onViewChange,
       views,
       disabled,
-      readOnly
+      readOnly,
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
@@ -168,7 +170,7 @@ function TimePickerToolbar(inProps) {
     toolbarTitle: localeText.timePickerToolbarTitle,
     isLandscape: isLandscape,
     ownerState: ownerState,
-    className: classes.root
+    className: (0, _clsx.default)(classes.root, className)
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TimePickerToolbarHourMinuteLabel, {
       className: classes.hourMinuteLabel,
@@ -221,6 +223,9 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   // ----------------------------------------------------------------------
   ampm: _propTypes.default.bool,
   ampmInClock: _propTypes.default.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: _propTypes.default.object,
   /**
    * className applied to the root component.
@@ -241,6 +246,9 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   onViewChange: _propTypes.default.func.isRequired,
   readOnly: _propTypes.default.bool,
+  /**
+   * 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]),
   titleId: _propTypes.default.string,
   /**

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.19.4
+ * @mui/x-date-pickers v6.19.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "6.19.4",
+  "version": "6.19.5",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",