@mui/x-date-pickers 8.0.0-alpha.0 → 8.0.0-alpha.2

package/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef"];
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFormControl } from '@mui/material/FormControl';
@@ -194,7 +194,9 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       readOnly,
       inputProps,
       inputRef,
-      sectionListRef
+      sectionListRef,
+      onFocus,
+      onBlur
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootRef = React.useRef(null);
@@ -206,13 +208,12 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
     throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
   }
   const handleInputFocus = event => {
-    // Fix a bug with IE11 where the focus/blur events are triggered
-    // while the component is disabled.
-    if (muiFormControl.disabled) {
-      event.stopPropagation();
-      return;
-    }
     muiFormControl.onFocus?.(event);
+    onFocus?.(event);
+  };
+  const handleInputBlur = event => {
+    muiFormControl.onBlur?.(event);
+    onBlur?.(event);
   };
   React.useEffect(() => {
     if (muiFormControl) {
@@ -254,7 +255,7 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       tabIndex: tabIndex,
       className: classes.sectionsContainer,
       onFocus: handleInputFocus,
-      onBlur: muiFormControl.onBlur,
+      onBlur: handleInputBlur,
       onInput: onInput,
       onPaste: onPaste,
       onKeyDown: onKeyDown,

package/PickersTextField/PickersTextField.js

@@ -105,8 +105,6 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
     className: clsx(classes.root, className),
     ref: handleRootRef,
     focused: focused,
-    onFocus: onFocus,
-    onBlur: onBlur,
     disabled: disabled,
     variant: variant,
     error: error,
@@ -128,6 +126,8 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       onKeyUp: onKeyUp,
       onInput: onInput,
       onPaste: onPaste,
+      onFocus: onFocus,
+      onBlur: onBlur,
       endAdornment: endAdornment,
       startAdornment: startAdornment,
       tabIndex: tabIndex,

package/README.md

@@ -20,13 +20,16 @@ The pickers currently support the following date libraries:
 - [Moment.js](https://momentjs.com/)
 
 ```bash
-// date-fns
+# date-fns
 npm install date-fns
-// or dayjs
+
+# or dayjs
 npm install dayjs
-// or luxon
+
+# or luxon
 npm install luxon
-// or moment
+
+# or moment
 npm install moment
 ```
 
@@ -35,8 +38,8 @@ This component has the following peer dependencies that you need to install as w
 ```json
 "peerDependencies": {
   "@mui/material": "^5.15.14 || ^6.0.0",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

package/TimeClock/Clock.js

@@ -222,6 +222,7 @@ export function Clock(inProps) {
       setTime(event, 'finish');
       isMoving.current = false;
     }
+    event.preventDefault();
   };
   const handleMouseMove = event => {
     // event.buttons & PRIMARY_MOUSE_BUTTON

package/TimeClock/TimeClock.js

@@ -107,6 +107,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });

package/TimeField/TimeField.js

@@ -13,6 +13,7 @@ import { useTimeField } from "./useTimeField.js";
 import { useClearableField } from "../hooks/index.js";
 import { PickersTextField } from "../PickersTextField/index.js";
 import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
+import { useFieldOwnerState } from "../internals/hooks/useFieldOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -36,7 +37,7 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, inRe
       inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = useFieldOwnerState(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
@@ -268,10 +269,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   shouldDisableTime: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/TimeField/TimeField.types.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import { MakeOptional } from '@mui/x-internals/types';
-import TextField from '@mui/material/TextField';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { MakeOptional, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { FieldSection, PickerValidDate, TimeValidationError, BuiltInFieldTextFieldProps } from '../models';
+import { TimeValidationError, BuiltInFieldTextFieldProps, FieldOwnerState } from '../models';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
 import { ExportedValidateTimeProps } from '../validation/validateTime';
 import { AmPmProps } from '../internals/models/props/time';
-export interface UseTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, ExportedValidateTimeProps, ExportedUseClearableFieldProps, AmPmProps {
+import { PickerValue } from '../internals/models';
+import { PickersTextFieldProps } from '../PickersTextField';
+export interface UseTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, ExportedValidateTimeProps, ExportedUseClearableFieldProps, AmPmProps {
 }
 export type TimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseTimeFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**
@@ -19,16 +20,15 @@ export type TimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean =
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: TimeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: TimeFieldSlotProps;
 };
-export type TimeFieldOwnerState<TEnableAccessibleFieldDOMStructure extends boolean> = TimeFieldProps<TEnableAccessibleFieldDOMStructure>;
 export interface TimeFieldSlots extends UseClearableFieldSlots {
     /**
      * Form control with an input to render the value.
-     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+     * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
      */
     textField?: React.ElementType;
 }
-export interface TimeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, TimeFieldOwnerState<TEnableAccessibleFieldDOMStructure>>;
+export interface TimeFieldSlotProps extends UseClearableFieldSlotProps {
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
 }

package/TimePicker/TimePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { DesktopTimePickerProps, DesktopTimePickerSlots, DesktopTimePickerSlotProps } from '../DesktopTimePicker';
-import { BaseSingleInputFieldProps, TimeViewWithMeridiem } from '../internals/models';
+import { BaseSingleInputFieldProps, PickerValue, TimeViewWithMeridiem } from '../internals/models';
 import { MobileTimePickerProps, MobileTimePickerSlots, MobileTimePickerSlotProps } from '../MobileTimePicker';
-import { FieldSection, PickerValidDate, TimeValidationError } from '../models';
+import { TimeValidationError } from '../models';
 import { ValidateTimeProps } from '../validation/validateTime';
 export interface TimePickerSlots extends DesktopTimePickerSlots, MobileTimePickerSlots<TimeViewWithMeridiem> {
 }
@@ -28,4 +28,4 @@ export interface TimePickerProps<TEnableAccessibleFieldDOMStructure extends bool
 /**
  * Props the field can receive when used inside a time picker (<TimePicker />, <DesktopTimePicker /> or <MobileTimePicker /> component).
  */
-export type TimePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateTimeProps & BaseSingleInputFieldProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, TimeValidationError>;
+export type TimePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateTimeProps & BaseSingleInputFieldProps<PickerValue, TEnableAccessibleFieldDOMStructure, TimeValidationError>;

package/TimePicker/TimePickerToolbar.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { TimePickerToolbarClasses } from './timePickerToolbarClasses';
-import { TimeViewWithMeridiem } from '../internals/models';
-import { PickerValidDate } from '../models';
-export interface TimePickerToolbarProps extends BaseToolbarProps<PickerValidDate | null, TimeViewWithMeridiem>, ExportedTimePickerToolbarProps {
+import { PickerValue, TimeViewWithMeridiem } from '../internals/models';
+export interface TimePickerToolbarProps extends BaseToolbarProps<PickerValue, TimeViewWithMeridiem>, ExportedTimePickerToolbarProps {
     ampm?: boolean;
     ampmInClock?: boolean;
 }

package/TimePicker/TimePickerToolbar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -18,6 +18,7 @@ import { useUtils } from "../internals/hooks/useUtils.js";
 import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from "./timePickerToolbarClasses.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
+import { usePickerContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -128,14 +129,16 @@ function TimePickerToolbar(inProps) {
       view,
       onViewChange,
       views,
-      disabled,
-      readOnly,
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
   const translations = usePickerTranslations();
   const isRtl = useRtl();
+  const {
+    disabled,
+    readOnly
+  } = usePickerContext();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
     meridiemMode,
@@ -216,12 +219,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -235,12 +232,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
-  /**
-   * If `true`, the component is read-only.
-   * When read-only, the value cannot be changed but the user can interact with the interface.
-   * @default false
-   */
-  readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/TimePicker/shared.d.ts

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { TimeClockSlots, TimeClockSlotProps } from '../TimeClock/TimeClock.types';
 import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
-import { BaseTimeValidationProps } from '../internals/models/validation';
 import { LocalizedComponent } from '../locales/utils/pickersLocaleTextApi';
 import { TimePickerToolbarProps, ExportedTimePickerToolbarProps } from './TimePickerToolbar';
-import { PickerValidDate, TimeValidationError } from '../models';
+import { TimeValidationError } from '../models';
 import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
 import { TimeViewRendererProps } from '../timeViewRenderers';
 import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/time';
-import { TimeViewWithMeridiem } from '../internals/models';
+import { PickerValue, TimeViewWithMeridiem } from '../internals/models';
+import { ValidateTimePropsToDefault } from '../validation/validateTime';
 export interface BaseTimePickerSlots extends TimeClockSlots {
     /**
      * Custom component for the toolbar rendered above the views.
@@ -20,8 +20,8 @@ export interface BaseTimePickerSlots extends TimeClockSlots {
 export interface BaseTimePickerSlotProps extends TimeClockSlotProps {
     toolbar?: ExportedTimePickerToolbarProps;
 }
-export type TimePickerViewRenderers<TView extends TimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerValidDate | null, TView, TimeViewRendererProps<TView, BaseClockProps<TView>>, TAdditionalProps>;
-export interface BaseTimePickerProps<TView extends TimeViewWithMeridiem> extends BasePickerInputProps<PickerValidDate | null, TView, TimeValidationError>, ExportedBaseClockProps {
+export type TimePickerViewRenderers<TView extends TimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerValue, TView, TimeViewRendererProps<TView, BaseClockProps<TView>>, TAdditionalProps>;
+export interface BaseTimePickerProps<TView extends TimeViewWithMeridiem> extends BasePickerInputProps<PickerValue, TView, TimeValidationError>, ExportedBaseClockProps {
     /**
      * Display ampm controls under the clock (instead of in the toolbar).
      * @default true on desktop, false on mobile
@@ -44,6 +44,6 @@ export interface BaseTimePickerProps<TView extends TimeViewWithMeridiem> extends
      */
     viewRenderers?: Partial<TimePickerViewRenderers<TView>>;
 }
-type UseTimePickerDefaultizedProps<TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TView>> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>>;
+type UseTimePickerDefaultizedProps<TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TView>> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | ValidateTimePropsToDefault>>;
 export declare function useTimePickerDefaultizedProps<TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TView>>(props: Props, name: string): UseTimePickerDefaultizedProps<TView, Props>;
 export {};

package/YearCalendar/YearCalendar.js

@@ -104,6 +104,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });

package/hooks/useParsedFormat.d.ts

@@ -1,9 +1,9 @@
 import type { UseFieldInternalProps } from '../internals/hooks/useField';
-interface UseParsedFormatParameters extends Pick<UseFieldInternalProps<any, any, any, any>, 'format' | 'formatDensity' | 'shouldRespectLeadingZeros'> {
+interface UseParsedFormatParameters extends Pick<UseFieldInternalProps<any, any, any>, 'format' | 'formatDensity' | 'shouldRespectLeadingZeros'> {
 }
 /**
  * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
- * This format is localized (e.g: `AAAA` for the year with the French locale) and cannot be parsed by your date library.
+ * This format is localized (for example `AAAA` for the year with the French locale) and cannot be parsed by your date library.
  * @param {object} The parameters needed to build the placeholder.
  * @param {string} params.format Format of the date to use.
  * @param {'dense' | 'spacious'} params.formatDensity Density of the format (setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character).

package/hooks/useParsedFormat.js

@@ -8,7 +8,7 @@ import { getLocalizedDigits } from "../internals/hooks/useField/useField.utils.j
 import { usePickerTranslations } from "./usePickerTranslations.js";
 /**
  * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
- * This format is localized (e.g: `AAAA` for the year with the French locale) and cannot be parsed by your date library.
+ * This format is localized (for example `AAAA` for the year with the French locale) and cannot be parsed by your date library.
  * @param {object} The parameters needed to build the placeholder.
  * @param {string} params.format Format of the date to use.
  * @param {'dense' | 'spacious'} params.formatDensity Density of the format (setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character).

package/hooks/useSplitFieldProps.d.ts

@@ -1,7 +1,7 @@
-import { FieldValueType } from '../models';
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from '../validation/extractValidationProps';
+import { PickerValueType } from '../models/common';
 declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator"];
-type InternalPropNames<TValueType extends FieldValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
+type InternalPropNames<TValueType extends PickerValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
 /**
  * Split the props received by the field component into:
  * - `internalProps` which are used by the various hooks called by the field component.
@@ -12,7 +12,7 @@ type InternalPropNames<TValueType extends FieldValueType> = (typeof SHARED_FIELD
  * @param {TProps} props The props received by the field component.
  * @param {TValueType} valueType The type of the field value ('date', 'time', or 'date-time').
  */
-export declare const useSplitFieldProps: <TValueType extends FieldValueType, TProps extends { [key in InternalPropNames<TValueType>]?: any; }>(props: TProps, valueType: TValueType) => {
+export declare const useSplitFieldProps: <TValueType extends PickerValueType, TProps extends { [key in InternalPropNames<TValueType>]?: any; }>(props: TProps, valueType: TValueType) => {
     forwardedProps: Omit<TProps, InternalPropNames<TValueType>>;
     internalProps: Pick<TProps, InternalPropNames<TValueType>>;
 };

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-alpha.0
+ * @mui/x-date-pickers v8.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickerProvider.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PickerOwnerState } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
+import { PickerOrientation, PickerVariant } from '../models';
 export declare const PickerContext: React.Context<PickerContextValue | null>;
 export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
 /**
@@ -32,6 +33,31 @@ export interface PickerContextValue {
      * `true` if the picker is open, `false` otherwise.
      */
     open: boolean;
+    /**
+     * `true` if the picker is disabled, `false` otherwise.
+     */
+    disabled: boolean;
+    /**
+     * `true` if the picker is read-only, `false` otherwise.
+     */
+    readOnly: boolean;
+    /**
+     * The responsive variant of the picker.
+     * Is equal to "desktop" when using a desktop picker (like <DesktopDatePicker />).
+     * Is equal to "mobile" when using a mobile picker (like <MobileDatePicker />).
+     * Is equal to "mobile" or "desktop" when using a responsive picker (like <DatePicker />) depending on the `desktopModeMediaQuery` prop.
+     * Is equal to "mobile" or "desktop" when using a static picker (like <StaticDatePicker />) depending on the `displayStaticWrapperAs` prop.
+     * Is always equal to "desktop" if the component you are accessing the ownerState from is not wrapped by a picker.
+     */
+    variant: PickerVariant;
+    /**
+     * The orientation of the picker.
+     * Is equal to "landscape" when the picker is in landscape orientation.
+     * Is equal to "portrait" when the picker is in portrait orientation.
+     * You can use the "orientation" on any picker component to force the orientation.
+     * Is always equal to "portrait" if the component you are accessing the ownerState from is not wrapped by a picker.
+     */
+    orientation: PickerOrientation;
 }
 export interface PickerPrivateContextValue {
     /**

package/internals/components/PickerProvider.js

@@ -7,7 +7,9 @@ export const PickerPrivateContext = /*#__PURE__*/React.createContext({
     isPickerDisabled: false,
     isPickerReadOnly: false,
     isPickerValueEmpty: false,
-    isPickerOpen: false
+    isPickerOpen: false,
+    pickerVariant: 'desktop',
+    pickerOrientation: 'portrait'
   }
 });
 

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId"],
+const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId", "classes"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"];
 import * as React from 'react';
@@ -13,6 +13,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import IconButton from '@mui/material/IconButton';
 import { ArrowLeftIcon, ArrowRightIcon } from "../../../icons/index.js";
 import { getPickersArrowSwitcherUtilityClass } from "./pickersArrowSwitcherClasses.js";
+import { usePickerPrivateContext } from "../../hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PickersArrowSwitcherRoot = styled('div', {
   name: 'MuiPickersArrowSwitcher',
@@ -44,10 +45,7 @@ const PickersArrowSwitcherButton = styled(IconButton, {
     }
   }]
 });
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     spacer: ['spacer'],
@@ -78,11 +76,14 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       isPreviousHidden,
       onGoToPrevious,
       previousLabel,
-      labelId
+      labelId,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
   const nextProps = {
     isDisabled: isNextDisabled,
     isHidden: isNextHidden,
@@ -108,7 +109,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       onClick: previousProps.goTo
     },
     ownerState: _extends({}, ownerState, {
-      hidden: previousProps.isHidden
+      hidden: previousProps.isHidden ?? false
     }),
     className: clsx(classes.button, classes.previousIconButton)
   });
@@ -125,7 +126,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       onClick: nextProps.goTo
     },
     ownerState: _extends({}, ownerState, {
-      hidden: nextProps.isHidden
+      hidden: nextProps.isHidden ?? false
     }),
     className: clsx(classes.button, classes.nextIconButton)
   });

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

@@ -3,6 +3,7 @@ import { SlotComponentProps } from '@mui/utils';
 import IconButton from '@mui/material/IconButton';
 import SvgIcon from '@mui/material/SvgIcon';
 import { PickersArrowSwitcherClasses } from './pickersArrowSwitcherClasses';
+import { PickerOwnerState } from '../../../models';
 export interface ExportedPickersArrowSwitcherProps {
     /**
      * Overridable component slots.
@@ -36,7 +37,12 @@ export interface PickersArrowSwitcherProps extends ExportedPickersArrowSwitcherP
     nextLabel: string;
     labelId?: string;
 }
-export type PickersArrowSwitcherOwnerState = PickersArrowSwitcherProps;
+export interface PickersArrowSwitcherOwnerState extends PickerOwnerState {
+    /**
+     * If `true`, this button should be hidden.
+     */
+    hidden: boolean;
+}
 export interface PickersArrowSwitcherSlotPropsOverrides {
 }
 export interface PickersArrowSwitcherSlots {
@@ -61,12 +67,9 @@ export interface PickersArrowSwitcherSlots {
      */
     rightArrowIcon?: React.ElementType;
 }
-export interface PickersArrowSwitcherButtonSlotOwnerState extends PickersArrowSwitcherOwnerState {
-    hidden?: boolean;
-}
 export interface PickersArrowSwitcherSlotProps {
-    previousIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
-    nextIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
-    leftArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
-    rightArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
+    previousIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherOwnerState>;
+    nextIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherOwnerState>;
+    leftArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, PickerOwnerState>;
+    rightArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, PickerOwnerState>;
 }

package/internals/components/PickersToolbar.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { BaseToolbarProps } from '../models/props/toolbar';
 import { PickersToolbarClasses } from './pickersToolbarClasses';
-import { DateOrTimeViewWithMeridiem } from '../models';
-export interface PickersToolbarProps<TValue, TView extends DateOrTimeViewWithMeridiem> extends Pick<BaseToolbarProps<TValue, TView>, 'isLandscape' | 'hidden' | 'titleId'> {
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../models';
+export interface PickersToolbarProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends Pick<BaseToolbarProps<TValue, TView>, 'isLandscape' | 'hidden' | 'titleId'> {
     className?: string;
     landscapeDirection?: 'row' | 'column';
     toolbarTitle: React.ReactNode;
     classes?: Partial<PickersToolbarClasses>;
 }
-type PickersToolbarComponent = (<TValue, TView extends DateOrTimeViewWithMeridiem>(props: React.PropsWithChildren<PickersToolbarProps<TValue, TView>> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type PickersToolbarComponent = (<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem>(props: React.PropsWithChildren<PickersToolbarProps<TValue, TView>> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 export declare const PickersToolbar: PickersToolbarComponent;

package/internals/components/PickersToolbar.js

@@ -10,13 +10,11 @@ import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
-    classes,
-    isLandscape
+    classes
   } = ownerState;
   const slots = {
     root: ['root'],
-    content: ['content'],
-    penIconButton: ['penIconButton', isLandscape && 'penIconButtonLandscape']
+    content: ['content']
   };
   return composeClasses(slots, getPickersToolbarUtilityClass, classes);
 };

package/internals/hooks/useClockReferenceDate.d.ts

@@ -1,6 +1,7 @@
 import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../../models';
+import { PickerValue } from '../models';
 export declare const useClockReferenceDate: <TProps extends {}>({ value, referenceDate: referenceDateProp, utils, props, timezone, }: {
-    value: PickerValidDate;
+    value: PickerValue;
     referenceDate: PickerValidDate | undefined;
     utils: MuiPickersAdapter;
     props: TProps;

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -67,7 +67,7 @@ export const useDesktopPicker = _ref => {
     localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'desktop'
+    variant: 'desktop'
   }));
   const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;
   const _useSlotProps = useSlotProps({