@mui/x-date-pickers 8.0.0-alpha.10 → 8.0.0-alpha.12

package/esm/DateCalendar/PickersSlideTransition.js

@@ -0,0 +1,142 @@
+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/esm/DateCalendar/dateCalendarClasses.d.ts

@@ -0,0 +1,9 @@
+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/esm/DateCalendar/dateCalendarClasses.js

@@ -0,0 +1,3 @@
+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/esm/DateCalendar/dayCalendarClasses.d.ts

@@ -0,0 +1,23 @@
+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/esm/DateCalendar/dayCalendarClasses.js

@@ -0,0 +1,3 @@
+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/esm/DateCalendar/index.d.ts

@@ -0,0 +1,13 @@
+export { DateCalendar } from "./DateCalendar.js";
+export type { DateCalendarProps, DateCalendarSlots, DateCalendarSlotProps } from './DateCalendar.types';
+export type { PickerDayOwnerState } from './DayCalendar';
+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/esm/DateCalendar/index.js

@@ -0,0 +1,5 @@
+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/esm/DateCalendar/pickersFadeTransitionGroupClasses.d.ts

@@ -0,0 +1,7 @@
+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/esm/DateCalendar/pickersFadeTransitionGroupClasses.js

@@ -0,0 +1,3 @@
+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/esm/DateCalendar/pickersSlideTransitionClasses.d.ts

@@ -0,0 +1,19 @@
+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/esm/DateCalendar/pickersSlideTransitionClasses.js

@@ -0,0 +1,3 @@
+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/esm/DateCalendar/useCalendarState.d.ts

@@ -0,0 +1,27 @@
+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/esm/DateCalendar/useCalendarState.js

@@ -0,0 +1,156 @@
+'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/esm/DateCalendar/useIsDateDisabled.d.ts

@@ -0,0 +1,13 @@
+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/esm/DateCalendar/useIsDateDisabled.js

@@ -0,0 +1,31 @@
+'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/esm/DateField/DateField.d.ts

@@ -0,0 +1,17 @@
+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 };