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

package/esm/StaticDateTimePicker/StaticDateTimePicker.js

@@ -4,11 +4,15 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDateTimePickerDefaultizedProps } from "../DateTimePicker/shared.js";
-import { renderTimeViewClock } from "../timeViewRenderers/index.js";
+import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useStaticPicker } from "../internals/hooks/useStaticPicker/index.js";
 import { validateDateTime } from "../validation/index.js";
+import { mergeSx } from "../internals/utils/utils.js";
+import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from "../MultiSectionDigitalClock/index.js";
+import { DIALOG_WIDTH, VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { digitalClockClasses } from "../DigitalClock/index.js";
 /**
  * Demos:
  *
@@ -23,19 +27,26 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiStaticDateTimePicker');
   const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';
   const ampmInClock = defaultizedProps.ampmInClock ?? displayStaticWrapperAs === 'desktop';
+  const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
   const viewRenderers = _extends({
     day: renderDateViewCalendar,
     month: renderDateViewCalendar,
     year: renderDateViewCalendar,
-    hours: renderTimeViewClock,
-    minutes: renderTimeViewClock,
-    seconds: renderTimeViewClock
+    hours: renderTimeView,
+    minutes: renderTimeView,
+    seconds: renderTimeView,
+    meridiem: renderTimeView
   }, defaultizedProps.viewRenderers);
 
+  // Need to avoid adding the `meridiem` view when unexpected renderer is specified
+  const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
+  const views = !shouldHoursRendererContainMeridiemView ? defaultizedProps.views.filter(view => view !== 'meridiem') : defaultizedProps.views;
+
   // Props with the default values specific to the static variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
     displayStaticWrapperAs,
+    views,
     ampmInClock,
     yearsPerRow: defaultizedProps.yearsPerRow ?? (displayStaticWrapperAs === 'mobile' ? 3 : 4),
     slotProps: _extends({}, defaultizedProps.slotProps, {
@@ -46,7 +57,28 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
         hidden: displayStaticWrapperAs === 'desktop',
         ampmInClock
       }, defaultizedProps.slotProps?.toolbar)
-    })
+    }),
+    sx: mergeSx([{
+      [`& .${multiSectionDigitalClockClasses.root}`]: {
+        width: DIALOG_WIDTH
+      },
+      [`& .${multiSectionDigitalClockSectionClasses.root}`]: {
+        flex: 1,
+        // account for the border on `MultiSectionDigitalClock`
+        maxHeight: VIEW_HEIGHT - 1,
+        [`.${multiSectionDigitalClockSectionClasses.item}`]: {
+          width: 'auto'
+        }
+      },
+      [`& .${digitalClockClasses.root}`]: {
+        width: DIALOG_WIDTH,
+        maxHeight: VIEW_HEIGHT,
+        flex: 1,
+        [`.${digitalClockClasses.item}`]: {
+          justifyContent: 'center'
+        }
+      }
+    }], defaultizedProps?.sx)
   });
   const {
     renderPicker
@@ -236,7 +268,7 @@ StaticDateTimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  openTo: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Force rendering in particular orientation.
    */
@@ -302,6 +334,11 @@ StaticDateTimePicker.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -316,6 +353,22 @@ StaticDateTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn: PropTypes.number,
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps: PropTypes.shape({
+    hours: PropTypes.number,
+    minutes: PropTypes.number,
+    seconds: PropTypes.number
+  }),
   /**
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
@@ -334,7 +387,7 @@ StaticDateTimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -343,6 +396,7 @@ StaticDateTimePicker.propTypes = {
   viewRenderers: PropTypes.shape({
     day: PropTypes.func,
     hours: PropTypes.func,
+    meridiem: PropTypes.func,
     minutes: PropTypes.func,
     month: PropTypes.func,
     seconds: PropTypes.func,

package/esm/StaticDateTimePicker/StaticDateTimePicker.types.d.ts

@@ -1,10 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from "../DateTimePicker/shared.js";
 import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.js";
-import { DateOrTimeView } from "../models/index.js";
 export interface StaticDateTimePickerSlots extends BaseDateTimePickerSlots, UseStaticPickerSlots {}
 export interface StaticDateTimePickerSlotProps extends BaseDateTimePickerSlotProps, UseStaticPickerSlotProps {}
-export interface StaticDateTimePickerProps extends BaseDateTimePickerProps<DateOrTimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
+export interface StaticDateTimePickerProps extends BaseDateTimePickerProps, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
   /**
    * Overridable component slots.
    * @default {}

package/esm/TimePicker/shared.d.ts

@@ -5,7 +5,7 @@ import { BasePickerInputProps } from "../internals/models/props/basePickerProps.
 import { LocalizedComponent } from "../locales/utils/pickersLocaleTextApi.js";
 import { TimePickerToolbarProps, ExportedTimePickerToolbarProps } from "./TimePickerToolbar.js";
 import { TimeValidationError } from "../models/index.js";
-import { PickerViewRendererLookup } from "../internals/hooks/usePicker/usePickerViews.js";
+import { PickerViewRendererLookup } from "../internals/hooks/usePicker/index.js";
 import { TimeViewRendererProps } from "../timeViewRenderers/index.js";
 import { BaseClockProps, ExportedBaseClockProps } from "../internals/models/props/time.js";
 import { PickerValue, TimeViewWithMeridiem } from "../internals/models/index.js";

package/esm/index.js

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

package/esm/internals/components/PickerFieldUI.js

@@ -154,7 +154,9 @@ export function PickerFieldUI(props) {
         disabled: triggerStatus === 'disabled',
         onClick: handleClickOpeningButton,
         'aria-label': openPickerAriaLabel,
-        edge: clearButtonPosition === 'start' && openPickerButtonPosition === 'start' ? undefined : openPickerButtonPosition
+        edge:
+        // open button is always rendered at the edge
+        textFieldProps.variant !== 'standard' ? openPickerButtonPosition : false
       },
       ownerState
     }),
@@ -176,7 +178,9 @@ export function PickerFieldUI(props) {
         tabIndex: -1,
         onClick: onClear,
         disabled: fieldResponse.disabled || fieldResponse.readOnly,
-        edge: clearButtonPosition === 'end' && openPickerButtonPosition === 'end' ? undefined : clearButtonPosition
+        edge:
+        // clear button can only be at the edge if it's position differs from the open button
+        textFieldProps.variant !== 'standard' && clearButtonPosition !== openPickerButtonPosition ? clearButtonPosition : false
       },
       ownerState
     }),

package/esm/internals/components/PickerPopper/PickerPopper.js

@@ -219,7 +219,7 @@ export function PickerPopper(inProps) {
   } = usePickerContext();
   const {
     dismissViews,
-    doesTheCurrentViewHasAnUI,
+    getCurrentViewMode,
     viewContainerRole
   } = usePickerPrivateContext();
   React.useEffect(() => {
@@ -235,7 +235,7 @@ export function PickerPopper(inProps) {
   }, [dismissViews, open]);
   const lastFocusedElementRef = React.useRef(null);
   React.useEffect(() => {
-    if (viewContainerRole === 'tooltip' || !doesTheCurrentViewHasAnUI()) {
+    if (viewContainerRole === 'tooltip' || getCurrentViewMode() === 'field') {
       return;
     }
     if (open) {
@@ -249,7 +249,7 @@ export function PickerPopper(inProps) {
         }
       });
     }
-  }, [open, viewContainerRole, doesTheCurrentViewHasAnUI]);
+  }, [open, viewContainerRole, getCurrentViewMode]);
   const classes = useUtilityClasses(classesProp);
   const {
     ownerState: pickerOwnerState,

package/esm/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/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.
    */
@@ -41,6 +57,25 @@ export interface PickerContextValue<TValue extends PickerValidValue, TView exten
    * 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 />).
@@ -122,8 +157,85 @@ 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.
    */
@@ -137,4 +249,23 @@ export interface PickerPrivateContextValue extends UsePickerValuePrivateContextV
    * 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/esm/internals/components/PickerProvider.js

@@ -16,7 +16,7 @@ export const PickerPrivateContext = /*#__PURE__*/React.createContext({
   },
   dismissViews: () => {},
   hasUIView: true,
-  doesTheCurrentViewHasAnUI: () => true,
+  getCurrentViewMode: () => 'UI',
   rootRefObject: {
     current: null
   },

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

@@ -2,14 +2,11 @@ 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.
@@ -20,14 +17,14 @@ export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStru
   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 {}
@@ -39,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/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';
@@ -165,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.
@@ -222,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.
@@ -251,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;