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

package/CalendarPicker/PickersCalendarHeader.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import IconButton from '@mui/material/IconButton';
+import { SlideDirection } from './PickersSlideTransition';
+import { ExportedDateValidationProps } from '../internals/hooks/validation/useDateValidation';
+import { ExportedArrowSwitcherProps } from '../internals/components/PickersArrowSwitcher';
+import { CalendarPickerView } from '../internals/models';
+export declare type ExportedCalendarHeaderProps<TDate> = Pick<PickersCalendarHeaderProps<TDate>, 'components' | 'componentsProps' | 'getViewSwitchingButtonText' | 'leftArrowButtonText' | 'rightArrowButtonText'>;
+export interface PickersCalendarHeaderComponentsPropsOverrides {
+}
+export interface PickersCalendarHeaderProps<TDate> extends ExportedArrowSwitcherProps, Omit<ExportedDateValidationProps<TDate>, 'shouldDisableDate'> {
+    /**
+     * The components used for each slot.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components?: ExportedArrowSwitcherProps['components'] & {
+        SwitchViewButton?: React.ElementType;
+        SwitchViewIcon?: React.ElementType;
+    };
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    componentsProps?: ExportedArrowSwitcherProps['componentsProps'] & {
+        switchViewButton?: React.ComponentPropsWithRef<typeof IconButton> & PickersCalendarHeaderComponentsPropsOverrides;
+    };
+    currentMonth: TDate;
+    disabled?: boolean;
+    views: readonly CalendarPickerView[];
+    /**
+     * Get aria-label text for switching between views button.
+     * @param {CalendarPickerView} currentView The view from which we want to get the button text.
+     * @returns {string} The label of the view.
+     */
+    getViewSwitchingButtonText?: (currentView: CalendarPickerView) => string;
+    onMonthChange: (date: TDate, slideDirection: SlideDirection) => void;
+    openView: CalendarPickerView;
+    reduceAnimations: boolean;
+    onViewChange?: (view: CalendarPickerView) => void;
+}
+/**
+ * @ignore - do not document.
+ */
+export declare function PickersCalendarHeader<TDate>(props: PickersCalendarHeaderProps<TDate>): JSX.Element | null;

package/CalendarPicker/PickersCalendarHeader.js

