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

package/PickersLayout/PickersLayout.types.d.ts

@@ -6,7 +6,7 @@ import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/
 import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
 import { UsePickerLayoutPropsResponseLayoutProps } from '../internals/hooks/usePicker/usePickerLayoutProps';
 import { PickersLayoutClasses } from './pickersLayoutClasses';
-import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models/common';
+import { DateOrTimeViewWithMeridiem, PickerVariant } from '../internals/models/common';
 import { PickersShortcutsProps } from '../PickersShortcuts';
 import { ExportedPickersShortcutProps, PickersShortcuts } from '../PickersShortcuts/PickersShortcuts';
 import { PickerOwnerState } from '../models';
@@ -28,7 +28,7 @@ export interface ExportedPickersLayoutSlots<TValue, TView extends DateOrTimeView
     layout?: React.JSXElementConstructor<PickersLayoutProps<TValue, TView> & React.RefAttributes<HTMLDivElement>>;
 }
 export interface PickerLayoutOwnerState extends PickerOwnerState {
-    wrapperVariant: WrapperVariant;
+    wrapperVariant: PickerVariant;
     isLandscape: boolean;
 }
 export interface ExportedPickersLayoutSlotProps<TValue, TView extends DateOrTimeViewWithMeridiem> {

package/PickersLayout/usePickerLayout.js

@@ -45,8 +45,6 @@ const usePickerLayout = props => {
     onSelectShortcut,
     isValid,
     isLandscape,
-    disabled,
-    readOnly,
     children,
     slots,
     slotProps,
@@ -90,9 +88,7 @@ const usePickerLayout = props => {
       value,
       view,
       onViewChange,
-      views,
-      disabled,
-      readOnly
+      views
     },
     className: classes.toolbar,
     ownerState

package/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef"];
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFormControl } from '@mui/material/FormControl';
@@ -194,7 +194,9 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       readOnly,
       inputProps,
       inputRef,
-      sectionListRef
+      sectionListRef,
+      onFocus,
+      onBlur
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootRef = React.useRef(null);
@@ -206,13 +208,12 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
     throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
   }
   const handleInputFocus = event => {
-    // Fix a bug with IE11 where the focus/blur events are triggered
-    // while the component is disabled.
-    if (muiFormControl.disabled) {
-      event.stopPropagation();
-      return;
-    }
     muiFormControl.onFocus?.(event);
+    onFocus?.(event);
+  };
+  const handleInputBlur = event => {
+    muiFormControl.onBlur?.(event);
+    onBlur?.(event);
   };
   React.useEffect(() => {
     if (muiFormControl) {
@@ -254,7 +255,7 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       tabIndex: tabIndex,
       className: classes.sectionsContainer,
       onFocus: handleInputFocus,
-      onBlur: muiFormControl.onBlur,
+      onBlur: handleInputBlur,
       onInput: onInput,
       onPaste: onPaste,
       onKeyDown: onKeyDown,

package/PickersTextField/PickersTextField.js

@@ -105,8 +105,6 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
     className: clsx(classes.root, className),
     ref: handleRootRef,
     focused: focused,
-    onFocus: onFocus,
-    onBlur: onBlur,
     disabled: disabled,
     variant: variant,
     error: error,
@@ -128,6 +126,8 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       onKeyUp: onKeyUp,
       onInput: onInput,
       onPaste: onPaste,
+      onFocus: onFocus,
+      onBlur: onBlur,
       endAdornment: endAdornment,
       startAdornment: startAdornment,
       tabIndex: tabIndex,

package/README.md

@@ -35,8 +35,8 @@ This component has the following peer dependencies that you need to install as w
 ```json
 "peerDependencies": {
   "@mui/material": "^5.15.14 || ^6.0.0",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

package/TimeClock/Clock.js

@@ -222,6 +222,7 @@ export function Clock(inProps) {
       setTime(event, 'finish');
       isMoving.current = false;
     }
+    event.preventDefault();
   };
   const handleMouseMove = event => {
     // event.buttons & PRIMARY_MOUSE_BUTTON

package/TimeClock/TimeClock.js

@@ -107,6 +107,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });

package/TimePicker/TimePickerToolbar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -18,6 +18,7 @@ import { useUtils } from "../internals/hooks/useUtils.js";
 import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from "./timePickerToolbarClasses.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
+import { usePickerContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -128,14 +129,16 @@ function TimePickerToolbar(inProps) {
       view,
       onViewChange,
       views,
-      disabled,
-      readOnly,
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
   const translations = usePickerTranslations();
   const isRtl = useRtl();
+  const {
+    disabled,
+    readOnly
+  } = usePickerContext();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
     meridiemMode,
@@ -216,12 +219,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -235,12 +232,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
-  /**
-   * If `true`, the component is read-only.
-   * When read-only, the value cannot be changed but the user can interact with the interface.
-   * @default false
-   */
-  readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/YearCalendar/YearCalendar.js

@@ -104,6 +104,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });

package/hooks/useSplitFieldProps.d.ts

@@ -1,7 +1,7 @@
-import { FieldValueType } from '../models';
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from '../validation/extractValidationProps';
+import { PickerValueType } from '../models/common';
 declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator"];
-type InternalPropNames<TValueType extends FieldValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
+type InternalPropNames<TValueType extends PickerValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
 /**
  * Split the props received by the field component into:
  * - `internalProps` which are used by the various hooks called by the field component.
@@ -12,7 +12,7 @@ type InternalPropNames<TValueType extends FieldValueType> = (typeof SHARED_FIELD
  * @param {TProps} props The props received by the field component.
  * @param {TValueType} valueType The type of the field value ('date', 'time', or 'date-time').
  */
-export declare const useSplitFieldProps: <TValueType extends FieldValueType, TProps extends { [key in InternalPropNames<TValueType>]?: any; }>(props: TProps, valueType: TValueType) => {
+export declare const useSplitFieldProps: <TValueType extends PickerValueType, TProps extends { [key in InternalPropNames<TValueType>]?: any; }>(props: TProps, valueType: TValueType) => {
     forwardedProps: Omit<TProps, InternalPropNames<TValueType>>;
     internalProps: Pick<TProps, InternalPropNames<TValueType>>;
 };

package/index.js

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

package/internals/components/PickerProvider.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PickerOwnerState } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
+import { PickerOrientation, PickerVariant } from '../models';
 export declare const PickerContext: React.Context<PickerContextValue | null>;
 export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
 /**
@@ -32,6 +33,31 @@ export interface PickerContextValue {
      * `true` if the picker is open, `false` otherwise.
      */
     open: boolean;
+    /**
+     * `true` if the picker is disabled, `false` otherwise.
+     */
+    disabled: boolean;
+    /**
+     * `true` if the picker is read-only, `false` otherwise.
+     */
+    readOnly: boolean;
+    /**
+     * The responsive variant of the picker.
+     * Is equal to "desktop" when using a desktop picker (like <DesktopDatePicker />).
+     * Is equal to "mobile" when using a mobile picker (like <MobileDatePicker />).
+     * Is equal to "mobile" or "desktop" when using a responsive picker (like <DatePicker />) depending on the `desktopModeMediaQuery` prop.
+     * Is equal to "mobile" or "desktop" when using a static picker (like <StaticDatePicker />) depending on the `displayStaticWrapperAs` prop.
+     * Is always equal to "desktop" if the component you are accessing the ownerState from is not wrapped by a picker.
+     */
+    variant: PickerVariant;
+    /**
+     * The orientation of the picker.
+     * Is equal to "landscape" when the picker is in landscape orientation.
+     * Is equal to "portrait" when the picker is in portrait orientation.
+     * You can use the "orientation" on any picker component to force the orientation.
+     * Is always equal to "portrait" if the component you are accessing the ownerState from is not wrapped by a picker.
+     */
+    orientation: PickerOrientation;
 }
 export interface PickerPrivateContextValue {
     /**

package/internals/components/PickerProvider.js

@@ -7,7 +7,9 @@ export const PickerPrivateContext = /*#__PURE__*/React.createContext({
     isPickerDisabled: false,
     isPickerReadOnly: false,
     isPickerValueEmpty: false,
-    isPickerOpen: false
+    isPickerOpen: false,
+    pickerVariant: 'desktop',
+    pickerOrientation: 'portrait'
   }
 });
 

package/internals/components/PickersToolbar.js

@@ -10,13 +10,11 @@ import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
-    classes,
-    isLandscape
+    classes
   } = ownerState;
   const slots = {
     root: ['root'],
-    content: ['content'],
-    penIconButton: ['penIconButton', isLandscape && 'penIconButtonLandscape']
+    content: ['content']
   };
   return composeClasses(slots, getPickersToolbarUtilityClass, classes);
 };

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -67,7 +67,7 @@ export const useDesktopPicker = _ref => {
     localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'desktop'
+    variant: 'desktop'
   }));
   const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;
   const _useSlotProps = useSlotProps({

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, FieldValueType, PickerValidDate, FieldRef, OnErrorProps, InferError } from '../../../models';
+import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferError, PickerValueType } from '../../../models';
 import type { PickerValueManager } from '../usePicker';
 import type { Validator } from '../../../validation';
 import type { UseFieldStateResponse } from './useFieldState';
@@ -13,7 +13,7 @@ export interface UseFieldParams<TValue, TSection extends FieldSection, TEnableAc
     valueManager: PickerValueManager<TValue, InferError<TInternalProps>>;
     fieldValueManager: FieldValueManager<TValue, TSection>;
     validator: Validator<TValue, InferError<TInternalProps>, TInternalProps>;
-    valueType: FieldValueType;
+    valueType: PickerValueType;
 }
 export interface UseFieldInternalProps<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends TimezoneProps, FormProps, OnErrorProps<TValue, TError> {
     /**

package/internals/hooks/useField/useField.utils.d.ts

@@ -1,5 +1,5 @@
 import { AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from './useField.types';
-import { FieldSectionType, FieldValueType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections } from '../../../models';
+import { FieldSectionType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections, PickerValueType } from '../../../models';
 export declare const getDateSectionConfigFromFormatToken: (utils: MuiPickersAdapter, formatToken: string) => Pick<FieldSection, "type" | "contentType"> & {
     maxLength: number | undefined;
 };
@@ -31,7 +31,7 @@ export declare const getDateFromDateSections: (utils: MuiPickersAdapter, section
 export declare const createDateStrForV7HiddenInputFromSections: (sections: FieldSection[]) => string;
 export declare const createDateStrForV6InputFromSections: (sections: FieldSection[], localizedDigits: string[], isRtl: boolean) => string;
 export declare const getSectionsBoundaries: (utils: MuiPickersAdapter, localizedDigits: string[], timezone: PickersTimezone) => FieldSectionsValueBoundaries;
-export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: FieldValueType) => void;
+export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: PickerValueType) => void;
 export declare const mergeDateIntoReferenceDate: (utils: MuiPickersAdapter, dateToTransferFrom: PickerValidDate, sections: FieldSection[], referenceDate: PickerValidDate, shouldLimitToEditedSections: boolean) => PickerValidDate;
 export declare const isAndroid: () => boolean;
 export declare const getSectionOrder: (sections: FieldSection[], shouldApplyRTL: boolean) => SectionOrdering;

package/internals/hooks/useField/useFieldState.js

@@ -41,6 +41,7 @@ export const useFieldState = params => {
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager
   });

package/internals/hooks/useField/useFieldV7TextField.js

@@ -198,8 +198,9 @@ export const useFieldV7TextField = params => {
     if (focused || !sectionListRef.current) {
       return;
     }
+    const activeElement = getActiveElement(document);
     setFocused(true);
-    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(getActiveElement(document)) != null;
+    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(activeElement) != null;
     if (!isFocusInsideASection) {
       setSelectedSections(sectionOrder.startIndex);
     }

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -59,7 +59,7 @@ export const useMobilePicker = _ref => {
     localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'mobile'
+    variant: 'mobile'
   }));
   const Field = slots.field;
   const fieldProps = useSlotProps({

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

@@ -1,4 +1,4 @@
 import { UsePickerParams, UsePickerProps, UsePickerResponse } from './usePicker.types';
 import { FieldSection, InferError } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-export declare const usePicker: <TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}>({ props, valueManager, valueType, wrapperVariant, additionalViewProps, validator, autoFocusView, rendererInterceptor, fieldRef, localeText, }: UsePickerParams<TValue, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerResponse<TValue, TView, TSection, InferError<TExternalProps>>;
+export declare const usePicker: <TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}>({ props, valueManager, valueType, variant, additionalViewProps, validator, autoFocusView, rendererInterceptor, fieldRef, localeText, }: UsePickerParams<TValue, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerResponse<TValue, TView, TSection, InferError<TExternalProps>>;

package/internals/hooks/usePicker/usePicker.js

@@ -2,13 +2,12 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { usePickerValue } from "./usePickerValue.js";
 import { usePickerViews } from "./usePickerViews.js";
 import { usePickerLayoutProps } from "./usePickerLayoutProps.js";
-import { usePickerOwnerState } from "./usePickerOwnerState.js";
 import { usePickerProvider } from "./usePickerProvider.js";
 export const usePicker = ({
   props,
   valueManager,
   valueType,
-  wrapperVariant,
+  variant,
   additionalViewProps,
   validator,
   autoFocusView,
@@ -25,7 +24,7 @@ export const usePicker = ({
     props,
     valueManager,
     valueType,
-    wrapperVariant,
+    variant,
     validator
   });
   const pickerViewsResponse = usePickerViews({
@@ -38,19 +37,17 @@ export const usePicker = ({
   });
   const pickerLayoutResponse = usePickerLayoutProps({
     props,
-    wrapperVariant,
+    variant,
     propsFromPickerValue: pickerValueResponse.layoutProps,
     propsFromPickerViews: pickerViewsResponse.layoutProps
   });
-  const pickerOwnerState = usePickerOwnerState({
-    props,
-    pickerValueResponse,
-    valueManager
-  });
   const providerProps = usePickerProvider({
+    props,
     pickerValueResponse,
-    ownerState: pickerOwnerState,
-    localeText
+    localeText,
+    valueManager,
+    variant,
+    views: pickerViewsResponse.views
   });
   return {
     // Picker value
@@ -66,6 +63,6 @@ export const usePicker = ({
     // Picker provider
     providerProps,
     // Picker owner state
-    ownerState: pickerOwnerState
+    ownerState: providerProps.privateContextValue.ownerState
   };
 };

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

@@ -1,20 +1,20 @@
 import { UsePickerValueParams, UsePickerValueProps, UsePickerValueBaseProps, UsePickerValueResponse } from './usePickerValue.types';
 import { UsePickerViewsProps, UsePickerViewParams, UsePickerViewsResponse, UsePickerViewsBaseProps } from './usePickerViews';
-import { UsePickerLayoutProps, UsePickerLayoutPropsResponse } from './usePickerLayoutProps';
+import { UsePickerLayoutPropsResponse } from './usePickerLayoutProps';
 import { FieldSection, PickerOwnerState } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-import { UsePickerProviderParameters, UsePickerProviderReturnValue } from './usePickerProvider';
+import { UsePickerProviderParameters, UsePickerProviderProps, UsePickerProviderReturnValue } from './usePickerProvider';
 /**
  * Props common to all picker headless implementations.
  */
-export interface UsePickerBaseProps<TValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueBaseProps<TValue, TError>, UsePickerViewsBaseProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerLayoutProps {
+export interface UsePickerBaseProps<TValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueBaseProps<TValue, TError>, UsePickerViewsBaseProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerProviderProps {
 }
-export interface UsePickerProps<TValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueProps<TValue, TError>, UsePickerViewsProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerLayoutProps {
+export interface UsePickerProps<TValue, 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, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'wrapperVariant' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TSection, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'>, Pick<UsePickerProviderParameters<TValue>, 'localeText'> {
+export interface UsePickerParams<TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'variant' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TSection, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'>, Pick<UsePickerProviderParameters<TValue>, 'localeText'> {
     props: TExternalProps;
 }
-export interface UsePickerResponse<TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TError> extends Omit<UsePickerValueResponse<TValue, TSection, TError>, 'viewProps' | 'layoutProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps'>, UsePickerLayoutPropsResponse<TValue, TView> {
+export interface UsePickerResponse<TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TError> extends Omit<UsePickerValueResponse<TValue, TSection, TError>, 'viewProps' | 'layoutProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps' | 'views'>, UsePickerLayoutPropsResponse<TValue, TView> {
     ownerState: PickerOwnerState;
     providerProps: UsePickerProviderReturnValue;
 }

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

@@ -1,12 +1,10 @@
 import { UsePickerValueLayoutResponse } from './usePickerValue.types';
 import { UsePickerViewsLayoutResponse } from './usePickerViews';
-import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../../models/common';
-import { FormProps } from '../../models';
+import { DateOrTimeViewWithMeridiem, PickerVariant } from '../../models/common';
 /**
  * Props used to create the layout of the views.
- * Those props are exposed on all the pickers.
  */
-export interface UsePickerLayoutProps extends FormProps {
+interface UsePickerLayoutProps {
     /**
      * Force rendering in particular orientation.
      */
@@ -15,7 +13,7 @@ export interface UsePickerLayoutProps extends FormProps {
 export interface UsePickerLayoutPropsResponseLayoutProps<TValue, TView extends DateOrTimeViewWithMeridiem> extends UsePickerValueLayoutResponse<TValue>, UsePickerViewsLayoutResponse<TView>, UsePickerLayoutProps {
     isLandscape: boolean;
     isRtl: boolean;
-    wrapperVariant: WrapperVariant;
+    wrapperVariant: PickerVariant;
     isValid: (value: TValue) => boolean;
 }
 export interface UsePickerLayoutPropsResponse<TValue, TView extends DateOrTimeViewWithMeridiem> {
@@ -25,9 +23,10 @@ export interface UsePickerLayoutPropsParams<TValue, TView extends DateOrTimeView
     props: UsePickerLayoutProps;
     propsFromPickerValue: UsePickerValueLayoutResponse<TValue>;
     propsFromPickerViews: UsePickerViewsLayoutResponse<TView>;
-    wrapperVariant: WrapperVariant;
+    variant: PickerVariant;
 }
 /**
  * Prepare the props for the view layout (managed by `PickersLayout`)
  */
-export declare const usePickerLayoutProps: <TValue, TView extends DateOrTimeViewWithMeridiem>({ props, propsFromPickerValue, propsFromPickerViews, wrapperVariant, }: UsePickerLayoutPropsParams<TValue, TView>) => UsePickerLayoutPropsResponse<TValue, TView>;
+export declare const usePickerLayoutProps: <TValue, TView extends DateOrTimeViewWithMeridiem>({ props, propsFromPickerValue, propsFromPickerViews, variant, }: UsePickerLayoutPropsParams<TValue, TView>) => UsePickerLayoutPropsResponse<TValue, TView>;
+export {};

package/internals/hooks/usePicker/usePickerLayoutProps.js

@@ -4,7 +4,6 @@ import { useIsLandscape } from "../useIsLandscape.js";
 
 /**
  * Props used to create the layout of the views.
- * Those props are exposed on all the pickers.
  */
 
 /**
@@ -14,7 +13,7 @@ export const usePickerLayoutProps = ({
   props,
   propsFromPickerValue,
   propsFromPickerViews,
-  wrapperVariant
+  variant
 }) => {
   const {
     orientation
@@ -24,9 +23,7 @@ export const usePickerLayoutProps = ({
   const layoutProps = _extends({}, propsFromPickerViews, propsFromPickerValue, {
     isLandscape,
     isRtl,
-    wrapperVariant,
-    disabled: props.disabled,
-    readOnly: props.readOnly
+    wrapperVariant: variant
   });
   return {
     layoutProps

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

@@ -1,10 +1,26 @@
-import { FieldSection, PickerOwnerState } from '../../../models';
-import { UsePickerValueResponse } from './usePickerValue.types';
+import { FieldSection } from '../../../models';
+import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types';
 import { PickerProviderProps } from '../../components/PickerProvider';
+import type { UsePickerProps } from './usePicker.types';
+import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerVariant } from '../../models';
+export declare const usePickerOrientation: (views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined) => PickerOrientation;
+export declare function usePickerProvider<TValue>(parameters: UsePickerProviderParameters<TValue>): UsePickerProviderReturnValue;
 export interface UsePickerProviderParameters<TValue> extends Pick<PickerProviderProps, 'localeText'> {
+    props: UsePickerProps<TValue, any, any, any, any>;
     pickerValueResponse: UsePickerValueResponse<TValue, FieldSection, any>;
-    ownerState: PickerOwnerState;
+    valueManager: PickerValueManager<TValue, any>;
+    variant: PickerVariant;
+    views: readonly DateOrTimeViewWithMeridiem[];
 }
 export interface UsePickerProviderReturnValue extends Omit<PickerProviderProps, 'children'> {
 }
-export declare function usePickerProvider<TValue>(parameters: UsePickerProviderParameters<TValue>): UsePickerProviderReturnValue;
+/**
+ * Props used to create the private context.
+ * Those props are exposed on all the pickers.
+ */
+export interface UsePickerProviderProps extends FormProps {
+    /**
+     * Force rendering in particular orientation.
+     */
+    orientation?: PickerOrientation;
+}