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

package/internals/hooks/validation/useDateTimeValidation.js

@@ -0,0 +1,35 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["minDate", "maxDate", "disableFuture", "shouldDisableDate", "disablePast"];
+import { useValidation } from './useValidation';
+import { validateDate } from './useDateValidation';
+import { validateTime } from './useTimeValidation';
+export const validateDateTime = (utils, value, _ref) => {
+  let {
+    minDate,
+    maxDate,
+    disableFuture,
+    shouldDisableDate,
+    disablePast
+  } = _ref,
+      timeValidationProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  const dateValidationResult = validateDate(utils, value, {
+    minDate,
+    maxDate,
+    disableFuture,
+    shouldDisableDate,
+    disablePast
+  });
+
+  if (dateValidationResult !== null) {
+    return dateValidationResult;
+  }
+
+  return validateTime(utils, value, timeValidationProps);
+};
+
+const isSameDateTimeError = (a, b) => a === b;
+
+export function useDateTimeValidation(props) {
+  return useValidation(props, validateDateTime, isSameDateTimeError);
+}

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

@@ -0,0 +1,34 @@
+import { ValidationProps, Validator } from './useValidation';
+export interface ExportedDateValidationProps<TDate> {
+    /**
+     * Disable past dates.
+     * @default false
+     */
+    disablePast?: boolean;
+    /**
+     * Disable future dates.
+     * @default false
+     */
+    disableFuture?: boolean;
+    /**
+     * Min selectable date. @DateIOType
+     * @default Date(1900-01-01)
+     */
+    minDate?: TDate;
+    /**
+     * Max selectable date. @DateIOType
+     * @default Date(2099-31-12)
+     */
+    maxDate?: TDate;
+    /**
+     * Disable specific date. @DateIOType
+     * @param {TDate} day The date to test.
+     * @returns {boolean} Return `true` if the date should be disabled.
+     */
+    shouldDisableDate?: (day: TDate) => boolean;
+}
+export interface DateValidationProps<TDate> extends ValidationProps<DateValidationError, TDate>, ExportedDateValidationProps<TDate> {
+}
+export declare type DateValidationError = 'invalidDate' | 'shouldDisableDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | null;
+export declare const validateDate: Validator<any, DateValidationProps<any>>;
+export declare const useDateValidation: <TDate>(props: DateValidationProps<TDate> & ValidationProps<DateValidationError, TDate>) => DateValidationError;

package/internals/hooks/validation/useDateValidation.js

@@ -0,0 +1,42 @@
+import { useValidation } from './useValidation';
+export const validateDate = (utils, value, {
+  disablePast,
+  disableFuture,
+  minDate,
+  maxDate,
+  shouldDisableDate
+}) => {
+  const now = utils.date();
+  const date = utils.date(value);
+
+  if (date === null) {
+    return null;
+  }
+
+  switch (true) {
+    case !utils.isValid(value):
+      return 'invalidDate';
+
+    case Boolean(shouldDisableDate && shouldDisableDate(date)):
+      return 'shouldDisableDate';
+
+    case Boolean(disableFuture && utils.isAfterDay(date, now)):
+      return 'disableFuture';
+
+    case Boolean(disablePast && utils.isBeforeDay(date, now)):
+      return 'disablePast';
+
+    case Boolean(minDate && utils.isBeforeDay(date, minDate)):
+      return 'minDate';
+
+    case Boolean(maxDate && utils.isAfterDay(date, maxDate)):
+      return 'maxDate';
+
+    default:
+      return null;
+  }
+};
+
+const isSameDateError = (a, b) => a === b;
+
+export const useDateValidation = props => useValidation(props, validateDate, isSameDateError);

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

@@ -0,0 +1,32 @@
+import { ValidationProps, Validator } from './useValidation';
+import { ClockPickerView } from '../../models';
+export interface ExportedTimeValidationProps<TDate> {
+    /**
+     * Min time acceptable time.
+     * For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.
+     */
+    minTime?: TDate;
+    /**
+     * Max time acceptable time.
+     * For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.
+     */
+    maxTime?: TDate;
+    /**
+     * Dynamically check if time is disabled or not.
+     * If returns `false` appropriate time point will ot be acceptable.
+     * @param {number} timeValue The value to check.
+     * @param {ClockPickerView} clockType The clock type of the timeValue.
+     * @returns {boolean} Returns `true` if the time should be disabled
+     */
+    shouldDisableTime?: (timeValue: number, clockType: ClockPickerView) => boolean;
+    /**
+     * Do not ignore date part when validating min/max time.
+     * @default false
+     */
+    disableIgnoringDatePartForTimeValidation?: boolean;
+}
+export interface TimeValidationProps<TDate> extends ExportedTimeValidationProps<TDate>, ValidationProps<TimeValidationError, TDate> {
+}
+export declare type TimeValidationError = 'invalidDate' | 'minTime' | 'maxTime' | 'shouldDisableTime-hours' | 'shouldDisableTime-minutes' | 'shouldDisableTime-seconds' | null;
+export declare const validateTime: Validator<any, TimeValidationProps<any>>;
+export declare const useTimeValidation: <TDate>(props: TimeValidationProps<TDate> & ValidationProps<TimeValidationError, TDate>) => TimeValidationError;

