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

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

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

package/esm/internals/hooks/usePicker/index.js

@@ -0,0 +1 @@
+export { usePicker } from "./usePicker.js";

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

@@ -0,0 +1,14 @@
+import { UsePickerParams, UsePickerProps, UsePickerReturnValue } from "./usePicker.types.js";
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from "../../models/index.js";
+export declare const usePicker: <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>>({
+  ref,
+  props,
+  valueManager,
+  valueType,
+  variant,
+  validator,
+  autoFocusView,
+  viewContainerRole,
+  rendererInterceptor,
+  localeText
+}: UsePickerParams<TValue, TView, TExternalProps>) => UsePickerReturnValue<TValue>;

package/esm/internals/hooks/usePicker/usePicker.js

@@ -0,0 +1,52 @@
+import { warnOnce } from '@mui/x-internals/warning';
+import { usePickerValue } from "./usePickerValue.js";
+import { usePickerViews } from "./usePickerViews.js";
+import { usePickerProvider } from "./usePickerProvider.js";
+export const usePicker = ({
+  ref,
+  props,
+  valueManager,
+  valueType,
+  variant,
+  validator,
+  autoFocusView,
+  viewContainerRole,
+  rendererInterceptor,
+  localeText
+}) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (props.renderInput != null) {
+      warnOnce(['MUI X: The `renderInput` prop has been removed in version 6.0 of the Date and Time Pickers.', 'You can replace it with the `textField` component slot in most cases.', 'For more information, please have a look at the migration guide (https://mui.com/x/migration/migration-pickers-v5/#input-renderer-required-in-v5).']);
+    }
+  }
+  const pickerValueResponse = usePickerValue({
+    props,
+    valueManager,
+    valueType,
+    validator
+  });
+  const pickerViewsResponse = usePickerViews({
+    props,
+    autoFocusView,
+    viewContainerRole,
+    propsFromPickerValue: pickerValueResponse.viewProps,
+    rendererInterceptor
+  });
+  const providerProps = usePickerProvider({
+    ref,
+    props,
+    localeText,
+    valueManager,
+    variant,
+    paramsFromUsePickerValue: pickerValueResponse.provider,
+    paramsFromUsePickerViews: pickerViewsResponse.provider
+  });
+  return {
+    // Picker views
+    renderCurrentView: pickerViewsResponse.renderCurrentView,
+    // Picker provider
+    providerProps,
+    // Picker owner state
+    ownerState: providerProps.privateContextValue.ownerState
+  };
+};

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

@@ -0,0 +1,18 @@
+import { UsePickerValueParams, UsePickerValueProps, UsePickerValueBaseProps } from "./usePickerValue.types.js";
+import { UsePickerViewsProps, UsePickerViewParams, UsePickerViewsBaseProps } from "./usePickerViews.js";
+import { InferError, PickerOwnerState } from "../../../models/index.js";
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from "../../models/index.js";
+import { UsePickerProviderParameters, UsePickerProviderProps, UsePickerProviderReturnValue } from "./usePickerProvider.js";
+/**
+ * Props common to all picker headless implementations.
+ */
+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 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 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' | 'viewContainerRole' | 'rendererInterceptor'>, Pick<UsePickerProviderParameters<TValue, TView, InferError<TExternalProps>>, 'localeText' | 'variant' | 'ref'> {
+  props: TExternalProps;
+}
+export interface UsePickerReturnValue<TValue extends PickerValidValue> {
+  ownerState: PickerOwnerState;
+  renderCurrentView: () => React.ReactNode;
+  providerProps: UsePickerProviderReturnValue<TValue>;
+}

