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

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
+import { FormControlOwnProps } from '@mui/material/FormControl';
 import type { ExportedPickersSectionListProps } from '../PickersSectionList';
 import type { UseFieldInternalProps, UseFieldReturnValue } from '../internals/hooks/useField';
 import type { PickersTextFieldProps } from '../PickersTextField';
@@ -69,6 +70,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;
@@ -136,4 +141,42 @@ export type BaseSingleInputPickersTextFieldProps<TEnableAccessibleFieldDOMStruct
  * Props the built-in text field component can receive.
  */
 export type BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = TEnableAccessibleFieldDOMStructure extends false ? Omit<TextFieldProps, 'autoComplete' | 'error' | 'maxRows' | 'minRows' | 'multiline' | 'placeholder' | 'rows' | 'select' | 'SelectProps' | 'type'> : Partial<Omit<PickersTextFieldProps, keyof ExportedPickersSectionListProps>>;
+export interface PickerTextFieldOwnerState extends FieldOwnerState {
+  /**
+   * `true` if the value of the field is currently empty.
+   */
+  isFieldValueEmpty: boolean;
+  /**
+   * `true` if the field is focused, `false` otherwise.
+   */
+  isFieldFocused: boolean;
+  /**
+   * `true` if the field has an error, `false` otherwise.
+   */
+  hasFieldError: boolean;
+  /**
+   * The size of the input.
+   */
+  inputSize: Exclude<FormControlOwnProps['size'], undefined>;
+  /**
+   * The color of the input.
+   */
+  inputColor: Exclude<FormControlOwnProps['color'], undefined>;
+  /**
+   * `true` if the input takes up the full width of its container.
+   */
+  isInputInFullWidth: boolean;
+  /**
+   * `true` if the input has a start adornment, `false` otherwise.
+   */
+  hasStartAdornment: boolean;
+  /**
+   * `true` if the input has an end adornment, `false` otherwise.
+   */
+  hasEndAdornment: boolean;
+  /**
+   * `true` if the input has a label, `false` otherwise.
+   */
+  inputHasLabel: boolean;
+}
 export {};

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-beta.3
+ * @mui/x-date-pickers v8.1.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

