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

package/legacy/CalendarPicker/PickersCalendarHeader.js

@@ -0,0 +1,173 @@
+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";
+var PickersCalendarHeaderRoot = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: 16,
+  marginBottom: 8,
+  paddingLeft: 24,
+  paddingRight: 12,
+  // prevent jumping in safari
+  maxHeight: 30,
+  minHeight: 30
+});
+var PickersCalendarHeaderLabel = styled('div')(function (_ref) {
+  var theme = _ref.theme;
+  return _extends({
+    display: 'flex',
+    maxHeight: 30,
+    overflow: 'hidden',
+    alignItems: 'center',
+    cursor: 'pointer',
+    marginRight: 'auto'
+  }, theme.typography.body1, {
+    fontWeight: theme.typography.fontWeightMedium
+  });
+});
+var PickersCalendarHeaderLabelItem = styled('div')({
+  marginRight: 6
+});
+var PickersCalendarHeaderSwitchViewButton = styled(IconButton)({
+  marginRight: 'auto'
+});
+var PickersCalendarHeaderSwitchView = styled(ArrowDropDown)(function (_ref2) {
+  var theme = _ref2.theme,
+      ownerState = _ref2.ownerState;
+  return _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) {
+  var _props$components = props.components,
+      components = _props$components === void 0 ? {} : _props$components,
+      _props$componentsProp = props.componentsProps,
+      componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
+      month = props.currentMonth,
+      disabled = props.disabled,
+      disableFuture = props.disableFuture,
+      disablePast = props.disablePast,
+      _props$getViewSwitchi = props.getViewSwitchingButtonText,
+      getViewSwitchingButtonText = _props$getViewSwitchi === void 0 ? getSwitchingViewAriaText : _props$getViewSwitchi,
+      _props$leftArrowButto = props.leftArrowButtonText,
+      leftArrowButtonText = _props$leftArrowButto === void 0 ? 'Previous month' : _props$leftArrowButto,
+      maxDate = props.maxDate,
+      minDate = props.minDate,
+      onMonthChange = props.onMonthChange,
+      onViewChange = props.onViewChange,
+      currentView = props.openView,
+      reduceAnimations = props.reduceAnimations,
+      _props$rightArrowButt = props.rightArrowButtonText,
+      rightArrowButtonText = _props$rightArrowButt === void 0 ? 'Next month' : _props$rightArrowButt,
+      views = props.views;
+  var utils = useUtils();
+  var switchViewButtonProps = componentsProps.switchViewButton || {};
+
+  var selectNextMonth = function selectNextMonth() {
+    return onMonthChange(utils.getNextMonth(month), 'left');
+  };
+
+  var selectPreviousMonth = function selectPreviousMonth() {
+    return onMonthChange(utils.getPreviousMonth(month), 'right');
+  };
+
+  var isNextMonthDisabled = useNextMonthDisabled(month, {
+    disableFuture: disableFuture || disabled,
+    maxDate: maxDate
+  });
+  var isPreviousMonthDisabled = usePreviousMonthDisabled(month, {
+    disablePast: disablePast || disabled,
+    minDate: minDate
+  });
+
+  var handleToggleView = function handleToggleView() {
+    if (views.length === 1 || !onViewChange || disabled) {
+      return;
+    }
+
+    if (views.length === 2) {
+      onViewChange(views.find(function (view) {
+        return view !== currentView;
+      }) || views[0]);
+    } else {
+      // switching only between first 2
+      var 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;
+  }
+
+  var 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/legacy/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";
+var classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', ['root']);
+var animationDuration = 500;
+var PickersFadeTransitionGroupRoot = styled(TransitionGroup)({
+  display: 'block',
+  position: 'relative'
+});
+/**
+ * @ignore - do not document.
+ */
+
+export var PickersFadeTransitionGroup = function PickersFadeTransitionGroup(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      reduceAnimations = _ref.reduceAnimations,
+      transKey = _ref.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/legacy/CalendarPicker/PickersSlideTransition.js

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _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";
+var classes = generateUtilityClasses('PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);
+export var slideAnimationDuration = 350;
+var PickersSlideTransitionRoot = styled(TransitionGroup)(function (_ref) {
+  var _ref2;
+
+  var theme = _ref.theme;
+  var slideTransition = theme.transitions.create('transform', {
+    duration: slideAnimationDuration,
+    easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)'
+  });
+  return _ref2 = {
+    display: 'block',
+    position: 'relative',
+    overflowX: 'hidden',
+    '& > *': {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0
+    }
+  }, _defineProperty(_ref2, "& .".concat(classes['slideEnter-left']), {
+    willChange: 'transform',
+    transform: 'translate(100%)',
+    zIndex: 1
+  }), _defineProperty(_ref2, "& .".concat(classes['slideEnter-right']), {
+    willChange: 'transform',
+    transform: 'translate(-100%)',
+    zIndex: 1
+  }), _defineProperty(_ref2, "& .".concat(classes.slideEnterActive), {
+    transform: 'translate(0%)',
+    transition: slideTransition
+  }), _defineProperty(_ref2, "& .".concat(classes.slideExit), {
+    transform: 'translate(0%)'
+  }), _defineProperty(_ref2, "& .".concat(classes['slideExitActiveLeft-left']), {
+    willChange: 'transform',
+    transform: 'translate(-100%)',
+    transition: slideTransition,
+    zIndex: 0
+  }), _defineProperty(_ref2, "& .".concat(classes['slideExitActiveLeft-right']), {
+    willChange: 'transform',
+    transform: 'translate(100%)',
+    transition: slideTransition,
+    zIndex: 0
+  }), _ref2;
+});
+/**
+ * @ignore - do not document.
+ */
+
+export var PickersSlideTransition = function PickersSlideTransition(_ref3) {
+  var children = _ref3.children,
+      className = _ref3.className,
+      reduceAnimations = _ref3.reduceAnimations,
+      slideDirection = _ref3.slideDirection,
+      transKey = _ref3.transKey,
+      other = _objectWithoutProperties(_ref3, _excluded);
+
+  if (reduceAnimations) {
+    return /*#__PURE__*/_jsx("div", {
+      className: clsx(classes.root, className),
+      children: children
+    });
+  }
+
+  var transitionClasses = {
+    exit: classes.slideExit,
+    enterActive: classes.slideEnterActive,
+    enter: classes["slideEnter-".concat(slideDirection)],
+    exitActive: classes["slideExitActiveLeft-".concat(slideDirection)]
+  };
+  return /*#__PURE__*/_jsx(PickersSlideTransitionRoot, {
+    className: clsx(classes.root, className),
+    childFactory: function childFactory(element) {
+      return /*#__PURE__*/React.cloneElement(element, {
+        classNames: transitionClasses
+      });
+    },
+    children: /*#__PURE__*/_jsx(CSSTransition, _extends({
+      mountOnEnter: true,
+      unmountOnExit: true,
+      timeout: slideAnimationDuration,
+      classNames: transitionClasses
+    }, other, {
+      children: children
+    }), transKey)
+  });
+};

package/legacy/CalendarPicker/calendarPickerClasses.js

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

package/legacy/CalendarPicker/index.js

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

package/legacy/CalendarPicker/useCalendarState.js

@@ -0,0 +1,120 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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 var createCalendarStateReducer = function createCalendarStateReducer(reduceAnimations, disableSwitchToMonthOnDayFocus, utils) {
+  return function (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;
+          }
+
+          var 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 var useCalendarState = function useCalendarState(_ref) {
+  var _ref2;
+
+  var date = _ref.date,
+      defaultCalendarMonth = _ref.defaultCalendarMonth,
+      disableFuture = _ref.disableFuture,
+      disablePast = _ref.disablePast,
+      _ref$disableSwitchToM = _ref.disableSwitchToMonthOnDayFocus,
+      disableSwitchToMonthOnDayFocus = _ref$disableSwitchToM === void 0 ? false : _ref$disableSwitchToM,
+      maxDate = _ref.maxDate,
+      minDate = _ref.minDate,
+      onMonthChange = _ref.onMonthChange,
+      reduceAnimations = _ref.reduceAnimations,
+      shouldDisableDate = _ref.shouldDisableDate;
+  var now = useNow();
+  var utils = useUtils();
+  var reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
+
+  var _React$useReducer = React.useReducer(reducerFn, {
+    isMonthSwitchingAnimating: false,
+    focusedDay: date || now,
+    currentMonth: utils.startOfMonth((_ref2 = date != null ? date : defaultCalendarMonth) != null ? _ref2 : now),
+    slideDirection: 'left'
+  }),
+      _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
+      calendarState = _React$useReducer2[0],
+      dispatch = _React$useReducer2[1];
+
+  var handleChangeMonth = React.useCallback(function (payload) {
+    dispatch(_extends({
+      type: 'changeMonth'
+    }, payload));
+
+    if (onMonthChange) {
+      onMonthChange(payload.newMonth);
+    }
+  }, [onMonthChange]);
+  var changeMonth = React.useCallback(function (newDate) {
+    var 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]);
+  var isDateDisabled = React.useCallback(function (day) {
+    return validateDate(utils, day, {
+      disablePast: disablePast,
+      disableFuture: disableFuture,
+      minDate: minDate,
+      maxDate: maxDate,
+      shouldDisableDate: shouldDisableDate
+    }) !== null;
+  }, [disableFuture, disablePast, maxDate, minDate, shouldDisableDate, utils]);
+  var onMonthSwitchingAnimationEnd = React.useCallback(function () {
+    dispatch({
+      type: 'finishMonthSwitchingAnimation'
+    });
+  }, []);
+  var changeFocusedDay = React.useCallback(function (newFocusedDate) {
+    if (!isDateDisabled(newFocusedDate)) {
+      dispatch({
+        type: 'changeFocusedDay',
+        focusedDay: newFocusedDate
+      });
+    }
+  }, [isDateDisabled]);
+  return {
+    calendarState: calendarState,
+    changeMonth: changeMonth,
+    changeFocusedDay: changeFocusedDay,
+    isDateDisabled: isDateDisabled,
+    onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
+    handleChangeMonth: handleChangeMonth
+  };
+};

package/legacy/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -0,0 +1,126 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import Skeleton from '@mui/material/Skeleton';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
+import { getCalendarPickerSkeletonUtilityClass } from './calendarPickerSkeletonClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['root'],
+    week: ['week'],
+    daySkeleton: ['daySkeleton']
+  };
+  return composeClasses(slots, getCalendarPickerSkeletonUtilityClass, classes);
+};
+
+var CalendarPickerSkeletonRoot = styled('div', {
+  name: 'MuiCalendarPickerSkeleton',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.root;
+  }
+})({
+  alignSelf: 'start'
+});
+var CalendarPickerSkeletonWeek = styled('div', {
+  name: 'MuiCalendarPickerSkeleton',
+  slot: 'Week',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.week;
+  }
+})({
+  margin: "".concat(DAY_MARGIN, "px 0"),
+  display: 'flex',
+  justifyContent: 'center'
+});
+var CalendarPickerSkeletonDay = styled(Skeleton, {
+  name: 'MuiCalendarPickerSkeleton',
+  slot: 'Day',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.daySkeleton;
+  }
+})(function (_ref) {
+  var ownerState = _ref.ownerState;
+  return _extends({
+    margin: "0 ".concat(DAY_MARGIN, "px")
+  }, ownerState.day === 0 && {
+    visibility: 'hidden'
+  });
+});
+CalendarPickerSkeletonDay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  ownerState: PropTypes.shape({
+    day: PropTypes.number.isRequired
+  }).isRequired
+};
+var monthMap = [[0, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 0, 0, 0]];
+/**
+ *
+ * Demos:
+ *
+ * - [Date Picker](https://mui.com/components/x/react-date-pickers/date-picker/)
+ *
+ * API:
+ *
+ * - [CalendarPickerSkeleton API](https://mui.com/api/calendar-picker-skeleton/)
+ */
+
+function CalendarPickerSkeleton(props) {
+  var _useThemeProps = useThemeProps({
+    props: props,
+    name: 'MuiCalendarPickerSkeleton'
+  }),
+      className = _useThemeProps.className,
+      other = _objectWithoutProperties(_useThemeProps, _excluded);
+
+  var classes = useUtilityClasses(props);
+  return /*#__PURE__*/_jsx(CalendarPickerSkeletonRoot, _extends({
+    className: clsx(classes.root, className)
+  }, other, {
+    children: monthMap.map(function (week, index) {
+      return /*#__PURE__*/_jsx(CalendarPickerSkeletonWeek, {
+        className: classes.week,
+        children: week.map(function (day, index2) {
+          return /*#__PURE__*/_jsx(CalendarPickerSkeletonDay, {
+            variant: "circular",
+            width: DAY_SIZE,
+            height: DAY_SIZE,
+            className: classes.daySkeleton,
+            ownerState: {
+              day: day
+            }
+          }, index2);
+        })
+      }, index);
+    })
+  }));
+}
+
+process.env.NODE_ENV !== "production" ? CalendarPickerSkeleton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { CalendarPickerSkeleton };

package/legacy/CalendarPickerSkeleton/calendarPickerSkeletonClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export var getCalendarPickerSkeletonUtilityClass = function getCalendarPickerSkeletonUtilityClass(slot) {
+  return generateUtilityClass('MuiCalendarPickerSkeleton', slot);
+};
+export var calendarPickerSkeletonClasses = generateUtilityClasses('MuiCalendarPickerSkeleton', ['root', 'week', 'daySkeleton']);

package/legacy/CalendarPickerSkeleton/index.js

@@ -0,0 +1,2 @@
+export { CalendarPickerSkeleton } from './CalendarPickerSkeleton';
+export { calendarPickerSkeletonClasses, getCalendarPickerSkeletonUtilityClass } from './calendarPickerSkeletonClasses';