@mui/x-date-pickers 5.0.0-alpha.0

package/internals/components/wrappers/ResponsiveWrapper.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { MobileWrapperProps } from './MobileWrapper';
+import { DesktopWrapperProps } from './DesktopWrapper';
+import { DateInputPropsLike, PrivateWrapperProps } from './WrapperProps';
+export interface ResponsiveWrapperProps extends MobileWrapperProps, DesktopWrapperProps {
+    /**
+     * CSS media query when `Mobile` mode will be changed to `Desktop`.
+     * @default '@media (pointer: fine)'
+     * @example '@media (min-width: 720px)' or theme.breakpoints.up('sm')
+     */
+    desktopModeMediaQuery?: string;
+}
+interface InternalResponsiveWrapperProps extends ResponsiveWrapperProps, PrivateWrapperProps {
+    DateInputProps: DateInputPropsLike & {
+        ref?: React.Ref<HTMLDivElement>;
+    };
+    KeyboardDateInputComponent: React.JSXElementConstructor<DateInputPropsLike & {
+        ref?: React.Ref<HTMLDivElement>;
+    }>;
+    PureDateInputComponent: React.JSXElementConstructor<DateInputPropsLike>;
+}
+export declare function ResponsiveTooltipWrapper(props: InternalResponsiveWrapperProps): JSX.Element;
+export {};

package/internals/components/wrappers/ResponsiveWrapper.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["cancelText", "clearable", "clearText", "DateInputProps", "desktopModeMediaQuery", "DialogProps", "KeyboardDateInputComponent", "okText", "PopperProps", "PureDateInputComponent", "showTodayButton", "todayText", "TransitionComponent"];
+import * as React from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { MobileWrapper } from './MobileWrapper';
+import { DesktopTooltipWrapper } from './DesktopTooltipWrapper';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ResponsiveTooltipWrapper(props) {
+  const {
+    cancelText,
+    clearable,
+    clearText,
+    DateInputProps,
+    desktopModeMediaQuery = '@media (pointer: fine)',
+    DialogProps,
+    KeyboardDateInputComponent,
+    okText,
+    PopperProps,
+    PureDateInputComponent,
+    showTodayButton,
+    todayText,
+    TransitionComponent
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const isDesktop = useMediaQuery(desktopModeMediaQuery);
+  return isDesktop ? /*#__PURE__*/_jsx(DesktopTooltipWrapper, _extends({
+    DateInputProps: DateInputProps,
+    KeyboardDateInputComponent: KeyboardDateInputComponent,
+    PopperProps: PopperProps,
+    TransitionComponent: TransitionComponent
+  }, other)) : /*#__PURE__*/_jsx(MobileWrapper, _extends({
+    cancelText: cancelText,
+    clearable: clearable,
+    clearText: clearText,
+    DateInputProps: DateInputProps,
+    DialogProps: DialogProps,
+    okText: okText,
+    PureDateInputComponent: PureDateInputComponent,
+    showTodayButton: showTodayButton,
+    todayText: todayText
+  }, other));
+}

package/internals/components/wrappers/WrapperProps.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DateInputProps } from '../PureDateInput';
+export interface DateInputPropsLike extends Omit<DateInputProps<any, any>, 'renderInput' | 'validationError'> {
+    renderInput: (...args: any) => JSX.Element;
+    validationError?: any;
+}
+export interface PrivateWrapperProps {
+    onAccept: () => void;
+    onClear: () => void;
+    onDismiss: () => void;
+    onSetToday: () => void;
+    open: boolean;
+}

package/internals/components/wrappers/WrapperProps.js

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

package/internals/components/wrappers/WrapperVariantContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export declare type WrapperVariant = 'mobile' | 'desktop' | null;
+/**
+ * TODO consider getting rid from wrapper variant
+ * @ignore - internal component.
+ */
+export declare const WrapperVariantContext: React.Context<WrapperVariant>;
+/**
+ * @ignore - internal component.
+ */
+export declare const IsStaticVariantContext: React.Context<boolean>;

package/internals/components/wrappers/WrapperVariantContext.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+/**
+ * TODO consider getting rid from wrapper variant
+ * @ignore - internal component.
+ */
+export const WrapperVariantContext = /*#__PURE__*/React.createContext(null);
+/**
+ * @ignore - internal component.
+ */
+
+export const IsStaticVariantContext = /*#__PURE__*/React.createContext(false);