package/internals/hooks/validation/useTimeValidation.js

@@ -0,0 +1,42 @@
+import { createIsAfterIgnoreDatePart } from '../../utils/time-utils';
+import { useValidation } from './useValidation';
+export const validateTime = (utils, value, {
+  minTime,
+  maxTime,
+  shouldDisableTime,
+  disableIgnoringDatePartForTimeValidation
+}) => {
+  const date = utils.date(value);
+  const isAfterComparingFn = createIsAfterIgnoreDatePart(Boolean(disableIgnoringDatePartForTimeValidation), utils);
+
+  if (value === null) {
+    return null;
+  }
+
+  switch (true) {
+    case !utils.isValid(value):
+      return 'invalidDate';
+
+    case Boolean(minTime && isAfterComparingFn(minTime, date)):
+      return 'minTime';
+
+    case Boolean(maxTime && isAfterComparingFn(date, maxTime)):
+      return 'maxTime';
+
+    case Boolean(shouldDisableTime && shouldDisableTime(utils.getHours(date), 'hours')):
+      return 'shouldDisableTime-hours';
+
+    case Boolean(shouldDisableTime && shouldDisableTime(utils.getMinutes(date), 'minutes')):
+      return 'shouldDisableTime-minutes';
+
+    case Boolean(shouldDisableTime && shouldDisableTime(utils.getSeconds(date), 'seconds')):
+      return 'shouldDisableTime-seconds';
+
+    default:
+      return null;
+  }
+};
+
+const isSameTimeError = (a, b) => a === b;
+
+export const useTimeValidation = props => useValidation(props, validateTime, isSameTimeError);

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

@@ -0,0 +1,21 @@
+import { MuiPickersAdapter } from '../../models';
+export interface ValidationProps<TError, TDateValue> {
+    /**
+     * Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).
+     * In case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.
+     * This can be used to render appropriate form error.
+     *
+     * [Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.
+     * @DateIOType
+     *
+     * @param {TError} reason The reason why the current value is not valid.
+     * @param {TDateValue} value The invalid value.
+     */
+    onError?: (reason: TError, value: TDateValue) => void;
+    value: TDateValue;
+}
+declare type InferError<Props> = Props extends ValidationProps<infer TError, any> ? TError : never;
+declare type InferDate<Props> = Props extends ValidationProps<any, infer TDate> ? TDate : never;
+export declare type Validator<TDate, TProps> = (utils: MuiPickersAdapter<TDate>, value: InferDate<TProps>, props: Omit<TProps, 'value'>) => InferError<TProps>;
+export declare function useValidation<TDate, TProps extends ValidationProps<any, any>>(props: TProps, validate: Validator<TDate, TProps>, isSameError: (a: InferError<TProps>, b: InferError<TProps> | null) => boolean): InferError<TProps>;
+export {};

package/internals/hooks/validation/useValidation.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { useUtils } from '../useUtils';
+export function useValidation(props, validate, isSameError) {
+  const {
+    value,
+    onError
+  } = props;
+  const utils = useUtils();
+  const previousValidationErrorRef = React.useRef(null);
+  const validationError = validate(utils, value, props);
+  React.useEffect(() => {
+    if (onError && !isSameError(validationError, previousValidationErrorRef.current)) {
+      onError(validationError, value);
+    }
+
+    previousValidationErrorRef.current = validationError;
+  }, [isSameError, onError, previousValidationErrorRef, validationError, value]);
+  return validationError;
+}

package/internals/index.d.ts

