@mui/x-date-pickers 7.0.0-alpha.5 → 7.0.0-alpha.7

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/useField/useField.js

@@ -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) {

package/node/internals/hooks/useViews.js

@@ -72,11 +72,12 @@ function useViews({
     onFocusedViewChange?.(viewToFocus, hasFocus);
   });
   const handleChangeView = (0, _useEventCallback.default)(newView => {
+    // always keep the focused view in sync
+    handleFocusedViewChange(newView, true);
     if (newView === view) {
       return;
     }
     setView(newView);
-    handleFocusedViewChange(newView, true);
     if (onViewChange) {
       onViewChange(newView);
     }
@@ -85,7 +86,6 @@ function useViews({
     if (nextView) {
       handleChangeView(nextView);
     }
-    handleFocusedViewChange(nextView, true);
   });
   const setValueAndGoToNextView = (0, _useEventCallback.default)((value, currentViewSelectionState, selectedView) => {
     const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
@@ -94,18 +94,19 @@ function useViews({
     // but when it's not the final view given all `views` -> overall selection state should be `partial`.
     views.indexOf(selectedView) < views.length - 1 : Boolean(nextView);
     const globalSelectionState = isSelectionFinishedOnCurrentView && hasMoreViews ? 'partial' : currentViewSelectionState;
-    onChange(value, globalSelectionState);
-    if (isSelectionFinishedOnCurrentView) {
+    onChange(value, globalSelectionState, selectedView);
+    // Detects if the selected view is not the active one.
+    // Can happen if multiple views are displayed, like in `DesktopDateTimePicker` or `MultiSectionDigitalClock`.
+    if (selectedView && selectedView !== view) {
+      const nextViewAfterSelected = views[views.indexOf(selectedView) + 1];
+      if (nextViewAfterSelected) {
+        // move to next view after the selected one
+        handleChangeView(nextViewAfterSelected);
+      }
+    } else if (isSelectionFinishedOnCurrentView) {
       goToNextView();
     }
   });
-  const setValueAndGoToView = (0, _useEventCallback.default)((value, newView, selectedView) => {
-    onChange(value, newView ? 'partial' : 'finish', selectedView);
-    if (newView) {
-      handleChangeView(newView);
-      handleFocusedViewChange(newView, true);
-    }
-  });
   return {
     view,
     setView: handleChangeView,
@@ -116,7 +117,6 @@ function useViews({
     // Always return up-to-date default view instead of the initial one (i.e. defaultView.current)
     defaultView: views.includes(openTo) ? openTo : views[0],
     goToNextView,
-    setValueAndGoToNextView,
-    setValueAndGoToView
+    setValueAndGoToNextView
   };
 }

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.5",
+  "version": "7.0.0-alpha.7",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -34,10 +34,10 @@
     "directory": "packages/x-date-pickers"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.5",
-    "@mui/base": "^5.0.0-beta.26",
-    "@mui/system": "^5.14.20",
-    "@mui/utils": "^5.14.20",
+    "@babel/runtime": "^7.23.7",
+    "@mui/base": "^5.0.0-beta.29",
+    "@mui/system": "^5.15.2",
+    "@mui/utils": "^5.15.2",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1",

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 {
-}