@mui/x-date-pickers 8.0.0-alpha.12 → 8.0.0-alpha.14

package/esm/internals/demo/DemoContainer.js

@@ -15,10 +15,10 @@ const getChildTypeFromChildName = childName => {
   if (childName.match(/^Static([A-Za-z]+)/) || childName.match(/^([A-Za-z]+)(Calendar|Clock)$/)) {
     return 'UI-view';
   }
-  if (childName.match(/^MultiInput([A-Za-z]+)RangeField$/) || childName.match(/^([A-Za-z]+)RangePicker$/)) {
+  if (childName.match(/^MultiInput([A-Za-z]+)RangeField$/)) {
     return 'multi-input-range-field';
   }
-  if (childName.match(/^SingleInput([A-Za-z]+)RangeField$/)) {
+  if (childName.match(/^SingleInput([A-Za-z]+)RangeField$/) || childName.match(/^([A-Za-z]+)RangePicker$/)) {
     return 'single-input-range-field';
   }
   return 'single-input-field';
@@ -133,7 +133,7 @@ export function DemoContainer(props) {
           minWidth: {
             xs: 300,
             // If demo also contains MultiInputDateTimeRangeField, increase width to avoid cutting off the value.
-            md: childrenTypes.has('multi-input-range-field') ? 460 : 400
+            md: childrenTypes.has('multi-input-range-field') ? 460 : 440
           }
         }
       };

package/esm/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -4,8 +4,6 @@ const _excluded = ["props"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
-import useForkRef from '@mui/utils/useForkRef';
-import useId from '@mui/utils/useId';
 import { PickerPopper } from "../../components/PickerPopper/PickerPopper.js";
 import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
@@ -29,35 +27,26 @@ export const useDesktopPicker = _ref => {
     slotProps: innerSlotProps,
     label,
     inputRef,
-    readOnly,
-    autoFocus,
     localeText
   } = props;
-  const fieldRef = React.useRef(null);
-  const labelId = useId();
-  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
     providerProps,
     renderCurrentView,
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
-    fieldRef,
     localeText,
     autoFocusView: true,
+    viewContainerRole: 'dialog',
     variant: 'desktop'
   }));