@@ -0,0 +1,40 @@
+export { DesktopTooltipWrapper } from './components/wrappers/DesktopTooltipWrapper';
+export type { DesktopWrapperProps } from './components/wrappers/DesktopWrapper';
+export { MobileWrapper } from './components/wrappers/MobileWrapper';
+export type { MobileWrapperProps } from './components/wrappers/MobileWrapper';
+export { MobileKeyboardInputView } from './components/CalendarOrClockPicker/CalendarOrClockPicker';
+export { PickersArrowSwitcher } from './components/PickersArrowSwitcher';
+export type { ExportedArrowSwitcherProps } from './components/PickersArrowSwitcher';
+export { PickerStaticWrapper } from './components/PickerStaticWrapper/PickerStaticWrapper';
+export type { PickerStaticWrapperProps } from './components/PickerStaticWrapper/PickerStaticWrapper';
+export { PickersToolbar } from './components/PickersToolbar';
+export { PickersToolbarButton } from './components/PickersToolbarButton';
+export type { DateInputProps, ExportedDateInputProps, MuiTextFieldProps, } from './components/PureDateInput';
+export { ResponsiveTooltipWrapper } from './components/wrappers/ResponsiveWrapper';
+export type { ResponsiveWrapperProps } from './components/wrappers/ResponsiveWrapper';
+export type { DateInputPropsLike } from './components/wrappers/WrapperProps';
+export { WrapperVariantContext } from './components/wrappers/WrapperVariantContext';
+export type { WrapperVariant } from './components/wrappers/WrapperVariantContext';
+export { DAY_MARGIN } from './constants/dimensions';
+export { useMaskedInput } from './hooks/useMaskedInput';
+export { usePickerState } from './hooks/usePickerState';
+export type { PickerStateValueManager, PickerSelectionState } from './hooks/usePickerState';
+export { useDefaultDates, useUtils } from './hooks/useUtils';
+export { useValidation } from './hooks/validation/useValidation';
+export type { ValidationProps, Validator } from './hooks/validation/useValidation';
+export { validateDate } from './hooks/validation/useDateValidation';
+export type { DateValidationProps, DateValidationError, ExportedDateValidationProps, } from './hooks/validation/useDateValidation';
+export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
+export type { BasePickerProps } from './models/props/basePickerProps';
+export type { BaseToolbarProps } from './models/props/baseToolbarProps';
+export type { ParseableDate } from './models/parseableDate';
+export type { MuiPickersAdapter } from './models/muiPickersAdapter';
+export { executeInTheNextEventLoopTick } from './utils/utils';
+export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
+export { PickersCalendarHeader } from '../CalendarPicker/PickersCalendarHeader';
+export type { ExportedCalendarHeaderProps } from '../CalendarPicker/PickersCalendarHeader';
+export { DayPicker } from '../CalendarPicker/DayPicker';
+export type { PickersCalendarProps } from '../CalendarPicker/DayPicker';
+export { areDayPropsEqual } from '../PickersDay/PickersDay';
+export type { ExportedCalendarPickerProps } from '../CalendarPicker/CalendarPicker';
+export { useCalendarState } from '../CalendarPicker/useCalendarState';

package/internals/index.js

@@ -0,0 +1,22 @@
+export { DesktopTooltipWrapper } from './components/wrappers/DesktopTooltipWrapper';
+export { MobileWrapper } from './components/wrappers/MobileWrapper';
+export { MobileKeyboardInputView } from './components/CalendarOrClockPicker/CalendarOrClockPicker';
+export { PickersArrowSwitcher } from './components/PickersArrowSwitcher';
+export { PickerStaticWrapper } from './components/PickerStaticWrapper/PickerStaticWrapper';
+export { PickersToolbar } from './components/PickersToolbar';
+export { PickersToolbarButton } from './components/PickersToolbarButton';
+export { ResponsiveTooltipWrapper } from './components/wrappers/ResponsiveWrapper';
+export { WrapperVariantContext } from './components/wrappers/WrapperVariantContext';
+export { DAY_MARGIN } from './constants/dimensions';
+export { useMaskedInput } from './hooks/useMaskedInput';
+export { usePickerState } from './hooks/usePickerState';
+export { useDefaultDates, useUtils } from './hooks/useUtils';
+export { useValidation } from './hooks/validation/useValidation';
+export { validateDate } from './hooks/validation/useDateValidation';
+export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
+export { executeInTheNextEventLoopTick } from './utils/utils';
+export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
+export { PickersCalendarHeader } from '../CalendarPicker/PickersCalendarHeader';
+export { DayPicker } from '../CalendarPicker/DayPicker';
+export { areDayPropsEqual } from '../PickersDay/PickersDay';
+export { useCalendarState } from '../CalendarPicker/useCalendarState';

