@mui/x-date-pickers 6.1.0 → 6.2.1

package/internals/hooks/usePicker/usePickerValue.js

@@ -5,26 +5,91 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { useOpenState } from '../useOpenState';
 import { useLocalizationContext, useUtils } from '../useUtils';
 import { useValidation } from '../validation/useValidation';
-
-/**
- * Props used to handle the value that are common to all pickers.
- */
-
 /**
- * Props used to handle the value of non-static pickers.
+ * 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;
 
-/**
- * Props used to handle the value of the pickers.
- */
+  // 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);
+  }
+  return false;
+};
 
 /**
- * Props passed to `usePickerViews`.
+ * 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);
+  }
+  return false;
+};
 
 /**
- * Props passed to `usePickerLayoutProps`.
+ * 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;
+  }
+  return false;
+};
 
 /**
  * Manage the value lifecycle of all the pickers.
@@ -32,26 +97,43 @@ import { useValidation } from '../validation/useValidation';
 export const usePickerValue = ({
   props,
   valueManager,
+  valueType,
   wrapperVariant,
   validator
 }) => {
   const {
-    onAccept: onAcceptProp,
+    onAccept,
     onChange,
     value: inValue,
-    defaultValue,
+    defaultValue: inDefaultValue,
     closeOnSelect = wrapperVariant === 'desktop',
     selectedSections: selectedSectionsProp,
     onSelectedSectionsChange
   } = props;
+  const {
+    current: defaultValue
+  } = React.useRef(inDefaultValue);
+  const {
+    current: isControlled
+  } = React.useRef(inValue !== undefined);
+
+  /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+  if (process.env.NODE_ENV !== 'production') {
+    React.useEffect(() => {
+      if (isControlled !== (inValue !== undefined)) {
+        console.error([`MUI: 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'));
+      }
+    }, [inValue]);
+    React.useEffect(() => {
+      if (!isControlled && defaultValue !== inDefaultValue) {
+        console.error([`MUI: 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 [value, setValue] = useControlled({
-    controlled: inValue,
-    default: defaultValue != null ? defaultValue : valueManager.emptyValue,
-    name: 'usePickerValue',
-    state: 'value'
-  });
   const [selectedSections, setSelectedSections] = useControlled({
     controlled: selectedSectionsProp,
     default: null,
@@ -62,170 +144,120 @@ export const usePickerValue = ({
     isOpen,
     setIsOpen
   } = useOpenState(props);
-  const [dateState, setDateState] = React.useState(() => ({
-    committed: value,
-    draft: value,
-    resetFallback: value
-  }));
+  const [dateState, setDateState] = React.useState(() => {
+    let initialValue;
+    if (inValue !== undefined) {
+      initialValue = inValue;
+    } else if (defaultValue !== undefined) {
+      initialValue = defaultValue;
+    } else {
+      initialValue = valueManager.emptyValue;
+    }
+    return {
+      draft: initialValue,
+      lastPublishedValue: initialValue,
+      lastCommittedValue: initialValue,
+      lastControlledValue: inValue,
+      hasBeenModifiedSinceMount: false
+    };
+  });
   useValidation(_extends({}, props, {
-    value
+    value: dateState.draft
   }), validator, valueManager.isSameError, valueManager.defaultErrorState);
-  const setDate = useEventCallback(params => {
-    setDateState(prev => {
-      switch (params.action) {
-        case 'setAll':
-        case 'acceptAndClose':
-          {
-            return {
-              draft: params.value,
-              committed: params.value,
-              resetFallback: params.value
-            };
-          }
-        case 'setCommitted':
-          {
-            return _extends({}, prev, {
-              draft: params.value,
-              committed: params.value
-            });
-          }
-        case 'setDraft':
-          {
-            return _extends({}, prev, {
-              draft: params.value
-            });
-          }
-        default:
-          {
-            return prev;
-          }
-      }
-    });
-    if (!params.skipOnChangeCall && !valueManager.areValuesEqual(utils, dateState.committed, params.value)) {
-      setValue(params.value);
-      if (onChange) {
-        const context = {
-          validationError: params.contextFromField == null ? validator({
-            adapter,
-            value: params.value,
-            props: _extends({}, props, {
-              value: params.value
-            })
-          }) : params.contextFromField.validationError
-        };
-        onChange(params.value, context);
-      }
+  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);
+    setDateState(prev => _extends({}, prev, {
+      draft: action.value,
+      lastPublishedValue: shouldPublish ? action.value : prev.lastPublishedValue,
+      lastCommittedValue: shouldCommit ? action.value : prev.lastCommittedValue,
+      hasBeenModifiedSinceMount: true
+    }));
+    if (shouldPublish && onChange) {
+      const validationError = action.name === 'setValueFromField' ? action.context.validationError : validator({
+        adapter,
+        value: action.value,
+        props: _extends({}, props, {
+          value: action.value
+        })
+      });
+      const context = {
+        validationError
+      };
+      onChange(action.value, context);
     }
-    if (params.action === 'acceptAndClose') {
+    if (shouldCommit && onAccept) {
+      onAccept(action.value);
+    }
+    if (shouldClose) {
       setIsOpen(false);
-      if (onAcceptProp && !valueManager.areValuesEqual(utils, dateState.resetFallback, params.value)) {
-        onAcceptProp(params.value);
-      }
     }
   });
-  React.useEffect(() => {
-    if (isOpen) {
-      // Update all dates in state to equal the current prop value
-      setDate({
-        action: 'setAll',
-        value,
-        skipOnChangeCall: true
-      });
-    }
-  }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // Set the draft and committed date to equal the new prop value.
-  if (!valueManager.areValuesEqual(utils, dateState.committed, value)) {
-    setDate({
-      action: 'setCommitted',
-      value,
-      skipOnChangeCall: true
-    });
+  if (inValue !== undefined && (dateState.lastControlledValue === undefined || !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValue))) {
+    const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValue);
+    setDateState(prev => _extends({}, prev, {
+      lastControlledValue: inValue
+    }, isUpdateComingFromPicker ? {} : {
+      lastCommittedValue: inValue,
+      lastPublishedValue: inValue,
+      draft: inValue,
+      hasBeenModifiedSinceMount: true
+    }));
   }
   const handleClear = useEventCallback(() => {
-    // Reset all date in state to the empty value and close picker.
-    setDate({
+    updateDate({
       value: valueManager.emptyValue,
-      action: 'acceptAndClose'
+      name: 'setValueFromAction',
+      pickerAction: 'clear'
     });
   });
   const handleAccept = useEventCallback(() => {
-    // Set all date in state to equal the current draft value and close picker.
-    setDate({
-      value: dateState.draft,
-      action: 'acceptAndClose'
+    updateDate({
+      value: dateState.lastPublishedValue,
+      name: 'setValueFromAction',
+      pickerAction: 'accept'
     });
   });
   const handleDismiss = useEventCallback(() => {
-    // Set all dates in state to equal the last committed date.
-    // e.g. Reset the state to the last committed value.
-    setDate({
-      value: dateState.committed,
-      action: 'acceptAndClose'
+    updateDate({
+      value: dateState.lastPublishedValue,
+      name: 'setValueFromAction',
+      pickerAction: 'dismiss'
     });
   });
   const handleCancel = useEventCallback(() => {
-    // Set all dates in state to equal the last accepted date and close picker.
-    // e.g. Reset the state to the last accepted value
-    setDate({
-      value: dateState.resetFallback,
-      action: 'acceptAndClose'
+    updateDate({
+      value: dateState.lastCommittedValue,
+      name: 'setValueFromAction',
+      pickerAction: 'cancel'
     });
   });
   const handleSetToday = useEventCallback(() => {
-    // Set all dates in state to equal today and close picker.
-    setDate({
-      value: valueManager.getTodayValue(utils),
-      action: 'acceptAndClose'
+    updateDate({
+      value: valueManager.getTodayValue(utils, valueType),
+      name: 'setValueFromAction',
+      pickerAction: 'today'
     });
   });
   const handleOpen = useEventCallback(() => setIsOpen(true));
   const handleClose = useEventCallback(() => setIsOpen(false));
-  const handleChange = useEventCallback((newDate, selectionState = 'partial') => {
-    switch (selectionState) {
-      case 'shallow':
-        {
-          // Update the `draft` state but do not fire `onChange`
-          return setDate({
-            action: 'setDraft',
-            value: newDate,
-            skipOnChangeCall: true
-          });
-        }
-      case 'partial':
-        {
-          // Update the `draft` state and fire `onChange`
-          return setDate({
-            action: 'setDraft',
-            value: newDate
-          });
-        }
-      case 'finish':
-        {
-          if (closeOnSelect) {
-            // Set all dates in state to equal the new date and close picker.
-            return setDate({
-              value: newDate,
-              action: 'acceptAndClose'
-            });
-          }
-
-          // Updates the `committed` state and fire `onChange`
-          return setDate({
-            value: newDate,
-            action: 'setCommitted'
-          });
-        }
-      default:
-        {
-          throw new Error('MUI: Invalid selectionState passed to `onDateChange`');
-        }
-    }
-  });
-  const handleChangeAndCommit = useEventCallback((newValue, contextFromField) => setDate({
-    action: 'setCommitted',
+  const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
+    name: 'setValueFromView',
     value: newValue,
-    contextFromField
+    selectionState
+  }));
+  const handleChangeField = useEventCallback((newValue, context) => updateDate({
+    name: 'setValueFromField',
+    value: newValue,
+    context
   }));
   const handleFieldSelectedSectionsChange = useEventCallback(newSelectedSections => {
     setSelectedSections(newSelectedSections);
@@ -242,7 +274,7 @@ export const usePickerValue = ({
   };
   const fieldResponse = {
     value: dateState.draft,
-    onChange: handleChangeAndCommit,
+    onChange: handleChangeField,
     selectedSections,
     onSelectedSectionsChange: handleFieldSelectedSectionsChange
   };
@@ -266,7 +298,7 @@ export const usePickerValue = ({
   };
   const layoutResponse = _extends({}, actions, {
     value: viewValue,
-    onChange: handleChangeAndCommit,
+    onChange: handleChange,
     isValid
   });
   return {

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

@@ -0,0 +1,235 @@
+import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
+import { InferError, Validator } from '../validation/useValidation';
+import { UseFieldValidationProps } from '../useField/useField.types';
+import { WrapperVariant } from '../../models/common';
+import { FieldSection, FieldSelectedSections, FieldValueType, MuiPickersAdapter } from '../../../models';
+export interface PickerValueManager<TValue, TDate, TError> {
+    /**
+     * Determines if two values are equal.
+     * @template TDate, TValue
+     * @param {MuiPickersAdapter<TDate>} utils The adapter.
+     * @param {TValue} valueLeft The first value to compare.
+     * @param {TValue} valueRight The second value to compare.
+     * @returns {boolean} A boolean indicating if the two values are equal.
+     */
+    areValuesEqual: (utils: MuiPickersAdapter<TDate>, valueLeft: TValue, valueRight: TValue) => boolean;
+    /**
+     * Value to set when clicking the "Clear" button.
+     */
+    emptyValue: TValue;
+    /**
+     * Method returning the value to set when clicking the "Today" button
+     * @template TDate, TValue
+     * @param {MuiPickersAdapter<TDate>} utils The adapter.
+     * @param {FieldValueType} valueType The type of the value being edited.
+     * @returns {TValue} The value to set when clicking the "Today" button.
+     */
+    getTodayValue: (utils: MuiPickersAdapter<TDate>, valueType: FieldValueType) => TValue;
+    /**
+     * Method parsing the input value to replace all invalid dates by `null`.
+     * @template TDate, TValue
+     * @param {MuiPickersAdapter<TDate>} utils The adapter.
+     * @param {TValue} value The value to parse.
+     * @returns {TValue} The value without invalid date.
+     */
+    cleanValue: (utils: MuiPickersAdapter<TDate>, value: TValue) => TValue;
+    /**
+     * Generates the new value, given the previous value and the new proposed value.
+     * @template TDate, TValue
+     * @param {MuiPickersAdapter<TDate>} utils The adapter.
+     * @param {TValue} lastValidDateValue The last valid value.
+     * @param {TValue} value The proposed value.
+     * @returns {TValue} The new value.
+     */
+    valueReducer?: (utils: MuiPickersAdapter<TDate>, lastValidDateValue: TValue, value: TValue) => TValue;
+    /**
+     * Compare two errors to know if they are equal.
+     * @template TError
+     * @param {TError} error The new error
+     * @param {TError | null} prevError The previous error
+     * @returns {boolean} `true` if the new error is different from the previous one.
+     */
+    isSameError: (error: TError, prevError: TError | null) => boolean;
+    /**
+     * Checks if the current error is empty or not.
+     * @template TError
+     * @param {TError} error The current error.
+     * @returns {boolean} `true` if the current error is not empty.
+     */
+    hasError: (error: TError) => boolean;
+    /**
+     * The value identifying no error, used to initialise the error state.
+     */
+    defaultErrorState: TError;
+}
+export interface PickerChangeHandlerContext<TError> {
+    validationError: TError;
+}
+export type PickerSelectionState = 'partial' | 'shallow' | 'finish';
+export interface UsePickerValueState<TValue> {
+    /**
+     * Date displayed on the views and the field.
+     * It is updated whenever the user modifies something.
+     */
+    draft: TValue;
+    /**
+     * Last value published (e.g: the last value for which `shouldPublishValue` returned `true`).
+     * If `onChange` is defined, it's the value that was passed on the last call to this callback.
+     */
+    lastPublishedValue: TValue;
+    /**
+     * Last value committed (e.g: the last value for which `shouldCommitValue` returned `true`).
+     * If `onAccept` is defined, it's the value that was passed on the last call to this callback.
+     */
+    lastCommittedValue: TValue;
+    /**
+     * Last value passed with `props.value`.
+     * Used to update the `draft` value whenever the `value` prop changes.
+     */
+    lastControlledValue: TValue | undefined;
+    /**
+     * If we never modified the value since the mount of the component,
+     * Then we might want to apply some custom logic.
+     *
+     * For example, when the component is not controlled and `defaultValue` is defined.
+     * Then clicking on "Accept", "Today" or "Clear" should fire `onAccept` with `defaultValue`, but clicking on "Cancel" or dimissing the picker should not.
+     */
+    hasBeenModifiedSinceMount: boolean;
+}
+export interface PickerValueUpdaterParams<TValue, TError> {
+    action: PickerValueUpdateAction<TValue, TError>;
+    dateState: UsePickerValueState<TValue>;
+    /**
+     * Check if the new draft value has changed compared to some given value.
+     * @template TValue
+     * @param {TValue} comparisonValue The value to compare the new draft value with.
+     * @returns {boolean} `true` if the new draft value is equal to the comparison value.
+     */
+    hasChanged: (comparisonValue: TValue) => boolean;
+    isControlled: boolean;
+    closeOnSelect: boolean;
+}
+export type PickerValueUpdateAction<TValue, TError> = {
+    name: 'setValueFromView';
+    value: TValue;
+    selectionState: PickerSelectionState;
+} | {
+    name: 'setValueFromField';
+    value: TValue;
+    context: FieldChangeHandlerContext<TError>;
+} | {
+    name: 'setValueFromAction';
+    value: TValue;
+    pickerAction: 'accept' | 'today' | 'cancel' | 'dismiss' | 'clear';
+};
+/**
+ * Props used to handle the value that are common to all pickers.
+ */
+export interface UsePickerValueBaseProps<TValue, TError> {
+    /**
+     * The selected value.
+     * Used when the component is controlled.
+     */
+    value?: TValue;
+    /**
+     * The default value.
+     * Used when the component is not controlled.
+     */
+    defaultValue?: TValue;
+    /**
+     * Callback fired when the value changes.
+     * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+     * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+     * @param {TValue} value The new value.
+     * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
+     */
+    onChange?: (value: TValue, context: PickerChangeHandlerContext<TError>) => void;
+    /**
+     * Callback fired when the value is accepted.
+     * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+     * @param {TValue} value The value that was just accepted.
+     */
+    onAccept?: (value: TValue) => void;
+    /**
+     * Callback fired when the error associated to the current value changes.
+     * If the error has a non-null value, then the `TextField` will be rendered in `error` state.
+     *
+     * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+     * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+     * @param {TError} error The new error describing why the current value is not valid.
+     * @param {TValue} value The value associated to the error.
+     */
+    onError?: (error: TError, value: TValue) => void;
+}
+/**
+ * Props used to handle the value of non-static pickers.
+ */
+export interface UsePickerValueNonStaticProps<TValue, TSection extends FieldSection> extends Pick<UseFieldInternalProps<TValue, TSection, unknown>, 'selectedSections' | 'onSelectedSectionsChange'> {
+    /**
+     * If `true`, the popover or modal will close after submitting the full date.
+     * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Control the popup or dialog open state.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the popup requests to be closed.
+     * Use in controlled mode (see `open`).
+     */
+    onClose?: () => void;
+    /**
+     * Callback fired when the popup requests to be opened.
+     * Use in controlled mode (see `open`).
+     */
+    onOpen?: () => void;
+}
+/**
+ * Props used to handle the value of the pickers.
+ */
+export interface UsePickerValueProps<TValue, TSection extends FieldSection, TError> extends UsePickerValueBaseProps<TValue, TError>, UsePickerValueNonStaticProps<TValue, TSection> {
+}
+export interface UsePickerValueParams<TValue, TDate, TSection extends FieldSection, TExternalProps extends UsePickerValueProps<TValue, TSection, any>> {
+    props: TExternalProps;
+    valueManager: PickerValueManager<TValue, TDate, InferError<TExternalProps>>;
+    valueType: FieldValueType;
+    wrapperVariant: WrapperVariant;
+    validator: Validator<TValue, TDate, InferError<TExternalProps>, UseFieldValidationProps<TValue, TExternalProps>>;
+}
+export interface UsePickerValueActions {
+    onAccept: () => void;
+    onClear: () => void;
+    onDismiss: () => void;
+    onCancel: () => void;
+    onSetToday: () => void;
+    onOpen: () => void;
+    onClose: () => void;
+}
+export type UsePickerValueFieldResponse<TValue, TSection extends FieldSection, TError> = Required<Pick<UseFieldInternalProps<TValue, TSection, TError>, 'value' | 'onChange' | 'selectedSections' | 'onSelectedSectionsChange'>>;
+/**
+ * Props passed to `usePickerViews`.
+ */
+export interface UsePickerValueViewsResponse<TValue> {
+    value: TValue;
+    onChange: (value: TValue, selectionState?: PickerSelectionState) => void;
+    open: boolean;
+    onClose: () => void;
+    onSelectedSectionsChange: (newValue: FieldSelectedSections) => void;
+}
+/**
+ * Props passed to `usePickerLayoutProps`.
+ */
+export interface UsePickerValueLayoutResponse<TValue> extends UsePickerValueActions {
+    value: TValue;
+    onChange: (newValue: TValue) => void;
+    isValid: (value: TValue) => boolean;
+}
+export interface UsePickerValueResponse<TValue, TSection extends FieldSection, TError> {
+    open: boolean;
+    actions: UsePickerValueActions;
+    viewProps: UsePickerValueViewsResponse<TValue>;
+    fieldProps: UsePickerValueFieldResponse<TValue, TSection, TError>;
+    layoutProps: UsePickerValueLayoutResponse<TValue>;
+}

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

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

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

@@ -3,7 +3,7 @@ import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { DateOrTimeView } from '../../../models';
 import { UseViewsOptions } from '../useViews';
-import type { UsePickerValueViewsResponse } from './usePickerValue';
+import type { UsePickerValueViewsResponse } from './usePickerValue.types';
 interface PickerViewsRendererBaseExternalProps<TView extends DateOrTimeView> extends Omit<UsePickerViewsProps<any, TView, any, any>, 'openTo' | 'viewRenderers'> {
 }
 export type PickerViewsRendererProps<TValue, TView extends DateOrTimeView, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = TExternalProps & TAdditionalProps & UsePickerValueViewsResponse<TValue> & {