@mui/x-date-pickers 7.0.0-beta.1 → 7.0.0-beta.4

package/internals/hooks/usePicker/usePickerValue.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_useControlled as useControlled } from '@mui/utils';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useOpenState } from '../useOpenState';
 import { useLocalizationContext, useUtils } from '../useUtils';
@@ -123,8 +122,6 @@ export const usePickerValue = ({
     value: inValue,
     defaultValue: inDefaultValue,
     closeOnSelect = wrapperVariant === 'desktop',
-    selectedSections: selectedSectionsProp,
-    onSelectedSectionsChange,
     timezone: timezoneProp
   } = props;
   const {
@@ -151,12 +148,6 @@ export const usePickerValue = ({
 
   const utils = useUtils();
   const adapter = useLocalizationContext();
-  const [selectedSections, setSelectedSections] = useControlled({
-    controlled: selectedSectionsProp,
-    default: null,
-    name: 'usePickerValue',
-    state: 'selectedSections'
-  });
   const {
     isOpen,
     setIsOpen
@@ -297,10 +288,6 @@ export const usePickerValue = ({
     value: newValue,
     context
   }));
-  const handleFieldSelectedSectionsChange = useEventCallback(newSelectedSections => {
-    setSelectedSections(newSelectedSections);
-    onSelectedSectionsChange == null || onSelectedSectionsChange(newSelectedSections);
-  });
   const actions = {
     onClear: handleClear,
     onAccept: handleAccept,
@@ -312,17 +299,14 @@ export const usePickerValue = ({
   };
   const fieldResponse = {
     value: dateState.draft,
-    onChange: handleChangeFromField,
-    selectedSections,
-    onSelectedSectionsChange: handleFieldSelectedSectionsChange
+    onChange: handleChangeFromField
   };
   const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
   const viewResponse = {
     value: viewValue,
     onChange: handleChange,
     onClose: handleClose,
-    open: isOpen,
-    onSelectedSectionsChange: handleFieldSelectedSectionsChange
+    open: isOpen
   };
   const isValid = testedValue => {
     const error = validator({

package/internals/hooks/usePicker/usePickerValue.types.d.ts

@@ -2,10 +2,10 @@ import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
 import { InferError, Validator } from '../useValidation';
 import { UseFieldValidationProps } from '../useField/useField.types';
 import { WrapperVariant } from '../../models/common';
-import { FieldSection, FieldSelectedSections, FieldValueType, TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext } from '../../../models';
+import { FieldSection, FieldValueType, TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, PickerValidDate } from '../../../models';
 import { GetDefaultReferenceDateProps } from '../../utils/getDefaultReferenceDate';
 import { PickerShortcutChangeImportance, PickersShortcutsItemContext } from '../../../PickersShortcuts';
-export interface PickerValueManager<TValue, TDate, TError> {
+export interface PickerValueManager<TValue, TDate extends PickerValidDate, TError> {
     /**
      * Determines if two values are equal.
      * @template TDate, TValue
@@ -209,7 +209,7 @@ export interface UsePickerValueBaseProps<TValue, TError> {
 /**
  * Props used to handle the value of non-static pickers.
  */
-export interface UsePickerValueNonStaticProps<TValue, TSection extends FieldSection> extends Pick<UseFieldInternalProps<TValue, unknown, TSection, unknown>, 'selectedSections' | 'onSelectedSectionsChange'> {
+export interface UsePickerValueNonStaticProps {
     /**
      * If `true`, the popover or modal will close after submitting the full date.
      * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
@@ -234,9 +234,9 @@ export interface UsePickerValueNonStaticProps<TValue, TSection extends FieldSect
 /**
  * Props used to handle the value of the pickers.
  */
-export interface UsePickerValueProps<TValue, TSection extends FieldSection, TError> extends UsePickerValueBaseProps<TValue, TError>, UsePickerValueNonStaticProps<TValue, TSection>, TimezoneProps {
+export interface UsePickerValueProps<TValue, TError> extends UsePickerValueBaseProps<TValue, TError>, UsePickerValueNonStaticProps, TimezoneProps {
 }
-export interface UsePickerValueParams<TValue, TDate, TSection extends FieldSection, TExternalProps extends UsePickerValueProps<TValue, TSection, any>> {
+export interface UsePickerValueParams<TValue, TDate extends PickerValidDate, TExternalProps extends UsePickerValueProps<TValue, any>> {
     props: TExternalProps;
     valueManager: PickerValueManager<TValue, TDate, InferError<TExternalProps>>;
     valueType: FieldValueType;
@@ -252,7 +252,7 @@ export interface UsePickerValueActions {
     onOpen: () => void;
     onClose: () => void;
 }
-export type UsePickerValueFieldResponse<TValue, TSection extends FieldSection, TError> = Required<Pick<UseFieldInternalProps<TValue, unknown, TSection, TError>, 'value' | 'onChange' | 'selectedSections' | 'onSelectedSectionsChange'>>;
+export type UsePickerValueFieldResponse<TValue, TSection extends FieldSection, TError> = Required<Pick<UseFieldInternalProps<TValue, PickerValidDate, TSection, any, TError>, 'value' | 'onChange'>>;
 /**
  * Props passed to `usePickerViews`.
  */
@@ -261,7 +261,6 @@ export interface UsePickerValueViewsResponse<TValue> {
     onChange: (value: TValue, selectionState?: PickerSelectionState) => void;
     open: boolean;
     onClose: () => void;
-    onSelectedSectionsChange: (newValue: FieldSelectedSections) => void;
 }
 /**
  * Props passed to `usePickerLayoutProps`.

package/internals/hooks/usePicker/usePickerViews.d.ts

@@ -4,7 +4,7 @@ import { Theme } from '@mui/material/styles';
 import { UseViewsOptions } from '../useViews';
 import type { UsePickerValueViewsResponse } from './usePickerValue.types';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-import { TimezoneProps } from '../../../models';
+import { FieldRef, FieldSection, PickerValidDate, TimezoneProps } from '../../../models';
 interface PickerViewsRendererBaseExternalProps<TView extends DateOrTimeViewWithMeridiem> extends Omit<UsePickerViewsProps<any, any, TView, any, any>, 'openTo' | 'viewRenderers'> {
 }
 export type PickerViewsRendererProps<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = TExternalProps & TAdditionalProps & UsePickerValueViewsResponse<TValue> & {
@@ -20,7 +20,7 @@ export type PickerViewRendererLookup<TValue, TView extends DateOrTimeViewWithMer
 /**
  * Props used to handle the views that are common to all pickers.
  */
-export interface UsePickerViewsBaseProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}> extends Omit<UseViewsOptions<any, TView>, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps {
+export interface UsePickerViewsBaseProps<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}> extends Omit<UseViewsOptions<any, TView>, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps {
     /**
      * If `true`, the picker and text field are disabled.
      * @default false
@@ -55,16 +55,16 @@ export interface UsePickerViewsNonStaticProps {
 /**
  * Props used to handle the value of the pickers.
  */
-export interface UsePickerViewsProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}> extends UsePickerViewsBaseProps<TValue, TDate, TView, TExternalProps, TAdditionalProps>, UsePickerViewsNonStaticProps {
+export interface UsePickerViewsProps<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}> extends UsePickerViewsBaseProps<TValue, TDate, TView, TExternalProps, TAdditionalProps>, UsePickerViewsNonStaticProps {
     className?: string;
     sx?: SxProps<Theme>;
 }
-export interface UsePickerViewParams<TValue, TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, TExternalProps, TAdditionalProps>, TAdditionalProps extends {}> {
+export interface UsePickerViewParams<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, TExternalProps, TAdditionalProps>, TAdditionalProps extends {}> {
     props: TExternalProps;
     propsFromPickerValue: UsePickerValueViewsResponse<TValue>;
     additionalViewProps: TAdditionalProps;
-    inputRef?: React.RefObject<HTMLInputElement>;
     autoFocusView: boolean;
+    fieldRef: React.RefObject<FieldRef<TSection>> | undefined;
     /**
      * A function that intercepts the regular picker rendering.
      * Can be used to consume the provided `viewRenderers` and render a custom component wrapping them.
@@ -96,5 +96,5 @@ export interface UsePickerViewsLayoutResponse<TView extends DateOrTimeViewWithMe
  * - Handles the switch between UI views and field views
  * - Handles the focus management when switching views
  */
-export declare const usePickerViews: <TValue, TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}>({ props, propsFromPickerValue, additionalViewProps, inputRef, autoFocusView, rendererInterceptor, }: UsePickerViewParams<TValue, TDate, TView, TExternalProps, TAdditionalProps>) => UsePickerViewsResponse<TView>;
+export declare const usePickerViews: <TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}>({ props, propsFromPickerValue, additionalViewProps, autoFocusView, rendererInterceptor, fieldRef, }: UsePickerViewParams<TValue, TDate, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerViewsResponse<TView>;
 export {};

package/internals/hooks/usePicker/usePickerViews.js

@@ -29,14 +29,13 @@ export const usePickerViews = ({
   props,
   propsFromPickerValue,
   additionalViewProps,
-  inputRef,
   autoFocusView,
-  rendererInterceptor
+  rendererInterceptor,
+  fieldRef
 }) => {
   const {
     onChange,
     open,
-    onSelectedSectionsChange,
     onClose
   } = propsFromPickerValue;
   const {
@@ -101,10 +100,10 @@ export const usePickerViews = ({
     if (currentViewMode === 'field' && open) {
       onClose();
       setTimeout(() => {
+        var _fieldRef$current;
         // focusing the input before the range selection is done
-        // calling `onSelectedSectionsChange` outside of timeout results in an inconsistent behavior between Safari And Chrome
-        inputRef == null || inputRef.current.focus();
-        onSelectedSectionsChange(view);
+        // calling it outside of timeout results in an inconsistent behavior between Safari And Chrome
+        fieldRef == null || (_fieldRef$current = fieldRef.current) == null || _fieldRef$current.focusField(view);
       });
     }
   }, [view]); // eslint-disable-line react-hooks/exhaustive-deps

package/internals/hooks/useStaticPicker/useStaticPicker.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { UseStaticPickerParams, UseStaticPickerProps } from './useStaticPicker.types';
+import { PickerValidDate } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
 /**
  * Hook managing all the single-date static pickers:
@@ -7,6 +8,6 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - StaticDateTimePicker
  * - StaticTimePicker
  */
-export declare const useStaticPicker: <TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TDate, TView, any, TExternalProps>>({ props, ref, ...pickerParams }: UseStaticPickerParams<TDate, TView, TExternalProps>) => {
+export declare const useStaticPicker: <TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TDate, TView, any, TExternalProps>>({ props, ref, ...pickerParams }: UseStaticPickerParams<TDate, TView, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -45,6 +45,7 @@ export const useStaticPicker = _ref => {
   } = usePicker(_extends({}, pickerParams, {
     props,
     autoFocusView: autoFocus != null ? autoFocus : false,
+    fieldRef: undefined,
     additionalViewProps: {},
     wrapperVariant: displayStaticWrapperAs
   }));

package/internals/hooks/useStaticPicker/useStaticPicker.types.d.ts

@@ -3,11 +3,11 @@ import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '../.
 import { BasePickerProps } from '../../models/props/basePickerProps';
 import { UsePickerParams } from '../usePicker';
 import { UsePickerViewsProps } from '../usePicker/usePickerViews';
-import { FieldSection } from '../../../models';
+import { FieldSection, PickerValidDate } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-export interface UseStaticPickerSlots<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<TDate | null, TDate, TView> {
+export interface UseStaticPickerSlots<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<TDate | null, TDate, TView> {
 }
-export interface UseStaticPickerSlotProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<TDate | null, TDate, TView> {
+export interface UseStaticPickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<TDate | null, TDate, TView> {
 }
 export interface StaticOnlyPickerProps {
     /**
@@ -17,6 +17,7 @@ export interface StaticOnlyPickerProps {
     displayStaticWrapperAs: 'desktop' | 'mobile';
     /**
      * If `true`, the view is focused during the first mount.
+     * @default false
      */
     autoFocus?: boolean;
     /**
@@ -26,19 +27,19 @@ export interface StaticOnlyPickerProps {
      */
     onClose?: () => void;
 }
-export interface UseStaticPickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TDate | null, TDate, TView, any, any>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, StaticOnlyPickerProps {
+export interface UseStaticPickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TDate | null, TDate, TView, any, any>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, StaticOnlyPickerProps {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: UseStaticPickerSlots<TDate | null, TView>;
+    slots?: UseStaticPickerSlots<TDate, TView>;
     /**
      * The props used for each component slot.
      * @default {}
      */
     slotProps?: UseStaticPickerSlotProps<TDate, TView>;
 }
-export interface UseStaticPickerParams<TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
+export interface UseStaticPickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;
     /**
      * Ref to pass to the root element

package/internals/hooks/useUtils.d.ts

@@ -1,13 +1,13 @@
 import { MuiPickersAdapterContextValue } from '../../LocalizationProvider/LocalizationProvider';
 import { PickersLocaleText } from '../../locales/utils/pickersLocaleTextApi';
-import { PickersTimezone } from '../../models';
-export declare const useLocalizationContext: <TDate>() => Omit<MuiPickersAdapterContextValue<TDate>, "localeText"> & {
+import { PickersTimezone, PickerValidDate } from '../../models';
+export declare const useLocalizationContext: <TDate extends PickerValidDate>() => Omit<MuiPickersAdapterContextValue<TDate>, "localeText"> & {
     localeText: PickersLocaleText<TDate>;
 };
-export declare const useUtils: <TDate>() => import("../../models").MuiPickersAdapter<TDate, any>;
-export declare const useDefaultDates: <TDate>() => {
+export declare const useUtils: <TDate extends PickerValidDate>() => import("@mui/x-date-pickers/models").MuiPickersAdapter<TDate, any>;
+export declare const useDefaultDates: <TDate extends PickerValidDate>() => {
     minDate: TDate;
     maxDate: TDate;
 };
-export declare const useLocaleText: <TDate>() => PickersLocaleText<TDate>;
-export declare const useNow: <TDate>(timezone: PickersTimezone) => TDate;
+export declare const useLocaleText: <TDate extends PickerValidDate>() => PickersLocaleText<TDate>;
+export declare const useNow: <TDate extends PickerValidDate>(timezone: PickersTimezone) => TDate;

package/internals/hooks/useValidation.d.ts

@@ -1,4 +1,5 @@
 import { MuiPickersAdapterContextValue } from '../../LocalizationProvider/LocalizationProvider';
+import { PickerValidDate } from '../../models';
 interface ValidationCommonProps<TError, TValue> {
     /**
      * Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).
@@ -14,10 +15,10 @@ interface ValidationCommonProps<TError, TValue> {
 }
 export type ValidationProps<TError, TValue, TValidationProps extends {}> = ValidationCommonProps<TError, TValue> & TValidationProps;
 export type InferError<TProps> = TProps extends Pick<ValidationCommonProps<any, any>, 'onError'> ? Parameters<Exclude<TProps['onError'], undefined>>[0] : never;
-export type Validator<TValue, TDate, TError, TValidationProps> = (params: {
+export type Validator<TValue, TDate extends PickerValidDate, TError, TValidationProps> = (params: {
     adapter: MuiPickersAdapterContextValue<TDate>;
     value: TValue;
     props: Omit<TValidationProps, 'value' | 'onError'>;
 }) => TError;
-export declare function useValidation<TValue, TDate, TError, TValidationProps extends {}>(props: ValidationProps<TError, TValue, TValidationProps>, validate: Validator<TValue, TDate, TError, TValidationProps>, isSameError: (a: TError, b: TError | null) => boolean, defaultErrorState: TError): TError;
+export declare function useValidation<TValue, TDate extends PickerValidDate, TError, TValidationProps extends {}>(props: ValidationProps<TError, TValue, TValidationProps>, validate: Validator<TValue, TDate, TError, TValidationProps>, isSameError: (a: TError, b: TError | null) => boolean, defaultErrorState: TError): TError;
 export {};

package/internals/hooks/useValueWithTimezone.d.ts

@@ -1,11 +1,11 @@
 import type { PickerValueManager } from './usePicker';
-import { PickersTimezone } from '../../models';
+import { PickersTimezone, PickerValidDate } from '../../models';
 /**
  * Hooks making sure that:
  * - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined
  * - The value rendered is always the one from `props.timezone` if defined
  */
-export declare const useValueWithTimezone: <TDate, TValue, TChange extends (...params: any[]) => void>({ timezone: timezoneProp, value: valueProp, defaultValue, onChange, valueManager, }: {
+export declare const useValueWithTimezone: <TDate extends PickerValidDate, TValue, TChange extends (...params: any[]) => void>({ timezone: timezoneProp, value: valueProp, defaultValue, onChange, valueManager, }: {
     timezone: PickersTimezone | undefined;
     value: TValue | undefined;
     defaultValue: TValue | undefined;
@@ -19,7 +19,7 @@ export declare const useValueWithTimezone: <TDate, TValue, TChange extends (...p
 /**
  * Wrapper around `useControlled` and `useValueWithTimezone`
  */
-export declare const useControlledValueWithTimezone: <TDate, TValue, TChange extends (...params: any[]) => void>({ name, timezone: timezoneProp, value: valueProp, defaultValue, onChange: onChangeProp, valueManager, }: {
+export declare const useControlledValueWithTimezone: <TDate extends PickerValidDate, TValue, TChange extends (...params: any[]) => void>({ name, timezone: timezoneProp, value: valueProp, defaultValue, onChange: onChangeProp, valueManager, }: {
     name: string;
     timezone: PickersTimezone | undefined;
     value: TValue | undefined;

package/internals/hooks/useViews.d.ts

@@ -1,7 +1,8 @@
 import type { PickerSelectionState } from './usePicker';
 import { MakeOptional } from '../models/helpers';
 import { DateOrTimeViewWithMeridiem } from '../models';
-export type PickerOnChangeFn<TDate> = (date: TDate | null, selectionState?: PickerSelectionState) => void;
+import { PickerValidDate } from '../../models';
+export type PickerOnChangeFn<TDate extends PickerValidDate> = (date: TDate | null, selectionState?: PickerSelectionState) => void;
 export interface UseViewsOptions<TValue, TView extends DateOrTimeViewWithMeridiem> {
     /**
      * Callback fired when the value changes.

package/internals/index.d.ts

@@ -23,8 +23,8 @@ export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT } from './constants/dimensions';
 export { useControlledValueWithTimezone } from './hooks/useValueWithTimezone';
 export type { DesktopOnlyPickerProps } from './hooks/useDesktopPicker';
-export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, } from './hooks/useField';
-export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, UseFieldForwardedProps, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField';
+export { useField, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections, } from './hooks/useField';
+export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField';
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
 export { usePicker } from './hooks/usePicker';
 export type { UsePickerResponse, UsePickerParams, UsePickerProps, UsePickerValueFieldResponse, } from './hooks/usePicker';
@@ -38,12 +38,12 @@ export { useViews } from './hooks/useViews';
 export { useValidation } from './hooks/useValidation';
 export type { ValidationProps, Validator, InferError } from './hooks/useValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
-export type { BaseFieldProps, FieldsTextFieldProps } from './models/fields';
+export type { BaseFieldProps } from './models/fields';
 export type { BasePickerProps, BasePickerInputProps, BaseNonStaticPickerProps, } from './models/props/basePickerProps';
 export type { BaseClockProps, DesktopOnlyTimePickerProps } from './models/props/clock';
 export type { BaseTabsProps, ExportedBaseTabsProps } from './models/props/tabs';
 export type { BaseToolbarProps, ExportedBaseToolbarProps } from './models/props/toolbar';
-export type { DefaultizedProps, MakeOptional } from './models/helpers';
+export type { DefaultizedProps, MakeOptional, SlotComponentPropsFromProps } from './models/helpers';
 export type { WrapperVariant, TimeViewWithMeridiem, DateOrTimeViewWithMeridiem, } from './models/common';
 export type { BaseDateValidationProps, BaseTimeValidationProps, TimeValidationProps, MonthValidationProps, YearValidationProps, DayValidationProps, DateTimeValidationProps, } from './models/validation';
 export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps';
@@ -52,6 +52,7 @@ export { resolveTimeViewsResponse } from './utils/date-time-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, } from './utils/utils';
+export { useDefaultizedDateField, useDefaultizedTimeField, useDefaultizedDateTimeField, } from './hooks/defaultizedFieldProps';
 export { useDefaultReduceAnimations } from './hooks/useDefaultReduceAnimations';
 export { extractValidationProps } from './utils/validation/extractValidationProps';
 export { validateDate } from './utils/validation/validateDate';

package/internals/index.js

@@ -10,7 +10,7 @@ export { pickersPopperClasses } from './components/pickersPopperClasses';
 export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT } from './constants/dimensions';
 export { useControlledValueWithTimezone } from './hooks/useValueWithTimezone';
-export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections } from './hooks/useField';
+export { useField, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from './hooks/useField';
 export { usePicker } from './hooks/usePicker';
 export { useStaticPicker } from './hooks/useStaticPicker';
 export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';
@@ -23,6 +23,7 @@ export { resolveTimeViewsResponse } from './utils/date-time-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';
+export { useDefaultizedDateField, useDefaultizedTimeField, useDefaultizedDateTimeField } from './hooks/defaultizedFieldProps';
 export { useDefaultReduceAnimations } from './hooks/useDefaultReduceAnimations';
 export { extractValidationProps } from './utils/validation/extractValidationProps';
 export { validateDate } from './utils/validation/validateDate';

package/internals/models/fields.d.ts

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { TextFieldProps } from '@mui/material/TextField';
 import type { UseFieldInternalProps } from '../hooks/useField';
-import type { FieldSection } from '../../models';
-export interface BaseFieldProps<TValue, TDate, TSection extends FieldSection, TError> extends Omit<UseFieldInternalProps<TValue, TDate, TSection, TError>, 'format'> {
+import { FieldSection, PickerValidDate } from '../../models';
+import type { ExportedUseClearableFieldProps } from '../../hooks/useClearableField';
+export interface BaseFieldProps<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends Omit<UseFieldInternalProps<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TError>, 'format'>, ExportedUseClearableFieldProps {
     className?: string;
     format?: string;
     disabled?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 }
-export interface FieldsTextFieldProps extends Omit<TextFieldProps, 'autoComplete' | 'error' | 'maxRows' | 'minRows' | 'multiline' | 'placeholder' | 'rows' | 'select' | 'SelectProps' | 'type'> {
-}

package/internals/models/helpers.d.ts

@@ -7,3 +7,4 @@ export type ExtendMui<C, Removals extends keyof C = never> = Omit<C, 'classes' |
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 export type MakeRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
 export type DefaultizedProps<P extends {}, RequiredProps extends keyof P, AdditionalProps extends {} = {}> = Omit<P, RequiredProps | keyof AdditionalProps> & Required<Pick<P, RequiredProps>> & AdditionalProps;
+export type SlotComponentPropsFromProps<TProps extends {}, TOverrides extends {}, TOwnerState extends {}> = (Partial<TProps> & TOverrides) | ((ownerState: TOwnerState) => Partial<TProps> & TOverrides);

package/internals/models/props/basePickerProps.d.ts

@@ -6,10 +6,12 @@ import { PickersInputComponentLocaleText } from '../../../locales/utils/pickersL
 import type { UsePickerViewsProps } from '../../hooks/usePicker/usePickerViews';
 import { MakeOptional } from '../helpers';
 import { DateOrTimeViewWithMeridiem } from '../common';
+import { UseFieldInternalProps } from '../../hooks/useField';
+import { PickerValidDate } from '../../../models';
 /**
  * Props common to all pickers after applying the default props on each picker.
  */
-export interface BasePickerProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}> extends UsePickerBaseProps<TValue, TDate, TView, TError, TExternalProps, TAdditionalProps> {
+export interface BasePickerProps<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}> extends UsePickerBaseProps<TValue, TDate, TView, TError, TExternalProps, TAdditionalProps> {
     className?: string;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -24,24 +26,18 @@ export interface BasePickerProps<TValue, TDate, TView extends DateOrTimeViewWith
 /**
  * Props common to all pickers before applying the default props on each picker.
  */
-export interface BasePickerInputProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem, TError> extends Omit<MakeOptional<BasePickerProps<TValue, TDate, TView, TError, any, any>, 'openTo' | 'views'>, 'viewRenderers'> {
+export interface BasePickerInputProps<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError> extends Omit<MakeOptional<BasePickerProps<TValue, TDate, TView, TError, any, any>, 'openTo' | 'views'>, 'viewRenderers'> {
 }
 /**
  * Props common to all non-static pickers.
  * These props are handled by the headless wrappers.
  */
-export interface BaseNonStaticPickerProps {
+export interface BaseNonStaticPickerProps extends Pick<UseFieldInternalProps<any, any, any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
     /**
      * Format of the date when rendered in the input(s).
      * Defaults to localized format based on the used `views`.
      */
     format?: string;
-    /**
-     * Density of the format when rendered in the input.
-     * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
-     * @default "dense"
-     */
-    formatDensity?: 'dense' | 'spacious';
 }
 /**
  * Props common to all non-range non-static pickers.

package/internals/models/props/clock.d.ts

@@ -1,18 +1,18 @@
 import { SxProps, Theme } from '@mui/material/styles';
 import { BaseTimeValidationProps, TimeValidationProps } from '../validation';
-import { TimeStepOptions, TimezoneProps } from '../../../models';
+import { PickerValidDate, TimeStepOptions, TimezoneProps } from '../../../models';
 import type { ExportedDigitalClockProps } from '../../../DigitalClock/DigitalClock.types';
 import type { ExportedMultiSectionDigitalClockProps } from '../../../MultiSectionDigitalClock/MultiSectionDigitalClock.types';
 import type { ExportedUseViewsOptions } from '../../hooks/useViews';
 import { TimeViewWithMeridiem } from '../common';
-export interface ExportedBaseClockProps<TDate> extends TimeValidationProps<TDate>, BaseTimeValidationProps, TimezoneProps {
+export interface ExportedBaseClockProps<TDate extends PickerValidDate> extends TimeValidationProps<TDate>, BaseTimeValidationProps, TimezoneProps {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`
      */
     ampm?: boolean;
 }
-export interface BaseClockProps<TDate, TView extends TimeViewWithMeridiem> extends ExportedUseViewsOptions<TView>, ExportedBaseClockProps<TDate> {
+export interface BaseClockProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem> extends ExportedUseViewsOptions<TView>, ExportedBaseClockProps<TDate> {
     className?: string;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -44,7 +44,7 @@ export interface BaseClockProps<TDate, TView extends TimeViewWithMeridiem> exten
      */
     referenceDate?: TDate;
 }
-export interface DesktopOnlyTimePickerProps<TDate> extends Omit<ExportedDigitalClockProps<TDate>, 'timeStep'>, Omit<ExportedMultiSectionDigitalClockProps<TDate>, 'timeSteps'> {
+export interface DesktopOnlyTimePickerProps<TDate extends PickerValidDate> extends Omit<ExportedDigitalClockProps<TDate>, 'timeStep'>, Omit<ExportedMultiSectionDigitalClockProps<TDate>, 'timeSteps'> {
     /**
      * Amount of time options below or at which the single column time renderer is used.
      * @default 24

package/internals/models/props/tabs.d.ts

@@ -1,3 +1,5 @@
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 import { DateOrTimeViewWithMeridiem } from '../common';
 export interface BaseTabsProps<TView extends DateOrTimeViewWithMeridiem> {
     /**
@@ -13,4 +15,8 @@ export interface BaseTabsProps<TView extends DateOrTimeViewWithMeridiem> {
 }
 export interface ExportedBaseTabsProps {
     className?: string;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
 }

package/internals/models/props/toolbar.d.ts

@@ -37,5 +37,8 @@ export interface ExportedBaseToolbarProps {
      * @default `true` for Desktop, `false` for Mobile.
      */
     hidden?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
     sx?: SxProps<Theme>;
 }

package/internals/models/validation.d.ts

@@ -1,4 +1,4 @@
-import { TimeView } from '../../models';
+import { PickerValidDate, TimeView } from '../../models';
 interface FutureAndPastValidationProps {
     /**
      * If `true`, disable values before the current date for date components, time for time components and both for date time components.
@@ -20,7 +20,7 @@ export interface BaseTimeValidationProps extends FutureAndPastValidationProps {
 /**
  * Props used to validate a time value.
  */
-export interface TimeValidationProps<TDate> {
+export interface TimeValidationProps<TDate extends PickerValidDate> {
     /**
      * Minimal selectable time.
      * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
@@ -54,7 +54,7 @@ export interface TimeValidationProps<TDate> {
  * Validation props common to all the date views.
  * All these props have a default value when used inside a field / picker / calendar.
  */
-export interface BaseDateValidationProps<TDate> extends FutureAndPastValidationProps {
+export interface BaseDateValidationProps<TDate extends PickerValidDate> extends FutureAndPastValidationProps {
     /**
      * Maximal selectable date.
      */
@@ -67,7 +67,7 @@ export interface BaseDateValidationProps<TDate> extends FutureAndPastValidationP
 /**
  * Props used to validate a date value (validates day + month + year).
  */
-export interface DayValidationProps<TDate> {
+export interface DayValidationProps<TDate extends PickerValidDate> {
     /**
      * Disable specific date.
      *
@@ -82,7 +82,7 @@ export interface DayValidationProps<TDate> {
 /**
  * Props used to validate a month value
  */
-export interface MonthValidationProps<TDate> {
+export interface MonthValidationProps<TDate extends PickerValidDate> {
     /**
      * Disable specific month.
      * @template TDate
@@ -94,7 +94,7 @@ export interface MonthValidationProps<TDate> {
 /**
  * Props used to validate a year value
  */
-export interface YearValidationProps<TDate> {
+export interface YearValidationProps<TDate extends PickerValidDate> {
     /**
      * Disable specific year.
      * @template TDate
@@ -106,7 +106,7 @@ export interface YearValidationProps<TDate> {
 /**
  * Props used to validate a date time value.
  */
-export interface DateTimeValidationProps<TDate> {
+export interface DateTimeValidationProps<TDate extends PickerValidDate> {
     /**
      * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
      */

package/internals/utils/convertFieldResponseIntoMuiTextFieldProps.d.ts

@@ -1,3 +1,3 @@
 import { TextFieldProps } from '@mui/material/TextField';
 import { UseFieldResponse } from '../hooks/useField';
-export declare const convertFieldResponseIntoMuiTextFieldProps: <TFieldResponse extends UseFieldResponse<any>>(fieldResponse: TFieldResponse) => TextFieldProps;
+export declare const convertFieldResponseIntoMuiTextFieldProps: <TFieldResponse extends UseFieldResponse<any, any>>({ enableAccessibleFieldDOMStructure, ...fieldResponse }: TFieldResponse) => TextFieldProps;

package/internals/utils/convertFieldResponseIntoMuiTextFieldProps.js

@@ -1,7 +1,25 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onPaste", "onKeyDown", "inputMode", "readOnly", "InputProps", "inputProps", "inputRef"];
-export const convertFieldResponseIntoMuiTextFieldProps = fieldResponse => {
+const _excluded = ["enableAccessibleFieldDOMStructure"],
+  _excluded2 = ["InputProps", "readOnly"],
+  _excluded3 = ["onPaste", "onKeyDown", "inputMode", "readOnly", "InputProps", "inputProps", "inputRef"];
+export const convertFieldResponseIntoMuiTextFieldProps = _ref => {
+  let {
+      enableAccessibleFieldDOMStructure
+    } = _ref,
+    fieldResponse = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (enableAccessibleFieldDOMStructure) {
+    const {
+        InputProps,
+        readOnly
+      } = fieldResponse,
+      other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2);
+    return _extends({}, other, {
+      InputProps: _extends({}, InputProps != null ? InputProps : {}, {
+        readOnly
+      })
+    });
+  }
   const {
       onPaste,
       onKeyDown,
@@ -11,7 +29,7 @@ export const convertFieldResponseIntoMuiTextFieldProps = fieldResponse => {
       inputProps,
       inputRef
     } = fieldResponse,
-    other = _objectWithoutPropertiesLoose(fieldResponse, _excluded);
+    other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3);
   return _extends({}, other, {
     InputProps: _extends({}, InputProps != null ? InputProps : {}, {
       readOnly