@@ -0,0 +1,162 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import Fade from '@mui/material/Fade';
+import { styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import { useUtils } from '../internals/hooks/useUtils';
+import { PickersFadeTransitionGroup } from './PickersFadeTransitionGroup';
+import { ArrowDropDown } from '../internals/components/icons';
+import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
+import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internals/hooks/date-helpers-hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PickersCalendarHeaderRoot = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: 16,
+  marginBottom: 8,
+  paddingLeft: 24,
+  paddingRight: 12,
+  // prevent jumping in safari
+  maxHeight: 30,
+  minHeight: 30
+});
+const PickersCalendarHeaderLabel = styled('div')(({
+  theme
+}) => _extends({
+  display: 'flex',
+  maxHeight: 30,
+  overflow: 'hidden',
+  alignItems: 'center',
+  cursor: 'pointer',
+  marginRight: 'auto'
+}, theme.typography.body1, {
+  fontWeight: theme.typography.fontWeightMedium
+}));
+const PickersCalendarHeaderLabelItem = styled('div')({
+  marginRight: 6
+});
+const PickersCalendarHeaderSwitchViewButton = styled(IconButton)({
+  marginRight: 'auto'
+});
+const PickersCalendarHeaderSwitchView = styled(ArrowDropDown)(({
+  theme,
+  ownerState
+}) => _extends({
+  willChange: 'transform',
+  transition: theme.transitions.create('transform'),
+  transform: 'rotate(0deg)'
+}, ownerState.openView === 'year' && {
+  transform: 'rotate(180deg)'
+}));
+
+function getSwitchingViewAriaText(view) {
+  return view === 'year' ? 'year view is open, switch to calendar view' : 'calendar view is open, switch to year view';
+}
+/**
+ * @ignore - do not document.
+ */
+
+
+export function PickersCalendarHeader(props) {
+  const {
+    components = {},
+    componentsProps = {},
+    currentMonth: month,
+    disabled,
+    disableFuture,
+    disablePast,
+    getViewSwitchingButtonText = getSwitchingViewAriaText,
+    leftArrowButtonText = 'Previous month',
+    maxDate,
+    minDate,
+    onMonthChange,
+    onViewChange,
+    openView: currentView,
+    reduceAnimations,
+    rightArrowButtonText = 'Next month',
+    views
+  } = props;
+  const utils = useUtils();
+  const switchViewButtonProps = componentsProps.switchViewButton || {};
+
+  const selectNextMonth = () => onMonthChange(utils.getNextMonth(month), 'left');
+
+  const selectPreviousMonth = () => onMonthChange(utils.getPreviousMonth(month), 'right');
+
+  const isNextMonthDisabled = useNextMonthDisabled(month, {
+    disableFuture: disableFuture || disabled,
+    maxDate
+  });
+  const isPreviousMonthDisabled = usePreviousMonthDisabled(month, {
+    disablePast: disablePast || disabled,
+    minDate
+  });
+
+  const handleToggleView = () => {
+    if (views.length === 1 || !onViewChange || disabled) {
+      return;
+    }
+
+    if (views.length === 2) {
+      onViewChange(views.find(view => view !== currentView) || views[0]);
+    } else {
+      // switching only between first 2
+      const nextIndexToOpen = views.indexOf(currentView) !== 0 ? 0 : 1;
+      onViewChange(views[nextIndexToOpen]);
+    }
+  }; // No need to display more information
+
+
+  if (views.length === 1 && views[0] === 'year') {
+    return null;
+  }
+
+  const ownerState = props;
+  return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, {
+    ownerState: ownerState,
+    children: [/*#__PURE__*/_jsxs(PickersCalendarHeaderLabel, {
+      role: "presentation",
+      onClick: handleToggleView,
+      ownerState: ownerState,
+      children: [/*#__PURE__*/_jsx(PickersFadeTransitionGroup, {
+        reduceAnimations: reduceAnimations,
+        transKey: utils.format(month, 'month'),
+        children: /*#__PURE__*/_jsx(PickersCalendarHeaderLabelItem, {
+          "aria-live": "polite",
+          ownerState: ownerState,
+          children: utils.format(month, 'month')
+        })
+      }), /*#__PURE__*/_jsx(PickersFadeTransitionGroup, {
+        reduceAnimations: reduceAnimations,
+        transKey: utils.format(month, 'year'),
+        children: /*#__PURE__*/_jsx(PickersCalendarHeaderLabelItem, {
+          "aria-live": "polite",
+          ownerState: ownerState,
+          children: utils.format(month, 'year')
+        })
+      }), views.length > 1 && !disabled && /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewButton, _extends({
+        size: "small",
+        as: components.SwitchViewButton,
+        "aria-label": getViewSwitchingButtonText(currentView)
+      }, switchViewButtonProps, {
+        children: /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchView, {
+          as: components.SwitchViewIcon,
+          ownerState: ownerState
+        })
+      }))]
+    }), /*#__PURE__*/_jsx(Fade, {
+      in: currentView === 'day',
+      children: /*#__PURE__*/_jsx(PickersArrowSwitcher, {
+        leftArrowButtonText: leftArrowButtonText,
+        rightArrowButtonText: rightArrowButtonText,
+        components: components,
+        componentsProps: componentsProps,
+        onLeftClick: selectPreviousMonth,
+        onRightClick: selectNextMonth,
+        isLeftDisabled: isPreviousMonthDisabled,
+        isRightDisabled: isNextMonthDisabled
+      })
+    })]
+  });
+}

package/CalendarPicker/PickersFadeTransitionGroup.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface FadeTransitionProps {
+    children: React.ReactElement;
+    className?: string;
+    reduceAnimations: boolean;
+    transKey: React.Key;
+}
+/**
+ * @ignore - do not document.
+ */
+export declare const PickersFadeTransitionGroup: ({ children, className, reduceAnimations, transKey, }: FadeTransitionProps) => JSX.Element;
+export {};