package/internals/constants/dimensions.d.ts

@@ -0,0 +1,4 @@
+export declare const DAY_SIZE = 36;
+export declare const DAY_MARGIN = 2;
+export declare const DIALOG_WIDTH = 320;
+export declare const VIEW_HEIGHT = 358;

package/internals/constants/dimensions.js

@@ -0,0 +1,4 @@
+export const DAY_SIZE = 36;
+export const DAY_MARGIN = 2;
+export const DIALOG_WIDTH = 320;
+export const VIEW_HEIGHT = 358;

package/internals/hooks/date-helpers-hooks.d.ts

@@ -0,0 +1,16 @@
+import { ParseableDate } from '../models/parseableDate';
+import { PickerOnChangeFn } from './useViews';
+export declare type OverrideParseableDateProps<TDate, TProps, TKey extends keyof TProps> = Omit<TProps, TKey> & Partial<Record<TKey, ParseableDate<TDate>>>;
+interface MonthValidationOptions<TDate> {
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    minDate: TDate;
+    maxDate: TDate;
+}
+export declare function useNextMonthDisabled<TDate>(month: TDate, { disableFuture, maxDate }: Pick<MonthValidationOptions<TDate>, 'disableFuture' | 'maxDate'>): boolean;
+export declare function usePreviousMonthDisabled<TDate>(month: TDate, { disablePast, minDate }: Pick<MonthValidationOptions<TDate>, 'disablePast' | 'minDate'>): boolean;
+export declare function useMeridiemMode<TDate>(date: TDate, ampm: boolean | undefined, onChange: PickerOnChangeFn<TDate>): {
+    meridiemMode: "am" | "pm" | null;
+    handleMeridiemChange: (mode: 'am' | 'pm') => void;
+};
+export {};

package/internals/hooks/date-helpers-hooks.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useUtils } from './useUtils';
+import { getMeridiem, convertToMeridiem } from '../utils/time-utils';
+export function useNextMonthDisabled(month, {
+  disableFuture,
+  maxDate
+}) {
+  const utils = useUtils();
+  return React.useMemo(() => {
+    const now = utils.date();
+    const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
+    return !utils.isAfter(lastEnabledMonth, month);
+  }, [disableFuture, maxDate, month, utils]);
+}
+export function usePreviousMonthDisabled(month, {
+  disablePast,
+  minDate
+}) {
+  const utils = useUtils();
+  return React.useMemo(() => {
+    const now = utils.date();
+    const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
+    return !utils.isBefore(firstEnabledMonth, month);
+  }, [disablePast, minDate, month, utils]);
+}
+export function useMeridiemMode(date, ampm, onChange) {
+  const utils = useUtils();
+  const meridiemMode = getMeridiem(date, utils);
+  const handleMeridiemChange = React.useCallback(mode => {
+    const timeWithMeridiem = convertToMeridiem(date, mode, Boolean(ampm), utils);
+    onChange(timeWithMeridiem, 'partial');
+  }, [ampm, date, onChange, utils]);
+  return {
+    meridiemMode,
+    handleMeridiemChange
+  };
+}

package/internals/hooks/useIsLandscape.d.ts

@@ -0,0 +1,4 @@
+import { CalendarOrClockPickerView } from '../models';
+declare type Orientation = 'portrait' | 'landscape';
+export declare const useIsLandscape: (views: readonly CalendarOrClockPickerView[], customOrientation: Orientation | undefined) => boolean;
+export {};

package/internals/hooks/useIsLandscape.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { arrayIncludes } from '../utils/utils';
+
+function getOrientation() {
+  if (typeof window === 'undefined') {
+    return 'portrait';
+  }
+
+  if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
+    return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
+  } // Support IOS safari
+
+
+  if (window.orientation) {
+    return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
+  }
+
+  return 'portrait';
+}
+
+export const useIsLandscape = (views, customOrientation) => {
+  const [orientation, setOrientation] = React.useState(getOrientation);
+  useEnhancedEffect(() => {
+    const eventHandler = () => {
+      setOrientation(getOrientation());
+    };
+
+    window.addEventListener('orientationchange', eventHandler);
+    return () => {
+      window.removeEventListener('orientationchange', eventHandler);
+    };
+  }, []);
+
+  if (arrayIncludes(views, ['hours', 'minutes', 'seconds'])) {
+    // could not display 13:34:44 in landscape mode
+    return false;
+  }
+
+  const orientationToUse = customOrientation || orientation;
+  return orientationToUse === 'landscape';
+};

