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

package/hooks/useClearableField.d.ts

@@ -3,6 +3,8 @@ import { SlotComponentProps } from '@mui/utils';
 import MuiIconButton from '@mui/material/IconButton';
 import { SxProps } from '@mui/system';
 import { ClearIcon } from '../icons';
+import { FieldOwnerState } from '../models/fields';
+import { FormProps } from '../internals/models';
 export interface ExportedUseClearableFieldProps {
     /**
      * If `true`, a clear button will be shown in the field allowing value clearing.
@@ -27,10 +29,10 @@ export interface UseClearableFieldSlots {
     clearButton?: React.ElementType;
 }
 export interface UseClearableFieldSlotProps {
-    clearIcon?: SlotComponentProps<typeof ClearIcon, {}, {}>;
-    clearButton?: SlotComponentProps<typeof MuiIconButton, {}, {}>;
+    clearIcon?: SlotComponentProps<typeof ClearIcon, {}, FieldOwnerState>;
+    clearButton?: SlotComponentProps<typeof MuiIconButton, {}, FieldOwnerState>;
 }
-interface UseClearableFieldProps extends ExportedUseClearableFieldProps {
+interface UseClearableFieldProps extends ExportedUseClearableFieldProps, FormProps {
     InputProps?: {
         endAdornment?: React.ReactNode;
     };

package/hooks/useClearableField.js

@@ -10,9 +10,11 @@ import MuiIconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import { ClearIcon } from "../icons/index.js";
 import { usePickerTranslations } from "./usePickerTranslations.js";
+import { useFieldOwnerState } from "../internals/hooks/useFieldOwnerState.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useClearableField = props => {
   const translations = usePickerTranslations();
+  const ownerState = useFieldOwnerState(props);
   const {
       clearable,
       onClear,
@@ -27,7 +29,7 @@ export const useClearableField = props => {
   const _useSlotProps = useSlotProps({
       elementType: IconButton,
       externalSlotProps: slotProps?.clearButton,
-      ownerState: {},
+      ownerState,
       className: 'clearButton',
       additionalProps: {
         title: translations.fieldClearLabel,
@@ -39,7 +41,7 @@ export const useClearableField = props => {
   const endClearIconProps = useSlotProps({
     elementType: EndClearIcon,
     externalSlotProps: slotProps?.clearIcon,
-    ownerState: {}
+    ownerState
   });
   return _extends({}, other, {
     InputProps: _extends({}, InputProps, {

package/index.js

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

package/internals/components/PickerProvider.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PickerOwnerState } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
 import { PickerOrientation, PickerVariant } from '../models';
-import { UsePickerValueContextValue } from '../hooks/usePicker/usePickerValue.types';
+import type { UsePickerValueContextValue } from '../hooks/usePicker/usePickerValue.types';
 export declare const PickerContext: React.Context<PickerContextValue | null>;
 export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
 /**

package/internals/components/PickersPopper.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import MuiPaper, { PaperProps as MuiPaperProps } from '@mui/material/Paper';
-import MuiPopper, { PopperProps as MuiPopperProps, PopperPlacementType } from '@mui/material/Popper';
+import { PaperProps as MuiPaperProps, PaperProps } from '@mui/material/Paper';
+import { PopperProps as MuiPopperProps, PopperPlacementType, PopperProps } from '@mui/material/Popper';
 import { TrapFocusProps as MuiTrapFocusProps } from '@mui/material/Unstable_TrapFocus';
-import { SlotComponentProps } from '@mui/utils';
 import { TransitionProps as MuiTransitionProps } from '@mui/material/transitions';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { PickersPopperClasses } from './pickersPopperClasses';
 import { UsePickerValueActions } from '../hooks/usePicker/usePickerValue.types';
-interface PickersPopperOwnerState extends PickerPopperProps {
-    placement: PopperPlacementType;
+import { PickerOwnerState } from '../../models';
+interface PickerPopperOwnerState extends PickerOwnerState {
+    popperPlacement: PopperPlacementType;
 }
 export interface PickersPopperSlots {
     /**
@@ -35,7 +36,7 @@ export interface PickersPopperSlotProps {
     /**
      * Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component.
      */
-    desktopPaper?: SlotComponentProps<typeof MuiPaper, {}, PickersPopperOwnerState>;
+    desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
     /**
      * Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component.
      */
@@ -47,12 +48,15 @@ export interface PickersPopperSlotProps {
     /**
      * Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component.
      */
-    popper?: SlotComponentProps<typeof MuiPopper, {}, PickerPopperProps>;
+    popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerPopperOwnerState>;
 }
 export interface PickerPopperProps extends UsePickerValueActions {
     role: 'tooltip' | 'dialog';
     anchorEl: MuiPopperProps['anchorEl'];
     open: MuiPopperProps['open'];
+    /**
+     * @default "bottom"
+     */
     placement?: MuiPopperProps['placement'];
     containerRef?: React.Ref<HTMLDivElement>;
     children?: React.ReactNode;

package/internals/components/PickersPopper.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["PaperComponent", "popperPlacement", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
+const _excluded = ["PaperComponent", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import Grow from '@mui/material/Grow';
@@ -13,11 +13,9 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { getPickersPopperUtilityClass } from "./pickersPopperClasses.js";
 import { getActiveElement } from "../utils/utils.js";
 import { useDefaultReduceAnimations } from "../hooks/useDefaultReduceAnimations.js";
+import { usePickerPrivateContext } from "../hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     paper: ['paper']
@@ -42,8 +40,8 @@ const PickersPopperPaper = styled(MuiPaper, {
   transformOrigin: 'top center',
   variants: [{
     props: ({
-      placement
-    }) => ['top', 'top-start', 'top-end'].includes(placement),
+      popperPlacement
+    }) => ['top', 'top-start', 'top-end'].includes(popperPlacement),
     style: {
       transformOrigin: 'bottom center'
     }
@@ -167,8 +165,7 @@ function useClickAwayListener(active, onClickAway) {
 const PickersPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       PaperComponent,
-      popperPlacement,
-      ownerState: inOwnerState,
+      ownerState,
       children,
       paperSlotProps,
       paperClasses,
@@ -178,9 +175,6 @@ const PickersPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) =>
       // https://mui.com/material-ui/transitions/#child-requirement
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, inOwnerState, {
-    placement: popperPlacement
-  });
   const paperProps = useSlotProps({
     elementType: PaperComponent,
     externalSlotProps: paperSlotProps,
@@ -219,10 +213,11 @@ export function PickersPopper(inProps) {
     onDismiss,
     open,
     role,
-    placement,
+    placement = 'bottom',
     slots,
     slotProps,
-    reduceAnimations: inReduceAnimations
+    reduceAnimations: inReduceAnimations,
+    classes: classesProp
   } = props;
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
@@ -256,10 +251,15 @@ export function PickersPopper(inProps) {
   const paperRef = React.useRef(null);
   const handleRef = useForkRef(paperRef, containerRef);
   const handlePaperRef = useForkRef(handleRef, clickAwayRef);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   const defaultReduceAnimations = useDefaultReduceAnimations();
   const reduceAnimations = inReduceAnimations ?? defaultReduceAnimations;
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    popperPlacement: placement
+  });
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
       // stop the propagation to avoid closing parent modal
@@ -283,12 +283,11 @@ export function PickersPopper(inProps) {
       onKeyDown: handleKeyDown
     },
     className: classes.root,
-    ownerState: props
+    ownerState
   });
   return /*#__PURE__*/_jsx(Popper, _extends({}, popperProps, {
     children: ({
-      TransitionProps,
-      placement: popperPlacement
+      TransitionProps
     }) => /*#__PURE__*/_jsx(FocusTrap, _extends({
       open: open,
       disableAutoFocus: true
@@ -304,7 +303,6 @@ export function PickersPopper(inProps) {
         children: /*#__PURE__*/_jsx(PickersPopperPaperWrapper, {
           PaperComponent: Paper,
           ownerState: ownerState,
-          popperPlacement: popperPlacement,
           ref: handlePaperRef,
           onPaperClick: onPaperClick,
           onPaperTouchStart: onPaperTouchStart,

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/usePicker/usePicker.js

@@ -40,8 +40,8 @@ export const usePicker = ({
     localeText,
     valueManager,
     variant,
-    views: pickerViewsResponse.views,
-    paramsFromUsePickerValue: pickerValueResponse.provider
+    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 Pick<UsePickerValueResponse<TValue, TError>, 'open' | 'actions' | 'fieldProps'>, 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

@@ -2,19 +2,20 @@ import { PickerValueManager, UsePickerValueProviderParams } from './usePickerVal
 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>;
     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

@@ -40,11 +40,11 @@ export function usePickerProvider(parameters) {
     valueManager,
     localeText,
     variant,
-    views,
-    paramsFromUsePickerValue
+    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, paramsFromUsePickerValue.value, valueManager.emptyValue),
     isPickerOpen: paramsFromUsePickerValue.contextValue.open,
@@ -70,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/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';
+}