@mui/x-date-pickers 7.0.0-alpha.4 → 7.0.0-alpha.6

package/node/internals/components/PickersTextField/PickersTextField.js

@@ -16,11 +16,18 @@ 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 _PickersInput = require("./PickersInput");
+var _PickersOutlinedInput = require("../PickersInput/PickersOutlinedInput");
+var _PickersFilledInput = require("../PickersInput/PickersFilledInput");
+var _PickersStandardInput = require("../PickersInput/PickersStandardInput");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "required", "variant", "InputProps", "inputProps", "inputRef", "sectionsContainerRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
+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,
+  filled: _PickersFilledInput.PickersFilledInput,
+  outlined: _PickersOutlinedInput.PickersOutlinedInput
+};
 const PickersTextFieldRoot = (0, _styles.styled)(_FormControl.default, {
   name: 'MuiPickersTextField',
   slot: 'Root',
@@ -47,13 +54,13 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       color = 'primary',
       disabled = false,
       error = false,
-      required = false,
       variant = 'outlined',
+      required = false,
       // Props used by PickersInput
       InputProps,
       inputProps,
       inputRef,
-      sectionsContainerRef,
+      sectionListRef,
       elements,
       areAllSectionsEmpty,
       onClick,
@@ -91,6 +98,7 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
     variant
   });
   const classes = useUtilityClasses(ownerState);
+  const PickersInputComponent = VARIANT_COMPONENT[variant];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersTextFieldRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ref: handleRootRef,
@@ -101,6 +109,7 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
     variant: variant,
     error: error,
     color: color,
