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

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

@@ -1,4 +1,4 @@
 export { usePicker } from './usePicker';
-export type { UsePickerProps, UsePickerBaseProps, UsePickerParams, UsePickerResponse, } from './usePicker.types';
+export type { UsePickerProps, UsePickerBaseProps, UsePickerParams } from './usePicker.types';
 export type { PickerValueManager, PickerSelectionState, UsePickerValueFieldResponse, } from './usePickerValue.types';
 export type { PickerViewsRendererProps } from './usePickerViews';

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

@@ -1,4 +1,3 @@
-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>>;
+import { UsePickerParams, UsePickerProps, UsePickerReturnValue } from './usePicker.types';
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../../models';
+export declare const usePicker: <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>>({ ref, props, valueManager, valueType, variant, validator, autoFocusView, rendererInterceptor, fieldRef, localeText, }: UsePickerParams<TValue, TView, TExternalProps>) => UsePickerReturnValue<TValue>;

package/internals/hooks/usePicker/usePicker.js

@@ -1,15 +1,13 @@
 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 = ({
+  ref,
   props,
   valueManager,
   valueType,
-  wrapperVariant,
-  additionalViewProps,
+  variant,
   validator,
   autoFocusView,
   rendererInterceptor,
@@ -25,47 +23,30 @@ export const usePicker = ({
     props,
     valueManager,
     valueType,
-    wrapperVariant,
     validator
   });
   const pickerViewsResponse = usePickerViews({
     props,
-    additionalViewProps,
     autoFocusView,
     fieldRef,
     propsFromPickerValue: pickerValueResponse.viewProps,
     rendererInterceptor
   });
-  const pickerLayoutResponse = usePickerLayoutProps({
-    props,
-    wrapperVariant,
-    propsFromPickerValue: pickerValueResponse.layoutProps,
-    propsFromPickerViews: pickerViewsResponse.layoutProps
-  });
-  const pickerOwnerState = usePickerOwnerState({
-    props,
-    pickerValueResponse,
-    valueManager
-  });
   const providerProps = usePickerProvider({
-    pickerValueResponse,
-    ownerState: pickerOwnerState,
-    localeText
+    ref,
+    props,
+    localeText,
+    valueManager,
+    variant,
+    paramsFromUsePickerValue: pickerValueResponse.provider,
+    paramsFromUsePickerViews: pickerViewsResponse.provider
   });
   return {
-    // Picker value
-    open: pickerValueResponse.open,
-    actions: pickerValueResponse.actions,
-    fieldProps: pickerValueResponse.fieldProps,
     // Picker views
     renderCurrentView: pickerViewsResponse.renderCurrentView,
-    hasUIView: pickerViewsResponse.hasUIView,
-    shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
-    // Picker layout
-    layoutProps: pickerLayoutResponse.layoutProps,
     // 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 { FieldSection, PickerOwnerState } from '../../../models';
-import { DateOrTimeViewWithMeridiem } from '../../models';
-import { UsePickerProviderParameters, UsePickerProviderReturnValue } from './usePickerProvider';
+import { UsePickerValueParams, UsePickerValueProps, UsePickerValueBaseProps } from './usePickerValue.types';
+import { UsePickerViewsProps, UsePickerViewParams, UsePickerViewsBaseProps } from './usePickerViews';
+import { InferError, PickerOwnerState } from '../../../models';
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../../models';
+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 extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any>> extends UsePickerValueBaseProps<TValue, TError>, UsePickerViewsBaseProps<TValue, TView, TExternalProps>, 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 extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any>> extends UsePickerValueProps<TValue, TError>, UsePickerViewsProps<TValue, TView, TExternalProps>, 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 extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TExternalProps>, 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'>, Pick<UsePickerProviderParameters<TValue, TView, InferError<TExternalProps>>, 'localeText' | 'variant' | 'ref'> {
     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 UsePickerReturnValue<TValue extends PickerValidValue> {
     ownerState: PickerOwnerState;
-    providerProps: UsePickerProviderReturnValue;
+    renderCurrentView: () => React.ReactNode;
+    providerProps: UsePickerProviderReturnValue<TValue>;
 }

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

@@ -1,10 +1,61 @@
-import { FieldSection, PickerOwnerState } from '../../../models';
-import { UsePickerValueResponse } from './usePickerValue.types';
+import * as React from 'react';
+import { PickerValueManager, UsePickerValueProviderParams } from './usePickerValue.types';
 import { PickerProviderProps } from '../../components/PickerProvider';
-export interface UsePickerProviderParameters<TValue> extends Pick<PickerProviderProps, 'localeText'> {
-    pickerValueResponse: UsePickerValueResponse<TValue, FieldSection, any>;
-    ownerState: PickerOwnerState;
+import type { UsePickerProps } from './usePicker.types';
+import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerVariant } from '../../models';
+import { UsePickerViewsProviderParams } from './usePickerViews';
+import { PickerFieldPrivateContextValue } from '../useField/useFieldInternalPropsWithDefaults';
+export declare const usePickerOrientation: (views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined) => PickerOrientation;
+export declare function usePickerProvider<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError>(parameters: UsePickerProviderParameters<TValue, TView, TError>): UsePickerProviderReturnValue<TValue>;
+export interface UsePickerProviderParameters<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Pick<PickerProviderProps<TValue>, 'localeText'> {
+    ref: React.ForwardedRef<HTMLDivElement> | undefined;
+    props: UsePickerProps<TValue, any, any, any> & UsePickerProviderNonStaticProps;
+    valueManager: PickerValueManager<TValue, any>;
+    variant: PickerVariant;
+    paramsFromUsePickerValue: UsePickerValueProviderParams<TValue, TError>;
+    paramsFromUsePickerViews: UsePickerViewsProviderParams<TView>;
 }
-export interface UsePickerProviderReturnValue extends Omit<PickerProviderProps, 'children'> {
+export interface UsePickerProviderReturnValue<TValue extends PickerValidValue> extends Omit<PickerProviderProps<TValue>, 'children'> {
+}
+/**
+ * Props used to create the picker's contexts.
+ * Those props are exposed on all the pickers.
+ */
+export interface UsePickerProviderProps extends FormProps {
+    /**
+     * Force rendering in particular orientation.
+     */
+    orientation?: PickerOrientation;
+    /**
+     * If `true`, disable heavy animations.
+     * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+     */
+    reduceAnimations?: boolean;
+}
+/**
+ * Props used to create the picker's contexts and that are not available on static pickers.
+ */
+export interface UsePickerProviderNonStaticProps extends PickerFieldPrivateContextValue {
+    /**
+     * Format of the date when rendered in the input(s).
+     * Defaults to localized format based on the used `views`.
+     */
+    format?: string;
+    /**
+     * If `true`, the open picker button will not be rendered (renders only the field).
+     * @default false
+     */
+    disableOpenPicker?: boolean;
+    /**
+     * The label content.
+     */
+    label?: React.ReactNode;
+    /**
+     * Pass a ref to the `input` element.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Name attribute used by the `input` element in the Field.
+     */
+    name?: string;
 }
-export declare function usePickerProvider<TValue>(parameters: UsePickerProviderParameters<TValue>): UsePickerProviderReturnValue;

package/internals/hooks/usePicker/usePickerProvider.js

@@ -1,21 +1,111 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useUtils } from "../useUtils.js";
+import { arrayIncludes } from "../../utils/utils.js";
+import { useReduceAnimations } from "../useReduceAnimations.js";
+function getOrientation() {
+  if (typeof window === 'undefined') {
+    return 'portrait';
+  }
+  if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
+    return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
+  }
+
+  // Support IOS safari
+  if (window.orientation) {
+    return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
+  }
+  return 'portrait';
+}
+export const usePickerOrientation = (views, customOrientation) => {
+  const [orientation, setOrientation] = React.useState(getOrientation);
+  useEnhancedEffect(() => {
+    const eventHandler = () => {
+      setOrientation(getOrientation());
+    };
+    window.addEventListener('orientationchange', eventHandler);
+    return () => {
+      window.removeEventListener('orientationchange', eventHandler);
+    };
+  }, []);
+  if (arrayIncludes(views, ['hours', 'minutes', 'seconds'])) {
+    // could not display 13:34:44 in landscape mode
+    return 'portrait';
+  }
+  return customOrientation ?? orientation;
+};
 export function usePickerProvider(parameters) {
   const {
-    pickerValueResponse,
-    ownerState,
-    localeText
+    ref,
+    props,
+    valueManager,
+    localeText,
+    variant,
+    paramsFromUsePickerValue,
+    paramsFromUsePickerViews
   } = parameters;
-  const contextValue = React.useMemo(() => ({
-    onOpen: pickerValueResponse.actions.onOpen,
-    onClose: pickerValueResponse.actions.onClose,
-    open: pickerValueResponse.open
-  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open]);
-  const privateContextValue = React.useMemo(() => ({
+  const utils = useUtils();
+  const orientation = usePickerOrientation(paramsFromUsePickerViews.views, props.orientation);
+  const reduceAnimations = useReduceAnimations(props.reduceAnimations);
+  const triggerRef = React.useRef(null);
+  const ownerState = React.useMemo(() => ({
+    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, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
+  const triggerStatus = React.useMemo(() => {
+    if (props.disableOpenPicker || !paramsFromUsePickerViews.hasUIView) {
+      return 'hidden';
+    }
+    if (props.disabled || props.readOnly) {
+      return 'disabled';
+    }
+    return 'enabled';
+  }, [props.disableOpenPicker, paramsFromUsePickerViews.hasUIView, props.disabled, props.readOnly]);
+  const contextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, {
+    disabled: props.disabled ?? false,
+    readOnly: props.readOnly ?? false,
+    variant,
+    orientation,
+    reduceAnimations,
+    triggerRef,
+    triggerStatus,
+    fieldFormat: props.format ?? '',
+    name: props.name,
+    label: props.label,
+    rootSx: props.sx,
+    rootRef: ref,
+    rootClassName: props.className
+  }), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, ref, variant, orientation, reduceAnimations, props.disabled, props.readOnly, props.format, props.className, props.name, props.label, props.sx, triggerRef, triggerStatus]);
+  const privateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.privateContextValue, paramsFromUsePickerViews.privateContextValue, {
     ownerState
-  }), [ownerState]);
+  }), [paramsFromUsePickerValue.privateContextValue, paramsFromUsePickerViews.privateContextValue, ownerState]);
+  const actionsContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue), [paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue]);
+  const fieldPrivateContextValue = React.useMemo(() => ({
+    formatDensity: props.formatDensity,
+    enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
+    selectedSections: props.selectedSections,
+    onSelectedSectionsChange: props.onSelectedSectionsChange
+  }), [props.formatDensity, props.enableAccessibleFieldDOMStructure, props.selectedSections, props.onSelectedSectionsChange]);
   return {
     localeText,
     contextValue,
-    privateContextValue
+    privateContextValue,
+    actionsContextValue,
+    fieldPrivateContextValue,
+    isValidContextValue: paramsFromUsePickerValue.isValidContextValue
   };
-}
+}
+
+/**
+ * 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.d.ts

@@ -1,6 +1,7 @@
-import { FieldSection, InferError } from '../../../models';
+import { InferError } from '../../../models';
 import { UsePickerValueProps, UsePickerValueParams, UsePickerValueResponse } from './usePickerValue.types';
+import { PickerValidValue } from '../../models';
 /**
  * Manage the value lifecycle of all the pickers.
  */
-export declare const usePickerValue: <TValue, TSection extends FieldSection, TExternalProps extends UsePickerValueProps<TValue, any>>({ props, valueManager, valueType, wrapperVariant, validator, }: UsePickerValueParams<TValue, TExternalProps>) => UsePickerValueResponse<TValue, TSection, InferError<TExternalProps>>;
+export declare const usePickerValue: <TValue extends PickerValidValue, TExternalProps extends UsePickerValueProps<TValue, any>>({ props, valueManager, valueType, validator, }: UsePickerValueParams<TValue, TExternalProps>) => UsePickerValueResponse<TValue, InferError<TExternalProps>>;