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

package/modern/YearPicker/PickersYear.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import { useForkRef, capitalize } from '@mui/material/utils';
+import { alpha, styled } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/material';
+import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function getPickersYearUtilityClass(slot) {
+  return generateUtilityClass('PrivatePickersYear', slot);
+}
+export const pickersYearClasses = generateUtilityClasses('PrivatePickersYear', ['root', 'modeMobile', 'modeDesktop', 'yearButton', 'disabled', 'selected']);
+
+const useUtilityClasses = ownerState => {
+  const {
+    wrapperVariant,
+    disabled,
+    selected,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', wrapperVariant && `mode${capitalize(wrapperVariant)}`],
+    yearButton: ['yearButton', disabled && 'disabled', selected && 'selected']
+  };
+  return composeClasses(slots, getPickersYearUtilityClass, classes);
+};
+
+const PickersYearRoot = styled('div')(({
+  ownerState
+}) => _extends({
+  flexBasis: '33.3%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+}, ownerState?.wrapperVariant === 'desktop' && {
+  flexBasis: '25%'
+}));
+const PickersYearButton = styled('button')(({
+  theme
+}) => _extends({
+  color: 'unset',
+  backgroundColor: 'transparent',
+  border: 0,
+  outline: 0
+}, theme.typography.subtitle1, {
+  margin: '8px 0',
+  height: 36,
+  width: 72,
+  borderRadius: 18,
+  cursor: 'pointer',
+  '&:focus, &:hover': {
+    backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+  },
+  [`&.${pickersYearClasses.disabled}`]: {
+    color: theme.palette.text.secondary
+  },
+  [`&.${pickersYearClasses.selected}`]: {
+    color: theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.primary.main,
+    '&:focus, &:hover': {
+      backgroundColor: theme.palette.primary.dark
+    }
+  }
+}));
+/**
+ * @ignore - internal component.
+ */
+
+export const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(props, forwardedRef) {
+  const {
+    autoFocus,
+    className,
+    children,
+    disabled,
+    onClick,
+    onKeyDown,
+    selected,
+    value
+  } = props;
+  const ref = React.useRef(null);
+  const refHandle = useForkRef(ref, forwardedRef);
+  const wrapperVariant = React.useContext(WrapperVariantContext);
+
+  const ownerState = _extends({}, props, {
+    wrapperVariant
+  });
+
+  const classes = useUtilityClasses(ownerState); // TODO: Can we just forward this to the button?
+
+  React.useEffect(() => {
+    if (autoFocus) {
+      // `ref.current` being `null` would be a bug in MUIu
+      ref.current.focus();
+    }
+  }, [autoFocus]);
+  return /*#__PURE__*/_jsx(PickersYearRoot, {
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    children: /*#__PURE__*/_jsx(PickersYearButton, {
+      ref: refHandle,
+      disabled: disabled,
+      type: "button",
+      tabIndex: selected ? 0 : -1,
+      onClick: event => onClick(event, value),
+      onKeyDown: event => onKeyDown(event, value),
+      className: classes.yearButton,
+      ownerState: ownerState,
+      children: children
+    })
+  });
+});

package/modern/YearPicker/YearPicker.js

