@mui/lab 5.0.0-alpha.75 → 5.0.0-alpha.76

package/DatePicker/DatePickerToolbar.js

@@ -1,82 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["date", "isLandscape", "isMobileKeyboardViewOpen", "onChange", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/base';
-import PickersToolbar from '../internal/pickers/PickersToolbar';
-import { useUtils } from '../internal/pickers/hooks/useUtils';
-import { isYearAndMonthViews, isYearOnlyView } from './shared';
-import { jsx as _jsx } from "react/jsx-runtime";
-const classes = generateUtilityClasses('PrivateDatePickerToolbar', ['penIcon']);
-const DatePickerToolbarRoot = styled(PickersToolbar)({
-  [`& .${classes.penIcon}`]: {
-    position: 'relative',
-    top: 4
-  }
-});
-const DatePickerToolbarTitle = styled(Typography)(({
-  ownerState
-}) => _extends({}, ownerState.isLandscape && {
-  margin: 'auto 16px auto auto'
-}));
-/**
- * @ignore - internal component.
- */
-
-const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(props, ref) {
-  const {
-    date,
-    isLandscape,
-    isMobileKeyboardViewOpen,
-    toggleMobileKeyboardView,
-    toolbarFormat,
-    toolbarPlaceholder = '––',
-    toolbarTitle = 'Select date',
-    views
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
-  const utils = useUtils();
-  const dateText = React.useMemo(() => {
-    if (!date) {
-      return toolbarPlaceholder;
-    }
-
-    if (toolbarFormat) {
-      return utils.formatByString(date, toolbarFormat);
-    }
-
-    if (isYearOnlyView(views)) {
-      return utils.format(date, 'year');
-    }
-
-    if (isYearAndMonthViews(views)) {
-      return utils.format(date, 'month');
-    } // Little localization hack (Google is doing the same for android native pickers):
-    // For english localization it is convenient to include weekday into the date "Mon, Jun 1".
-    // For other locales using strings like "June 1", without weekday.
-
-
-    return /en/.test(utils.getCurrentLocaleCode()) ? utils.format(date, 'normalDateWithWeekday') : utils.format(date, 'normalDate');
-  }, [date, toolbarFormat, toolbarPlaceholder, utils, views]);
-  const ownerState = props;
-  return /*#__PURE__*/_jsx(DatePickerToolbarRoot, _extends({
-    ref: ref,
-    toolbarTitle: toolbarTitle,
-    isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
-    toggleMobileKeyboardView: toggleMobileKeyboardView,
-    isLandscape: isLandscape,
-    penIconClassName: classes.penIcon,
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {
-      variant: "h4",
-      align: isLandscape ? 'left' : 'center',
-      ownerState: ownerState,
-      children: dateText
-    })
-  }));
-});
-export default DatePickerToolbar;

package/DatePicker/shared.d.ts

@@ -1,45 +0,0 @@
-/// <reference types="react" />
-import { ParseableDate } from '../internal/pickers/constants/prop-types';
-import { OverrideParseableDateProps } from '../internal/pickers/hooks/date-helpers-hooks';
-import { CalendarPickerView } from '../CalendarPicker';
-import { ExportedCalendarPickerProps } from '../CalendarPicker/CalendarPicker';
-import { DateValidationError, ValidationProps } from '../internal/pickers/hooks/useValidation';
-import { ExportedDateInputProps } from '../internal/pickers/PureDateInput';
-import { BasePickerProps, ToolbarComponentProps } from '../internal/pickers/typings/BasePicker';
-export declare type DatePickerView = 'year' | 'day' | 'month';
-export interface BaseDatePickerProps<TDate> extends ExportedCalendarPickerProps<TDate>, BasePickerProps<ParseableDate<TDate>, TDate | null>, ValidationProps<DateValidationError, ParseableDate<TDate>>, ExportedDateInputProps<ParseableDate<TDate>, TDate | null> {
-    /**
-     * The components used for each slot.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    components?: OverrideParseableDateProps<TDate, ExportedCalendarPickerProps<TDate>, 'minDate' | 'maxDate'>['components'] & ExportedDateInputProps<ParseableDate<TDate>, TDate | null>['components'];
-    /**
-     * Callback fired on view change.
-     */
-    onViewChange?: (view: DatePickerView) => void;
-    /**
-     * First view to show.
-     */
-    openTo?: DatePickerView;
-    /**
-     * Component that will replace default toolbar renderer.
-     * @default DatePickerToolbar
-     */
-    ToolbarComponent?: React.JSXElementConstructor<ToolbarComponentProps<TDate | null>>;
-    /**
-     * Mobile picker title, displaying in the toolbar.
-     * @default 'Select date'
-     */
-    toolbarTitle?: React.ReactNode;
-    /**
-     * Array of views to show.
-     */
-    views?: readonly DatePickerView[];
-}
-export declare const isYearOnlyView: (views: readonly CalendarPickerView[]) => views is readonly "year"[];
-export declare const isYearAndMonthViews: (views: readonly CalendarPickerView[]) => views is readonly ("month" | "year")[];
-export declare type DefaultizedProps<Props> = Props & {
-    inputFormat: string;
-};
-export declare function useDatePickerDefaultizedProps<Props extends BaseDatePickerProps<unknown>>({ openTo, views, minDate: minDateProp, maxDate: maxDateProp, ...other }: Props, name: string): DefaultizedProps<Props> & Required<Pick<BaseDatePickerProps<unknown>, 'openTo' | 'views'>>;

