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

package/modern/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/modern/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/modern/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/modern/CalendarPicker/index.js

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

package/modern/CalendarPicker/useCalendarState.js

@@ -0,0 +1,108 @@
+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
+}) => {
+  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(date ?? defaultCalendarMonth ?? 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 ?? 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/modern/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -0,0 +1,119 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _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";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    week: ['week'],
+    daySkeleton: ['daySkeleton']
+  };
+  return composeClasses(slots, getCalendarPickerSkeletonUtilityClass, classes);
+};
+
+const CalendarPickerSkeletonRoot = styled('div', {
+  name: 'MuiCalendarPickerSkeleton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({
+  alignSelf: 'start'
+});
+const CalendarPickerSkeletonWeek = styled('div', {
+  name: 'MuiCalendarPickerSkeleton',
+  slot: 'Week',
+  overridesResolver: (props, styles) => styles.week
+})({
+  margin: `${DAY_MARGIN}px 0`,
+  display: 'flex',
+  justifyContent: 'center'
+});
+const CalendarPickerSkeletonDay = styled(Skeleton, {
+  name: 'MuiCalendarPickerSkeleton',
+  slot: 'Day',
+  overridesResolver: (props, styles) => styles.daySkeleton
+})(({
+  ownerState
+}) => _extends({
+  margin: `0 ${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
+};
+const 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) {
+  const _useThemeProps = useThemeProps({
+    props,
+    name: 'MuiCalendarPickerSkeleton'
+  }),
+        {
+    className
+  } = _useThemeProps,
+        other = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
+
+  const classes = useUtilityClasses(props);
+  return /*#__PURE__*/_jsx(CalendarPickerSkeletonRoot, _extends({
+    className: clsx(classes.root, className)
+  }, other, {
+    children: monthMap.map((week, index) => /*#__PURE__*/_jsx(CalendarPickerSkeletonWeek, {
+      className: classes.week,
+      children: week.map((day, index2) => /*#__PURE__*/_jsx(CalendarPickerSkeletonDay, {
+        variant: "circular",
+        width: DAY_SIZE,
+        height: DAY_SIZE,
+        className: classes.daySkeleton,
+        ownerState: {
+          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/modern/CalendarPickerSkeleton/calendarPickerSkeletonClasses.js

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

package/modern/CalendarPickerSkeleton/index.js

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

package/modern/ClockPicker/Clock.js

@@ -0,0 +1,262 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { ClockPointer } from './ClockPointer';
+import { useUtils } from '../internals/hooks/useUtils';
+import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
+import { getHours, getMinutes } from './shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ClockRoot = styled('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  margin: theme.spacing(2)
+}));
+const ClockClock = styled('div')({
+  backgroundColor: 'rgba(0,0,0,.07)',
+  borderRadius: '50%',
+  height: 220,
+  width: 220,
+  flexShrink: 0,
+  position: 'relative',
+  pointerEvents: 'none'
+});
+const ClockSquareMask = styled('div')({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'auto',
+  outline: 0,
+  // Disable scroll capabilities.
+  touchAction: 'none',
+  userSelect: 'none',
+  '@media (pointer: fine)': {
+    cursor: 'pointer',
+    borderRadius: '50%'
+  },
+  '&:active': {
+    cursor: 'move'
+  }
+});
+const ClockPin = styled('div')(({
+  theme
+}) => ({
+  width: 6,
+  height: 6,
+  borderRadius: '50%',
+  backgroundColor: theme.palette.primary.main,
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)'
+}));
+const ClockAmButton = styled(IconButton)(({
+  theme,
+  ownerState
+}) => _extends({
+  zIndex: 1,
+  position: 'absolute',
+  bottom: ownerState.ampmInClock ? 64 : 8,
+  left: 8
+}, ownerState.meridiemMode === 'am' && {
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  '&:hover': {
+    backgroundColor: theme.palette.primary.light
+  }
+}));
+const ClockPmButton = styled(IconButton)(({
+  theme,
+  ownerState
+}) => _extends({
+  zIndex: 1,
+  position: 'absolute',
+  bottom: ownerState.ampmInClock ? 64 : 8,
+  right: 8
+}, ownerState.meridiemMode === 'pm' && {
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  '&:hover': {
+    backgroundColor: theme.palette.primary.light
+  }
+}));
+/**
+ * @ignore - internal component.
+ */
+
+export function Clock(props) {
+  const {
+    ampm,
+    ampmInClock,
+    autoFocus,
+    children,
+    date,
+    getClockLabelText,
+    handleMeridiemChange,
+    isTimeDisabled,
+    meridiemMode,
+    minutesStep = 1,
+    onChange,
+    selectedId,
+    type,
+    value
+  } = props;
+  const ownerState = props;
+  const utils = useUtils();
+  const wrapperVariant = React.useContext(WrapperVariantContext);
+  const isMoving = React.useRef(false);
+  const isSelectedTimeDisabled = isTimeDisabled(value, type);
+  const isPointerInner = !ampm && type === 'hours' && (value < 1 || value > 12);
+
+  const handleValueChange = (newValue, isFinish) => {
+    if (isTimeDisabled(newValue, type)) {
+      return;
+    }
+
+    onChange(newValue, isFinish);
+  };
+
+  const setTime = (event, isFinish) => {
+    let {
+      offsetX,
+      offsetY
+    } = event;
+
+    if (offsetX === undefined) {
+      const rect = event.target.getBoundingClientRect();
+      offsetX = event.changedTouches[0].clientX - rect.left;
+      offsetY = event.changedTouches[0].clientY - rect.top;
+    }
+
+    const newSelectedValue = type === 'seconds' || type === 'minutes' ? getMinutes(offsetX, offsetY, minutesStep) : getHours(offsetX, offsetY, Boolean(ampm));
+    handleValueChange(newSelectedValue, isFinish);
+  };
+
+  const handleTouchMove = event => {
+    isMoving.current = true;
+    setTime(event, 'shallow');
+  };
+
+  const handleTouchEnd = event => {
+    if (isMoving.current) {
+      setTime(event, 'finish');
+      isMoving.current = false;
+    }
+  };
+
+  const handleMouseMove = event => {
+    // event.buttons & PRIMARY_MOUSE_BUTTON
+    if (event.buttons > 0) {
+      setTime(event.nativeEvent, 'shallow');
+    }
+  };
+
+  const handleMouseUp = event => {
+    if (isMoving.current) {
+      isMoving.current = false;
+    }
+
+    setTime(event.nativeEvent, 'finish');
+  };
+
+  const hasSelected = React.useMemo(() => {
+    if (type === 'hours') {
+      return true;
+    }
+
+    return value % 5 === 0;
+  }, [type, value]);
+  const keyboardControlStep = type === 'minutes' ? minutesStep : 1;
+  const listboxRef = React.useRef(null); // Since this is rendered when a Popper is opened we can't use passive effects.
+  // Focusing in passive effects in Popper causes scroll jump.
+
+  useEnhancedEffect(() => {
+    if (autoFocus) {
+      // The ref not being resolved would be a bug in MUI.
+      listboxRef.current.focus();
+    }
+  }, [autoFocus]);
+
+  const handleKeyDown = event => {
+    // TODO: Why this early exit?
+    if (isMoving.current) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'Home':
+        // annulate both hours and minutes
+        handleValueChange(0, 'partial');
+        event.preventDefault();
+        break;
+
+      case 'End':
+        handleValueChange(type === 'minutes' ? 59 : 23, 'partial');
+        event.preventDefault();
+        break;
+
+      case 'ArrowUp':
+        handleValueChange(value + keyboardControlStep, 'partial');
+        event.preventDefault();
+        break;
+
+      case 'ArrowDown':
+        handleValueChange(value - keyboardControlStep, 'partial');
+        event.preventDefault();
+        break;
+
+      default: // do nothing
+
+    }
+  };
+
+  return /*#__PURE__*/_jsxs(ClockRoot, {
+    children: [/*#__PURE__*/_jsxs(ClockClock, {
+      children: [/*#__PURE__*/_jsx(ClockSquareMask, {
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        onMouseUp: handleMouseUp,
+        onMouseMove: handleMouseMove
+      }), !isSelectedTimeDisabled && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(ClockPin, {}), date && /*#__PURE__*/_jsx(ClockPointer, {
+          type: type,
+          value: value,
+          isInner: isPointerInner,
+          hasSelected: hasSelected
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        "aria-activedescendant": selectedId,
+        "aria-label": getClockLabelText(type, date, utils),
+        ref: listboxRef,
+        role: "listbox",
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+        children: children
+      })]
+    }), ampm && (wrapperVariant === 'desktop' || ampmInClock) && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(ClockAmButton, {
+        onClick: () => handleMeridiemChange('am'),
+        disabled: meridiemMode === null,
+        ownerState: ownerState,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          children: "AM"
+        })
+      }), /*#__PURE__*/_jsx(ClockPmButton, {
+        disabled: meridiemMode === null,
+        onClick: () => handleMeridiemChange('pm'),
+        ownerState: ownerState,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          children: "PM"
+        })
+      })]
+    })]
+  });
+}