@mui/x-date-pickers 8.0.0-beta.2 → 8.0.0

package/modern/DateCalendar/PickersSlideTransition.js

@@ -1,142 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "reduceAnimations", "slideDirection", "transKey", "classes"];
-import * as React from 'react';
-import clsx from 'clsx';
-import { styled, useTheme, useThemeProps } from '@mui/material/styles';
-import composeClasses from '@mui/utils/composeClasses';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import { getPickersSlideTransitionUtilityClass, pickersSlideTransitionClasses } from "./pickersSlideTransitionClasses.js";
-import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = (classes, ownerState) => {
-  const {
-    slideDirection
-  } = ownerState;
-  const slots = {
-    root: ['root'],
-    exit: ['slideExit'],
-    enterActive: ['slideEnterActive'],
-    enter: [`slideEnter-${slideDirection}`],
-    exitActive: [`slideExitActiveLeft-${slideDirection}`]
-  };
-  return composeClasses(slots, getPickersSlideTransitionUtilityClass, classes);
-};
-const PickersSlideTransitionRoot = styled(TransitionGroup, {
-  name: 'MuiPickersSlideTransition',
-  slot: 'Root',
-  overridesResolver: (_, styles) => [styles.root, {
-    [`.${pickersSlideTransitionClasses['slideEnter-left']}`]: styles['slideEnter-left']
-  }, {
-    [`.${pickersSlideTransitionClasses['slideEnter-right']}`]: styles['slideEnter-right']
-  }, {
-    [`.${pickersSlideTransitionClasses.slideEnterActive}`]: styles.slideEnterActive
-  }, {
-    [`.${pickersSlideTransitionClasses.slideExit}`]: styles.slideExit
-  }, {
-    [`.${pickersSlideTransitionClasses['slideExitActiveLeft-left']}`]: styles['slideExitActiveLeft-left']
-  }, {
-    [`.${pickersSlideTransitionClasses['slideExitActiveLeft-right']}`]: styles['slideExitActiveLeft-right']
-  }]
-})(({
-  theme
-}) => {
-  const slideTransition = theme.transitions.create('transform', {
-    duration: theme.transitions.duration.complex,
-    easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)'
-  });
-  return {
-    display: 'block',
-    position: 'relative',
-    overflowX: 'hidden',
-    '& > *': {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0
-    },
-    [`& .${pickersSlideTransitionClasses['slideEnter-left']}`]: {
-      willChange: 'transform',
-      transform: 'translate(100%)',
-      zIndex: 1
-    },
-    [`& .${pickersSlideTransitionClasses['slideEnter-right']}`]: {
-      willChange: 'transform',
-      transform: 'translate(-100%)',
-      zIndex: 1
-    },
-    [`& .${pickersSlideTransitionClasses.slideEnterActive}`]: {
-      transform: 'translate(0%)',
-      transition: slideTransition
-    },
-    [`& .${pickersSlideTransitionClasses.slideExit}`]: {
-      transform: 'translate(0%)'
-    },
-    [`& .${pickersSlideTransitionClasses['slideExitActiveLeft-left']}`]: {
-      willChange: 'transform',
-      transform: 'translate(-100%)',
-      transition: slideTransition,
-      zIndex: 0
-    },
-    [`& .${pickersSlideTransitionClasses['slideExitActiveLeft-right']}`]: {
-      willChange: 'transform',
-      transform: 'translate(100%)',
-      transition: slideTransition,
-      zIndex: 0
-    }
-  };
-});
-
-/**
- * @ignore - do not document.
- */
-export function PickersSlideTransition(inProps) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiPickersSlideTransition'
-  });
-  const {
-      children,
-      className,
-      reduceAnimations,
-      slideDirection,
-      transKey,
-      classes: classesProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    ownerState: pickerOwnerState
-  } = usePickerPrivateContext();
-  const ownerState = _extends({}, pickerOwnerState, {
-    slideDirection
-  });
-  const classes = useUtilityClasses(classesProp, ownerState);
-  const theme = useTheme();
-  if (reduceAnimations) {
-    return /*#__PURE__*/_jsx("div", {
-      className: clsx(classes.root, className),
-      children: children
-    });
-  }
-  const transitionClasses = {
-    exit: classes.exit,
-    enterActive: classes.enterActive,
-    enter: classes.enter,
-    exitActive: classes.exitActive
-  };
-  return /*#__PURE__*/_jsx(PickersSlideTransitionRoot, {
-    className: clsx(classes.root, className),
-    childFactory: element => /*#__PURE__*/React.cloneElement(element, {
-      classNames: transitionClasses
-    }),
-    role: "presentation",
-    children: /*#__PURE__*/_jsx(CSSTransition, _extends({
-      mountOnEnter: true,
-      unmountOnExit: true,
-      timeout: theme.transitions.duration.complex,
-      classNames: transitionClasses
-    }, other, {
-      children: children
-    }), transKey)
-  });
-}

