@mui/x-date-pickers 6.19.4 → 6.19.6

package/CHANGELOG.md

@@ -3,7 +3,109 @@
 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.6
+
+_Mar 1, 2024_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Korean (ko-KR) and Chinese (zh-CN) locales on the Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.6`
+
+- [DataGrid] Fix error when existing rows are passed to `replaceRows` (@martijn-basesoft)
+
+#### `@mui/x-data-grid-pro@6.19.6` [![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.6`.
+
+#### `@mui/x-data-grid-premium@6.19.6` [![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.6`, plus:
+
+- [DataGridPremium] Make clipboard copy respect the sorting during cell selection (#12255) @MBilalShafi
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.6`
+
+- [l10n] Improve Chinese (zh-CN) locale (#12250) @headironc
+- [l10n] Improve Korean (ko-KR) locale (#12186) @Luzi
+
+#### `@mui/x-date-pickers-pro@6.19.6` [![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.6`.
+
+### Docs
+
+- [docs] Update lazy loading demo to show skeleton rows during initial rows fetch (#12062) @cherniavskii
+
+## 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 +117,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 +125,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.6
  *
  * @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,
   /**