@mui/x-date-pickers 5.0.2 → 6.0.0-alpha.0

package/MobileTimePicker/MobileTimePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ToolbarComponent", "value", "onChange", "components", "componentsProps"];
+const _excluded = ["ToolbarComponent", "value", "onChange", "components", "componentsProps", "localeText"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTimePickerDefaultizedProps, timePickerValueManager } from '../TimePicker/shared';
@@ -35,7 +35,8 @@ export const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTim
   const {
     ToolbarComponent = TimePickerToolbar,
     components,
-    componentsProps
+    componentsProps,
+    localeText
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -51,6 +52,7 @@ export const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTim
     PureDateInputComponent: PureDateInput,
     components: components,
     componentsProps: componentsProps,
+    localeText: localeText,
     children: /*#__PURE__*/_jsx(CalendarOrClockPicker, _extends({}, pickerProps, {
       autoFocus: true,
       toolbarTitle: props.label || props.toolbarTitle,
@@ -138,25 +140,6 @@ process.env.NODE_ENV !== "production" ? MobileTimePicker.propTypes = {
    */
   disableOpenPicker: PropTypes.bool,
 
-  /**
-   * Accessible text that helps user to understand which time and view is selected.
-   * @template TDate
-   * @param {ClockPickerView} view The current view rendered.
-   * @param {TDate | null} time The current time.
-   * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
-   * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   * @default <TDate extends any>(
-   *   view: ClockView,
-   *   time: TDate | null,
-   *   adapter: MuiPickersAdapter<TDate>,
-   * ) =>
-   *   `Select ${view}. ${
-   *     time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}`
-   *   }`
-   */
-  getClockLabelText: PropTypes.func,
-
   /**
    * Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType
    * @template TInputDate, TDate
@@ -187,6 +170,11 @@ process.env.NODE_ENV !== "production" ? MobileTimePicker.propTypes = {
   })]),
   label: PropTypes.node,
 
+  /**
+   * Locale for components texts
+   */
+  localeText: PropTypes.object,
+
   /**
    * Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`).
    */

package/MonthPicker/MonthPicker.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
-import { NonNullablePickerChangeHandler } from '../internals/hooks/useViews';
 import { MonthPickerClasses } from './monthPickerClasses';
 import { BaseDateValidationProps, MonthValidationProps } from '../internals/hooks/validation/models';
 import { DefaultizedProps } from '../internals/models/helpers';
 export interface MonthPickerProps<TDate> extends MonthValidationProps<TDate>, BaseDateValidationProps<TDate> {
+    autoFocus?: boolean;
     /**
      * className applied to the root element.
      */
@@ -14,24 +14,27 @@ export interface MonthPickerProps<TDate> extends MonthValidationProps<TDate>, Ba
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<MonthPickerClasses>;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
     /** Date value for the MonthPicker */
-    date: TDate | null;
+    value: TDate | null;
     /** If `true` picker is disabled */
     disabled?: boolean;
-    /** Callback fired on date change. */
-    onChange: NonNullablePickerChangeHandler<TDate>;
-    /** If `true` picker is readonly */
-    readOnly?: boolean;
     /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
+     * Callback fired when the value (the selected month) changes.
+     * @template TValue
+     * @param {TValue} value The new parsed value.
      */
-    sx?: SxProps<Theme>;
+    onChange: (value: TDate) => void;
+    /** If `true` picker is readonly */
+    readOnly?: boolean;
     /**
      * If `true`, today's date is rendering without highlighting with circle.
      * @default false
      */
     disableHighlightToday?: boolean;
-    autoFocus?: boolean;
     onMonthFocus?: (month: number) => void;
     hasFocus?: boolean;
     onFocusedViewChange?: (newHasFocus: boolean) => void;

package/MonthPicker/MonthPicker.js

@@ -1,12 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "date", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange"];
+const _excluded = ["className", "value", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useTheme } from '@mui/system';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, useControlled, useEventCallback } from '@mui/material';
+import { unstable_useControlled as useControlled, unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { PickersMonth } from './PickersMonth';
 import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
 import { getMonthPickerUtilityClass } from './monthPickerClasses';
@@ -50,13 +50,14 @@ const MonthPickerRoot = styled('div', {
   margin: '0 4px'
 });
 export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps, ref) {
-  const utils = useUtils();
   const now = useNow();
+  const theme = useTheme();
+  const utils = useUtils();
   const props = useMonthPickerDefaultizedProps(inProps, 'MuiMonthPicker');
 
   const {
     className,
-    date,
+    value,
     disabled,
     disableFuture,
     disablePast,
@@ -75,11 +76,11 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
 
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  const theme = useTheme();
-  const selectedDateOrToday = date != null ? date : now;
+  const todayMonth = React.useMemo(() => utils.getMonth(now), [utils, now]);
+  const selectedDateOrToday = value != null ? value : now;
   const selectedMonth = React.useMemo(() => {
-    if (date != null) {
-      return utils.getMonth(date);
+    if (value != null) {
+      return utils.getMonth(value);
     }
 
     if (disableHighlightToday) {
@@ -87,9 +88,22 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
     }
 
     return utils.getMonth(now);
-  }, [now, date, utils, disableHighlightToday]);
-  const [focusedMonth, setFocusedMonth] = React.useState(() => selectedMonth || utils.getMonth(now));
-  const isMonthDisabled = React.useCallback(month => {
+  }, [now, value, utils, disableHighlightToday]);
+  const [focusedMonth, setFocusedMonth] = React.useState(() => selectedMonth || todayMonth);
+  const [internalHasFocus, setInternalHasFocus] = useControlled({
+    name: 'MonthPicker',
+    state: 'hasFocus',
+    controlled: hasFocus,
+    default: autoFocus
+  });
+  const changeHasFocus = useEventCallback(newHasFocus => {
+    setInternalHasFocus(newHasFocus);
+
+    if (onFocusedViewChange) {
+      onFocusedViewChange(newHasFocus);
+    }
+  });
+  const isMonthDisabled = useEventCallback(month => {
     const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
 
@@ -106,31 +120,16 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
     }
 
     return shouldDisableMonth(month);
-  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableMonth, utils]);
-
-  const onMonthSelect = month => {
+  });
+  const handleMonthSelection = useEventCallback((event, month) => {
     if (readOnly) {
       return;
     }
 
     const newDate = utils.setMonth(selectedDateOrToday, month);
-    onChange(newDate, 'finish');
-  };
-
-  const [internalHasFocus, setInternalHasFocus] = useControlled({
-    name: 'MonthPicker',
-    state: 'hasFocus',
-    controlled: hasFocus,
-    default: autoFocus
+    onChange(newDate);
   });
-  const changeHasFocus = React.useCallback(newHasFocus => {
-    setInternalHasFocus(newHasFocus);
-
-    if (onFocusedViewChange) {
-      onFocusedViewChange(newHasFocus);
-    }
-  }, [setInternalHasFocus, onFocusedViewChange]);
-  const focusMonth = React.useCallback(month => {
+  const focusMonth = useEventCallback(month => {
     if (!isMonthDisabled(utils.setMonth(selectedDateOrToday, month))) {
       setFocusedMonth(month);
       changeHasFocus(true);
@@ -139,32 +138,32 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
         onMonthFocus(month);
       }
     }
-  }, [selectedDateOrToday, isMonthDisabled, utils, onMonthFocus, changeHasFocus]);
+  });
   React.useEffect(() => {
     setFocusedMonth(prevFocusedMonth => selectedMonth !== null && prevFocusedMonth !== selectedMonth ? selectedMonth : prevFocusedMonth);
   }, [selectedMonth]);
-  const handleKeyDown = useEventCallback(event => {
+  const handleKeyDown = useEventCallback((event, month) => {
     const monthsInYear = 12;
     const monthsInRow = 3;
 
     switch (event.key) {
       case 'ArrowUp':
-        focusMonth((monthsInYear + focusedMonth - monthsInRow) % monthsInYear);
+        focusMonth((monthsInYear + month - monthsInRow) % monthsInYear);
         event.preventDefault();
         break;
 
       case 'ArrowDown':
-        focusMonth((monthsInYear + focusedMonth + monthsInRow) % monthsInYear);
+        focusMonth((monthsInYear + month + monthsInRow) % monthsInYear);
         event.preventDefault();
         break;
 
       case 'ArrowLeft':
-        focusMonth((monthsInYear + focusedMonth + (theme.direction === 'ltr' ? -1 : 1)) % monthsInYear);
+        focusMonth((monthsInYear + month + (theme.direction === 'ltr' ? -1 : 1)) % monthsInYear);
         event.preventDefault();
         break;
 
       case 'ArrowRight':
-        focusMonth((monthsInYear + focusedMonth + (theme.direction === 'ltr' ? 1 : -1)) % monthsInYear);
+        focusMonth((monthsInYear + month + (theme.direction === 'ltr' ? 1 : -1)) % monthsInYear);
         event.preventDefault();
         break;
 
@@ -172,33 +171,35 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
         break;
     }
   });
-  const handleMonthFocus = React.useCallback((event, month) => {
+  const handleMonthFocus = useEventCallback((event, month) => {
     focusMonth(month);
-  }, [focusMonth]);
-  const handleMonthBlur = React.useCallback(() => {
-    changeHasFocus(false);
-  }, [changeHasFocus]);
-  const currentMonthNumber = utils.getMonth(now);
+  });
+  const handleMonthBlur = useEventCallback((event, month) => {
+    if (focusedMonth === month) {
+      changeHasFocus(false);
+    }
+  });
   return /*#__PURE__*/_jsx(MonthPickerRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
-    ownerState: ownerState,
-    onKeyDown: handleKeyDown
+    ownerState: ownerState
   }, other, {
     children: utils.getMonthArray(selectedDateOrToday).map(month => {
       const monthNumber = utils.getMonth(month);
       const monthText = utils.format(month, 'monthShort');
+      const isSelected = monthNumber === selectedMonth;
       const isDisabled = disabled || isMonthDisabled(month);
       return /*#__PURE__*/_jsx(PickersMonth, {
+        selected: isSelected,
         value: monthNumber,
-        selected: monthNumber === selectedMonth,
-        tabIndex: monthNumber === focusedMonth && !isDisabled ? 0 : -1,
-        hasFocus: internalHasFocus && monthNumber === focusedMonth,
-        onSelect: onMonthSelect,
+        onClick: handleMonthSelection,
+        onKeyDown: handleKeyDown,
+        autoFocus: internalHasFocus && monthNumber === focusedMonth,
+        disabled: isDisabled,
+        tabIndex: monthNumber === focusedMonth ? 0 : -1,
         onFocus: handleMonthFocus,
         onBlur: handleMonthBlur,
-        disabled: isDisabled,
-        "aria-current": currentMonthNumber === monthNumber ? 'date' : undefined,
+        "aria-current": todayMonth === monthNumber ? 'date' : undefined,
         children: monthText
       }, monthText);
     })
@@ -221,11 +222,6 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes = {
    */
   className: PropTypes.string,
 
-  /**
-   * Date value for the MonthPicker
-   */
-  date: PropTypes.any,
-
   /**
    * If `true` picker is disabled
    */
@@ -261,7 +257,9 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes = {
   minDate: PropTypes.any,
 
   /**
-   * Callback fired on date change.
+   * Callback fired when the value (the selected month) changes.
+   * @template TValue
+   * @param {TValue} value The new parsed value.
    */
   onChange: PropTypes.func.isRequired,
   onFocusedViewChange: PropTypes.func,
@@ -284,5 +282,10 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes = {
   /**
    * 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])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+
+  /**
+   * Date value for the MonthPicker
+   */
+  value: PropTypes.any
 } : void 0;

package/MonthPicker/PickersMonth.d.ts

@@ -1,18 +1,21 @@
 import * as React from 'react';
 import { PickersMonthClasses } from './pickersMonthClasses';
-export interface MonthProps {
+interface PickersMonthProps {
+    'aria-current'?: React.AriaAttributes['aria-current'];
+    autoFocus: boolean;
     children: React.ReactNode;
+    classes?: Partial<PickersMonthClasses>;
     disabled?: boolean;
-    onSelect: (value: number) => void;
+    onClick: (event: React.MouseEvent, month: number) => void;
+    onKeyDown: (event: React.KeyboardEvent, month: number) => void;
+    onFocus: (event: React.FocusEvent, month: number) => void;
+    onBlur: (event: React.FocusEvent, month: number) => void;
     selected?: boolean;
     value: number;
-    hasFocus: boolean;
-    onBlur: (event: React.FocusEvent, month: number) => void;
-    onFocus: (event: React.FocusEvent, month: number) => void;
     tabIndex: number;
-    classes?: Partial<PickersMonthClasses>;
 }
 /**
  * @ignore - do not document.
  */
-export declare const PickersMonth: React.FC<MonthProps>;
+export declare const PickersMonth: React.MemoExoticComponent<(props: PickersMonthProps) => JSX.Element>;
+export {};

package/MonthPicker/PickersMonth.js

@@ -1,39 +1,53 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["disabled", "onSelect", "selected", "value", "tabIndex", "hasFocus", "onFocus", "onBlur"];
+const _excluded = ["autoFocus", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current"];
 import * as React from 'react';
-import Typography from '@mui/material/Typography';
 import { styled, alpha } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
-import { onSpaceOrEnter } from '../internals/utils/utils';
+import { capitalize, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
 import { getPickersMonthUtilityClass, pickersMonthClasses } from './pickersMonthClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
   const {
-    classes,
-    selected
+    wrapperVariant,
+    disabled,
+    selected,
+    classes
   } = ownerState;
   const slots = {
-    root: ['root', selected && 'selected']
+    root: ['root', wrapperVariant && `mode${capitalize(wrapperVariant)}`],
+    monthButton: ['monthButton', disabled && 'disabled', selected && 'selected']
   };
   return composeClasses(slots, getPickersMonthUtilityClass, classes);
 };
 
-const PickersMonthRoot = styled(Typography, {
+const PickersMonthRoot = styled('div', {
   name: 'PrivatePickersMonth',
   slot: 'Root',
   overridesResolver: (_, styles) => [styles.root, {
+    [`&.${pickersMonthClasses.modeDesktop}`]: styles.modeDesktop
+  }, {
+    [`&.${pickersMonthClasses.modeMobile}`]: styles.modeMobile
+  }]
+})({
+  flexBasis: '33.3%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+const PickersMonthButton = styled('button', {
+  name: 'PrivatePickersMonth',
+  slot: 'MonthButton',
+  overridesResolver: (_, styles) => [styles.monthButton, {
+    [`&.${pickersMonthClasses.disabled}`]: styles.disabled
+  }, {
     [`&.${pickersMonthClasses.selected}`]: styles.selected
   }]
 })(({
   theme
 }) => _extends({
-  flex: '1 0 33.33%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
   color: 'unset',
   backgroundColor: 'transparent',
   border: 0,
@@ -41,13 +55,20 @@ const PickersMonthRoot = styled(Typography, {
 }, theme.typography.subtitle1, {
   margin: '8px 0',
   height: 36,
+  width: 72,
   borderRadius: 18,
   cursor: 'pointer',
-  '&:focus, &:hover': {
+  '&:focus': {
+    backgroundColor: alpha(theme.palette.action.active, theme.palette.action.focusOpacity)
+  },
+  '&:hover': {
     backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
   },
   '&:disabled': {
-    pointerEvents: 'none',
+    cursor: 'auto',
+    pointerEvents: 'none'
+  },
+  [`&.${pickersMonthClasses.disabled}`]: {
     color: theme.palette.text.secondary
   },
   [`&.${pickersMonthClasses.selected}`]: {
@@ -58,53 +79,64 @@ const PickersMonthRoot = styled(Typography, {
     }
   }
 }));
-
-const noop = () => {};
 /**
  * @ignore - do not document.
  */
 
-
-export const PickersMonth = props => {
+const PickersMonthRaw = props => {
   // TODO v6 add 'useThemeProps' once the component class names are aligned
   const {
+    autoFocus,
+    children,
     disabled,
-    onSelect,
-    selected,
     value,
     tabIndex,
-    hasFocus,
-    onFocus = noop,
-    onBlur = noop
+    onClick,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    'aria-current': ariaCurrent
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const classes = useUtilityClasses(props);
-
-  const handleSelection = () => {
-    onSelect(value);
-  };
-
+  const wrapperVariant = React.useContext(WrapperVariantContext);
   const ref = React.useRef(null);
   useEnhancedEffect(() => {
-    if (hasFocus) {
+    if (autoFocus) {
       var _ref$current;
 
       (_ref$current = ref.current) == null ? void 0 : _ref$current.focus();
     }
-  }, [hasFocus]);
+  }, [autoFocus]);
+
+  const ownerState = _extends({}, props, {
+    wrapperVariant
+  });
+
+  const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({
-    ref: ref,
-    component: "button",
-    type: "button",
     className: classes.root,
-    tabIndex: tabIndex,
-    onClick: handleSelection,
-    onKeyDown: onSpaceOrEnter(handleSelection),
-    color: selected ? 'primary' : undefined,
-    variant: selected ? 'h5' : 'subtitle1',
-    disabled: disabled,
-    onFocus: event => onFocus(event, value),
-    onBlur: event => onBlur(event, value)
-  }, other));
-};
+    ownerState: ownerState
+  }, other, {
+    children: /*#__PURE__*/_jsx(PickersMonthButton, {
+      ref: ref,
+      disabled: disabled,
+      type: "button",
+      tabIndex: disabled ? -1 : tabIndex,
+      "aria-current": ariaCurrent,
+      onClick: event => onClick(event, value),
+      onKeyDown: event => onKeyDown(event, value),
+      onFocus: event => onFocus(event, value),
+      onBlur: event => onBlur(event, value),
+      className: classes.monthButton,
+      ownerState: ownerState,
+      children: children
+    })
+  }));
+};
+/**
+ * @ignore - do not document.
+ */
+
+
+export const PickersMonth = /*#__PURE__*/React.memo(PickersMonthRaw);

package/MonthPicker/pickersMonthClasses.d.ts

@@ -1,7 +1,15 @@
 export interface PickersMonthClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Styles applied to a selected root element. */
+    /** Styles applied to the root element in mobile mode. */
+    modeMobile: string;
+    /** Styles applied to the root element in desktop mode. */
+    modeDesktop: string;
+    /** Styles applied to the month button element. */
+    monthButton: string;
+    /** Styles applied to a disabled month button element. */
+    disabled: string;
+    /** Styles applied to a selected month button element. */
     selected: string;
 }
 export declare type PickersMonthClassKey = keyof PickersMonthClasses;

package/MonthPicker/pickersMonthClasses.js

@@ -4,4 +4,4 @@ export function getPickersMonthUtilityClass(slot) {
   return generateUtilityClass('PrivatePickersMonth', slot);
 }
 export const pickersMonthClasses = generateUtilityClasses( // TODO v6 Rename 'PrivatePickersMonth' to 'MuiPickersMonth' to follow convention
-'PrivatePickersMonth', ['root', 'selected']);
+'PrivatePickersMonth', ['root', 'modeMobile', 'modeDesktop', 'monthButton', 'disabled', 'selected']);

package/PickersDay/PickersDay.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { SxProps } from '@mui/system';
 import { ButtonBaseProps } from '@mui/material/ButtonBase';
-import { Theme } from '@mui/material/styles';
 import { ExtendMui } from '../internals/models/helpers';
 import { PickerSelectionState } from '../internals/hooks/usePickerState';
 import { PickersDayClasses } from './pickersDayClasses';
@@ -53,10 +51,6 @@ export interface PickersDayProps<TDate> extends Omit<ExtendMui<ButtonBaseProps>,
      * @default false
      */
     today?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
 }
 declare type PickersDayComponent = (<TDate>(props: PickersDayProps<TDate> & React.RefAttributes<HTMLButtonElement>) => JSX.Element) & {
     propTypes?: any;

package/PickersDay/PickersDay.js

@@ -266,11 +266,6 @@ process.env.NODE_ENV !== "production" ? PickersDayRaw.propTypes = {
    */
   showDaysOutsideCurrentMonth: 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]),
-
   /**
    * If `true`, renders as today date.
    * @default false

package/StaticDatePicker/StaticDatePicker.d.ts

@@ -8,7 +8,7 @@ export interface StaticDatePickerSlotsComponent extends PickersStaticWrapperSlot
 }
 export interface StaticDatePickerSlotsComponentsProps extends PickersStaticWrapperSlotsComponentsProps, CalendarPickerSlotsComponentsProps {
 }
-export interface StaticDatePickerProps<TInputDate, TDate> extends StaticPickerProps<BaseDatePickerProps<TInputDate, TDate>> {
+export interface StaticDatePickerProps<TInputDate, TDate> extends StaticPickerProps<TDate, BaseDatePickerProps<TInputDate, TDate>> {
     /**
      * Overrideable components.
      * @default {}