package/modern/DateCalendar/dateCalendarClasses.d.ts

@@ -1,9 +0,0 @@
-export interface DateCalendarClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /** Styles applied to the transition group element. */
-  viewTransitionContainer: string;
-}
-export type DateCalendarClassKey = keyof DateCalendarClasses;
-export declare const getDateCalendarUtilityClass: (slot: string) => string;
-export declare const dateCalendarClasses: DateCalendarClasses;

package/modern/DateCalendar/dateCalendarClasses.js

@@ -1,3 +0,0 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-export const getDateCalendarUtilityClass = slot => generateUtilityClass('MuiDateCalendar', slot);
-export const dateCalendarClasses = generateUtilityClasses('MuiDateCalendar', ['root', 'viewTransitionContainer']);

package/modern/DateCalendar/dayCalendarClasses.d.ts

@@ -1,23 +0,0 @@
-export interface DayCalendarClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /** Styles applied to the header element. */
-  header: string;
-  /** Styles applied to the week day label element. */
-  weekDayLabel: string;
-  /** Styles applied to the loading container element. */
-  loadingContainer: string;
-  /** Styles applied to the slide transition element. */
-  slideTransition: string;
-  /** Styles applied to the month container element. */
-  monthContainer: string;
-  /** Styles applied to the week container element. */
-  weekContainer: string;
-  /** Styles applied to the week number header */
-  weekNumberLabel: string;
-  /** Styles applied to the week number element */
-  weekNumber: string;
-}
-export type DayCalendarClassKey = keyof DayCalendarClasses;
-export declare const getDayCalendarUtilityClass: (slot: string) => string;
-export declare const dayCalendarClasses: DayCalendarClasses;

package/modern/DateCalendar/dayCalendarClasses.js

@@ -1,3 +0,0 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-export const getDayCalendarUtilityClass = slot => generateUtilityClass('MuiDayCalendar', slot);
-export const dayCalendarClasses = generateUtilityClasses('MuiDayCalendar', ['root', 'header', 'weekDayLabel', 'loadingContainer', 'slideTransition', 'monthContainer', 'weekContainer', 'weekNumberLabel', 'weekNumber']);

package/modern/DateCalendar/index.d.ts

