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

package/modern/internal/pickers/date-utils.js

@@ -1,138 +0,0 @@
-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 function parsePickerInputValue(utils, value) {
-  const parsedValue = utils.date(value);
-  return utils.isValid(parsedValue) ? parsedValue : null;
-}
-export function parseRangeInputValue(utils, value = [null, null]) {
-  return value.map(date => !utils.isValid(date) || date === null ? null : utils.startOfDay(utils.date(date)));
-}
-export const isRangeValid = (utils, range) => {
-  return Boolean(range && range[0] && range[1] && !utils.isBefore(range[1], range[0]));
-};
-export const isWithinRange = (utils, day, range) => {
-  return isRangeValid(utils, range) && utils.isWithinRange(day, range);
-};
-export const isStartOfRange = (utils, day, range) => {
-  return isRangeValid(utils, range) && utils.isSameDay(day, range[0]);
-};
-export const isEndOfRange = (utils, day, range) => {
-  return isRangeValid(utils, range) && utils.isSameDay(day, range[1]);
-};
-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;
-  }
-};
-export const validateDateRange = (utils, value, dateValidationProps) => {
-  const [start, end] = value; // for partial input
-
-  if (start === null || end === null) {
-    return [null, null];
-  }
-
-  const dateValidations = [validateDate(utils, start, dateValidationProps), validateDate(utils, end, dateValidationProps)];
-
-  if (dateValidations[0] || dateValidations[1]) {
-    return dateValidations;
-  }
-
-  if (!isRangeValid(utils, [utils.date(start), utils.date(end)])) {
-    return ['invalidRange', 'invalidRange'];
-  }
-
-  return [null, null];
-};

package/modern/internal/pickers/hooks/date-helpers-hooks.js

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { useUtils } from './useUtils';
-import { getMeridiem, convertToMeridiem } from '../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/modern/internal/pickers/hooks/useIsLandscape.js

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { arrayIncludes } from '../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 function 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';
-}
-export default useIsLandscape;

package/modern/internal/pickers/hooks/useMaskedInput.js

