@mui/x-date-pickers 7.0.0-alpha.4 → 7.0.0-alpha.6

package/StaticDatePicker/StaticDatePicker.types.d.ts

@@ -1,20 +1,20 @@
-import { BaseDatePickerProps, BaseDatePickerSlotsComponent, BaseDatePickerSlotsComponentsProps } from '../DatePicker/shared';
-import { StaticOnlyPickerProps, UseStaticPickerSlotsComponent, UseStaticPickerSlotsComponentsProps } from '../internals/hooks/useStaticPicker';
-import { MakeOptional } from '../internals';
+import { BaseDatePickerProps, BaseDatePickerSlots, BaseDatePickerSlotProps } from '../DatePicker/shared';
+import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from '../internals/hooks/useStaticPicker';
+import { MakeOptional } from '../internals/models/helpers';
 import { DateView } from '../models';
-export interface StaticDatePickerSlotsComponent<TDate> extends BaseDatePickerSlotsComponent<TDate>, UseStaticPickerSlotsComponent<TDate, DateView> {
+export interface StaticDatePickerSlots<TDate> extends BaseDatePickerSlots<TDate>, UseStaticPickerSlots<TDate, DateView> {
 }
-export interface StaticDatePickerSlotsComponentsProps<TDate> extends BaseDatePickerSlotsComponentsProps<TDate>, UseStaticPickerSlotsComponentsProps<TDate, DateView> {
+export interface StaticDatePickerSlotProps<TDate> extends BaseDatePickerSlotProps<TDate>, UseStaticPickerSlotProps<TDate, DateView> {
 }
 export interface StaticDatePickerProps<TDate> extends BaseDatePickerProps<TDate>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: StaticDatePickerSlotsComponent<TDate>;
+    slots?: StaticDatePickerSlots<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: StaticDatePickerSlotsComponentsProps<TDate>;
+    slotProps?: StaticDatePickerSlotProps<TDate>;
 }

package/StaticDatePicker/index.d.ts

@@ -1,2 +1,2 @@
 export { StaticDatePicker } from './StaticDatePicker';
-export type { StaticDatePickerProps, StaticDatePickerSlotsComponent, StaticDatePickerSlotsComponentsProps, } from './StaticDatePicker.types';
+export type { StaticDatePickerProps, StaticDatePickerSlots, StaticDatePickerSlotProps, } from './StaticDatePicker.types';

package/StaticDateTimePicker/StaticDateTimePicker.types.d.ts

@@ -1,20 +1,20 @@
-import { BaseDateTimePickerProps, BaseDateTimePickerSlotsComponent, BaseDateTimePickerSlotsComponentsProps } from '../DateTimePicker/shared';
-import { StaticOnlyPickerProps, UseStaticPickerSlotsComponent, UseStaticPickerSlotsComponentsProps } from '../internals/hooks/useStaticPicker';
-import { MakeOptional } from '../internals';
+import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from '../DateTimePicker/shared';
+import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from '../internals/hooks/useStaticPicker';
+import { MakeOptional } from '../internals/models/helpers';
 import { DateOrTimeView } from '../models';
-export interface StaticDateTimePickerSlotsComponent<TDate> extends BaseDateTimePickerSlotsComponent<TDate>, UseStaticPickerSlotsComponent<TDate, DateOrTimeView> {
+export interface StaticDateTimePickerSlots<TDate> extends BaseDateTimePickerSlots<TDate>, UseStaticPickerSlots<TDate, DateOrTimeView> {
 }
-export interface StaticDateTimePickerSlotsComponentsProps<TDate> extends BaseDateTimePickerSlotsComponentsProps<TDate>, UseStaticPickerSlotsComponentsProps<TDate, DateOrTimeView> {
+export interface StaticDateTimePickerSlotProps<TDate> extends BaseDateTimePickerSlotProps<TDate>, UseStaticPickerSlotProps<TDate, DateOrTimeView> {
 }
 export interface StaticDateTimePickerProps<TDate> extends BaseDateTimePickerProps<TDate, DateOrTimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: StaticDateTimePickerSlotsComponent<TDate>;
+    slots?: StaticDateTimePickerSlots<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: StaticDateTimePickerSlotsComponentsProps<TDate>;
+    slotProps?: StaticDateTimePickerSlotProps<TDate>;
 }

package/StaticDateTimePicker/index.d.ts

@@ -1,2 +1,2 @@
 export { StaticDateTimePicker } from './StaticDateTimePicker';
-export type { StaticDateTimePickerProps, StaticDateTimePickerSlotsComponent, StaticDateTimePickerSlotsComponentsProps, } from './StaticDateTimePicker.types';
+export type { StaticDateTimePickerProps, StaticDateTimePickerSlots, StaticDateTimePickerSlotProps, } from './StaticDateTimePicker.types';

package/StaticTimePicker/StaticTimePicker.types.d.ts

@@ -1,20 +1,20 @@
-import { BaseTimePickerProps, BaseTimePickerSlotsComponent, BaseTimePickerSlotsComponentsProps } from '../TimePicker/shared';
-import { StaticOnlyPickerProps, UseStaticPickerSlotsComponent, UseStaticPickerSlotsComponentsProps } from '../internals/hooks/useStaticPicker';
-import { MakeOptional } from '../internals';
+import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } from '../TimePicker/shared';
+import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from '../internals/hooks/useStaticPicker';
+import { MakeOptional } from '../internals/models/helpers';
 import { TimeView } from '../models';
-export interface StaticTimePickerSlotsComponent<TDate> extends BaseTimePickerSlotsComponent<TDate>, UseStaticPickerSlotsComponent<TDate, TimeView> {
+export interface StaticTimePickerSlots<TDate> extends BaseTimePickerSlots<TDate>, UseStaticPickerSlots<TDate, TimeView> {
 }
-export interface StaticTimePickerSlotsComponentsProps<TDate> extends BaseTimePickerSlotsComponentsProps, UseStaticPickerSlotsComponentsProps<TDate, TimeView> {
+export interface StaticTimePickerSlotProps<TDate> extends BaseTimePickerSlotProps, UseStaticPickerSlotProps<TDate, TimeView> {
 }
 export interface StaticTimePickerProps<TDate> extends BaseTimePickerProps<TDate, TimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: StaticTimePickerSlotsComponent<TDate>;
+    slots?: StaticTimePickerSlots<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: StaticTimePickerSlotsComponentsProps<TDate>;
+    slotProps?: StaticTimePickerSlotProps<TDate>;
 }

package/StaticTimePicker/index.d.ts

@@ -1,2 +1,2 @@
 export { StaticTimePicker } from './StaticTimePicker';
-export type { StaticTimePickerProps, StaticTimePickerSlotsComponent, StaticTimePickerSlotsComponentsProps, } from './StaticTimePicker.types';
+export type { StaticTimePickerProps, StaticTimePickerSlots, StaticTimePickerSlotProps, } from './StaticTimePicker.types';

package/TimeClock/TimeClock.types.d.ts

@@ -1,5 +1,5 @@
 import { TimeClockClasses } from './timeClockClasses';
-import { PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps } from '../internals/components/PickersArrowSwitcher';
+import { PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from '../internals/components/PickersArrowSwitcher';
 import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock';
 import { TimeView } from '../models';
 import { TimeViewWithMeridiem } from '../internals/models';
@@ -10,9 +10,9 @@ export interface ExportedTimeClockProps<TDate> extends ExportedBaseClockProps<TD
      */
     ampmInClock?: boolean;
 }
-export interface TimeClockSlotsComponent extends PickersArrowSwitcherSlotsComponent {
+export interface TimeClockSlots extends PickersArrowSwitcherSlots {
 }
-export interface TimeClockSlotsComponentsProps extends PickersArrowSwitcherSlotsComponentsProps {
+export interface TimeClockSlotProps extends PickersArrowSwitcherSlotProps {
 }
 export interface TimeClockProps<TDate, TView extends TimeViewWithMeridiem = TimeView> extends ExportedTimeClockProps<TDate>, BaseClockProps<TDate, TView> {
     /**
@@ -23,11 +23,11 @@ export interface TimeClockProps<TDate, TView extends TimeViewWithMeridiem = Time
      * Overridable component slots.
      * @default {}
      */
-    slots?: TimeClockSlotsComponent;
+    slots?: TimeClockSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: TimeClockSlotsComponentsProps;
+    slotProps?: TimeClockSlotProps;
     showViewSwitcher?: boolean;
 }

package/TimeClock/index.d.ts

@@ -1,5 +1,5 @@
 export { TimeClock } from './TimeClock';
-export type { TimeClockProps, TimeClockSlotsComponent, TimeClockSlotsComponentsProps, } from './TimeClock.types';
+export type { TimeClockProps, TimeClockSlots, TimeClockSlotProps } from './TimeClock.types';
 export { clockClasses } from './clockClasses';
 export type { ClockClasses, ClockClassKey } from './clockClasses';
 export type { ClockProps } from './Clock';

package/TimeField/TimeField.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "InputProps", "inputProps"],
-  _excluded2 = ["inputRef"],
-  _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly", "clearable", "onClear"];
+const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
@@ -11,6 +9,7 @@ import { useSlotProps } from '@mui/base/utils';
 import { refType } from '@mui/utils';
 import { useTimeField } from './useTimeField';
 import { useClearableField } from '../hooks';
+import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -22,7 +21,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * - [TimeField API](https://mui.com/x/api/date-pickers/time-field/)
  */
-const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref) {
+const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, inRef) {
   var _slots$textField;
   const themeProps = useThemeProps({
     props: inProps,
@@ -37,58 +36,26 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref)
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
   const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : MuiTextField;
-  const _useSlotProps = useSlotProps({
-      elementType: TextField,
-      externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
-      externalForwardedProps: other,
-      ownerState
-    }),
-    {
-      inputRef: externalInputRef
-    } = _useSlotProps,
-    textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+  const textFieldProps = useSlotProps({
+    elementType: TextField,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalForwardedProps: other,
+    ownerState,
+    additionalProps: {
+      ref: inRef
+    }
+  });
 
   // TODO: Remove when mui/material-ui#35088 will be merged
   textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
   textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
-  const _useTimeField = useTimeField({
-      props: textFieldProps,
-      inputRef: externalInputRef
-    }),
-    {
-      ref: inputRef,
-      onPaste,
-      onKeyDown,
-      inputMode,
-      readOnly,
-      clearable,
-      onClear
-    } = _useTimeField,
-    fieldProps = _objectWithoutPropertiesLoose(_useTimeField, _excluded3);
-  const {
-    InputProps: ProcessedInputProps,
-    fieldProps: processedFieldProps
-  } = useClearableField({
-    onClear,
-    clearable,
-    fieldProps,
-    InputProps: fieldProps.InputProps,
+  const fieldResponse = useTimeField(textFieldProps);
+  const convertedFieldResponse = convertFieldResponseIntoMuiTextFieldProps(fieldResponse);
+  const processedFieldProps = useClearableField(_extends({}, convertedFieldResponse, {
     slots,
     slotProps
-  });
-  return /*#__PURE__*/_jsx(TextField, _extends({
-    ref: ref
-  }, processedFieldProps, {
-    InputProps: _extends({}, ProcessedInputProps, {
-      readOnly
-    }),
-    inputProps: _extends({}, fieldProps.inputProps, {
-      inputMode,
-      onPaste,
-      onKeyDown,
-      ref: inputRef
-    })
   }));
+  return /*#__PURE__*/_jsx(TextField, _extends({}, processedFieldProps));
 });
 process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -283,7 +250,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

package/TimeField/TimeField.types.d.ts

@@ -6,11 +6,7 @@ import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
 import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation';
 import { FieldsTextFieldProps } from '../internals/models/fields';
 import { FieldSection, TimeValidationError } from '../models';
-import { FieldSlotsComponents, FieldSlotsComponentsProps } from '../internals';
-export interface UseTimeFieldParams<TDate, TChildProps extends {}> {
-    props: UseTimeFieldComponentProps<TDate, TChildProps>;
-    inputRef?: React.Ref<HTMLInputElement>;
-}
+import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
 export interface UseTimeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, TimeValidationError>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps {
     /**
      * 12h/24h view for hour selection clock.
@@ -25,15 +21,15 @@ export interface TimeFieldProps<TDate> extends UseTimeFieldComponentProps<TDate,
      * Overridable component slots.
      * @default {}
      */
-    slots?: TimeFieldSlotsComponent;
+    slots?: TimeFieldSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: TimeFieldSlotsComponentsProps<TDate>;
+    slotProps?: TimeFieldSlotProps<TDate>;
 }
 export type TimeFieldOwnerState<TDate> = TimeFieldProps<TDate>;
-export interface TimeFieldSlotsComponent extends FieldSlotsComponents {
+export interface TimeFieldSlots extends UseClearableFieldSlots {
     /**
      * Form control with an input to render the value.
      * Receives the same props as `@mui/material/TextField`.
@@ -41,6 +37,6 @@ export interface TimeFieldSlotsComponent extends FieldSlotsComponents {
      */
     textField?: React.ElementType;
 }
-export interface TimeFieldSlotsComponentsProps<TDate> extends FieldSlotsComponentsProps {
+export interface TimeFieldSlotProps<TDate> extends UseClearableFieldSlotProps {
     textField?: SlotComponentProps<typeof TextField, {}, TimeFieldOwnerState<TDate>>;
 }

package/TimeField/useTimeField.d.ts

@@ -1,2 +1,2 @@
-import { UseTimeFieldProps, UseTimeFieldParams } from './TimeField.types';
-export declare const useTimeField: <TDate, TChildProps extends {}>({ props: inProps, inputRef, }: UseTimeFieldParams<TDate, TChildProps>) => import("../internals/hooks/useField").UseFieldResponse<Omit<TChildProps & Omit<UseTimeFieldProps<TDate>, "format" | keyof import("../internals").BaseTimeValidationProps> & Required<Pick<UseTimeFieldProps<TDate>, "format" | keyof import("../internals").BaseTimeValidationProps>>, keyof UseTimeFieldProps<any>>>;
+import { UseTimeFieldProps, UseTimeFieldComponentProps } from './TimeField.types';
+export declare const useTimeField: <TDate, TChildProps extends {}>(inProps: UseTimeFieldComponentProps<TDate, TChildProps>) => import("../internals/hooks/useField").UseFieldResponse<Omit<TChildProps & Omit<UseTimeFieldProps<TDate>, "format" | keyof import("../internals").BaseTimeValidationProps> & Required<Pick<UseTimeFieldProps<TDate>, "format" | keyof import("../internals").BaseTimeValidationProps>>, keyof UseTimeFieldProps<any>>>;

package/TimeField/useTimeField.js

@@ -15,17 +15,13 @@ const useDefaultizedTimeField = props => {
     format: (_props$format = props.format) != null ? _props$format : defaultFormat
   });
 };
-export const useTimeField = ({
-  props: inProps,
-  inputRef
-}) => {
+export const useTimeField = inProps => {
   const props = useDefaultizedTimeField(inProps);
   const {
     forwardedProps,
     internalProps
   } = splitFieldInternalAndForwardedProps(props, 'time');
   return useField({
-    inputRef,
     forwardedProps,
     internalProps,
     valueManager: singleItemValueManager,

package/TimePicker/TimePicker.js

@@ -149,6 +149,10 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * @default 1
    */
   minutesStep: PropTypes.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -229,7 +233,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

package/TimePicker/TimePicker.types.d.ts

@@ -1,9 +1,9 @@
-import { DesktopTimePickerProps, DesktopTimePickerSlotsComponent, DesktopTimePickerSlotsComponentsProps } from '../DesktopTimePicker';
+import { DesktopTimePickerProps, DesktopTimePickerSlots, DesktopTimePickerSlotProps } from '../DesktopTimePicker';
 import { TimeViewWithMeridiem } from '../internals/models';
-import { MobileTimePickerProps, MobileTimePickerSlotsComponent, MobileTimePickerSlotsComponentsProps } from '../MobileTimePicker';
-export interface TimePickerSlotsComponents<TDate> extends DesktopTimePickerSlotsComponent<TDate>, MobileTimePickerSlotsComponent<TDate, TimeViewWithMeridiem> {
+import { MobileTimePickerProps, MobileTimePickerSlots, MobileTimePickerSlotProps } from '../MobileTimePicker';
+export interface TimePickerSlots<TDate> extends DesktopTimePickerSlots<TDate>, MobileTimePickerSlots<TDate, TimeViewWithMeridiem> {
 }
-export interface TimePickerSlotsComponentsProps<TDate> extends DesktopTimePickerSlotsComponentsProps<TDate>, MobileTimePickerSlotsComponentsProps<TDate, TimeViewWithMeridiem> {
+export interface TimePickerSlotProps<TDate> extends DesktopTimePickerSlotProps<TDate>, MobileTimePickerSlotProps<TDate, TimeViewWithMeridiem> {
 }
 export interface TimePickerProps<TDate> extends DesktopTimePickerProps<TDate>, Omit<MobileTimePickerProps<TDate, TimeViewWithMeridiem>, 'views'> {
     /**
@@ -16,10 +16,10 @@ export interface TimePickerProps<TDate> extends DesktopTimePickerProps<TDate>, O
      * Overridable component slots.
      * @default {}
      */
-    slots?: TimePickerSlotsComponents<TDate>;
+    slots?: TimePickerSlots<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: TimePickerSlotsComponentsProps<TDate>;
+    slotProps?: TimePickerSlotProps<TDate>;
 }

package/TimePicker/index.d.ts

@@ -1,5 +1,5 @@
 export { TimePicker } from './TimePicker';
-export type { TimePickerProps, TimePickerSlotsComponents, TimePickerSlotsComponentsProps, } from './TimePicker.types';
+export type { TimePickerProps, TimePickerSlots, TimePickerSlotProps } from './TimePicker.types';
 export { TimePickerToolbar } from './TimePickerToolbar';
 export type { TimePickerToolbarProps } from './TimePickerToolbar';
 export { timePickerToolbarClasses } from './timePickerToolbarClasses';

package/TimePicker/shared.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DefaultizedProps } from '../internals/models/helpers';
-import { TimeClockSlotsComponent, TimeClockSlotsComponentsProps } from '../TimeClock/TimeClock.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';
@@ -10,14 +10,14 @@ import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePicker
 import { TimeViewRendererProps } from '../timeViewRenderers';
 import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock';
 import { TimeViewWithMeridiem } from '../internals/models';
-export interface BaseTimePickerSlotsComponent<TDate> extends TimeClockSlotsComponent {
+export interface BaseTimePickerSlots<TDate> extends TimeClockSlots {
     /**
      * Custom component for the toolbar rendered above the views.
      * @default TimePickerToolbar
      */
     toolbar?: React.JSXElementConstructor<TimePickerToolbarProps<TDate>>;
 }
-export interface BaseTimePickerSlotsComponentsProps extends TimeClockSlotsComponentsProps {
+export interface BaseTimePickerSlotProps extends TimeClockSlotProps {
     toolbar?: ExportedTimePickerToolbarProps;
 }
 export interface BaseTimePickerProps<TDate, TView extends TimeViewWithMeridiem> extends BasePickerInputProps<TDate | null, TDate, TView, TimeValidationError>, ExportedBaseClockProps<TDate> {
@@ -30,12 +30,12 @@ export interface BaseTimePickerProps<TDate, TView extends TimeViewWithMeridiem>
      * Overridable component slots.
      * @default {}
      */
-    slots?: BaseTimePickerSlotsComponent<TDate>;
+    slots?: BaseTimePickerSlots<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: BaseTimePickerSlotsComponentsProps;
+    slotProps?: BaseTimePickerSlotProps;
     /**
      * Define custom view renderers for each section.
      * If `null`, the section will only have field editing.

package/hooks/index.d.ts

@@ -1 +1,2 @@
 export { useClearableField } from './useClearableField';
+export type { UseClearableFieldSlots, UseClearableFieldSlotProps } from './useClearableField';

package/hooks/useClearableField.d.ts

@@ -1,23 +1,35 @@
 import * as React from 'react';
-import { FieldSlotsComponents, FieldSlotsComponentsProps, FieldsTextFieldProps } from '../internals';
-type UseClearableFieldProps<TFieldProps extends FieldsTextFieldProps, TInputProps extends {
-    endAdornment?: React.ReactNode;
-} | undefined, TFieldSlots extends FieldSlotsComponents, TFieldSlotsComponentsProps extends FieldSlotsComponentsProps> = {
-    clearable: boolean;
-    fieldProps: TFieldProps;
-    InputProps: TInputProps;
-    onClear: React.MouseEventHandler<HTMLButtonElement>;
-    slots?: {
-        [K in keyof TFieldSlots as Uncapitalize<K & string>]: TFieldSlots[K];
+import { SlotComponentProps } from '@mui/base/utils';
+import MuiIconButton from '@mui/material/IconButton';
+import { SxProps } from '@mui/system';
+import { ClearIcon } from '../icons';
+export interface ExportedUseClearableFieldProps {
+    clearable?: boolean;
+    onClear?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export interface UseClearableFieldSlots {
+    /**
+     * Icon to display inside the clear button.
+     * @default ClearIcon
+     */
+    clearIcon?: React.ElementType;
+    /**
+     * Button to clear the value.
+     * @default IconButton
+     */
+    clearButton?: React.ElementType;
+}
+export interface UseClearableFieldSlotProps {
+    clearIcon?: SlotComponentProps<typeof ClearIcon, {}, {}>;
+    clearButton?: SlotComponentProps<typeof MuiIconButton, {}, {}>;
+}
+interface UseClearableFieldProps extends ExportedUseClearableFieldProps {
+    InputProps?: {
+        endAdornment?: React.ReactNode;
     };
-    slotProps?: TFieldSlotsComponentsProps;
-};
-export declare const useClearableField: <TFieldProps extends FieldsTextFieldProps, TInputProps extends {
-    endAdornment?: React.ReactNode;
-} | undefined, TFieldSlotsComponents extends FieldSlotsComponents, TFieldSlotsComponentsProps extends FieldSlotsComponentsProps>({ clearable, fieldProps: forwardedFieldProps, InputProps: ForwardedInputProps, onClear, slots, slotProps, }: UseClearableFieldProps<TFieldProps, TInputProps, TFieldSlotsComponents, TFieldSlotsComponentsProps>) => {
-    InputProps: TInputProps & {
-        endAdornment: string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
-    };
-    fieldProps: TFieldProps;
-};
+    sx?: SxProps<any>;
+    slots?: UseClearableFieldSlots;
+    slotProps?: UseClearableFieldSlotProps;
+}
+export declare const useClearableField: <TFieldProps extends UseClearableFieldProps>(props: TFieldProps) => Omit<TFieldProps, "slotProps" | "slots" | "onClear" | "clearable">;
 export {};

package/hooks/useClearableField.js

@@ -1,24 +1,27 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ownerState"];
+const _excluded = ["clearable", "onClear", "InputProps", "sx", "slots", "slotProps"],
+  _excluded2 = ["ownerState"];
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import MuiIconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import { ClearIcon } from '../icons';
-import { useLocaleText } from '../internals';
+import { useLocaleText } from '../internals/hooks/useUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const useClearableField = ({
-  clearable,
-  fieldProps: forwardedFieldProps,
-  InputProps: ForwardedInputProps,
-  onClear,
-  slots,
-  slotProps
-}) => {
+export const useClearableField = props => {
   var _slots$clearButton, _slots$clearIcon;
   const localeText = useLocaleText();
+  const {
+      clearable,
+      onClear,
+      InputProps,
+      sx,
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const IconButton = (_slots$clearButton = slots == null ? void 0 : slots.clearButton) != null ? _slots$clearButton : MuiIconButton;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps = useSlotProps({
@@ -30,30 +33,30 @@ export const useClearableField = ({
         title: localeText.fieldClearLabel
       }
     }),
-    iconButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
+    iconButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const EndClearIcon = (_slots$clearIcon = slots == null ? void 0 : slots.clearIcon) != null ? _slots$clearIcon : ClearIcon;
   const endClearIconProps = useSlotProps({
     elementType: EndClearIcon,
     externalSlotProps: slotProps == null ? void 0 : slotProps.clearIcon,
     ownerState: {}
   });
-  const InputProps = _extends({}, ForwardedInputProps, {
-    endAdornment: clearable ? /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx(InputAdornment, {
-        position: "end",
-        sx: {
-          marginRight: ForwardedInputProps != null && ForwardedInputProps.endAdornment ? -1 : -1.5
-        },
-        children: /*#__PURE__*/_jsx(IconButton, _extends({}, iconButtonProps, {
-          onClick: onClear,
-          children: /*#__PURE__*/_jsx(EndClearIcon, _extends({
-            fontSize: "small"
-          }, endClearIconProps))
-        }))
-      }), ForwardedInputProps == null ? void 0 : ForwardedInputProps.endAdornment]
-    }) : ForwardedInputProps == null ? void 0 : ForwardedInputProps.endAdornment
-  });
-  const fieldProps = _extends({}, forwardedFieldProps, {
+  return _extends({}, other, {
+    InputProps: _extends({}, InputProps, {
+      endAdornment: clearable ? /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(InputAdornment, {
+          position: "end",
+          sx: {
+            marginRight: InputProps != null && InputProps.endAdornment ? -1 : -1.5
+          },
+          children: /*#__PURE__*/_jsx(IconButton, _extends({}, iconButtonProps, {
+            onClick: onClear,
+            children: /*#__PURE__*/_jsx(EndClearIcon, _extends({
+              fontSize: "small"
+            }, endClearIconProps))
+          }))
+        }), InputProps == null ? void 0 : InputProps.endAdornment]
+      }) : InputProps == null ? void 0 : InputProps.endAdornment
+    }),
     sx: [{
       '& .clearButton': {
         opacity: 1
@@ -68,10 +71,6 @@ export const useClearableField = ({
           }
         }
       }
-    }, ...(Array.isArray(forwardedFieldProps.sx) ? forwardedFieldProps.sx : [forwardedFieldProps.sx])]
+    }, ...(Array.isArray(sx) ? sx : [sx])]
   });
-  return {
-    InputProps,
-    fieldProps
-  };
 };

package/index.d.ts

@@ -29,6 +29,7 @@ export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
 export * from './PickersCalendarHeader';
+export * from './PickersSectionList';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';
 export * from './icons';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-alpha.4
+ * @mui/x-date-pickers v7.0.0-alpha.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -49,6 +49,9 @@ export * from './PickersShortcuts';
 
 // Other slots
 export * from './PickersCalendarHeader';
+
+// Field utilities
+export * from './PickersSectionList';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';
 export * from './icons';