package/internals/models/helpers.d.ts

@@ -0,0 +1,9 @@
+/**
+ * All standard components exposed by `material-ui` are `StyledComponents` with
+ * certain `classes`, on which one can also set a top-level `className` and inline
+ * `style`.
+ */
+export declare type ExtendMui<C, Removals extends keyof C = never> = Omit<C, 'classes' | 'theme' | Removals>;
+export declare type MakeOptional<T, K extends keyof T> = {
+    [P in K]?: T[P] | undefined;
+} & Omit<T, K>;

package/internals/models/helpers.js

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

package/internals/models/index.d.ts

@@ -0,0 +1,2 @@
+export * from './views';
+export * from './muiPickersAdapter';

package/internals/models/index.js

@@ -0,0 +1,2 @@
+export * from './views';
+export * from './muiPickersAdapter';

package/internals/models/muiPickersAdapter.d.ts

@@ -0,0 +1,2 @@
+import { IUtils } from '@date-io/core/IUtils';
+export declare type MuiPickersAdapter<TDate> = IUtils<TDate>;

package/internals/models/muiPickersAdapter.js

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

package/internals/models/parseableDate.d.ts

@@ -0,0 +1 @@
+export declare type ParseableDate<TDate> = string | number | Date | null | undefined | TDate;

package/internals/models/parseableDate.js

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

package/internals/models/props/basePickerProps.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { BaseToolbarProps } from './baseToolbarProps';
+export interface BasePickerProps<TInputValue, TDateValue> {
+    /**
+     * className applied to the root component.
+     */
+    className?: string;
+    /**
+     * If `true` the popup or dialog will immediately close after submitting full date.
+     * @default `true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+     */
+    disableCloseOnSelect?: boolean;
+    /**
+     * If `true`, the picker and text field are disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Format string.
+     */
+    inputFormat?: string;
+    /**
+     * Callback fired when date is accepted @DateIOType.
+     * @param {TDateValue} date The date that was just accepted.
+     */
+    onAccept?: (date: TDateValue) => void;
+    /**
+     * Callback fired when the value (the selected date) changes @DateIOType.
+     * @param {DateRange<TDate>} date The new parsed date.
+     * @param {string} keyboardInputValue The current value of the keyboard input.
+     */
+    onChange: (date: TDateValue, keyboardInputValue?: string) => void;
+    /**
+     * 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;
+    /**
+     * Force rendering in particular orientation.
+     */
+    orientation?: 'portrait' | 'landscape';
+    /**
+     * Control the popup or dialog open state.
+     */
+    open?: boolean;
+    /**
+     * Make picker read only.
+     */
+    readOnly?: boolean;
+    /**
+     * If `true`, show the toolbar even in desktop mode.
+     */
+    showToolbar?: boolean;
+    /**
+     * Component that will replace default toolbar renderer.
+     */
+    ToolbarComponent?: React.JSXElementConstructor<BaseToolbarProps<TDateValue>>;
+    /**
+     * Date format, that is displaying in toolbar.
+     */
+    toolbarFormat?: string;
+    /**
+     * Mobile picker date value placeholder, displaying if `value` === `null`.
+     * @default '–'
+     */
+    toolbarPlaceholder?: React.ReactNode;
+    /**
+     * Prop forwarded to the ToolbarComponent.
+     */
+    toolbarTitle?: React.ReactNode;
+    /**
+     * The value of the picker.
+     */
+    value: TInputValue;
+}

package/internals/models/props/basePickerProps.js

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

package/internals/models/props/baseToolbarProps.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { CalendarOrClockPickerView } from '../views';
+import type { PickerOnChangeFn } from '../../hooks/useViews';
+import type { ExportedCalendarPickerProps } from '../../../CalendarPicker/CalendarPicker';
+import type { ExportedClockPickerProps } from '../../../ClockPicker/ClockPicker';
+export interface BaseToolbarProps<TDate> extends ExportedCalendarPickerProps<TDate>, ExportedClockPickerProps<TDate> {
+    ampmInClock?: boolean;
+    date: TDate;
+    dateRangeIcon?: React.ReactNode;
+    getMobileKeyboardInputViewButtonText?: () => string;
+    hideTabs?: boolean;
+    isLandscape: boolean;
+    isMobileKeyboardViewOpen: boolean;
+    onChange: PickerOnChangeFn<TDate>;
+    openView: CalendarOrClockPickerView;
+    setOpenView: (view: CalendarOrClockPickerView) => void;
+    timeIcon?: React.ReactNode;
+    toggleMobileKeyboardView: () => void;
+    toolbarFormat?: string;
+    toolbarPlaceholder?: React.ReactNode;
+    toolbarTitle?: React.ReactNode;
+    views: readonly CalendarOrClockPickerView[];
+}

