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

package/PickersLayout/usePickerLayout.js

@@ -4,20 +4,22 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import { PickersActionBar } from "../PickersActionBar/index.js";
 import { getPickersLayoutUtilityClass } from "./pickersLayoutClasses.js";
 import { PickersShortcuts } from "../PickersShortcuts/index.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { usePickerContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function toolbarHasView(toolbarProps) {
   return toolbarProps.view !== null;
 }
 const useUtilityClasses = (classes, ownerState) => {
   const {
-    isLandscape
+    pickerOrientation
   } = ownerState;
   const slots = {
-    root: ['root', isLandscape && 'landscape'],
+    root: ['root', pickerOrientation === 'landscape' && 'landscape'],
     contentWrapper: ['contentWrapper'],
     toolbar: ['toolbar'],
     actionBar: ['actionBar'],
@@ -29,10 +31,14 @@ const useUtilityClasses = (classes, ownerState) => {
 };
 const usePickerLayout = props => {
   const {
-    ownerState: pickersOwnerState
+    ownerState: pickerOwnerState
   } = usePickerPrivateContext();
   const {
-    wrapperVariant,
+    variant,
+    orientation
+  } = usePickerContext();
+  const isRtl = useRtl();
+  const {
     onAccept,
     onClear,
     onCancel,
@@ -44,7 +50,6 @@ const usePickerLayout = props => {
     onChange,
     onSelectShortcut,
     isValid,
-    isLandscape,
     children,
     slots,
     slotProps,
@@ -54,9 +59,8 @@ const usePickerLayout = props => {
     // - For pickers value: PickerValidDate | null
     // - For range pickers value: [PickerValidDate | null, PickerValidDate | null]
   } = props;
-  const ownerState = _extends({}, pickersOwnerState, {
-    wrapperVariant,
-    isLandscape
+  const ownerState = _extends({}, pickerOwnerState, {
+    isRtl
   });
   const classes = useUtilityClasses(classesProp, ownerState);
 
@@ -70,7 +74,7 @@ const usePickerLayout = props => {
       onClear,
       onCancel,
       onSetToday,
-      actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept']
+      actions: variant === 'desktop' ? [] : ['cancel', 'accept']
     },
     className: classes.actionBar,
     ownerState
@@ -83,7 +87,8 @@ const usePickerLayout = props => {
     elementType: Toolbar,
     externalSlotProps: slotProps?.toolbar,
     additionalProps: {
-      isLandscape,
+      isLandscape: orientation === 'landscape',
+      // Will be removed in a follow up PR?
       onChange,
       value,
       view,
@@ -113,7 +118,8 @@ const usePickerLayout = props => {
     externalSlotProps: slotProps?.shortcuts,
     additionalProps: {
       isValid,
-      isLandscape,
+      isLandscape: orientation === 'landscape',
+      // Will be removed in a follow up PR?
       onChange: onSelectShortcut
     },
     className: classes.shortcuts,
@@ -125,7 +131,8 @@ const usePickerLayout = props => {
     content,
     tabs,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   };
 };
 export default usePickerLayout;

package/PickersShortcuts/PickersShortcuts.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { ListProps } from '@mui/material/List';
-interface PickersShortcutsItemGetValueParams<TValue> {
+import { PickerValidValue } from '../internals/models';
+interface PickersShortcutsItemGetValueParams<TValue extends PickerValidValue> {
     isValid: (value: TValue) => boolean;
 }
-export interface PickersShortcutsItem<TValue> {
+export interface PickersShortcutsItem<TValue extends PickerValidValue> {
     label: string;
     getValue: (params: PickersShortcutsItemGetValueParams<TValue>) => TValue;
     /**
@@ -12,9 +13,9 @@ export interface PickersShortcutsItem<TValue> {
      */
     id?: string;
 }
-export type PickersShortcutsItemContext = Omit<PickersShortcutsItem<unknown>, 'getValue'>;
+export type PickersShortcutsItemContext = Omit<PickersShortcutsItem<PickerValidValue>, 'getValue'>;
 export type PickerShortcutChangeImportance = 'set' | 'accept';
-export interface ExportedPickersShortcutProps<TValue> extends Omit<ListProps, 'onChange'> {
+export interface ExportedPickersShortcutProps<TValue extends PickerValidValue> extends Omit<ListProps, 'onChange'> {
     /**
      * Ordered array of shortcuts to display.
      * If empty, does not display the shortcuts.
@@ -29,7 +30,7 @@ export interface ExportedPickersShortcutProps<TValue> extends Omit<ListProps, 'o
      */
     changeImportance?: PickerShortcutChangeImportance;
 }
-export interface PickersShortcutsProps<TValue> extends ExportedPickersShortcutProps<TValue> {
+export interface PickersShortcutsProps<TValue extends PickerValidValue> extends ExportedPickersShortcutProps<TValue> {
     isLandscape: boolean;
     onChange: (newValue: TValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext) => void;
     isValid: (value: TValue) => boolean;
@@ -43,7 +44,7 @@ export interface PickersShortcutsProps<TValue> extends ExportedPickersShortcutPr
  *
  * - [PickersShortcuts API](https://mui.com/x/api/date-pickers/pickers-shortcuts/)
  */
-declare function PickersShortcuts<TValue>(props: PickersShortcutsProps<TValue>): React.JSX.Element | null;
+declare function PickersShortcuts<TValue extends PickerValidValue>(props: PickersShortcutsProps<TValue>): React.JSX.Element | null;
 declare namespace PickersShortcuts {
     var propTypes: any;
 }

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
 ```
 

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/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/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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-alpha.1
+ * @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/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/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.types.d.ts

@@ -1,19 +1,19 @@
 import * as React from 'react';
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
-import { InputAdornmentProps } from '@mui/material/InputAdornment';
-import TextField from '@mui/material/TextField';
-import { SlotComponentProps } from '@mui/utils';
+import type { IconButtonProps } from '@mui/material/IconButton';
+import type { InputAdornmentProps } from '@mui/material/InputAdornment';
+import type { TextFieldProps } from '@mui/material/TextField';
 import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
 import { PickersPopperSlots, PickersPopperSlotProps } from '../../components/PickersPopper';
 import { UsePickerParams } from '../usePicker';
-import { FieldSection, PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models';
+import { FieldOwnerState, PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
-import { DateOrTimeViewWithMeridiem } from '../../models';
+import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
 import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../../../hooks/useClearableField';
-export interface UseDesktopPickerSlots<TView extends DateOrTimeViewWithMeridiem> extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValidDate | null, TView>, UseClearableFieldSlots {
+import { PickersTextFieldProps } from '../../../PickersTextField';
+export interface UseDesktopPickerSlots<TView extends DateOrTimeViewWithMeridiem> extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue, TView>, UseClearableFieldSlots {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -38,13 +38,13 @@ export interface UseDesktopPickerSlots<TView extends DateOrTimeViewWithMeridiem>
      */
     openPickerIcon: React.ElementType;
 }
-export interface UseDesktopPickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValidDate | null, TView>, 'toolbar'> {
+export interface UseDesktopPickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue, TView>, 'toolbar'> {
 }
-export interface ExportedUseDesktopPickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValidDate | null, TView>, UseClearableFieldSlotProps {
-    field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
-    textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
+export interface ExportedUseDesktopPickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue, TView>, UseClearableFieldSlotProps {
+    field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
     inputAdornment?: SlotComponentPropsFromProps<InputAdornmentProps, {}, PickerOwnerState>;
-    openPickerButton?: SlotComponentProps<typeof IconButton, {}, PickerOwnerState>;
+    openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, PickerOwnerState>;
     openPickerIcon?: SlotComponentPropsFromProps<Record<string, any>, {}, PickerOwnerState>;
 }
 export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps {
@@ -54,7 +54,7 @@ export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNo
      */
     autoFocus?: boolean;
 }
-export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<PickerValidDate | null, TView, any, {}>> extends BasePickerProps<PickerValidDate | null, TView, TError, TExternalProps, {}>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
+export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<PickerValue, TView, any, {}>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps, {}>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
     /**
      * Overridable component slots.
      * @default {}
@@ -66,7 +66,7 @@ export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem,
      */
     slotProps?: UseDesktopPickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValidDate | null, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
+export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
     props: TExternalProps;
     getOpenDialogAriaText: (date: PickerValidDate | null) => string;
 }

package/internals/hooks/useField/useField.d.ts

@@ -1,5 +1,5 @@
 import { UseFieldParams, UseFieldResponse, UseFieldCommonForwardedProps, UseFieldInternalProps, UseFieldForwardedProps } from './useField.types';
-import { FieldSection } from '../../../models';
-export declare const useField: <TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, TEnableAccessibleFieldDOMStructure, any> & {
+import { PickerValidValue } from '../../models';
+export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any> & {
     minutesStep?: number;
-}>(params: UseFieldParams<TValue, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;
+}>(params: UseFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;