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

package/internals/components/PickerProvider.d.ts

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
-import { PickerOwnerState } from "../../models/index.js";
+import { PickerChangeImportance, PickerOwnerState, PickersTimezone } from "../../models/index.js";
 import { PickersInputLocaleText } from "../../locales/index.js";
 import { DateOrTimeViewWithMeridiem, PickerOrientation, PickerValidValue, PickerVariant } from "../models/index.js";
-import type { UsePickerValueActionsContextValue, UsePickerValueContextValue, UsePickerValuePrivateContextValue } from '../hooks/usePicker/usePickerValue.types';
-import { UsePickerViewsActionsContextValue, UsePickerViewsContextValue, UsePickerViewsPrivateContextValue } from "../hooks/usePicker/usePickerViews.js";
-import { PickerFieldPrivateContextValue } from "../hooks/useField/useFieldInternalPropsWithDefaults.js";
+import { PickerFieldPrivateContextValue } from "../hooks/useNullableFieldPrivateContext.js";
+import type { PickersShortcutsItemContext } from '../../PickersShortcuts';
 export declare const PickerActionsContext: React.Context<PickerActionsContextValue<any, any, any> | null>;
 export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
 /**
@@ -26,7 +25,24 @@ export interface PickerProviderProps<TValue extends PickerValidValue> {
   localeText: PickersInputLocaleText | undefined;
   children: React.ReactNode;
 }
-export interface PickerContextValue<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends UsePickerValueContextValue<TValue, TError>, UsePickerViewsContextValue<TView> {
+export interface PickerContextValue<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends PickerActionsContextValue<TValue, TView, TError> {
+  /**
+   * The current value of the picker.
+   */
+  value: TValue;
+  /**
+   * The timezone to use when rendering the dates.
+   * If a `timezone` prop is provided, it will be used.
+   * If the `value` prop contains a valid date, its timezone will be used.
+   * If no `value` prop is provided, but the `defaultValue` contains a valid date, its timezone will be used.
+   * If no `value` or `defaultValue` is provided, but the `referenceDate` is provided, its timezone will be used.
+   * Otherwise, the timezone will be the default one of your date library.
+   */
+  timezone: PickersTimezone;
+  /**
+   * Whether the picker is open.
+   */
+  open: boolean;
   /**
    * Whether the picker is disabled.
    */
@@ -35,6 +51,31 @@ export interface PickerContextValue<TValue extends PickerValidValue, TView exten
    * Whether the picker is read-only.
    */
   readOnly: boolean;
+  /**
+   * Whether the picker should be focused on mount.
+   * If the picker has a field and is not open, the field should be focused.
+   * If the picker does not have a field (if it is a static picker) or is not open, the view should be focused.
+   */
+  autoFocus: boolean;
+  /**
+   * The views that the picker has to render.
+   * It is equal to the picker `views` prop—if defined.
+   * Otherwise, a default set of views is provided based on the component you are using:
+   * - Date Pickers: ['year', 'day']
+   * - Time Pickers: ['hours', 'minutes']
+   * - Date Time Pickers: ['year', 'day', 'hours', 'minutes']
+   * - Date Range Pickers: ['day']
+   * - Date Time Range Pickers: ['day', 'hours', 'minutes']
+   */
+  views: readonly TView[];
+  /**
+   * The currently rendered view.
+   */
+  view: TView | null;
+  /**
+   * The view showed when first opening the picker.
+   */
+  initialView: TView | null;
   /**
    * The responsive variant of the picker.
    * It is equal to "desktop" when using a desktop picker (like <DesktopDatePicker />).
@@ -68,6 +109,11 @@ export interface PickerContextValue<TValue extends PickerValidValue, TView exten
    * If it is "enabled", the field should render an interactive UI to open the Picker.
    */
   triggerStatus: 'hidden' | 'disabled' | 'enabled';
+  /**
+   * The ref to attach to the popup's outermost element that contains the view, if any.
+   * When using a built-in popup component, this property is automatically attached to the appropriate element.
+   */
+  popupRef: React.RefObject<any>;
   /**
    * The format to use when rendering the value in the field.
    * It is equal to the picker `format` prop if defined.
@@ -111,10 +157,115 @@ export interface PickerContextValue<TValue extends PickerValidValue, TView exten
    */
   rootRef: React.ForwardedRef<HTMLDivElement> | undefined;
 }
