@mui/x-date-pickers 8.0.0-beta.3 → 8.0.0

package/esm/internals/hooks/usePicker/usePicker.js

@@ -20,6 +20,7 @@ export const usePicker = ({
   valueType,
   variant,
   validator,
+  onPopperExited,
   autoFocusView,
   rendererInterceptor: RendererInterceptor,
   localeText,
@@ -36,6 +37,7 @@ export const usePicker = ({
     reduceAnimations: reduceAnimationsProp,
     orientation: orientationProp,
     disableOpenPicker,
+    closeOnSelect,
     // Form props
     disabled,
     readOnly,
@@ -95,14 +97,18 @@ export const usePicker = ({
     defaultView,
     focusedView,
     setFocusedView,
-    setValueAndGoToNextView
+    setValueAndGoToNextView,
+    goToNextStep,
+    hasNextStep,
+    hasSeveralSteps
   } = useViews({
     view: viewProp,
     views,
     openTo,
     onChange: setValueFromView,
     onViewChange,
-    autoFocus: autoFocusView
+    autoFocus: autoFocusView,
+    getStepNavigation
   });
   const clearValue = useEventCallback(() => setValue(valueManager.emptyValue));
   const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(utils, timezone, valueType)));
@@ -191,13 +197,13 @@ export const usePicker = ({
     }
     return 'enabled';
   }, [disableOpenPicker, hasUIView, disabled, readOnly]);
-  const stepNavigation = getStepNavigation({
-    setView,
-    view,
-    initialView: initialView ?? views[0],
-    views
-  });
-  const wrappedGoToNextStep = useEventCallback(stepNavigation.goToNextStep);
+  const wrappedGoToNextStep = useEventCallback(goToNextStep);
+  const defaultActionBarActions = React.useMemo(() => {
+    if (closeOnSelect && !hasSeveralSteps) {
+      return [];
+    }
+    return ['cancel', 'nextOrAccept'];
+  }, [closeOnSelect, hasSeveralSteps]);
   const actionsContextValue = React.useMemo(() => ({
     setValue,
     setOpen,
@@ -224,14 +230,14 @@ export const usePicker = ({
     reduceAnimations,
     triggerRef,
     triggerStatus,
-    hasNextStep: stepNavigation.hasNextStep,
+    hasNextStep,
     fieldFormat: format ?? '',
     name,
     label,
     rootSx: sx,
     rootRef,
     rootClassName: className
-  }), [actionsContextValue, value, rootRef, variant, orientation, reduceAnimations, disabled, readOnly, format, className, name, label, sx, triggerStatus, stepNavigation.hasNextStep, timezone, state.open, popperView, views, initialView, autoFocus]);
+  }), [actionsContextValue, value, rootRef, variant, orientation, reduceAnimations, disabled, readOnly, format, className, name, label, sx, triggerStatus, hasNextStep, timezone, state.open, popperView, views, initialView, autoFocus]);
   const privateContextValue = React.useMemo(() => ({
     dismissViews,
     ownerState,
@@ -240,8 +246,10 @@ export const usePicker = ({
     rootRefObject,
     labelId,
     triggerElement,
-    viewContainerRole
-  }), [dismissViews, ownerState, hasUIView, getCurrentViewMode, labelId, triggerElement, viewContainerRole]);
+    viewContainerRole,
+    defaultActionBarActions,
+    onPopperExited
+  }), [dismissViews, ownerState, hasUIView, getCurrentViewMode, labelId, triggerElement, viewContainerRole, defaultActionBarActions, onPopperExited]);
   const fieldPrivateContextValue = React.useMemo(() => ({
     formatDensity,
     enableAccessibleFieldDOMStructure,

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

@@ -12,7 +12,7 @@ import { CreateStepNavigationReturnValue } from "../../utils/createStepNavigatio
  * Props common to all Picker headless implementations.
  * Those props are exposed on all the Pickers.
  */
-export interface UsePickerBaseProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<TValue, TView, TError, any>> extends OnErrorProps<TValue, TError>, Omit<UseViewsOptions<any, TView>, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps, FormProps {
+export interface UsePickerBaseProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<TValue, TView, TError, any>> extends OnErrorProps<TValue, TError>, Omit<UseViewsOptions<any, TView>, 'onChange' | 'onFocusedViewChange' | 'focusedView' | 'getStepNavigation'>, TimezoneProps, FormProps {
   /**
    * The selected value.
    * Used when the component is controlled.
@@ -90,7 +90,7 @@ export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextV
   format?: string;
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
-   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker?: boolean;
@@ -132,6 +132,7 @@ export interface UsePickerParameters<TValue extends PickerValidValue, TView exte
   rendererInterceptor?: React.JSXElementConstructor<PickerRendererInterceptorProps<TValue, TView, TExternalProps>>;
   props: TExternalProps;
   getStepNavigation: CreateStepNavigationReturnValue;
+  onPopperExited?: () => void;
 }
 export interface UsePickerReturnValue<TValue extends PickerValidValue> {
   ownerState: PickerOwnerState;

package/esm/internals/hooks/useViews.d.ts

@@ -2,6 +2,7 @@ import { MakeOptional } from '@mui/x-internals/types';
 import type { PickerSelectionState } from './usePicker';
 import { DateOrTimeViewWithMeridiem, PickerValidValue } from "../models/index.js";
 import { PickerValidDate } from "../../models/index.js";
+import { CreateStepNavigationReturnValue } from "../utils/createStepNavigation.js";
 export type PickerOnChangeFn = (date: PickerValidDate | null, selectionState?: PickerSelectionState) => void;
 export interface UseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
   /**
@@ -53,8 +54,9 @@ export interface UseViewsOptions<TValue extends PickerValidValue, TView extends
    * @param {boolean} hasFocus `true` if the view should be focused.
    */
   onFocusedViewChange?: (view: TView, hasFocus: boolean) => void;
+  getStepNavigation?: CreateStepNavigationReturnValue;
 }
-export interface ExportedUseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends MakeOptional<UseViewsOptions<TValue, TView>, 'onChange' | 'openTo' | 'views'> {}
+export interface ExportedUseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends Omit<MakeOptional<UseViewsOptions<TValue, TView>, 'onChange' | 'openTo' | 'views'>, 'getStepNavigation'> {}
 interface UseViewsResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
   view: TView;
   setView: (view: TView) => void;
@@ -65,6 +67,9 @@ interface UseViewsResponse<TValue extends PickerValidValue, TView extends DateOr
   defaultView: TView;
   goToNextView: () => void;
   setValueAndGoToNextView: (value: TValue, currentViewSelectionState?: PickerSelectionState, selectedView?: TView) => void;
+  hasNextStep: boolean;
+  hasSeveralSteps: boolean;
+  goToNextStep: () => void;
 }
 export declare function useViews<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem>({
   onChange,
@@ -74,6 +79,7 @@ export declare function useViews<TValue extends PickerValidValue, TView extends
   views,
   autoFocus,
   focusedView: inFocusedView,
-  onFocusedViewChange
+  onFocusedViewChange,
+  getStepNavigation
 }: UseViewsOptions<TValue, TView>): UseViewsResponse<TValue, TView>;
 export {};

package/esm/internals/hooks/useViews.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useControlled from '@mui/utils/useControlled';
+import { DEFAULT_STEP_NAVIGATION } from "../utils/createStepNavigation.js";
 let warnedOnceNotValidView = false;
 export function useViews({
   onChange,
@@ -10,7 +12,8 @@ export function useViews({
   views,
   autoFocus,
   focusedView: inFocusedView,
-  onFocusedViewChange
+  onFocusedViewChange,
+  getStepNavigation
 }) {
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnceNotValidView) {
@@ -40,6 +43,12 @@ export function useViews({
     controlled: inFocusedView,
     default: defaultFocusedView.current
   });
+  const stepNavigation = getStepNavigation ? getStepNavigation({
+    setView,
+    view,
+    defaultView: defaultView.current,
+    views
+  }) : DEFAULT_STEP_NAVIGATION;
   React.useEffect(() => {
     // Update the current view when `openTo` or `views` props change
     if (previousOpenTo.current && previousOpenTo.current !== openTo || previousViews.current && previousViews.current.some(previousView => !views.includes(previousView))) {
@@ -86,19 +95,25 @@ export function useViews({
     views.indexOf(selectedView) < views.length - 1 : Boolean(nextView);
     const globalSelectionState = isSelectionFinishedOnCurrentView && hasMoreViews ? 'partial' : currentViewSelectionState;
     onChange(value, globalSelectionState, selectedView);
-    // Detects if the selected view is not the active one.
-    // Can happen if multiple views are displayed, like in `DesktopDateTimePicker` or `MultiSectionDigitalClock`.
-    if (selectedView && selectedView !== view) {
-      const nextViewAfterSelected = views[views.indexOf(selectedView) + 1];
-      if (nextViewAfterSelected) {
-        // move to next view after the selected one
-        handleChangeView(nextViewAfterSelected);
-      }
+
+    // The selected view can be different from the active view,
+    // This can happen if multiple views are displayed, like in `DesktopDateTimePicker` or `MultiSectionDigitalClock`.
+    let currentView = null;
+    if (selectedView != null && selectedView !== view) {
+      currentView = selectedView;
     } else if (isSelectionFinishedOnCurrentView) {
-      goToNextView();
+      currentView = view;
+    }
+    if (currentView == null) {
+      return;
     }
+    const viewToNavigateTo = views[views.indexOf(currentView) + 1];
+    if (viewToNavigateTo == null || !stepNavigation.areViewsInSameStep(currentView, viewToNavigateTo)) {
+      return;
+    }
+    handleChangeView(viewToNavigateTo);
   });
-  return {
+  return _extends({}, stepNavigation, {
     view,
     setView: handleChangeView,
     focusedView,
@@ -109,5 +124,5 @@ export function useViews({
     defaultView: views.includes(openTo) ? openTo : views[0],
     goToNextView,
     setValueAndGoToNextView
-  };
+  });
 }

package/esm/internals/utils/createNonRangePickerStepNavigation.js

@@ -5,17 +5,17 @@ export function createNonRangePickerStepNavigation(parameters) {
   } = parameters;
   return createStepNavigation({
     steps,
-    isCurrentViewMatchingStep: (view, step) => {
+    isViewMatchingStep: (view, step) => {
       return step.views == null || step.views.includes(view);
     },
     onStepChange: ({
       step,
-      initialView,
+      defaultView,
       setView,
       view,
       views
     }) => {
-      const targetView = step.views == null ? initialView : step.views.find(viewBis => views.includes(viewBis));
+      const targetView = step.views == null ? defaultView : step.views.find(viewBis => views.includes(viewBis));
       if (targetView !== view) {
         setView(targetView);
       }

package/esm/internals/utils/createStepNavigation.d.ts

@@ -1,4 +1,10 @@
 import { DateOrTimeViewWithMeridiem } from "../models/index.js";
+export declare const DEFAULT_STEP_NAVIGATION: {
+  hasNextStep: boolean;
+  hasSeveralSteps: boolean;
+  goToNextStep: () => void;
+  areViewsInSameStep: () => boolean;
+};
 /**
  * Create an object that determines whether there is a next step and allows to go to the next step.
  * @param {CreateStepNavigationParameters<TStep>} parameters The parameters of the createStepNavigation function
@@ -7,7 +13,7 @@ import { DateOrTimeViewWithMeridiem } from "../models/index.js";
 export declare function createStepNavigation<TStep extends {}>(parameters: CreateStepNavigationParameters<TStep>): CreateStepNavigationReturnValue;
 interface CreateStepNavigationParameters<TStep extends {}> {
   steps: TStep[] | null;
-  isCurrentViewMatchingStep: (view: DateOrTimeViewWithMeridiem, step: TStep) => boolean;
+  isViewMatchingStep: (view: DateOrTimeViewWithMeridiem, step: TStep) => boolean;
   onStepChange: (parameters: UseRangePickerStepNavigationOnStepChangeParameters<TStep>) => void;
 }
 export type CreateStepNavigationReturnValue = (parameters: CreateStepNavigationReturnValueParameters) => {
@@ -15,13 +21,24 @@ export type CreateStepNavigationReturnValue = (parameters: CreateStepNavigationR
    * Whether there is a next step.
    */
   hasNextStep: boolean;
+  /**
+   * Whether there are several steps.
+   */
+  hasSeveralSteps: boolean;
   /**
    * Go to the next step if any.
    */
   goToNextStep: () => void;
+  /**
+   * Whether the two views are in the same step.
+   * @param {DateOrTimeViewWithMeridiem} viewA The first view to compare.
+   * @param {DateOrTimeViewWithMeridiem} viewB The second view to compare.
+   * @returns {boolean} Whether the two views are in the same step.
+   */
+  areViewsInSameStep: (viewA: DateOrTimeViewWithMeridiem, viewB: DateOrTimeViewWithMeridiem) => boolean;
 };
 export interface CreateStepNavigationReturnValueParameters {
-  initialView: DateOrTimeViewWithMeridiem;
+  defaultView: DateOrTimeViewWithMeridiem;
   view: DateOrTimeViewWithMeridiem;
   views: readonly DateOrTimeViewWithMeridiem[];
   setView: (view: any) => void;

package/esm/internals/utils/createStepNavigation.js

@@ -1,4 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+export const DEFAULT_STEP_NAVIGATION = {
+  hasNextStep: false,
+  hasSeveralSteps: false,
+  goToNextStep: () => {},
+  areViewsInSameStep: () => true
+};
+
 /**
  * Create an object that determines whether there is a next step and allows to go to the next step.
  * @param {CreateStepNavigationParameters<TStep>} parameters The parameters of the createStepNavigation function
@@ -7,20 +14,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 export function createStepNavigation(parameters) {
   const {
     steps,
-    isCurrentViewMatchingStep,
+    isViewMatchingStep,
     onStepChange
   } = parameters;
   return parametersBis => {
     if (steps == null) {
-      return {
-        hasNextStep: false,
-        goToNextStep: () => {}
-      };
+      return DEFAULT_STEP_NAVIGATION;
     }
-    const currentStepIndex = steps.findIndex(step => isCurrentViewMatchingStep(parametersBis.view, step));
+    const currentStepIndex = steps.findIndex(step => isViewMatchingStep(parametersBis.view, step));
     const nextStep = currentStepIndex === -1 || currentStepIndex === steps.length - 1 ? null : steps[currentStepIndex + 1];
     return {
       hasNextStep: nextStep != null,
+      hasSeveralSteps: steps.length > 1,
       goToNextStep: () => {
         if (nextStep == null) {
           return;
@@ -28,6 +33,11 @@ export function createStepNavigation(parameters) {
         onStepChange(_extends({}, parametersBis, {
           step: nextStep
         }));
+      },
+      areViewsInSameStep: (viewA, viewB) => {
+        const stepA = steps.find(step => isViewMatchingStep(viewA, step));
+        const stepB = steps.find(step => isViewMatchingStep(viewB, step));
+        return stepA === stepB;
       }
     };
   };

package/esm/locales/csCZ.js

@@ -31,7 +31,7 @@ const csCZPickers = {
   datePickerToolbarTitle: 'Vyberte datum',
   dateTimePickerToolbarTitle: 'Vyberte datum a čas',
   timePickerToolbarTitle: 'Vyberte čas',
-  dateRangePickerToolbarTitle: 'Vyberete rozmezí dat',
+  dateRangePickerToolbarTitle: 'Vyberte rozmezí dat',
   // timeRangePickerToolbarTitle: 'Select time range',
 
   // Clock labels

package/esm/locales/skSK.js

@@ -8,8 +8,8 @@ const timeViews = {
 };
 const skSKPickers = {
   // Calendar navigation
-  previousMonth: 'Ďalší mesiac',
-  nextMonth: 'Predchádzajúci mesiac',
+  previousMonth: 'Predchádzajúci mesiac',
+  nextMonth: 'Ďalší mesiac',
   // View navigation
   openPreviousView: 'Otvoriť predchádzajúce zobrazenie',
   openNextView: 'Otvoriť ďalšie zobrazenie',
@@ -27,7 +27,7 @@ const skSKPickers = {
   clearButtonLabel: 'Vymazať',
   okButtonLabel: 'Potvrdiť',
   todayButtonLabel: 'Dnes',
-  nextStepButtonLabel: 'Predchádzajúci',
+  nextStepButtonLabel: 'Ďalší',
   // Toolbar titles
   datePickerToolbarTitle: 'Vyberte dátum',
   dateTimePickerToolbarTitle: 'Vyberte dátum a čas',

package/esm/models/fields.d.ts

@@ -69,6 +69,10 @@ export interface FieldSection {
    * For example, on Day.js, the `year` section of the format `[year] YYYY` has a start separator equal to `[year]`
    */
   endSeparator: string;
+  /**
+   * If `true`, the `endSeparator` is a format separator (i.e. ":" or "/").
+   */
+  isEndFormatSeparator?: boolean;
 }
 type IsAny<T> = boolean extends (T extends never ? true : false) ? true : false;
 export type InferFieldSection<TValue extends PickerValidValue> = IsAny<TValue> extends true ? FieldSection : TValue extends PickerRangeValue ? FieldRangeSection : FieldSection;

package/index.js

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

package/internals/components/PickerFieldUI.d.ts

@@ -100,7 +100,7 @@ export interface PickerFieldUISlotsFromContext extends PickerFieldUISlots {
   openPickerIcon?: React.ElementType;
 }
 export interface PickerFieldUISlotProps {
-  textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<Omit<TextFieldProps, 'onKeyDown'> | PickersTextFieldProps, {}, FieldOwnerState>;
   inputAdornment?: SlotComponentPropsFromProps<InputAdornmentProps, {}, FieldInputAdornmentOwnerState>;
   clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
   clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
@@ -128,7 +128,7 @@ export declare function useFieldTextFieldProps<TProps extends UseFieldOwnerState
 }>(parameters: UseFieldTextFieldPropsParameters): TProps;
 interface UseFieldTextFieldPropsParameters {
   slotProps: {
-    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
+    textField?: SlotComponentPropsFromProps<Omit<TextFieldProps, 'onKeyDown'> | PickersTextFieldProps, {}, FieldOwnerState>;
   } | undefined;
   ref: React.Ref<HTMLDivElement>;
   externalForwardedProps: any;

package/internals/components/PickerPopper/PickerPopper.js

@@ -227,6 +227,7 @@ function PickerPopper(inProps) {
   const {
     dismissViews,
     getCurrentViewMode,
+    onPopperExited,
     triggerElement,
     viewContainerRole
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
@@ -322,6 +323,11 @@ function PickerPopper(inProps) {
       isEnabled: () => true
     }, slotProps?.desktopTrapFocus, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, (0, _extends2.default)({}, TransitionProps, slotProps?.desktopTransition, {
+        onExited: event => {
+          onPopperExited?.();
+          slotProps?.desktopTransition?.onExited?.(event);
+          TransitionProps?.onExited?.();
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerPopperPaperWrapper, {
           PaperComponent: Paper,
           ownerState: ownerState,

package/internals/components/PickerProvider.d.ts

@@ -6,6 +6,7 @@ import { PickersInputLocaleText } from "../../locales/index.js";
 import { DateOrTimeViewWithMeridiem, PickerOrientation, PickerValidValue, PickerVariant } from "../models/index.js";
 import { PickerFieldPrivateContextValue } from "../hooks/useNullableFieldPrivateContext.js";
 import type { PickersShortcutsItemContext } from '../../PickersShortcuts';
+import type { PickersActionBarAction } from '../../PickersActionBar';
 export declare const PickerActionsContext: React.Context<PickerActionsContextValue<any, any, any> | null>;
 export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
 /**
@@ -281,4 +282,12 @@ export interface PickerPrivateContextValue {
    * It is always equal to null if the component you are accessing the context from is not wrapped with a Picker.
    */
   viewContainerRole: 'dialog' | 'tooltip' | null;
+  /**
+   * The actions to render in the action bar if the user doesn't provide any.
+   */
+  defaultActionBarActions: PickersActionBarAction[];
+  /**
+   * The function to call when the Popper is closing animation is finished.
+   */
+  onPopperExited: (() => void) | undefined;
 }

package/internals/components/PickerProvider.js

@@ -30,7 +30,9 @@ const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.c
   hasUIView: true,
   getCurrentViewMode: () => 'UI',
   triggerElement: null,
-  viewContainerRole: null
+  viewContainerRole: null,
+  defaultActionBarActions: [],
+  onPopperExited: undefined
 });
 
 /**

package/internals/hooks/useField/buildSectionsFromFormat.js

@@ -200,6 +200,7 @@ const buildSections = parameters => {
           startSeparator += char;
         } else {
           sections[sections.length - 1].endSeparator += char;
+          sections[sections.length - 1].isEndFormatSeparator = true;
         }
       }
       i += 1;

package/internals/hooks/useField/useFieldRootProps.js

@@ -38,6 +38,7 @@ function useFieldRootProps(parameters) {
       updateValueFromValueStr
     },
     internalPropsWithDefaults: {
+      disabled = false,
       readOnly = false
     }
   } = parameters;
@@ -50,7 +51,7 @@ function useFieldRootProps(parameters) {
   });
   const containerClickTimeout = (0, _useTimeout.default)();
   const handleClick = (0, _useEventCallback.default)(event => {
-    if (!domGetters.isReady()) {
+    if (disabled || !domGetters.isReady()) {
       return;
     }
     setFocused(true);
@@ -118,7 +119,7 @@ function useFieldRootProps(parameters) {
     updateValueFromValueStr(pastedValue);
   });
   const handleFocus = (0, _useEventCallback.default)(() => {
-    if (focused || !domGetters.isReady()) {
+    if (focused || disabled || !domGetters.isReady()) {
       return;
     }
     const activeElement = (0, _utils.getActiveElement)(document);

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { UseFieldStateReturnValue } from "./useFieldState.js";
+import { UseFieldInternalProps } from "./useField.types.js";
 /**
  * Generate the props to pass to the container element of each section of the field.
  * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
@@ -10,6 +11,7 @@ import { UseFieldStateReturnValue } from "./useFieldState.js";
 export declare function useFieldSectionContainerProps(parameters: UseFieldSectionContainerPropsParameters): UseFieldSectionContainerPropsReturnValue;
 interface UseFieldSectionContainerPropsParameters {
   stateResponse: UseFieldStateReturnValue<any>;
+  internalPropsWithDefaults: UseFieldInternalProps<any, any, any>;
 }
 type UseFieldSectionContainerPropsReturnValue = (sectionIndex: number) => React.HTMLAttributes<HTMLSpanElement>;
 export {};

package/internals/hooks/useField/useFieldSectionContainerProps.js

@@ -20,12 +20,15 @@ function useFieldSectionContainerProps(parameters) {
     stateResponse: {
       // Methods to update the states
       setSelectedSections
+    },
+    internalPropsWithDefaults: {
+      disabled = false
     }
   } = parameters;
   const createHandleClick = (0, _useEventCallback.default)(sectionIndex => event => {
     // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
     // We avoid this by checking if the call to this function is actually intended, or a side effect.
-    if (event.isDefaultPrevented()) {
+    if (disabled || event.isDefaultPrevented()) {
       return;
     }
     setSelectedSections(sectionIndex);

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { UseFieldStateReturnValue } from "./useFieldState.js";
 import { FieldSection, PickerManager } from "../../../models/index.js";
 import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
 import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
+import { PickersSectionElement } from "../../../PickersSectionList/index.js";
 /**
  * Generate the props to pass to the content element of each section of the field.
  * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
@@ -19,5 +19,5 @@ interface UseFieldSectionContentPropsParameters {
   domGetters: UseFieldDOMGetters;
   focused: boolean;
 }
-type UseFieldSectionContentPropsReturnValue = (section: FieldSection, sectionIndex: number) => React.HTMLAttributes<HTMLSpanElement>;
+type UseFieldSectionContentPropsReturnValue = (section: FieldSection, sectionIndex: number) => PickersSectionElement['content'];
 export {};

package/internals/hooks/useField/useFieldSectionContentProps.js

@@ -137,6 +137,9 @@ function useFieldSectionContentProps(parameters) {
     event.dataTransfer.dropEffect = 'none';
   });
   const createFocusHandler = (0, _useEventCallback.default)(sectionIndex => () => {
+    if (disabled) {
+      return;
+    }
     setSelectedSections(sectionIndex);
   });
   return React.useCallback((section, sectionIndex) => {
@@ -166,10 +169,10 @@ function useFieldSectionContentProps(parameters) {
       contentEditable: !isContainerEditable && !disabled && !readOnly,
       role: 'spinbutton',
       id: `${id}-${section.type}`,
+      'data-range-position': section.dateName || undefined,
       spellCheck: isEditable ? false : undefined,
       autoCapitalize: isEditable ? 'off' : undefined,
       autoCorrect: isEditable ? 'off' : undefined,
-      [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
       children: section.value || section.placeholder,
       inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
     };