package/DatePicker/shared.js

@@ -1,54 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["openTo", "views", "minDate", "maxDate"];
-import { useThemeProps } from '@mui/material/styles';
-import { useDefaultDates, useUtils } from '../internal/pickers/hooks/useUtils';
-export const isYearOnlyView = views => views.length === 1 && views[0] === 'year';
-export const isYearAndMonthViews = views => views.length === 2 && views.indexOf('month') !== -1 && views.indexOf('year') !== -1;
-
-const getFormatAndMaskByViews = (views, utils) => {
-  if (isYearOnlyView(views)) {
-    return {
-      mask: '____',
-      inputFormat: utils.formats.year
-    };
-  }
-
-  if (isYearAndMonthViews(views)) {
-    return {
-      disableMaskedInput: true,
-      inputFormat: utils.formats.monthAndYear
-    };
-  }
-
-  return {
-    mask: '__/__/____',
-    inputFormat: utils.formats.keyboardDate
-  };
-};
-
-export function useDatePickerDefaultizedProps(_ref, name) {
-  let {
-    openTo = 'day',
-    views = ['year', 'day'],
-    minDate: minDateProp,
-    maxDate: maxDateProp
-  } = _ref,
-      other = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  const utils = useUtils();
-  const defaultDates = useDefaultDates();
-  const minDate = minDateProp != null ? minDateProp : defaultDates.minDate;
-  const maxDate = maxDateProp != null ? maxDateProp : defaultDates.maxDate; // This is technically unsound if the type parameters appear in optional props.
-  // Optional props can be filled by `useThemeProps` with types that don't match the type parameters.
-
-  return useThemeProps({
-    props: _extends({
-      views,
-      openTo,
-      minDate,
-      maxDate
-    }, getFormatAndMaskByViews(views, utils), other),
-    name
-  });
-}

package/DateRangePicker/DateRangePickerInput.d.ts

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { RangeInput, DateRange, CurrentlySelectingRangeEndProps } from './RangeTypes';
-import { DateRangeValidationError } from '../internal/pickers/date-utils';
-import { DateInputProps, ExportedDateInputProps, MuiTextFieldProps } from '../internal/pickers/PureDateInput';
-export interface ExportedDateRangePickerInputProps extends Omit<ExportedDateInputProps<RangeInput<any>, DateRange<any>>, 'renderInput'> {
-    /**
-     * The `renderInput` prop allows you to customize the rendered input.
-     * The `startProps` and `endProps` arguments of this render prop contains props of [TextField](https://mui.com/api/text-field/#textfield-api),
-     * that you need to forward to the range start/end inputs respectively.
-     * Pay specific attention to the `ref` and `inputProps` keys.
-     * @example
-     * ```jsx
-     * <DateRangePicker
-     *  renderInput={(startProps, endProps) => (
-     *   <React.Fragment>
-     *     <TextField {...startProps} />
-     *     <Box sx={{ mx: 2 }}> to </Box>
-     *     <TextField {...endProps} />
-     *   </React.Fragment>;
-     *  )}
-     * />
-     * ````
-     */
-    renderInput: (startProps: MuiTextFieldProps, endProps: MuiTextFieldProps) => React.ReactElement;
-}
-export interface DateRangeInputProps extends ExportedDateRangePickerInputProps, CurrentlySelectingRangeEndProps, Omit<DateInputProps<RangeInput<any>, DateRange<any>>, 'validationError' | 'renderInput'> {
-    startText: React.ReactNode;
-    endText: React.ReactNode;
-    validationError: DateRangeValidationError;
-}
-/**
- * @ignore - internal component.
- */
-declare const DateRangePickerInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLDivElement>>;
-export default DateRangePickerInput;

