@mui/x-date-pickers 9.0.0-alpha.1 → 9.0.0-alpha.2

package/internals/hooks/useField/useFieldV7TextField.mjs

@@ -0,0 +1,263 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { parseSelectedSections } from "./useField.utils.mjs";
+import { getActiveElement } from "../../utils/utils.mjs";
+import { useSplitFieldProps } from "../../../hooks/index.mjs";
+import { useFieldCharacterEditing } from "./useFieldCharacterEditing.mjs";
+import { useFieldState } from "./useFieldState.mjs";
+import { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.mjs";
+import { syncSelectionToDOM } from "./syncSelectionToDOM.mjs";
+import { useFieldRootProps } from "./useFieldRootProps.mjs";
+import { useFieldHiddenInputProps } from "./useFieldHiddenInputProps.mjs";
+import { useFieldSectionContainerProps } from "./useFieldSectionContainerProps.mjs";
+import { useFieldSectionContentProps } from "./useFieldSectionContentProps.mjs";
+export const useFieldV7TextField = parameters => {
+  const {
+    props,
+    manager,
+    skipContextFieldRefAssignment,
+    manager: {
+      valueType,
+      internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
+    }
+  } = parameters;
+  const {
+    internalProps,
+    forwardedProps
+  } = useSplitFieldProps(props, valueType);
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps,
+    skipContextFieldRefAssignment
+  });
+  const {
+    sectionListRef: sectionListRefProp,
+    onBlur,
+    onClick,
+    onFocus,
+    onInput,
+    onPaste,
+    onKeyDown,
+    onClear,
+    clearable
+  } = forwardedProps;
+  const {
+    disabled = false,
+    readOnly = false,
+    autoFocus = false,
+    focused: focusedProp,
+    unstableFieldRef
+  } = internalPropsWithDefaults;
+  const sectionListRef = React.useRef(null);
+  const handleSectionListRef = useForkRef(sectionListRefProp, sectionListRef);
+  const domGetters = React.useMemo(() => ({
+    isReady: () => sectionListRef.current != null,
+    getRoot: () => sectionListRef.current.getRoot(),
+    getSectionContainer: sectionIndex => sectionListRef.current.getSectionContainer(sectionIndex),
+    getSectionContent: sectionIndex => sectionListRef.current.getSectionContent(sectionIndex),
+    getSectionIndexFromDOMElement: element => sectionListRef.current.getSectionIndexFromDOMElement(element)
+  }), [sectionListRef]);
+  const stateResponse = useFieldState({
+    manager,
+    internalPropsWithDefaults,
+    forwardedProps
+  });
+  const {
+    // States and derived states
+    areAllSectionsEmpty,
+    error,
+    parsedSelectedSections,
+    sectionOrder,
+    state,
+    value,
+    // Methods to update the states
+    clearValue,
+    setSelectedSections
+  } = stateResponse;
+  const applyCharacterEditing = useFieldCharacterEditing({
+    stateResponse
+  });
+  const openPickerAriaLabel = useOpenPickerButtonAriaLabel(value);
+  const [focused, setFocused] = React.useState(false);
+  function focusField(newSelectedSections = 0) {
+    if (disabled || !sectionListRef.current ||
+    // if the field is already focused, we don't need to focus it again
+    getActiveSectionIndex(sectionListRef) != null) {
+      return;
+    }
+    const newParsedSelectedSections = parseSelectedSections(newSelectedSections, state.sections);
+    setFocused(true);
+    sectionListRef.current.getSectionContent(newParsedSelectedSections).focus();
+  }
+  const rootProps = useFieldRootProps({
+    manager,
+    internalPropsWithDefaults,
+    stateResponse,
+    applyCharacterEditing,
+    focused,
+    setFocused,
+    domGetters
+  });
+  const hiddenInputProps = useFieldHiddenInputProps({
+    manager,
+    stateResponse
+  });
+  const createSectionContainerProps = useFieldSectionContainerProps({
+    stateResponse,
+    internalPropsWithDefaults
+  });
+  const createSectionContentProps = useFieldSectionContentProps({
+    manager,
+    stateResponse,
+    applyCharacterEditing,
+    internalPropsWithDefaults,
+    domGetters,
+    focused
+  });
+  const handleRootKeyDown = useEventCallback(event => {
+    onKeyDown?.(event);
+    rootProps.onKeyDown(event);
+  });
+  const handleRootBlur = useEventCallback(event => {
+    onBlur?.(event);
+    rootProps.onBlur(event);
+  });
+  const handleRootFocus = useEventCallback(event => {
+    onFocus?.(event);
+    rootProps.onFocus(event);
+  });
+  const handleRootClick = useEventCallback(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);
+  });
+  const handleRootPaste = useEventCallback(event => {
+    onPaste?.(event);
+    rootProps.onPaste(event);
+  });
+  const handleRootInput = useEventCallback(event => {
+    onInput?.(event);
+    rootProps.onInput(event);
+  });
+  const handleClear = useEventCallback((event, ...args) => {
+    event.preventDefault();
+    onClear?.(event, ...args);
+    clearValue();
+    if (!isFieldFocused(sectionListRef)) {
+      // setSelectedSections is called internally
+      focusField(0);
+    } else {
+      setSelectedSections(sectionOrder.startIndex);
+    }
+  });
+  const elements = React.useMemo(() => {
+    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(process.env.NODE_ENV !== "production" ? `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` : _formatErrorMessage(159));
+    }
+    if (autoFocus && !disabled && sectionListRef.current) {
+      sectionListRef.current.getSectionContent(sectionOrder.startIndex).focus();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEnhancedEffect(() => {
+    if (!focused || !sectionListRef.current) {
+      return;
+    }
+    if (parsedSelectedSections === 'all') {
+      sectionListRef.current.getRoot().focus();
+    } else if (typeof parsedSelectedSections === 'number') {
+      const domElement = sectionListRef.current.getSectionContent(parsedSelectedSections);
+      if (domElement) {
+        domElement.focus();
+      }
+    }
+  }, [parsedSelectedSections, focused]);
+  useEnhancedEffect(() => {
+    syncSelectionToDOM({
+      focused,
+      domGetters,
+      stateResponse
+    });
+  });
+  React.useImperativeHandle(unstableFieldRef, () => ({
+    getSections: () => state.sections,
+    getActiveSectionIndex: () => getActiveSectionIndex(sectionListRef),
+    setSelectedSections: newSelectedSections => {
+      if (disabled || !sectionListRef.current) {
+        return;
+      }
+      const newParsedSelectedSections = parseSelectedSections(newSelectedSections, state.sections);
+      const newActiveSectionIndex = newParsedSelectedSections === 'all' ? 0 : newParsedSelectedSections;
+      setFocused(newActiveSectionIndex !== null);
+      setSelectedSections(newSelectedSections);
+    },
+    focusField,
+    isFieldFocused: () => isFieldFocused(sectionListRef)
+  }));
+  return _extends({}, forwardedProps, rootProps, {
+    onBlur: handleRootBlur,
+    onClick: handleRootClick,
+    onFocus: handleRootFocus,
+    onInput: handleRootInput,
+    onPaste: handleRootPaste,
+    onKeyDown: handleRootKeyDown,
+    onClear: handleClear
+  }, hiddenInputProps, {
+    error,
+    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled),
+    focused: focusedProp ?? focused,
+    sectionListRef: handleSectionListRef,
+    // Additional
+    enableAccessibleFieldDOMStructure: true,
+    elements,
+    areAllSectionsEmpty,
+    disabled,
+    readOnly,
+    autoFocus,
+    openPickerAriaLabel
+  });
+};
+function getActiveSectionIndex(sectionListRef) {
+  const activeElement = getActiveElement(sectionListRef.current?.getRoot());
+  if (!activeElement || !sectionListRef.current || !sectionListRef.current.getRoot().contains(activeElement)) {
+    return null;
+  }
+  return sectionListRef.current.getSectionIndexFromDOMElement(activeElement);
+}
+function isFieldFocused(sectionListRef) {
+  const activeElement = getActiveElement(sectionListRef.current?.getRoot());
+  return !!sectionListRef.current && sectionListRef.current.getRoot().contains(activeElement);
+}

