@mui/x-date-pickers 7.0.0-alpha.8 → 7.0.0-beta.0

package/node/{internals/components/PickersTextField → PickersTextField}/PickersTextField.js

@@ -8,23 +8,25 @@ exports.PickersTextField = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 var _pickersTextFieldClasses = require("./pickersTextFieldClasses");
-var _PickersOutlinedInput = require("../PickersInput/PickersOutlinedInput");
-var _PickersFilledInput = require("../PickersInput/PickersFilledInput");
-var _PickersStandardInput = require("../PickersInput/PickersStandardInput");
+var _PickersOutlinedInput = require("./PickersOutlinedInput");
+var _PickersFilledInput = require("./PickersFilledInput");
+var _PickersInput = require("./PickersInput");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const VARIANT_COMPONENT = {
-  standard: _PickersStandardInput.PickersStandardInput,
+  standard: _PickersInput.PickersInput,
   filled: _PickersFilledInput.PickersFilledInput,
   outlined: _PickersOutlinedInput.PickersOutlinedInput
 };
@@ -43,9 +45,13 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', focused && !disabled && 'focused', disabled && 'disabled', required && 'required']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _pickersTextFieldClasses.getPickersTextFieldUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _pickersTextFieldClasses.getPickersTextFieldUtilityClass, classes);
 };
-const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(props, ref) {
+const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiPickersTextField'
+  });
   const {
       // Props used by FormControl
       onFocus,
@@ -86,7 +92,7 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootRef = React.useRef(null);
   const handleRootRef = (0, _useForkRef.default)(ref, rootRef);
-  const id = (0, _utils.unstable_useId)(idProp);
+  const id = (0, _useId.default)(idProp);
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;
   const ownerState = (0, _extends2.default)({}, props, {
@@ -143,4 +149,117 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       children: helperText
     }))]
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty: _propTypes.default.bool.isRequired,
+  className: _propTypes.default.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: _propTypes.default.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: _propTypes.default.elementType,
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: _propTypes.default.bool.isRequired,
+  disabled: _propTypes.default.bool.isRequired,
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: _propTypes.default.arrayOf(_propTypes.default.shape({
+    after: _propTypes.default.object.isRequired,
+    before: _propTypes.default.object.isRequired,
+    container: _propTypes.default.object.isRequired,
+    content: _propTypes.default.object.isRequired
+  })).isRequired,
+  endAdornment: _propTypes.default.node,
+  error: _propTypes.default.bool.isRequired,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: _propTypes.default.bool,
+  FormHelperTextProps: _propTypes.default.object,
+  fullWidth: _propTypes.default.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: _propTypes.default.node,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  InputLabelProps: _propTypes.default.object,
+  inputProps: _propTypes.default.object,
+  /**
+   * Props applied to the Input element.
+   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * component depending on the `variant` prop value.
+   */
+  InputProps: _propTypes.default.object,
+  inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.object
+  })]),
+  label: _propTypes.default.node,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: _propTypes.default.oneOf(['dense', 'none', 'normal']),
+  onBlur: _propTypes.default.func.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  onClick: _propTypes.default.func.isRequired,
+  onFocus: _propTypes.default.func.isRequired,
+  onInput: _propTypes.default.func.isRequired,
+  onKeyDown: _propTypes.default.func.isRequired,
+  onPaste: _propTypes.default.func.isRequired,
+  readOnly: _propTypes.default.bool,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required: _propTypes.default.bool,
+  sectionListRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      getRoot: _propTypes.default.func.isRequired,
+      getSectionContainer: _propTypes.default.func.isRequired,
+      getSectionContent: _propTypes.default.func.isRequired,
+      getSectionIndexFromDOMElement: _propTypes.default.func.isRequired
+    })
+  })]),
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: _propTypes.default.oneOf(['medium', 'small']),
+  startAdornment: _propTypes.default.node,
+  style: _propTypes.default.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  value: _propTypes.default.string.isRequired,
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: _propTypes.default.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;

