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

package/hooks/usePickerContext.js

@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+import { PickerContext } from "../internals/components/PickerProvider.js";
+
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ */
+export const usePickerContext = () => {
+  const value = React.useContext(PickerContext);
+  if (value == null) {
+    throw new Error(['MUI X: The `usePickerContext` can only be called in fields that are used as a slot of a picker component'].join('\n'));
+  }
+  return value;
+};

package/hooks/usePickerTranslations.d.ts

@@ -0,0 +1 @@
+export declare const usePickerTranslations: () => import("..").PickersLocaleText;

package/{modern/hooks/usePickersTranslations.js → hooks/usePickerTranslations.js}

@@ -1,4 +1,4 @@
 'use client';
 
 import { useLocalizationContext } from "../internals/hooks/useUtils.js";
-export const usePickersTranslations = () => useLocalizationContext().localeText;
+export const usePickerTranslations = () => useLocalizationContext().localeText;

package/index.js

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

package/internals/components/{PickersProvider.d.ts → PickerProvider.d.ts}

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { PickerValidDate } from '../../models';
+import { PickerOwnerState } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
-export declare const PickersContext: React.Context<PickersContextValue | null>;
+export declare const PickerContext: React.Context<PickerContextValue | null>;
+export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
 /**
  * Provides the context for the various parts of a picker component:
  * - contextValue: the context for the picker sub-components.
@@ -9,13 +10,14 @@ export declare const PickersContext: React.Context<PickersContextValue | null>;
  *
  * @ignore - do not document.
  */
