@mui/x-date-pickers 6.0.3 → 6.1.0

package/node/DateCalendar/PickersCalendarHeader.js

@@ -20,7 +20,7 @@ var _PickersArrowSwitcher = require("../internals/components/PickersArrowSwitche
 var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 var _pickersCalendarHeaderClasses = require("./pickersCalendarHeaderClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ownerState"];
+const _excluded = ["ownerState"]; // We keep the interface to allow module augmentation
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -109,8 +109,6 @@ function PickersCalendarHeader(inProps) {
     name: 'MuiPickersCalendarHeader'
   });
   const {
-    components,
-    componentsProps,
     slots,
     slotProps,
     currentMonth: month,
@@ -128,10 +126,10 @@ function PickersCalendarHeader(inProps) {
   } = props;
   const ownerState = props;
   const classes = useUtilityClasses(props);
-  const SwitchViewButton = slots?.switchViewButton ?? components?.SwitchViewButton ?? PickersCalendarHeaderSwitchViewButton;
+  const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton;
   const switchViewButtonProps = (0, _utils.useSlotProps)({
     elementType: SwitchViewButton,
-    externalSlotProps: slotProps?.switchViewButton ?? componentsProps?.switchViewButton,
+    externalSlotProps: slotProps?.switchViewButton,
     additionalProps: {
       size: 'small',
       'aria-label': localeText.calendarViewSwitchingButtonAriaLabel(view)
@@ -139,11 +137,11 @@ function PickersCalendarHeader(inProps) {
     ownerState,
     className: classes.switchViewButton
   });
-  const SwitchViewIcon = slots?.switchViewIcon ?? components?.SwitchViewIcon ?? PickersCalendarHeaderSwitchViewIcon;
+  const SwitchViewIcon = slots?.switchViewIcon ?? PickersCalendarHeaderSwitchViewIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps = (0, _utils.useSlotProps)({
       elementType: SwitchViewIcon,
-      externalSlotProps: slotProps?.switchViewIcon ?? componentsProps?.switchViewIcon,
+      externalSlotProps: slotProps?.switchViewIcon,
       ownerState: undefined,
       className: classes.switchViewIcon
     }),
@@ -201,8 +199,6 @@ function PickersCalendarHeader(inProps) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fade.default, {
       in: view === 'day',
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersArrowSwitcher.PickersArrowSwitcher, {
-        components: components,
-        componentsProps: componentsProps,
         slots: slots,
         slotProps: slotProps,
         onGoToPrevious: selectPreviousMonth,

package/node/DateCalendar/PickersSlideTransition.js

@@ -112,6 +112,7 @@ function PickersSlideTransition(inProps) {
       className,
       reduceAnimations,
       transKey
+      // extracting `classes` from `other`
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const classes = useUtilityClasses(props);

package/node/DateField/DateField.js

@@ -14,7 +14,7 @@ var _styles = require("@mui/material/styles");
 var _utils = require("@mui/base/utils");
 var _useDateField2 = require("./useDateField");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["components", "componentsProps", "slots", "slotProps"],
+const _excluded = ["components", "componentsProps", "slots", "slotProps", "InputProps", "inputProps"],
   _excluded2 = ["inputRef"],
   _excluded3 = ["ref", "onPaste", "inputMode", "readOnly"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -28,7 +28,9 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref)
       components,
       componentsProps,
       slots,
-      slotProps
+      slotProps,
+      InputProps,
+      inputProps
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const ownerState = themeProps;
@@ -43,6 +45,10 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref)
       inputRef: externalInputRef
     } = _useSlotProps,
     textFieldProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
+
+  // TODO: Remove when mui/material-ui#35088 will be merged
+  textFieldProps.inputProps = (0, _extends2.default)({}, textFieldProps.inputProps, inputProps);
+  textFieldProps.InputProps = (0, _extends2.default)({}, textFieldProps.InputProps, InputProps);
   const _useDateField = (0, _useDateField2.useDateField)({
       props: textFieldProps,
       inputRef: externalInputRef

package/node/DateTimeField/DateTimeField.js

@@ -14,7 +14,7 @@ var _styles = require("@mui/material/styles");
 var _utils = require("@mui/base/utils");
 var _useDateTimeField2 = require("./useDateTimeField");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["components", "componentsProps", "slots", "slotProps"],
+const _excluded = ["components", "componentsProps", "slots", "slotProps", "InputProps", "inputProps"],
   _excluded2 = ["inputRef"],
   _excluded3 = ["ref", "onPaste", "inputMode", "readOnly"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -28,7 +28,9 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
       components,
       componentsProps,
       slots,
-      slotProps
+      slotProps,
+      InputProps,
+      inputProps
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const ownerState = themeProps;
@@ -43,6 +45,10 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
       inputRef: externalInputRef
     } = _useSlotProps,
     textFieldProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
+
+  // TODO: Remove when mui/material-ui#35088 will be merged
+  textFieldProps.inputProps = (0, _extends2.default)({}, textFieldProps.inputProps, inputProps);
+  textFieldProps.InputProps = (0, _extends2.default)({}, textFieldProps.InputProps, InputProps);
   const _useDateTimeField = (0, _useDateTimeField2.useDateTimeField)({
       props: textFieldProps,
       inputRef: externalInputRef

package/node/MonthCalendar/PickersMonth.js

@@ -101,6 +101,7 @@ const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProps) {
       onFocus,
       onBlur,
       'aria-current': ariaCurrent
+      // We don't want to forward this prop to the root element
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ref = React.useRef(null);

package/node/TimeClock/TimeClock.js

@@ -22,6 +22,7 @@ var _PickerViewRoot = require("../internals/components/PickerViewRoot");
 var _timeClockClasses = require("./timeClockClasses");
 var _Clock = require("./Clock");
 var _ClockNumbers = require("./ClockNumbers");
+var _slotsMigration = require("../internals/utils/slots-migration");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "className", "disabled", "readOnly"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -74,8 +75,8 @@ const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps, ref)
       autoFocus,
       components,
       componentsProps,
-      slots,
-      slotProps,
+      slots: innerSlots,
+      slotProps: innerSlotProps,
       value: valueProp,
       disableIgnoringDatePartForTimeValidation = false,
       maxTime,
@@ -97,6 +98,8 @@ const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps, ref)
       readOnly
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const slots = innerSlots ?? (0, _slotsMigration.uncapitalizeObjectKeys)(components);
+  const slotProps = innerSlotProps ?? componentsProps;
   const [value, setValue] = (0, _utils.unstable_useControlled)({
     name: 'DateCalendar',
     state: 'value',
@@ -290,8 +293,6 @@ const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps, ref)
       readOnly: readOnly
     }, viewProps)), showViewSwitcher && /*#__PURE__*/(0, _jsxRuntime.jsx)(TimeClockArrowSwitcher, {
       className: classes.arrowSwitcher,
-      components: components,
-      componentsProps: componentsProps,
       slots: slots,
       slotProps: slotProps,
       onGoToPrevious: () => setView(previousView),

package/node/TimeField/TimeField.js

@@ -14,7 +14,7 @@ var _styles = require("@mui/material/styles");
 var _utils = require("@mui/base/utils");
 var _useTimeField2 = require("./useTimeField");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "components", "componentsProps"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "InputProps", "inputProps"],
   _excluded2 = ["inputRef"],
   _excluded3 = ["ref", "onPaste", "inputMode", "readOnly"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -28,7 +28,9 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref)
       slots,
       slotProps,
       components,
-      componentsProps
+      componentsProps,
+      InputProps,
+      inputProps
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const ownerState = themeProps;
@@ -43,6 +45,10 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref)
       inputRef: externalInputRef
     } = _useSlotProps,
     textFieldProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
+
+  // TODO: Remove when mui/material-ui#35088 will be merged
+  textFieldProps.inputProps = (0, _extends2.default)({}, textFieldProps.inputProps, inputProps);
+  textFieldProps.InputProps = (0, _extends2.default)({}, textFieldProps.InputProps, InputProps);
   const _useTimeField = (0, _useTimeField2.useTimeField)({
       props: textFieldProps,
       inputRef: externalInputRef

package/node/YearCalendar/PickersYear.js

@@ -103,6 +103,7 @@ const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps) {
       onFocus,
       onBlur,
       'aria-current': ariaCurrent
+      // We don't want to forward this prop to the root element
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ref = React.useRef(null);

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.0.3
+ * @mui/x-date-pickers v6.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -17,7 +17,7 @@ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _icons = require("../icons");
 var _pickersArrowSwitcherClasses = require("./pickersArrowSwitcherClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "components", "componentsProps", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel"],
+const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -68,8 +68,6 @@ const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrow
   const {
       children,
       className,
-      components,
-      componentsProps,
       slots,
       slotProps,
       isNextDisabled,
@@ -97,10 +95,10 @@ const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrow
     label: previousLabel
   };
   const [leftProps, rightProps] = isRTL ? [nextProps, previousProps] : [previousProps, nextProps];
-  const PreviousIconButton = slots?.previousIconButton ?? components?.PreviousIconButton ?? PickersArrowSwitcherButton;
+  const PreviousIconButton = slots?.previousIconButton ?? PickersArrowSwitcherButton;
   const previousIconButtonProps = (0, _utils2.useSlotProps)({
     elementType: PreviousIconButton,
-    externalSlotProps: slotProps?.previousIconButton ?? componentsProps?.previousIconButton,
+    externalSlotProps: slotProps?.previousIconButton,
     additionalProps: {
       size: 'medium',
       title: leftProps.label,
@@ -114,10 +112,10 @@ const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrow
     }),
     className: classes.button
   });
-  const NextIconButton = slots?.nextIconButton ?? components?.NextIconButton ?? PickersArrowSwitcherButton;
+  const NextIconButton = slots?.nextIconButton ?? PickersArrowSwitcherButton;
   const nextIconButtonProps = (0, _utils2.useSlotProps)({
     elementType: NextIconButton,
-    externalSlotProps: slotProps?.nextIconButton ?? componentsProps?.nextIconButton,
+    externalSlotProps: slotProps?.nextIconButton,
     additionalProps: {
       size: 'medium',
       title: rightProps.label,
@@ -131,22 +129,22 @@ const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrow
     }),
     className: classes.button
   });
-  const LeftArrowIcon = slots?.leftArrowIcon ?? components?.LeftArrowIcon ?? _icons.ArrowLeft;
+  const LeftArrowIcon = slots?.leftArrowIcon ?? _icons.ArrowLeft;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps = (0, _utils2.useSlotProps)({
       elementType: LeftArrowIcon,
-      externalSlotProps: slotProps?.leftArrowIcon ?? componentsProps?.leftArrowIcon,
+      externalSlotProps: slotProps?.leftArrowIcon,
       additionalProps: {
         fontSize: 'inherit'
       },
       ownerState: undefined
     }),
     leftArrowIconProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
-  const RightArrowIcon = slots?.rightArrowIcon ?? components?.RightArrowIcon ?? _icons.ArrowRight;
+  const RightArrowIcon = slots?.rightArrowIcon ?? _icons.ArrowRight;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps2 = (0, _utils2.useSlotProps)({
       elementType: RightArrowIcon,
-      externalSlotProps: slotProps?.rightArrowIcon ?? componentsProps?.rightArrowIcon,
+      externalSlotProps: slotProps?.rightArrowIcon,
       additionalProps: {
         fontSize: 'inherit'
       },

package/node/internals/components/PickersModalDialog.js

@@ -34,21 +34,19 @@ function PickersModalDialog(props) {
     children,
     onDismiss,
     open,
-    components,
-    componentsProps,
     slots,
     slotProps
   } = props;
-  const Dialog = slots?.dialog ?? components?.Dialog ?? PickersModalDialogRoot;
-  const Transition = slots?.mobileTransition ?? components?.MobileTransition ?? _Fade.default;
+  const Dialog = slots?.dialog ?? PickersModalDialogRoot;
+  const Transition = slots?.mobileTransition ?? _Fade.default;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog, (0, _extends2.default)({
     open: open,
     onClose: onDismiss
-  }, componentsProps?.dialog, {
+  }, slotProps?.dialog, {
     TransitionComponent: Transition,
-    TransitionProps: slotProps?.mobileTransition ?? componentsProps?.mobileTransition,
-    PaperComponent: slots?.mobilePaper ?? components?.MobilePaper,
-    PaperProps: slotProps?.mobilePaper ?? componentsProps?.mobilePaper,
+    TransitionProps: slotProps?.mobileTransition,
+    PaperComponent: slots?.mobilePaper,
+    PaperProps: slotProps?.mobilePaper,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersModalDialogContent, {
       children: children
     })

package/node/internals/components/PickersPopper.js

@@ -16,7 +16,6 @@ var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _pickersPopperClasses = require("./pickersPopperClasses");
 var _utils3 = require("../utils/utils");
-var _slotsMigration = require("../utils/slots-migration");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -181,13 +180,9 @@ function PickersPopper(inProps) {
     open,
     role,
     placement,
-    components,
-    componentsProps,
-    slots: innerSlots,
-    slotProps: innerSlotProps
+    slots,
+    slotProps
   } = props;
-  const slots = innerSlots ?? (0, _slotsMigration.uncapitalizeObjectKeys)(components);
-  const slotProps = innerSlotProps ?? componentsProps;
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
       // IE11, Edge (prior to using Blink?) use 'Esc'

package/node/internals/demo/DemoContainer.js

@@ -109,14 +109,22 @@ function DemoContainer(props) {
   if (childrenTypes.has('UI-view')) {
     // noop
   } else if (childrenTypes.has('single-input-range-field')) {
-    sx = (0, _extends2.default)({}, sx, {
-      [`& > .${_TextField.textFieldClasses.root}`]: {
-        minWidth: {
-          xs: 300,
-          md: 400
+    if (!childrenSupportedSections.has('date-time')) {
+      sx = (0, _extends2.default)({}, sx, {
+        [`& > .${_TextField.textFieldClasses.root}`]: {
+          minWidth: 300
         }
-      }
-    });
+      });
+    } else {
+      sx = (0, _extends2.default)({}, sx, {
+        [`& > .${_TextField.textFieldClasses.root}`]: {
+          minWidth: {
+            xs: 300,
+            md: 400
+          }
+        }
+      });
+    }
   } else if (childrenSupportedSections.has('date-time')) {
     sx = (0, _extends2.default)({}, sx, {
       [`& > .${_TextField.textFieldClasses.root}`]: {

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

@@ -32,7 +32,8 @@ const useField = params => {
     updateSectionValue,
     updateValueFromValueStr,
     setTempAndroidValueStr,
-    sectionsValueBoundaries
+    sectionsValueBoundaries,
+    placeholder
   } = (0, _useFieldState.useFieldState)(params);
   const {
     applyCharacterEditing,
@@ -68,7 +69,8 @@ const useField = params => {
   const handleRef = (0, _useForkRef.default)(inputRefProp, inputRef);
   const focusTimeoutRef = React.useRef(undefined);
   const theme = (0, _styles.useTheme)();
-  const sectionOrder = React.useMemo(() => (0, _useField.getSectionOrder)(state.sections, theme.direction === 'rtl'), [theme.direction, state.sections]);
+  const isRTL = theme.direction === 'rtl';
+  const sectionOrder = React.useMemo(() => (0, _useField.getSectionOrder)(state.sections, isRTL), [state.sections, isRTL]);
   const syncSelectionFromDOM = () => {
     if (readOnly) {
       setSelectedSections(null);
@@ -159,7 +161,7 @@ const useField = params => {
     if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1) {
       keyPressed = cleanValueStr;
     } else {
-      const prevValueStr = (0, _useField.cleanString)(fieldValueManager.getValueStrFromSections(state.sections));
+      const prevValueStr = (0, _useField.cleanString)(fieldValueManager.getValueStrFromSections(state.sections, isRTL));
       let startOfDiffIndex = -1;
       let endOfDiffIndex = -1;
       for (let i = 0; i < prevValueStr.length; i += 1) {
@@ -264,7 +266,7 @@ const useField = params => {
           }
           const activeSection = state.sections[selectedSectionIndexes.startIndex];
           const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          const newSectionValue = (0, _useField.adjustSectionValue)(utils, activeSection, event.key, sectionsValueBoundaries, activeDateManager.activeDate);
+          const newSectionValue = (0, _useField.adjustSectionValue)(utils, activeSection, event.key, sectionsValueBoundaries, activeDateManager.date);
           updateSectionValue({
             activeSection,
             newSectionValue,
@@ -309,8 +311,8 @@ const useField = params => {
     if (error !== undefined) {
       return error;
     }
-    return fieldValueManager.hasError(validationError);
-  }, [fieldValueManager, validationError, error]);
+    return valueManager.hasError(validationError);
+  }, [valueManager, validationError, error]);
   React.useEffect(() => {
     // Select the right section when focused on mount (`autoFocus = true` on the input)
     if (inputRef.current && inputRef.current === document.activeElement) {
@@ -330,7 +332,7 @@ const useField = params => {
     }
   }, [state.tempValueStrAndroid]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getValueStrFromSections(state.sections), [state.sections, fieldValueManager, state.tempValueStrAndroid]);
+  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getValueStrFromSections(state.sections, isRTL), [state.sections, fieldValueManager, state.tempValueStrAndroid, isRTL]);
   const inputMode = React.useMemo(() => {
     if (selectedSectionIndexes == null) {
       return 'text';
@@ -357,7 +359,7 @@ const useField = params => {
     setSelectedSections: activeSectionIndex => setSelectedSections(activeSectionIndex)
   }));
   return (0, _extends2.default)({
-    placeholder: state.placeholder,
+    placeholder,
     autoComplete: 'off'
   }, otherForwardedProps, {
     value: shouldShowPlaceholder ? '' : valueStr,