package/node/PickersTextField/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  PickersTextField: true,
+  pickersTextFieldClasses: true,
+  getPickersTextFieldUtilityClass: true
+};
+Object.defineProperty(exports, "PickersTextField", {
+  enumerable: true,
+  get: function () {
+    return _PickersTextField.PickersTextField;
+  }
+});
+Object.defineProperty(exports, "getPickersTextFieldUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _pickersTextFieldClasses.getPickersTextFieldUtilityClass;
+  }
+});
+Object.defineProperty(exports, "pickersTextFieldClasses", {
+  enumerable: true,
+  get: function () {
+    return _pickersTextFieldClasses.pickersTextFieldClasses;
+  }
+});
+var _PickersTextField = require("./PickersTextField");
+var _pickersTextFieldClasses = require("./pickersTextFieldClasses");
+var _PickersInput = require("./PickersInput");
+Object.keys(_PickersInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PickersInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PickersInput[key];
+    }
+  });
+});
+var _PickersFilledInput = require("./PickersFilledInput");
+Object.keys(_PickersFilledInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PickersFilledInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PickersFilledInput[key];
+    }
+  });
+});
+var _PickersOutlinedInput = require("./PickersOutlinedInput");
+Object.keys(_PickersOutlinedInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PickersOutlinedInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PickersOutlinedInput[key];
+    }
+  });
+});
+var _PickersInputBase = require("./PickersInputBase");
+Object.keys(_PickersInputBase).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PickersInputBase[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PickersInputBase[key];
+    }
+  });
+});

package/node/StaticDatePicker/StaticDatePicker.js

@@ -68,9 +68,6 @@ StaticDatePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * Formats the day of week displayed in the calendar header.

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -88,9 +88,6 @@ StaticDateTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * Formats the day of week displayed in the calendar header.

package/node/StaticTimePicker/StaticTimePicker.js

@@ -80,9 +80,6 @@ StaticTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * The default value.

package/node/TimeClock/TimeClock.js