@@ -1,12 +0,0 @@
-export { DateCalendar } from "./DateCalendar.js";
-export type { DateCalendarProps, DateCalendarSlots, DateCalendarSlotProps } from './DateCalendar.types';
-export { getDateCalendarUtilityClass, dateCalendarClasses } from "./dateCalendarClasses.js";
-export type { DateCalendarClassKey, DateCalendarClasses } from './dateCalendarClasses';
-export { dayCalendarClasses } from "./dayCalendarClasses.js";
-export type { DayCalendarClassKey, DayCalendarClasses } from './dayCalendarClasses';
-export type { PickersFadeTransitionGroupProps } from './PickersFadeTransitionGroup';
-export { pickersFadeTransitionGroupClasses } from "./pickersFadeTransitionGroupClasses.js";
-export type { PickersFadeTransitionGroupClassKey, PickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
-export { pickersSlideTransitionClasses } from "./pickersSlideTransitionClasses.js";
-export type { PickersSlideTransitionClassKey, PickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
-export type { ExportedSlideTransitionProps } from './PickersSlideTransition';

package/modern/DateCalendar/index.js

@@ -1,5 +0,0 @@
-export { DateCalendar } from "./DateCalendar.js";
-export { getDateCalendarUtilityClass, dateCalendarClasses } from "./dateCalendarClasses.js";
-export { dayCalendarClasses } from "./dayCalendarClasses.js";
-export { pickersFadeTransitionGroupClasses } from "./pickersFadeTransitionGroupClasses.js";
-export { pickersSlideTransitionClasses } from "./pickersSlideTransitionClasses.js";

package/modern/DateCalendar/pickersFadeTransitionGroupClasses.d.ts

@@ -1,7 +0,0 @@
-export interface PickersFadeTransitionGroupClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
-export type PickersFadeTransitionGroupClassKey = keyof PickersFadeTransitionGroupClasses;
-export declare const getPickersFadeTransitionGroupUtilityClass: (slot: string) => string;
-export declare const pickersFadeTransitionGroupClasses: PickersFadeTransitionGroupClasses;

package/modern/DateCalendar/pickersFadeTransitionGroupClasses.js

@@ -1,3 +0,0 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-export const getPickersFadeTransitionGroupUtilityClass = slot => generateUtilityClass('MuiPickersFadeTransitionGroup', slot);
-export const pickersFadeTransitionGroupClasses = generateUtilityClasses('MuiPickersFadeTransitionGroup', ['root']);

package/modern/DateCalendar/pickersSlideTransitionClasses.d.ts

@@ -1,19 +0,0 @@
-export interface PickersSlideTransitionClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /** Styles applied to content element sliding in from left. */
-  'slideEnter-left': string;
-  /** Styles applied to content element sliding in from right. */
-  'slideEnter-right': string;
-  /** Styles applied to the element entering (transitioning into) the container. */
-  slideEnterActive: string;
-  /** Styles applied to the element leaving (transitioning out of) the container. */
-  slideExit: string;
-  /** Styles applied to the element on the left leaving (transitioning out of) the container. */
-  'slideExitActiveLeft-left': string;
-  /** Styles applied to the element on the right leaving (transitioning out of) the container. */
-  'slideExitActiveLeft-right': string;
-}
-export type PickersSlideTransitionClassKey = keyof PickersSlideTransitionClasses;
-export declare const getPickersSlideTransitionUtilityClass: (slot: string) => string;
-export declare const pickersSlideTransitionClasses: PickersSlideTransitionClasses;

package/modern/DateCalendar/pickersSlideTransitionClasses.js

@@ -1,3 +0,0 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-export const getPickersSlideTransitionUtilityClass = slot => generateUtilityClass('MuiPickersSlideTransition', slot);
-export const pickersSlideTransitionClasses = generateUtilityClasses('MuiPickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);

package/modern/DateCalendar/useCalendarState.d.ts

@@ -1,27 +0,0 @@
-import { SlideDirection } from "./PickersSlideTransition.js";
-import { PickersTimezone, PickerValidDate } from "../models/index.js";
-import { DateCalendarDefaultizedProps } from "./DateCalendar.types.js";
-interface CalendarState {
-  currentMonth: PickerValidDate;
-  focusedDay: PickerValidDate | null;
-  isMonthSwitchingAnimating: boolean;
-  slideDirection: SlideDirection;
-}
-interface UseCalendarStateParameters extends Pick<DateCalendarDefaultizedProps, 'referenceDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'onYearChange' | 'reduceAnimations' | 'shouldDisableDate'> {
-  value: PickerValidDate | null;
-  timezone: PickersTimezone;
-  getCurrentMonthFromVisibleDate: (focusedDay: PickerValidDate, prevMonth: PickerValidDate) => PickerValidDate;
-}
-interface UseCalendarStateReturnValue {
-  referenceDate: PickerValidDate;
-  calendarState: CalendarState;
-  setVisibleDate: (parameters: SetVisibleDateParameters) => void;
-  isDateDisabled: (day: PickerValidDate | null) => boolean;
-  onMonthSwitchingAnimationEnd: () => void;
-}
-export declare const useCalendarState: (params: UseCalendarStateParameters) => UseCalendarStateReturnValue;
-interface SetVisibleDateParameters {
-  target: PickerValidDate;
-  reason: 'header-navigation' | 'cell-interaction' | 'controlled-value-change';
-}
-export {};

package/modern/DateCalendar/useCalendarState.js

@@ -1,156 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
-import { useIsDateDisabled } from "./useIsDateDisabled.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
-import { singleItemValueManager } from "../internals/utils/valueManagers.js";
-import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
-import { findClosestEnabledDate } from "../internals/utils/date-utils.js";
-const createCalendarStateReducer = (reduceAnimations, utils) => (state, action) => {
-  switch (action.type) {
-    case 'setVisibleDate':
-      return _extends({}, state, {
-        slideDirection: action.direction,
-        currentMonth: action.month,
-        isMonthSwitchingAnimating: !utils.isSameMonth(action.month, state.currentMonth) && !reduceAnimations && !action.skipAnimation,
-        focusedDay: action.focusedDay
-      });
-    case 'changeMonthTimezone':
-      {
-        const newTimezone = action.newTimezone;
-        if (utils.getTimezone(state.currentMonth) === newTimezone) {
-          return state;
-        }
-        let newCurrentMonth = utils.setTimezone(state.currentMonth, newTimezone);
-        if (utils.getMonth(newCurrentMonth) !== utils.getMonth(state.currentMonth)) {
-          newCurrentMonth = utils.setMonth(newCurrentMonth, utils.getMonth(state.currentMonth));
-        }
-        return _extends({}, state, {
-          currentMonth: newCurrentMonth
-        });
-      }
-    case 'finishMonthSwitchingAnimation':
-      return _extends({}, state, {
-        isMonthSwitchingAnimating: false
-      });
-    default:
-      throw new Error('missing support');
-  }
-};
-export const useCalendarState = params => {
-  const {
-    value,
-    referenceDate: referenceDateProp,
-    disableFuture,
-    disablePast,
-    maxDate,
-    minDate,
-    onMonthChange,
-    onYearChange,
-    reduceAnimations,
-    shouldDisableDate,
-    timezone,
-    getCurrentMonthFromVisibleDate
-  } = params;
-  const utils = useUtils();
-  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), utils)).current;
-  const referenceDate = React.useMemo(() => {
-    return singleItemValueManager.getInitialReferenceValue({
-      value,
-      utils,
-      timezone,
-      props: params,
-      referenceDate: referenceDateProp,
-      granularity: SECTION_TYPE_GRANULARITY.day
-    });
-  },
-  // We want the `referenceDate` to update on prop and `timezone` change (https://github.com/mui/mui-x/issues/10804)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [referenceDateProp, timezone]);
-  const [calendarState, dispatch] = React.useReducer(reducerFn, {
-    isMonthSwitchingAnimating: false,
-    focusedDay: referenceDate,
-    currentMonth: utils.startOfMonth(referenceDate),
-    slideDirection: 'left'
-  });
-  const isDateDisabled = useIsDateDisabled({
-    shouldDisableDate,
-    minDate,
-    maxDate,
-    disableFuture,
-    disablePast,
-    timezone
-  });
-
-  // Ensure that `calendarState.currentMonth` timezone is updated when `referenceDate` (or timezone changes)
-  // https://github.com/mui/mui-x/issues/10804
-  React.useEffect(() => {
-    dispatch({
-      type: 'changeMonthTimezone',
-      newTimezone: utils.getTimezone(referenceDate)
-    });
-  }, [referenceDate, utils]);
-  const setVisibleDate = useEventCallback(({
-    target,
-    reason
-  }) => {
-    if (reason === 'cell-interaction' && calendarState.focusedDay != null && utils.isSameDay(target, calendarState.focusedDay)) {
-      return;
-    }
-    const skipAnimation = reason === 'cell-interaction';
-    let month;
-    let focusedDay;
-    if (reason === 'cell-interaction') {
-      month = getCurrentMonthFromVisibleDate(target, calendarState.currentMonth);
-      focusedDay = target;
-    } else {
-      month = utils.isSameMonth(target, calendarState.currentMonth) ? calendarState.currentMonth : utils.startOfMonth(target);
-      focusedDay = target;
-
-      // If the date is disabled, we try to find a non-disabled date inside the same month.
-      if (isDateDisabled(focusedDay)) {
-        const startOfMonth = utils.startOfMonth(target);
-        const endOfMonth = utils.endOfMonth(target);
-        focusedDay = findClosestEnabledDate({
-          utils,
-          date: focusedDay,
-          minDate: utils.isBefore(minDate, startOfMonth) ? startOfMonth : minDate,
-          maxDate: utils.isAfter(maxDate, endOfMonth) ? endOfMonth : maxDate,
-          disablePast,
-          disableFuture,
-          isDateDisabled,
-          timezone
-        });
-      }
-    }
-    const hasChangedMonth = !utils.isSameMonth(calendarState.currentMonth, month);
-    const hasChangedYear = !utils.isSameYear(calendarState.currentMonth, month);
-    if (hasChangedMonth) {
-      onMonthChange?.(month);
-    }
-    if (hasChangedYear) {
-      onYearChange?.(utils.startOfYear(month));
-    }
-    dispatch({
-      type: 'setVisibleDate',
-      month,
-      direction: utils.isAfterDay(month, calendarState.currentMonth) ? 'left' : 'right',
-      focusedDay: calendarState.focusedDay != null && focusedDay != null && utils.isSameDay(focusedDay, calendarState.focusedDay) ? calendarState.focusedDay : focusedDay,
-      skipAnimation
-    });
-  });
-  const onMonthSwitchingAnimationEnd = React.useCallback(() => {
-    dispatch({
-      type: 'finishMonthSwitchingAnimation'
-    });
-  }, []);
-  return {
-    referenceDate,
-    calendarState,
-    setVisibleDate,
-    isDateDisabled,
-    onMonthSwitchingAnimationEnd
-  };
-};