package/DateRangePicker/DateRangePickerInput.js

@@ -1,132 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["currentlySelectingRangeEnd", "disableOpenPicker", "endText", "onBlur", "onChange", "open", "openPicker", "rawValue", "rawValue", "readOnly", "renderInput", "setCurrentlySelectingRangeEnd", "startText", "TextFieldProps", "validationError"];
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import { useUtils } from '../internal/pickers/hooks/useUtils';
-import { useMaskedInput } from '../internal/pickers/hooks/useMaskedInput';
-import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
-import { executeInTheNextEventLoopTick } from '../internal/pickers/utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const DateRangePickerInputRoot = styled('div')(({
-  theme
-}) => ({
-  display: 'flex',
-  alignItems: 'baseline',
-  [theme.breakpoints.down('xs')]: {
-    flexDirection: 'column',
-    alignItems: 'center'
-  }
-}));
-
-/**
- * @ignore - internal component.
- */
-const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateRangePickerInput(props, ref) {
-  const {
-    currentlySelectingRangeEnd,
-    disableOpenPicker,
-    endText,
-    onBlur,
-    onChange,
-    open,
-    openPicker,
-    rawValue: [start, end],
-    readOnly,
-    renderInput,
-    setCurrentlySelectingRangeEnd,
-    startText,
-    TextFieldProps,
-    validationError: [startValidationError, endValidationError]
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
-  const utils = useUtils();
-  const startRef = React.useRef(null);
-  const endRef = React.useRef(null);
-  const wrapperVariant = React.useContext(WrapperVariantContext);
-  React.useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    if (currentlySelectingRangeEnd === 'start') {
-      var _startRef$current;
-
-      (_startRef$current = startRef.current) == null ? void 0 : _startRef$current.focus();
-    } else if (currentlySelectingRangeEnd === 'end') {
-      var _endRef$current;
-
-      (_endRef$current = endRef.current) == null ? void 0 : _endRef$current.focus();
-    }
-  }, [currentlySelectingRangeEnd, open]); // TODO: rethink this approach. We do not need to wait for calendar to be updated to rerender input (looks like freezing)
-  // TODO: so simply break 1 react's commit phase in 2 (first for input and second for calendars) by executing onChange in the next tick
-
-  const lazyHandleChangeCallback = React.useCallback((...args) => executeInTheNextEventLoopTick(() => onChange(...args)), [onChange]);
-
-  const handleStartChange = (date, inputString) => {
-    lazyHandleChangeCallback([date, utils.date(end)], inputString);
-  };
-
-  const handleEndChange = (date, inputString) => {
-    lazyHandleChangeCallback([utils.date(start), date], inputString);
-  };
-
-  const openRangeStartSelection = () => {
-    if (setCurrentlySelectingRangeEnd) {
-      setCurrentlySelectingRangeEnd('start');
-    }
-
-    if (!readOnly && !disableOpenPicker) {
-      openPicker();
-    }
-  };
-
-  const openRangeEndSelection = () => {
-    if (setCurrentlySelectingRangeEnd) {
-      setCurrentlySelectingRangeEnd('end');
-    }
-
-    if (!readOnly && !disableOpenPicker) {
-      openPicker();
-    }
-  };
-
-  const openOnFocus = wrapperVariant === 'desktop';
-  const startInputProps = useMaskedInput(_extends({}, other, {
-    readOnly,
-    rawValue: start,
-    onChange: handleStartChange,
-    label: startText,
-    validationError: startValidationError !== null,
-    TextFieldProps: _extends({}, TextFieldProps, {
-      ref: startRef,
-      focused: open && currentlySelectingRangeEnd === 'start'
-    }),
-    inputProps: {
-      onClick: !openOnFocus ? openRangeStartSelection : undefined,
-      onFocus: openOnFocus ? openRangeStartSelection : undefined
-    }
-  }));
-  const endInputProps = useMaskedInput(_extends({}, other, {
-    readOnly,
-    label: endText,
-    rawValue: end,
-    onChange: handleEndChange,
-    validationError: endValidationError !== null,
-    TextFieldProps: _extends({}, TextFieldProps, {
-      ref: endRef,
-      focused: open && currentlySelectingRangeEnd === 'end'
-    }),
-    inputProps: {
-      onClick: !openOnFocus ? openRangeEndSelection : undefined,
-      onFocus: openOnFocus ? openRangeEndSelection : undefined
-    }
-  }));
-  return /*#__PURE__*/_jsx(DateRangePickerInputRoot, {
-    onBlur: onBlur,
-    ref: ref,
-    children: renderInput(startInputProps, endInputProps)
-  });
-});
-export default DateRangePickerInput;