-export declare function PickersProvider<TDate extends PickerValidDate>(props: PickersFieldProviderProps<TDate>): React.JSX.Element;
-interface PickersFieldProviderProps<TDate extends PickerValidDate> {
-    contextValue: PickersContextValue;
-    localeText: PickersInputLocaleText<TDate> | undefined;
+export declare function PickerProvider(props: PickerProviderProps): React.JSX.Element;
+export interface PickerProviderProps {
+    contextValue: PickerContextValue;
+    privateContextValue: PickerPrivateContextValue;
+    localeText: PickersInputLocaleText | undefined;
     children: React.ReactNode;
 }
-export interface PickersContextValue {
+export interface PickerContextValue {
     /**
      * Open the picker.
      * @param {React.UIEvent} event The DOM event that triggered the change.
@@ -31,4 +33,9 @@ export interface PickersContextValue {
      */
     open: boolean;
 }
-export {};
+export interface PickerPrivateContextValue {
+    /**
+     * The ownerState of the picker.
+     */
+    ownerState: PickerOwnerState;
+}

package/internals/components/PickerProvider.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { LocalizationProvider } from "../../LocalizationProvider/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PickerContext = /*#__PURE__*/React.createContext(null);
+export const PickerPrivateContext = /*#__PURE__*/React.createContext({
+  ownerState: {
+    isPickerDisabled: false,
+    isPickerReadOnly: false,
+    isPickerValueEmpty: false,
+    isPickerOpen: false
+  }
+});
+
+/**
+ * Provides the context for the various parts of a picker component:
+ * - contextValue: the context for the picker sub-components.
+ * - localizationProvider: the translations passed through the props and through a parent LocalizationProvider.
+ *
+ * @ignore - do not document.
+ */
+export function PickerProvider(props) {
+  const {
+    contextValue,
+    privateContextValue,
+    localeText,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(PickerContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(PickerPrivateContext.Provider, {
+      value: privateContextValue,
+      children: /*#__PURE__*/_jsx(LocalizationProvider, {
+        localeText: localeText,
+        children: children
+      })
+    })
+  });
+}

package/internals/hooks/date-helpers-hooks.d.ts

@@ -1,16 +1,16 @@
 import { PickerOnChangeFn } from './useViews';
 import { PickerSelectionState } from './usePicker';
 import { PickersTimezone, PickerValidDate } from '../../models';
-export interface MonthValidationOptions<TDate extends PickerValidDate> {
+export interface MonthValidationOptions {
     disablePast?: boolean;
     disableFuture?: boolean;
-    minDate: TDate;
-    maxDate: TDate;
+    minDate: PickerValidDate;
+    maxDate: PickerValidDate;
     timezone: PickersTimezone;
 }
-export declare function useNextMonthDisabled<TDate extends PickerValidDate>(month: TDate, { disableFuture, maxDate, timezone, }: Pick<MonthValidationOptions<TDate>, 'disableFuture' | 'maxDate' | 'timezone'>): boolean;
-export declare function usePreviousMonthDisabled<TDate extends PickerValidDate>(month: TDate, { disablePast, minDate, timezone, }: Pick<MonthValidationOptions<TDate>, 'disablePast' | 'minDate' | 'timezone'>): boolean;
-export declare function useMeridiemMode<TDate extends PickerValidDate>(date: TDate | null, ampm: boolean | undefined, onChange: PickerOnChangeFn<TDate>, selectionState?: PickerSelectionState): {
+export declare function useNextMonthDisabled(month: PickerValidDate, { disableFuture, maxDate, timezone, }: Pick<MonthValidationOptions, 'disableFuture' | 'maxDate' | 'timezone'>): boolean;
+export declare function usePreviousMonthDisabled(month: PickerValidDate, { disablePast, minDate, timezone, }: Pick<MonthValidationOptions, 'disablePast' | 'minDate' | 'timezone'>): boolean;
+export declare function useMeridiemMode(date: PickerValidDate | null, ampm: boolean | undefined, onChange: PickerOnChangeFn, selectionState?: PickerSelectionState): {
     meridiemMode: import("../utils/time-utils").Meridiem | null;
     handleMeridiemChange: (mode: "am" | "pm") => void;
 };

package/internals/hooks/defaultizedFieldProps.d.ts

@@ -1,19 +1,18 @@
+import { DefaultizedProps } from '@mui/x-internals/types';
 import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps, TimeValidationProps } from '../models/validation';
-import { DefaultizedProps } from '../models/helpers';
-import { PickerValidDate } from '../../models';
-export interface UseDefaultizedDateFieldBaseProps<TDate extends PickerValidDate> extends BaseDateValidationProps<TDate> {
+export interface UseDefaultizedDateFieldBaseProps extends BaseDateValidationProps {
     format?: string;
 }
-export declare const useDefaultizedDateField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedDateFieldBaseProps<TDate>, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & DefaultizedProps<TKnownProps, keyof UseDefaultizedDateFieldBaseProps<any>>;
+export declare const useDefaultizedDateField: <TKnownProps extends UseDefaultizedDateFieldBaseProps, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & DefaultizedProps<TKnownProps, keyof UseDefaultizedDateFieldBaseProps>;
 export interface UseDefaultizedTimeFieldBaseProps extends BaseTimeValidationProps {
     format?: string;
 }
-export declare const useDefaultizedTimeField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedTimeFieldBaseProps & {
+export declare const useDefaultizedTimeField: <TKnownProps extends UseDefaultizedTimeFieldBaseProps & {
     ampm?: boolean;
 }, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & DefaultizedProps<TKnownProps, keyof UseDefaultizedTimeFieldBaseProps>;
-export interface UseDefaultizedDateTimeFieldBaseProps<TDate extends PickerValidDate> extends BaseDateValidationProps<TDate>, BaseTimeValidationProps {
+export interface UseDefaultizedDateTimeFieldBaseProps extends BaseDateValidationProps, BaseTimeValidationProps {
     format?: string;
 }
-export declare const useDefaultizedDateTimeField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedDateTimeFieldBaseProps<TDate> & DateTimeValidationProps<TDate> & TimeValidationProps<TDate> & {
+export declare const useDefaultizedDateTimeField: <TKnownProps extends UseDefaultizedDateTimeFieldBaseProps & DateTimeValidationProps & TimeValidationProps & {
     ampm?: boolean;
-}, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & DefaultizedProps<TKnownProps, keyof UseDefaultizedDateTimeFieldBaseProps<any>>;
+}, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & DefaultizedProps<TKnownProps, keyof UseDefaultizedDateTimeFieldBaseProps>;

package/internals/hooks/useClockReferenceDate.d.ts

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

package/internals/hooks/useDesktopPicker/useDesktopPicker.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { UseDesktopPickerParams, UseDesktopPickerProps } from './useDesktopPicker.types';
-import { PickerValidDate } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
 /**
  * Hook managing all the single-date desktop pickers:
@@ -8,6 +7,6 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - DesktopDateTimePicker
  * - DesktopTimePicker
  */
-export declare const useDesktopPicker: <TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TDate, TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+export declare const useDesktopPicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -12,7 +12,7 @@ import useId from '@mui/utils/useId';
 import { PickersPopper } from "../../components/PickersPopper.js";
 import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
-import { PickersProvider } from "../../components/PickersProvider.js";
+import { PickerProvider } from "../../components/PickerProvider.js";
 
 /**
  * Hook managing all the single-date desktop pickers:
@@ -56,14 +56,15 @@ export const useDesktopPicker = _ref => {
     actions,
     hasUIView,
     layoutProps,
+    providerProps,
     renderCurrentView,
     shouldRestoreFocus,
     fieldProps: pickerFieldProps,
-    contextValue,
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
+    localeText,
     autoFocusView: true,
     additionalViewProps: {},
     wrapperVariant: 'desktop'
@@ -75,7 +76,7 @@ export const useDesktopPicker = _ref => {
       additionalProps: {
         position: 'end'
       },
-      ownerState: props
+      ownerState
     }),
     inputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const OpenPickerButton = slots.openPickerButton ?? IconButton;
@@ -88,7 +89,7 @@ export const useDesktopPicker = _ref => {
         'aria-label': getOpenDialogAriaText(pickerFieldProps.value),
         edge: inputAdornmentProps.position
       },
-      ownerState: props
+      ownerState
     }),
     openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
   const OpenPickerIcon = slots.openPickerIcon;
@@ -101,27 +102,32 @@ export const useDesktopPicker = _ref => {
   const fieldProps = useSlotProps({
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
-    additionalProps: _extends({}, pickerFieldProps, isToolbarHidden && {
-      id: labelId
-    }, {
+    additionalProps: _extends({
+      // Internal props
       readOnly,
       disabled,
-      className,
-      sx,
       format,
       formatDensity,
       enableAccessibleFieldDOMStructure,
       selectedSections,
       onSelectedSectionsChange,
       timezone,
+      autoFocus: autoFocus && !props.open
+    }, pickerFieldProps, {
+      // onChange and value
+
+      // Forwarded props
+      className,
+      sx,
       label,
       name,
-      autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined
-    }, inputRef ? {
+    }, isToolbarHidden && {
+      id: labelId
+    }, !!inputRef && {
       inputRef
-    } : {}),
-    ownerState: props
+    }),
+    ownerState
   });
 
   // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
@@ -159,9 +165,7 @@ export const useDesktopPicker = _ref => {
     }, innerSlotProps?.popper)
   });
   const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/_jsxs(PickersProvider, {
-    contextValue: contextValue,
-    localeText: localeText,
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
     children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
       slots: slotsForField,
       slotProps: slotProps,
@@ -182,7 +186,7 @@ export const useDesktopPicker = _ref => {
         children: renderCurrentView()
       }))
     }))]
-  });
+  }));
   return {
     renderPicker
   };

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

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

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

@@ -1,15 +1,15 @@
 import { FieldSection, MuiPickersAdapter, PickerValidDate } from '../../../models';
 import { PickersLocaleText } from '../../../locales';
-interface BuildSectionsFromFormatParams<TDate extends PickerValidDate> {
-    utils: MuiPickersAdapter<TDate>;
+interface BuildSectionsFromFormatParams {
+    utils: MuiPickersAdapter;
     format: string;
     formatDensity: 'dense' | 'spacious';
     isRtl: boolean;
     shouldRespectLeadingZeros: boolean;
-    localeText: PickersLocaleText<TDate>;
+    localeText: PickersLocaleText;
     localizedDigits: string[];
-    date: TDate | null;
+    date: PickerValidDate | null;
     enableAccessibleFieldDOMStructure: boolean;
 }
-export declare const buildSectionsFromFormat: <TDate extends PickerValidDate>(params: BuildSectionsFromFormatParams<TDate>) => FieldSection[];
+export declare const buildSectionsFromFormat: (params: BuildSectionsFromFormatParams) => FieldSection[];
 export {};

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

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

package/internals/hooks/useField/useField.js

@@ -17,7 +17,7 @@ export const useField = params => {
     internalProps: {
       unstableFieldRef,
       minutesStep,
-      enableAccessibleFieldDOMStructure = false,
+      enableAccessibleFieldDOMStructure = true,
       disabled = false,
       readOnly = false
     },

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

@@ -6,15 +6,16 @@ import type { UseFieldStateResponse } from './useFieldState';
 import type { UseFieldCharacterEditingResponse } from './useFieldCharacterEditing';
 import { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList';
 import { ExportedUseClearableFieldProps } from '../../../hooks/useClearableField';
-export interface UseFieldParams<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, any, TEnableAccessibleFieldDOMStructure, any>> {
+import { FormProps } from '../../models';
+export interface UseFieldParams<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, TEnableAccessibleFieldDOMStructure, any>> {
     forwardedProps: TForwardedProps;
     internalProps: TInternalProps;
-    valueManager: PickerValueManager<TValue, TDate, InferError<TInternalProps>>;
-    fieldValueManager: FieldValueManager<TValue, TDate, TSection>;
-    validator: Validator<TValue, TDate, InferError<TInternalProps>, TInternalProps>;
+    valueManager: PickerValueManager<TValue, InferError<TInternalProps>>;
+    fieldValueManager: FieldValueManager<TValue, TSection>;
+    validator: Validator<TValue, InferError<TInternalProps>, TInternalProps>;
     valueType: FieldValueType;
 }
-export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends TimezoneProps, OnErrorProps<TValue, TError> {
+export interface UseFieldInternalProps<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends TimezoneProps, FormProps, OnErrorProps<TValue, TError> {
     /**
      * The selected value.
      * Used when the component is controlled.
@@ -29,7 +30,7 @@ export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TS
      * For example, on time fields it will be used to determine the date to set.
      * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
      */
-    referenceDate?: TDate;
+    referenceDate?: PickerValidDate;
     /**
      * Callback fired when the value changes.
      * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
@@ -63,12 +64,6 @@ export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TS
      * @default false
      */
     shouldRespectLeadingZeros?: boolean;
-    /**
-     * It prevents the user from changing the value of the field
-     * (not from interacting with the field).
-     * @default false
-     */
-    readOnly?: boolean;
     /**
      * The currently selected sections.
      * This prop accepts four formats:
@@ -89,7 +84,7 @@ export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TS
      */
     unstableFieldRef?: React.Ref<FieldRef<TSection>>;
     /**
-     * @default false
+     * @default true
      */
     enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
     /**
@@ -97,13 +92,8 @@ export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TS
      * @default false
      */
     autoFocus?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
 }
-export interface UseFieldCommonAdditionalProps extends Required<Pick<UseFieldInternalProps<any, any, any, any, any>, 'disabled' | 'readOnly'>> {
+export interface UseFieldCommonAdditionalProps extends Required<Pick<UseFieldInternalProps<any, any, any, any>, 'disabled' | 'readOnly'>> {
 }
 export interface UseFieldCommonForwardedProps extends ExportedUseClearableFieldProps {
     onKeyDown?: React.KeyboardEventHandler;
@@ -143,18 +133,18 @@ interface UseFieldV7AdditionalProps {
 export type UseFieldResponse<TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & {
     [key: string]: any;
 }> = Omit<TForwardedProps, keyof UseFieldCommonForwardedProps> & Required<UseFieldCommonForwardedProps> & UseFieldCommonAdditionalProps & (TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6AdditionalProps & Required<UseFieldV6ForwardedProps> : UseFieldV7AdditionalProps & Required<UseFieldV7ForwardedProps>);
-export type FieldSectionValueBoundaries<TDate extends PickerValidDate, SectionType extends FieldSectionType> = {
+export type FieldSectionValueBoundaries<SectionType extends FieldSectionType> = {
     minimum: number;
     maximum: number;
 } & (SectionType extends 'day' ? {
-    longestMonth: TDate;
+    longestMonth: PickerValidDate;
 } : {});
-export type FieldSectionsValueBoundaries<TDate extends PickerValidDate> = {
+export type FieldSectionsValueBoundaries = {
     [SectionType in FieldSectionType]: (params: {
-        currentDate: TDate | null;
+        currentDate: PickerValidDate | null;
         format: string;
         contentType: FieldSectionContentType;
-    }) => FieldSectionValueBoundaries<TDate, SectionType>;
+    }) => FieldSectionValueBoundaries<SectionType>;
 };
 export type FieldSectionsBoundaries = {
     [SectionType in FieldSectionType]: {
@@ -170,15 +160,15 @@ export interface FieldChangeHandlerContext<TError> {
  * Object used to access and update the active date (i.e: the date containing the active section).
  * Mainly useful in the range fields where we need to update the date containing the active section without impacting the other one.
  */
-interface FieldActiveDateManager<TValue, TDate extends PickerValidDate, TSection extends FieldSection> {
+interface FieldActiveDateManager<TValue, TSection extends FieldSection> {
     /**
      * Active date from `state.value`.
      */
-    date: TDate | null;
+    date: PickerValidDate | null;
     /**
      * Active date from the `state.referenceValue`.
      */
-    referenceDate: TDate;
+    referenceDate: PickerValidDate;
     /**
      * @template TSection
      * @param  {TSection[]} sections The sections of the full value.
@@ -188,25 +178,25 @@ interface FieldActiveDateManager<TValue, TDate extends PickerValidDate, TSection
     getSections: (sections: TSection[]) => TSection[];
     /**
      * Creates the new value and reference value based on the new active date and the current state.
-     * @template TValue, TDate
-     * @param {TDate | null} newActiveDate The new value of the date containing the active section.
+     * @template TValue
+     * @param {PickerValidDate | null} newActiveDate The new value of the date containing the active section.
      * @returns {Pick<UseFieldState<TValue, any>, 'value' | 'referenceValue'>} The new value and reference value to publish and store in the state.
      */
-    getNewValuesFromNewActiveDate: (newActiveDate: TDate | null) => Pick<UseFieldState<TValue, any>, 'value' | 'referenceValue'>;
+    getNewValuesFromNewActiveDate: (newActiveDate: PickerValidDate | null) => Pick<UseFieldState<TValue, any>, 'value' | 'referenceValue'>;
 }
 export type FieldParsedSelectedSections = number | 'all' | null;
-export interface FieldValueManager<TValue, TDate extends PickerValidDate, TSection extends FieldSection> {
+export interface FieldValueManager<TValue, TSection extends FieldSection> {
     /**
      * Creates the section list from the current value.
      * The `prevSections` are used on the range fields to avoid losing the sections of a partially filled date when editing the other date.
-     * @template TValue, TDate, TSection
-     * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
+     * @template TValue, TSection
+     * @param {MuiPickersAdapter} utils The utils to manipulate the date.
      * @param {TValue} value The current value to generate sections from.
      * @param {TSection[] | null} fallbackSections The sections to use as a fallback if a date is null or invalid.
-     * @param {(date: TDate) => FieldSection[]} getSectionsFromDate Returns the sections of the given date.
+     * @param {(date: PickerValidDate) => FieldSection[]} getSectionsFromDate Returns the sections of the given date.
      * @returns {TSection[]}  The new section list.
      */
-    getSectionsFromValue: (utils: MuiPickersAdapter<TDate>, value: TValue, fallbackSections: TSection[] | null, getSectionsFromDate: (date: TDate) => FieldSection[]) => TSection[];
+    getSectionsFromValue: (utils: MuiPickersAdapter, value: TValue, fallbackSections: TSection[] | null, getSectionsFromDate: (date: PickerValidDate) => FieldSection[]) => TSection[];
     /**
      * Creates the string value to render in the input based on the current section list.
      * @template TSection
@@ -225,33 +215,33 @@ export interface FieldValueManager<TValue, TDate extends PickerValidDate, TSecti
     getV7HiddenInputValueFromSections: (sections: TSection[]) => string;
     /**
      * Returns the manager of the active date.
-     * @template TValue, TDate, TSection
-     * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
+     * @template TValue, TSection
+     * @param {MuiPickersAdapter} utils The utils to manipulate the date.
      * @param {UseFieldState<TValue, TSection>} state The current state of the field.
      * @param {TSection} activeSection The active section.
-     * @returns {FieldActiveDateManager<TValue, TDate, TSection>} The manager of the active date.
+     * @returns {FieldActiveDateManager<TValue, TSection>} The manager of the active date.
      */
-    getActiveDateManager: (utils: MuiPickersAdapter<TDate>, state: UseFieldState<TValue, TSection>, activeSection: TSection) => FieldActiveDateManager<TValue, TDate, TSection>;
+    getActiveDateManager: (utils: MuiPickersAdapter, state: UseFieldState<TValue, TSection>, activeSection: TSection) => FieldActiveDateManager<TValue, TSection>;
     /**
      * Parses a string version (most of the time coming from the input).
      * This method should only be used when the change does not come from a single section.
-     * @template TValue, TDate
+     * @template TValue
      * @param {string} valueStr The string value to parse.
      * @param {TValue} referenceValue The reference value currently stored in state.
-     * @param {(dateStr: string, referenceDate: TDate) => TDate | null} parseDate A method to convert a string date into a parsed one.
+     * @param {(dateStr: string, referenceDate: PickerValidDate) => PickerValidDate | null} parseDate A method to convert a string date into a parsed one.
      * @returns {TValue} The new parsed value.
      */
-    parseValueStr: (valueStr: string, referenceValue: TValue, parseDate: (dateStr: string, referenceDate: TDate) => TDate | null) => TValue;
+    parseValueStr: (valueStr: string, referenceValue: TValue, parseDate: (dateStr: string, referenceDate: PickerValidDate) => PickerValidDate | null) => TValue;
     /**
      * Update the reference value with the new value.
      * This method must make sure that no date inside the returned `referenceValue` is invalid.
-     * @template TValue, TDate
-     * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
+     * @template TValue
+     * @param {MuiPickersAdapter} utils The utils to manipulate the date.
      * @param {TValue} value The new value from which we want to take all valid dates in the `referenceValue` state.
      * @param {TValue} prevReferenceValue The previous reference value. It is used as a fallback for invalid dates in the new value.
      * @returns {TValue} The new reference value with no invalid date.
      */
-    updateReferenceValue: (utils: MuiPickersAdapter<TDate>, value: TValue, prevReferenceValue: TValue) => TValue;
+    updateReferenceValue: (utils: MuiPickersAdapter, value: TValue, prevReferenceValue: TValue) => TValue;
 }
 export interface UseFieldState<TValue, TSection extends FieldSection> {
     value: TValue;
@@ -327,13 +317,13 @@ export interface UseFieldTextFieldInteractions {
     setSelectedSections: (newSelectedSections: FieldSelectedSections) => void;
     isFieldFocused: () => boolean;
 }
-export type UseFieldTextField<TEnableAccessibleFieldDOMStructure extends boolean> = <TValue, TDate extends PickerValidDate, TSection extends FieldSection, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, TEnableAccessibleFieldDOMStructure, any> & {
+export type UseFieldTextField<TEnableAccessibleFieldDOMStructure extends boolean> = <TValue, TSection extends FieldSection, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, TEnableAccessibleFieldDOMStructure, any> & {
     minutesStep?: number;
-}>(params: UseFieldTextFieldParams<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => {
+}>(params: UseFieldTextFieldParams<TValue, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => {
     interactions: UseFieldTextFieldInteractions;
     returnedValue: TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6AdditionalProps & Required<UseFieldV6ForwardedProps> : UseFieldV7AdditionalProps & Required<UseFieldV7ForwardedProps>;
 };
-interface UseFieldTextFieldParams<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, TEnableAccessibleFieldDOMStructure, any>> extends UseFieldParams<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>, UseFieldStateResponse<TValue, TDate, TSection>, UseFieldCharacterEditingResponse {
+interface UseFieldTextFieldParams<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, TEnableAccessibleFieldDOMStructure, any>> extends UseFieldParams<TValue, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>, UseFieldStateResponse<TValue, TSection>, UseFieldCharacterEditingResponse {
     areAllSectionsEmpty: boolean;
     sectionOrder: SectionOrdering;
 }