@mui/x-date-pickers 7.0.0-beta.7 → 7.1.0

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -23,7 +23,6 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  * - DesktopTimePicker
  */
 export const useDesktopPicker = _ref => {
-  var _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$inputAdornment, _slots$openPickerButt, _slots$layout;
   let {
       props,
       getOpenDialogAriaText
@@ -53,7 +52,7 @@ export const useDesktopPicker = _ref => {
   const containerRef = React.useRef(null);
   const fieldRef = React.useRef(null);
   const labelId = useId();
-  const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null || (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
     open,
     actions,
@@ -69,20 +68,20 @@ export const useDesktopPicker = _ref => {
     additionalViewProps: {},
     wrapperVariant: 'desktop'
   }));
-  const InputAdornment = (_slots$inputAdornment = slots.inputAdornment) != null ? _slots$inputAdornment : MuiInputAdornment;
+  const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;
   const _useSlotProps = useSlotProps({
       elementType: InputAdornment,
-      externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.inputAdornment,
+      externalSlotProps: innerSlotProps?.inputAdornment,
       additionalProps: {
         position: 'end'
       },
       ownerState: props
     }),
     inputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const OpenPickerButton = (_slots$openPickerButt = slots.openPickerButton) != null ? _slots$openPickerButt : IconButton;
+  const OpenPickerButton = slots.openPickerButton ?? IconButton;
   const _useSlotProps2 = useSlotProps({
       elementType: OpenPickerButton,
-      externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.openPickerButton,
+      externalSlotProps: innerSlotProps?.openPickerButton,
       additionalProps: {
         disabled: disabled || readOnly,
         onClick: open ? actions.onClose : actions.onOpen,
@@ -96,7 +95,7 @@ export const useDesktopPicker = _ref => {
   const Field = slots.field;
   const fieldProps = useSlotProps({
     elementType: Field,
-    externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.field,
+    externalSlotProps: innerSlotProps?.field,
     additionalProps: _extends({}, pickerFieldProps, isToolbarHidden && {
       id: labelId
     }, {
@@ -126,7 +125,7 @@ export const useDesktopPicker = _ref => {
       ref: containerRef,
       [`${inputAdornmentProps.position}Adornment`]: /*#__PURE__*/_jsx(InputAdornment, _extends({}, inputAdornmentProps, {
         children: /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
-          children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.openPickerIcon))
+          children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, innerSlotProps?.openPickerIcon))
         }))
       }))
     });
@@ -136,7 +135,7 @@ export const useDesktopPicker = _ref => {
     clearIcon: slots.clearIcon,
     clearButton: slots.clearButton
   }, fieldProps.slots);
-  const Layout = (_slots$layout = slots.layout) != null ? _slots$layout : PickersLayout;
+  const Layout = slots.layout ?? PickersLayout;
   let labelledById = labelId;
   if (isToolbarHidden) {
     if (label) {
@@ -146,12 +145,12 @@ export const useDesktopPicker = _ref => {
     }
   }
   const slotProps = _extends({}, innerSlotProps, {
-    toolbar: _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.toolbar, {
+    toolbar: _extends({}, innerSlotProps?.toolbar, {
       titleId: labelId
     }),
     popper: _extends({
       'aria-labelledby': labelledById
-    }, innerSlotProps == null ? void 0 : innerSlotProps.popper)
+    }, innerSlotProps?.popper)
   });
   const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
   const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
@@ -170,7 +169,7 @@ export const useDesktopPicker = _ref => {
       slotProps: slotProps,
       shouldRestoreFocus: shouldRestoreFocus,
       reduceAnimations: reduceAnimations,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps == null ? void 0 : slotProps.layout, {
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
         children: renderCurrentView()

package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts

@@ -54,7 +54,7 @@ export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNo
      */
     autoFocus?: boolean;
 }
-export interface UseDesktopPickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, DesktopOnlyPickerProps {
+export interface UseDesktopPickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<TDate | null, TDate, TView, any, {}>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, DesktopOnlyPickerProps {
     /**
      * Overridable component slots.
      * @default {}
@@ -66,7 +66,7 @@ export interface UseDesktopPickerProps<TDate extends PickerValidDate, TView exte
      */
     slotProps?: UseDesktopPickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseDesktopPickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
+export interface UseDesktopPickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
     props: TExternalProps;
     getOpenDialogAriaText: (date: TDate | null, utils: MuiPickersAdapter<TDate>) => string;
 }

package/internals/hooks/useField/buildSectionsFromFormat.js

@@ -152,49 +152,53 @@ const buildSections = params => {
   const sections = [];
   let startSeparator = '';
 
-  // This RegExp test if the beginning of a string corresponds to a supported token
-  const isTokenStartRegExp = new RegExp(`^(${Object.keys(utils.formatTokenMap).sort((a, b) => b.length - a.length) // Sort to put longest word first
-  .join('|')})`, 'g') // used to get access to lastIndex state
-  ;
-  let currentTokenValue = '';
-  for (let i = 0; i < expandedFormat.length; i += 1) {
-    const escapedPartOfCurrentChar = escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
-    const char = expandedFormat[i];
+  // This RegExp tests if the beginning of a string corresponds to a supported token
+  const validTokens = Object.keys(utils.formatTokenMap).sort((a, b) => b.length - a.length); // Sort to put longest word first
+
+  const regExpFirstWordInFormat = /^([a-zA-Z]+)/;
+  const regExpWordOnlyComposedOfTokens = new RegExp(`^(${validTokens.join('|')})*$`);
+  const regExpFirstTokenInWord = new RegExp(`^(${validTokens.join('|')})`);
+  const getEscapedPartOfCurrentChar = i => escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
+  let i = 0;
+  while (i < expandedFormat.length) {
+    const escapedPartOfCurrentChar = getEscapedPartOfCurrentChar(i);
     const isEscapedChar = escapedPartOfCurrentChar != null;
-    const potentialToken = `${currentTokenValue}${expandedFormat.slice(i)}`;
-    const regExpMatch = isTokenStartRegExp.test(potentialToken);
-    if (!isEscapedChar && char.match(/([A-Za-z]+)/) && regExpMatch) {
-      currentTokenValue = potentialToken.slice(0, isTokenStartRegExp.lastIndex);
-      i += isTokenStartRegExp.lastIndex - 1;
-    } else {
+    const firstWordInFormat = regExpFirstWordInFormat.exec(expandedFormat.slice(i))?.[1];
+
+    // The first word in the format is only composed of tokens.
+    // We extract those tokens to create a new sections.
+    if (!isEscapedChar && firstWordInFormat != null && regExpWordOnlyComposedOfTokens.test(firstWordInFormat)) {
+      let word = firstWordInFormat;
+      while (word.length > 0) {
+        const firstWord = regExpFirstTokenInWord.exec(word)[1];
+        word = word.slice(firstWord.length);
+        sections.push(createSection(_extends({}, params, {
+          now,
+          token: firstWord,
+          startSeparator
+        })));
+        startSeparator = '';
+      }
+      i += firstWordInFormat.length;
+    }
+    // The remaining format does not start with a token,
+    // We take the first character and add it to the current section's end separator.
+    else {
+      const char = expandedFormat[i];
+
       // If we are on the opening or closing character of an escaped part of the format,
       // Then we ignore this character.
-      const isEscapeBoundary = isEscapedChar && (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.start) === i || (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.end) === i;
+      const isEscapeBoundary = isEscapedChar && escapedPartOfCurrentChar?.start === i || escapedPartOfCurrentChar?.end === i;
       if (!isEscapeBoundary) {
-        if (currentTokenValue !== '') {
-          sections.push(createSection(_extends({}, params, {
-            now,
-            token: currentTokenValue,
-            startSeparator
-          })));
-          currentTokenValue = '';
-        }
         if (sections.length === 0) {
           startSeparator += char;
         } else {
-          startSeparator = '';
           sections[sections.length - 1].endSeparator += char;
         }
       }
+      i += 1;
     }
   }
-  if (currentTokenValue !== '') {
-    sections.push(createSection(_extends({}, params, {
-      now,
-      token: currentTokenValue,
-      startSeparator
-    })));
-  }
   if (sections.length === 0 && startSeparator.length > 0) {
     sections.push({
       type: 'empty',

package/internals/hooks/useField/useField.js

@@ -69,7 +69,7 @@ export const useField = params => {
     sectionOrder
   }));
   const handleContainerKeyDown = useEventCallback(event => {
-    onKeyDown == null || onKeyDown(event);
+    onKeyDown?.(event);
 
     // eslint-disable-next-line default-case
     switch (true) {
@@ -200,11 +200,13 @@ export const useField = params => {
   }));
   const handleClearValue = useEventCallback((event, ...args) => {
     event.preventDefault();
-    onClear == null || onClear(event, ...args);
+    onClear?.(event, ...args);
     clearValue();
-    setSelectedSections(sectionOrder.startIndex);
-    if (!interactions.isFieldFocused) {
+    if (!interactions.isFieldFocused()) {
+      // setSelectedSections is called internally
       interactions.focusField(0);
+    } else {
+      setSelectedSections(sectionOrder.startIndex);
     }
   });
   const commonForwardedProps = {

package/internals/hooks/useField/useField.types.d.ts

@@ -124,6 +124,7 @@ export interface UseFieldV6ForwardedProps {
     onClick?: React.MouseEventHandler;
     onFocus?: () => void;
     onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
+    placeholder?: string;
 }
 interface UseFieldV6AdditionalProps extends Required<Pick<React.InputHTMLAttributes<HTMLInputElement>, 'inputMode' | 'placeholder' | 'value' | 'onChange' | 'autoComplete'>> {
     enableAccessibleFieldDOMStructure: false;

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

@@ -154,7 +154,7 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
       contentType: section.contentType
     });
     const getCleanValue = value => cleanDigitSectionValue(utils, value, sectionBoundaries, localizedDigits, section);
-    const step = section.type === 'minutes' && stepsAttributes != null && stepsAttributes.minutesStep ? stepsAttributes.minutesStep : 1;
+    const step = section.type === 'minutes' && stepsAttributes?.minutesStep ? stepsAttributes.minutesStep : 1;
     const currentSectionValue = parseInt(removeLocalizedDigits(section.value, localizedDigits), 10);
     let newSectionValueNumber = currentSectionValue + delta * step;
     if (shouldSetAbsolute) {
@@ -533,12 +533,9 @@ export const getSectionOrder = (sections, shouldApplyRTL) => {
   while (RTLIndex >= 0) {
     groupedSectionsEnd = sections.findIndex(
     // eslint-disable-next-line @typescript-eslint/no-loop-func
-    (section, index) => {
-      var _section$endSeparator;
-      return index >= groupedSectionsStart && ((_section$endSeparator = section.endSeparator) == null ? void 0 : _section$endSeparator.includes(' ')) &&
-      // Special case where the spaces were not there in the initial input
-      section.endSeparator !== ' / ';
-    });
+    (section, index) => index >= groupedSectionsStart && section.endSeparator?.includes(' ') &&
+    // Special case where the spaces were not there in the initial input
+    section.endSeparator !== ' / ');
     if (groupedSectionsEnd === -1) {
       groupedSectionsEnd = sections.length - 1;
     }

package/internals/hooks/useField/useFieldCharacterEditing.js

@@ -48,8 +48,7 @@ export const useFieldCharacterEditing = ({
   const [query, setQuery] = React.useState(null);
   const resetQuery = useEventCallback(() => setQuery(null));
   React.useEffect(() => {
-    var _sections$query$secti;
-    if (query != null && ((_sections$query$secti = sections[query.sectionIndex]) == null ? void 0 : _sections$query$secti.type) !== query.sectionType) {
+    if (query != null && sections[query.sectionIndex]?.type !== query.sectionType) {
       resetQuery();
     }
   }, [sections, query, resetQuery]);

package/internals/hooks/useField/useFieldState.js

@@ -88,7 +88,7 @@ export const useFieldState = params => {
   });
   const setSelectedSections = newSelectedSections => {
     innerSetSelectedSections(newSelectedSections);
-    onSelectedSectionsChange == null || onSelectedSectionsChange(newSelectedSections);
+    onSelectedSectionsChange?.(newSelectedSections);
   };
   const parsedSelectedSections = React.useMemo(() => parseSelectedSections(selectedSections, state.sections), [selectedSections, state.sections]);
   const activeSectionIndex = parsedSelectedSections === 'all' ? 0 : parsedSelectedSections;

package/internals/hooks/useField/useFieldV6TextField.js

@@ -43,7 +43,8 @@ export const useFieldV6TextField = params => {
       onClick,
       onPaste,
       onBlur,
-      inputRef: inputRefProp
+      inputRef: inputRefProp,
+      placeholder: inPlaceholder
     },
     internalProps: {
       readOnly = false
@@ -109,9 +110,8 @@ export const useFieldV6TextField = params => {
       inputRef.current.scrollTop = currentScrollTop;
     },
     getActiveSectionIndexFromDOM: () => {
-      var _selectionStart, _selectionEnd;
-      const browserStartIndex = (_selectionStart = inputRef.current.selectionStart) != null ? _selectionStart : 0;
-      const browserEndIndex = (_selectionEnd = inputRef.current.selectionEnd) != null ? _selectionEnd : 0;
+      const browserStartIndex = inputRef.current.selectionStart ?? 0;
+      const browserEndIndex = inputRef.current.selectionEnd ?? 0;
       if (browserStartIndex === 0 && browserEndIndex === 0) {
         return null;
       }
@@ -120,20 +120,17 @@ export const useFieldV6TextField = params => {
       return nextSectionIndex === -1 ? sections.length - 1 : nextSectionIndex - 1;
     },
     focusField: (newSelectedSection = 0) => {
-      var _inputRef$current;
-      (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+      inputRef.current?.focus();
       setSelectedSections(newSelectedSection);
     },
     setSelectedSections: newSelectedSections => setSelectedSections(newSelectedSections),
     isFieldFocused: () => inputRef.current === getActiveElement(document)
   }), [inputRef, parsedSelectedSections, sections, setSelectedSections]);
   const syncSelectionFromDOM = () => {
-    var _selectionStart2;
     if (readOnly) {
-      setSelectedSections(null);
       return;
     }
-    const browserStartIndex = (_selectionStart2 = inputRef.current.selectionStart) != null ? _selectionStart2 : 0;
+    const browserStartIndex = inputRef.current.selectionStart ?? 0;
     let nextSectionIndex;
     if (browserStartIndex <= sections[0].startInInput) {
       // Special case if browser index is in invisible characters at the beginning
@@ -148,7 +145,7 @@ export const useFieldV6TextField = params => {
     setSelectedSections(sectionIndex);
   };
   const handleInputFocus = useEventCallback((...args) => {
-    onFocus == null || onFocus(...args);
+    onFocus?.(...args);
     // The ref is guaranteed to be resolved at this point.
     const input = inputRef.current;
     clearTimeout(focusTimeoutRef.current);
@@ -175,11 +172,11 @@ export const useFieldV6TextField = params => {
     if (event.isDefaultPrevented()) {
       return;
     }
-    onClick == null || onClick(event, ...args);
+    onClick?.(event, ...args);
     syncSelectionFromDOM();
   });
   const handleInputPaste = useEventCallback(event => {
-    onPaste == null || onPaste(event);
+    onPaste?.(event);
 
     // prevent default to avoid the input `onChange` handler being called
     event.preventDefault();
@@ -212,7 +209,7 @@ export const useFieldV6TextField = params => {
     updateValueFromValueStr(pastedValue);
   });
   const handleContainerBlur = useEventCallback((...args) => {
-    onBlur == null || onBlur(...args);
+    onBlur?.(...args);
     setSelectedSections(null);
   });
   const handleInputChange = useEventCallback(event => {
@@ -278,11 +275,13 @@ export const useFieldV6TextField = params => {
       sectionIndex: activeSectionIndex
     });
   });
-  const placeholder = React.useMemo(() => fieldValueManager.getV6InputValueFromSections(getSectionsFromValue(valueManager.emptyValue), localizedDigits, isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, localizedDigits, isRTL]);
-  const valueStr = React.useMemo(() => {
-    var _state$tempValueStrAn;
-    return (_state$tempValueStrAn = state.tempValueStrAndroid) != null ? _state$tempValueStrAn : fieldValueManager.getV6InputValueFromSections(state.sections, localizedDigits, isRTL);
-  }, [state.sections, fieldValueManager, state.tempValueStrAndroid, localizedDigits, isRTL]);
+  const placeholder = React.useMemo(() => {
+    if (inPlaceholder) {
+      return inPlaceholder;
+    }
+    return fieldValueManager.getV6InputValueFromSections(getSectionsFromValue(valueManager.emptyValue), localizedDigits, isRTL);
+  }, [inPlaceholder, fieldValueManager, getSectionsFromValue, valueManager.emptyValue, localizedDigits, isRTL]);
+  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getV6InputValueFromSections(state.sections, localizedDigits, isRTL), [state.sections, fieldValueManager, state.tempValueStrAndroid, localizedDigits, isRTL]);
   React.useEffect(() => {
     // Select all the sections when focused on mount (`autoFocus = true` on the input)
     if (inputRef.current && inputRef.current === getActiveElement(document)) {

package/internals/hooks/useField/useFieldV7TextField.js

@@ -132,7 +132,7 @@ export const useFieldV7TextField = params => {
       return;
     }
     setFocused(true);
-    onClick == null || onClick(event, ...args);
+    onClick?.(event, ...args);
     if (parsedSelectedSections === 'all') {
       setTimeout(() => {
         const cursorPosition = document.getSelection().getRangeAt(0).startOffset;
@@ -160,13 +160,12 @@ export const useFieldV7TextField = params => {
     }
   });
   const handleContainerInput = useEventCallback(event => {
-    var _target$textContent;
-    onInput == null || onInput(event);
+    onInput?.(event);
     if (!sectionListRef.current || parsedSelectedSections !== 'all') {
       return;
     }
     const target = event.target;
-    const keyPressed = (_target$textContent = target.textContent) != null ? _target$textContent : '';
+    const keyPressed = target.textContent ?? '';
     sectionListRef.current.getRoot().innerHTML = state.sections.map(section => `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`).join('');
     interactions.syncSelectionToDOM();
     if (keyPressed.length === 0 || keyPressed.charCodeAt(0) === 10) {
@@ -183,7 +182,7 @@ export const useFieldV7TextField = params => {
     }
   });
   const handleContainerPaste = useEventCallback(event => {
-    onPaste == null || onPaste(event);
+    onPaste?.(event);
     if (readOnly || parsedSelectedSections !== 'all') {
       event.preventDefault();
       return;
@@ -194,7 +193,7 @@ export const useFieldV7TextField = params => {
     updateValueFromValueStr(pastedValue);
   });
   const handleContainerFocus = useEventCallback((...args) => {
-    onFocus == null || onFocus(...args);
+    onFocus?.(...args);
     if (focused || !sectionListRef.current) {
       return;
     }
@@ -205,7 +204,7 @@ export const useFieldV7TextField = params => {
     }
   });
   const handleContainerBlur = useEventCallback((...args) => {
-    onBlur == null || onBlur(...args);
+    onBlur?.(...args);
     setTimeout(() => {
       if (!sectionListRef.current) {
         return;
@@ -267,12 +266,11 @@ export const useFieldV7TextField = params => {
     event.dataTransfer.dropEffect = 'none';
   });
   const handleInputContentInput = useEventCallback(event => {
-    var _target$textContent2;
     if (!sectionListRef.current) {
       return;
     }
     const target = event.target;
-    const keyPressed = (_target$textContent2 = target.textContent) != null ? _target$textContent2 : '';
+    const keyPressed = target.textContent ?? '';
     const sectionIndex = sectionListRef.current.getSectionIndexFromDOMElement(target);
     const section = state.sections[sectionIndex];
     if (readOnly || !sectionListRef.current) {
@@ -368,7 +366,7 @@ export const useFieldV7TextField = params => {
   const valueStr = React.useMemo(() => areAllSectionsEmpty ? '' : fieldValueManager.getV7HiddenInputValueFromSections(state.sections), [areAllSectionsEmpty, state.sections, fieldValueManager]);
   React.useEffect(() => {
     if (sectionListRef.current == null) {
-      throw new Error(['MUI X: The `sectionListRef` prop has not been initialized by `PickersSectionList`', 'You probably tried to pass a component to the `textField` slot that contains an `<input />` element instead of a `PickersSectionList`.', '', 'If you want to keep using an `<input />` HTML element for the editing, please remove the `enableAccessibleFieldDOMStructure` prop from your picker or field component:', '', '<DatePicker slots={{ textField: MyCustomTextField }} />', '', 'Learn more about the field accessible DOM structure on the MUI documentation: https://next.mui.com/x/react-date-pickers/fields/#fields-to-edit-a-single-element'].join('\n'));
+      throw new Error(['MUI X: The `sectionListRef` prop has not been initialized by `PickersSectionList`', 'You probably tried to pass a component to the `textField` slot that contains an `<input />` element instead of a `PickersSectionList`.', '', 'If you want to keep using an `<input />` HTML element for the editing, please remove the `enableAccessibleFieldDOMStructure` prop from your picker or field component:', '', '<DatePicker slots={{ textField: MyCustomTextField }} />', '', 'Learn more about the field accessible DOM structure on the MUI documentation: https://mui.com/x/react-date-pickers/fields/#fields-to-edit-a-single-element'].join('\n'));
     }
     if (autoFocus && sectionListRef.current) {
       sectionListRef.current.getSectionContent(sectionOrder.startIndex).focus();
@@ -381,7 +379,7 @@ export const useFieldV7TextField = params => {
       // Forwarded
       autoFocus,
       readOnly,
-      focused: focusedProp != null ? focusedProp : focused,
+      focused: focusedProp ?? focused,
       sectionListRef: handleSectionListRef,
       onBlur: handleContainerBlur,
       onClick: handleContainerClick,

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -20,7 +20,6 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  * - MobileTimePicker
  */
 export const useMobilePicker = _ref => {
-  var _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$layout;
   let {
       props,
       getOpenDialogAriaText
@@ -47,7 +46,7 @@ export const useMobilePicker = _ref => {
   const utils = useUtils();
   const fieldRef = React.useRef(null);
   const labelId = useId();
-  const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null || (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
     open,
     actions,
@@ -64,14 +63,14 @@ export const useMobilePicker = _ref => {
   const Field = slots.field;
   const fieldProps = useSlotProps({
     elementType: Field,
-    externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.field,
+    externalSlotProps: innerSlotProps?.field,
     additionalProps: _extends({}, pickerFieldProps, isToolbarHidden && {
       id: labelId
     }, !(disabled || readOnly) && {
       onClick: actions.onOpen,
       onKeyDown: onSpaceOrEnter(actions.onOpen)
     }, {
-      readOnly: readOnly != null ? readOnly : true,
+      readOnly: readOnly ?? true,
       disabled,
       className,
       sx,
@@ -96,7 +95,7 @@ export const useMobilePicker = _ref => {
   const slotsForField = _extends({
     textField: slots.textField
   }, fieldProps.slots);
-  const Layout = (_slots$layout = slots.layout) != null ? _slots$layout : PickersLayout;
+  const Layout = slots.layout ?? PickersLayout;
   let labelledById = labelId;
   if (isToolbarHidden) {
     if (label) {
@@ -106,12 +105,12 @@ export const useMobilePicker = _ref => {
     }
   }
   const slotProps = _extends({}, innerSlotProps, {
-    toolbar: _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.toolbar, {
+    toolbar: _extends({}, innerSlotProps?.toolbar, {
       titleId: labelId
     }),
     mobilePaper: _extends({
       'aria-labelledby': labelledById
-    }, innerSlotProps == null ? void 0 : innerSlotProps.mobilePaper)
+    }, innerSlotProps?.mobilePaper)
   });
   const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
   const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
@@ -124,7 +123,7 @@ export const useMobilePicker = _ref => {
       open: open,
       slots: slots,
       slotProps: slotProps,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps == null ? void 0 : slotProps.layout, {
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
         children: renderCurrentView()

package/internals/hooks/useOpenState.js

@@ -8,7 +8,7 @@ export const useOpenState = ({
   const [openState, setIsOpenState] = React.useState(false);
 
   // It is required to update inner state in useEffect in order to avoid situation when
-  // Our component is not mounted yet, but `open` state is set to `true` (e.g. initially opened)
+  // Our component is not mounted yet, but `open` state is set to `true` (for example initially opened)
   React.useEffect(() => {
     if (isControllingOpenProp) {
       if (typeof open !== 'boolean') {

package/internals/hooks/usePicker/index.d.ts

@@ -1,3 +1,4 @@
 export { usePicker } from './usePicker';
 export type { UsePickerProps, UsePickerBaseProps, UsePickerParams, UsePickerResponse, } from './usePicker.types';
 export type { PickerValueManager, PickerSelectionState, UsePickerValueFieldResponse, } from './usePickerValue.types';
+export type { PickerViewsRendererProps } from './usePickerViews';

package/internals/hooks/usePicker/usePickerViews.d.ts

@@ -7,11 +7,13 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
 import { FieldRef, FieldSection, PickerValidDate, TimezoneProps } from '../../../models';
 interface PickerViewsRendererBaseExternalProps<TView extends DateOrTimeViewWithMeridiem> extends Omit<UsePickerViewsProps<any, any, TView, any, any>, 'openTo' | 'viewRenderers'> {
 }
-export type PickerViewsRendererProps<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = TExternalProps & TAdditionalProps & UsePickerValueViewsResponse<TValue> & {
+export type PickerViewsRendererProps<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = Omit<TExternalProps, 'className' | 'sx'> & TAdditionalProps & UsePickerValueViewsResponse<TValue> & {
     view: TView;
     views: readonly TView[];
     focusedView: TView | null;
     onFocusedViewChange: (viewToFocus: TView, hasFocus: boolean) => void;
+    showViewSwitcher: boolean;
+    timeViewsCount: number;
 };
 export type PickerViewRenderer<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = (props: PickerViewsRendererProps<TValue, TView, TExternalProps, TAdditionalProps>) => React.ReactNode;
 export type PickerViewRendererLookup<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<any>, TAdditionalProps extends {}> = {
@@ -73,7 +75,7 @@ export interface UsePickerViewParams<TValue, TDate extends PickerValidDate, TVie
      * @param {any} rendererProps All the props that are being passed down to the renderer.
      * @returns {React.ReactNode} A React node that will be rendered instead of the default renderer.
      */
-    rendererInterceptor?: (viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps, TAdditionalProps>, popperView: TView, rendererProps: Omit<TExternalProps, 'className' | 'sx'> & TAdditionalProps & UsePickerValueViewsResponse<TValue>) => React.ReactNode;
+    rendererInterceptor?: (viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps, TAdditionalProps>, popperView: TView, rendererProps: PickerViewsRendererProps<TValue, TView, TExternalProps, TAdditionalProps>) => React.ReactNode;
 }
 export interface UsePickerViewsResponse<TView extends DateOrTimeViewWithMeridiem> {
     /**

package/internals/hooks/usePicker/usePickerViews.js

@@ -100,10 +100,9 @@ export const usePickerViews = ({
     if (currentViewMode === 'field' && open) {
       onClose();
       setTimeout(() => {
-        var _fieldRef$current;
         // focusing the input before the range selection is done
         // calling it outside of timeout results in an inconsistent behavior between Safari And Chrome
-        fieldRef == null || (_fieldRef$current = fieldRef.current) == null || _fieldRef$current.focusField(view);
+        fieldRef?.current?.focusField(view);
       });
     }
   }, [view]); // eslint-disable-line react-hooks/exhaustive-deps

package/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -24,7 +24,6 @@ const PickerStaticLayout = styled(PickersLayout)(({
  * - StaticTimePicker
  */
 export const useStaticPicker = _ref => {
-  var _slots$layout;
   let {
       props,
       ref
@@ -44,26 +43,23 @@ export const useStaticPicker = _ref => {
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
     props,
-    autoFocusView: autoFocus != null ? autoFocus : false,
+    autoFocusView: autoFocus ?? false,
     fieldRef: undefined,
     additionalViewProps: {},
     wrapperVariant: displayStaticWrapperAs
   }));
-  const Layout = (_slots$layout = slots == null ? void 0 : slots.layout) != null ? _slots$layout : PickerStaticLayout;
-  const renderPicker = () => {
-    var _slotProps$layout, _slotProps$layout2, _slotProps$layout3;
-    return /*#__PURE__*/_jsx(LocalizationProvider, {
-      localeText: localeText,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps == null ? void 0 : slotProps.layout, {
-        slots: slots,
-        slotProps: slotProps,
-        sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps == null || (_slotProps$layout = slotProps.layout) == null ? void 0 : _slotProps$layout.sx) ? slotProps.layout.sx : [slotProps == null || (_slotProps$layout2 = slotProps.layout) == null ? void 0 : _slotProps$layout2.sx])],
-        className: clsx(className, slotProps == null || (_slotProps$layout3 = slotProps.layout) == null ? void 0 : _slotProps$layout3.className),
-        ref: ref,
-        children: renderCurrentView()
-      }))
-    });
-  };
+  const Layout = slots?.layout ?? PickerStaticLayout;
+  const renderPicker = () => /*#__PURE__*/_jsx(LocalizationProvider, {
+    localeText: localeText,
+    children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
+      slots: slots,
+      slotProps: slotProps,
+      sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps?.layout?.sx) ? slotProps.layout.sx : [slotProps?.layout?.sx])],
+      className: clsx(className, slotProps?.layout?.className),
+      ref: ref,
+      children: renderCurrentView()
+    }))
+  });
   return {
     renderPicker
   };