package/CalendarPicker/PickersFadeTransitionGroup.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import Fade from '@mui/material/Fade';
+import { styled } from '@mui/material/styles';
+import { generateUtilityClasses } from '@mui/material';
+import { TransitionGroup } from 'react-transition-group';
+import { jsx as _jsx } from "react/jsx-runtime";
+const classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', ['root']);
+const animationDuration = 500;
+const PickersFadeTransitionGroupRoot = styled(TransitionGroup)({
+  display: 'block',
+  position: 'relative'
+});
+/**
+ * @ignore - do not document.
+ */
+
+export const PickersFadeTransitionGroup = ({
+  children,
+  className,
+  reduceAnimations,
+  transKey
+}) => {
+  if (reduceAnimations) {
+    return children;
+  }
+
+  return /*#__PURE__*/_jsx(PickersFadeTransitionGroupRoot, {
+    className: clsx(classes.root, className),
+    children: /*#__PURE__*/_jsx(Fade, {
+      appear: false,
+      mountOnEnter: true,
+      unmountOnExit: true,
+      timeout: {
+        appear: animationDuration,
+        enter: animationDuration / 2,
+        exit: 0
+      },
+      children: children
+    }, transKey)
+  });
+};

package/CalendarPicker/PickersSlideTransition.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+export declare type SlideDirection = 'right' | 'left';
+export interface SlideTransitionProps extends Omit<CSSTransitionProps, 'timeout'> {
+    children: React.ReactElement;
+    className?: string;
+    reduceAnimations: boolean;
+    slideDirection: SlideDirection;
+    transKey: React.Key;
+}
+export declare const slideAnimationDuration = 350;
+/**
+ * @ignore - do not document.
+ */
+export declare const PickersSlideTransition: ({ children, className, reduceAnimations, slideDirection, transKey, ...other }: SlideTransitionProps) => JSX.Element;