package/modern/DateCalendar/useIsDateDisabled.d.ts

@@ -1,13 +0,0 @@
-import { DefaultizedProps } from '@mui/x-internals/types';
-import { ValidateDateProps } from "../validation/index.js";
-import { PickerValidDate, TimezoneProps } from "../models/index.js";
-export declare const useIsDateDisabled: ({
-  shouldDisableDate,
-  shouldDisableMonth,
-  shouldDisableYear,
-  minDate,
-  maxDate,
-  disableFuture,
-  disablePast,
-  timezone
-}: ValidateDateProps & DefaultizedProps<TimezoneProps, "timezone">) => (day: PickerValidDate | null) => boolean;

package/modern/DateCalendar/useIsDateDisabled.js

@@ -1,31 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { validateDate } from "../validation/index.js";
-import { useLocalizationContext } from "../internals/hooks/useUtils.js";
-export const useIsDateDisabled = ({
-  shouldDisableDate,
-  shouldDisableMonth,
-  shouldDisableYear,
-  minDate,
-  maxDate,
-  disableFuture,
-  disablePast,
-  timezone
-}) => {
-  const adapter = useLocalizationContext();
-  return React.useCallback(day => validateDate({
-    adapter,
-    value: day,
-    timezone,
-    props: {
-      shouldDisableDate,
-      shouldDisableMonth,
-      shouldDisableYear,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast
-    }
-  }) !== null, [adapter, shouldDisableDate, shouldDisableMonth, shouldDisableYear, minDate, maxDate, disableFuture, disablePast, timezone]);
-};

package/modern/DateField/DateField.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { DateFieldProps } from "./DateField.types.js";
-type DateFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DateFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
-  propTypes?: any;
-};
-/**
- * Demos:
- *
- * - [DateField](http://mui.com/x/react-date-pickers/date-field/)
- * - [Fields](https://mui.com/x/react-date-pickers/fields/)
- *
- * API:
- *
- * - [DateField API](https://mui.com/x/api/date-pickers/date-field/)
- */
-declare const DateField: DateFieldComponent;
-export { DateField };