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

package/node/CalendarPicker/PickersCalendarHeader.js

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickersCalendarHeader = PickersCalendarHeader;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _Fade = _interopRequireDefault(require("@mui/material/Fade"));
+
+var _styles = require("@mui/material/styles");
+
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
+var _useUtils = require("../internals/hooks/useUtils");
+
+var _PickersFadeTransitionGroup = require("./PickersFadeTransitionGroup");
+
+var _icons = require("../internals/components/icons");
+
+var _PickersArrowSwitcher = require("../internals/components/PickersArrowSwitcher");
+
+var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const PickersCalendarHeaderRoot = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: 16,
+  marginBottom: 8,
+  paddingLeft: 24,
+  paddingRight: 12,
+  // prevent jumping in safari
+  maxHeight: 30,
+  minHeight: 30
+});
+const PickersCalendarHeaderLabel = (0, _styles.styled)('div')(({
+  theme
+}) => (0, _extends2.default)({
+  display: 'flex',
+  maxHeight: 30,
+  overflow: 'hidden',
+  alignItems: 'center',
+  cursor: 'pointer',
+  marginRight: 'auto'
+}, theme.typography.body1, {
+  fontWeight: theme.typography.fontWeightMedium
+}));
+const PickersCalendarHeaderLabelItem = (0, _styles.styled)('div')({
+  marginRight: 6
+});
+const PickersCalendarHeaderSwitchViewButton = (0, _styles.styled)(_IconButton.default)({
+  marginRight: 'auto'
+});
+const PickersCalendarHeaderSwitchView = (0, _styles.styled)(_icons.ArrowDropDown)(({
+  theme,
+  ownerState
+}) => (0, _extends2.default)({
+  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.
+ */
+
+
+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 = (0, _useUtils.useUtils)();
+  const switchViewButtonProps = componentsProps.switchViewButton || {};
+
+  const selectNextMonth = () => onMonthChange(utils.getNextMonth(month), 'left');
+
+  const selectPreviousMonth = () => onMonthChange(utils.getPreviousMonth(month), 'right');
+
+  const isNextMonthDisabled = (0, _dateHelpersHooks.useNextMonthDisabled)(month, {
+    disableFuture: disableFuture || disabled,
+    maxDate
+  });
+  const isPreviousMonthDisabled = (0, _dateHelpersHooks.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__*/(0, _jsxRuntime.jsxs)(PickersCalendarHeaderRoot, {
+    ownerState: ownerState,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarHeaderLabel, {
+      role: "presentation",
+      onClick: handleToggleView,
+      ownerState: ownerState,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersFadeTransitionGroup.PickersFadeTransitionGroup, {
+        reduceAnimations: reduceAnimations,
+        transKey: utils.format(month, 'month'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarHeaderLabelItem, {
+          "aria-live": "polite",
+          ownerState: ownerState,
+          children: utils.format(month, 'month')
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersFadeTransitionGroup.PickersFadeTransitionGroup, {
+        reduceAnimations: reduceAnimations,
+        transKey: utils.format(month, 'year'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarHeaderLabelItem, {
+          "aria-live": "polite",
+          ownerState: ownerState,
+          children: utils.format(month, 'year')
+        })
+      }), views.length > 1 && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarHeaderSwitchViewButton, (0, _extends2.default)({
+        size: "small",
+        as: components.SwitchViewButton,
+        "aria-label": getViewSwitchingButtonText(currentView)
+      }, switchViewButtonProps, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarHeaderSwitchView, {
+          as: components.SwitchViewIcon,
+          ownerState: ownerState
+        })
+      }))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fade.default, {
+      in: currentView === 'day',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersArrowSwitcher.PickersArrowSwitcher, {
+        leftArrowButtonText: leftArrowButtonText,
+        rightArrowButtonText: rightArrowButtonText,
+        components: components,
+        componentsProps: componentsProps,
+        onLeftClick: selectPreviousMonth,
+        onRightClick: selectNextMonth,
+        isLeftDisabled: isPreviousMonthDisabled,
+        isRightDisabled: isNextMonthDisabled
+      })
+    })]
+  });
+}

package/node/CalendarPicker/PickersFadeTransitionGroup.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickersFadeTransitionGroup = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _Fade = _interopRequireDefault(require("@mui/material/Fade"));
+
+var _styles = require("@mui/material/styles");
+
+var _material = require("@mui/material");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const classes = (0, _material.generateUtilityClasses)('PrivatePickersFadeTransitionGroup', ['root']);
+const animationDuration = 500;
+const PickersFadeTransitionGroupRoot = (0, _styles.styled)(_reactTransitionGroup.TransitionGroup)({
+  display: 'block',
+  position: 'relative'
+});
+/**
+ * @ignore - do not document.
+ */
+
+const PickersFadeTransitionGroup = ({
+  children,
+  className,
+  reduceAnimations,
+  transKey
+}) => {
+  if (reduceAnimations) {
+    return children;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersFadeTransitionGroupRoot, {
+    className: (0, _clsx.default)(classes.root, className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fade.default, {
+      appear: false,
+      mountOnEnter: true,
+      unmountOnExit: true,
+      timeout: {
+        appear: animationDuration,
+        enter: animationDuration / 2,
+        exit: 0
+      },
+      children: children
+    }, transKey)
+  });
+};
+
+exports.PickersFadeTransitionGroup = PickersFadeTransitionGroup;