@@ -0,0 +1,188 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme, styled, useThemeProps as useThemProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import clsx from 'clsx';
+import { PickersYear } from './PickersYear';
+import { useUtils, useNow } from '../internals/hooks/useUtils';
+import { findClosestEnabledDate } from '../internals/utils/date-utils';
+import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
+import { getYearPickerUtilityClass } from './yearPickerClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getYearPickerUtilityClass, classes);
+};
+
+const YearPickerRoot = styled('div', {
+  name: 'MuiYearPicker',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  overflowY: 'auto',
+  height: '100%',
+  margin: '0 4px'
+});
+export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, ref) {
+  const props = useThemProps({
+    props: inProps,
+    name: 'MuiYearPicker'
+  });
+  const {
+    autoFocus,
+    className,
+    date,
+    disabled,
+    disableFuture,
+    disablePast,
+    isDateDisabled,
+    maxDate,
+    minDate,
+    onChange,
+    onFocusedDayChange,
+    onYearChange,
+    readOnly,
+    shouldDisableYear
+  } = props;
+  const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
+  const now = useNow();
+  const theme = useTheme();
+  const utils = useUtils();
+  const selectedDate = date || now;
+  const currentYear = utils.getYear(selectedDate);
+  const wrapperVariant = React.useContext(WrapperVariantContext);
+  const selectedYearRef = React.useRef(null);
+  const [focusedYear, setFocusedYear] = React.useState(currentYear);
+
+  const handleYearSelection = (event, year, isFinish = 'finish') => {
+    if (readOnly) {
+      return;
+    }
+
+    const submitDate = newDate => {
+      onChange(newDate, isFinish);
+
+      if (onFocusedDayChange) {
+        onFocusedDayChange(newDate || now);
+      }
+
+      if (onYearChange) {
+        onYearChange(newDate);
+      }
+    };
+
+    const newDate = utils.setYear(selectedDate, year);
+
+    if (isDateDisabled(newDate)) {
+      const closestEnabledDate = findClosestEnabledDate({
+        utils,
+        date: newDate,
+        minDate,
+        maxDate,
+        disablePast: Boolean(disablePast),
+        disableFuture: Boolean(disableFuture),
+        shouldDisableDate: isDateDisabled
+      });
+      submitDate(closestEnabledDate || now);
+    } else {
+      submitDate(newDate);
+    }
+  };
+
+  const focusYear = React.useCallback(year => {
+    if (!isDateDisabled(utils.setYear(selectedDate, year))) {
+      setFocusedYear(year);
+    }
+  }, [selectedDate, isDateDisabled, utils]);
+  const yearsInRow = wrapperVariant === 'desktop' ? 4 : 3;
+
+  const handleKeyDown = (event, year) => {
+    switch (event.key) {
+      case 'ArrowUp':
+        focusYear(year - yearsInRow);
+        event.preventDefault();
+        break;
+
+      case 'ArrowDown':
+        focusYear(year + yearsInRow);
+        event.preventDefault();
+        break;
+
+      case 'ArrowLeft':
+        focusYear(year + (theme.direction === 'ltr' ? -1 : 1));
+        event.preventDefault();
+        break;
+
+      case 'ArrowRight':
+        focusYear(year + (theme.direction === 'ltr' ? 1 : -1));
+        event.preventDefault();
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  return /*#__PURE__*/_jsx(YearPickerRoot, {
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    children: utils.getYearRange(minDate, maxDate).map(year => {
+      const yearNumber = utils.getYear(year);
+      const selected = yearNumber === currentYear;
+      return /*#__PURE__*/_jsx(PickersYear, {
+        selected: selected,
+        value: yearNumber,
+        onClick: handleYearSelection,
+        onKeyDown: handleKeyDown,
+        autoFocus: autoFocus && yearNumber === focusedYear,
+        ref: selected ? selectedYearRef : undefined,
+        disabled: disabled || disablePast && utils.isBeforeYear(year, now) || disableFuture && utils.isAfterYear(year, now) || shouldDisableYear && shouldDisableYear(year),
+        children: utils.format(year, 'year')
+      }, utils.format(year, 'year'));
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? YearPicker.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  autoFocus: PropTypes.bool,
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  date: PropTypes.any,
+  disabled: PropTypes.bool,
+  disableFuture: PropTypes.bool,
+  disablePast: PropTypes.bool,
+  isDateDisabled: PropTypes.func.isRequired,
+  maxDate: PropTypes.any.isRequired,
+  minDate: PropTypes.any.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onFocusedDayChange: PropTypes.func,
+
+  /**
+   * Callback firing on year change @DateIOType.
+   * @param {TDate} year The new year.
+   */
+  onYearChange: PropTypes.func,
+  readOnly: PropTypes.bool,
+
+  /**
+   * Disable specific years dynamically.
+   * Works like `shouldDisableDate` but for year selection view @DateIOType.
+   * @param {TDate} year The year to test.
+   * @returns {boolean} Return `true` if the year should be disabled.
+   */
+  shouldDisableYear: PropTypes.func
+} : void 0;

package/modern/YearPicker/index.js

@@ -0,0 +1,2 @@
+export { YearPicker } from './YearPicker';
+export { yearPickerClasses, getYearPickerUtilityClass } from './yearPickerClasses';

package/modern/YearPicker/yearPickerClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getYearPickerUtilityClass(slot) {
+  return generateUtilityClass('MuiYearPicker', slot);
+}
+export const yearPickerClasses = generateUtilityClasses('MuiYearPicker', ['root']);

package/modern/index.js

@@ -0,0 +1,24 @@
+/** @license MUI v5.0.0-alpha.0
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export * from './CalendarPicker';
+export * from './CalendarPickerSkeleton';
+export * from './ClockPicker';
+export * from './DatePicker';
+export * from './DateTimePicker';
+export * from './DesktopDatePicker';
+export * from './DesktopDateTimePicker';
+export * from './DesktopTimePicker';
+export * from './LocalizationProvider';
+export * from './MobileDatePicker';
+export * from './MobileDateTimePicker';
+export * from './MobileTimePicker';
+export * from './MonthPicker';
+export * from './PickersDay';
+export * from './StaticDatePicker';
+export * from './StaticDateTimePicker';
+export * from './StaticTimePicker';
+export * from './TimePicker';
+export * from './YearPicker';

package/modern/internals/components/CalendarOrClockPicker/CalendarOrClockPicker.js

@@ -0,0 +1,125 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["autoFocus", "className", "date", "DateInputProps", "isMobileKeyboardViewOpen", "onDateChange", "onViewChange", "openTo", "orientation", "showToolbar", "toggleMobileKeyboardView", "ToolbarComponent", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useViews } from '../../hooks/useViews';
+import { ClockPicker } from '../../../ClockPicker/ClockPicker';
+import { CalendarPicker } from '../../../CalendarPicker/CalendarPicker';
+import { KeyboardDateInput } from '../KeyboardDateInput';
+import { useIsLandscape } from '../../hooks/useIsLandscape';
+import { WrapperVariantContext } from '../wrappers/WrapperVariantContext';
+import { PickerViewRoot } from '../PickerViewRoot';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const MobileKeyboardInputView = styled('div')({
+  padding: '16px 24px'
+});
+const PickerRoot = styled('div')(({
+  ownerState
+}) => _extends({
+  display: 'flex',
+  flexDirection: 'column'
+}, ownerState.isLandscape && {
+  flexDirection: 'row'
+}));
+const MobileKeyboardTextFieldProps = {
+  fullWidth: true
+};
+
+const isDatePickerView = view => view === 'year' || view === 'month' || view === 'day';
+
+const isTimePickerView = view => view === 'hours' || view === 'minutes' || view === 'seconds';
+
+export function CalendarOrClockPicker(props) {
+  const {
+    autoFocus,
+    date,
+    DateInputProps,
+    isMobileKeyboardViewOpen,
+    onDateChange,
+    onViewChange,
+    openTo,
+    orientation,
+    showToolbar,
+    toggleMobileKeyboardView,
+    ToolbarComponent = () => null,
+    toolbarFormat,
+    toolbarPlaceholder,
+    toolbarTitle,
+    views
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const isLandscape = useIsLandscape(views, orientation);
+  const wrapperVariant = React.useContext(WrapperVariantContext);
+  const toShowToolbar = typeof showToolbar === 'undefined' ? wrapperVariant !== 'desktop' : showToolbar;
+  const handleDateChange = React.useCallback((newDate, selectionState) => {
+    onDateChange(newDate, wrapperVariant, selectionState);
+  }, [onDateChange, wrapperVariant]);
+  const handleViewChange = React.useCallback(newView => {
+    if (isMobileKeyboardViewOpen) {
+      toggleMobileKeyboardView();
+    }
+
+    if (onViewChange) {
+      onViewChange(newView);
+    }
+  }, [isMobileKeyboardViewOpen, onViewChange, toggleMobileKeyboardView]);
+  const {
+    openView,
+    setOpenView,
+    handleChangeAndOpenNext
+  } = useViews({
+    view: undefined,
+    views,
+    openTo,
+    onChange: handleDateChange,
+    onViewChange: handleViewChange
+  });
+  return /*#__PURE__*/_jsxs(PickerRoot, {
+    ownerState: {
+      isLandscape
+    },
+    children: [toShowToolbar && /*#__PURE__*/_jsx(ToolbarComponent, _extends({}, other, {
+      views: views,
+      isLandscape: isLandscape,
+      date: date,
+      onChange: handleDateChange,
+      setOpenView: setOpenView,
+      openView: openView,
+      toolbarTitle: toolbarTitle,
+      toolbarFormat: toolbarFormat,
+      toolbarPlaceholder: toolbarPlaceholder,
+      isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
+      toggleMobileKeyboardView: toggleMobileKeyboardView
+    })), /*#__PURE__*/_jsx(PickerViewRoot, {
+      children: isMobileKeyboardViewOpen ? /*#__PURE__*/_jsx(MobileKeyboardInputView, {
+        children: /*#__PURE__*/_jsx(KeyboardDateInput, _extends({}, DateInputProps, {
+          ignoreInvalidInputs: true,
+          disableOpenPicker: true,
+          TextFieldProps: MobileKeyboardTextFieldProps
+        }))
+      }) : /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [isDatePickerView(openView) && /*#__PURE__*/_jsx(CalendarPicker, _extends({
+          autoFocus: autoFocus,
+          date: date,
+          onViewChange: setOpenView,
+          onChange: handleChangeAndOpenNext,
+          view: openView // Unclear why the predicate `isDatePickerView` does not imply the casted type
+          ,
+          views: views.filter(isDatePickerView)
+        }, other)), isTimePickerView(openView) && /*#__PURE__*/_jsx(ClockPicker, _extends({}, other, {
+          autoFocus: autoFocus,
+          date: date,
+          view: openView // Unclear why the predicate `isDatePickerView` does not imply the casted type
+          ,
+          views: views.filter(isTimePickerView),
+          onChange: handleChangeAndOpenNext,
+          onViewChange: setOpenView,
+          showViewSwitcher: wrapperVariant === 'desktop'
+        }))]
+      })
+    })]
+  });
+}

package/modern/internals/components/CalendarOrClockPicker/index.js

@@ -0,0 +1 @@
+export { CalendarOrClockPicker } from './CalendarOrClockPicker';

package/modern/internals/components/KeyboardDateInput.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["components", "disableOpenPicker", "getOpenDialogAriaText", "InputAdornmentProps", "InputProps", "inputRef", "openPicker", "OpenPickerButtonProps", "renderInput"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import { useUtils } from '../hooks/useUtils';
+import { Calendar } from './icons';
+import { useMaskedInput } from '../hooks/useMaskedInput';
+import { getTextFieldAriaText } from '../utils/text-field-helper';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const KeyboardDateInput = /*#__PURE__*/React.forwardRef(function KeyboardDateInput(props, ref) {
+  const {
+    components = {},
+    disableOpenPicker,
+    getOpenDialogAriaText = getTextFieldAriaText,
+    InputAdornmentProps,
+    InputProps,
+    inputRef,
+    openPicker,
+    OpenPickerButtonProps,
+    renderInput
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const utils = useUtils();
+  const textFieldProps = useMaskedInput(other);
+  const adornmentPosition = InputAdornmentProps?.position || 'end';
+  const OpenPickerIcon = components.OpenPickerIcon || Calendar;
+  return renderInput(_extends({
+    ref,
+    inputRef
+  }, textFieldProps, {
+    InputProps: _extends({}, InputProps, {
+      [`${adornmentPosition}Adornment`]: disableOpenPicker ? undefined : /*#__PURE__*/_jsx(InputAdornment, _extends({
+        position: adornmentPosition
+      }, InputAdornmentProps, {
+        children: /*#__PURE__*/_jsx(IconButton, _extends({
+          edge: adornmentPosition,
+          disabled: other.disabled || other.readOnly,
+          "aria-label": getOpenDialogAriaText(other.rawValue, utils)
+        }, OpenPickerButtonProps, {
+          onClick: openPicker,
+          children: /*#__PURE__*/_jsx(OpenPickerIcon, {})
+        }))
+      }))
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? KeyboardDateInput.propTypes = {
+  acceptRegex: PropTypes.instanceOf(RegExp),
+  getOpenDialogAriaText: PropTypes.func,
+  mask: PropTypes.string,
+  OpenPickerButtonProps: PropTypes.object,
+  renderInput: PropTypes.func.isRequired,
+  rifmFormatter: PropTypes.func
+} : void 0;

package/modern/internals/components/PickerStaticWrapper/PickerStaticWrapper.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["displayStaticWrapperAs"];
+import * as React from 'react';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { DIALOG_WIDTH } from '../../constants/dimensions';
+import { WrapperVariantContext, IsStaticVariantContext } from '../wrappers/WrapperVariantContext';
+import { getStaticWrapperUtilityClass } from './pickerStaticWrapperClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getStaticWrapperUtilityClass, classes);
+};
+
+const PickerStaticWrapperRoot = styled('div', {
+  name: 'MuiPickerStaticWrapper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  overflow: 'hidden',
+  minWidth: DIALOG_WIDTH,
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: theme.palette.background.paper
+}));
+export function PickerStaticWrapper(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickerStaticWrapper'
+  });
+
+  const {
+    displayStaticWrapperAs
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const classes = useUtilityClasses(props);
+  const isStatic = true;
+  return /*#__PURE__*/_jsx(IsStaticVariantContext.Provider, {
+    value: isStatic,
+    children: /*#__PURE__*/_jsx(WrapperVariantContext.Provider, {
+      value: displayStaticWrapperAs,
+      children: /*#__PURE__*/_jsx(PickerStaticWrapperRoot, _extends({
+        className: classes.root
+      }, other))
+    })
+  });
+}

package/modern/internals/components/PickerStaticWrapper/index.js

@@ -0,0 +1,2 @@
+export { PickerStaticWrapper } from './PickerStaticWrapper';
+export { pickerStaticWrapperClasses, getStaticWrapperUtilityClass } from './pickerStaticWrapperClasses';

package/modern/internals/components/PickerStaticWrapper/pickerStaticWrapperClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getStaticWrapperUtilityClass(slot) {
+  return generateUtilityClass('MuiPickerStaticWrapper', slot);
+}
+export const pickerStaticWrapperClasses = generateUtilityClasses('MuiPickerStaticWrapper', ['root']);

package/modern/internals/components/PickerViewRoot/PickerViewRoot.js

@@ -0,0 +1,10 @@
+import { styled } from '@mui/material/styles';
+import { DIALOG_WIDTH, VIEW_HEIGHT } from '../../constants/dimensions';
+export const PickerViewRoot = styled('div')({
+  overflowX: 'hidden',
+  width: DIALOG_WIDTH,
+  maxHeight: VIEW_HEIGHT,
+  display: 'flex',
+  flexDirection: 'column',
+  margin: '0 auto'
+});

package/modern/internals/components/PickerViewRoot/index.js

@@ -0,0 +1 @@
+export { PickerViewRoot } from './PickerViewRoot';