package/internals/hooks/useMaskedInput.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { DateInputProps, MuiTextFieldProps } from '../components/PureDateInput';
+declare type MaskedInputProps = Omit<DateInputProps, 'adornmentPosition' | 'disableOpenPicker' | 'getOpenDialogAriaText' | 'InputAdornmentProps' | 'InputProps' | 'open' | 'openPicker' | 'OpenPickerButtonProps' | 'renderInput'> & {
+    inputProps?: Partial<React.HTMLProps<HTMLInputElement>>;
+};
+export declare const useMaskedInput: ({ acceptRegex, disabled, disableMaskedInput, ignoreInvalidInputs, inputFormat, inputProps, label, mask, onChange, rawValue, readOnly, rifmFormatter, TextFieldProps, validationError, }: MaskedInputProps) => MuiTextFieldProps;
+export {};

package/internals/hooks/useMaskedInput.js

@@ -0,0 +1,92 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useRifm } from 'rifm';
+import { useUtils } from './useUtils';
+import { createDelegatedEventHandler } from '../utils/utils';
+import { maskedDateFormatter, getDisplayDate, checkMaskIsValidForCurrentFormat } from '../utils/text-field-helper';
+export const useMaskedInput = ({
+  acceptRegex = /[\d]/gi,
+  disabled,
+  disableMaskedInput,
+  ignoreInvalidInputs,
+  inputFormat,
+  inputProps,
+  label,
+  mask,
+  onChange,
+  rawValue,
+  readOnly,
+  rifmFormatter,
+  TextFieldProps,
+  validationError
+}) => {
+  const utils = useUtils();
+  const [isFocused, setIsFocused] = React.useState(false);
+  const formatHelperText = utils.getFormatHelperText(inputFormat);
+  const shouldUseMaskedInput = React.useMemo(() => {
+    // formatting of dates is a quite slow thing, so do not make useless .format calls
+    if (!mask || disableMaskedInput) {
+      return false;
+    }
+
+    return checkMaskIsValidForCurrentFormat(mask, inputFormat, acceptRegex, utils);
+  }, [acceptRegex, disableMaskedInput, inputFormat, mask, utils]);
+  const formatter = React.useMemo(() => shouldUseMaskedInput && mask ? maskedDateFormatter(mask, acceptRegex) : st => st, [acceptRegex, mask, shouldUseMaskedInput]); // TODO: Implement with controlled vs uncontrolled `rawValue`
+
+  const currentInputValue = getDisplayDate(utils, rawValue, inputFormat);
+  const [innerInputValue, setInnerInputValue] = React.useState(currentInputValue);
+  const previousInputValueRef = React.useRef(currentInputValue);
+  React.useEffect(() => {
+    previousInputValueRef.current = currentInputValue;
+  }, [currentInputValue]);
+  const notTyping = !isFocused;
+  const valueChanged = previousInputValueRef.current !== currentInputValue; // Update the input value only if the value changed outside of typing
+
+  if (notTyping && valueChanged && (rawValue === null || utils.isValid(rawValue))) {
+    if (currentInputValue !== innerInputValue) {
+      setInnerInputValue(currentInputValue);
+    }
+  }
+
+  const handleChange = text => {
+    const finalString = text === '' || text === mask ? '' : text;
+    setInnerInputValue(finalString);
+    const date = finalString === null ? null : utils.parse(finalString, inputFormat);
+
+    if (ignoreInvalidInputs && !utils.isValid(date)) {
+      return;
+    }
+
+    onChange(date, finalString || undefined);
+  };
+
+  const rifmProps = useRifm({
+    value: innerInputValue,
+    onChange: handleChange,
+    format: rifmFormatter || formatter
+  });
+  const inputStateArgs = shouldUseMaskedInput ? rifmProps : {
+    value: innerInputValue,
+    onChange: event => {
+      handleChange(event.currentTarget.value);
+    }
+  };
+  return _extends({
+    label,
+    disabled,
+    error: validationError,
+    inputProps: _extends({}, inputStateArgs, {
+      disabled,
+      placeholder: formatHelperText,
+      readOnly,
+      type: shouldUseMaskedInput ? 'tel' : 'text'
+    }, inputProps, {
+      onFocus: createDelegatedEventHandler(() => {
+        setIsFocused(true);
+      }, inputProps == null ? void 0 : inputProps.onFocus),
+      onBlur: createDelegatedEventHandler(() => {
+        setIsFocused(false);
+      }, inputProps == null ? void 0 : inputProps.onBlur)
+    })
+  }, TextFieldProps);
+};

