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

package/StaticDatePicker/StaticDatePicker.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", "displayStaticWrapperAs", "components", "componentsProps", "className"];
+const _excluded = ["ToolbarComponent", "value", "onChange", "displayStaticWrapperAs", "components", "componentsProps", "localeText", "sx", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDatePickerDefaultizedProps, datePickerValueManager } from '../DatePicker/shared';
@@ -27,9 +27,11 @@ export const StaticDatePicker = /*#__PURE__*/React.forwardRef(function StaticDat
 
   const {
     ToolbarComponent = DatePickerToolbar,
-    displayStaticWrapperAs = 'mobile',
+    displayStaticWrapperAs,
     components,
     componentsProps,
+    localeText,
+    sx,
     className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -51,6 +53,8 @@ export const StaticDatePicker = /*#__PURE__*/React.forwardRef(function StaticDat
     displayStaticWrapperAs: displayStaticWrapperAs,
     components: components,
     componentsProps: componentsProps,
+    localeText: localeText,
+    sx: sx,
     className: className
   }, wrapperProps, {
     children: /*#__PURE__*/_jsx(CalendarOrClockPicker, _extends({}, pickerProps, {
@@ -149,7 +153,7 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes = {
 
   /**
    * Force static wrapper inner components to be rendered in mobile or desktop mode.
-   * @default 'mobile'
+   * @default "mobile"
    */
   displayStaticWrapperAs: PropTypes.oneOf(['desktop', 'mobile']),
 
@@ -162,14 +166,6 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes = {
    * @default (date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`
    */
   getOpenDialogAriaText: PropTypes.func,
-
-  /**
-   * Get aria-label text for switching between views button.
-   * @param {CalendarPickerView} currentView The view from which we want to get the button text.
-   * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   */
-  getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,
 
   /**
@@ -191,12 +187,6 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes = {
   })]),
   label: PropTypes.node,
 
-  /**
-   * Left arrow icon aria-label text.
-   * @deprecated
-   */
-  leftArrowButtonText: PropTypes.string,
-
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -204,6 +194,11 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes = {
    */
   loading: PropTypes.bool,
 
+  /**
+   * Locale for components texts
+   */
+  localeText: PropTypes.object,
+
   /**
    * Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`).
    */
@@ -334,12 +329,6 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes = {
    */
   rifmFormatter: PropTypes.func,
 
-  /**
-   * Right arrow icon aria-label text.
-   * @deprecated
-   */
-  rightArrowButtonText: PropTypes.string,
-
   /**
    * Disable specific date. @DateIOType
    * @template TDate
@@ -377,6 +366,11 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes = {
    */
   showToolbar: 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]),
+
   /**
    * Component that will replace default toolbar renderer.
    * @default DatePickerToolbar

package/StaticDateTimePicker/StaticDateTimePicker.d.ts

@@ -8,7 +8,7 @@ export interface StaticDateTimePickerSlotsComponent extends PickersStaticWrapper
 }
 export interface StaticDateTimePickerSlotsComponentsProps extends PickersStaticWrapperSlotsComponentsProps, CalendarOrClockPickerSlotsComponentsProps {
 }
-export interface StaticDateTimePickerProps<TInputDate, TDate> extends StaticPickerProps<BaseDateTimePickerProps<TInputDate, TDate>> {
+export interface StaticDateTimePickerProps<TInputDate, TDate> extends StaticPickerProps<TDate, BaseDateTimePickerProps<TInputDate, TDate>> {
     /**
      * Overrideable components.
      * @default {}

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "hideTabs", "className"];
+const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "localeText", "sx", "hideTabs", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDateTimePickerDefaultizedProps, dateTimePickerValueManager } from '../DateTimePicker/shared';
@@ -27,10 +27,12 @@ export const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function Stati
   // It saves us >1kb gzip and make any prop available automatically on any level down.
 
   const {
-    displayStaticWrapperAs = 'mobile',
+    displayStaticWrapperAs,
     ToolbarComponent = DateTimePickerToolbar,
     components: providedComponents,
     componentsProps,
+    localeText,
+    sx,
     hideTabs = displayStaticWrapperAs === 'desktop',
     className
   } = props,
@@ -57,6 +59,8 @@ export const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function Stati
     displayStaticWrapperAs: displayStaticWrapperAs,
     components: components,
     componentsProps: componentsProps,
+    localeText: localeText,
+    sx: sx,
     className: className
   }, wrapperProps, {
     children: /*#__PURE__*/_jsx(CalendarOrClockPicker, _extends({}, pickerProps, {
@@ -179,29 +183,10 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
 
   /**
    * Force static wrapper inner components to be rendered in mobile or desktop mode.
-   * @default 'mobile'
+   * @default "mobile"
    */
   displayStaticWrapperAs: PropTypes.oneOf(['desktop', 'mobile']),
 
-  /**
-   * 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
@@ -212,14 +197,6 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
    */
   getOpenDialogAriaText: PropTypes.func,
 
-  /**
-   * Get aria-label text for switching between views button.
-   * @param {CalendarPickerView} currentView The view from which we want to get the button text.
-   * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   */
-  getViewSwitchingButtonText: PropTypes.func,
-
   /**
    * Toggles visibility of date time switching tabs
    * @default false for mobile, true for desktop
@@ -246,12 +223,6 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
   })]),
   label: PropTypes.node,
 
-  /**
-   * Left arrow icon aria-label text.
-   * @deprecated
-   */
-  leftArrowButtonText: PropTypes.string,
-
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -259,6 +230,11 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
    */
   loading: PropTypes.bool,
 
+  /**
+   * Locale for components texts
+   */
+  localeText: PropTypes.object,
+
   /**
    * Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`).
    */
@@ -417,12 +393,6 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
    */
   rifmFormatter: PropTypes.func,
 
-  /**
-   * Right arrow icon aria-label text.
-   * @deprecated
-   */
-  rightArrowButtonText: PropTypes.string,
-
   /**
    * Disable specific date. @DateIOType
    * @template TDate
@@ -469,6 +439,11 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
    */
   showToolbar: 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]),
+
   /**
    * Time tab icon.
    */

package/StaticTimePicker/StaticTimePicker.d.ts

@@ -8,7 +8,7 @@ export interface StaticTimePickerSlotsComponents extends PickersStaticWrapperSlo
 }
 export interface StaticTimePickerSlotsComponentsProps extends PickersStaticWrapperSlotsComponentsProps, ClockPickerSlotsComponentsProps {
 }
-export interface StaticTimePickerProps<TInputDate, TDate> extends StaticPickerProps<BaseTimePickerProps<TInputDate, TDate>> {
+export interface StaticTimePickerProps<TInputDate, TDate> extends StaticPickerProps<TDate, BaseTimePickerProps<TInputDate, TDate>> {
     /**
      * Overrideable components.
      * @default {}

package/StaticTimePicker/StaticTimePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "className"];
+const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "localeText", "sx", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTimePickerDefaultizedProps, timePickerValueManager } from '../TimePicker/shared';
@@ -25,10 +25,12 @@ export const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTim
   const props = useTimePickerDefaultizedProps(inProps, 'MuiStaticTimePicker');
 
   const {
-    displayStaticWrapperAs = 'mobile',
+    displayStaticWrapperAs,
     ToolbarComponent = TimePickerToolbar,
     components,
     componentsProps,
+    localeText,
+    sx,
     className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -51,6 +53,8 @@ export const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTim
     displayStaticWrapperAs: displayStaticWrapperAs,
     components: components,
     componentsProps: componentsProps,
+    localeText: localeText,
+    sx: sx,
     className: className
   }, wrapperProps, {
     children: /*#__PURE__*/_jsx(CalendarOrClockPicker, _extends({}, pickerProps, {
@@ -135,29 +139,10 @@ process.env.NODE_ENV !== "production" ? StaticTimePicker.propTypes = {
 
   /**
    * Force static wrapper inner components to be rendered in mobile or desktop mode.
-   * @default 'mobile'
+   * @default "mobile"
    */
   displayStaticWrapperAs: PropTypes.oneOf(['desktop', 'mobile']),
 
-  /**
-   * 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
@@ -188,6 +173,11 @@ process.env.NODE_ENV !== "production" ? StaticTimePicker.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`).
    */
@@ -302,6 +292,11 @@ process.env.NODE_ENV !== "production" ? StaticTimePicker.propTypes = {
    */
   showToolbar: 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]),
+
   /**
    * Component that will replace default toolbar renderer.
    * @default TimePickerToolbar

package/TimePicker/TimePicker.js

@@ -136,25 +136,6 @@ process.env.NODE_ENV !== "production" ? TimePicker.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
@@ -185,6 +166,11 @@ process.env.NODE_ENV !== "production" ? TimePicker.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/YearPicker/PickersYear.d.ts

@@ -1,20 +1,21 @@
 import * as React from 'react';
 import { PickersYearClasses } from './pickersYearClasses';
 export interface PickersYearProps {
+    'aria-current'?: React.AriaAttributes['aria-current'];
     autoFocus?: boolean;
     children: React.ReactNode;
     classes?: Partial<PickersYearClasses>;
     className?: string;
     disabled?: boolean;
-    onClick: (event: React.MouseEvent, value: number) => void;
-    onKeyDown: (event: React.KeyboardEvent, value: number) => void;
+    onClick: (event: React.MouseEvent, year: number) => void;
+    onKeyDown: (event: React.KeyboardEvent, year: number) => void;
+    onFocus: (event: React.FocusEvent, year: number) => void;
+    onBlur: (event: React.FocusEvent, year: number) => void;
     selected: boolean;
     value: number;
     tabIndex: number;
-    onFocus: (event: React.FocusEvent, year: number) => void;
-    onBlur: (event: React.FocusEvent, year: number) => void;
 }
 /**
- * @ignore - internal component.
+ * @ignore - do not document.
  */
-export declare const PickersYear: React.ForwardRefExoticComponent<PickersYearProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const PickersYear: React.MemoExoticComponent<(props: PickersYearProps) => JSX.Element>;

package/YearPicker/PickersYear.js

@@ -1,9 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "children", "disabled", "onClick", "onKeyDown", "value", "tabIndex", "onFocus", "onBlur"];
+const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { useForkRef, capitalize } from '@mui/material/utils';
+import { capitalize } from '@mui/material/utils';
 import { alpha, styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
@@ -63,9 +63,16 @@ const PickersYearButton = styled('button', {
   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': {
+    cursor: 'auto',
+    pointerEvents: 'none'
+  },
   [`&.${pickersYearClasses.disabled}`]: {
     color: theme.palette.text.secondary
   },
@@ -77,61 +84,65 @@ const PickersYearButton = styled('button', {
     }
   }
 }));
-
-const noop = () => {};
 /**
  * @ignore - internal component.
  */
 
-
-export const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(props, forwardedRef) {
+const PickersYearRaw = props => {
   // TODO v6: add 'useThemeProps' once the component class names are aligned
   const {
     autoFocus,
     className,
     children,
     disabled,
-    onClick,
-    onKeyDown,
     value,
     tabIndex,
-    onFocus = noop,
-    onBlur = noop
+    onClick,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    'aria-current': ariaCurrent
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const ref = React.useRef(null);
-  const refHandle = useForkRef(ref, forwardedRef);
   const wrapperVariant = React.useContext(WrapperVariantContext);
 
   const ownerState = _extends({}, props, {
     wrapperVariant
   });
 
-  const classes = useUtilityClasses(ownerState); // TODO: Can we just forward this to the button?
+  const classes = useUtilityClasses(ownerState); // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
 
   React.useEffect(() => {
     if (autoFocus) {
-      // `ref.current` being `null` would be a bug in MUIu
+      // `ref.current` being `null` would be a bug in MUI.
       ref.current.focus();
     }
   }, [autoFocus]);
-  return /*#__PURE__*/_jsx(PickersYearRoot, {
+  return /*#__PURE__*/_jsx(PickersYearRoot, _extends({
     className: clsx(classes.root, className),
-    ownerState: ownerState,
-    children: /*#__PURE__*/_jsx(PickersYearButton, _extends({
-      ref: refHandle,
+    ownerState: ownerState
+  }, other, {
+    children: /*#__PURE__*/_jsx(PickersYearButton, {
+      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.yearButton,
-      ownerState: ownerState
-    }, other, {
+      ownerState: ownerState,
       children: children
-    }))
-  });
-});
+    })
+  }));
+};
+/**
+ * @ignore - do not document.
+ */
+
+
+export const PickersYear = /*#__PURE__*/React.memo(PickersYearRaw);

package/YearPicker/YearPicker.d.ts

@@ -1,15 +1,32 @@
 /// <reference types="react" />
-import { NonNullablePickerChangeHandler } from '../internals/hooks/useViews';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 import { YearPickerClasses } from './yearPickerClasses';
 import { BaseDateValidationProps, YearValidationProps } from '../internals/hooks/validation/models';
 export interface YearPickerProps<TDate> extends YearValidationProps<TDate>, BaseDateValidationProps<TDate> {
     autoFocus?: boolean;
+    /**
+     * className applied to the root element.
+     */
     className?: string;
+    /**
+     * Override or extend the styles applied to the component.
+     */
     classes?: Partial<YearPickerClasses>;
-    date: TDate | null;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+    value: TDate | null;
+    /** If `true` picker is disabled */
     disabled?: boolean;
-    onChange: NonNullablePickerChangeHandler<TDate>;
-    onFocusedDayChange?: (day: TDate) => void;
+    /**
+     * Callback fired when the value (the selected year) changes.
+     * @template TValue
+     * @param {TValue} value The new parsed value.
+     */
+    onChange: (value: TDate) => void;
+    /** If `true` picker is readonly */
     readOnly?: boolean;
     /**
      * If `true`, today's date is rendering without highlighting with circle.