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

package/modern/internals/hooks/usePicker/hooks/useValueAndOpenStates.js

@@ -0,0 +1,210 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useValueWithTimezone } from "../../useValueWithTimezone.js";
+import { useUtils } from "../../useUtils.js";
+import { useValidation } from "../../../../validation/index.js";
+export function useValueAndOpenStates(parameters) {
+  const {
+    props,
+    valueManager,
+    validator
+  } = parameters;
+  const {
+    value: valueProp,
+    defaultValue: defaultValueProp,
+    onChange,
+    referenceDate,
+    timezone: timezoneProp,
+    onAccept,
+    closeOnSelect,
+    open: openProp,
+    onOpen,
+    onClose
+  } = props;
+  const {
+    current: defaultValue
+  } = React.useRef(defaultValueProp);
+  const {
+    current: isValueControlled
+  } = React.useRef(valueProp !== undefined);
+  const {
+    current: isOpenControlled
+  } = React.useRef(openProp !== undefined);
+  const [previousTimezoneProp, setPreviousTimezoneProp] = React.useState(timezoneProp);
+  const utils = useUtils();
+  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).']);
+    }
+  }
+
+  /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+  if (process.env.NODE_ENV !== 'production') {
+    React.useEffect(() => {
+      if (isValueControlled !== (valueProp !== undefined)) {
+        console.error([`MUI X: A component is changing the ${isValueControlled ? '' : 'un'}controlled value of a picker to be ${isValueControlled ? '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'));
+      }
+    }, [valueProp]);
+    React.useEffect(() => {
+      if (!isValueControlled && defaultValue !== defaultValueProp) {
+        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 {
+    timezone,
+    value: valuePropWithTimezoneToRender,
+    handleValueChange
+  } = useValueWithTimezone({
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    referenceDate,
+    onChange,
+    valueManager
+  });
+  const [state, setState] = React.useState(() => {
+    let initialValue;
+    if (valuePropWithTimezoneToRender !== undefined) {
+      initialValue = valuePropWithTimezoneToRender;
+    } else if (defaultValue !== undefined) {
+      initialValue = defaultValue;
+    } else {
+      initialValue = valueManager.emptyValue;
+    }
+    return {
+      open: false,
+      draft: initialValue,
+      lastPublishedValue: initialValue,
+      lastCommittedValue: initialValue,
+      lastControlledValue: valueProp,
+      hasBeenModifiedSinceMount: false
+    };
+  });
+  const {
+    getValidationErrorForNewValue
+  } = useValidation({
+    props,
+    validator,
+    timezone,
+    value: state.draft,
+    onError: props.onError
+  });
+  const timezoneFromDraftValue = valueManager.getTimezone(utils, state.draft);
+  if (previousTimezoneProp !== timezoneProp) {
+    setPreviousTimezoneProp(timezoneProp);
+    if (timezoneProp && timezoneFromDraftValue && timezoneProp !== timezoneFromDraftValue) {
+      setState(prev => _extends({}, prev, {
+        draft: valueManager.setTimezone(utils, timezoneProp, prev.draft)
+      }));
+    }
+  }
+  const setOpen = useEventCallback(action => {
+    const newOpen = typeof action === 'function' ? action(state.open) : action;
+    if (!isOpenControlled) {
+      setState(prevState => _extends({}, prevState, {
+        open: newOpen
+      }));
+    }
+    if (newOpen && onOpen) {
+      onOpen();
+    }
+    if (!newOpen && onClose) {
+      onClose();
+    }
+  });
+  const setValue = useEventCallback((newValue, options) => {
+    const {
+      changeImportance = 'accept',
+      skipPublicationIfPristine = false,
+      validationError,
+      shortcut,
+      shouldClose = changeImportance === 'accept'
+    } = options ?? {};
+    let shouldPublish;
+    let shouldCommit;
+    if (!skipPublicationIfPristine && !isValueControlled && !state.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, state.lastPublishedValue);
+      shouldCommit = changeImportance === 'accept' && !valueManager.areValuesEqual(utils, newValue, state.lastCommittedValue);
+    }
+    setState(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 (state.lastControlledValue !== valueProp) {
+    const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, state.draft, valuePropWithTimezoneToRender);
+    setState(prev => _extends({}, prev, {
+      lastControlledValue: valueProp
+    }, isUpdateComingFromPicker ? {} : {
+      lastCommittedValue: valuePropWithTimezoneToRender,
+      lastPublishedValue: valuePropWithTimezoneToRender,
+      draft: valuePropWithTimezoneToRender,
+      hasBeenModifiedSinceMount: true
+    }));
+  }
+  const setValueFromView = useEventCallback((newValue, selectionState = 'partial') => {
+    // TODO: Expose a new method (private?) like `setView` that only updates the draft value.
+    if (selectionState === 'shallow') {
+      setState(prev => _extends({}, prev, {
+        draft: newValue,
+        hasBeenModifiedSinceMount: true
+      }));
+    }
+    setValue(newValue, {
+      changeImportance: selectionState === 'finish' && closeOnSelect ? 'accept' : 'set'
+    });
+  });
+
+  // It is required to update inner state in useEffect in order to avoid situation when
+  // Our component is not mounted yet, but `open` state is set to `true` (for example initially opened)
+  React.useEffect(() => {
+    if (isOpenControlled) {
+      if (openProp === undefined) {
+        throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
+      }
+      setState(prevState => _extends({}, prevState, {
+        open: openProp
+      }));
+    }
+  }, [isOpenControlled, openProp]);
+  return {
+    timezone,
+    state,
+    setValue,
+    setValueFromView,
+    setOpen
+  };
+}

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

@@ -1,4 +1,2 @@
 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';
+export type { UsePickerProps, UsePickerBaseProps, UsePickerParameters, PickerSelectionState, PickerViewsRendererProps, PickerViewRendererLookup, PickerRendererInterceptorProps, PickerViewRenderer, UsePickerNonStaticProps } from './usePicker.types';

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

@@ -1,4 +1,4 @@
-import { UsePickerParams, UsePickerProps, UsePickerReturnValue } from "./usePicker.types.js";
+import { UsePickerParameters, 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,
@@ -8,7 +8,7 @@ export declare const usePicker: <TValue extends PickerValidValue, TView extends
   variant,
   validator,
   autoFocusView,
-  viewContainerRole,
-  rendererInterceptor,
-  localeText
-}: UsePickerParams<TValue, TView, TExternalProps>) => UsePickerReturnValue<TValue>;
+  rendererInterceptor: RendererInterceptor,
+  localeText,
+  viewContainerRole
+}: UsePickerParameters<TValue, TView, TExternalProps>) => UsePickerReturnValue<TValue>;

package/modern/internals/hooks/usePicker/usePicker.js

@@ -1,7 +1,18 @@
-import { warnOnce } from '@mui/x-internals/warning';
-import { usePickerValue } from "./usePickerValue.js";
-import { usePickerViews } from "./usePickerViews.js";
-import { usePickerProvider } from "./usePickerProvider.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "sx"];
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useForkRef from '@mui/utils/useForkRef';
+import useId from '@mui/utils/useId';
+import { useLocalizationContext, useUtils } from "../useUtils.js";
+import { useReduceAnimations } from "../useReduceAnimations.js";
+import { isTimeView } from "../../utils/time-utils.js";
+import { useViews } from "../useViews.js";
+import { useOrientation } from "./hooks/useOrientation.js";
+import { useValueAndOpenStates } from "./hooks/useValueAndOpenStates.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const usePicker = ({
   ref,
   props,
@@ -10,43 +21,274 @@ export const usePicker = ({
   variant,
   validator,
   autoFocusView,
-  viewContainerRole,
-  rendererInterceptor,
-  localeText
+  rendererInterceptor: RendererInterceptor,
+  localeText,
+  viewContainerRole
 }) => {
-  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({
+  const {
+    // View props
+    views,
+    view: viewProp,
+    openTo,
+    onViewChange,
+    viewRenderers,
+    reduceAnimations: reduceAnimationsProp,
+    orientation: orientationProp,
+    disableOpenPicker,
+    // Form props
+    disabled,
+    readOnly,
+    // Field props
+    formatDensity,
+    enableAccessibleFieldDOMStructure,
+    selectedSections,
+    onSelectedSectionsChange,
+    format,
+    label,
+    // Other props
+    autoFocus,
+    name
+  } = props;
+  const {
+      className,
+      sx
+    } = props,
+    propsToForwardToView = _objectWithoutPropertiesLoose(props, _excluded);
+
+  /**
+   * TODO: Improve how we generate the aria-label and aria-labelledby attributes.
+   */
+  const labelId = useId();
+  const utils = useUtils();
+  const adapter = useLocalizationContext();
+  const reduceAnimations = useReduceAnimations(reduceAnimationsProp);
+  const orientation = useOrientation(views, orientationProp);
+  const {
+    current: initialView
+  } = React.useRef(openTo ?? null);
+
+  /**
+   * Refs
+   */
+  const triggerRef = React.useRef(null);
+  const popupRef = React.useRef(null);
+  const fieldRef = React.useRef(null);
+  const rootRefObject = React.useRef(null);
+  const rootRef = useForkRef(ref, rootRefObject);
+  const {
+    timezone,
+    state,
+    setOpen,
+    setValue,
+    setValueFromView
+  } = useValueAndOpenStates({
     props,
     valueManager,
-    valueType,
     validator
   });
-  const pickerViewsResponse = usePickerViews({
-    props,
-    autoFocusView,
-    viewContainerRole,
-    propsFromPickerValue: pickerValueResponse.viewProps,
-    rendererInterceptor
+  const {
+    view,
+    setView,
+    defaultView,
+    focusedView,
+    setFocusedView,
+    setValueAndGoToNextView
+  } = useViews({
+    view: viewProp,
+    views,
+    openTo,
+    onChange: setValueFromView,
+    onViewChange,
+    autoFocus: autoFocusView
   });
-  const providerProps = usePickerProvider({
-    ref,
-    props,
-    localeText,
-    valueManager,
-    variant,
-    paramsFromUsePickerValue: pickerValueResponse.provider,
-    paramsFromUsePickerViews: pickerViewsResponse.provider
+  const clearValue = useEventCallback(() => setValue(valueManager.emptyValue));
+  const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(utils, timezone, valueType)));
+  const acceptValueChanges = useEventCallback(() => setValue(state.lastPublishedValue));
+  const cancelValueChanges = useEventCallback(() => setValue(state.lastCommittedValue, {
+    skipPublicationIfPristine: true
+  }));
+  const dismissViews = useEventCallback(() => {
+    setValue(state.lastPublishedValue, {
+      skipPublicationIfPristine: true
+    });
   });
+  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, state.draft), [utils, valueManager, state.draft]);
+  const {
+    hasUIView,
+    viewModeLookup,
+    timeViewsCount
+  } = React.useMemo(() => views.reduce((acc, viewForReduce) => {
+    const viewMode = viewRenderers[viewForReduce] == null ? 'field' : 'UI';
+    acc.viewModeLookup[viewForReduce] = viewMode;
+    if (viewMode === 'UI') {
+      acc.hasUIView = true;
+      if (isTimeView(viewForReduce)) {
+        acc.timeViewsCount += 1;
+      }
+    }
+    return acc;
+  }, {
+    hasUIView: false,
+    viewModeLookup: {},
+    timeViewsCount: 0
+  }), [viewRenderers, views]);
+  const currentViewMode = viewModeLookup[view];
+  const getCurrentViewMode = useEventCallback(() => currentViewMode);
+  const [popperView, setPopperView] = React.useState(currentViewMode === 'UI' ? view : null);
+  if (popperView !== view && viewModeLookup[view] === 'UI') {
+    setPopperView(view);
+  }
+  useEnhancedEffect(() => {
+    // Handle case of Date Time Picker without time renderers
+    if (currentViewMode === 'field' && state.open) {
+      setOpen(false);
+      setTimeout(() => {
+        fieldRef?.current?.setSelectedSections(view);
+        // focusing the input before the range selection is done
+        // calling it outside of timeout results in an inconsistent behavior between Safari And Chrome
+        fieldRef?.current?.focusField(view);
+      });
+    }
+  }, [view]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEnhancedEffect(() => {
+    if (!state.open) {
+      return;
+    }
+    let newView = view;
+
+    // If the current view is a field view, go to the last popper view
+    if (currentViewMode === 'field' && popperView != null) {
+      newView = popperView;
+    }
+
+    // If the current view is not the default view and both are UI views
+    if (newView !== defaultView && viewModeLookup[newView] === 'UI' && viewModeLookup[defaultView] === 'UI') {
+      newView = defaultView;
+    }
+    if (newView !== view) {
+      setView(newView);
+    }
+    setFocusedView(newView, true);
+  }, [state.open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const ownerState = React.useMemo(() => ({
+    isPickerValueEmpty: valueManager.areValuesEqual(utils, state.draft, valueManager.emptyValue),
+    isPickerOpen: state.open,
+    isPickerDisabled: props.disabled ?? false,
+    isPickerReadOnly: props.readOnly ?? false,
+    pickerOrientation: orientation,
+    pickerVariant: variant
+  }), [utils, valueManager, state.draft, state.open, orientation, variant, props.disabled, props.readOnly]);
+  const triggerStatus = React.useMemo(() => {
+    if (disableOpenPicker || !hasUIView) {
+      return 'hidden';
+    }
+    if (disabled || readOnly) {
+      return 'disabled';
+    }
+    return 'enabled';
+  }, [disableOpenPicker, hasUIView, disabled, readOnly]);
+  const actionsContextValue = React.useMemo(() => ({
+    setValue,
+    setOpen,
+    clearValue,
+    setValueToToday,
+    acceptValueChanges,
+    cancelValueChanges,
+    setView
+  }), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges, setView]);
+  const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
+    value: state.draft,
+    timezone,
+    open: state.open,
+    views,
+    view: popperView,
+    initialView,
+    disabled: disabled ?? false,
+    readOnly: readOnly ?? false,
+    autoFocus: autoFocus ?? false,
+    variant,
+    orientation,
+    popupRef,
+    reduceAnimations,
+    triggerRef,
+    triggerStatus,
+    fieldFormat: format ?? '',
+    name,
+    label,
+    rootSx: sx,
+    rootRef,
+    rootClassName: className
+  }), [actionsContextValue, state.draft, rootRef, variant, orientation, reduceAnimations, disabled, readOnly, format, className, name, label, sx, triggerRef, triggerStatus, timezone, state.open, popperView, views, initialView, autoFocus]);
+  const privateContextValue = React.useMemo(() => ({
+    dismissViews,
+    hasUIView,
+    getCurrentViewMode,
+    ownerState,
+    rootRefObject,
+    labelId,
+    viewContainerRole
+  }), [dismissViews, hasUIView, getCurrentViewMode, ownerState, rootRefObject, labelId, viewContainerRole]);
+  const fieldPrivateContextValue = React.useMemo(() => ({
+    formatDensity,
+    enableAccessibleFieldDOMStructure,
+    selectedSections,
+    onSelectedSectionsChange,
+    fieldRef
+  }), [formatDensity, enableAccessibleFieldDOMStructure, selectedSections, onSelectedSectionsChange, fieldRef]);
+  const isValidContextValue = testedValue => {
+    const error = validator({
+      adapter,
+      value: testedValue,
+      timezone,
+      props
+    });
+    return !valueManager.hasError(error);
+  };
+  const renderCurrentView = () => {
+    if (popperView == null) {
+      return null;
+    }
+    const renderer = viewRenderers[popperView];
+    if (renderer == null) {
+      return null;
+    }
+    const rendererProps = _extends({}, propsToForwardToView, {
+      views,
+      timezone,
+      value: valueWithoutError,
+      onChange: setValueAndGoToNextView,
+      view: popperView,
+      onViewChange: setView,
+      showViewSwitcher: timeViewsCount > 1,
+      timeViewsCount
+    }, viewContainerRole === 'tooltip' ? {
+      focusedView: null,
+      onFocusedViewChange: () => {}
+    } : {
+      focusedView,
+      onFocusedViewChange: setFocusedView
+    });
+    if (RendererInterceptor) {
+      return /*#__PURE__*/_jsx(RendererInterceptor, {
+        viewRenderers: viewRenderers,
+        popperView: popperView,
+        rendererProps: rendererProps
+      });
+    }
+    return renderer(rendererProps);
+  };
   return {
-    // Picker views
-    renderCurrentView: pickerViewsResponse.renderCurrentView,
-    // Picker provider
-    providerProps,
-    // Picker owner state
-    ownerState: providerProps.privateContextValue.ownerState
+    providerProps: {
+      localeText,
+      contextValue,
+      privateContextValue,
+      actionsContextValue,
+      fieldPrivateContextValue,
+      isValidContextValue
+    },
+    renderCurrentView,
+    ownerState
   };
 };