package/internals/hooks/useOpenState.d.ts

@@ -0,0 +1,9 @@
+export interface OpenStateProps {
+    open?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+export declare const useOpenState: ({ open, onOpen, onClose }: OpenStateProps) => {
+    isOpen: boolean;
+    setIsOpen: (newIsOpen: boolean) => void;
+};

package/internals/hooks/useOpenState.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export const useOpenState = ({
+  open,
+  onOpen,
+  onClose
+}) => {
+  const isControllingOpenProp = React.useRef(typeof open === 'boolean').current;
+  const [openState, setIsOpenState] = React.useState(false); // 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` (e.g. initially opened)
+
+  React.useEffect(() => {
+    if (isControllingOpenProp) {
+      if (typeof open !== 'boolean') {
+        throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
+      }
+
+      setIsOpenState(open);
+    }
+  }, [isControllingOpenProp, open]);
+  const setIsOpen = React.useCallback(newIsOpen => {
+    if (!isControllingOpenProp) {
+      setIsOpenState(newIsOpen);
+    }
+
+    if (newIsOpen && onOpen) {
+      onOpen();
+    }
+
+    if (!newIsOpen && onClose) {
+      onClose();
+    }
+  }, [isControllingOpenProp, onOpen, onClose]);
+  return {
+    isOpen: openState,
+    setIsOpen
+  };
+};

package/internals/hooks/usePickerState.d.ts

@@ -0,0 +1,39 @@
+import { WrapperVariant } from '../components/wrappers/WrapperVariantContext';
+import { MuiPickersAdapter } from '../models';
+export interface PickerStateValueManager<TInputValue, TDateValue> {
+    areValuesEqual: (utils: MuiPickersAdapter<TDateValue>, valueLeft: TDateValue, valueRight: TDateValue) => boolean;
+    emptyValue: TDateValue;
+    parseInput: (utils: MuiPickersAdapter<TDateValue>, value: TInputValue) => TDateValue;
+}
+export declare type PickerSelectionState = 'partial' | 'shallow' | 'finish';
+interface PickerStateProps<TInput, TDateValue> {
+    disableCloseOnSelect?: boolean;
+    open?: boolean;
+    onAccept?: (date: TDateValue) => void;
+    onChange: (date: TDateValue, keyboardInputValue?: string) => void;
+    onClose?: () => void;
+    onOpen?: () => void;
+    value: TInput;
+}
+export declare const usePickerState: <TInput, TDateValue>(props: PickerStateProps<TInput, TDateValue>, valueManager: PickerStateValueManager<TInput, TDateValue>) => {
+    pickerProps: {
+        date: TDateValue;
+        isMobileKeyboardViewOpen: boolean;
+        toggleMobileKeyboardView: () => void;
+        onDateChange: (newDate: TDateValue, wrapperVariant: WrapperVariant, selectionState?: PickerSelectionState) => void;
+    };
+    inputProps: {
+        onChange: (date: TDateValue, keyboardInputValue?: string | undefined) => void;
+        open: boolean;
+        rawValue: TInput;
+        openPicker: () => void;
+    };
+    wrapperProps: {
+        open: boolean;
+        onClear: () => void;
+        onAccept: () => void;
+        onDismiss: () => void;
+        onSetToday: () => void;
+    };
+};
+export {};

package/internals/hooks/usePickerState.js

@@ -0,0 +1,117 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useOpenState } from './useOpenState';
+import { useUtils } from './useUtils';
+export const usePickerState = (props, valueManager) => {
+  const {
+    disableCloseOnSelect,
+    onAccept,
+    onChange,
+    value
+  } = props;
+  const utils = useUtils();
+  const {
+    isOpen,
+    setIsOpen
+  } = useOpenState(props);
+
+  function initDraftableDate(date) {
+    return {
+      committed: date,
+      draft: date
+    };
+  }
+
+  const parsedDateValue = valueManager.parseInput(utils, value);
+  const [draftState, dispatch] = React.useReducer((state, action) => {
+    switch (action.type) {
+      case 'reset':
+        return initDraftableDate(action.payload);
+
+      case 'update':
+        return _extends({}, state, {
+          draft: action.payload
+        });
+
+      default:
+        return state;
+    }
+  }, parsedDateValue, initDraftableDate);
+
+  if (!valueManager.areValuesEqual(utils, draftState.committed, parsedDateValue)) {
+    dispatch({
+      type: 'reset',
+      payload: parsedDateValue
+    });
+  }
+
+  const [initialDate, setInitialDate] = React.useState(draftState.committed); // Mobile keyboard view is a special case.
+  // When it's open picker should work like closed, cause we are just showing text field
+
+  const [isMobileKeyboardViewOpen, setMobileKeyboardViewOpen] = React.useState(false);
+  const acceptDate = React.useCallback((acceptedDate, needClosePicker) => {
+    onChange(acceptedDate);
+
+    if (needClosePicker) {
+      setIsOpen(false);
+      setInitialDate(acceptedDate);
+
+      if (onAccept) {
+        onAccept(acceptedDate);
+      }
+    }
+  }, [onAccept, onChange, setIsOpen]);
+  const wrapperProps = React.useMemo(() => ({
+    open: isOpen,
+    onClear: () => acceptDate(valueManager.emptyValue, true),
+    onAccept: () => acceptDate(draftState.draft, true),
+    onDismiss: () => acceptDate(initialDate, true),
+    onSetToday: () => {
+      const now = utils.date();
+      dispatch({
+        type: 'update',
+        payload: now
+      });
+      acceptDate(now, !disableCloseOnSelect);
+    }
+  }), [acceptDate, disableCloseOnSelect, isOpen, utils, draftState.draft, valueManager.emptyValue, initialDate]);
+  const pickerProps = React.useMemo(() => ({
+    date: draftState.draft,
+    isMobileKeyboardViewOpen,
+    toggleMobileKeyboardView: () => setMobileKeyboardViewOpen(!isMobileKeyboardViewOpen),
+    onDateChange: (newDate, wrapperVariant, selectionState = 'partial') => {
+      dispatch({
+        type: 'update',
+        payload: newDate
+      });
+
+      if (selectionState === 'partial') {
+        acceptDate(newDate, false);
+      }
+
+      if (selectionState === 'finish') {
+        const shouldCloseOnSelect = !(disableCloseOnSelect != null ? disableCloseOnSelect : wrapperVariant === 'mobile');
+        acceptDate(newDate, shouldCloseOnSelect);
+      } // if selectionState === "shallow" do nothing (we already update the draft state)
+
+    }
+  }), [acceptDate, disableCloseOnSelect, isMobileKeyboardViewOpen, draftState.draft]);
+  const inputProps = React.useMemo(() => ({
+    onChange,
+    open: isOpen,
+    rawValue: value,
+    openPicker: () => setIsOpen(true)
+  }), [onChange, isOpen, value, setIsOpen]);
+  const pickerState = {
+    pickerProps,
+    inputProps,
+    wrapperProps
+  };
+  React.useDebugValue(pickerState, () => ({
+    MuiPickerState: {
+      pickerDraft: draftState,
+      other: pickerState
+    }
+  }));
+  return pickerState;
+};

