@mui/x-date-pickers 7.8.0 → 7.10.0

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

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _usePickersTranslations = require("../../../hooks/usePickersTranslations");
 var _useUtils = require("../useUtils");
 var _useField = require("./useField.utils");
 var _buildSectionsFromFormat = require("./buildSectionsFromFormat");
@@ -18,7 +19,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 && {}.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 useFieldState = params => {
   const utils = (0, _useUtils.useUtils)();
-  const localeText = (0, _useUtils.useLocaleText)();
+  const translations = (0, _usePickersTranslations.usePickersTranslations)();
   const adapter = (0, _useUtils.useLocalizationContext)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const {
@@ -57,7 +58,7 @@ const useFieldState = params => {
   const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, date => (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
     utils,
     timezone,
-    localeText,
+    localeText: translations,
     localizedDigits,
     format,
     date,
@@ -65,7 +66,7 @@ const useFieldState = params => {
     shouldRespectLeadingZeros,
     enableAccessibleFieldDOMStructure,
     isRtl
-  })), [fieldValueManager, format, localeText, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, timezone, enableAccessibleFieldDOMStructure]);
+  })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, timezone, enableAccessibleFieldDOMStructure]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
     (0, _useField.validateSections)(sections, valueType);
@@ -165,7 +166,7 @@ const useFieldState = params => {
       const sections = (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
         utils,
         timezone,
-        localeText,
+        localeText: translations,
         localizedDigits,
         format,
         date,

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

@@ -46,6 +46,7 @@ exports.addPositionPropertiesToSections = addPositionPropertiesToSections;
 const useFieldV6TextField = params => {
   const isRtl = (0, _RtlProvider.useRtl)();
   const focusTimeoutRef = React.useRef();
+  const selectionSyncTimeoutRef = React.useRef();
   const {
     forwardedProps: {
       onFocus,
@@ -113,10 +114,14 @@ const useFieldV6TextField = params => {
             inputRef.current.setSelectionRange(selectionStart, selectionEnd);
           }
         }
-        setTimeout(() => {
+        clearTimeout(selectionSyncTimeoutRef.current);
+        selectionSyncTimeoutRef.current = setTimeout(() => {
           // handle case when the selection is not updated correctly
           // could happen on Android
-          if (inputRef.current && inputRef.current === (0, _utils.getActiveElement)(document) && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
+          if (inputRef.current && inputRef.current === (0, _utils.getActiveElement)(document) &&
+          // The section might loose all selection, where `selectionStart === selectionEnd`
+          // https://github.com/mui/mui-x/pull/13652
+          inputRef.current.selectionStart === inputRef.current.selectionEnd && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
             interactions.syncSelectionToDOM();
           }
         });
@@ -128,8 +133,7 @@ const useFieldV6TextField = params => {
     getActiveSectionIndexFromDOM: () => {
       const browserStartIndex = inputRef.current.selectionStart ?? 0;
       const browserEndIndex = inputRef.current.selectionEnd ?? 0;
-      const isInputReadOnly = !!inputRef.current?.readOnly;
-      if (browserStartIndex === 0 && browserEndIndex === 0 || isInputReadOnly) {
+      if (browserStartIndex === 0 && browserEndIndex === 0) {
         return null;
       }
       const nextSectionIndex = browserStartIndex <= sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
@@ -144,10 +148,6 @@ const useFieldV6TextField = params => {
     isFieldFocused: () => inputRef.current === (0, _utils.getActiveElement)(document)
   }), [inputRef, parsedSelectedSections, sections, setSelectedSections]);
   const syncSelectionFromDOM = () => {
-    if (readOnly) {
-      setSelectedSections(null);
-      return;
-    }
     const browserStartIndex = inputRef.current.selectionStart ?? 0;
     let nextSectionIndex;
     if (browserStartIndex <= sections[0].startInInput) {
@@ -172,7 +172,7 @@ const useFieldV6TextField = params => {
       if (!input || input !== inputRef.current) {
         return;
       }
-      if (activeSectionIndex != null || readOnly) {
+      if (activeSectionIndex != null) {
         return;
       }
       if (
@@ -306,6 +306,7 @@ const useFieldV6TextField = params => {
     }
     return () => {
       clearTimeout(focusTimeoutRef.current);
+      clearTimeout(selectionSyncTimeoutRef.current);
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

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

@@ -12,6 +12,7 @@ var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedE
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useField = require("./useField.utils");
 var _utils = require("../../utils/utils");
+var _usePickersTranslations = require("../../../hooks/usePickersTranslations");
 var _useUtils = require("../useUtils");
 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 && {}.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; }
@@ -47,7 +48,7 @@ const useFieldV7TextField = params => {
   } = params;
   const sectionListRef = React.useRef(null);
   const handleSectionListRef = (0, _useForkRef.default)(inSectionListRef, sectionListRef);
-  const localeText = (0, _useUtils.useLocaleText)();
+  const translations = (0, _usePickersTranslations.usePickersTranslations)();
   const utils = (0, _useUtils.useUtils)();
   const id = (0, _useId.default)();
   const [focused, setFocused] = React.useState(false);
@@ -229,7 +230,7 @@ const useFieldV7TextField = params => {
   const getInputContainerClickHandler = (0, _useEventCallback.default)(sectionIndex => event => {
     // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
     // We avoid this by checking if the call to this function is actually intended, or a side effect.
-    if (event.isDefaultPrevented() || readOnly) {
+    if (event.isDefaultPrevented()) {
       return;
     }
     setSelectedSections(sectionIndex);
@@ -239,9 +240,6 @@ const useFieldV7TextField = params => {
     event.preventDefault();
   });
   const getInputContentFocusHandler = (0, _useEventCallback.default)(sectionIndex => () => {
-    if (readOnly) {
-      return;
-    }
     setSelectedSections(sectionIndex);
   });
   const handleInputContentPaste = (0, _useEventCallback.default)(event => {
@@ -350,8 +348,8 @@ const useFieldV7TextField = params => {
           'aria-valuenow': (0, _useField.getSectionValueNow)(section, utils),
           'aria-valuemin': sectionBoundaries[section.type].minimum,
           'aria-valuemax': sectionBoundaries[section.type].maximum,
-          'aria-valuetext': section.value ? (0, _useField.getSectionValueText)(section, utils) : localeText.empty,
-          'aria-label': localeText[section.type],
+          'aria-valuetext': section.value ? (0, _useField.getSectionValueText)(section, utils) : translations.empty,
+          'aria-label': translations[section.type],
           'aria-disabled': disabled,
           spellCheck: isEditable ? false : undefined,
           autoCapitalize: isEditable ? 'off' : undefined,
@@ -373,7 +371,7 @@ const useFieldV7TextField = params => {
         }
       };
     });
-  }, [state.sections, getInputContentFocusHandler, handleInputContentPaste, handleInputContentDragOver, handleInputContentInput, getInputContainerClickHandler, handleInputContentMouseUp, disabled, readOnly, isContainerEditable, localeText, utils, sectionBoundaries, id]);
+  }, [state.sections, getInputContentFocusHandler, handleInputContentPaste, handleInputContentDragOver, handleInputContentInput, getInputContainerClickHandler, handleInputContentMouseUp, disabled, readOnly, isContainerEditable, translations, utils, sectionBoundaries, id]);
   const handleValueStrChange = (0, _useEventCallback.default)(event => {
     updateValueFromValueStr(event.target.value);
   });

package/node/internals/hooks/useUtils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useUtils = exports.useNow = exports.useLocalizationContext = exports.useLocaleText = exports.useDefaultDates = void 0;
+exports.useUtils = exports.useNow = exports.useLocalizationContext = exports.useDefaultDates = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _LocalizationProvider = require("../../LocalizationProvider/LocalizationProvider");
@@ -29,8 +29,6 @@ const useUtils = () => useLocalizationContext().utils;
 exports.useUtils = useUtils;
 const useDefaultDates = () => useLocalizationContext().defaultDates;
 exports.useDefaultDates = useDefaultDates;
-const useLocaleText = () => useLocalizationContext().localeText;
-exports.useLocaleText = useLocaleText;
 const useNow = timezone => {
   const utils = useUtils();
   const now = React.useRef();

package/node/internals/index.js

@@ -213,6 +213,12 @@ Object.defineProperty(exports, "replaceInvalidDateByNull", {
     return _dateUtils.replaceInvalidDateByNull;
   }
 });
+Object.defineProperty(exports, "resolveDateTimeFormat", {
+  enumerable: true,
+  get: function () {
+    return _dateTimeUtils.resolveDateTimeFormat;
+  }
+});
 Object.defineProperty(exports, "resolveTimeViewsResponse", {
   enumerable: true,
   get: function () {
@@ -273,12 +279,6 @@ Object.defineProperty(exports, "useField", {
     return _useField.useField;
   }
 });
-Object.defineProperty(exports, "useLocaleText", {
-  enumerable: true,
-  get: function () {
-    return _useUtils.useLocaleText;
-  }
-});
 Object.defineProperty(exports, "useLocalizationContext", {
   enumerable: true,
   get: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "7.8.0",
+  "version": "7.10.0",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,8 +37,8 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.20",
-    "@mui/utils": "^5.15.20",
+    "@mui/system": "^5.16.0",
+    "@mui/utils": "^5.16.0",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",