package/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker';
-import { DateRange, CurrentlySelectingRangeEndProps } from './RangeTypes';
-interface DateRangePickerToolbarProps extends CurrentlySelectingRangeEndProps, Pick<ToolbarComponentProps, 'isMobileKeyboardViewOpen' | 'toggleMobileKeyboardView' | 'toolbarTitle' | 'toolbarFormat'> {
-    date: DateRange<unknown>;
-    startText: React.ReactNode;
-    endText: React.ReactNode;
-    currentlySelectingRangeEnd: 'start' | 'end';
-    setCurrentlySelectingRangeEnd: (newSelectingEnd: 'start' | 'end') => void;
-}
-/**
- * @ignore - internal component.
- */
-declare const DateRangePickerToolbar: ({ currentlySelectingRangeEnd, date: [start, end], endText, isMobileKeyboardViewOpen, setCurrentlySelectingRangeEnd, startText, toggleMobileKeyboardView, toolbarFormat, toolbarTitle, }: DateRangePickerToolbarProps) => JSX.Element;
-export default DateRangePickerToolbar;

package/DateRangePicker/DateRangePickerToolbar.js

@@ -1,65 +0,0 @@
-var _Typography;
-
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/base';
-import PickersToolbar from '../internal/pickers/PickersToolbar';
-import { useUtils } from '../internal/pickers/hooks/useUtils';
-import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const classes = generateUtilityClasses('PrivateDateRangePickerToolbar', ['penIcon']);
-const DateRangePickerToolbarRoot = styled(PickersToolbar)({
-  [`& .${classes.penIcon}`]: {
-    position: 'relative',
-    top: 4
-  }
-});
-const DateRangePickerToolbarContainer = styled('div')({
-  display: 'flex'
-});
-/**
- * @ignore - internal component.
- */
-
-const DateRangePickerToolbar = ({
-  currentlySelectingRangeEnd,
-  date: [start, end],
-  endText,
-  isMobileKeyboardViewOpen,
-  setCurrentlySelectingRangeEnd,
-  startText,
-  toggleMobileKeyboardView,
-  toolbarFormat,
-  toolbarTitle = 'Select date range'
-}) => {
-  const utils = useUtils();
-  const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : startText;
-  const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : endText;
-  return /*#__PURE__*/_jsx(DateRangePickerToolbarRoot, {
-    toolbarTitle: toolbarTitle,
-    isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
-    toggleMobileKeyboardView: toggleMobileKeyboardView,
-    isLandscape: false,
-    penIconClassName: classes.penIcon,
-    children: /*#__PURE__*/_jsxs(DateRangePickerToolbarContainer, {
-      children: [/*#__PURE__*/_jsx(PickersToolbarButton, {
-        variant: start !== null ? 'h5' : 'h6',
-        value: startDateValue,
-        selected: currentlySelectingRangeEnd === 'start',
-        onClick: () => setCurrentlySelectingRangeEnd('start')
-      }), _Typography || (_Typography = /*#__PURE__*/_jsxs(Typography, {
-        variant: "h5",
-        children: ["\xA0", '–', "\xA0"]
-      })), /*#__PURE__*/_jsx(PickersToolbarButton, {
-        variant: end !== null ? 'h5' : 'h6',
-        value: endDateValue,
-        selected: currentlySelectingRangeEnd === 'end',
-        onClick: () => setCurrentlySelectingRangeEnd('end')
-      })]
-    })
-  });
-};
-
-export default DateRangePickerToolbar;

