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

package/PickersCalendarHeader/PickersCalendarHeader.types.d.ts

@@ -3,12 +3,12 @@ import { SlotComponentProps } from '@mui/base/utils';
 import IconButton from '@mui/material/IconButton';
 import SvgIcon from '@mui/material/SvgIcon';
 import { SxProps, Theme } from '@mui/material/styles';
-import { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps } from '../internals/components/PickersArrowSwitcher';
+import { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from '../internals/components/PickersArrowSwitcher';
 import { MonthValidationOptions } from '../internals/hooks/date-helpers-hooks';
 import { DateView } from '../models/views';
 import { SlideDirection } from '../DateCalendar/PickersSlideTransition';
 import { PickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
-export interface PickersCalendarHeaderSlotsComponent extends PickersArrowSwitcherSlotsComponent {
+export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots {
     /**
      * Button displayed to switch between different calendar views.
      * @default IconButton
@@ -20,24 +20,24 @@ export interface PickersCalendarHeaderSlotsComponent extends PickersArrowSwitche
      */
     switchViewIcon?: React.ElementType;
 }
-export interface PickersCalendarHeaderComponentsPropsOverrides {
+export interface PickersCalendarHeaderSlotPropsOverrides {
 }
 export type PickersCalendarHeaderOwnerState<TDate> = PickersCalendarHeaderProps<TDate>;
-export interface PickersCalendarHeaderSlotsComponentsProps<TDate> extends PickersArrowSwitcherSlotsComponentsProps {
-    switchViewButton?: SlotComponentProps<typeof IconButton, PickersCalendarHeaderComponentsPropsOverrides, PickersCalendarHeaderOwnerState<TDate>>;
-    switchViewIcon?: SlotComponentProps<typeof SvgIcon, PickersCalendarHeaderComponentsPropsOverrides, undefined>;
+export interface PickersCalendarHeaderSlotProps<TDate> extends PickersArrowSwitcherSlotProps {
+    switchViewButton?: SlotComponentProps<typeof IconButton, PickersCalendarHeaderSlotPropsOverrides, PickersCalendarHeaderOwnerState<TDate>>;
+    switchViewIcon?: SlotComponentProps<typeof SvgIcon, PickersCalendarHeaderSlotPropsOverrides, undefined>;
 }
 export interface PickersCalendarHeaderProps<TDate> extends ExportedPickersArrowSwitcherProps, MonthValidationOptions<TDate> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: PickersCalendarHeaderSlotsComponent;
+    slots?: PickersCalendarHeaderSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: PickersCalendarHeaderSlotsComponentsProps<TDate>;
+    slotProps?: PickersCalendarHeaderSlotProps<TDate>;
     currentMonth: TDate;
     disabled?: boolean;
     views: readonly DateView[];

package/PickersCalendarHeader/index.d.ts

@@ -1,4 +1,4 @@
 export { pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
 export type { PickersCalendarHeaderClassKey, PickersCalendarHeaderClasses, } from './pickersCalendarHeaderClasses';
 export { PickersCalendarHeader } from './PickersCalendarHeader';
-export type { PickersCalendarHeaderProps, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, ExportedPickersCalendarHeaderProps, } from './PickersCalendarHeader.types';
+export type { PickersCalendarHeaderProps, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps, ExportedPickersCalendarHeaderProps, } from './PickersCalendarHeader.types';

package/PickersLayout/PickersLayout.types.d.ts

@@ -8,7 +8,7 @@ import { UsePickerLayoutPropsResponseLayoutProps } from '../internals/hooks/useP
 import { PickersLayoutClasses } from './pickersLayoutClasses';
 import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models/common';
 import { PickersShortcutsProps } from '../PickersShortcuts';
-export interface ExportedPickersLayoutSlotsComponent<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> {
+export interface ExportedPickersLayoutSlots<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> {
     /**
      * Custom component for the action bar, it is placed below the picker views.
      * @default PickersActionBar
@@ -31,7 +31,7 @@ interface PickersLayoutActionBarOwnerState<TValue, TDate, TView extends DateOrTi
 interface PickersShortcutsOwnerState<TValue> extends PickersShortcutsProps<TValue> {
     wrapperVariant: WrapperVariant;
 }
-export interface ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> {
+export interface ExportedPickersLayoutSlotProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> {
     /**
      * Props passed down to the action bar component.
      */
@@ -45,7 +45,7 @@ export interface ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView
      */
     layout?: Partial<PickersLayoutProps<TValue, TDate, TView>>;
 }
-export interface PickersLayoutSlotsComponent<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotsComponent<TValue, TDate, TView> {
+export interface PickersLayoutSlots<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<TValue, TDate, TView> {
     /**
      * Tabs enabling toggling between views.
      */
@@ -56,7 +56,7 @@ export interface PickersLayoutSlotsComponent<TValue, TDate, TView extends DateOr
      */
     toolbar?: React.JSXElementConstructor<BaseToolbarProps<TValue, TView>>;
 }
-export interface PickersLayoutSlotsComponentsProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView> {
+export interface PickersLayoutSlotProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<TValue, TDate, TView> {
     /**
      * Props passed down to the tabs component.
      */
@@ -80,12 +80,12 @@ export interface PickersLayoutProps<TValue, TDate, TView extends DateOrTimeViewW
      * Overridable component slots.
      * @default {}
      */
-    slots?: PickersLayoutSlotsComponent<TValue, TDate, TView>;
+    slots?: PickersLayoutSlots<TValue, TDate, TView>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: PickersLayoutSlotsComponentsProps<TValue, TDate, TView>;
+    slotProps?: PickersLayoutSlotProps<TValue, TDate, TView>;
 }
 export interface SubComponents {
     toolbar: React.ReactNode;

package/PickersLayout/index.d.ts

@@ -1,5 +1,5 @@
 export { PickersLayout, PickersLayoutRoot, PickersLayoutContentWrapper } from './PickersLayout';
-export type { PickersLayoutProps, PickersLayoutSlotsComponent, PickersLayoutSlotsComponentsProps, ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps, } from './PickersLayout.types';
+export type { PickersLayoutProps, PickersLayoutSlots, PickersLayoutSlotProps, ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, } from './PickersLayout.types';
 export { default as usePickerLayout } from './usePickerLayout';
 export { pickersLayoutClasses } from './pickersLayoutClasses';
 export type { PickersLayoutClassKey } from './pickersLayoutClasses';

package/StaticDatePicker/StaticDatePicker.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { useStaticPicker } from '../internals/hooks/useStaticPicker';
-import { validateDate } from '../internals';
+import { validateDate } from '../internals/utils/validation/validateDate';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 /**
  * Demos:

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 {};