+    fullWidth: fullWidth,
     required: required,
     ownerState: ownerState
   }, other, {
@@ -109,7 +118,7 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       id: inputLabelId
     }, InputLabelProps, {
       children: label
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersInput.PickersInput, (0, _extends2.default)({
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputComponent, (0, _extends2.default)({
       elements: elements,
       areAllSectionsEmpty: areAllSectionsEmpty,
       onClick: onClick,
@@ -126,7 +135,7 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       fullWidth: fullWidth,
       inputProps: inputProps,
       inputRef: inputRef,
-      sectionsContainerRef: sectionsContainerRef,
+      sectionListRef: sectionListRef,
       label: label
     }, InputProps)), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormHelperText.default, (0, _extends2.default)({
       id: helperTextId

package/node/internals/components/PickersTextField/pickersTextFieldClasses.js

@@ -1,17 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPickersInputUtilityClass = getPickersInputUtilityClass;
 exports.getPickersTextFieldUtilityClass = getPickersTextFieldUtilityClass;
-exports.pickersTextFieldClasses = exports.pickersInputClasses = void 0;
-var _utils = require("@mui/utils");
+exports.pickersTextFieldClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getPickersTextFieldUtilityClass(slot) {
-  return (0, _utils.unstable_generateUtilityClass)('MuiPickersTextField', slot);
+  return (0, _generateUtilityClass.default)('MuiPickersTextField', slot);
 }
-const pickersTextFieldClasses = exports.pickersTextFieldClasses = (0, _utils.unstable_generateUtilityClasses)('MuiPickersTextField', ['root', 'focused', 'disabled', 'error', 'required']);
-function getPickersInputUtilityClass(slot) {
-  return (0, _utils.unstable_generateUtilityClass)('MuiPickersInput', slot);
-}
-const pickersInputClasses = exports.pickersInputClasses = (0, _utils.unstable_generateUtilityClasses)('MuiPickersInput', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'adornedStart', 'adornedEnd', 'input', 'sectionsContainer', 'sectionContent', 'sectionBefore', 'sectionAfter']);
+const pickersTextFieldClasses = exports.pickersTextFieldClasses = (0, _generateUtilityClasses.default)('MuiPickersTextField', ['root', 'focused', 'disabled', 'error', 'required']);

package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -44,6 +44,7 @@ const useDesktopPicker = _ref => {
     format,
     formatDensity,
     timezone,
+    name,
     label,
     inputRef,
     readOnly,
@@ -111,6 +112,7 @@ const useDesktopPicker = _ref => {
       formatDensity,
       timezone,
       label,
+      name,
       autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined
     }),

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

@@ -18,7 +18,7 @@ var _useField = require("./useField.utils");
 var _useFieldState = require("./useFieldState");
 var _useFieldCharacterEditing = require("./useFieldCharacterEditing");
 var _utils = require("../../utils/utils");
-const _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error", "clearable", "onClear", "disabled"];
+const _excluded = ["inputRef", "onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error", "clearable", "onClear", "disabled"];
 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 useField = params => {
@@ -37,7 +37,6 @@ const useField = params => {
     timezone
   } = (0, _useFieldState.useFieldState)(params);
   const {
-      inputRef: inputRefProp,
       internalProps,
       internalProps: {
         readOnly = false,
@@ -45,6 +44,7 @@ const useField = params => {
         minutesStep
       },
       forwardedProps: {
+        inputRef: inputRefProp,
         onClick,
         onKeyDown,
         onFocus,
@@ -151,7 +151,14 @@ const useField = params => {
       const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
       const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
       if (isValidPastedValue) {
-        // Early return to let the paste update section, value
+        resetCharacterQuery();
+        updateSectionValue({
+          activeSection,
+          newSectionValue: pastedValue,
+          shouldGoToNextSection: true
+        });
+        // prevent default to avoid the input change handler being called
+        event.preventDefault();
         return;
       }
       if (lettersOnly || digitsOnly) {
@@ -436,7 +443,7 @@ const useField = params => {
     onMouseUp: handleInputMouseUp,
     onClear: handleClearValue,
     error: inputError,
-    ref: handleRef,
+    inputRef: handleRef,
     clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
   });
 };

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

@@ -207,7 +207,7 @@ const addPositionPropertiesToSections = (sections, isRTL) => {
 
     // The ...InInput values consider the unicode characters but do include them in their indexes
     const cleanedValue = cleanString(renderedValue);
-    const startInInput = positionInInput + renderedValue.indexOf(cleanedValue[0]) + section.startSeparator.length;
+    const startInInput = positionInInput + (cleanedValue === '' ? 0 : renderedValue.indexOf(cleanedValue[0])) + section.startSeparator.length;
     const endInInput = startInInput + cleanedValue.length;
     newSections.push((0, _extends2.default)({}, section, {
       start: position,
@@ -443,6 +443,21 @@ const splitFormatIntoSections = (utils, timezone, localeText, format, date, form
     }
   }
   commitToken(currentTokenValue);
+  if (sections.length === 0 && startSeparator.length > 0) {
+    sections.push({
+      type: 'empty',
+      contentType: 'letter',
+      maxLength: null,
+      format: '',
+      value: '',
+      placeholder: '',
+      hasLeadingZerosInFormat: false,
+      hasLeadingZerosInInput: false,
+      startSeparator,
+      endSeparator: '',
+      modified: false
+    });
+  }
   return sections.map(section => {
     const cleanSeparator = separator => {
       let cleanedSeparator = separator;
@@ -587,6 +602,10 @@ const getSectionsBoundaries = (utils, timezone) => {
     meridiem: () => ({
       minimum: 0,
       maximum: 0
+    }),
+    empty: () => ({
+      minimum: 0,
+      maximum: 0
     })
   };
 };
@@ -595,7 +614,7 @@ let warnedOnceInvalidSection = false;
 const validateSections = (sections, valueType) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnceInvalidSection) {
-      const supportedSections = [];
+      const supportedSections = ['empty'];
       if (['date', 'date-time'].includes(valueType)) {
         supportedSections.push('weekDay', 'day', 'month', 'year');
       }
@@ -604,7 +623,7 @@ const validateSections = (sections, valueType) => {
       }
       const invalidSection = sections.find(section => !supportedSections.includes(section.type));
       if (invalidSection) {
-        console.warn(`MUI: The field component you are using is not compatible with the "${invalidSection.type} date section.`, `The supported date sections are ["${supportedSections.join('", "')}"]\`.`);
+        console.warn(`MUI: The field component you are using is not compatible with the "${invalidSection.type}" date section.`, `The supported date sections are ["${supportedSections.join('", "')}"]\`.`);
         warnedOnceInvalidSection = true;
       }
     }
@@ -672,7 +691,8 @@ const reliableSectionModificationOrder = {
   hours: 5,
   minutes: 6,
   seconds: 7,
-  meridiem: 8
+  meridiem: 8,
+  empty: 9
 };
 const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
 // cloning sections before sort to avoid mutating it

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

@@ -103,17 +103,21 @@ const useFieldState = params => {
     if (typeof selectedSections === 'number') {
       return {
         startIndex: selectedSections,
-        endIndex: selectedSections
+        endIndex: selectedSections,
+        shouldSelectBoundarySelectors: state.sections[selectedSections].type === 'empty'
       };
     }
     if (typeof selectedSections === 'string') {
       const selectedSectionIndex = state.sections.findIndex(section => section.type === selectedSections);
       return {
         startIndex: selectedSectionIndex,
-        endIndex: selectedSectionIndex
+        endIndex: selectedSectionIndex,
+        shouldSelectBoundarySelectors: state.sections[selectedSectionIndex].type === 'empty'
       };
     }
-    return selectedSections;
+    return (0, _extends2.default)({}, selectedSections, {
+      shouldSelectBoundarySelectors: selectedSections.startIndex === selectedSections.endIndex && state.sections[selectedSections.startIndex].type === 'empty'
+    });
   }, [selectedSections, state.sections]);
   const publishValue = ({
     value,

package/node/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -41,6 +41,7 @@ const useMobilePicker = _ref => {
     format,
     formatDensity,
     timezone,
+    name,
     label,
     inputRef,
     readOnly,
@@ -81,7 +82,8 @@ const useMobilePicker = _ref => {
       format,
       formatDensity,
       timezone,
-      label
+      label,
+      name
     }),
     ownerState: props
   });

package/node/internals/index.js

@@ -87,6 +87,12 @@ Object.defineProperty(exports, "buildWarning", {
     return _warning.buildWarning;
   }
 });
+Object.defineProperty(exports, "convertFieldResponseIntoMuiTextFieldProps", {
+  enumerable: true,
+  get: function () {
+    return _convertFieldResponseIntoMuiTextFieldProps.convertFieldResponseIntoMuiTextFieldProps;
+  }
+});
 Object.defineProperty(exports, "createDateStrForInputFromSections", {
   enumerable: true,
   get: function () {
@@ -291,6 +297,7 @@ var _useStaticPicker = require("./hooks/useStaticPicker");
 var _useUtils = require("./hooks/useUtils");
 var _useValidation = require("./hooks/useValidation");
 var _dateHelpersHooks = require("./hooks/date-helpers-hooks");
+var _convertFieldResponseIntoMuiTextFieldProps = require("./utils/convertFieldResponseIntoMuiTextFieldProps");
 var _dateUtils = require("./utils/date-utils");
 var _fields = require("./utils/fields");
 var _getDefaultReferenceDate = require("./utils/getDefaultReferenceDate");

package/node/internals/utils/convertFieldResponseIntoMuiTextFieldProps.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertFieldResponseIntoMuiTextFieldProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+const _excluded = ["onPaste", "onKeyDown", "inputMode", "readOnly", "InputProps", "inputProps", "inputRef"];
+const convertFieldResponseIntoMuiTextFieldProps = fieldResponse => {
+  const {
+      onPaste,
+      onKeyDown,
+      inputMode,
+      readOnly,
+      InputProps,
+      inputProps,
+      inputRef
+    } = fieldResponse,
+    other = (0, _objectWithoutPropertiesLoose2.default)(fieldResponse, _excluded);
+  return (0, _extends2.default)({}, other, {
+    InputProps: (0, _extends2.default)({}, InputProps ?? {}, {
+      readOnly
+    }),
+    inputProps: (0, _extends2.default)({}, inputProps ?? {}, {
+      inputMode,
+      onPaste,
+      onKeyDown,
+      ref: inputRef
+    })
+  });
+};
+exports.convertFieldResponseIntoMuiTextFieldProps = convertFieldResponseIntoMuiTextFieldProps;

package/node/locales/ruRU.js

@@ -48,8 +48,7 @@ const ruRUPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Выберите дату, выбрана дата ${utils.format(value, 'fullDate')}` : 'Выберите дату',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Выберите время, выбрано время ${utils.format(value, 'fullTime')}` : 'Выберите время',
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'Очистить значение',
   // Table labels
   timeTableLabel: 'выбрать время',
   dateTableLabel: 'выбрать дату',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "7.0.0-alpha.4",
+  "version": "7.0.0-alpha.6",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -35,10 +35,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.5",
-    "@mui/base": "^5.0.0-beta.26",
-    "@mui/system": "^5.14.20",
-    "@mui/utils": "^5.14.20",
-    "@types/react-transition-group": "^4.4.9",
+    "@mui/base": "^5.0.0-beta.27",
+    "@mui/system": "^5.15.0",
+    "@mui/utils": "^5.15.0",
+    "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5"

package/themeAugmentation/overrides.d.ts

@@ -19,13 +19,11 @@ import { PickersLayoutClassKey } from '../PickersLayout';
 import { DatePickerToolbarClassKey } from '../DatePicker';
 import { TimePickerToolbarClassKey } from '../TimePicker';
 import { DateTimePickerToolbarClassKey, DateTimePickerTabsClassKey } from '../DateTimePicker';
-import {
-  PickersArrowSwitcherClassKey,
-  PickersPopperClassKey,
-  PickersToolbarButtonClassKey,
-  PickersToolbarClassKey,
-  PickersToolbarTextClassKey,
-} from '../internals';
+import { PickersArrowSwitcherClassKey } from '../internals/components/PickersArrowSwitcher';
+import { PickersToolbarClassKey } from '../internals/components/pickersToolbarClasses';
+import { PickersPopperClassKey } from '../internals/components/pickersPopperClasses';
+import { PickersToolbarButtonClassKey } from '../internals/components/pickersToolbarButtonClasses';
+import { PickersToolbarTextClassKey } from '../internals/components/pickersToolbarTextClasses';
 import { DigitalClockClassKey } from '../DigitalClock';
 import {
   MultiSectionDigitalClockClassKey,

package/themeAugmentation/props.d.ts

@@ -11,14 +11,12 @@ import { ExportedPickersYearProps, YearCalendarProps } from '../YearCalendar';
 import { DateFieldProps } from '../DateField';
 import { LocalizationProviderProps } from '../LocalizationProvider';
 import { PickersLayoutProps } from '../PickersLayout';
-import {
-  DayCalendarProps,
-  ExportedPickersArrowSwitcherProps,
-  PickerPopperProps,
-  PickersToolbarButtonProps,
-  PickersToolbarProps,
-  ExportedPickersToolbarTextProps,
-} from '../internals';
+import { DayCalendarProps } from '../DateCalendar/DayCalendar';
+import { ExportedPickersArrowSwitcherProps } from '../internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types';
+import { PickerPopperProps } from '../internals/components/PickersPopper';
+import { PickersToolbarProps } from '../internals/components/PickersToolbar';
+import { PickersToolbarButtonProps } from '../internals/components/PickersToolbarButton';
+import { ExportedPickersToolbarTextProps } from '../internals/components/PickersToolbarText';
 import { DateOrTimeView } from '../models';
 
 import { DatePickerProps, DatePickerToolbarProps } from '../DatePicker';

package/internals/components/PickersTextField/PickersInput.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { PickersInputProps } from './PickersInput.types';
-export declare const PickersInput: React.ForwardRefExoticComponent<Omit<PickersInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/internals/components/PickersTextField/PickersInput.types.d.ts

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { BoxProps } from '@mui/material/Box';
-export interface PickersInputElement {
-    container: React.HTMLAttributes<HTMLSpanElement>;
-    content: React.HTMLAttributes<HTMLSpanElement>;
-    before: React.HTMLAttributes<HTMLSpanElement>;
-    after: React.HTMLAttributes<HTMLSpanElement>;
-}
-export interface PickersInputPropsUsedByField {
-    /**
-     * The elements to render.
-     * Each element contains the prop to edit a section of the value.
-     */
-    elements: PickersInputElement[];
-    /**
-     * 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: boolean;
-    onClick: React.MouseEventHandler<HTMLDivElement>;
-    onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
-    onInput: React.FormEventHandler<HTMLDivElement>;
-    onPaste: React.ClipboardEventHandler<HTMLDivElement>;
-    endAdornment?: React.ReactNode;
-    startAdornment?: React.ReactNode;
-    tabIndex: number | undefined;
-    contentEditable: boolean;
-    value: string;
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
-    label?: React.ReactNode;
-    id?: string;
-    fullWidth?: boolean;
-    readOnly?: boolean;
-    inputProps?: React.HTMLAttributes<HTMLInputElement> & {
-        ref?: React.Ref<HTMLInputElement>;
-    };
-    inputRef?: React.Ref<HTMLInputElement>;
-    sectionsContainerRef?: React.Ref<HTMLDivElement>;
-}
-export interface PickersInputOtherProps extends Omit<BoxProps, keyof PickersInputPropsUsedByField> {
-    ref?: React.Ref<HTMLDivElement>;
-}
-export interface PickersInputProps extends PickersInputPropsUsedByField, PickersInputOtherProps {
-}