package/DateRangePicker/DateRangePickerView.d.ts

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { BasePickerProps } from '../internal/pickers/typings/BasePicker';
-import { WrapperVariant } from '../internal/pickers/wrappers/WrapperVariantContext';
-import { DateRangeInputProps } from './DateRangePickerInput';
-import { DateRange, CurrentlySelectingRangeEndProps, RangeInput } from './RangeTypes';
-import { ExportedCalendarPickerProps } from '../CalendarPicker/CalendarPicker';
-import { ExportedDesktopDateRangeCalendarProps } from './DateRangePickerViewDesktop';
-import { PickerSelectionState } from '../internal/pickers/hooks/usePickerState';
-declare type BaseCalendarPropsToReuse<TDate> = Omit<ExportedCalendarPickerProps<TDate>, 'onYearChange' | 'renderDay'>;
-export interface ExportedDateRangePickerViewProps<TDate> extends BaseCalendarPropsToReuse<TDate>, ExportedDesktopDateRangeCalendarProps<TDate>, Omit<BasePickerProps<RangeInput<TDate>, DateRange<TDate>>, 'value' | 'onChange'> {
-    /**
-     * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
-     * @default false
-     */
-    disableAutoMonthSwitching?: boolean;
-    /**
-     * Mobile picker title, displaying in the toolbar.
-     * @default 'Select date range'
-     */
-    toolbarTitle?: React.ReactNode;
-}
-interface DateRangePickerViewProps<TDate> extends CurrentlySelectingRangeEndProps, ExportedDateRangePickerViewProps<TDate> {
-    calendars: 1 | 2 | 3;
-    open: boolean;
-    startText: React.ReactNode;
-    endText: React.ReactNode;
-    isMobileKeyboardViewOpen: boolean;
-    toggleMobileKeyboardView: () => void;
-    DateInputProps: DateRangeInputProps;
-    date: DateRange<TDate>;
-    onDateChange: (date: DateRange<TDate>, currentWrapperVariant: WrapperVariant, isFinish?: PickerSelectionState) => void;
-}
-/**
- * @ignore - internal component.
- */
-export declare function DateRangePickerView<TDate>(props: DateRangePickerViewProps<TDate>): JSX.Element;
-export declare namespace DateRangePickerView {
-    var propTypes: {
-        calendars: PropTypes.Requireable<number>;
-        disableAutoMonthSwitching: PropTypes.Requireable<boolean>;
-    };
-}
-export {};

package/DateRangePicker/DateRangePickerView.js