package/node/CalendarPicker/PickersSlideTransition.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.slideAnimationDuration = exports.PickersSlideTransition = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _styles = require("@mui/material/styles");
+
+var _material = require("@mui/material");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["children", "className", "reduceAnimations", "slideDirection", "transKey"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const classes = (0, _material.generateUtilityClasses)('PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);
+const slideAnimationDuration = 350;
+exports.slideAnimationDuration = slideAnimationDuration;
+const PickersSlideTransitionRoot = (0, _styles.styled)(_reactTransitionGroup.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.
+ */
+
+const PickersSlideTransition = _ref => {
+  let {
+    children,
+    className,
+    reduceAnimations,
+    slideDirection,
+    transKey
+  } = _ref,
+      other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+
+  if (reduceAnimations) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.default)(classes.root, className),
+      children: children
+    });
+  }
+
+  const transitionClasses = {
+    exit: classes.slideExit,
+    enterActive: classes.slideEnterActive,
+    enter: classes[`slideEnter-${slideDirection}`],
+    exitActive: classes[`slideExitActiveLeft-${slideDirection}`]
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersSlideTransitionRoot, {
+    className: (0, _clsx.default)(classes.root, className),
+    childFactory: element => /*#__PURE__*/React.cloneElement(element, {
+      classNames: transitionClasses
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({
+      mountOnEnter: true,
+      unmountOnExit: true,
+      timeout: slideAnimationDuration,
+      classNames: transitionClasses
+    }, other, {
+      children: children
+    }), transKey)
+  });
+};
+
+exports.PickersSlideTransition = PickersSlideTransition;

package/node/CalendarPicker/calendarPickerClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCalendarPickerUtilityClass = exports.calendarPickerClasses = void 0;
+
+var _material = require("@mui/material");
+
+const getCalendarPickerUtilityClass = slot => (0, _material.generateUtilityClass)('MuiCalendarPicker', slot);
+
+exports.getCalendarPickerUtilityClass = getCalendarPickerUtilityClass;
+const calendarPickerClasses = (0, _material.generateUtilityClasses)('MuiCalendarPicker', ['root', 'viewTransitionContainer']);
+exports.calendarPickerClasses = calendarPickerClasses;

package/node/CalendarPicker/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CalendarPicker", {
+  enumerable: true,
+  get: function () {
+    return _CalendarPicker.CalendarPicker;
+  }
+});
+Object.defineProperty(exports, "calendarPickerClasses", {
+  enumerable: true,
+  get: function () {
+    return _calendarPickerClasses.calendarPickerClasses;
+  }
+});
+Object.defineProperty(exports, "getCalendarPickerUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _calendarPickerClasses.getCalendarPickerUtilityClass;
+  }
+});
+
+var _CalendarPicker = require("./CalendarPicker");
+
+var _calendarPickerClasses = require("./calendarPickerClasses");

package/node/CalendarPicker/useCalendarState.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCalendarState = exports.createCalendarStateReducer = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useDateValidation = require("../internals/hooks/validation/useDateValidation");
+
+var _useUtils = require("../internals/hooks/useUtils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
+  switch (action.type) {
+    case 'changeMonth':
+      return (0, _extends2.default)({}, state, {
+        slideDirection: action.direction,
+        currentMonth: action.newMonth,
+        isMonthSwitchingAnimating: !reduceAnimations
+      });
+
+    case 'finishMonthSwitchingAnimation':
+      return (0, _extends2.default)({}, 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 (0, _extends2.default)({}, 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');
+  }
+};
+
+exports.createCalendarStateReducer = createCalendarStateReducer;
+
+const useCalendarState = ({
+  date,
+  defaultCalendarMonth,
+  disableFuture,
+  disablePast,
+  disableSwitchToMonthOnDayFocus = false,
+  maxDate,
+  minDate,
+  onMonthChange,
+  reduceAnimations,
+  shouldDisableDate
+}) => {
+  var _ref;
+
+  const now = (0, _useUtils.useNow)();
+  const utils = (0, _useUtils.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((0, _extends2.default)({
+      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 => (0, _useDateValidation.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
+  };
+};
+
+exports.useCalendarState = useCalendarState;