package/internals/hooks/useFieldOwnerState.d.mts

@@ -0,0 +1,6 @@
+import { FieldOwnerState } from "../../models/index.mjs";
+import { FormProps } from "../models/index.mjs";
+export declare function useFieldOwnerState(parameters: UseFieldOwnerStateParameters): FieldOwnerState;
+export interface UseFieldOwnerStateParameters extends FormProps {
+  required?: boolean;
+}

package/internals/hooks/useFieldOwnerState.mjs

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useRtl } from '@mui/system/RtlProvider';
+import { usePickerPrivateContext } from "./usePickerPrivateContext.mjs";
+export function useFieldOwnerState(parameters) {
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const isRtl = useRtl();
+  return React.useMemo(() => _extends({}, pickerOwnerState, {
+    isFieldDisabled: parameters.disabled ?? false,
+    isFieldReadOnly: parameters.readOnly ?? false,
+    isFieldRequired: parameters.required ?? false,
+    fieldDirection: isRtl ? 'rtl' : 'ltr'
+  }), [pickerOwnerState, parameters.disabled, parameters.readOnly, parameters.required, isRtl]);
+}

package/internals/hooks/useMobilePicker/index.d.mts

@@ -0,0 +1,2 @@
+export { useMobilePicker } from "./useMobilePicker.mjs";
+export type { UseMobilePickerSlots, UseMobilePickerSlotProps, ExportedUseMobilePickerSlotProps, MobileOnlyPickerProps } from "./useMobilePicker.types.mjs";