@@ -1,177 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["calendars", "className", "currentlySelectingRangeEnd", "date", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "endText", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "setCurrentlySelectingRangeEnd", "shouldDisableDate", "showToolbar", "startText", "toggleMobileKeyboardView", "toolbarFormat", "toolbarTitle"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { isRangeValid } from '../internal/pickers/date-utils';
-import { calculateRangeChange } from './date-range-manager';
-import { useUtils } from '../internal/pickers/hooks/useUtils';
-import DateRangePickerToolbar from './DateRangePickerToolbar';
-import { useCalendarState } from '../CalendarPicker/useCalendarState';
-import { DateRangePickerViewMobile } from './DateRangePickerViewMobile';
-import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
-import { MobileKeyboardInputView } from '../internal/pickers/Picker/Picker';
-import DateRangePickerInput from './DateRangePickerInput';
-import { defaultReduceAnimations } from '../CalendarPicker/CalendarPicker';
-import DateRangePickerViewDesktop from './DateRangePickerViewDesktop';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-
-/**
- * @ignore - internal component.
- */
-export function DateRangePickerView(props) {
-  const {
-    calendars,
-    className,
-    currentlySelectingRangeEnd,
-    date,
-    DateInputProps,
-    defaultCalendarMonth,
-    disableAutoMonthSwitching = false,
-    disableFuture,
-    disableHighlightToday,
-    disablePast,
-    endText,
-    isMobileKeyboardViewOpen,
-    maxDate,
-    minDate,
-    onDateChange,
-    onMonthChange,
-    open,
-    reduceAnimations = defaultReduceAnimations,
-    setCurrentlySelectingRangeEnd,
-    shouldDisableDate,
-    showToolbar,
-    startText,
-    toggleMobileKeyboardView,
-    toolbarFormat,
-    toolbarTitle
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
-  const utils = useUtils();
-  const wrapperVariant = React.useContext(WrapperVariantContext);
-  const [start, end] = date;
-  const {
-    changeMonth,
-    calendarState,
-    isDateDisabled,
-    onMonthSwitchingAnimationEnd,
-    changeFocusedDay
-  } = useCalendarState({
-    date: start || end,
-    defaultCalendarMonth,
-    disableFuture,
-    disablePast,
-    disableSwitchToMonthOnDayFocus: true,
-    maxDate,
-    minDate,
-    onMonthChange,
-    reduceAnimations,
-    shouldDisableDate
-  });
-  const toShowToolbar = showToolbar != null ? showToolbar : wrapperVariant !== 'desktop';
-
-  const scrollToDayIfNeeded = day => {
-    if (!day || !utils.isValid(day) || isDateDisabled(day)) {
-      return;
-    }
-
-    const currentlySelectedDate = currentlySelectingRangeEnd === 'start' ? start : end;
-
-    if (currentlySelectedDate === null) {
-      // do not scroll if one of ages is not selected
-      return;
-    }
-
-    const displayingMonthRange = wrapperVariant === 'mobile' ? 0 : calendars - 1;
-    const currentMonthNumber = utils.getMonth(calendarState.currentMonth);
-    const requestedMonthNumber = utils.getMonth(day);
-
-    if (!utils.isSameYear(calendarState.currentMonth, day) || requestedMonthNumber < currentMonthNumber || requestedMonthNumber > currentMonthNumber + displayingMonthRange) {
-      const newMonth = currentlySelectingRangeEnd === 'start' ? currentlySelectedDate : // If need to focus end, scroll to the state when "end" is displaying in the last calendar
-      utils.addMonths(currentlySelectedDate, -displayingMonthRange);
-      changeMonth(newMonth);
-    }
-  };
-
-  React.useEffect(() => {
-    if (disableAutoMonthSwitching || !open) {
-      return;
-    }
-
-    scrollToDayIfNeeded(currentlySelectingRangeEnd === 'start' ? start : end);
-  }, [currentlySelectingRangeEnd, date]); // eslint-disable-line
-
-  const handleChange = React.useCallback(newDate => {
-    const {
-      nextSelection,
-      newRange
-    } = calculateRangeChange({
-      newDate,
-      utils,
-      range: date,
-      currentlySelectingRangeEnd
-    });
-    setCurrentlySelectingRangeEnd(nextSelection);
-    const isFullRangeSelected = currentlySelectingRangeEnd === 'end' && isRangeValid(utils, newRange);
-    onDateChange(newRange, wrapperVariant, isFullRangeSelected ? 'finish' : 'partial');
-  }, [currentlySelectingRangeEnd, date, onDateChange, setCurrentlySelectingRangeEnd, utils, wrapperVariant]);
-
-  const renderView = () => {
-    const sharedCalendarProps = _extends({
-      date,
-      isDateDisabled,
-      changeFocusedDay,
-      onChange: handleChange,
-      reduceAnimations,
-      disableHighlightToday,
-      onMonthSwitchingAnimationEnd,
-      changeMonth,
-      currentlySelectingRangeEnd,
-      disableFuture,
-      disablePast,
-      minDate,
-      maxDate
-    }, calendarState, other);
-
-    switch (wrapperVariant) {
-      case 'desktop':
-        {
-          return /*#__PURE__*/_jsx(DateRangePickerViewDesktop, _extends({
-            calendars: calendars
-          }, sharedCalendarProps));
-        }
-
-      default:
-        {
-          return /*#__PURE__*/_jsx(DateRangePickerViewMobile, _extends({}, sharedCalendarProps));
-        }
-    }
-  };
-
-  return /*#__PURE__*/_jsxs("div", {
-    className: className,
-    children: [toShowToolbar && /*#__PURE__*/_jsx(DateRangePickerToolbar, {
-      date: date,
-      isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
-      toggleMobileKeyboardView: toggleMobileKeyboardView,
-      currentlySelectingRangeEnd: currentlySelectingRangeEnd,
-      setCurrentlySelectingRangeEnd: setCurrentlySelectingRangeEnd,
-      startText: startText,
-      endText: endText,
-      toolbarTitle: toolbarTitle,
-      toolbarFormat: toolbarFormat
-    }), isMobileKeyboardViewOpen ? /*#__PURE__*/_jsx(MobileKeyboardInputView, {
-      children: /*#__PURE__*/_jsx(DateRangePickerInput, _extends({
-        disableOpenPicker: true,
-        ignoreInvalidInputs: true
-      }, DateInputProps))
-    }) : renderView()]
-  });
-}
-process.env.NODE_ENV !== "production" ? DateRangePickerView.propTypes = {
-  calendars: PropTypes.oneOf([1, 2, 3]),
-  disableAutoMonthSwitching: PropTypes.bool
-} : void 0;