-export interface PickerActionsContextValue<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError = string | null> extends UsePickerValueActionsContextValue<TValue, TError>, UsePickerViewsActionsContextValue<TView> {}
-export interface PickerPrivateContextValue extends UsePickerValuePrivateContextValue, UsePickerViewsPrivateContextValue {
+export interface PickerActionsContextValue<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError = string | null> {
+  /**
+   * Set the current value of the picker.
+   * @param {TValue} value The new value of the picker.
+   * @param {SetValueActionOptions<TError>} options The options to customize the behavior of this update.
+   */
+  setValue: (value: TValue, options?: SetValueActionOptions<TError>) => void;
+  /**
+   * Set the current open state of the Picker.
+   * It can be a function that will receive the current open state as parameter.
+   * ```ts
+   * setOpen(true); // Opens the picker.
+   * setOpen(false); // Closes the picker.
+   * setOpen((prevOpen) => !prevOpen); // Toggles the open state.
+   * ```
+   * @param {React.SetStateAction<boolean>} action The new open state of the Picker.
+   */
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  /**
+   * Set the current view.
+   * @template TView
+   * @param {TView} view The view to render
+   */
+  setView: (view: TView) => void;
+  /**
+   * Set the current value of the picker to be empty.
+   * The value will be `null` on single pickers and `[null, null]` on range pickers.
+   */
+  clearValue: () => void;
+  /**
+   * Set the current value of the picker to be the current date.
+   * The value will be `today` on single pickers and `[today, today]` on range pickers.
+   * With `today` being the current date, with its time set to `00:00:00` on Date Pickers and its time set to the current time on Time and Date Pickers.
+   */
+  setValueToToday: () => void;
+  /**
+   * Accept the current value of the picker.
+   * Will call `onAccept` if defined.
+   * If the picker is re-opened, this value will be the one used to initialize the views.
+   */
+  acceptValueChanges: () => void;
+  /**
+   * Cancel the changes made to the current value of the picker.
+   * The value will be reset to the last accepted value.
+   */
+  cancelValueChanges: () => void;
+}
+export interface SetValueActionOptions<TError = string | null> {
+  /**
+   * The importance of the change when picking a value:
+   * - "accept": fires `onChange`, fires `onAccept` and closes the picker.
+   * - "set": fires `onChange` but do not fire `onAccept` and does not close the picker.
+   * @default "accept"
+   */
+  changeImportance?: PickerChangeImportance;
+  /**
+   * The validation error associated to the current value.
+   * If not defined, the validation will be computed by the picker.
+   */
+  validationError?: TError;
+  /**
+   * The shortcut that triggered this change.
+   * It should not be defined if the change does not come from a shortcut.
+   */
+  shortcut?: PickersShortcutsItemContext;
+  /**
+   * Whether the value should call `onChange` and `onAccept` when the value is not controlled and has never been modified.
+   * If `true`, the `onChange` and `onAccept` callback will only be fired if the value has been modified (and is not equal to the last published value).
+   * If `false`, the `onChange` and `onAccept` callback will be fired when the value has never been modified (`onAccept` only if `changeImportance` is set to "accept").
+   * @default false
+   */
+  skipPublicationIfPristine?: boolean;
+  /**
+   * Whether the picker should close.
+   * @default changeImportance === "accept"
+   */
+  shouldClose?: boolean;
+}
+export interface PickerPrivateContextValue {
   /**
    * The ownerState of the picker.
    */
   ownerState: PickerOwnerState;
+  /**
+   * The ref of the root element.
+   * This is the object counterpart of the `usePickerContext().rootRef` property which can be a function.
+   */
+  rootRefObject: React.RefObject<HTMLDivElement | null>;
+  /**
+   * The id of the label element.
+   */
+  labelId: string | undefined;
+  dismissViews: () => void;
+  /**
+   * Whether at least one view has an UI (it has a view renderer associated).
+   */
+  hasUIView: boolean;
+  /**
+   * Return the mode of the current view.
+   * @returns {boolean} The mode of the current view.
+   */
+  getCurrentViewMode: () => 'UI' | 'field';
+  /**
+   * The aria role associated with the view container.
+   * It is equal to "dialog" when the view is rendered inside a `@mui/material/Dialog`.
+   * It is equal to "dialog" when the view is rendered inside a `@mui/material/Popper` and the focus is trapped inside the view.
+   * It is equal to "tooltip" when the view is rendered inside a `@mui/material/Popper` and the focus remains inside the field.
+   * It is always equal to null if the picker does not have a field (static pickers).
+   * It is always equal to null if the component you are accessing the context from is not wrapped by a picker.
+   */
+  viewContainerRole: 'dialog' | 'tooltip' | null;
 }

package/internals/components/PickerProvider.js

@@ -9,7 +9,7 @@ exports.PickerProvider = PickerProvider;
 var React = _interopRequireWildcard(require("react"));
 var _LocalizationProvider = require("../../LocalizationProvider");
 var _useIsValidValue = require("../../hooks/useIsValidValue");
-var _useFieldInternalPropsWithDefaults = require("../hooks/useField/useFieldInternalPropsWithDefaults");
+var _useNullableFieldPrivateContext = require("../hooks/useNullableFieldPrivateContext");
 var _usePickerContext = require("../../hooks/usePickerContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const PickerActionsContext = exports.PickerActionsContext = /*#__PURE__*/React.createContext(null);
@@ -24,7 +24,12 @@ const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.c
   },
   dismissViews: () => {},
   hasUIView: true,
-  doesTheCurrentViewHasAnUI: () => true
+  getCurrentViewMode: () => 'UI',
+  rootRefObject: {
+    current: null
+  },
+  viewContainerRole: null,
+  labelId: undefined
 });
 
 /**
@@ -50,7 +55,7 @@ function PickerProvider(props) {
       value: actionsContextValue,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerPrivateContext.Provider, {
         value: privateContextValue,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useFieldInternalPropsWithDefaults.PickerFieldPrivateContext.Provider, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useNullableFieldPrivateContext.PickerFieldPrivateContext.Provider, {
           value: fieldPrivateContextValue,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useIsValidValue.IsValidValueContext.Provider, {
             value: isValidContextValue,

package/internals/demo/DemoContainer.js

@@ -24,10 +24,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';
@@ -142,7 +142,7 @@ 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/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -10,8 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _PickerPopper = require("../../components/PickerPopper/PickerPopper");
 var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
@@ -36,35 +34,26 @@ const useDesktopPicker = _ref => {
     slotProps: innerSlotProps,
     label,
     inputRef,
-    readOnly,
-    autoFocus,
     localeText
   } = props;
-  const fieldRef = React.useRef(null);
-  const labelId = (0, _useId.default)();
-  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
     providerProps,
     renderCurrentView,
     ownerState
   } = (0, _usePicker.usePicker)((0, _extends2.default)({}, 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 = (0, _useSlotProps2.default)({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
-      additionalProps: (0, _extends2.default)({
-        // Internal props
-        readOnly,
-        autoFocus: autoFocus && !props.open,
-        // Forwarded props
-        focused: providerProps.contextValue.open ? true : undefined
-      }, isToolbarHidden && {
+      additionalProps: (0, _extends2.default)({}, isToolbarHidden && {
         id: labelId
       }),
       ownerState
@@ -87,18 +76,12 @@ 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 = (0, _useForkRef.default)(fieldRef, fieldProps.unstableFieldRef);
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerFieldUI.PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
       inputRef: inputRef,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
-        unstableFieldRef: handleFieldRef
-      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerPopper.PickerPopper, {
-        role: "dialog",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerPopper.PickerPopper, {
         slots: slots,
         slotProps: slotProps,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {

package/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/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/internals/hooks/useField/useField.js

@@ -37,7 +37,6 @@ const useField = params => {
       onClear
     },
     fieldValueManager,
-    valueManager,
     validator,
     getOpenPickerButtonAriaLabel: getOpenDialogAriaText
   } = params;
@@ -45,6 +44,7 @@ const useField = params => {
   const stateResponse = (0, _useFieldState.useFieldState)(params);
   const {
     state,
+    value,
     activeSectionIndex,
     parsedSelectedSections,
     setSelectedSections,
@@ -67,7 +67,7 @@ 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.useFieldV7TextField : _useFieldV6TextField.useFieldV6TextField;
   const sectionOrder = React.useMemo(() => (0, _useField.getSectionOrder)(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
   const {
@@ -157,12 +157,11 @@ const useField = params => {
             setSelectedSections(activeSectionIndex);
           }
           const activeSection = state.sections[activeSectionIndex];
-          const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          const newSectionValue = (0, _useField.adjustSectionValue)(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, activeDateManager.date, {
+          const newSectionValue = (0, _useField.adjustSectionValue)(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, fieldValueManager.getDateFromSection(value, activeSection), {
             minutesStep
           });
           updateSectionValue({
-            activeSection,
+            section: activeSection,
             newSectionValue,
             shouldGoToNextSection: false
           });
@@ -179,7 +178,7 @@ const useField = params => {
     props: internalProps,
     validator,
     timezone,
-    value: state.value,
+    value,
     onError: internalProps.onError
   });
   const inputError = React.useMemo(() => {
@@ -233,8 +232,8 @@ const useField = params => {
   };
   const localizationContext = (0, _useUtils.useLocalizationContext)();
   const openPickerAriaLabel = React.useMemo(() => getOpenDialogAriaText((0, _extends2.default)({}, localizationContext, {
-    value: state.value
-  })), [getOpenDialogAriaText, state.value, localizationContext]);
+    value
+  })), [getOpenDialogAriaText, value, localizationContext]);
   const commonAdditionalProps = {
     disabled,
     readOnly,

package/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/internals/hooks/useField/useField.utils.js

@@ -471,8 +471,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/internals/hooks/useField/useFieldCharacterEditing.js

@@ -243,7 +243,7 @@ const useFieldCharacterEditing = ({
     return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => (0, _useField.isStringNumber)(queryValue, localizedDigits));
   };
   const applyCharacterEditing = (0, _useEventCallback.default)(params => {
-    const activeSection = sections[params.sectionIndex];
+    const section = sections[params.sectionIndex];
     const isNumericEditing = (0, _useField.isStringNumber)(params.keyPressed, localizedDigits);
     const response = isNumericEditing ? applyNumericEditing((0, _extends2.default)({}, params, {
       keyPressed: (0, _useField.applyLocalizedDigits)(params.keyPressed, localizedDigits)
@@ -253,7 +253,7 @@ const useFieldCharacterEditing = ({
       return;
     }
     updateSectionValue({
-      activeSection,
+      section,
       newSectionValue: response.sectionValue,
       shouldGoToNextSection: response.shouldGoToNextSection
     });