package/internals/hooks/useMobilePicker/index.mjs

@@ -0,0 +1 @@
+export { useMobilePicker } from "./useMobilePicker.mjs";

package/internals/hooks/useMobilePicker/useMobilePicker.d.mts

@@ -0,0 +1,15 @@
+import { UseMobilePickerParams, UseMobilePickerProps } from "./useMobilePicker.types.mjs";
+import { DateOrTimeViewWithMeridiem } from "../../models/index.mjs";
+/**
+ * Hook managing all the single-date mobile pickers:
+ * - MobileDatePicker
+ * - MobileDateTimePicker
+ * - MobileTimePicker
+ */
+export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
+  props,
+  steps,
+  ...pickerParams
+}: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+  renderPicker: () => import("react/jsx-runtime").JSX.Element;
+};

package/internals/hooks/useMobilePicker/useMobilePicker.mjs

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["props", "steps"],
+  _excluded2 = ["ownerState"];
+import useSlotProps from '@mui/utils/useSlotProps';
+import { PickersModalDialog } from "../../components/PickersModalDialog.mjs";
+import { usePicker } from "../usePicker/index.mjs";
+import { PickersLayout } from "../../../PickersLayout/index.mjs";
+import { PickerProvider } from "../../components/PickerProvider.mjs";
+import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.mjs";
+
+/**
+ * Hook managing all the single-date mobile pickers:
+ * - MobileDatePicker
+ * - MobileDateTimePicker
+ * - MobileTimePicker
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const useMobilePicker = _ref => {
+  let {
+      props,
+      steps
+    } = _ref,
+    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    slots,
+    slotProps: innerSlotProps,
+    label,
+    inputRef,
+    localeText
+  } = props;
+  const getStepNavigation = createNonRangePickerStepNavigation({
+    steps
+  });
+  const {
+    providerProps,
+    renderCurrentView,
+    ownerState
+  } = usePicker(_extends({}, pickerParams, {
+    props,
+    localeText,
+    autoFocusView: true,
+    viewContainerRole: 'dialog',
+    variant: 'mobile',
+    getStepNavigation
+  }));
+  const labelId = providerProps.privateContextValue.labelId;
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
+  const Field = slots.field;
+  const _useSlotProps = useSlotProps({
+      elementType: Field,
+      externalSlotProps: innerSlotProps?.field,
+      additionalProps: _extends({}, isToolbarHidden && {
+        id: labelId
+      }),
+      ownerState
+    }),
+    fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+  const Layout = slots.layout ?? PickersLayout;
+  let labelledById = labelId;
+  if (isToolbarHidden) {
+    if (label) {
+      labelledById = `${labelId}-label`;
+    } else {
+      labelledById = undefined;
+    }
+  }
+  const slotProps = _extends({}, innerSlotProps, {
+    toolbar: _extends({}, innerSlotProps?.toolbar, {
+      titleId: labelId
+    }),
+    mobilePaper: _extends({
+      'aria-labelledby': labelledById
+    }, innerSlotProps?.mobilePaper)
+  });
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
+    children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
+      slots: _extends({}, slots, fieldProps.slots),
+      slotProps: _extends({}, slotProps, fieldProps.slotProps),
+      inputRef: inputRef
+    })), /*#__PURE__*/_jsx(PickersModalDialog, {
+      slots: slots,
+      slotProps: slotProps,
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+        slots: slots,
+        slotProps: slotProps,
+        children: renderCurrentView()
+      }))
+    })]
+  }));
+  if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
+  return {
+    renderPicker
+  };
+};

package/internals/hooks/useMobilePicker/useMobilePicker.types.d.mts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { BasePickerProps } from "../../models/props/basePickerProps.mjs";
+import { PickersModalDialogSlots, PickersModalDialogSlotProps } from "../../components/PickersModalDialog.mjs";
+import { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.mjs";
+import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.mjs";
+import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.mjs";
+import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.mjs";
+import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.mjs";
+import { PickerStep } from "../../utils/createNonRangePickerStepNavigation.mjs";
+export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
+  /**
+   * Component used to enter the date with the keyboard.
+   */
+  field: React.ElementType;
+}
+export interface ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
+}
+export interface UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
+export interface MobileOnlyPickerProps extends UsePickerNonStaticProps {}
+export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, MakeRequired<MobileOnlyPickerProps, 'format'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: UseMobilePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}
+export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
+  props: TExternalProps;
+  /**
+   * Steps available for the picker.
+   * This will be used to define the behavior of navigation actions.
+   * If null, the picker will not have any step navigation.
+   */
+  steps: PickerStep[] | null;
+}