package/CalendarPicker/PickersSlideTransition.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "className", "reduceAnimations", "slideDirection", "transKey"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { generateUtilityClasses } from '@mui/material';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { jsx as _jsx } from "react/jsx-runtime";
+const classes = generateUtilityClasses('PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);
+export const slideAnimationDuration = 350;
+const PickersSlideTransitionRoot = styled(TransitionGroup)(({
+  theme
+}) => {
+  const slideTransition = theme.transitions.create('transform', {
+    duration: slideAnimationDuration,
+    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
+    },
+    [`& .${classes['slideEnter-left']}`]: {
+      willChange: 'transform',
+      transform: 'translate(100%)',
+      zIndex: 1
+    },
+    [`& .${classes['slideEnter-right']}`]: {
+      willChange: 'transform',
+      transform: 'translate(-100%)',
+      zIndex: 1
+    },
+    [`& .${classes.slideEnterActive}`]: {
+      transform: 'translate(0%)',
+      transition: slideTransition
+    },
+    [`& .${classes.slideExit}`]: {
+      transform: 'translate(0%)'
+    },
+    [`& .${classes['slideExitActiveLeft-left']}`]: {
+      willChange: 'transform',
+      transform: 'translate(-100%)',
+      transition: slideTransition,
+      zIndex: 0
+    },
+    [`& .${classes['slideExitActiveLeft-right']}`]: {
+      willChange: 'transform',
+      transform: 'translate(100%)',
+      transition: slideTransition,
+      zIndex: 0
+    }
+  };
+});
+/**
+ * @ignore - do not document.
+ */
+
+export const PickersSlideTransition = _ref => {
+  let {
+    children,
+    className,
+    reduceAnimations,
+    slideDirection,
+    transKey
+  } = _ref,
+      other = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  if (reduceAnimations) {
+    return /*#__PURE__*/_jsx("div", {
+      className: clsx(classes.root, className),
+      children: children
+    });
+  }
+
+  const transitionClasses = {
+    exit: classes.slideExit,
+    enterActive: classes.slideEnterActive,
+    enter: classes[`slideEnter-${slideDirection}`],
+    exitActive: classes[`slideExitActiveLeft-${slideDirection}`]
+  };
+  return /*#__PURE__*/_jsx(PickersSlideTransitionRoot, {
+    className: clsx(classes.root, className),
+    childFactory: element => /*#__PURE__*/React.cloneElement(element, {
+      classNames: transitionClasses
+    }),
+    children: /*#__PURE__*/_jsx(CSSTransition, _extends({
+      mountOnEnter: true,
+      unmountOnExit: true,
+      timeout: slideAnimationDuration,
+      classNames: transitionClasses
+    }, other, {
+      children: children
+    }), transKey)
+  });
+};

package/CalendarPicker/calendarPickerClasses.d.ts

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

package/CalendarPicker/calendarPickerClasses.js

@@ -0,0 +1,3 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export const getCalendarPickerUtilityClass = slot => generateUtilityClass('MuiCalendarPicker', slot);
+export const calendarPickerClasses = generateUtilityClasses('MuiCalendarPicker', ['root', 'viewTransitionContainer']);

package/CalendarPicker/index.d.ts

@@ -0,0 +1,5 @@
+export { CalendarPicker } from './CalendarPicker';
+export type { CalendarPickerProps } from './CalendarPicker';
+export { getCalendarPickerUtilityClass, calendarPickerClasses } from './calendarPickerClasses';
+export type { CalendarPickerClassKey, CalendarPickerClasses } from './calendarPickerClasses';
+export type { CalendarPickerView } from '../internals/models';

package/CalendarPicker/index.js

@@ -0,0 +1,2 @@
+export { CalendarPicker } from './CalendarPicker';
+export { getCalendarPickerUtilityClass, calendarPickerClasses } from './calendarPickerClasses';

package/CalendarPicker/package.json

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

package/CalendarPicker/useCalendarState.d.ts

@@ -0,0 +1,33 @@
+import { SlideDirection } from './PickersSlideTransition';
+import { MuiPickersAdapter } from '../internals/models';
+import type { CalendarPickerProps } from './CalendarPicker';
+interface CalendarState<TDate> {
+    currentMonth: TDate;
+    focusedDay: TDate | null;
+    isMonthSwitchingAnimating: boolean;
+    slideDirection: SlideDirection;
+}
+declare type ReducerAction<TType, TAdditional = {}> = {
+    type: TType;
+} & TAdditional;
+interface ChangeMonthPayload<TDate> {
+    direction: SlideDirection;
+    newMonth: TDate;
+}
+export declare const createCalendarStateReducer: <TDate extends unknown>(reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter<TDate>) => (state: CalendarState<TDate>, action: {
+    type: "finishMonthSwitchingAnimation";
+} | ReducerAction<"changeMonth", ChangeMonthPayload<TDate>> | ReducerAction<"changeFocusedDay", {
+    focusedDay: TDate;
+}>) => CalendarState<TDate>;
+interface CalendarStateInput<TDate> extends Pick<CalendarPickerProps<TDate>, 'date' | 'defaultCalendarMonth' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
+    disableSwitchToMonthOnDayFocus?: boolean;
+}
+export declare const useCalendarState: <TDate extends unknown>({ date, defaultCalendarMonth, disableFuture, disablePast, disableSwitchToMonthOnDayFocus, maxDate, minDate, onMonthChange, reduceAnimations, shouldDisableDate, }: CalendarStateInput<TDate>) => {
+    calendarState: CalendarState<TDate>;
+    changeMonth: (newDate: TDate) => void;
+    changeFocusedDay: (newFocusedDate: TDate) => void;
+    isDateDisabled: (day: TDate | null) => boolean;
+    onMonthSwitchingAnimationEnd: () => void;
+    handleChangeMonth: (payload: ChangeMonthPayload<TDate>) => void;
+};
+export {};

package/CalendarPicker/useCalendarState.js

