@mui/x-date-pickers 7.0.0-alpha.2 → 7.0.0-alpha.3

package/modern/AdapterMomentHijri/AdapterMomentHijri.js

@@ -198,21 +198,6 @@ export class AdapterMomentHijri extends AdapterMoment {
     this.setDate = (value, date) => {
       return value.clone().iDate(date);
     };
-    this.getWeekArray = value => {
-      const start = value.clone().startOf('iMonth').startOf('week');
-      const end = value.clone().endOf('iMonth').endOf('week');
-      let count = 0;
-      let current = start;
-      const nestedWeeks = [];
-      while (current.isBefore(end)) {
-        const weekNumber = Math.floor(count / 7);
-        nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
-        nestedWeeks[weekNumber].push(current);
-        current = current.clone().add(1, 'day');
-        count += 1;
-      }
-      return nestedWeeks;
-    };
     this.getWeekNumber = value => {
       return value.iWeek();
     };
@@ -225,15 +210,7 @@ export class AdapterMomentHijri extends AdapterMoment {
       if (end.isAfter('2076-11-26')) {
         throw new Error('max date must be on or before 1499-12-29 H (2076-11-26)');
       }
-      const startDate = this.moment(start).startOf('iYear');
-      const endDate = this.moment(end).endOf('iYear');
-      const years = [];
-      let current = startDate;
-      while (current.isBefore(endDate)) {
-        years.push(current);
-        current = current.clone().add(1, 'iYear');
-      }
-      return years;
+      return super.getYearRange([start, end]);
     };
     this.moment = instance || defaultHMoment;
     this.locale = 'ar-SA';

package/modern/AdapterMomentJalaali/AdapterMomentJalaali.js

@@ -212,35 +212,9 @@ export class AdapterMomentJalaali extends AdapterMoment {
     this.setDate = (value, date) => {
       return value.clone().jDate(date);
     };
-    this.getWeekArray = value => {
-      const start = value.clone().startOf('jMonth').startOf('week');
-      const end = value.clone().endOf('jMonth').endOf('week');
-      let count = 0;
-      let current = start;
-      const nestedWeeks = [];
-      while (current.isBefore(end)) {
-        const weekNumber = Math.floor(count / 7);
-        nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
-        nestedWeeks[weekNumber].push(current);
-        current = current.clone().add(1, 'day');
-        count += 1;
-      }
-      return nestedWeeks;
-    };
     this.getWeekNumber = value => {
       return value.jWeek();
     };
-    this.getYearRange = ([start, end]) => {
-      const startDate = this.moment(start).startOf('jYear');
-      const endDate = this.moment(end).endOf('jYear');
-      const years = [];
-      let current = startDate;
-      while (current.isBefore(endDate)) {
-        years.push(current);
-        current = current.clone().add(1, 'jYear');
-      }
-      return years;
-    };
     this.moment = instance || defaultJMoment;
     this.locale = 'fa';
     this.formats = _extends({}, defaultFormats, formats);

package/modern/DateCalendar/DateCalendar.js

@@ -393,8 +393,8 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * Calendar will show more weeks in order to match this value.
-   * Put it to 6 for having fix number of week in Gregorian calendars
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,

package/modern/DatePicker/DatePicker.js

@@ -112,8 +112,8 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * Calendar will show more weeks in order to match this value.
-   * Put it to 6 for having fix number of week in Gregorian calendars
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,

package/modern/DateTimePicker/DateTimePicker.js

@@ -127,8 +127,8 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * Calendar will show more weeks in order to match this value.
-   * Put it to 6 for having fix number of week in Gregorian calendars
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -126,8 +126,8 @@ DesktopDatePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * Calendar will show more weeks in order to match this value.
-   * Put it to 6 for having fix number of week in Gregorian calendars
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -180,8 +180,8 @@ DesktopDateTimePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * Calendar will show more weeks in order to match this value.
-   * Put it to 6 for having fix number of week in Gregorian calendars
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -123,8 +123,8 @@ MobileDatePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * Calendar will show more weeks in order to match this value.
-   * Put it to 6 for having fix number of week in Gregorian calendars
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -149,8 +149,8 @@ MobileDateTimePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * Calendar will show more weeks in order to match this value.
-   * Put it to 6 for having fix number of week in Gregorian calendars
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -249,6 +249,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
             },
             items: getTimeSectionOptions({
               value: utils.getMinutes(valueOrReferenceDate),
+              utils,
               isDisabled: minutes => disabled || isTimeDisabled(minutes, 'minutes'),
               resolveLabel: minutes => utils.format(utils.setMinutes(now, minutes), 'minutes'),
               timeStep: timeSteps.minutes,
@@ -265,6 +266,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
             },
             items: getTimeSectionOptions({
               value: utils.getSeconds(valueOrReferenceDate),
+              utils,
               isDisabled: seconds => disabled || isTimeDisabled(seconds, 'seconds'),
               resolveLabel: seconds => utils.format(utils.setSeconds(now, seconds), 'seconds'),
               timeStep: timeSteps.seconds,

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js

@@ -44,6 +44,7 @@ export const getHourSectionOptions = ({
 };
 export const getTimeSectionOptions = ({
   value,
+  utils,
   isDisabled,
   timeStep,
   resolveLabel,
@@ -65,7 +66,7 @@ export const getTimeSectionOptions = ({
     const timeValue = timeStep * index;
     return {
       value: timeValue,
-      label: resolveLabel(timeValue),
+      label: utils.formatNumber(resolveLabel(timeValue)),
       isDisabled,
       isSelected,
       isFocused,

package/modern/PickersShortcuts/PickersShortcuts.js

@@ -21,7 +21,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function PickersShortcuts(props) {
   const {
       items,
-      changeImportance,
+      changeImportance = 'accept',
       onChange,
       isValid
     } = props,

package/modern/StaticDatePicker/StaticDatePicker.js

@@ -105,8 +105,8 @@ StaticDatePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * Calendar will show more weeks in order to match this value.
-   * Put it to 6 for having fix number of week in Gregorian calendars
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,

package/modern/StaticDateTimePicker/StaticDateTimePicker.js

@@ -130,8 +130,8 @@ StaticDateTimePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * Calendar will show more weeks in order to match this value.
-   * Put it to 6 for having fix number of week in Gregorian calendars
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-alpha.2
+ * @mui/x-date-pickers v7.0.0-alpha.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/PickersTextField/Outline.js

@@ -0,0 +1,99 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["children", "classes", "className", "label", "notched"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const OutlineRoot = styled('fieldset')({
+  textAlign: 'left',
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  top: -5,
+  left: 0,
+  margin: 0,
+  padding: '0 8px',
+  pointerEvents: 'none',
+  borderRadius: 'inherit',
+  borderStyle: 'solid',
+  borderWidth: 1,
+  overflow: 'hidden',
+  minWidth: '0%'
+});
+const OutlineLegend = styled('legend')(({
+  ownerState,
+  theme
+}) => _extends({
+  float: 'unset',
+  // Fix conflict with bootstrap
+  width: 'auto',
+  // Fix conflict with bootstrap
+  overflow: 'hidden'
+}, !ownerState.withLabel && {
+  padding: 0,
+  lineHeight: '11px',
+  // sync with `height` in `legend` styles
+  transition: theme.transitions.create('width', {
+    duration: 150,
+    easing: theme.transitions.easing.easeOut
+  })
+}, ownerState.withLabel && _extends({
+  display: 'block',
+  // Fix conflict with normalize.css and sanitize.css
+  padding: 0,
+  height: 11,
+  // sync with `lineHeight` in `legend` styles
+  fontSize: '0.75em',
+  visibility: 'hidden',
+  maxWidth: 0.01,
+  transition: theme.transitions.create('max-width', {
+    duration: 50,
+    easing: theme.transitions.easing.easeOut
+  }),
+  whiteSpace: 'nowrap',
+  '& > span': {
+    paddingLeft: 5,
+    paddingRight: 5,
+    display: 'inline-block',
+    opacity: 0,
+    visibility: 'visible'
+  }
+}, ownerState.notched && {
+  maxWidth: '100%',
+  transition: theme.transitions.create('max-width', {
+    duration: 100,
+    easing: theme.transitions.easing.easeOut,
+    delay: 50
+  })
+})));
+export default function Outline(props) {
+  const {
+      className,
+      label,
+      notched
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const withLabel = label != null && label !== '';
+  const ownerState = _extends({}, props, {
+    notched,
+    withLabel
+  });
+  return /*#__PURE__*/_jsx(OutlineRoot, _extends({
+    "aria-hidden": true,
+    className: className,
+    ownerState: ownerState
+  }, other, {
+    children: /*#__PURE__*/_jsx(OutlineLegend, {
+      ownerState: ownerState,
+      children: withLabel ? /*#__PURE__*/_jsx("span", {
+        children: label
+      }) :
+      /*#__PURE__*/
+      // notranslate needed while Google Translate will not fix zero-width space issue
+      _jsx("span", {
+        className: "notranslate",
+        children: "\u200B"
+      })
+    })
+  }));
+}

package/modern/internals/components/PickersTextField/PickersInput.js

@@ -0,0 +1,264 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["elements", "defaultValue", "label", "onFocus", "onWrapperClick", "onBlur", "valueStr", "onValueStrChange", "id", "InputProps", "inputProps", "autoFocus", "ownerState", "endAdornment", "startAdornment"];
+import * as React from 'react';
+import clsx from 'clsx';
+import Box from '@mui/material/Box';
+import { useFormControl } from '@mui/material/FormControl';
+import { styled } from '@mui/material/styles';
+import useForkRef from '@mui/utils/useForkRef';
+import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, visuallyHidden } from '@mui/utils';
+import { pickersInputClasses, getPickersInputUtilityClass } from './pickersTextFieldClasses';
+import Outline from './Outline';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SectionsWrapper = styled(Box, {
+  name: 'MuiPickersInput',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme,
+  ownerState
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+  return _extends({
+    cursor: 'text',
+    padding: '16.5px 14px',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: ownerState.fullWidth ? '100%' : '25ch',
+    position: 'relative',
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    [`&:hover .${pickersInputClasses.notchedOutline}`]: {
+      borderColor: (theme.vars || theme).palette.text.primary
+    },
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      [`&:hover .${pickersInputClasses.notchedOutline}`]: {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+      }
+    },
+    [`&.${pickersInputClasses.focused} .${pickersInputClasses.notchedOutline}`]: {
+      borderStyle: 'solid',
+      borderColor: (theme.vars || theme).palette[ownerState.color].main,
+      borderWidth: 2
+    },
+    [`&.${pickersInputClasses.disabled}`]: {
+      [`& .${pickersInputClasses.notchedOutline}`]: {
+        borderColor: (theme.vars || theme).palette.action.disabled
+      },
+      '*': {
+        color: (theme.vars || theme).palette.action.disabled
+      }
+    },
+    [`&.${pickersInputClasses.error} .${pickersInputClasses.notchedOutline}`]: {
+      borderColor: (theme.vars || theme).palette.error.main
+    }
+  }, ownerState.size === 'small' && {
+    padding: '8.5px 14px'
+  });
+});
+const SectionsContainer = styled('div', {
+  name: 'MuiPickersInput',
+  slot: 'Input',
+  overridesResolver: (props, styles) => styles.input
+})(({
+  theme,
+  ownerState
+}) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: 'inherit',
+  lineHeight: '1.4375em',
+  // 23px
+  flexGrow: 1,
+  visibility: ownerState.adornedStart || ownerState.focused ? 'visible' : 'hidden'
+}));
+const SectionContainer = styled('span', {
+  name: 'MuiPickersInput',
+  slot: 'Section',
+  overridesResolver: (props, styles) => styles.section
+})(({
+  theme
+}) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: 'inherit',
+  lineHeight: '1.4375em',
+  // 23px
+  flexGrow: 1
+}));
+const SectionInput = styled('span', {
+  name: 'MuiPickersInput',
+  slot: 'Content',
+  overridesResolver: (props, styles) => styles.content
+})(({
+  theme
+}) => ({
+  fontFamily: theme.typography.fontFamily,
+  lineHeight: '1.4375em',
+  // 23px
+  letterSpacing: 'inherit',
+  width: 'fit-content'
+}));
+const SectionSeparator = styled('span', {
+  name: 'MuiPickersInput',
+  slot: 'Separator',
+  overridesResolver: (props, styles) => styles.separator
+})(() => ({
+  whiteSpace: 'pre'
+}));
+const FakeHiddenInput = styled('input', {
+  name: 'MuiPickersInput',
+  slot: 'HiddenInput',
+  overridesResolver: (props, styles) => styles.hiddenInput
+})(_extends({}, visuallyHidden));
+const NotchedOutlineRoot = styled(Outline, {
+  name: 'MuiPickersInput',
+  slot: 'NotchedOutline',
+  overridesResolver: (props, styles) => styles.notchedOutline
+})(({
+  theme
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+  return {
+    borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+  };
+});
+function InputContent({
+  elements,
+  contentEditable,
+  ownerState
+}) {
+  if (contentEditable) {
+    return elements.map(({
+      content,
+      before,
+      after
+    }) => `${before.children}${content.children}${after.children}`).join('');
+  }
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: elements.map(({
+      container,
+      content,
+      before,
+      after
+    }, elementIndex) => /*#__PURE__*/_jsxs(SectionContainer, _extends({}, container, {
+      children: [/*#__PURE__*/_jsx(SectionSeparator, _extends({}, before, {
+        className: clsx(pickersInputClasses.before, before?.className)
+      })), /*#__PURE__*/_jsx(SectionInput, _extends({}, content, {
+        className: clsx(pickersInputClasses.content, content?.className),
+        ownerState
+      })), /*#__PURE__*/_jsx(SectionSeparator, _extends({}, after, {
+        className: clsx(pickersInputClasses.after, after?.className)
+      }))]
+    }), elementIndex))
+  });
+}
+const useUtilityClasses = ownerState => {
+  const {
+    focused,
+    disabled,
+    error,
+    classes,
+    fullWidth,
+    color,
+    size,
+    endAdornment,
+    startAdornment
+  } = ownerState;
+  const slots = {
+    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', `color${capitalize(color)}`, size === 'small' && 'inputSizeSmall', Boolean(startAdornment) && 'adornedStart', Boolean(endAdornment) && 'adornedEnd'],
+    notchedOutline: ['notchedOutline'],
+    before: ['before'],
+    after: ['after'],
+    content: ['content'],
+    input: ['input']
+  };
+  return composeClasses(slots, getPickersInputUtilityClass, classes);
+};
+
+// TODO: move to utils
+// Separates the state props from the form control
+function formControlState({
+  props,
+  states,
+  muiFormControl
+}) {
+  return states.reduce((acc, state) => {
+    acc[state] = props[state];
+    if (muiFormControl) {
+      if (typeof props[state] === 'undefined') {
+        acc[state] = muiFormControl[state];
+      }
+    }
+    return acc;
+  }, {});
+}
+const PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(props, ref) {
+  const {
+      elements,
+      label,
+      onWrapperClick,
+      valueStr,
+      onValueStrChange,
+      id,
+      ownerState: ownerStateProp,
+      endAdornment,
+      startAdornment
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const inputRef = React.useRef(null);
+  const handleInputRef = useForkRef(ref, inputRef);
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['color', 'disabled', 'error', 'focused', 'size', 'required', 'fullWidth', 'adornedStart']
+  });
+  React.useEffect(() => {
+    if (muiFormControl) {
+      muiFormControl.setAdornedStart(Boolean(startAdornment));
+    }
+  }, [muiFormControl, startAdornment]);
+  const ownerState = _extends({}, props, ownerStateProp, {
+    color: fcs.color || 'primary',
+    disabled: fcs.disabled,
+    error: fcs.error,
+    focused: fcs.focused,
+    fullWidth: fcs.fullWidth,
+    size: fcs.size
+  });
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsxs(SectionsWrapper, _extends({
+    ref: handleInputRef
+  }, other, {
+    className: classes.root,
+    onClick: onWrapperClick,
+    ownerState: ownerState,
+    "aria-invalid": fcs.error,
+    children: [startAdornment, /*#__PURE__*/_jsxs(SectionsContainer, {
+      ownerState: ownerState,
+      className: classes.input,
+      children: [/*#__PURE__*/_jsx(InputContent, {
+        elements: elements,
+        contentEditable: other.contentEditable,
+        ownerState: ownerState
+      }), /*#__PURE__*/_jsx(FakeHiddenInput, {
+        value: valueStr,
+        onChange: onValueStrChange,
+        id: id,
+        "aria-hidden": "true",
+        tabIndex: -1
+      })]
+    }), endAdornment, /*#__PURE__*/_jsx(NotchedOutlineRoot, {
+      shrink: fcs.adornedStart || fcs.focused,
+      notched: fcs.adornedStart || fcs.focused,
+      className: classes.notchedOutline,
+      label: label != null && label !== '' && fcs.required ? /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [label, "\u2009", '*']
+      }) : label,
+      ownerState: ownerState
+    })]
+  }));
+});
+export default PickersInput;

package/modern/internals/components/PickersTextField/PickersInput.types.js

@@ -0,0 +1 @@
+export {};