package/internals/hooks/useNullableFieldPrivateContext.d.mts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { UseFieldInternalProps } from "./useField/index.mjs";
+import { FieldRef } from "../../models/index.mjs";
+import { PickerRangeValue, PickerValue } from "../models/index.mjs";
+export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
+export declare function useNullableFieldPrivateContext(): PickerFieldPrivateContextValue | null;
+export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
+  fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
+}

package/internals/hooks/useNullablePickerContext.d.mts

@@ -0,0 +1,5 @@
+/**
+ * Returns the context passed by the Picker wrapping the current component.
+ * If the context is not found, returns `null`.
+ */
+export declare const useNullablePickerContext: () => import("../index.mjs").PickerContextValue<any, any, any> | null;

package/internals/hooks/useNullablePickerContext.mjs

@@ -0,0 +1,10 @@
+'use client';
+
+import * as React from 'react';
+import { PickerContext } from "../../hooks/usePickerContext.mjs";
+
+/**
+ * Returns the context passed by the Picker wrapping the current component.
+ * If the context is not found, returns `null`.
+ */
+export const useNullablePickerContext = () => React.useContext(PickerContext);

package/internals/hooks/usePicker/hooks/useOrientation.d.mts

@@ -0,0 +1,2 @@
+import { DateOrTimeViewWithMeridiem, PickerOrientation } from "../../../models/index.mjs";
+export declare function useOrientation(views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined): PickerOrientation;

package/internals/hooks/usePicker/hooks/useOrientation.mjs

@@ -0,0 +1,36 @@
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { arrayIncludes } from "../../../utils/utils.mjs";
+function getOrientation() {
+  if (typeof window === 'undefined') {
+    return 'portrait';
+  }
+  if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
+    return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
+  }
+
+  // Support IOS safari
+  if (window.orientation) {
+    return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
+  }
+  return 'portrait';
+}
+export function useOrientation(views, customOrientation) {
+  const [orientation, setOrientation] = React.useState(getOrientation);
+  useEnhancedEffect(() => {
+    const eventHandler = () => {
+      setOrientation(getOrientation());
+    };
+    window.addEventListener('orientationchange', eventHandler);
+    return () => {
+      window.removeEventListener('orientationchange', eventHandler);
+    };
+  }, []);
+  if (arrayIncludes(views, ['hours', 'minutes', 'seconds'])) {
+    // could not display 13:34:44 in landscape mode
+    return 'portrait';
+  }
+  return customOrientation ?? orientation;
+}

package/internals/hooks/usePicker/hooks/useValueAndOpenStates.d.mts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DateOrTimeViewWithMeridiem, PickerValidValue, PickerValueManager } from "../../../models/index.mjs";
+import { PickerSelectionState, UsePickerProps, UsePickerState } from "../usePicker.types.mjs";
+import { InferError } from "../../../../models/index.mjs";
+import { SetValueActionOptions } from "../../../components/PickerProvider.mjs";
+import { Validator } from "../../../../validation/index.mjs";
+export declare function useValueAndOpenStates<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>>(parameters: UsePickerDateStateParameters<TValue, TView, TExternalProps>): {
+  timezone: string;
+  state: UsePickerState<TValue>;
+  setValue: (newValue: TValue, options?: SetValueActionOptions<InferError<TExternalProps>>) => void;
+  setValueFromView: (newValue: TValue, selectionState?: PickerSelectionState) => void;
+  setOpen: (action: React.SetStateAction<boolean>) => void;
+  value: TValue;
+  viewValue: TValue;
+};
+interface UsePickerDateStateParameters<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>> {
+  props: TExternalProps;
+  valueManager: PickerValueManager<TValue, InferError<TExternalProps>>;
+  validator: Validator<TValue, InferError<TExternalProps>, TExternalProps>;
+}
+export {};

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useValueAndOpenStates = useValueAndOpenStates;
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _warning = require("@mui/x-internals/warning");
@@ -193,7 +194,7 @@ function useValueAndOpenStates(parameters) {
   React.useEffect(() => {
     if (isOpenControlled) {
       if (openProp === undefined) {
-        throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
+        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X: You must not mix controlling and uncontrolled mode for `open` prop' : (0, _formatErrorMessage2.default)(160));
       }
       setState(prevState => (0, _extends2.default)({}, prevState, {
         open: openProp