package/internals/hooks/useUtils.d.ts

@@ -0,0 +1,6 @@
+export declare const useUtils: <T>() => import("..").MuiPickersAdapter<T>;
+export declare const useDefaultDates: <T>() => {
+    minDate: T;
+    maxDate: T;
+};
+export declare const useNow: <TDate>() => TDate;

package/internals/hooks/useUtils.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { MuiPickersAdapterContext } from '../../LocalizationProvider/LocalizationProvider';
+
+const useLocalizationContext = () => {
+  const localization = React.useContext(MuiPickersAdapterContext);
+
+  if (localization === null) {
+    throw new Error('MUI: Can not find utils in context. It looks like you forgot to wrap your component in LocalizationProvider, or pass dateAdapter prop directly.');
+  }
+
+  return localization;
+};
+
+export const useUtils = () => useLocalizationContext().utils;
+export const useDefaultDates = () => useLocalizationContext().defaultDates;
+export const useNow = () => {
+  const utils = useUtils();
+  const now = React.useRef(utils.date());
+  return now.current;
+};

package/internals/hooks/useViews.d.ts

@@ -0,0 +1,19 @@
+import { PickerSelectionState } from './usePickerState';
+import { CalendarOrClockPickerView } from '../models';
+export declare type PickerOnChangeFn<TDate> = (date: TDate | null, selectionState?: PickerSelectionState) => void;
+interface UseViewsOptions<TDate, View extends CalendarOrClockPickerView> {
+    onChange: PickerOnChangeFn<TDate>;
+    onViewChange?: (newView: View) => void;
+    openTo?: View;
+    view: View | undefined;
+    views: readonly View[];
+}
+export declare function useViews<TDate, View extends CalendarOrClockPickerView>({ onChange, onViewChange, openTo, view, views, }: UseViewsOptions<TDate, View>): {
+    handleChangeAndOpenNext: PickerOnChangeFn<TDate>;
+    nextView: View;
+    previousView: View;
+    openNext: () => void;
+    openView: View;
+    setOpenView: (newView: View) => void;
+};
+export {};