@@ -226,7 +226,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
         {
           const handleHoursChange = (hourValue, isFinish) => {
             const valueWithMeridiem = (0, _timeUtils.convertValueToMeridiem)(hourValue, meridiemMode, ampm);
-            setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish);
+            setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish, 'hours');
           };
           return {
             onChange: handleHoursChange,
@@ -246,7 +246,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
         {
           const minutesValue = utils.getMinutes(valueOrReferenceDate);
           const handleMinutesChange = (minuteValue, isFinish) => {
-            setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minuteValue), isFinish);
+            setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minuteValue), isFinish, 'minutes');
           };
           return {
             viewValue: minutesValue,
@@ -265,7 +265,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
         {
           const secondsValue = utils.getSeconds(valueOrReferenceDate);
           const handleSecondsChange = (secondValue, isFinish) => {
-            setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, secondValue), isFinish);
+            setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, secondValue), isFinish, 'seconds');
           };
           return {
             viewValue: secondsValue,

package/node/TimePicker/TimePicker.js

@@ -74,9 +74,6 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/node/TimePicker/TimePickerToolbar.js

@@ -222,9 +222,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   ampm: _propTypes.default.bool,
   ampmInClock: _propTypes.default.bool,
   classes: _propTypes.default.object,
-  /**
-   * className applied to the root component.
-   */
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   /**

package/node/YearCalendar/YearCalendar.js

@@ -273,9 +273,6 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
-  /**
-   * className applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * The default selected value.

package/node/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -146,23 +146,23 @@ const renderDesktopDateTimeView = ({
           view: 'hours',
           views: ['hours'],
           focusedView: focusedView && (0, _timeUtils.isInternalTimeView)(focusedView) ? 'hours' : null,
-          sx: (0, _extends2.default)({
+          sx: [{
             width: 'auto',
             [`&.${_DigitalClock.digitalClockClasses.root}`]: {
               maxHeight: _dimensions.VIEW_HEIGHT
             }
-          }, Array.isArray(sx) ? sx : [sx])
+          }, ...(Array.isArray(sx) ? sx : [sx])]
         })) : (0, _timeViewRenderers.renderMultiSectionDigitalClockTimeView)((0, _extends2.default)({}, commonTimeProps, {
           view: (0, _timeUtils.isInternalTimeView)(view) ? view : 'hours',
           views: views.filter(_timeUtils.isInternalTimeView),
           focusedView: focusedView && (0, _timeUtils.isInternalTimeView)(focusedView) ? focusedView : null,
-          sx: (0, _extends2.default)({
+          sx: [{
             borderBottom: 0,
             width: 'auto',
             [`.${_MultiSectionDigitalClock.multiSectionDigitalClockSectionClasses.root}`]: {
               maxHeight: '100%'
             }
-          }, Array.isArray(sx) ? sx : [sx])
+          }, ...(Array.isArray(sx) ? sx : [sx])]
         }))]
       })]
     }), isActionBarVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {})]

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-alpha.8
+ * @mui/x-date-pickers v7.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -79,15 +79,15 @@ Object.keys(_PickersDay).forEach(function (key) {
     }
   });
 });
-var _locales = require("./locales");
-Object.keys(_locales).forEach(function (key) {
+var _pickersLocaleTextApi = require("./locales/utils/pickersLocaleTextApi");
+Object.keys(_pickersLocaleTextApi).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _locales[key]) return;
+  if (key in exports && exports[key] === _pickersLocaleTextApi[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _locales[key];
+      return _pickersLocaleTextApi[key];
     }
   });
 });
@@ -391,6 +391,18 @@ Object.keys(_PickersCalendarHeader).forEach(function (key) {
     }
   });
 });
+var _PickersTextField = require("./PickersTextField");
+Object.keys(_PickersTextField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PickersTextField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PickersTextField[key];
+    }
+  });
+});
 var _PickersSectionList = require("./PickersSectionList");
 Object.keys(_PickersSectionList).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/internals/hooks/useField/useField.js

@@ -33,6 +33,7 @@ const useField = params => {
     updateValueFromValueStr,
     setTempAndroidValueStr,
     sectionsValueBoundaries,
+    localizedDigits,
     placeholder,
     timezone
   } = (0, _useFieldState.useFieldState)(params);
@@ -68,6 +69,7 @@ const useField = params => {
     sections: state.sections,
     updateSectionValue,
     sectionsValueBoundaries,
+    localizedDigits,
     setTempAndroidValueStr,
     timezone
   });
@@ -199,7 +201,7 @@ const useField = params => {
     if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1 && cleanValueStr.length === 1) {
       keyPressed = cleanValueStr;
     } else {
-      const prevValueStr = (0, _useField.cleanString)(fieldValueManager.getValueStrFromSections(state.sections, isRTL));
+      const prevValueStr = (0, _useField.cleanString)(fieldValueManager.getValueStrFromSections(state.sections, localizedDigits, isRTL));
       let startOfDiffIndex = -1;
       let endOfDiffIndex = -1;
       for (let i = 0; i < prevValueStr.length; i += 1) {
@@ -309,7 +311,7 @@ const useField = params => {
           }
           const activeSection = state.sections[selectedSectionIndexes.startIndex];
           const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          const newSectionValue = (0, _useField.adjustSectionValue)(utils, timezone, activeSection, event.key, sectionsValueBoundaries, activeDateManager.date, {
+          const newSectionValue = (0, _useField.adjustSectionValue)(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, activeDateManager.date, {
             minutesStep
           });
           updateSectionValue({
@@ -392,7 +394,7 @@ const useField = params => {
     }
   }, [state.tempValueStrAndroid]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getValueStrFromSections(state.sections, isRTL), [state.sections, fieldValueManager, state.tempValueStrAndroid, isRTL]);
+  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getValueStrFromSections(state.sections, localizedDigits, isRTL), [state.sections, fieldValueManager, state.tempValueStrAndroid, localizedDigits, isRTL]);
   const inputMode = React.useMemo(() => {
     if (selectedSectionIndexes == null) {
       return 'text';