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

package/internals/hooks/usePicker/usePicker.js

@@ -1,14 +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 { usePickerProvider } from "./usePickerProvider.js";
 export const usePicker = ({
+  ref,
   props,
   valueManager,
   valueType,
   variant,
-  additionalViewProps,
   validator,
   autoFocusView,
   rendererInterceptor,
@@ -24,42 +23,27 @@ export const usePicker = ({
     props,
     valueManager,
     valueType,
-    variant,
     validator
   });
   const pickerViewsResponse = usePickerViews({
     props,
-    additionalViewProps,
     autoFocusView,
     fieldRef,
     propsFromPickerValue: pickerValueResponse.viewProps,
     rendererInterceptor
   });
-  const pickerLayoutResponse = usePickerLayoutProps({
-    props,
-    variant,
-    propsFromPickerValue: pickerValueResponse.layoutProps,
-    propsFromPickerViews: pickerViewsResponse.layoutProps
-  });
   const providerProps = usePickerProvider({
+    ref,
     props,
-    pickerValueResponse,
     localeText,
     valueManager,
     variant,
-    views: pickerViewsResponse.views
+    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

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 { UsePickerLayoutPropsResponse } from './usePickerLayoutProps';
-import { FieldSection, PickerOwnerState } from '../../../models';
-import { DateOrTimeViewWithMeridiem } from '../../models';
+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>, UsePickerProviderProps {
+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>, 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, 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'> {
+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' | 'views'>, 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,21 +1,24 @@
-import { FieldSection } from '../../../models';
-import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types';
+import * as React from 'react';
+import { PickerValueManager, UsePickerValueProviderParams } from './usePickerValue.types';
 import { PickerProviderProps } from '../../components/PickerProvider';
 import type { UsePickerProps } from './usePicker.types';
-import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerVariant } from '../../models';
+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>(parameters: UsePickerProviderParameters<TValue>): UsePickerProviderReturnValue;
-export interface UsePickerProviderParameters<TValue> extends Pick<PickerProviderProps, 'localeText'> {
-    props: UsePickerProps<TValue, any, any, any, any>;
-    pickerValueResponse: UsePickerValueResponse<TValue, FieldSection, any>;
+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;
-    views: readonly DateOrTimeViewWithMeridiem[];
+    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 private context.
+ * Props used to create the picker's contexts.
  * Those props are exposed on all the pickers.
  */
 export interface UsePickerProviderProps extends FormProps {
@@ -23,4 +26,36 @@ 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;
 }

package/internals/hooks/usePicker/usePickerProvider.js

@@ -1,7 +1,9 @@
+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';
@@ -35,43 +37,75 @@ export const usePickerOrientation = (views, customOrientation) => {
 };
 export function usePickerProvider(parameters) {
   const {
+    ref,
     props,
-    pickerValueResponse,
     valueManager,
     localeText,
     variant,
-    views
+    paramsFromUsePickerValue,
+    paramsFromUsePickerViews
   } = parameters;
   const utils = useUtils();
-  const orientation = usePickerOrientation(views, props.orientation);
+  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, pickerValueResponse.viewProps.value, valueManager.emptyValue),
-    isPickerOpen: pickerValueResponse.open,
+    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, pickerValueResponse.viewProps.value, pickerValueResponse.open, orientation, variant, props.disabled, props.readOnly]);
-  const contextValue = React.useMemo(() => ({
-    onOpen: pickerValueResponse.actions.onOpen,
-    onClose: pickerValueResponse.actions.onClose,
-    open: pickerValueResponse.open,
+  }), [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
-  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open, variant, orientation, props.disabled, props.readOnly]);
-  const privateContextValue = React.useMemo(() => ({
+    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 private context.
+ * 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, variant, 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>>;

package/internals/hooks/usePicker/usePickerValue.js

@@ -5,107 +5,6 @@ import { useOpenState } from "../useOpenState.js";
 import { useLocalizationContext, useUtils } from "../useUtils.js";
 import { useValidation } from "../../../validation/index.js";
 import { useValueWithTimezone } from "../useValueWithTimezone.js";
-
-/**
- * Decide if the new value should be published
- * The published value will be passed to `onChange` if defined.
- */
-const shouldPublishValue = params => {
-  const {
-    action,
-    hasChanged,
-    dateState,
-    isControlled
-  } = params;
-  const isCurrentValueTheDefaultValue = !isControlled && !dateState.hasBeenModifiedSinceMount;
-
-  // The field is responsible for only calling `onChange` when needed.
-  if (action.name === 'setValueFromField') {
-    return true;
-  }
-  if (action.name === 'setValueFromAction') {
-    // If the component is not controlled, and the value has not been modified since the mount,
-    // Then we want to publish the default value whenever the user pressed the "Accept", "Today" or "Clear" button.
-    if (isCurrentValueTheDefaultValue && ['accept', 'today', 'clear'].includes(action.pickerAction)) {
-      return true;
-    }
-    return hasChanged(dateState.lastPublishedValue);
-  }
-  if (action.name === 'setValueFromView' && action.selectionState !== 'shallow') {
-    // On the first view,
-    // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onChange`
-    if (isCurrentValueTheDefaultValue) {
-      return true;
-    }
-    return hasChanged(dateState.lastPublishedValue);
-  }
-  if (action.name === 'setValueFromShortcut') {
-    // On the first view,
-    // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onChange`
-    if (isCurrentValueTheDefaultValue) {
-      return true;
-    }
-    return hasChanged(dateState.lastPublishedValue);
-  }
-  return false;
-};
-
-/**
- * Decide if the new value should be committed.
- * The committed value will be passed to `onAccept` if defined.
- * It will also be used as a reset target when calling the `cancel` picker action (when clicking on the "Cancel" button).
- */
-const shouldCommitValue = params => {
-  const {
-    action,
-    hasChanged,
-    dateState,
-    isControlled,
-    closeOnSelect
-  } = params;
-  const isCurrentValueTheDefaultValue = !isControlled && !dateState.hasBeenModifiedSinceMount;
-  if (action.name === 'setValueFromAction') {
-    // If the component is not controlled, and the value has not been modified since the mount,
-    // Then we want to commit the default value whenever the user pressed the "Accept", "Today" or "Clear" button.
-    if (isCurrentValueTheDefaultValue && ['accept', 'today', 'clear'].includes(action.pickerAction)) {
-      return true;
-    }
-    return hasChanged(dateState.lastCommittedValue);
-  }
-  if (action.name === 'setValueFromView' && action.selectionState === 'finish' && closeOnSelect) {
-    // On picker where the 1st view is also the last view,
-    // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onAccept`
-    if (isCurrentValueTheDefaultValue) {
-      return true;
-    }
-    return hasChanged(dateState.lastCommittedValue);
-  }
-  if (action.name === 'setValueFromShortcut') {
-    return action.changeImportance === 'accept' && hasChanged(dateState.lastCommittedValue);
-  }
-  return false;
-};
-
-/**
- * Decide if the picker should be closed after the value is updated.
- */
-const shouldClosePicker = params => {
-  const {
-    action,
-    closeOnSelect
-  } = params;
-  if (action.name === 'setValueFromAction') {
-    return true;
-  }
-  if (action.name === 'setValueFromView') {
-    return action.selectionState === 'finish' && closeOnSelect;
-  }
-  if (action.name === 'setValueFromShortcut') {
-    return action.changeImportance === 'accept';
-  }
-  return false;
-};
-
 /**
  * Manage the value lifecycle of all the pickers.
  */
@@ -113,7 +12,6 @@ export const usePickerValue = ({
   props,
   valueManager,
   valueType,
-  variant,
   validator
 }) => {
   const {
@@ -121,7 +19,7 @@ export const usePickerValue = ({
     onChange,
     value: inValueWithoutRenderTimezone,
     defaultValue: inDefaultValue,
-    closeOnSelect = variant === 'desktop',
+    closeOnSelect = false,
     timezone: timezoneProp,
     referenceDate
   } = props;
@@ -151,8 +49,8 @@ export const usePickerValue = ({
   const utils = useUtils();
   const adapter = useLocalizationContext();
   const {
-    isOpen,
-    setIsOpen
+    open,
+    setOpen
   } = useOpenState(props);
   const {
     timezone,
@@ -201,44 +99,51 @@ export const usePickerValue = ({
     value: dateState.draft,
     onError: props.onError
   });
-  const updateDate = useEventCallback(action => {
-    const updaterParams = {
-      action,
-      dateState,
-      hasChanged: comparison => !valueManager.areValuesEqual(utils, action.value, comparison),
-      isControlled,
-      closeOnSelect
-    };
-    const shouldPublish = shouldPublishValue(updaterParams);
-    const shouldCommit = shouldCommitValue(updaterParams);
-    const shouldClose = shouldClosePicker(updaterParams);
+  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: action.value,
-      lastPublishedValue: shouldPublish ? action.value : prev.lastPublishedValue,
-      lastCommittedValue: shouldCommit ? action.value : prev.lastCommittedValue,
+      draft: newValue,
+      lastPublishedValue: shouldPublish ? newValue : prev.lastPublishedValue,
+      lastCommittedValue: shouldCommit ? newValue : prev.lastCommittedValue,
       hasBeenModifiedSinceMount: true
     }));
     let cachedContext = null;
     const getContext = () => {
       if (!cachedContext) {
-        const validationError = action.name === 'setValueFromField' ? action.context.validationError : getValidationErrorForNewValue(action.value);
         cachedContext = {
-          validationError
+          validationError: validationError == null ? getValidationErrorForNewValue(newValue) : validationError
         };
-        if (action.name === 'setValueFromShortcut') {
-          cachedContext.shortcut = action.shortcut;
+        if (shortcut) {
+          cachedContext.shortcut = shortcut;
         }
       }
       return cachedContext;
     };
     if (shouldPublish) {
-      handleValueChange(action.value, getContext());
+      handleValueChange(newValue, getContext());
     }
     if (shouldCommit && onAccept) {
-      onAccept(action.value, getContext());
+      onAccept(newValue, getContext());
     }
     if (shouldClose) {
-      setIsOpen(false);
+      setOpen(false);
     }
   });
   if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
@@ -252,85 +157,6 @@ export const usePickerValue = ({
       hasBeenModifiedSinceMount: true
     }));
   }
-  const handleClear = useEventCallback(() => {
-    updateDate({
-      value: valueManager.emptyValue,
-      name: 'setValueFromAction',
-      pickerAction: 'clear'
-    });
-  });
-  const handleAccept = useEventCallback(() => {
-    updateDate({
-      value: dateState.lastPublishedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'accept'
-    });
-  });
-  const handleDismiss = useEventCallback(() => {
-    updateDate({
-      value: dateState.lastPublishedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'dismiss'
-    });
-  });
-  const handleCancel = useEventCallback(() => {
-    updateDate({
-      value: dateState.lastCommittedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'cancel'
-    });
-  });
-  const handleSetToday = useEventCallback(() => {
-    updateDate({
-      value: valueManager.getTodayValue(utils, timezone, valueType),
-      name: 'setValueFromAction',
-      pickerAction: 'today'
-    });
-  });
-  const handleOpen = useEventCallback(event => {
-    event.preventDefault();
-    setIsOpen(true);
-  });
-  const handleClose = useEventCallback(event => {
-    event?.preventDefault();
-    setIsOpen(false);
-  });
-  const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
-    name: 'setValueFromView',
-    value: newValue,
-    selectionState
-  }));
-  const handleSelectShortcut = useEventCallback((newValue, changeImportance, shortcut) => updateDate({
-    name: 'setValueFromShortcut',
-    value: newValue,
-    changeImportance,
-    shortcut
-  }));
-  const handleChangeFromField = useEventCallback((newValue, context) => updateDate({
-    name: 'setValueFromField',
-    value: newValue,
-    context
-  }));
-  const actions = {
-    onClear: handleClear,
-    onAccept: handleAccept,
-    onDismiss: handleDismiss,
-    onCancel: handleCancel,
-    onSetToday: handleSetToday,
-    onOpen: handleOpen,
-    onClose: handleClose
-  };
-  const fieldResponse = {
-    value: dateState.draft,
-    onChange: handleChangeFromField
-  };
-  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
-  const viewResponse = {
-    value: viewValue,
-    onChange: handleChange,
-    onClose: handleClose,
-    open: isOpen
-  };
   const isValid = testedValue => {
     const error = validator({
       adapter,
@@ -340,17 +166,61 @@ export const usePickerValue = ({
     });
     return !valueManager.hasError(error);
   };
-  const layoutResponse = _extends({}, actions, {
-    value: viewValue,
-    onChange: handleChange,
-    onSelectShortcut: handleSelectShortcut,
-    isValid
+  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 {
-    open: isOpen,
-    fieldProps: fieldResponse,
     viewProps: viewResponse,
-    layoutProps: layoutResponse,
-    actions
+    provider: providerParams
   };
 };