+  const labelId = providerProps.privateContextValue.labelId;
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const Field = slots.field;
   const _useSlotProps = useSlotProps({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
-      additionalProps: _extends({
-        // Internal props
-        readOnly,
-        autoFocus: autoFocus && !props.open,
-        // Forwarded props
-        focused: providerProps.contextValue.open ? true : undefined
-      }, isToolbarHidden && {
+      additionalProps: _extends({}, isToolbarHidden && {
         id: labelId
       }),
       ownerState
@@ -80,18 +69,12 @@ export const useDesktopPicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.popper)
   });
-
-  // TODO: This `as any` will go away once the field ref is handled by the context.
-  const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
     children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
       inputRef: inputRef,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-        unstableFieldRef: handleFieldRef
-      })), /*#__PURE__*/_jsx(PickerPopper, {
-        role: "dialog",
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickerPopper, {
         slots: slots,
         slotProps: slotProps,
         children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {

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

@@ -2,37 +2,29 @@ import * as React from 'react';
 import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { BasePickerProps } from "../../models/props/basePickerProps.js";
 import { PickerPopperSlots, PickerPopperSlotProps } from "../../components/PickerPopper/PickerPopper.js";
-import { UsePickerParams } from "../usePicker/index.js";
+import { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.js";
 import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js";
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
-import { UsePickerValueNonStaticProps } from "../usePicker/usePickerValue.types.js";
-import { UsePickerViewsProps } from "../usePicker/usePickerViews.js";
 import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
 import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
-import { UsePickerProviderNonStaticProps } from "../usePicker/usePickerProvider.js";
 export interface UseDesktopPickerSlots extends Pick<PickerPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
   /**
    * Component used to enter the date with the keyboard.
    */
   field: React.ElementType;
-  /**
-   * Form control with an input to render the value inside the default field.
-   * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
-   */
-  textField?: React.ElementType;
 }
 export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
   field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
 }
 export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
-export interface DesktopOnlyPickerProps extends UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {
+export interface DesktopOnlyPickerProps extends UsePickerNonStaticProps {
   /**
    * If `true`, the `input` element is focused during the first mount.
    * @default false
    */
   autoFocus?: boolean;
 }
-export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<PickerValue, TView, any>> extends BasePickerProps<PickerValue, any, TError, TExternalProps>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
+export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, any, TError, TExternalProps>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
   /**
    * Overridable component slots.
    * @default {}
@@ -44,6 +36,6 @@ export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem,
    */
   slotProps?: UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
+export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
   props: TExternalProps;
 }

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

@@ -1,5 +1,4 @@
 export { useField } from "./useField.js";
 export type { FieldValueManager, UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldChangeHandler, FieldChangeHandlerContext } from './useField.types';
 export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
-export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";
-export type { PickerFieldPrivateContextValue } from './useFieldInternalPropsWithDefaults';
+export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";

package/esm/internals/hooks/useField/useField.js

@@ -29,7 +29,6 @@ export const useField = params => {
       onClear
     },
     fieldValueManager,
-    valueManager,
     validator,
     getOpenPickerButtonAriaLabel: getOpenDialogAriaText
   } = params;
@@ -37,6 +36,7 @@ export const useField = params => {
   const stateResponse = useFieldState(params);
   const {
     state,
+    value,
     activeSectionIndex,
     parsedSelectedSections,
     setSelectedSections,
@@ -59,7 +59,7 @@ export const useField = params => {
   const {
     resetCharacterQuery
   } = characterEditingResponse;
-  const areAllSectionsEmpty = valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
+  const areAllSectionsEmpty = React.useMemo(() => state.sections.every(section => section.value === ''), [state.sections]);
   const useFieldTextField = enableAccessibleFieldDOMStructure ? useFieldV7TextField : useFieldV6TextField;
   const sectionOrder = React.useMemo(() => getSectionOrder(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
   const {
@@ -149,12 +149,11 @@ export const useField = params => {
             setSelectedSections(activeSectionIndex);
           }
           const activeSection = state.sections[activeSectionIndex];
-          const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, activeDateManager.date, {
+          const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, fieldValueManager.getDateFromSection(value, activeSection), {
             minutesStep
           });
           updateSectionValue({
-            activeSection,
+            section: activeSection,
             newSectionValue,
             shouldGoToNextSection: false
           });
@@ -171,7 +170,7 @@ export const useField = params => {
     props: internalProps,
     validator,
     timezone,
-    value: state.value,
+    value,
     onError: internalProps.onError
   });
   const inputError = React.useMemo(() => {
@@ -225,8 +224,8 @@ export const useField = params => {
   };
   const localizationContext = useLocalizationContext();
   const openPickerAriaLabel = React.useMemo(() => getOpenDialogAriaText(_extends({}, localizationContext, {
-    value: state.value
-  })), [getOpenDialogAriaText, state.value, localizationContext]);
+    value
+  })), [getOpenDialogAriaText, value, localizationContext]);
   const commonAdditionalProps = {
     disabled,
     readOnly,

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferError, InferFieldSection, PickerValueType } from "../../../models/index.js";
-import type { PickerValueManager } from '../usePicker';
+import type { PickerValueManager } from '../../models';
 import type { Validator } from '../../../validation';
 import type { UseFieldStateResponse } from './useFieldState';
 import type { UseFieldCharacterEditingResponse } from './useFieldCharacterEditing';
@@ -96,6 +96,10 @@ export interface UseFieldInternalProps<TValue extends PickerValidValue, TEnableA
    * @default false
    */
   autoFocus?: boolean;
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused?: boolean;
 }
 export interface UseFieldCommonAdditionalProps extends Required<Pick<UseFieldInternalProps<any, any, any>, 'disabled' | 'readOnly' | 'autoFocus'>> {
   /**
@@ -110,21 +114,22 @@ export interface UseFieldCommonForwardedProps extends Pick<ExportedPickerFieldUI
 export type UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure extends boolean> = UseFieldCommonForwardedProps & (TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps);
 export interface UseFieldV6ForwardedProps {
   inputRef?: React.Ref<HTMLInputElement>;
-  onBlur?: () => void;
+  onBlur?: React.FocusEventHandler;
   onClick?: React.MouseEventHandler;
-  onFocus?: () => void;
+  onFocus?: React.FocusEventHandler;
   onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
   placeholder?: string;
 }
 interface UseFieldV6AdditionalProps extends Required<Pick<React.InputHTMLAttributes<HTMLInputElement>, 'inputMode' | 'placeholder' | 'value' | 'onChange' | 'autoComplete'>> {
   enableAccessibleFieldDOMStructure: false;
+  focused?: boolean;
 }
 export interface UseFieldV7ForwardedProps {
   focused?: boolean;
   sectionListRef?: React.Ref<PickersSectionListRef>;
-  onBlur?: () => void;
+  onBlur?: React.FocusEventHandler;
   onClick?: React.MouseEventHandler;
-  onFocus?: () => void;
+  onFocus?: React.FocusEventHandler;
   onInput?: React.FormEventHandler<HTMLDivElement>;
   onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
 }
@@ -136,6 +141,7 @@ interface UseFieldV7AdditionalProps {
   value: string;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
   areAllSectionsEmpty: boolean;
+  focused: boolean;
 }
 export type UseFieldResponse<TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & {
   [key: string]: any;
@@ -159,47 +165,17 @@ export type FieldChangeHandler<TValue extends PickerValidValue, TError> = (value
 export interface FieldChangeHandlerContext<TError> {
   validationError: 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 extends PickerValidValue> {
-  /**
-   * Active date from `state.value`.
-   */
-  date: PickerValidDate | null;
-  /**
-   * Active date from the `state.referenceValue`.
-   */
-  referenceDate: PickerValidDate;
-  /**
-   * @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.
-   * @param  {InferFieldSection<TValue>[]} sections The sections of the full value.
-   * @returns {InferFieldSection<TValue>[]} The sections of the active date.
-   * Get the sections of the active date.
-   */
-  getSections: (sections: InferFieldSection<TValue>[]) => InferFieldSection<TValue>[];
-  /**
-   * Creates the new value and reference value based on the new active date and the current state.
-   * @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.
-   * @param {PickerValidDate | null} newActiveDate The new value of the date containing the active section.
-   * @returns {Pick<UseFieldState<TValue>, 'value' | 'referenceValue'>} The new value and reference value to publish and store in the state.
-   */
-  getNewValuesFromNewActiveDate: (newActiveDate: PickerValidDate | null) => Pick<UseFieldState<TValue>, 'value' | 'referenceValue'>;
-}
 export type FieldParsedSelectedSections = number | 'all' | null;
 export interface FieldValueManager<TValue extends PickerValidValue> {
   /**
    * 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 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.
-   * @param {MuiPickersAdapter} utils The utils to manipulate the date.
    * @param {TValue} value The current value to generate sections from.
-   * @param {InferFieldSection<TValue>[] | null} fallbackSections The sections to use as a fallback if a date is null or invalid.
-   * @param {(date: PickerValidDate) => FieldSection[]} getSectionsFromDate Returns the sections of the given date.
+   * @param {(date: PickerValidDate | null) => FieldSection[]} getSectionsFromDate Returns the sections of the given date.
    * @returns {InferFieldSection<TValue>[]}  The new section list.
    */
-  getSectionsFromValue: (utils: MuiPickersAdapter, value: TValue, fallbackSections: InferFieldSection<TValue>[] | null, getSectionsFromDate: (date: PickerValidDate) => FieldSection[]) => InferFieldSection<TValue>[];
+  getSectionsFromValue: (value: TValue, getSectionsFromDate: (date: PickerValidDate | null) => FieldSection[]) => InferFieldSection<TValue>[];
   /**
    * Creates the string value to render in the input based on the current section list.
    * @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.
@@ -216,15 +192,6 @@ export interface FieldValueManager<TValue extends PickerValidValue> {
    * @returns {string} The string value to render in the input.
    */
   getV7HiddenInputValueFromSections: (sections: InferFieldSection<TValue>[]) => string;
-  /**
-   * Returns the manager of the active date.
-   * @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.
-   * @param {MuiPickersAdapter} utils The utils to manipulate the date.
-   * @param {UseFieldState<TValue>} state The current state of the field.
-   * @param {InferFieldSection<TValue>} activeSection The active section.
-   * @returns {FieldActiveDateManager<TValue>} The manager of the active date.
-   */
-  getActiveDateManager: (utils: MuiPickersAdapter, state: UseFieldState<TValue>, activeSection: InferFieldSection<TValue>) => FieldActiveDateManager<TValue>;
   /**
    * 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.
@@ -245,9 +212,51 @@ export interface FieldValueManager<TValue extends PickerValidValue> {
    * @returns {TValue} The new reference value with no invalid date.
    */
   updateReferenceValue: (utils: MuiPickersAdapter, value: TValue, prevReferenceValue: InferNonNullablePickerValue<TValue>) => InferNonNullablePickerValue<TValue>;
+  /**
+   * Extract from the given value the date that contains the given section.
+   * @param {TValue} value The value to extract the date from.
+   * @param {InferFieldSection<TValue>} section The section to get the date from.
+   * @returns {PickerValidDate | null} The date that contains the section.
+   */
+  getDateFromSection: (value: TValue, section: InferFieldSection<TValue>) => PickerValidDate | null;
+  /**
+   * Get the sections of the date that contains the given section.
+   * @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.
+   * @param  {InferFieldSection<TValue>[]} sections The sections of the full value.
+   * @param {InferFieldSection<TValue>} section A section of the date from which we want to get all the sections.
+   * @returns {InferFieldSection<TValue>[]} The sections of the date that contains the section.
+   */
+  getDateSectionsFromValue: (sections: InferFieldSection<TValue>[], section: InferFieldSection<TValue>) => InferFieldSection<TValue>[];
+  /**
+   * Creates a new value based on the provided date and the current value.
+   * @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.
+   * @param {TValue} value The value to update the date in.
+   * @param {InferFieldSection<TValue>} section A section of the date we want to update in the value.
+   * @param {PickerValidDate | null} date The date that contains the section.
+   * @returns {TValue} The updated value.
+   */
+  updateDateInValue: (value: TValue, section: InferFieldSection<TValue>, date: PickerValidDate | null) => TValue;
+  /**
+   * @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.
+   * @param {InferFieldSection<TValue>[]} sections The sections of the full value.
+   * @param {InferFieldSection<TValue>} section A section of the date from which we want to clear all the sections.
+   * @returns {InferFieldSection<TValue>[]} The sections of the full value with all the sections of the target date cleared.
+   */
+  clearDateSections: (sections: InferFieldSection<TValue>[], section: InferFieldSection<TValue>) => InferFieldSection<TValue>[];
 }
 export interface UseFieldState<TValue extends PickerValidValue> {
-  value: TValue;
+  /**
+   * Last value returned by `useControlledValueWithTimezone`.
+   */
+  lastValue: TValue | undefined;
+  /**
+   * Last value of the parameters used to generate the sections.
+   */
+  lastSectionsDependencies: {
+    format: string;
+    isRtl: boolean;
+    locale: any;
+  };
   /**
    * Non-nullable value used to keep trace of the timezone and the date parts not present in the format.
    * It is updated whenever we have a valid date (for the range picker we update only the portion of the range that is valid).

package/esm/internals/hooks/useField/useField.utils.js

@@ -447,8 +447,11 @@ const transferDateSectionValue = (utils, section, dateToTransferFrom, dateToTran
       }
     case 'weekDay':
       {
+        let dayInWeekStrOfActiveDate = utils.formatByString(dateToTransferFrom, section.format);
+        if (section.hasLeadingZerosInInput) {
+          dayInWeekStrOfActiveDate = cleanLeadingZeros(dayInWeekStrOfActiveDate, section.maxLength);
+        }
         const formattedDaysInWeek = getDaysInWeekStr(utils, section.format);
-        const dayInWeekStrOfActiveDate = utils.formatByString(dateToTransferFrom, section.format);
         const dayInWeekOfActiveDate = formattedDaysInWeek.indexOf(dayInWeekStrOfActiveDate);
         const dayInWeekOfNewSectionValue = formattedDaysInWeek.indexOf(section.value);
         const diff = dayInWeekOfNewSectionValue - dayInWeekOfActiveDate;

package/esm/internals/hooks/useField/useFieldCharacterEditing.js

@@ -236,7 +236,7 @@ export const useFieldCharacterEditing = ({
     return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => isStringNumber(queryValue, localizedDigits));
   };
   const applyCharacterEditing = useEventCallback(params => {
-    const activeSection = sections[params.sectionIndex];
+    const section = sections[params.sectionIndex];
     const isNumericEditing = isStringNumber(params.keyPressed, localizedDigits);
     const response = isNumericEditing ? applyNumericEditing(_extends({}, params, {
       keyPressed: applyLocalizedDigits(params.keyPressed, localizedDigits)
@@ -246,7 +246,7 @@ export const useFieldCharacterEditing = ({
       return;
     }
     updateSectionValue({
-      activeSection,
+      section,
       newSectionValue: response.sectionValue,
       shouldGoToNextSection: response.shouldGoToNextSection
     });

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

@@ -1,17 +1,17 @@
-import * as React from 'react';
-import type { UseFieldInternalProps } from './useField.types';
 import { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from "../../models/index.js";
-export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
 /**
  * Applies the default values to the field internal props.
  * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
  * It is only here to allow the migration to be done in smaller steps.
  */
-export declare function useFieldInternalPropsWithDefaults<TManager extends PickerAnyManager>({
-  manager,
-  internalProps
-}: {
+export declare function useFieldInternalPropsWithDefaults<TManager extends PickerAnyManager>(parameters: UseFieldInternalPropsWithDefaultsParameters<TManager>): PickerManagerFieldInternalPropsWithDefaults<TManager>;
+interface UseFieldInternalPropsWithDefaultsParameters<TManager extends PickerAnyManager> {
   manager: TManager;
   internalProps: PickerManagerFieldInternalProps<TManager>;
-}): PickerManagerFieldInternalPropsWithDefaults<TManager>;
-export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {}
+  /**
+   * Hack to make sure that on multi input range field, the `useNullableFieldPrivateContext().fieldRef` is only bound to the field matching the range position.
+   * @default false
+   */
+  skipContextFieldRefAssignment?: boolean;
+}
+export {};

package/esm/internals/hooks/useField/useFieldInternalPropsWithDefaults.js

@@ -1,21 +1,25 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
 import { useLocalizationContext } from "../useUtils.js";
 import { useNullablePickerContext } from "../useNullablePickerContext.js";
-export const PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
+import { useNullableFieldPrivateContext } from "../useNullableFieldPrivateContext.js";
 
 /**
  * Applies the default values to the field internal props.
  * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
  * It is only here to allow the migration to be done in smaller steps.
  */
-export function useFieldInternalPropsWithDefaults({
-  manager,
-  internalProps
-}) {
+export function useFieldInternalPropsWithDefaults(parameters) {
+  const {
+    manager,
+    internalProps,
+    skipContextFieldRefAssignment
+  } = parameters;
   const localizationContext = useLocalizationContext();
   const pickerContext = useNullablePickerContext();
-  const fieldPrivateContext = React.useContext(PickerFieldPrivateContext);
+  const fieldPrivateContext = useNullableFieldPrivateContext();
+  const handleFieldRef = useForkRef(internalProps.unstableFieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.fieldRef);
   const setValue = pickerContext?.setValue;
   const handleChangeFromPicker = React.useCallback((newValue, ctx) => {
     return setValue?.(newValue, {
@@ -33,15 +37,19 @@ export function useFieldInternalPropsWithDefaults({
         onChange: handleChangeFromPicker,
         timezone: pickerContext.timezone,
         disabled: pickerContext.disabled,
+        readOnly: pickerContext.readOnly,
+        autoFocus: pickerContext.autoFocus && !pickerContext.open,
+        focused: pickerContext.open ? true : undefined,
         format: pickerContext.fieldFormat,
         formatDensity: fieldPrivateContext.formatDensity,
         enableAccessibleFieldDOMStructure: fieldPrivateContext.enableAccessibleFieldDOMStructure,
         selectedSections: fieldPrivateContext.selectedSections,
-        onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange
+        onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange,
+        unstableFieldRef: handleFieldRef
       }, internalProps);
     }
     return manager.internal_applyDefaultsToFieldInternalProps(_extends({}, localizationContext, {
       internalProps: internalPropsWithDefaultsFromContext
     }));
-  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker]);
+  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker, handleFieldRef]);
 }

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

@@ -5,7 +5,7 @@ export interface UpdateSectionValueParams<TValue extends PickerValidValue> {
   /**
    * The section on which we want to apply the new value.
    */
-  activeSection: InferFieldSection<TValue>;
+  section: InferFieldSection<TValue>;
   /**
    * Value to apply to the active section.
    */
@@ -17,6 +17,7 @@ export interface UpdateSectionValueParams<TValue extends PickerValidValue> {
 }
 export interface UseFieldStateResponse<TValue extends PickerValidValue> {
   state: UseFieldState<TValue>;
+  value: TValue;
   activeSectionIndex: number | null;
   parsedSelectedSections: FieldParsedSelectedSections;
   setSelectedSections: (sections: FieldSelectedSections) => void;