@mui/x-date-pickers 8.0.0-alpha.2 → 8.0.0-alpha.4

package/internals/components/PickersToolbar.js

@@ -1,17 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "toolbarTitle", "hidden", "titleId", "isLandscape", "classes", "landscapeDirection"];
+const _excluded = ["children", "className", "classes", "toolbarTitle", "hidden", "titleId", "isLandscape", "classes", "landscapeDirection"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
+import { useToolbarOwnerState } from "../hooks/useToolbarOwnerState.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     content: ['content']
@@ -32,7 +31,7 @@ const PickersToolbarRoot = styled('div', {
   padding: theme.spacing(2, 3),
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       height: 'auto',
@@ -46,7 +45,8 @@ const PickersToolbarRoot = styled('div', {
 const PickersToolbarContent = styled('div', {
   name: 'MuiPickersToolbar',
   slot: 'Content',
-  overridesResolver: (props, styles) => styles.content
+  overridesResolver: (props, styles) => styles.content,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'landscapeDirection'
 })({
   display: 'flex',
   flexWrap: 'wrap',
@@ -57,7 +57,7 @@ const PickersToolbarContent = styled('div', {
   flexDirection: 'row',
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       justifyContent: 'flex-start',
@@ -66,7 +66,7 @@ const PickersToolbarContent = styled('div', {
     }
   }, {
     props: {
-      isLandscape: true,
+      pickerOrientation: 'landscape',
       landscapeDirection: 'row'
     },
     style: {
@@ -82,13 +82,15 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
   const {
       children,
       className,
+      classes: classesProp,
       toolbarTitle,
       hidden,
-      titleId
+      titleId,
+      landscapeDirection
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useToolbarOwnerState();
+  const classes = useUtilityClasses(classesProp);
   if (hidden) {
     return null;
   }
@@ -105,6 +107,7 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
     }), /*#__PURE__*/_jsx(PickersToolbarContent, {
       className: classes.content,
       ownerState: ownerState,
+      landscapeDirection: landscapeDirection,
       children: children
     })]
   }));

package/internals/components/PickersToolbarButton.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant", "width"];
+const _excluded = ["align", "className", "classes", "selected", "typographyClassName", "value", "variant", "width"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Button from '@mui/material/Button';
@@ -9,10 +9,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { PickersToolbarText } from "./PickersToolbarText.js";
 import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -35,6 +32,7 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
   const {
       align,
       className,
+      classes: classesProp,
       selected,
       typographyClassName,
       value,
@@ -42,7 +40,7 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
       width
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(PickersToolbarButtonRoot, _extends({
     variant: "text",
     ref: ref,

package/internals/components/PickersToolbarText.js

@@ -1,35 +1,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "selected", "value"];
+const _excluded = ["className", "classes", "selected", "value"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { getPickersToolbarTextUtilityClass, pickersToolbarTextClasses } from "./pickersToolbarTextClasses.js";
+import { getPickersToolbarTextUtilityClass } from "./pickersToolbarTextClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    selected
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
-    root: ['root', selected && 'selected']
+    root: ['root']
   };
   return composeClasses(slots, getPickersToolbarTextUtilityClass, classes);
 };
 const PickersToolbarTextRoot = styled(Typography, {
   name: 'MuiPickersToolbarText',
   slot: 'Root',
-  overridesResolver: (_, styles) => [styles.root, {
-    [`&.${pickersToolbarTextClasses.selected}`]: styles.selected
-  }]
+  overridesResolver: (_, styles) => [styles.root]
 })(({
   theme
 }) => ({
   transition: theme.transitions.create('color'),
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${pickersToolbarTextClasses.selected}`]: {
+  [`&[data-selected]`]: {
     color: (theme.vars || theme).palette.text.primary
   }
 }));
@@ -40,14 +34,18 @@ export const PickersToolbarText = /*#__PURE__*/React.forwardRef(function Pickers
   });
   const {
       className,
+      classes: classesProp,
+      selected,
       value
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(PickersToolbarTextRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
     component: "span"
+  }, selected && {
+    'data-selected': true
   }, other, {
     children: value
   }));

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

@@ -9,10 +9,11 @@ import { UsePickerParams } from '../usePicker';
 import { FieldOwnerState, PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
-import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
+import { UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
 import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../../../hooks/useClearableField';
 import { PickersTextFieldProps } from '../../../PickersTextField';
+import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider';
 export interface UseDesktopPickerSlots<TView extends DateOrTimeViewWithMeridiem> extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue, TView>, UseClearableFieldSlots {
     /**
      * Component used to enter the date with the keyboard.
@@ -47,7 +48,7 @@ export interface ExportedUseDesktopPickerSlotProps<TView extends DateOrTimeViewW
     openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, PickerOwnerState>;
     openPickerIcon?: SlotComponentPropsFromProps<Record<string, any>, {}, PickerOwnerState>;
 }
-export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps {
+export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {
     /**
      * If `true`, the `input` element is focused during the first mount.
      * @default false

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

@@ -7,9 +7,10 @@ import { UsePickerParams } from '../usePicker';
 import { FieldOwnerState, PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
-import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
+import { UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
 import { PickersTextFieldProps } from '../../../PickersTextField';
+import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider';
 export interface UseMobilePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue, TView> {
     /**
      * Component used to enter the date with the keyboard.
@@ -27,7 +28,7 @@ export interface ExportedUseMobilePickerSlotProps<TView extends DateOrTimeViewWi
 }
 export interface UseMobilePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue, TView>, 'toolbar'> {
 }
-export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps {
+export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {
 }
 export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps, {}>, MakeRequired<MobileOnlyPickerProps, 'format'> {
     /**

package/internals/hooks/useOpenState.d.ts

@@ -1,9 +1,10 @@
+import * as React from 'react';
 export interface OpenStateProps {
     open?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
 }
 export declare const useOpenState: ({ open, onOpen, onClose }: OpenStateProps) => {
-    isOpen: boolean;
-    setIsOpen: (newIsOpen: boolean) => void;
+    open: boolean;
+    setOpen: (action: React.SetStateAction<boolean>) => void;
 };

package/internals/hooks/useOpenState.js

@@ -5,7 +5,7 @@ export const useOpenState = ({
   onClose
 }) => {
   const isControllingOpenProp = React.useRef(typeof open === 'boolean').current;
-  const [openState, setIsOpenState] = React.useState(false);
+  const [openState, setOpenState] = React.useState(false);
 
   // It is required to update inner state in useEffect in order to avoid situation when
   // Our component is not mounted yet, but `open` state is set to `true` (for example initially opened)
@@ -14,22 +14,23 @@ export const useOpenState = ({
       if (typeof open !== 'boolean') {
         throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
       }
-      setIsOpenState(open);
+      setOpenState(open);
     }
   }, [isControllingOpenProp, open]);
-  const setIsOpen = React.useCallback(newIsOpen => {
+  const setOpen = React.useCallback(action => {
+    const newOpen = typeof action === 'function' ? action(openState) : action;
     if (!isControllingOpenProp) {
-      setIsOpenState(newIsOpen);
+      setOpenState(newOpen);
     }
-    if (newIsOpen && onOpen) {
+    if (newOpen && onOpen) {
       onOpen();
     }
-    if (!newIsOpen && onClose) {
+    if (!newOpen && onClose) {
       onClose();
     }
-  }, [isControllingOpenProp, onOpen, onClose]);
+  }, [isControllingOpenProp, onOpen, onClose, openState]);
   return {
-    isOpen: openState,
-    setIsOpen
+    open: openState,
+    setOpen
   };
 };

package/internals/hooks/usePicker/usePicker.js

@@ -37,11 +37,11 @@ export const usePicker = ({
   });
   const providerProps = usePickerProvider({
     props,
-    pickerValueResponse,
     localeText,
     valueManager,
     variant,
-    views: pickerViewsResponse.views
+    paramsFromUsePickerValue: pickerValueResponse.provider,
+    paramsFromUsePickerViews: pickerViewsResponse.provider
   });
   return {
     // Picker value
@@ -50,7 +50,7 @@ export const usePicker = ({
     fieldProps: pickerValueResponse.fieldProps,
     // Picker views
     renderCurrentView: pickerViewsResponse.renderCurrentView,
-    hasUIView: pickerViewsResponse.hasUIView,
+    hasUIView: pickerViewsResponse.provider.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker layout
     layoutProps: _extends({}, pickerViewsResponse.layoutProps, pickerValueResponse.layoutProps),

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

@@ -10,11 +10,12 @@ export interface UsePickerBaseProps<TValue extends PickerValidValue, TView exten
 }
 export interface UsePickerProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueProps<TValue, TError>, UsePickerViewsProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerProviderProps {
 }
-export interface UsePickerParams<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'variant' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'>, Pick<UsePickerProviderParameters<TValue>, 'localeText'> {
+export interface UsePickerParams<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'variant' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'>, Pick<UsePickerProviderParameters<TValue, TView>, 'localeText'> {
     props: TExternalProps;
 }
-export interface UsePickerResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Omit<UsePickerValueResponse<TValue, TError>, 'viewProps' | 'layoutProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps' | 'views'> {
+export interface UsePickerResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Pick<UsePickerValueResponse<TValue, TError>, 'open' | 'actions' | 'fieldProps'>, Pick<UsePickerViewsResponse<TView>, 'shouldRestoreFocus' | 'renderCurrentView'> {
     ownerState: PickerOwnerState;
     providerProps: UsePickerProviderReturnValue;
     layoutProps: UsePickerValueResponse<TValue, TError>['layoutProps'] & UsePickerViewsResponse<TView>['layoutProps'];
+    hasUIView: boolean;
 }

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

@@ -1,20 +1,21 @@
-import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types';
+import { PickerValueManager, UsePickerValueProviderParams } from './usePickerValue.types';
 import { PickerProviderProps } from '../../components/PickerProvider';
 import type { UsePickerProps } from './usePicker.types';
 import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerVariant } from '../../models';
+import { UsePickerViewsProviderParams } from './usePickerViews';
 export declare const usePickerOrientation: (views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined) => PickerOrientation;
-export declare function usePickerProvider<TValue extends PickerValidValue>(parameters: UsePickerProviderParameters<TValue>): UsePickerProviderReturnValue;
-export interface UsePickerProviderParameters<TValue extends PickerValidValue> extends Pick<PickerProviderProps, 'localeText'> {
+export declare function usePickerProvider<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem>(parameters: UsePickerProviderParameters<TValue, TView>): UsePickerProviderReturnValue;
+export interface UsePickerProviderParameters<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends Pick<PickerProviderProps, 'localeText'> {
     props: UsePickerProps<TValue, any, any, any, any>;
-    pickerValueResponse: UsePickerValueResponse<TValue, any>;
     valueManager: PickerValueManager<TValue, any>;
     variant: PickerVariant;
-    views: readonly DateOrTimeViewWithMeridiem[];
+    paramsFromUsePickerValue: UsePickerValueProviderParams<TValue>;
+    paramsFromUsePickerViews: UsePickerViewsProviderParams<TView>;
 }
 export interface UsePickerProviderReturnValue extends Omit<PickerProviderProps, 'children'> {
 }
 /**
- * Props used to create the private context.
+ * Props used to create the picker's contexts.
  * Those props are exposed on all the pickers.
  */
 export interface UsePickerProviderProps extends FormProps {
@@ -23,3 +24,13 @@ export interface UsePickerProviderProps extends FormProps {
      */
     orientation?: PickerOrientation;
 }
+/**
+ * Props used to create the picker's contexts and that are not available on static pickers.
+ */
+export interface UsePickerProviderNonStaticProps {
+    /**
+     * If `true`, the open picker button will not be rendered (renders only the field).
+     * @default false
+     */
+    disableOpenPicker?: boolean;
+}

package/internals/hooks/usePicker/usePickerProvider.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useUtils } from "../useUtils.js";
@@ -36,31 +37,28 @@ export const usePickerOrientation = (views, customOrientation) => {
 export function usePickerProvider(parameters) {
   const {
     props,
-    pickerValueResponse,
     valueManager,
     localeText,
     variant,
-    views
+    paramsFromUsePickerValue,
+    paramsFromUsePickerViews
   } = parameters;
   const utils = useUtils();
-  const orientation = usePickerOrientation(views, props.orientation);
+  const orientation = usePickerOrientation(paramsFromUsePickerViews.views, props.orientation);
   const ownerState = React.useMemo(() => ({
-    isPickerValueEmpty: valueManager.areValuesEqual(utils, pickerValueResponse.viewProps.value, valueManager.emptyValue),
-    isPickerOpen: pickerValueResponse.open,
+    isPickerValueEmpty: valueManager.areValuesEqual(utils, paramsFromUsePickerValue.value, valueManager.emptyValue),
+    isPickerOpen: paramsFromUsePickerValue.contextValue.open,
     isPickerDisabled: props.disabled ?? false,
     isPickerReadOnly: props.readOnly ?? false,
     pickerOrientation: orientation,
     pickerVariant: variant
-  }), [utils, valueManager, pickerValueResponse.viewProps.value, pickerValueResponse.open, orientation, variant, props.disabled, props.readOnly]);
-  const contextValue = React.useMemo(() => ({
-    onOpen: pickerValueResponse.actions.onOpen,
-    onClose: pickerValueResponse.actions.onClose,
-    open: pickerValueResponse.open,
+  }), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
+  const contextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.contextValue, {
     disabled: props.disabled ?? false,
     readOnly: props.readOnly ?? false,
     variant,
     orientation
-  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open, variant, orientation, props.disabled, props.readOnly]);
+  }), [paramsFromUsePickerValue.contextValue, variant, orientation, props.disabled, props.readOnly]);
   const privateContextValue = React.useMemo(() => ({
     ownerState
   }), [ownerState]);
@@ -72,6 +70,10 @@ export function usePickerProvider(parameters) {
 }
 
 /**
- * Props used to create the private context.
+ * Props used to create the picker's contexts.
  * Those props are exposed on all the pickers.
+ */
+
+/**
+ * Props used to create the picker's contexts and that are not available on static pickers.
  */

package/internals/hooks/usePicker/usePickerValue.js

@@ -150,8 +150,8 @@ export const usePickerValue = ({
   const utils = useUtils();
   const adapter = useLocalizationContext();
   const {
-    isOpen,
-    setIsOpen
+    open,
+    setOpen
   } = useOpenState(props);
   const {
     timezone,
@@ -237,7 +237,7 @@ export const usePickerValue = ({
       onAccept(action.value, getContext());
     }
     if (shouldClose) {
-      setIsOpen(false);
+      setOpen(false);
     }
   });
   if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
@@ -288,11 +288,11 @@ export const usePickerValue = ({
   });
   const handleOpen = useEventCallback(event => {
     event.preventDefault();
-    setIsOpen(true);
+    setOpen(true);
   });
   const handleClose = useEventCallback(event => {
     event?.preventDefault();
-    setIsOpen(false);
+    setOpen(false);
   });
   const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
     name: 'setValueFromView',
@@ -323,12 +323,12 @@ export const usePickerValue = ({
     value: dateState.draft,
     onChange: handleChangeFromField
   };
-  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
+  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
   const viewResponse = {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onClose: handleClose,
-    open: isOpen
+    open
   };
   const isValid = testedValue => {
     const error = validator({
@@ -340,16 +340,27 @@ export const usePickerValue = ({
     return !valueManager.hasError(error);
   };
   const layoutResponse = _extends({}, actions, {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onSelectShortcut: handleSelectShortcut,
     isValid
   });
+  const contextValue = React.useMemo(() => {
+    return {
+      open,
+      setOpen
+    };
+  }, [open, setOpen]);
+  const providerParams = {
+    value: valueWithoutError,
+    contextValue
+  };
   return {
-    open: isOpen,
+    open,
     fieldProps: fieldResponse,
     viewProps: viewResponse,
     layoutProps: layoutResponse,
-    actions
+    actions,
+    provider: providerParams
   };
 };

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
 import { Validator } from '../../../validation';
 import { PickerVariant } from '../../models/common';
@@ -264,10 +265,35 @@ export interface UsePickerValueLayoutResponse<TValue extends PickerValidValue> e
     onSelectShortcut: (newValue: TValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext) => void;
     isValid: (value: TValue) => boolean;
 }
+/**
+ * Params passed to `usePickerProvider`.
+ */
+export interface UsePickerValueProviderParams<TValue extends PickerValidValue> {
+    value: TValue;
+    contextValue: UsePickerValueContextValue;
+}
 export interface UsePickerValueResponse<TValue extends PickerValidValue, TError> {
     open: boolean;
     actions: UsePickerValueActions;
     viewProps: UsePickerValueViewsResponse<TValue>;
     fieldProps: UsePickerValueFieldResponse<TValue, TError>;
     layoutProps: UsePickerValueLayoutResponse<TValue>;
+    provider: UsePickerValueProviderParams<TValue>;
+}
+export interface UsePickerValueContextValue {
+    /**
+     * Sets the current open state of the Picker.
+     * ```ts
+     * setOpen(true); // Opens the picker.
+     * setOpen(false); // Closes the picker.
+     * setOpen((prevOpen) => !prevOpen); // Toggles the open state.
+     * ```
+     * @param {React.SetStateAction<boolean>} action The new open state of the Picker.
+     * It can be a function that will receive the current open state.
+     */
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * `true` if the picker is open, `false` otherwise.
+     */
+    open: boolean;
 }

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

@@ -39,16 +39,6 @@ export interface UsePickerViewsBaseProps<TValue extends PickerValidValue, TView
      */
     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.
  */
@@ -73,20 +63,20 @@ export interface UsePickerViewParams<TValue extends PickerValidValue, TView exte
     rendererInterceptor?: (viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps, TAdditionalProps>, popperView: TView, rendererProps: PickerViewsRendererProps<TValue, TView, TExternalProps, TAdditionalProps>) => React.ReactNode;
 }
 export interface UsePickerViewsResponse<TView extends DateOrTimeViewWithMeridiem> {
-    /**
-     * Indicates if the the picker has at least one view that should be rendered in UI.
-     */
-    hasUIView: boolean;
-    views: readonly TView[];
     renderCurrentView: () => React.ReactNode;
     shouldRestoreFocus: () => boolean;
     layoutProps: UsePickerViewsLayoutResponse<TView>;
+    provider: UsePickerViewsProviderParams<TView>;
 }
 export interface UsePickerViewsLayoutResponse<TView extends DateOrTimeViewWithMeridiem> {
     view: TView | null;
     onViewChange: (view: TView) => void;
     views: readonly TView[];
 }
+export interface UsePickerViewsProviderParams<TView extends DateOrTimeViewWithMeridiem> {
+    hasUIView: boolean;
+    views: readonly TView[];
+}
 /**
  * Manage the views of all the pickers:
  * - Handles the view switch

package/internals/hooks/usePicker/usePickerViews.js

@@ -11,10 +11,6 @@ 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.
  */
@@ -132,11 +128,14 @@ export const usePickerViews = ({
     view: popperView,
     onViewChange: setView
   };
-  return {
+  const providerParams = {
     hasUIView,
-    views,
+    views
+  };
+  return {
     shouldRestoreFocus,
     layoutProps,
+    provider: providerParams,
     renderCurrentView: () => {
       if (popperView == null) {
         return null;

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]);
+}