@@ -1,93 +0,0 @@
-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';
-import { maskedDateFormatter, getDisplayDate, checkMaskIsValidForCurrentFormat } from '../text-field-helper';
-export function 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 unctrolled `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?.onFocus),
-      onBlur: createDelegatedEventHandler(() => {
-        setIsFocused(false);
-      }, inputProps?.onBlur)
-    })
-  }, TextFieldProps);
-}
-export default useMaskedInput;

package/modern/internal/pickers/hooks/useOpenState.js

@@ -1,38 +0,0 @@
-import * as React from 'react';
-export function 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
-  };
-}
-export default useOpenState;

package/modern/internal/pickers/hooks/usePickerState.js

@@ -1,117 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useOpenState } from './useOpenState';
-import { useUtils } from './useUtils';
-export function 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 ?? 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/modern/internal/pickers/hooks/useUtils.js

@@ -1,25 +0,0 @@
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-import * as React from 'react';
-import { MuiPickersAdapterContext } from '../../../LocalizationProvider'; // Required for babel https://github.com/vercel/next.js/issues/7882. Replace with `export type` in future
-
-function useLocalizationContext() {
-  const localization = React.useContext(MuiPickersAdapterContext);
-
-  if (localization === null) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `Can not find utils in context. It looks like you forgot to wrap your component in LocalizationProvider, or pass dateAdapter prop directly.` : _formatMuiErrorMessage(13));
-  }
-
-  return localization;
-}
-
-export function useUtils() {
-  return useLocalizationContext().utils;
-}
-export function useDefaultDates() {
-  return useLocalizationContext().defaultDates;
-}
-export function useNow() {
-  const utils = useUtils();
-  const now = React.useRef(utils.date());
-  return now.current;
-}

package/modern/internal/pickers/hooks/useValidation.js

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import { useUtils } from './useUtils';
-import { validateDate, validateDateRange } from '../date-utils';
-import { validateDateTime } from '../date-time-utils';
-import { validateTime } from '../time-utils';
-
-function isSameDateOrTimeError(a, b) {
-  return a === b;
-}
-
-function isSameDateRangeError(a, b) {
-  return b !== null && a[1] === b[1] && a[0] === b[0];
-}
-
-function useValidation(props, validate, isSameError = isSameDateOrTimeError) {
-  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;
-}
-
-export function useTimeValidation(props) {
-  return useValidation(props, validateTime, isSameDateOrTimeError);
-}
-export function useDateValidation(props) {
-  return useValidation(props, validateDate, isSameDateOrTimeError);
-}
-export function useDateTimeValidation(props) {
-  return useValidation(props, validateDateTime, isSameDateOrTimeError);
-}
-export function useDateRangeValidation(props) {
-  return useValidation(props, validateDateRange, isSameDateRangeError);
-}

package/modern/internal/pickers/hooks/useViews.js

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import { useControlled } from '@mui/material/utils';
-import { arrayIncludes } from '../utils';
-export function useViews({
-  onChange,
-  onViewChange,
-  openTo,
-  view,
-  views
-}) {
-  const [openView, setOpenView] = useControlled({
-    name: 'Picker',
-    state: 'view',
-    controlled: view,
-    default: openTo && arrayIncludes(views, openTo) ? openTo : views[0]
-  });
-  const previousView = views[views.indexOf(openView) - 1] ?? null;
-  const nextView = views[views.indexOf(openView) + 1] ?? 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/modern/internal/pickers/test-utils.js

@@ -1,91 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["locale"];
-import * as React from 'react';
-import { parseISO } from 'date-fns';
-import { createRenderer, fireEvent, screen } from 'test/utils';
-import AdapterDateFns from '@mui/lab/AdapterDateFns';
-import LocalizationProvider from '@mui/lab/LocalizationProvider'; // TODO make possible to pass here any utils using cli
-
-/**
- * Wrapper around `@date-io/date-fns` that resolves https://github.com/dmtrKovalenko/date-io/issues/479.
- * We're not using `adapter.date` in the implementation which means the implementation is safe.
- * But we do use it in tests where usage of ISO dates without timezone is problematic
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-export class AdapterClassToUse extends AdapterDateFns {
-  constructor(...args) {
-    super(...args);
-
-    this.date = value => {
-      if (typeof value === 'string') {
-        return parseISO(value);
-      }
-
-      if (typeof value === 'undefined') {
-        return new Date();
-      }
-
-      if (value === null) {
-        // @ts-expect-error AdapterDateFns#date says it returns NotNullable but that's not true
-        return null;
-      }
-
-      return new Date(value);
-    };
-  }
-
-}
-export const adapterToUse = new AdapterClassToUse();
-export const FakeTransitionComponent = /*#__PURE__*/React.forwardRef(function FakeTransitionComponent({
-  children
-}, ref) {
-  // set tabIndex in case it is used as a child of <TrapFocus />
-  return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    tabIndex: -1,
-    children: children
-  });
-});
-export function wrapPickerMount(mount) {
-  return node => mount( /*#__PURE__*/_jsx(LocalizationProvider, {
-    dateAdapter: AdapterClassToUse,
-    children: node
-  }));
-}
-export function createPickerRenderer(_ref = {}) {
-  let {
-    locale
-  } = _ref,
-      createRendererOptions = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  const {
-    clock,
-    render: clientRender
-  } = createRenderer(createRendererOptions);
-
-  function Wrapper({
-    children
-  }) {
-    return /*#__PURE__*/_jsx(LocalizationProvider, {
-      locale: locale,
-      dateAdapter: AdapterClassToUse,
-      children: children
-    });
-  }
-
-  return {
-    clock,
-
-    render(node, options) {
-      return clientRender(node, _extends({}, options, {
-        wrapper: Wrapper
-      }));
-    }
-
-  };
-}
-export function openMobilePicker() {
-  fireEvent.click(screen.getByRole('textbox'));
-}