package/internals/models/props/baseToolbarProps.js

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

package/internals/models/views.d.ts

@@ -0,0 +1,3 @@
+export declare type CalendarPickerView = 'year' | 'day' | 'month';
+export declare type ClockPickerView = 'hours' | 'minutes' | 'seconds';
+export declare type CalendarOrClockPickerView = CalendarPickerView | ClockPickerView;

package/internals/models/views.js

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

package/internals/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/internals/index.js",
+  "types": "./index.d.ts"
+}

package/internals/utils/date-utils.d.ts

@@ -0,0 +1,13 @@
+import { MuiPickersAdapter } from '../models';
+interface FindClosestDateParams<TDate> {
+    date: TDate;
+    disableFuture: boolean;
+    disablePast: boolean;
+    maxDate: TDate;
+    minDate: TDate;
+    shouldDisableDate: (date: TDate) => boolean;
+    utils: MuiPickersAdapter<TDate>;
+}
+export declare const findClosestEnabledDate: <TDate>({ date, disableFuture, disablePast, maxDate, minDate, shouldDisableDate, utils, }: FindClosestDateParams<TDate>) => TDate;
+export declare const parsePickerInputValue: <TDate>(utils: MuiPickersAdapter<TDate>, value: TDate) => TDate | null;
+export {};

package/internals/utils/date-utils.js

@@ -0,0 +1,67 @@
+export const findClosestEnabledDate = ({
+  date,
+  disableFuture,
+  disablePast,
+  maxDate,
+  minDate,
+  shouldDisableDate,
+  utils
+}) => {
+  const today = utils.startOfDay(utils.date());
+
+  if (disablePast && utils.isBefore(minDate, today)) {
+    minDate = today;
+  }
+
+  if (disableFuture && utils.isAfter(maxDate, today)) {
+    maxDate = today;
+  }
+
+  let forward = date;
+  let backward = date;
+
+  if (utils.isBefore(date, minDate)) {
+    forward = utils.date(minDate);
+    backward = null;
+  }
+
+  if (utils.isAfter(date, maxDate)) {
+    if (backward) {
+      backward = utils.date(maxDate);
+    }
+
+    forward = null;
+  }
+
+  while (forward || backward) {
+    if (forward && utils.isAfter(forward, maxDate)) {
+      forward = null;
+    }
+
+    if (backward && utils.isBefore(backward, minDate)) {
+      backward = null;
+    }
+
+    if (forward) {
+      if (!shouldDisableDate(forward)) {
+        return forward;
+      }
+
+      forward = utils.addDays(forward, 1);
+    }
+
+    if (backward) {
+      if (!shouldDisableDate(backward)) {
+        return backward;
+      }
+
+      backward = utils.addDays(backward, -1);
+    }
+  }
+
+  return today;
+};
+export const parsePickerInputValue = (utils, value) => {
+  const parsedValue = utils.date(value);
+  return utils.isValid(parsedValue) ? parsedValue : null;
+};

package/internals/utils/defaultReduceAnimations.d.ts

@@ -0,0 +1 @@
+export declare const defaultReduceAnimations: boolean;

package/internals/utils/defaultReduceAnimations.js

@@ -0,0 +1 @@
+export const defaultReduceAnimations = typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent);

package/internals/utils/text-field-helper.d.ts

@@ -0,0 +1,11 @@
+import { ParseableDate } from '../models/parseableDate';
+import { MuiPickersAdapter } from '../models';
+export declare function getTextFieldAriaText<TDate>(rawValue: ParseableDate<TDate>, utils: MuiPickersAdapter<TDate>): string;
+export declare const getDisplayDate: <TDate>(utils: MuiPickersAdapter<TDate>, value: ParseableDate<TDate>, inputFormat: string) => string;
+export declare function pick12hOr24hFormat(userFormat: string | undefined, ampm: boolean | undefined, formats: {
+    localized: string;
+    '12h': string;
+    '24h': string;
+}): string;
+export declare function checkMaskIsValidForCurrentFormat(mask: string, format: string, acceptRegex: RegExp, utils: MuiPickersAdapter<any>): boolean;
+export declare const maskedDateFormatter: (mask: string, acceptRegexp: RegExp) => (value: string) => string;