package/internals/hooks/useViews.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useControlled } from '@mui/material/utils';
+import { arrayIncludes } from '../utils/utils';
+export function useViews({
+  onChange,
+  onViewChange,
+  openTo,
+  view,
+  views
+}) {
+  var _views, _views2;
+
+  const [openView, setOpenView] = useControlled({
+    name: 'Picker',
+    state: 'view',
+    controlled: view,
+    default: openTo && arrayIncludes(views, openTo) ? openTo : views[0]
+  });
+  const previousView = (_views = views[views.indexOf(openView) - 1]) != null ? _views : null;
+  const nextView = (_views2 = views[views.indexOf(openView) + 1]) != null ? _views2 : null;
+  const changeView = React.useCallback(newView => {
+    setOpenView(newView);
+
+    if (onViewChange) {
+      onViewChange(newView);
+    }
+  }, [setOpenView, onViewChange]);
+  const openNext = React.useCallback(() => {
+    if (nextView) {
+      changeView(nextView);
+    }
+  }, [nextView, changeView]);
+  const handleChangeAndOpenNext = React.useCallback((date, currentViewSelectionState) => {
+    const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
+    const globalSelectionState = isSelectionFinishedOnCurrentView && Boolean(nextView) ? 'partial' : currentViewSelectionState;
+    onChange(date, globalSelectionState);
+
+    if (isSelectionFinishedOnCurrentView) {
+      openNext();
+    }
+  }, [nextView, onChange, openNext]);
+  return {
+    handleChangeAndOpenNext,
+    nextView,
+    previousView,
+    openNext,
+    openView,
+    setOpenView: changeView
+  };
+}

package/internals/hooks/validation/useDateTimeValidation.d.ts

@@ -0,0 +1,8 @@
+import { ValidationProps, Validator } from './useValidation';
+import { DateValidationError, ExportedDateValidationProps } from './useDateValidation';
+import { TimeValidationError, ExportedTimeValidationProps } from './useTimeValidation';
+export interface DateTimeValidationProps<TDate> extends ExportedDateValidationProps<TDate>, ExportedTimeValidationProps<TDate>, ValidationProps<DateTimeValidationError, TDate> {
+}
+export declare const validateDateTime: Validator<any, DateTimeValidationProps<any>>;
+export declare type DateTimeValidationError = DateValidationError | TimeValidationError;
+export declare function useDateTimeValidation<TDate>(props: DateTimeValidationProps<TDate> & ValidationProps<DateTimeValidationError, TDate>): DateTimeValidationError;