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

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,7 +200,7 @@ 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) {

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

@@ -109,9 +109,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 +119,18 @@ 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 => {
@@ -279,10 +276,7 @@ export const useFieldV6TextField = params => {
     });
   });
   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 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
   };

package/internals/hooks/useValueWithTimezone.js

@@ -14,10 +14,9 @@ export const useValueWithTimezone = ({
   onChange,
   valueManager
 }) => {
-  var _ref, _ref2;
   const utils = useUtils();
   const firstDefaultValue = React.useRef(defaultValue);
-  const inputValue = (_ref = valueProp != null ? valueProp : firstDefaultValue.current) != null ? _ref : valueManager.emptyValue;
+  const inputValue = valueProp ?? firstDefaultValue.current ?? valueManager.emptyValue;
   const inputTimezone = React.useMemo(() => valueManager.getTimezone(utils, inputValue), [utils, valueManager, inputValue]);
   const setInputTimezone = useEventCallback(newValue => {
     if (inputTimezone == null) {
@@ -25,11 +24,11 @@ export const useValueWithTimezone = ({
     }
     return valueManager.setTimezone(utils, inputTimezone, newValue);
   });
-  const timezoneToRender = (_ref2 = timezoneProp != null ? timezoneProp : inputTimezone) != null ? _ref2 : 'default';
+  const timezoneToRender = timezoneProp ?? inputTimezone ?? 'default';
   const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, inputValue), [valueManager, utils, timezoneToRender, inputValue]);
   const handleValueChange = useEventCallback((newValue, ...otherParams) => {
     const newValueWithInputTimezone = setInputTimezone(newValue);
-    onChange == null || onChange(newValueWithInputTimezone, ...otherParams);
+    onChange?.(newValueWithInputTimezone, ...otherParams);
   });
   return {
     value: valueWithTimezoneToRender,
@@ -53,11 +52,11 @@ export const useControlledValueWithTimezone = ({
     name,
     state: 'value',
     controlled: valueProp,
-    default: defaultValue != null ? defaultValue : valueManager.emptyValue
+    default: defaultValue ?? valueManager.emptyValue
   });
   const onChange = useEventCallback((newValue, ...otherParams) => {
     setValue(newValue);
-    onChangeProp == null || onChangeProp(newValue, ...otherParams);
+    onChangeProp?.(newValue, ...otherParams);
   });
   return useValueWithTimezone({
     timezone: timezoneProp,

package/internals/hooks/useViews.js

@@ -12,7 +12,6 @@ export function useViews({
   focusedView: inFocusedView,
   onFocusedViewChange
 }) {
-  var _views, _views2;
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnceNotValidView) {
       if (inView != null && !views.includes(inView)) {
@@ -50,8 +49,8 @@ export function useViews({
     }
   }, [openTo, setView, view, views]);
   const viewIndex = views.indexOf(view);
-  const previousView = (_views = views[viewIndex - 1]) != null ? _views : null;
-  const nextView = (_views2 = views[viewIndex + 1]) != null ? _views2 : null;
+  const previousView = views[viewIndex - 1] ?? null;
+  const nextView = views[viewIndex + 1] ?? null;
   const handleFocusedViewChange = useEventCallback((viewToFocus, hasFocus) => {
     if (hasFocus) {
       // Focus event
@@ -61,7 +60,7 @@ export function useViews({
       setFocusedView(prevFocusedView => viewToFocus === prevFocusedView ? null : prevFocusedView // If false the blur is due to view switching
       );
     }
-    onFocusedViewChange == null || onFocusedViewChange(viewToFocus, hasFocus);
+    onFocusedViewChange?.(viewToFocus, hasFocus);
   });
   const handleChangeView = useEventCallback(newView => {
     // always keep the focused view in sync

package/internals/index.d.ts

@@ -27,7 +27,7 @@ export { useField, createDateStrForV7HiddenInputFromSections, createDateStrForV6
 export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField';
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
 export { usePicker } from './hooks/usePicker';
-export type { UsePickerResponse, UsePickerParams, UsePickerProps, UsePickerValueFieldResponse, } from './hooks/usePicker';
+export type { UsePickerResponse, UsePickerParams, UsePickerProps, UsePickerValueFieldResponse, PickerViewsRendererProps, } from './hooks/usePicker';
 export type { UsePickerValueNonStaticProps, PickerValueManager, PickerSelectionState, } from './hooks/usePicker/usePickerValue.types';
 export type { UsePickerViewsNonStaticProps, PickerViewRendererLookup, PickerViewRenderer, UsePickerViewsProps, } from './hooks/usePicker/usePickerViews';
 export { useStaticPicker } from './hooks/useStaticPicker';

package/internals/models/validation.d.ts

@@ -71,7 +71,7 @@ export interface DayValidationProps<TDate extends PickerValidDate> {
     /**
      * Disable specific date.
      *
-     * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+     * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
      *
      * @template TDate
      * @param {TDate} day The date to test.

package/internals/utils/convertFieldResponseIntoMuiTextFieldProps.js

@@ -15,7 +15,7 @@ export const convertFieldResponseIntoMuiTextFieldProps = _ref => {
       } = fieldResponse,
       other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2);
     return _extends({}, other, {
-      InputProps: _extends({}, InputProps != null ? InputProps : {}, {
+      InputProps: _extends({}, InputProps ?? {}, {
         readOnly
       })
     });
@@ -31,10 +31,10 @@ export const convertFieldResponseIntoMuiTextFieldProps = _ref => {
     } = fieldResponse,
     other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3);
   return _extends({}, other, {
-    InputProps: _extends({}, InputProps != null ? InputProps : {}, {
+    InputProps: _extends({}, InputProps ?? {}, {
       readOnly
     }),
-    inputProps: _extends({}, inputProps != null ? inputProps : {}, {
+    inputProps: _extends({}, inputProps ?? {}, {
       inputMode,
       onPaste,
       onKeyDown,

package/internals/utils/date-time-utils.js

@@ -45,17 +45,14 @@ const resolveViews = (ampm, views, shouldUseSingleColumn) => {
   }
   return ampm ? [...views, 'meridiem'] : views;
 };
-const resolveShouldRenderTimeInASingleColumn = (timeSteps, threshold) => {
-  var _timeSteps$hours, _timeSteps$minutes;
-  return 24 * 60 / (((_timeSteps$hours = timeSteps.hours) != null ? _timeSteps$hours : 1) * ((_timeSteps$minutes = timeSteps.minutes) != null ? _timeSteps$minutes : 5)) <= threshold;
-};
+const resolveShouldRenderTimeInASingleColumn = (timeSteps, threshold) => 24 * 60 / ((timeSteps.hours ?? 1) * (timeSteps.minutes ?? 5)) <= threshold;
 export function resolveTimeViewsResponse({
   thresholdToRenderTimeInASingleColumn: inThreshold,
   ampm,
   timeSteps: inTimeSteps,
   views
 }) {
-  const thresholdToRenderTimeInASingleColumn = inThreshold != null ? inThreshold : 24;
+  const thresholdToRenderTimeInASingleColumn = inThreshold ?? 24;
   const timeSteps = _extends({
     hours: 1,
     minutes: 5,

package/internals/utils/fields.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from './validation/extractValidationProps';
-const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly'];
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator'];
 export const splitFieldInternalAndForwardedProps = (props, valueType) => {
   const forwardedProps = _extends({}, props);
   const internalProps = {};