package/esm/internals/hooks/usePicker/usePicker.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { PickerValueManager, UsePickerValueProviderParams } from "./usePickerValue.types.js";
+import { PickerProviderProps } from "../../components/PickerProvider.js";
+import type { UsePickerProps } from './usePicker.types';
+import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerVariant } from "../../models/index.js";
+import { UsePickerViewsProviderParams } from "./usePickerViews.js";
+import type { UseFieldInternalProps } from '../useField';
+import { ExportedBaseToolbarProps } from "../../models/props/toolbar.js";
+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 & {
+    slotProps?: {
+      toolbar?: ExportedBaseToolbarProps;
+    };
+  };
+  valueManager: PickerValueManager<TValue, any>;
+  variant: PickerVariant;
+  paramsFromUsePickerValue: UsePickerValueProviderParams<TValue, TError>;
+  paramsFromUsePickerViews: UsePickerViewsProviderParams<TView>;
+}
+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 Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
+  /**
+   * 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;
+}

package/esm/internals/hooks/usePicker/usePickerProvider.js

@@ -0,0 +1,125 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useForkRef from '@mui/utils/useForkRef';
+import useId from '@mui/utils/useId';
+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 {
+    ref,
+    props,
+    valueManager,
+    localeText,
+    variant,
+    paramsFromUsePickerValue,
+    paramsFromUsePickerViews
+  } = parameters;
+  const utils = useUtils();
+  const orientation = usePickerOrientation(paramsFromUsePickerViews.views, props.orientation);
+  const reduceAnimations = useReduceAnimations(props.reduceAnimations);
+  const triggerRef = React.useRef(null);
+  const popupRef = React.useRef(null);
+  const rootRefObject = React.useRef(null);
+  const rootRef = useForkRef(ref, rootRefObject);
+
+  /**
+   * TODO: Improve how we generate the aria-label and aria-labelledby attributes.
+   */
+  const labelId = useId();
+  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,
+    autoFocus: props.autoFocus ?? false,
+    variant,
+    orientation,
+    popupRef,
+    reduceAnimations,
+    triggerRef,
+    triggerStatus,
+    fieldFormat: props.format ?? '',
+    name: props.name,
+    label: props.label,
+    rootSx: props.sx,
+    rootRef,
+    rootClassName: props.className
+  }), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, rootRef, variant, orientation, reduceAnimations, props.disabled, props.readOnly, props.autoFocus, props.format, props.className, props.name, props.label, props.sx, triggerRef, triggerStatus]);
+  const privateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.privateContextValue, paramsFromUsePickerViews.privateContextValue, {
+    ownerState,
+    rootRefObject,
+    labelId
+  }), [paramsFromUsePickerValue.privateContextValue, paramsFromUsePickerViews.privateContextValue, ownerState, labelId]);
+  const actionsContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue), [paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue]);
+  const fieldPrivateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerViews.fieldPrivateContextValue, {
+    formatDensity: props.formatDensity,
+    enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
+    selectedSections: props.selectedSections,
+    onSelectedSectionsChange: props.onSelectedSectionsChange
+  }), [paramsFromUsePickerViews.fieldPrivateContextValue, props.formatDensity, props.enableAccessibleFieldDOMStructure, props.selectedSections, props.onSelectedSectionsChange]);
+  return {
+    localeText,
+    contextValue,
+    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/esm/internals/hooks/usePicker/usePickerValue.d.ts

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

package/esm/internals/hooks/usePicker/usePickerValue.js

@@ -0,0 +1,226 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useOpenState } from "../useOpenState.js";
+import { useLocalizationContext, useUtils } from "../useUtils.js";
+import { useValidation } from "../../../validation/index.js";
+import { useValueWithTimezone } from "../useValueWithTimezone.js";
+/**
+ * Manage the value lifecycle of all the pickers.
+ */
+export const usePickerValue = ({
+  props,
+  valueManager,
+  valueType,
+  validator
+}) => {
+  const {
+    onAccept,
+    onChange,
+    value: inValueWithoutRenderTimezone,
+    defaultValue: inDefaultValue,
+    closeOnSelect = false,
+    timezone: timezoneProp,
+    referenceDate
+  } = props;
+  const {
+    current: defaultValue
+  } = React.useRef(inDefaultValue);
+  const {
+    current: isControlled
+  } = React.useRef(inValueWithoutRenderTimezone !== undefined);
+  const [previousTimezoneProp, setPreviousTimezoneProp] = React.useState(timezoneProp);
+
+  /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+  if (process.env.NODE_ENV !== 'production') {
+    React.useEffect(() => {
+      if (isControlled !== (inValueWithoutRenderTimezone !== undefined)) {
+        console.error([`MUI X: A component is changing the ${isControlled ? '' : 'un'}controlled value of a picker to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled value` + 'for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+      }
+    }, [inValueWithoutRenderTimezone]);
+    React.useEffect(() => {
+      if (!isControlled && defaultValue !== inDefaultValue) {
+        console.error([`MUI X: A component is changing the defaultValue of an uncontrolled picker after being initialized. ` + `To suppress this warning opt to use a controlled value.`].join('\n'));
+      }
+    }, [JSON.stringify(defaultValue)]);
+  }
+  /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+
+  const utils = useUtils();
+  const adapter = useLocalizationContext();
+  const {
+    open,
+    setOpen
+  } = useOpenState(props);
+  const {
+    timezone,
+    value: inValueWithTimezoneToRender,
+    handleValueChange
+  } = useValueWithTimezone({
+    timezone: timezoneProp,
+    value: inValueWithoutRenderTimezone,
+    defaultValue,
+    referenceDate,
+    onChange,
+    valueManager
+  });
+  const [dateState, setDateState] = React.useState(() => {
+    let initialValue;
+    if (inValueWithTimezoneToRender !== undefined) {
+      initialValue = inValueWithTimezoneToRender;
+    } else if (defaultValue !== undefined) {
+      initialValue = defaultValue;
+    } else {
+      initialValue = valueManager.emptyValue;
+    }
+    return {
+      draft: initialValue,
+      lastPublishedValue: initialValue,
+      lastCommittedValue: initialValue,
+      lastControlledValue: inValueWithoutRenderTimezone,
+      hasBeenModifiedSinceMount: false
+    };
+  });
+  const timezoneFromDraftValue = valueManager.getTimezone(utils, dateState.draft);
+  if (previousTimezoneProp !== timezoneProp) {
+    setPreviousTimezoneProp(timezoneProp);
+    if (timezoneProp && timezoneFromDraftValue && timezoneProp !== timezoneFromDraftValue) {
+      setDateState(prev => _extends({}, prev, {
+        draft: valueManager.setTimezone(utils, timezoneProp, prev.draft)
+      }));
+    }
+  }
+  const {
+    getValidationErrorForNewValue
+  } = useValidation({
+    props,
+    validator,
+    timezone,
+    value: dateState.draft,
+    onError: props.onError
+  });
+  const setValue = useEventCallback((newValue, options) => {
+    const {
+      changeImportance = 'accept',
+      skipPublicationIfPristine = false,
+      validationError,
+      shortcut,
+      shouldClose = changeImportance === 'accept'
+    } = options ?? {};
+    let shouldPublish;
+    let shouldCommit;
+    if (!skipPublicationIfPristine && !isControlled && !dateState.hasBeenModifiedSinceMount) {
+      // If the value is not controlled and the value has never been modified before,
+      // Then clicking on any value (including the one equal to `defaultValue`) should call `onChange` and `onAccept`
+      shouldPublish = true;
+      shouldCommit = changeImportance === 'accept';
+    } else {
+      shouldPublish = !valueManager.areValuesEqual(utils, newValue, dateState.lastPublishedValue);
+      shouldCommit = changeImportance === 'accept' && !valueManager.areValuesEqual(utils, newValue, dateState.lastCommittedValue);
+    }
+    setDateState(prev => _extends({}, prev, {
+      draft: newValue,
+      lastPublishedValue: shouldPublish ? newValue : prev.lastPublishedValue,
+      lastCommittedValue: shouldCommit ? newValue : prev.lastCommittedValue,
+      hasBeenModifiedSinceMount: true
+    }));
+    let cachedContext = null;
+    const getContext = () => {
+      if (!cachedContext) {
+        cachedContext = {
+          validationError: validationError == null ? getValidationErrorForNewValue(newValue) : validationError
+        };
+        if (shortcut) {
+          cachedContext.shortcut = shortcut;
+        }
+      }
+      return cachedContext;
+    };
+    if (shouldPublish) {
+      handleValueChange(newValue, getContext());
+    }
+    if (shouldCommit && onAccept) {
+      onAccept(newValue, getContext());
+    }
+    if (shouldClose) {
+      setOpen(false);
+    }
+  });
+  if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
+    const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValueWithTimezoneToRender);
+    setDateState(prev => _extends({}, prev, {
+      lastControlledValue: inValueWithoutRenderTimezone
+    }, isUpdateComingFromPicker ? {} : {
+      lastCommittedValue: inValueWithTimezoneToRender,
+      lastPublishedValue: inValueWithTimezoneToRender,
+      draft: inValueWithTimezoneToRender,
+      hasBeenModifiedSinceMount: true
+    }));
+  }
+  const isValid = testedValue => {
+    const error = validator({
+      adapter,
+      value: testedValue,
+      timezone,
+      props
+    });
+    return !valueManager.hasError(error);
+  };
+  const clearValue = useEventCallback(() => setValue(valueManager.emptyValue));
+  const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(utils, timezone, valueType)));
+  const acceptValueChanges = useEventCallback(() => setValue(dateState.lastPublishedValue));
+  const cancelValueChanges = useEventCallback(() => setValue(dateState.lastCommittedValue, {
+    skipPublicationIfPristine: true
+  }));
+  const dismissViews = useEventCallback(() => {
+    setValue(dateState.lastPublishedValue, {
+      skipPublicationIfPristine: true
+    });
+  });
+  const setValueFromView = useEventCallback((newValue, selectionState = 'partial') => {
+    // TODO: Expose a new method (private?) like `setView` that only updates the draft value.
+    if (selectionState === 'shallow') {
+      setDateState(prev => _extends({}, prev, {
+        draft: newValue,
+        hasBeenModifiedSinceMount: true
+      }));
+    }
+    setValue(newValue, {
+      changeImportance: selectionState === 'finish' && closeOnSelect ? 'accept' : 'set'
+    });
+  });
+  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
+  const viewResponse = {
+    value: valueWithoutError,
+    onChange: setValueFromView,
+    open,
+    setOpen
+  };
+  const actionsContextValue = React.useMemo(() => ({
+    setValue,
+    setOpen,
+    clearValue,
+    setValueToToday,
+    acceptValueChanges,
+    cancelValueChanges
+  }), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges]);
+  const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
+    value: dateState.draft,
+    timezone,
+    open
+  }), [actionsContextValue, timezone, open, dateState.draft]);
+  const privateContextValue = React.useMemo(() => ({
+    dismissViews
+  }), [dismissViews]);
+  const providerParams = {
+    value: dateState.draft,
+    contextValue,
+    actionsContextValue,
+    privateContextValue,
+    isValidContextValue: isValid
+  };
+  return {
+    viewProps: viewResponse,
+    provider: providerParams
+  };
+};