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

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

@@ -1,225 +0,0 @@
-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
-    } = 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 (changeImportance === 'accept') {
-      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
-  };
-};

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

@@ -1,172 +0,0 @@
-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 { useViews } from "../useViews.js";
-import { isTimeView } from "../../utils/time-utils.js";
-
-/**
- * Props used to handle the views that are common to all pickers.
- */
-
-/**
- * Props used to handle the value of the pickers.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Manage the views of all the pickers:
- * - Handles the view switch
- * - Handles the switch between UI views and field views
- * - Handles the focus management when switching views
- */
-export const usePickerViews = ({
-  props,
-  propsFromPickerValue,
-  autoFocusView,
-  rendererInterceptor: RendererInterceptor,
-  fieldRef
-}) => {
-  const {
-    onChange,
-    value,
-    open,
-    setOpen
-  } = propsFromPickerValue;
-  const {
-    view: inView,
-    views,
-    openTo,
-    onViewChange,
-    viewRenderers,
-    timezone
-  } = props;
-  const propsToForwardToView = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    view,
-    setView,
-    defaultView,
-    focusedView,
-    setFocusedView,
-    setValueAndGoToNextView
-  } = useViews({
-    view: inView,
-    views,
-    openTo,
-    onChange,
-    onViewChange,
-    autoFocus: autoFocusView
-  });
-  const {
-    hasUIView,
-    viewModeLookup
-  } = React.useMemo(() => views.reduce((acc, viewForReduce) => {
-    let viewMode;
-    if (viewRenderers[viewForReduce] != null) {
-      viewMode = 'UI';
-    } else {
-      viewMode = 'field';
-    }
-    acc.viewModeLookup[viewForReduce] = viewMode;
-    if (viewMode === 'UI') {
-      acc.hasUIView = true;
-    }
-    return acc;
-  }, {
-    hasUIView: false,
-    viewModeLookup: {}
-  }), [viewRenderers, views]);
-  const timeViewsCount = React.useMemo(() => views.reduce((acc, viewForReduce) => {
-    if (viewRenderers[viewForReduce] != null && isTimeView(viewForReduce)) {
-      return acc + 1;
-    }
-    return acc;
-  }, 0), [viewRenderers, views]);
-  const currentViewMode = viewModeLookup[view];
-  const shouldRestoreFocus = useEventCallback(() => currentViewMode === 'UI');
-  const [popperView, setPopperView] = React.useState(currentViewMode === 'UI' ? view : null);
-  if (popperView !== view && viewModeLookup[view] === 'UI') {
-    setPopperView(view);
-  }
-  useEnhancedEffect(() => {
-    // Handle case of `DateTimePicker` without time renderers
-    if (currentViewMode === 'field' && 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 (!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);
-  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const actionsContextValue = React.useMemo(() => ({
-    setView
-  }), [setView]);
-  const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
-    views,
-    view: popperView
-  }), [actionsContextValue, views, popperView]);
-  const providerParams = {
-    hasUIView,
-    views,
-    contextValue,
-    actionsContextValue
-  };
-  return {
-    shouldRestoreFocus,
-    provider: providerParams,
-    renderCurrentView: () => {
-      if (popperView == null) {
-        return null;
-      }
-      const renderer = viewRenderers[popperView];
-      if (renderer == null) {
-        return null;
-      }
-      const rendererProps = _extends({}, propsToForwardToView, {
-        views,
-        timezone,
-        value,
-        onChange: setValueAndGoToNextView,
-        view: popperView,
-        onViewChange: setView,
-        focusedView,
-        onFocusedViewChange: setFocusedView,
-        showViewSwitcher: timeViewsCount > 1,
-        timeViewsCount
-      });
-      if (RendererInterceptor) {
-        return /*#__PURE__*/_jsx(RendererInterceptor, {
-          viewRenderers: viewRenderers,
-          popperView: popperView,
-          rendererProps: rendererProps
-        });
-      }
-      return renderer(rendererProps);
-    }
-  };
-};

package/modern/internals/hooks/useValueWithTimezone.js

@@ -1,80 +0,0 @@
-import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useControlled from '@mui/utils/useControlled';
-import { useUtils } from "./useUtils.js";
-/**
- * Hooks making sure that:
- * - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined
- * - The value rendered is always the one from `props.timezone` if defined
- */
-export const useValueWithTimezone = ({
-  timezone: timezoneProp,
-  value: valueProp,
-  defaultValue,
-  referenceDate,
-  onChange,
-  valueManager
-}) => {
-  const utils = useUtils();
-  const firstDefaultValue = React.useRef(defaultValue);
-  const inputValue = valueProp ?? firstDefaultValue.current ?? valueManager.emptyValue;
-  const inputTimezone = React.useMemo(() => valueManager.getTimezone(utils, inputValue), [utils, valueManager, inputValue]);
-  const setInputTimezone = useEventCallback(newValue => {
-    if (inputTimezone == null) {
-      return newValue;
-    }
-    return valueManager.setTimezone(utils, inputTimezone, newValue);
-  });
-  let timezoneToRender;
-  if (timezoneProp) {
-    timezoneToRender = timezoneProp;
-  } else if (inputTimezone) {
-    timezoneToRender = inputTimezone;
-  } else if (referenceDate) {
-    timezoneToRender = utils.getTimezone(referenceDate);
-  } else {
-    timezoneToRender = 'default';
-  }
-  const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, inputValue), [valueManager, utils, timezoneToRender, inputValue]);
-  const handleValueChange = useEventCallback((newValue, ...otherParams) => {
-    const newValueWithInputTimezone = setInputTimezone(newValue);
-    onChange?.(newValueWithInputTimezone, ...otherParams);
-  });
-  return {
-    value: valueWithTimezoneToRender,
-    handleValueChange,
-    timezone: timezoneToRender
-  };
-};
-
-/**
- * Wrapper around `useControlled` and `useValueWithTimezone`
- */
-export const useControlledValueWithTimezone = ({
-  name,
-  timezone: timezoneProp,
-  value: valueProp,
-  defaultValue,
-  referenceDate,
-  onChange: onChangeProp,
-  valueManager
-}) => {
-  const [valueWithInputTimezone, setValue] = useControlled({
-    name,
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue ?? valueManager.emptyValue
-  });
-  const onChange = useEventCallback((newValue, ...otherParams) => {
-    setValue(newValue);
-    onChangeProp?.(newValue, ...otherParams);
-  });
-  return useValueWithTimezone({
-    timezone: timezoneProp,
-    value: valueWithInputTimezone,
-    defaultValue: undefined,
-    referenceDate,
-    onChange,
-    valueManager
-  });
-};