@@ -0,0 +1,110 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { validateDate } from '../internals/hooks/validation/useDateValidation';
+import { useUtils, useNow } from '../internals/hooks/useUtils';
+export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
+  switch (action.type) {
+    case 'changeMonth':
+      return _extends({}, state, {
+        slideDirection: action.direction,
+        currentMonth: action.newMonth,
+        isMonthSwitchingAnimating: !reduceAnimations
+      });
+
+    case 'finishMonthSwitchingAnimation':
+      return _extends({}, state, {
+        isMonthSwitchingAnimating: false
+      });
+
+    case 'changeFocusedDay':
+      {
+        if (state.focusedDay !== null && utils.isSameDay(action.focusedDay, state.focusedDay)) {
+          return state;
+        }
+
+        const needMonthSwitch = Boolean(action.focusedDay) && !disableSwitchToMonthOnDayFocus && !utils.isSameMonth(state.currentMonth, action.focusedDay);
+        return _extends({}, state, {
+          focusedDay: action.focusedDay,
+          isMonthSwitchingAnimating: needMonthSwitch && !reduceAnimations,
+          currentMonth: needMonthSwitch ? utils.startOfMonth(action.focusedDay) : state.currentMonth,
+          slideDirection: utils.isAfterDay(action.focusedDay, state.currentMonth) ? 'left' : 'right'
+        });
+      }
+
+    default:
+      throw new Error('missing support');
+  }
+};
+export const useCalendarState = ({
+  date,
+  defaultCalendarMonth,
+  disableFuture,
+  disablePast,
+  disableSwitchToMonthOnDayFocus = false,
+  maxDate,
+  minDate,
+  onMonthChange,
+  reduceAnimations,
+  shouldDisableDate
+}) => {
+  var _ref;
+
+  const now = useNow();
+  const utils = useUtils();
+  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
+  const [calendarState, dispatch] = React.useReducer(reducerFn, {
+    isMonthSwitchingAnimating: false,
+    focusedDay: date || now,
+    currentMonth: utils.startOfMonth((_ref = date != null ? date : defaultCalendarMonth) != null ? _ref : now),
+    slideDirection: 'left'
+  });
+  const handleChangeMonth = React.useCallback(payload => {
+    dispatch(_extends({
+      type: 'changeMonth'
+    }, payload));
+
+    if (onMonthChange) {
+      onMonthChange(payload.newMonth);
+    }
+  }, [onMonthChange]);
+  const changeMonth = React.useCallback(newDate => {
+    const newDateRequested = newDate != null ? newDate : now;
+
+    if (utils.isSameMonth(newDateRequested, calendarState.currentMonth)) {
+      return;
+    }
+
+    handleChangeMonth({
+      newMonth: utils.startOfMonth(newDateRequested),
+      direction: utils.isAfterDay(newDateRequested, calendarState.currentMonth) ? 'left' : 'right'
+    });
+  }, [calendarState.currentMonth, handleChangeMonth, now, utils]);
+  const isDateDisabled = React.useCallback(day => validateDate(utils, day, {
+    disablePast,
+    disableFuture,
+    minDate,
+    maxDate,
+    shouldDisableDate
+  }) !== null, [disableFuture, disablePast, maxDate, minDate, shouldDisableDate, utils]);
+  const onMonthSwitchingAnimationEnd = React.useCallback(() => {
+    dispatch({
+      type: 'finishMonthSwitchingAnimation'
+    });
+  }, []);
+  const changeFocusedDay = React.useCallback(newFocusedDate => {
+    if (!isDateDisabled(newFocusedDate)) {
+      dispatch({
+        type: 'changeFocusedDay',
+        focusedDay: newFocusedDate
+      });
+    }
+  }, [isDateDisabled]);
+  return {
+    calendarState,
+    changeMonth,
+    changeFocusedDay,
+    isDateDisabled,
+    onMonthSwitchingAnimationEnd,
+    handleChangeMonth
+  };
+};

package/CalendarPickerSkeleton/CalendarPickerSkeleton.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+import { CalendarPickerSkeletonClasses } from './calendarPickerSkeletonClasses';
+declare type HTMLDivProps = JSX.IntrinsicElements['div'];
+export interface CalendarPickerSkeletonProps extends HTMLDivProps {
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<CalendarPickerSkeletonClasses>;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Date Picker](https://mui.com/components/x/react-date-pickers/date-picker/)
+ *
+ * API:
+ *
+ * - [CalendarPickerSkeleton API](https://mui.com/api/calendar-picker-skeleton/)
+ */
+declare function CalendarPickerSkeleton(props: CalendarPickerSkeletonProps): JSX.Element;
+declare namespace CalendarPickerSkeleton {
+    var propTypes: any;
+}
+export { CalendarPickerSkeleton };