@@ -32,8 +32,7 @@ const useUtilityClasses = classes => {
 };
 const PickerPopperRoot = (0, _styles.styled)(_Popper.default, {
   name: 'MuiPickerPopper',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
+  slot: 'Root'
 })(({
   theme
 }) => ({
@@ -41,8 +40,7 @@ const PickerPopperRoot = (0, _styles.styled)(_Popper.default, {
 }));
 const PickerPopperPaper = (0, _styles.styled)(_Paper.default, {
   name: 'MuiPickerPopper',
-  slot: 'Paper',
-  overridesResolver: (_, styles) => styles.paper
+  slot: 'Paper'
 })({
   outline: 0,
   transformOrigin: 'top center',
@@ -227,6 +225,7 @@ function PickerPopper(inProps) {
   const {
     dismissViews,
     getCurrentViewMode,
+    onPopperExited,
     triggerElement,
     viewContainerRole
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
@@ -322,6 +321,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/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -25,15 +25,13 @@ const _excluded = ["children", "className", "slots", "slotProps", "isNextDisable
   _excluded3 = ["ownerState"];
 const PickersArrowSwitcherRoot = (0, _styles.styled)('div', {
   name: 'MuiPickersArrowSwitcher',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({
   display: 'flex'
 });
 const PickersArrowSwitcherSpacer = (0, _styles.styled)('div', {
   name: 'MuiPickersArrowSwitcher',
-  slot: 'Spacer',
-  overridesResolver: (props, styles) => styles.spacer
+  slot: 'Spacer'
 })(({
   theme
 }) => ({
@@ -41,8 +39,7 @@ const PickersArrowSwitcherSpacer = (0, _styles.styled)('div', {
 }));
 const PickersArrowSwitcherButton = (0, _styles.styled)(_IconButton.default, {
   name: 'MuiPickersArrowSwitcher',
-  slot: 'Button',
-  overridesResolver: (props, styles) => styles.button
+  slot: 'Button'
 })({
   variants: [{
     props: {

package/internals/components/PickersToolbar.js

@@ -28,8 +28,7 @@ const useUtilityClasses = classes => {
 };
 const PickersToolbarRoot = (0, _styles.styled)('div', {
   name: 'MuiPickersToolbar',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })(({
   theme
 }) => ({
@@ -54,7 +53,6 @@ const PickersToolbarRoot = (0, _styles.styled)('div', {
 const PickersToolbarContent = (0, _styles.styled)('div', {
   name: 'MuiPickersToolbar',
   slot: 'Content',
-  overridesResolver: (props, styles) => styles.content,
   shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'landscapeDirection'
 })({
   display: 'flex',

package/internals/components/PickersToolbarButton.js

@@ -25,8 +25,7 @@ const useUtilityClasses = classes => {
 };
 const PickersToolbarButtonRoot = (0, _styles.styled)(_Button.default, {
   name: 'MuiPickersToolbarButton',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
+  slot: 'Root'
 })({
   padding: 0,
   minWidth: 16,

package/internals/components/PickersToolbarText.js

@@ -24,8 +24,7 @@ const useUtilityClasses = classes => {
 };
 const PickersToolbarTextRoot = (0, _styles.styled)(_Typography.default, {
   name: 'MuiPickersToolbarText',
-  slot: 'Root',
-  overridesResolver: (_, styles) => [styles.root]
+  slot: 'Root'
 })(({
   theme
 }) => ({

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'
     };

package/internals/hooks/useField/useFieldV7TextField.js

@@ -91,7 +91,7 @@ const useFieldV7TextField = parameters => {
   const openPickerAriaLabel = useOpenPickerButtonAriaLabel(value);
   const [focused, setFocused] = React.useState(false);
   function focusField(newSelectedSections = 0) {
-    if (!sectionListRef.current ||
+    if (disabled || !sectionListRef.current ||
     // if the field is already focused, we don't need to focus it again
     getActiveSectionIndex(sectionListRef) != null) {
       return;
@@ -114,7 +114,8 @@ const useFieldV7TextField = parameters => {
     stateResponse
   });
   const createSectionContainerProps = (0, _useFieldSectionContainerProps.useFieldSectionContainerProps)({
-    stateResponse
+    stateResponse,
+    internalPropsWithDefaults
   });
   const createSectionContentProps = (0, _useFieldSectionContentProps.useFieldSectionContentProps)({
     manager,
@@ -137,6 +138,11 @@ const useFieldV7TextField = parameters => {
     rootProps.onFocus(event);
   });
   const handleRootClick = (0, _useEventCallback.default)(event => {
+    // The click event on the clear or open button would propagate to the input, trigger this handler and result in an inadvertent section selection.
+    // We avoid this by checking if the call of `handleInputClick` is actually intended, or a propagated call, which should be skipped.
+    if (event.isDefaultPrevented()) {
+      return;
+    }
     onClick?.(event);
     rootProps.onClick(event);
   });
@@ -160,22 +166,26 @@ const useFieldV7TextField = parameters => {
     }
   });
   const elements = React.useMemo(() => {
-    return state.sections.map((section, sectionIndex) => ({
-      container: createSectionContainerProps(sectionIndex),
-      content: createSectionContentProps(section, sectionIndex),
-      before: {
-        children: section.startSeparator
-      },
-      after: {
-        children: section.endSeparator
-      }
-    }));
+    return state.sections.map((section, sectionIndex) => {
+      const content = createSectionContentProps(section, sectionIndex);
+      return {
+        container: createSectionContainerProps(sectionIndex),
+        content: createSectionContentProps(section, sectionIndex),
+        before: {
+          children: section.startSeparator
+        },
+        after: {
+          children: section.endSeparator,
+          'data-range-position': section.isEndFormatSeparator ? content['data-range-position'] : undefined
+        }
+      };
+    });
   }, [state.sections, createSectionContainerProps, createSectionContentProps]);
   React.useEffect(() => {
     if (sectionListRef.current == null) {
-      throw new Error(['MUI X: The `sectionListRef` prop has not been initialized by `PickersSectionList`', 'You probably tried to pass a component to the `textField` slot that contains an `<input />` element instead of a `PickersSectionList`.', '', 'If you want to keep using an `<input />` HTML element for the editing, please remove the `enableAccessibleFieldDOMStructure` prop from your Picker or Field component:', '', '<DatePicker slots={{ textField: MyCustomTextField }} />', '', 'Learn more about the field accessible DOM structure on the MUI documentation: https://mui.com/x/react-date-pickers/fields/#fields-to-edit-a-single-element'].join('\n'));
+      throw new Error(['MUI X: The `sectionListRef` prop has not been initialized by `PickersSectionList`', 'You probably tried to pass a component to the `textField` slot that contains an `<input />` element instead of a `PickersSectionList`.', '', 'If you want to keep using an `<input />` HTML element for the editing, please add the `enableAccessibleFieldDOMStructure={false}` prop to your Picker or Field component:', '', '<DatePicker enableAccessibleFieldDOMStructure={false} slots={{ textField: MyCustomTextField }} />', '', 'Learn more about the field accessible DOM structure on the MUI documentation: https://mui.com/x/react-date-pickers/fields/#fields-to-edit-a-single-element'].join('\n'));
     }
-    if (autoFocus && sectionListRef.current) {
+    if (autoFocus && !disabled && sectionListRef.current) {
       sectionListRef.current.getSectionContent(sectionOrder.startIndex).focus();
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -204,7 +214,7 @@ const useFieldV7TextField = parameters => {
     getSections: () => state.sections,
     getActiveSectionIndex: () => getActiveSectionIndex(sectionListRef),
     setSelectedSections: newSelectedSections => {
-      if (!sectionListRef.current) {
+      if (disabled || !sectionListRef.current) {
         return;
       }
       const newParsedSelectedSections = (0, _useField.parseSelectedSections)(newSelectedSections, state.sections);

package/internals/hooks/usePicker/hooks/useValueAndOpenStates.js

@@ -101,8 +101,8 @@ function useValueAndOpenStates(parameters) {
     if (newOpen && onOpen) {
       onOpen();
     }
-    if (!newOpen && onClose) {
-      onClose();
+    if (!newOpen) {
+      onClose?.();
     }
   });
   const setValue = (0, _useEventCallback.default)((newValue, options) => {
@@ -168,6 +168,7 @@ function useValueAndOpenStates(parameters) {
         clockShallowValue: newValue,
         hasBeenModifiedSinceMount: true
       }));
+      return;
     }
     setValue(newValue, {
       changeImportance: selectionState === 'finish' && closeOnSelect ? 'accept' : 'set'

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

@@ -7,6 +7,7 @@ export declare const usePicker: <TValue extends PickerValidValue, TView extends
   valueType,
   variant,
   validator,
+  onPopperExited,
   autoFocusView,
   rendererInterceptor: RendererInterceptor,
   localeText,

package/internals/hooks/usePicker/usePicker.js

@@ -28,6 +28,7 @@ const usePicker = ({
   valueType,
   variant,
   validator,
+  onPopperExited,
   autoFocusView,
   rendererInterceptor: RendererInterceptor,
   localeText,
@@ -44,6 +45,7 @@ const usePicker = ({
     reduceAnimations: reduceAnimationsProp,
     orientation: orientationProp,
     disableOpenPicker,
+    closeOnSelect,
     // Form props
     disabled,
     readOnly,
@@ -103,14 +105,18 @@ const usePicker = ({
     defaultView,
     focusedView,
     setFocusedView,
-    setValueAndGoToNextView
+    setValueAndGoToNextView,
+    goToNextStep,
+    hasNextStep,
+    hasSeveralSteps
   } = (0, _useViews.useViews)({
     view: viewProp,
     views,
     openTo,
     onChange: setValueFromView,
     onViewChange,
-    autoFocus: autoFocusView
+    autoFocus: autoFocusView,
+    getStepNavigation
   });
   const clearValue = (0, _useEventCallback.default)(() => setValue(valueManager.emptyValue));
   const setValueToToday = (0, _useEventCallback.default)(() => setValue(valueManager.getTodayValue(utils, timezone, valueType)));
@@ -199,13 +205,13 @@ const usePicker = ({
     }
     return 'enabled';
   }, [disableOpenPicker, hasUIView, disabled, readOnly]);
-  const stepNavigation = getStepNavigation({
-    setView,
-    view,
-    initialView: initialView ?? views[0],
-    views
-  });
-  const wrappedGoToNextStep = (0, _useEventCallback.default)(stepNavigation.goToNextStep);
+  const wrappedGoToNextStep = (0, _useEventCallback.default)(goToNextStep);
+  const defaultActionBarActions = React.useMemo(() => {
+    if (closeOnSelect && !hasSeveralSteps) {
+      return [];
+    }
+    return ['cancel', 'nextOrAccept'];
+  }, [closeOnSelect, hasSeveralSteps]);
   const actionsContextValue = React.useMemo(() => ({
     setValue,
     setOpen,
@@ -232,14 +238,14 @@ 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,
@@ -248,8 +254,10 @@ 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/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;