package/internals/utils/text-field-helper.js

@@ -0,0 +1,66 @@
+export function getTextFieldAriaText(rawValue, utils) {
+  // TODO: should `isValid` narrow `TDate | null` to `NonNullable<TDate>`?
+  // Either we allow `TDate | null` to be valid and guard against calling `formatByString` with `null`.
+  // Or we ensure `formatByString` is callable with `null`.
+  return rawValue && utils.isValid(utils.date(rawValue)) ? `Choose date, selected date is ${utils.format(utils.date(rawValue), 'fullDate')}` : 'Choose date';
+}
+export const getDisplayDate = (utils, value, inputFormat) => {
+  const date = utils.date(value);
+  const isEmpty = value === null;
+
+  if (isEmpty) {
+    return '';
+  }
+
+  return utils.isValid(date) ? utils.formatByString( // TODO: should `isValid` narrow `TDate | null` to `NonNullable<TDate>`?
+  // Either we allow `TDate | null` to be valid and guard against calling `formatByString` with `null`.
+  // Or we ensure `formatByString` is callable with `null`.
+  date, inputFormat) : '';
+};
+export function pick12hOr24hFormat(userFormat, ampm, formats) {
+  if (userFormat) {
+    return userFormat;
+  }
+
+  if (typeof ampm === 'undefined') {
+    return formats.localized;
+  }
+
+  return ampm ? formats['12h'] : formats['24h'];
+}
+const MASK_USER_INPUT_SYMBOL = '_';
+const staticDateWith2DigitTokens = '2019-11-21T22:30:00.000';
+const staticDateWith1DigitTokens = '2019-01-01T09:00:00.000';
+export function checkMaskIsValidForCurrentFormat(mask, format, acceptRegex, utils) {
+  const formattedDateWith1Digit = utils.formatByString(utils.date(staticDateWith1DigitTokens), format);
+  const inferredFormatPatternWith1Digits = formattedDateWith1Digit.replace(acceptRegex, MASK_USER_INPUT_SYMBOL);
+  const inferredFormatPatternWith2Digits = utils.formatByString(utils.date(staticDateWith2DigitTokens), format).replace(acceptRegex, '_');
+  const isMaskValid = inferredFormatPatternWith2Digits === mask && inferredFormatPatternWith1Digits === mask;
+
+  if (!isMaskValid && utils.lib !== 'luxon' && process.env.NODE_ENV !== 'production') {
+    console.warn(`The mask "${mask}" you passed is not valid for the format used ${format}. Falling down to uncontrolled not-masked input.`);
+  }
+
+  return isMaskValid;
+}
+export const maskedDateFormatter = (mask, acceptRegexp) => value => {
+  return value.split('').map((char, i) => {
+    acceptRegexp.lastIndex = 0;
+
+    if (i > mask.length - 1) {
+      return '';
+    }
+
+    const maskChar = mask[i];
+    const nextMaskChar = mask[i + 1];
+    const acceptedChar = acceptRegexp.test(char) ? char : '';
+    const formattedChar = maskChar === MASK_USER_INPUT_SYMBOL ? acceptedChar : maskChar + acceptedChar;
+
+    if (i === value.length - 1 && nextMaskChar && nextMaskChar !== MASK_USER_INPUT_SYMBOL) {
+      // when cursor at the end of mask part (e.g. month) prerender next symbol "21" -> "21/"
+      return formattedChar ? formattedChar + nextMaskChar : '';
+    }
+
+    return formattedChar;
+  }).join('');
+};

package/internals/utils/time-utils.d.ts

@@ -0,0 +1,8 @@
+import { MuiPickersAdapter } from '../models';
+declare type Meridiem = 'am' | 'pm' | null;
+export declare const getMeridiem: <TDate>(date: TDate, utils: MuiPickersAdapter<TDate>) => Meridiem;
+export declare const convertValueToMeridiem: (value: number, meridiem: Meridiem, ampm: boolean) => number;
+export declare const convertToMeridiem: <TDate>(time: TDate, meridiem: 'am' | 'pm', ampm: boolean, utils: MuiPickersAdapter<TDate>) => TDate;
+export declare const getSecondsInDay: <TDate>(date: TDate, utils: MuiPickersAdapter<TDate>) => number;
+export declare const createIsAfterIgnoreDatePart: <TDate>(disableIgnoringDatePartForTimeValidation: boolean, utils: MuiPickersAdapter<TDate>) => (dateLeft: TDate, dateRight: TDate) => boolean;
+export {};