@mui/x-date-pickers 9.0.0-rc.0 → 9.0.2

package/internals/components/PickerFieldUI.mjs

@@ -2,12 +2,12 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["InputProps", "readOnly", "onClear", "clearable", "clearButtonPosition", "openPickerButtonPosition", "openPickerAriaLabel"],
+const _excluded = ["readOnly", "onClear", "clearable", "clearButtonPosition", "openPickerButtonPosition", "openPickerAriaLabel", "InputProps", "inputProps", "InputLabelProps", "FormHelperTextProps"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"],
   _excluded4 = ["ownerState"],
   _excluded5 = ["ownerState"],
-  _excluded6 = ["InputProps", "inputProps"];
+  _excluded6 = ["InputProps", "inputProps", "InputLabelProps", "FormHelperTextProps"];
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
@@ -15,41 +15,49 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import MuiIconButton from '@mui/material/IconButton';
 import MuiInputAdornment from '@mui/material/InputAdornment';
 import useSlotProps from '@mui/utils/useSlotProps';
+import { warnOnce } from '@mui/x-internals/warning';
 import { useFieldOwnerState } from "../hooks/useFieldOwnerState.mjs";
 import { usePickerTranslations } from "../../hooks/index.mjs";
 import { ClearIcon as MuiClearIcon } from "../../icons/index.mjs";
 import { useNullablePickerContext } from "../hooks/useNullablePickerContext.mjs";
 import { PickersTextField } from "../../PickersTextField/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const noop = () => {};
 export const cleanFieldResponse = fieldResponse => {
-  const {
-      InputProps,
+  const _ref = fieldResponse,
+    {
       readOnly,
       onClear,
       clearable,
       clearButtonPosition,
       openPickerButtonPosition,
-      openPickerAriaLabel
-    } = fieldResponse,
-    other = _objectWithoutPropertiesLoose(fieldResponse, _excluded);
-  const mergedInputProps = other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop;
+      openPickerAriaLabel,
+      // TODO v10: remove
+      // Explicitly discard legacy props that are no longer supported on `PickersTextField`.
+      // Without this, any leftover values would silently leak into `...other` and end up spread
+      // as unknown attributes on the underlying form control.
+      InputProps: legacyInputProps,
+      inputProps: legacyHtmlInputProps,
+      InputLabelProps: legacyInputLabelProps,
+      FormHelperTextProps: legacyFormHelperTextProps
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (process.env.NODE_ENV !== 'production') {
+    if (legacyInputProps || legacyHtmlInputProps || legacyInputLabelProps || legacyFormHelperTextProps) {
+      warnOnce(['MUI X: The `InputProps`, `inputProps`, `InputLabelProps` and `FormHelperTextProps` props are no longer supported on Picker / Field components.', 'They have been silently dropped because they would otherwise be forwarded as unknown attributes on the underlying form control.', 'Use the `slotProps` shape instead (`slotProps.input`, `slotProps.htmlInput`, `slotProps.inputLabel`, `slotProps.formHelperText`).', 'See https://mui.com/x/migration/migration-pickers-v8/#textfield-props for migration details.']);
+    }
+  }
   return {
     clearable,
     onClear,
     clearButtonPosition,
     openPickerButtonPosition,
     openPickerAriaLabel,
-    textFieldProps: _extends({}, other, other?.slotProps?.input || other?.slotProps?.htmlInput ? {
+    textFieldProps: _extends({}, other, {
       slotProps: _extends({}, other?.slotProps, {
-        input: ownerState => _extends({}, resolveComponentProps(mergedInputProps, ownerState), {
+        input: _extends({}, other?.slotProps?.input, {
           readOnly
         })
       })
-    } : {
-      InputProps: _extends({}, InputProps ?? {}, {
-        readOnly
-      })
     })
   };
 };
@@ -165,13 +173,14 @@ export function PickerFieldUI(props) {
     ownerState
   });
   textFieldProps.ref = useForkRef(textFieldProps.ref, pickerContext?.rootRef);
-  const additionalTextFieldInputProps = {};
-  const textFieldInputProps = resolveComponentProps(textFieldProps?.slotProps?.input ?? textFieldProps.InputProps, ownerState);
+  const externalInputSlotProps = textFieldProps.slotProps?.input;
+  const additionalInputSlotProps = {};
+  const forkedInputRef = useForkRef(externalInputSlotProps?.ref, pickerContext?.triggerRef);
   if (pickerContext) {
-    additionalTextFieldInputProps.ref = pickerContext.triggerRef;
+    additionalInputSlotProps.ref = forkedInputRef;
   }
-  if (!textFieldInputProps?.startAdornment && (clearButtonPosition === 'start' || openPickerButtonPosition === 'start')) {
-    additionalTextFieldInputProps.startAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, startInputAdornmentProps, {
+  if (!externalInputSlotProps?.startAdornment && (clearButtonPosition === 'start' || openPickerButtonPosition === 'start')) {
+    additionalInputSlotProps.startAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, startInputAdornmentProps, {
       children: [openPickerButtonPosition === 'start' && /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
         children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, openPickerIconProps))
       })), clearButtonPosition === 'start' && /*#__PURE__*/_jsx(ClearButton, _extends({}, clearButtonProps, {
@@ -179,8 +188,8 @@ export function PickerFieldUI(props) {
       }))]
     }));
   }
-  if (!textFieldInputProps?.endAdornment && (clearButtonPosition === 'end' || openPickerButtonPosition === 'end')) {
-    additionalTextFieldInputProps.endAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, endInputAdornmentProps, {
+  if (!externalInputSlotProps?.endAdornment && (clearButtonPosition === 'end' || openPickerButtonPosition === 'end')) {
+    additionalInputSlotProps.endAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, endInputAdornmentProps, {
       children: [clearButtonPosition === 'end' && /*#__PURE__*/_jsx(ClearButton, _extends({}, clearButtonProps, {
         children: /*#__PURE__*/_jsx(ClearIcon, _extends({}, clearIconProps))
       })), openPickerButtonPosition === 'end' && /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
@@ -189,8 +198,8 @@ export function PickerFieldUI(props) {
     }));
   }
   // handle the case of showing custom `inputAdornment` for Field components
-  if (!additionalTextFieldInputProps?.endAdornment && !additionalTextFieldInputProps?.startAdornment && pickerFieldUIContext.slots.inputAdornment) {
-    additionalTextFieldInputProps.endAdornment = /*#__PURE__*/_jsx(InputAdornment, _extends({}, endInputAdornmentProps));
+  if (!additionalInputSlotProps.endAdornment && !additionalInputSlotProps.startAdornment && pickerFieldUIContext.slots.inputAdornment) {
+    additionalInputSlotProps.endAdornment = /*#__PURE__*/_jsx(InputAdornment, _extends({}, endInputAdornmentProps));
   }
   if (clearButtonPosition != null) {
     textFieldProps.sx = [{
@@ -209,19 +218,10 @@ export function PickerFieldUI(props) {
       }
     }, ...(Array.isArray(textFieldProps.sx) ? textFieldProps.sx : [textFieldProps.sx])];
   }
-  const resolvedTextFieldInputProps = textFieldProps?.slotProps?.input ? resolveComponentProps(mergeSlotProps(textFieldInputProps, additionalTextFieldInputProps), ownerState) : _extends({}, textFieldInputProps, additionalTextFieldInputProps);
-
-  // We need to resolve the `inputProps` since we are messing with those props in this component.
-  textFieldProps.inputProps = textFieldProps?.slotProps?.htmlInput ? resolveComponentProps(textFieldProps.slotProps.htmlInput, ownerState) : textFieldProps.inputProps;
-
-  // Remove the `input` slotProps to avoid them overriding the manually resolved `InputProps`.
-  // `slotProps` would take precedence over `InputProps`.
-  delete textFieldProps?.slotProps?.input;
-  // Remove the `slotProps` on `PickersTextField` as they are not supported.
-  delete textFieldProps?.slotProps;
-  return /*#__PURE__*/_jsx(TextField, _extends({}, textFieldProps, {
-    InputProps: resolvedTextFieldInputProps
-  }));
+  textFieldProps.slotProps = _extends({}, textFieldProps.slotProps, {
+    input: _extends({}, externalInputSlotProps, additionalInputSlotProps)
+  });
+  return /*#__PURE__*/_jsx(TextField, _extends({}, textFieldProps));
 }
 export function mergeSlotProps(slotPropsA, slotPropsB) {
   if (!slotPropsA) {
@@ -237,8 +237,7 @@ export function mergeSlotProps(slotPropsA, slotPropsB) {
 
 /**
  * The `textField` slot props cannot be handled inside `PickerFieldUI` because it would be a breaking change to not pass the enriched props to `useField`.
- * Once the non-accessible DOM structure will be removed, we will be able to remove the `textField` slot and clean this logic.
- * TODO: Address with the needed support for the `textField` slotProps given the change of minimum version of MUI.
+ * TODO v10: Remove the `textField` slot and clean this logic up.
  */
 export function useFieldTextFieldProps(parameters) {
   const {
@@ -249,15 +248,28 @@ export function useFieldTextFieldProps(parameters) {
   const pickerFieldUIContext = React.useContext(PickerFieldUIContext);
   const pickerContext = useNullablePickerContext();
   const ownerState = useFieldOwnerState(externalForwardedProps);
-  const {
-      InputProps,
-      inputProps
-    } = externalForwardedProps,
-    otherExternalForwardedProps = _objectWithoutPropertiesLoose(externalForwardedProps, _excluded6);
+
+  // TODO v10: remove
+  // Strip the legacy `InputProps` / `inputProps` / `InputLabelProps` / `FormHelperTextProps`
+  // before they reach `PickersTextField`, which would silently ignore them. JS users without
+  // TypeScript checks would otherwise see their configuration vanish.
+  const _ref2 = externalForwardedProps ?? {},
+    {
+      InputProps: legacyInputProps,
+      inputProps: legacyHtmlInputProps,
+      InputLabelProps: legacyInputLabelProps,
+      FormHelperTextProps: legacyFormHelperTextProps
+    } = _ref2,
+    sanitizedExternalForwardedProps = _objectWithoutPropertiesLoose(_ref2, _excluded6);
+  if (process.env.NODE_ENV !== 'production') {
+    if (legacyInputProps || legacyHtmlInputProps || legacyInputLabelProps || legacyFormHelperTextProps) {
+      warnOnce(['MUI X: Field components no longer accept the `InputProps`, `inputProps`, `InputLabelProps` and `FormHelperTextProps` props.', 'They have been dropped to avoid leaking unknown attributes onto the underlying form control.', 'Use the nested `slotProps.textField.slotProps.{input,htmlInput,inputLabel,formHelperText}` shape instead.']);
+    }
+  }
   const textFieldProps = useSlotProps({
     elementType: PickersTextField,
     externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.textField, slotProps?.textField),
-    externalForwardedProps: otherExternalForwardedProps,
+    externalForwardedProps: sanitizedExternalForwardedProps,
     additionalProps: {
       ref,
       sx: pickerContext?.rootSx,
@@ -303,10 +315,6 @@ export function useFieldTextFieldProps(parameters) {
       }
     };
   }
-
-  // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
-  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
   return textFieldProps;
 }
 export function PickerFieldUIContextProvider(props) {

package/internals/hooks/useField/useField.js

@@ -138,12 +138,25 @@ const useField = parameters => {
     rootProps.onKeyDown(event);
   });
   const handleRootBlur = (0, _useEventCallback.default)(event => {
-    onBlur?.(event);
     rootProps.onBlur(event);
+    // Skip the user callback when focus is only moving to another element inside the field
+    // (e.g. the section that gains focus after the focusable root gives it up).
+    const next = event.relatedTarget;
+    if (domGetters.isReady() && next instanceof Node && domGetters.getRoot().contains(next)) {
+      return;
+    }
+    onBlur?.(event);
   });
   const handleRootFocus = (0, _useEventCallback.default)(event => {
-    onFocus?.(event);
     rootProps.onFocus(event);
+    // Skip the user callback when focus is only arriving from another element inside the field
+    // (e.g. the focusable root receiving it before it is forwarded to a section, and the section
+    // focus event bubbling back up to the root).
+    const previous = event.relatedTarget;
+    if (domGetters.isReady() && previous instanceof Node && domGetters.getRoot().contains(previous)) {
+      return;
+    }
+    onFocus?.(event);
   });
   const handleRootClick = (0, _useEventCallback.default)(event => {
     // The click event on the clear or open button would propagate to the input, trigger this handler and result in an inadvertent section selection.

package/internals/hooks/useField/useField.mjs

@@ -131,12 +131,25 @@ export const useField = parameters => {
     rootProps.onKeyDown(event);
   });
   const handleRootBlur = useEventCallback(event => {
-    onBlur?.(event);
     rootProps.onBlur(event);
+    // Skip the user callback when focus is only moving to another element inside the field
+    // (e.g. the section that gains focus after the focusable root gives it up).
+    const next = event.relatedTarget;
+    if (domGetters.isReady() && next instanceof Node && domGetters.getRoot().contains(next)) {
+      return;
+    }
+    onBlur?.(event);
   });
   const handleRootFocus = useEventCallback(event => {
-    onFocus?.(event);
     rootProps.onFocus(event);
+    // Skip the user callback when focus is only arriving from another element inside the field
+    // (e.g. the focusable root receiving it before it is forwarded to a section, and the section
+    // focus event bubbling back up to the root).
+    const previous = event.relatedTarget;
+    if (domGetters.isReady() && previous instanceof Node && domGetters.getRoot().contains(previous)) {
+      return;
+    }
+    onFocus?.(event);
   });
   const handleRootClick = useEventCallback(event => {
     // The click event on the clear or open button would propagate to the input, trigger this handler and result in an inadvertent section selection.

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.validateSections = exports.removeLocalizedDigits = exports.parseSelectedSections = exports.mergeDateIntoReferenceDate = exports.isStringNumber = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionOrder = exports.getLocalizedDigits = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionFormatHaveLeadingZeros = exports.createDateStrForHiddenInputFromSections = exports.cleanLeadingZeros = exports.cleanDigitSectionValue = exports.changeSectionValueFormat = exports.applyLocalizedDigits = exports.FORMAT_SECONDS_NO_LEADING_ZEROS = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _dateUtils = require("../../utils/date-utils");
+var _timeUtils = require("../../utils/time-utils");
 const getDateSectionConfigFromFormatToken = (adapter, formatToken) => {
   const config = adapter.formatTokenMap[formatToken];
   if (config == null) {
@@ -386,15 +387,8 @@ const transferDateSectionValue = (adapter, section, dateToTransferFrom, dateToTr
       }
     case 'meridiem':
       {
-        const isAM = adapter.getHours(dateToTransferFrom) < 12;
-        const mergedDateHours = adapter.getHours(dateToTransferTo);
-        if (isAM && mergedDateHours >= 12) {
-          return adapter.addHours(dateToTransferTo, -12);
-        }
-        if (!isAM && mergedDateHours < 12) {
-          return adapter.addHours(dateToTransferTo, 12);
-        }
-        return dateToTransferTo;
+        const meridiem = adapter.getHours(dateToTransferFrom) < 12 ? 'am' : 'pm';
+        return (0, _timeUtils.convertToMeridiem)(dateToTransferTo, meridiem, true, adapter);
       }
     case 'hours':
       {

package/internals/hooks/useField/useField.utils.mjs

@@ -1,5 +1,6 @@
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import { getMonthsInYear } from "../../utils/date-utils.mjs";
+import { convertToMeridiem } from "../../utils/time-utils.mjs";
 export const getDateSectionConfigFromFormatToken = (adapter, formatToken) => {
   const config = adapter.formatTokenMap[formatToken];
   if (config == null) {
@@ -363,15 +364,8 @@ const transferDateSectionValue = (adapter, section, dateToTransferFrom, dateToTr
       }
     case 'meridiem':
       {
-        const isAM = adapter.getHours(dateToTransferFrom) < 12;
-        const mergedDateHours = adapter.getHours(dateToTransferTo);
-        if (isAM && mergedDateHours >= 12) {
-          return adapter.addHours(dateToTransferTo, -12);
-        }
-        if (!isAM && mergedDateHours < 12) {
-          return adapter.addHours(dateToTransferTo, 12);
-        }
-        return dateToTransferTo;
+        const meridiem = adapter.getHours(dateToTransferFrom) < 12 ? 'am' : 'pm';
+        return convertToMeridiem(dateToTransferTo, meridiem, true, adapter);
       }
     case 'hours':
       {

package/models/fields.d.mts

@@ -143,7 +143,7 @@ export type BaseSingleInputPickersTextFieldProps = Omit<UseFieldReturnValue<Base
 /**
  * Props the built-in text field component can receive.
  */
-export type BuiltInFieldTextFieldProps = Partial<Omit<PickersTextFieldProps, keyof ExportedPickersSectionListProps>>;
+export type BuiltInFieldTextFieldProps = Partial<Omit<PickersTextFieldProps, keyof ExportedPickersSectionListProps | 'slots' | 'slotProps'>>;
 export interface PickerTextFieldOwnerState extends FieldOwnerState {
   /**
    * `true` if the value of the field is currently empty.

package/models/fields.d.ts

@@ -143,7 +143,7 @@ export type BaseSingleInputPickersTextFieldProps = Omit<UseFieldReturnValue<Base
 /**
  * Props the built-in text field component can receive.
  */
-export type BuiltInFieldTextFieldProps = Partial<Omit<PickersTextFieldProps, keyof ExportedPickersSectionListProps>>;
+export type BuiltInFieldTextFieldProps = Partial<Omit<PickersTextFieldProps, keyof ExportedPickersSectionListProps | 'slots' | 'slotProps'>>;
 export interface PickerTextFieldOwnerState extends FieldOwnerState {
   /**
    * `true` if the value of the field is currently empty.