@mui/x-date-pickers 8.0.0-alpha.1 → 8.0.0-alpha.11

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

@@ -3,11 +3,11 @@ import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { UseViewsOptions } from '../useViews';
 import type { UsePickerValueViewsResponse } from './usePickerValue.types';
-import { DateOrTimeViewWithMeridiem } from '../../models';
-import { FieldRef, FieldSection, PickerValidDate, TimezoneProps } from '../../../models';
-interface PickerViewsRendererBaseExternalProps<TView extends DateOrTimeViewWithMeridiem> extends Omit<UsePickerViewsProps<any, TView, any, any>, 'openTo' | 'viewRenderers'> {
+import { DateOrTimeViewWithMeridiem, PickerRangeValue, PickerValidValue, PickerValue } from '../../models';
+import { FieldRef, PickerValidDate, TimezoneProps } from '../../../models';
+export interface PickerViewsRendererBaseExternalProps extends Omit<UsePickerViewsProps<any, any, any>, 'openTo' | 'viewRenderers'> {
 }
-export type PickerViewsRendererProps<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = Omit<TExternalProps, 'className' | 'sx'> & TAdditionalProps & UsePickerValueViewsResponse<TValue> & {
+export type PickerViewsRendererProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps> = Omit<TExternalProps, 'className' | 'sx'> & Pick<UsePickerValueViewsResponse<TValue>, 'value' | 'onChange'> & {
     view: TView;
     views: readonly TView[];
     focusedView: TView | null;
@@ -15,77 +15,96 @@ export type PickerViewsRendererProps<TValue, TView extends DateOrTimeViewWithMer
     showViewSwitcher: boolean;
     timeViewsCount: number;
 };
-export type PickerViewRenderer<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = (props: PickerViewsRendererProps<TValue, TView, TExternalProps, TAdditionalProps>) => React.ReactNode;
-export type PickerViewRendererLookup<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<any>, TAdditionalProps extends {}> = {
-    [K in TView]: PickerViewRenderer<TValue, K, TExternalProps, TAdditionalProps> | null;
-};
+export type PickerViewRenderer<TValue extends PickerValidValue, TExternalProps extends PickerViewsRendererBaseExternalProps> = (props: PickerViewsRendererProps<TValue, any, TExternalProps>) => React.ReactNode;
+export type PickerViewRendererLookup<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps> = Record<TView, PickerViewRenderer<TValue, TExternalProps> | null>;
 /**
  * Props used to handle the views that are common to all pickers.
  */
-export interface UsePickerViewsBaseProps<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends Omit<UseViewsOptions<any, TView>, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps {
+export interface UsePickerViewsBaseProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any>> extends Omit<UseViewsOptions<any, TView>, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps {
     /**
      * If `null`, the section will only have field editing.
      * If `undefined`, internally defined view will be used.
      */
-    viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps, TAdditionalProps>;
-    /**
-     * If `true`, disable heavy animations.
-     * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
-     */
-    reduceAnimations?: boolean;
+    viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps>;
     /**
      * The date used to generate the new value when both `value` and `defaultValue` are empty.
      * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
      */
     referenceDate?: PickerValidDate;
 }
-/**
- * Props used to handle the views of the pickers.
- */
-export interface UsePickerViewsNonStaticProps {
-    /**
-     * If `true`, the open picker button will not be rendered (renders only the field).
-     * @default false
-     */
-    disableOpenPicker?: boolean;
-}
 /**
  * Props used to handle the value of the pickers.
  */
-export interface UsePickerViewsProps<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerViewsBaseProps<TValue, TView, TExternalProps, TAdditionalProps> {
+export interface UsePickerViewsProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any>> extends UsePickerViewsBaseProps<TValue, TView, TExternalProps> {
     className?: string;
     sx?: SxProps<Theme>;
 }
-export interface UsePickerViewParams<TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerViewsProps<TValue, TView, TExternalProps, TAdditionalProps>, TAdditionalProps extends {}> {
+export interface UsePickerViewParams<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, TExternalProps>> {
     props: TExternalProps;
     propsFromPickerValue: UsePickerValueViewsResponse<TValue>;
-    additionalViewProps: TAdditionalProps;
     autoFocusView: boolean;
-    fieldRef: React.RefObject<FieldRef<TSection>> | undefined;
+    fieldRef?: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
     /**
      * A function that intercepts the regular picker rendering.
      * Can be used to consume the provided `viewRenderers` and render a custom component wrapping them.
-     * @param {PickerViewRendererLookup<TValue, TView, TExternalProps, TAdditionalProps>} viewRenderers The `viewRenderers` that were provided to the picker component.
+     * @param {PickerViewRendererLookup<TValue, TView, TExternalProps>} viewRenderers The `viewRenderers` that were provided to the picker component.
      * @param {TView} popperView The current picker view.
      * @param {any} rendererProps All the props that are being passed down to the renderer.
      * @returns {React.ReactNode} A React node that will be rendered instead of the default renderer.
      */
-    rendererInterceptor?: (viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps, TAdditionalProps>, popperView: TView, rendererProps: PickerViewsRendererProps<TValue, TView, TExternalProps, TAdditionalProps>) => React.ReactNode;
+    rendererInterceptor?: React.JSXElementConstructor<PickerRendererInterceptorProps<TValue, TView, TExternalProps>>;
+}
+export interface PickerRendererInterceptorProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, TExternalProps>> {
+    viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps>;
+    popperView: TView;
+    rendererProps: PickerViewsRendererProps<TValue, TView, TExternalProps>;
 }
 export interface UsePickerViewsResponse<TView extends DateOrTimeViewWithMeridiem> {
+    renderCurrentView: () => React.ReactNode;
+    provider: UsePickerViewsProviderParams<TView>;
+}
+export interface UsePickerViewsActionsContextValue<TView extends DateOrTimeViewWithMeridiem> {
     /**
-     * Indicates if the the picker has at least one view that should be rendered in UI.
+     * Set the current view.
+     * @template TView
+     * @param {TView} view The view to render
      */
-    hasUIView: boolean;
-    views: readonly TView[];
-    renderCurrentView: () => React.ReactNode;
-    shouldRestoreFocus: () => boolean;
-    layoutProps: UsePickerViewsLayoutResponse<TView>;
+    setView: (view: TView) => void;
 }
-export interface UsePickerViewsLayoutResponse<TView extends DateOrTimeViewWithMeridiem> {
+export interface UsePickerViewsContextValue<TView extends DateOrTimeViewWithMeridiem> extends UsePickerViewsActionsContextValue<TView> {
+    /**
+     * The views that the picker must 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 view currently rendered.
+     */
     view: TView | null;
-    onViewChange: (view: TView) => void;
+}
+export interface UsePickerViewsPrivateContextValue {
+    /**
+     * Whether one of the view has an UI (it has a view renderer associated).
+     */
+    hasUIView: boolean;
+    /**
+     * Check whether the current view has an UI.
+     * @returns {boolean} Whether the current view has an UI.
+     */
+    doesTheCurrentViewHasAnUI: () => boolean;
+}
+export interface UsePickerViewsProviderParams<TView extends DateOrTimeViewWithMeridiem> {
+    hasUIView: boolean;
     views: readonly TView[];
+    contextValue: UsePickerViewsContextValue<TView>;
+    actionsContextValue: UsePickerViewsActionsContextValue<TView>;
+    privateContextValue: UsePickerViewsPrivateContextValue;
 }
 /**
  * Manage the views of all the pickers:
@@ -93,5 +112,4 @@ export interface UsePickerViewsLayoutResponse<TView extends DateOrTimeViewWithMe
  * - Handles the switch between UI views and field views
  * - Handles the focus management when switching views
  */
-export declare const usePickerViews: <TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}>({ props, propsFromPickerValue, additionalViewProps, autoFocusView, rendererInterceptor, fieldRef, }: UsePickerViewParams<TValue, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerViewsResponse<TView>;
-export {};
+export declare const usePickerViews: <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any>>({ props, propsFromPickerValue, autoFocusView, rendererInterceptor: RendererInterceptor, fieldRef, }: UsePickerViewParams<TValue, TView, TExternalProps>) => UsePickerViewsResponse<TView>;

package/internals/hooks/usePicker/usePickerViews.js

@@ -11,14 +11,10 @@ import { isTimeView } from "../../utils/time-utils.js";
  * Props used to handle the views that are common to all pickers.
  */
 
-/**
- * Props used to handle the views of the pickers.
- */
-
 /**
  * Props used to handle the value of the pickers.
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Manage the views of all the pickers:
  * - Handles the view switch
@@ -28,15 +24,15 @@ import { isTimeView } from "../../utils/time-utils.js";
 export const usePickerViews = ({
   props,
   propsFromPickerValue,
-  additionalViewProps,
   autoFocusView,
-  rendererInterceptor,
+  rendererInterceptor: RendererInterceptor,
   fieldRef
 }) => {
   const {
     onChange,
+    value,
     open,
-    onClose
+    setOpen
   } = propsFromPickerValue;
   const {
     view: inView,
@@ -88,7 +84,7 @@ export const usePickerViews = ({
     return acc;
   }, 0), [viewRenderers, views]);
   const currentViewMode = viewModeLookup[view];
-  const shouldRestoreFocus = useEventCallback(() => currentViewMode === 'UI');
+  const doesTheCurrentViewHasAnUI = useEventCallback(() => currentViewMode === 'UI');
   const [popperView, setPopperView] = React.useState(currentViewMode === 'UI' ? view : null);
   if (popperView !== view && viewModeLookup[view] === 'UI') {
     setPopperView(view);
@@ -96,7 +92,7 @@ export const usePickerViews = ({
   useEnhancedEffect(() => {
     // Handle case of `DateTimePicker` without time renderers
     if (currentViewMode === 'field' && open) {
-      onClose();
+      setOpen(false);
       setTimeout(() => {
         fieldRef?.current?.setSelectedSections(view);
         // focusing the input before the range selection is done
@@ -127,16 +123,26 @@ export const usePickerViews = ({
     setFocusedView(newView, true);
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const layoutProps = {
+  const actionsContextValue = React.useMemo(() => ({
+    setView
+  }), [setView]);
+  const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
     views,
-    view: popperView,
-    onViewChange: setView
-  };
-  return {
+    view: popperView
+  }), [actionsContextValue, views, popperView]);
+  const privateContextValue = React.useMemo(() => ({
+    hasUIView,
+    doesTheCurrentViewHasAnUI
+  }), [hasUIView, doesTheCurrentViewHasAnUI]);
+  const providerParams = {
     hasUIView,
     views,
-    shouldRestoreFocus,
-    layoutProps,
+    contextValue,
+    actionsContextValue,
+    privateContextValue
+  };
+  return {
+    provider: providerParams,
     renderCurrentView: () => {
       if (popperView == null) {
         return null;
@@ -145,9 +151,10 @@ export const usePickerViews = ({
       if (renderer == null) {
         return null;
       }
-      const rendererProps = _extends({}, propsToForwardToView, additionalViewProps, propsFromPickerValue, {
+      const rendererProps = _extends({}, propsToForwardToView, {
         views,
         timezone,
+        value,
         onChange: setValueAndGoToNextView,
         view: popperView,
         onViewChange: setView,
@@ -156,8 +163,12 @@ export const usePickerViews = ({
         showViewSwitcher: timeViewsCount > 1,
         timeViewsCount
       });
-      if (rendererInterceptor) {
-        return rendererInterceptor(viewRenderers, popperView, rendererProps);
+      if (RendererInterceptor) {
+        return /*#__PURE__*/_jsx(RendererInterceptor, {
+          viewRenderers: viewRenderers,
+          popperView: popperView,
+          rendererProps: rendererProps
+        });
       }
       return renderer(rendererProps);
     }

package/internals/hooks/useReduceAnimations.d.ts

@@ -0,0 +1,2 @@
+export declare const slowAnimationDevices: boolean;
+export declare function useReduceAnimations(customReduceAnimations: boolean | undefined): boolean;

package/internals/hooks/{useDefaultReduceAnimations.js → useReduceAnimations.js}

@@ -6,9 +6,12 @@ const mobileVersionMatches = typeof navigator !== 'undefined' && navigator.userA
 const androidVersion = mobileVersionMatches && mobileVersionMatches[1] ? parseInt(mobileVersionMatches[1], 10) : null;
 const iOSVersion = mobileVersionMatches && mobileVersionMatches[2] ? parseInt(mobileVersionMatches[2], 10) : null;
 export const slowAnimationDevices = androidVersion && androidVersion < 10 || iOSVersion && iOSVersion < 13 || false;
-export const useDefaultReduceAnimations = () => {
+export function useReduceAnimations(customReduceAnimations) {
   const prefersReduced = useMediaQuery(PREFERS_REDUCED_MOTION, {
     defaultMatches: false
   });
+  if (customReduceAnimations != null) {
+    return customReduceAnimations;
+  }
   return prefersReduced || slowAnimationDevices;
-};
+}

package/internals/hooks/useStaticPicker/useStaticPicker.d.ts

@@ -7,6 +7,6 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - StaticDateTimePicker
  * - StaticTimePicker
  */
-export declare const useStaticPicker: <TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TView, any, TExternalProps>>({ props, ref, ...pickerParams }: UseStaticPickerParams<TView, TExternalProps>) => {
+export declare const useStaticPicker: <TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TView, any, TExternalProps>>({ props, ...pickerParams }: UseStaticPickerParams<TView, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props", "ref"];
+const _excluded = ["props"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
@@ -8,6 +8,7 @@ import { usePicker } from "../usePicker/index.js";
 import { PickerProvider } from "../../components/PickerProvider.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { DIALOG_WIDTH } from "../../constants/dimensions.js";
+import { mergeSx } from "../../utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickerStaticLayout = styled(PickersLayout)(({
   theme
@@ -25,39 +26,33 @@ const PickerStaticLayout = styled(PickersLayout)(({
  */
 export const useStaticPicker = _ref => {
   let {
-      props,
-      ref
+      props
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     localeText,
     slots,
     slotProps,
-    className,
-    sx,
     displayStaticWrapperAs,
     autoFocus
   } = props;
   const {
-    layoutProps,
     providerProps,
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
     props,
     autoFocusView: autoFocus ?? false,
-    fieldRef: undefined,
     localeText,
-    additionalViewProps: {},
     variant: displayStaticWrapperAs
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
+    children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
       slots: slots,
       slotProps: slotProps,
-      sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps?.layout?.sx) ? slotProps.layout.sx : [slotProps?.layout?.sx])],
-      className: clsx(className, slotProps?.layout?.className),
-      ref: ref,
+      sx: mergeSx(providerProps.contextValue.rootSx, slotProps?.layout?.sx),
+      className: clsx(providerProps.contextValue.rootClassName, slotProps?.layout?.className),
+      ref: providerProps.contextValue.rootRef,
       children: renderCurrentView()
     }))
   }));

package/internals/hooks/useStaticPicker/useStaticPicker.types.d.ts

@@ -1,13 +1,11 @@
-import * as React from 'react';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { BasePickerProps } from '../../models/props/basePickerProps';
 import { UsePickerParams } from '../usePicker';
 import { UsePickerViewsProps } from '../usePicker/usePickerViews';
-import { FieldSection, PickerValidDate } from '../../../models';
-import { DateOrTimeViewWithMeridiem } from '../../models';
-export interface UseStaticPickerSlots<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<PickerValidDate | null, TView> {
+import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
+export interface UseStaticPickerSlots extends ExportedPickersLayoutSlots<PickerValue> {
 }
-export interface UseStaticPickerSlotProps<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<PickerValidDate | null, TView> {
+export interface UseStaticPickerSlotProps extends ExportedPickersLayoutSlotProps<PickerValue> {
 }
 export interface StaticOnlyPickerProps {
     /**
@@ -27,22 +25,18 @@ export interface StaticOnlyPickerProps {
      */
     onClose?: () => void;
 }
-export interface UseStaticPickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<PickerValidDate | null, TView, any, any>> extends BasePickerProps<PickerValidDate | null, TView, TError, TExternalProps, {}>, StaticOnlyPickerProps {
+export interface UseStaticPickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<PickerValue, TView, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, StaticOnlyPickerProps {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: UseStaticPickerSlots<TView>;
+    slots?: UseStaticPickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseStaticPickerSlotProps<TView>;
+    slotProps?: UseStaticPickerSlotProps;
 }
-export interface UseStaticPickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerValidDate | null, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
+export interface UseStaticPickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
     props: TExternalProps;
-    /**
-     * Ref to pass to the root element
-     */
-    ref?: React.Ref<HTMLDivElement>;
 }

package/internals/hooks/useToolbarOwnerState.d.ts

@@ -0,0 +1,10 @@
+import { PickerOwnerState } from '../../models';
+export declare function useToolbarOwnerState(): PickerToolbarOwnerState;
+export interface PickerToolbarOwnerState extends PickerOwnerState {
+    /**
+     * The direction of the toolbar.
+     * Is equal to "ltr" when the toolbar is in left-to-right direction.
+     * Is equal to "rtl" when the toolbar is in right-to-left direction.
+     */
+    toolbarDirection: 'ltr' | 'rtl';
+}

package/internals/hooks/useToolbarOwnerState.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useRtl } from '@mui/system/RtlProvider';
+import { usePickerPrivateContext } from "./usePickerPrivateContext.js";
+export function useToolbarOwnerState() {
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const isRtl = useRtl();
+  return React.useMemo(() => _extends({}, pickerOwnerState, {
+    toolbarDirection: isRtl ? 'rtl' : 'ltr'
+  }), [pickerOwnerState, isRtl]);
+}

package/internals/hooks/useUtils.d.ts

@@ -1,12 +1,13 @@
 import { MuiPickersAdapterContextValue } from '../../LocalizationProvider/LocalizationProvider';
 import { PickersLocaleText } from '../../locales/utils/pickersLocaleTextApi';
 import { PickersTimezone, PickerValidDate } from '../../models';
-export declare const useLocalizationContext: () => Omit<MuiPickersAdapterContextValue, "localeText"> & {
-    localeText: PickersLocaleText;
-};
+export declare const useLocalizationContext: () => UseLocalizationContextReturnValue;
 export declare const useUtils: () => import("@mui/x-date-pickers/models").MuiPickersAdapter<any>;
 export declare const useDefaultDates: () => {
     minDate: PickerValidDate;
     maxDate: PickerValidDate;
 };
 export declare const useNow: (timezone: PickersTimezone) => PickerValidDate;
+export interface UseLocalizationContextReturnValue extends Omit<MuiPickersAdapterContextValue, 'localeText'> {
+    localeText: PickersLocaleText;
+}

package/internals/hooks/useUtils.js

@@ -19,7 +19,7 @@ export const useUtils = () => useLocalizationContext().utils;
 export const useDefaultDates = () => useLocalizationContext().defaultDates;
 export const useNow = timezone => {
   const utils = useUtils();
-  const now = React.useRef();
+  const now = React.useRef(undefined);
   if (now.current === undefined) {
     now.current = utils.date(undefined, timezone);
   }

package/internals/hooks/useValueWithTimezone.d.ts

@@ -1,11 +1,12 @@
 import type { PickerValueManager } from './usePicker';
 import { PickersTimezone, PickerValidDate } from '../../models';
+import { PickerValidValue } from '../models';
 /**
  * Hooks making sure that:
  * - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined
  * - The value rendered is always the one from `props.timezone` if defined
  */
-export declare const useValueWithTimezone: <TValue, TChange extends (...params: any[]) => void>({ timezone: timezoneProp, value: valueProp, defaultValue, referenceDate, onChange, valueManager, }: UseValueWithTimezoneParameters<TValue, TChange>) => {
+export declare const useValueWithTimezone: <TValue extends PickerValidValue, TChange extends (...params: any[]) => void>({ timezone: timezoneProp, value: valueProp, defaultValue, referenceDate, onChange, valueManager, }: UseValueWithTimezoneParameters<TValue, TChange>) => {
     value: TValue;
     handleValueChange: TChange;
     timezone: string;
@@ -13,12 +14,12 @@ export declare const useValueWithTimezone: <TValue, TChange extends (...params:
 /**
  * Wrapper around `useControlled` and `useValueWithTimezone`
  */
-export declare const useControlledValueWithTimezone: <TValue, TChange extends (...params: any[]) => void>({ name, timezone: timezoneProp, value: valueProp, defaultValue, referenceDate, onChange: onChangeProp, valueManager, }: UseControlledValueWithTimezoneParameters<TValue, TChange>) => {
+export declare const useControlledValueWithTimezone: <TValue extends PickerValidValue, TChange extends (...params: any[]) => void>({ name, timezone: timezoneProp, value: valueProp, defaultValue, referenceDate, onChange: onChangeProp, valueManager, }: UseControlledValueWithTimezoneParameters<TValue, TChange>) => {
     value: TValue;
     handleValueChange: TChange;
     timezone: string;
 };
-interface UseValueWithTimezoneParameters<TValue, TChange extends (...params: any[]) => void> {
+interface UseValueWithTimezoneParameters<TValue extends PickerValidValue, TChange extends (...params: any[]) => void> {
     timezone: PickersTimezone | undefined;
     value: TValue | undefined;
     defaultValue: TValue | undefined;
@@ -31,7 +32,7 @@ interface UseValueWithTimezoneParameters<TValue, TChange extends (...params: any
     onChange: TChange | undefined;
     valueManager: PickerValueManager<TValue, any>;
 }
-interface UseControlledValueWithTimezoneParameters<TValue, TChange extends (...params: any[]) => void> extends UseValueWithTimezoneParameters<TValue, TChange> {
+interface UseControlledValueWithTimezoneParameters<TValue extends PickerValidValue, TChange extends (...params: any[]) => void> extends UseValueWithTimezoneParameters<TValue, TChange> {
     name: string;
 }
 export {};

package/internals/hooks/useViews.d.ts

@@ -1,9 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import type { PickerSelectionState } from './usePicker';
-import { DateOrTimeViewWithMeridiem } from '../models';
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../models';
 import { PickerValidDate } from '../../models';
 export type PickerOnChangeFn = (date: PickerValidDate | null, selectionState?: PickerSelectionState) => void;
-export interface UseViewsOptions<TValue, TView extends DateOrTimeViewWithMeridiem> {
+export interface UseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
     /**
      * Callback fired when the value changes.
      * @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.
@@ -54,9 +54,9 @@ export interface UseViewsOptions<TValue, TView extends DateOrTimeViewWithMeridie
      */
     onFocusedViewChange?: (view: TView, hasFocus: boolean) => void;
 }
-export interface ExportedUseViewsOptions<TValue, TView extends DateOrTimeViewWithMeridiem> extends MakeOptional<UseViewsOptions<TValue, TView>, 'onChange' | 'openTo' | 'views'> {
+export interface ExportedUseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends MakeOptional<UseViewsOptions<TValue, TView>, 'onChange' | 'openTo' | 'views'> {
 }
-interface UseViewsResponse<TValue, TView extends DateOrTimeViewWithMeridiem> {
+interface UseViewsResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
     view: TView;
     setView: (view: TView) => void;
     focusedView: TView | null;
@@ -67,5 +67,5 @@ interface UseViewsResponse<TValue, TView extends DateOrTimeViewWithMeridiem> {
     goToNextView: () => void;
     setValueAndGoToNextView: (value: TValue, currentViewSelectionState?: PickerSelectionState, selectedView?: TView) => void;
 }
-export declare function useViews<TValue, TView extends DateOrTimeViewWithMeridiem>({ onChange, onViewChange, openTo, view: inView, views, autoFocus, focusedView: inFocusedView, onFocusedViewChange, }: UseViewsOptions<TValue, TView>): UseViewsResponse<TValue, TView>;
+export declare function useViews<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem>({ onChange, onViewChange, openTo, view: inView, views, autoFocus, focusedView: inFocusedView, onFocusedViewChange, }: UseViewsOptions<TValue, TView>): UseViewsResponse<TValue, TView>;
 export {};

package/internals/index.d.ts

@@ -1,10 +1,13 @@
 export { PickersArrowSwitcher } from './components/PickersArrowSwitcher/PickersArrowSwitcher';
 export type { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, } from './components/PickersArrowSwitcher';
+export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps, } from './components/PickerFieldUI';
+export type { ExportedPickerFieldUIProps, PickerFieldUISlots, PickerFieldUISlotProps, } from './components/PickerFieldUI';
 export { PickerProvider } from './components/PickerProvider';
+export type { PickerContextValue } from './components/PickerProvider';
 export { PickersModalDialog } from './components/PickersModalDialog';
 export type { PickersModalDialogSlots, PickersModalDialogSlotProps, } from './components/PickersModalDialog';
-export { PickersPopper } from './components/PickersPopper';
-export type { PickersPopperSlots, PickersPopperSlotProps } from './components/PickersPopper';
+export { PickerPopper } from './components/PickerPopper/PickerPopper';
+export type { PickerPopperSlots, PickerPopperSlotProps, } from './components/PickerPopper/PickerPopper';
 export { PickersToolbar } from './components/PickersToolbar';
 export type { PickersToolbarProps } from './components/PickersToolbar';
 export { pickersToolbarClasses } from './components/pickersToolbarClasses';
@@ -17,46 +20,52 @@ export { pickersToolbarTextClasses } from './components/pickersToolbarTextClasse
 export type { PickersToolbarTextClassKey, PickersToolbarTextClasses, } from './components/pickersToolbarTextClasses';
 export { pickersArrowSwitcherClasses } from './components/PickersArrowSwitcher/pickersArrowSwitcherClasses';
 export type { PickersArrowSwitcherClassKey, PickersArrowSwitcherClasses, } from './components/PickersArrowSwitcher/pickersArrowSwitcherClasses';
-export type { PickerPopperProps } from './components/PickersPopper';
-export { pickersPopperClasses } from './components/pickersPopperClasses';
-export type { PickersPopperClassKey, PickersPopperClasses, } from './components/pickersPopperClasses';
 export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT } from './constants/dimensions';
 export { useControlledValueWithTimezone } from './hooks/useValueWithTimezone';
 export type { DesktopOnlyPickerProps } from './hooks/useDesktopPicker';
-export { useField, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections, } from './hooks/useField';
-export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField';
+export { useField, useFieldInternalPropsWithDefaults, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections, } from './hooks/useField';
+export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, PickerFieldPrivateContextValue, } from './hooks/useField';
+export { useFieldOwnerState } from './hooks/useFieldOwnerState';
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
+export { useNullablePickerContext } from './hooks/useNullablePickerContext';
 export { usePicker } from './hooks/usePicker';
-export type { UsePickerResponse, UsePickerParams, UsePickerProps, UsePickerValueFieldResponse, PickerViewsRendererProps, } from './hooks/usePicker';
-export type { UsePickerValueNonStaticProps, PickerValueManager, PickerSelectionState, } from './hooks/usePicker/usePickerValue.types';
-export type { UsePickerViewsNonStaticProps, PickerViewRendererLookup, PickerViewRenderer, UsePickerViewsProps, } from './hooks/usePicker/usePickerViews';
+export type { UsePickerParams, UsePickerProps, UsePickerValueFieldResponse, PickerViewsRendererProps, } from './hooks/usePicker';
+export type { UsePickerValueContextValue, UsePickerValueNonStaticProps, PickerValueManager, PickerSelectionState, } from './hooks/usePicker/usePickerValue.types';
+export type { PickerViewRendererLookup, PickerRendererInterceptorProps, PickerViewRenderer, UsePickerViewsProps, } from './hooks/usePicker/usePickerViews';
+export type { UsePickerProviderNonStaticProps } from './hooks/usePicker/usePickerProvider';
 export { usePickerPrivateContext } from './hooks/usePickerPrivateContext';
 export { useStaticPicker } from './hooks/useStaticPicker';
 export type { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps, } from './hooks/useStaticPicker';
+export { useToolbarOwnerState } from './hooks/useToolbarOwnerState';
+export type { PickerToolbarOwnerState } from './hooks/useToolbarOwnerState';
 export { useLocalizationContext, useDefaultDates, useUtils, useNow } from './hooks/useUtils';
 export type { ExportedUseViewsOptions, UseViewsOptions } from './hooks/useViews';
 export { useViews } from './hooks/useViews';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
-export type { BaseSingleInputFieldProps } from './models/fields';
-export type { BasePickerProps, BasePickerInputProps, BaseNonStaticPickerProps, } from './models/props/basePickerProps';
+export type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerError, } from './models/manager';
+export type { RangePosition } from './models/pickers';
+export type { BaseSingleInputFieldProps, FieldRangeSection } from './models/fields';
+export type { BasePickerProps, BasePickerInputProps } from './models/props/basePickerProps';
 export type { BaseClockProps, DesktopOnlyTimePickerProps, AmPmProps } from './models/props/time';
-export type { BaseTabsProps, ExportedBaseTabsProps } from './models/props/tabs';
+export type { ExportedBaseTabsProps } from './models/props/tabs';
 export type { BaseToolbarProps, ExportedBaseToolbarProps } from './models/props/toolbar';
 export type { FormProps } from './models/formProps';
 export type { PickerVariant, TimeViewWithMeridiem, DateOrTimeViewWithMeridiem, } from './models/common';
 export type { BaseDateValidationProps, BaseTimeValidationProps, TimeValidationProps, MonthValidationProps, YearValidationProps, DayValidationProps, DateTimeValidationProps, } from './models/validation';
-export type { PickerRangeValue } from './models/value';
-export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps';
+export type { PickerValue, PickerRangeValue, PickerNonNullableRangeValue, InferNonNullablePickerValue, PickerValidValue, } from './models/value';
 export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem, } from './utils/date-utils';
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from './utils/date-time-utils';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
-export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, } from './utils/utils';
-export { useDefaultizedDateField, useDefaultizedTimeField, useDefaultizedDateTimeField, } from './hooks/defaultizedFieldProps';
-export { useDefaultReduceAnimations } from './hooks/useDefaultReduceAnimations';
+export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, } from './utils/utils';
+export { useReduceAnimations } from './hooks/useReduceAnimations';
 export { applyDefaultViewProps } from './utils/views';
 export { DayCalendar } from '../DateCalendar/DayCalendar';
 export type { DayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, ExportedDayCalendarProps, } from '../DateCalendar/DayCalendar';
 export type { ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';
 export { useCalendarState } from '../DateCalendar/useCalendarState';
 export { isInternalTimeView, isTimeView } from './utils/time-utils';
+export { DateTimePickerToolbarOverrideContext } from '../DateTimePicker/DateTimePickerToolbar';
+export { getDateFieldInternalPropsDefaults } from '../managers/useDateManager';
+export { getTimeFieldInternalPropsDefaults } from '../managers/useTimeManager';
+export { getDateTimeFieldInternalPropsDefaults } from '../managers/useDateTimeManager';