@mui/x-date-pickers 6.5.0 → 6.7.0

package/internals/components/PickersToolbarButton.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant"];
+const _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant", "width"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Button from '@mui/material/Button';
@@ -38,7 +38,8 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
       selected,
       typographyClassName,
       value,
-      variant
+      variant,
+      width
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const classes = useUtilityClasses(props);
@@ -46,7 +47,11 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
     variant: "text",
     ref: ref,
     className: clsx(className, classes.root)
-  }, other, {
+  }, width ? {
+    sx: {
+      width
+    }
+  } : {}, other, {
     children: /*#__PURE__*/_jsx(PickersToolbarText, {
       align: align,
       className: typographyClassName,

package/internals/constants/dimensions.d.ts

@@ -3,3 +3,4 @@ export declare const DAY_MARGIN = 2;
 export declare const DIALOG_WIDTH = 320;
 export declare const VIEW_HEIGHT = 358;
 export declare const DIGITAL_CLOCK_VIEW_HEIGHT = 232;
+export declare const MULTI_SECTION_CLOCK_SECTION_WIDTH = 48;

package/internals/constants/dimensions.js

@@ -2,4 +2,5 @@ export const DAY_SIZE = 36;
 export const DAY_MARGIN = 2;
 export const DIALOG_WIDTH = 320;
 export const VIEW_HEIGHT = 358;
-export const DIGITAL_CLOCK_VIEW_HEIGHT = 232;
+export const DIGITAL_CLOCK_VIEW_HEIGHT = 232;
+export const MULTI_SECTION_CLOCK_SECTION_WIDTH = 48;

package/internals/demo/DemoContainer.d.ts

@@ -10,6 +10,6 @@ interface DemoItemProps {
     component?: string;
     children: React.ReactNode;
 }
-export declare function DemoItem(props: DemoItemProps): JSX.Element;
-export declare function DemoContainer(props: DemoGridProps): JSX.Element;
+export declare function DemoItem(props: DemoItemProps): React.JSX.Element;
+export declare function DemoContainer(props: DemoGridProps): React.JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { UseDesktopPickerParams, UseDesktopPickerProps } from './useDesktopPicker.types';
 import { DateOrTimeViewWithMeridiem } from '../../models';
 /**
@@ -8,5 +8,5 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - DesktopTimePicker
  */
 export declare const useDesktopPicker: <TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TDate, TView, TExternalProps>) => {
-    renderPicker: () => JSX.Element;
+    renderPicker: () => React.JSX.Element;
 };

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

@@ -16,7 +16,7 @@ export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeV
     /**
      * Component used to enter the date with the keyboard.
      */
-    Field: React.ElementType<BaseSingleInputFieldProps<TDate | null, FieldSection, any>>;
+    Field: React.ElementType<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, any>>;
     /**
      * Form control with an input to render the value inside the default field.
      * Receives the same props as `@mui/material/TextField`.
@@ -41,7 +41,7 @@ export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeV
 export interface UseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView>, Pick<PickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, 'toolbar'> {
 }
 export interface ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, FieldSection, unknown>>, {}, UsePickerProps<TDate | null, any, FieldSection, any, any, any>>;
+    field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, unknown>>, {}, UsePickerProps<TDate | null, any, FieldSection, any, any, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
     inputAdornment?: Partial<InputAdornmentProps>;
     openPickerButton?: SlotComponentProps<typeof IconButton, {}, UseDesktopPickerProps<TDate, any, any, any>>;

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

@@ -1,3 +1,3 @@
 import { UseFieldParams, UseFieldResponse, UseFieldForwardedProps, UseFieldInternalProps } from './useField.types';
 import { FieldSection } from '../../../models';
-export declare const useField: <TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any>>(params: UseFieldParams<TValue, TDate, TSection, TForwardedProps, TInternalProps>) => UseFieldResponse<TForwardedProps>;
+export declare const useField: <TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, any>>(params: UseFieldParams<TValue, TDate, TSection, TForwardedProps, TInternalProps>) => UseFieldResponse<TForwardedProps>;

package/internals/hooks/useField/useField.js

@@ -159,7 +159,7 @@ export const useField = params => {
       return;
     }
     let keyPressed;
-    if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1) {
+    if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1 && cleanValueStr.length === 1) {
       keyPressed = cleanValueStr;
     } else {
       const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections, isRTL));
@@ -182,7 +182,7 @@ export const useField = params => {
 
       // The active section being selected, the browser has replaced its value with the key pressed by the user.
       const activeSectionEndRelativeToNewValue = cleanValueStr.length - prevValueStr.length + activeSection.end - cleanString(activeSection.endSeparator || '').length;
-      keyPressed = cleanValueStr.slice(activeSection.start, activeSectionEndRelativeToNewValue);
+      keyPressed = cleanValueStr.slice(activeSection.start + cleanString(activeSection.startSeparator || '').length, activeSectionEndRelativeToNewValue);
     }
     if (isAndroid() && keyPressed.length === 0) {
       setTempAndroidValueStr(valueStr);
@@ -298,7 +298,12 @@ export const useField = params => {
     if (selectionStart !== inputRef.current.selectionStart || selectionEnd !== inputRef.current.selectionEnd) {
       // Fix scroll jumping on iOS browser: https://github.com/mui/mui-x/issues/8321
       const currentScrollTop = inputRef.current.scrollTop;
-      inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      // On multi input range pickers we want to update selection range only for the active input
+      // This helps avoiding the focus jumping on Safari https://github.com/mui/mui-x/issues/9003
+      // because WebKit implements the `setSelectionRange` based on the spec: https://bugs.webkit.org/show_bug.cgi?id=224425
+      if (inputRef.current && inputRef.current === getActiveElement(document)) {
+        inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      }
       // Even reading this variable seems to do the trick, but also setting it just to make use of it
       inputRef.current.scrollTop = currentScrollTop;
     }

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, FieldSectionContentType, FieldValueType } from '../../../models';
 import type { PickerValueManager } from '../usePicker';
 import { InferError, Validator } from '../useValidation';
-export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any>> {
+export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, any>> {
     inputRef?: React.Ref<HTMLInputElement>;
     forwardedProps: TForwardedProps;
     internalProps: TInternalProps;
@@ -11,7 +11,7 @@ export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TF
     validator: Validator<TValue, TDate, InferError<TInternalProps>, UseFieldValidationProps<TValue, TInternalProps>>;
     valueType: FieldValueType;
 }
-export interface UseFieldInternalProps<TValue, TSection extends FieldSection, TError> {
+export interface UseFieldInternalProps<TValue, TDate, TSection extends FieldSection, TError> {
     /**
      * The selected value.
      * Used when the component is controlled.
@@ -21,6 +21,12 @@ export interface UseFieldInternalProps<TValue, TSection extends FieldSection, TE
      * The default value. Use when the component is not controlled.
      */
     defaultValue?: TValue;
+    /**
+     * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+     * For example, on time fields it will be used to determine the date to set.
+     * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+     */
+    referenceDate?: TDate;
     /**
      * Callback fired when the value changes.
      * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

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

@@ -14,7 +14,7 @@ export interface UpdateSectionValueParams<TSection extends FieldSection> {
      */
     shouldGoToNextSection: boolean;
 }
-export declare const useFieldState: <TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any>>(params: UseFieldParams<TValue, TDate, TSection, TForwardedProps, TInternalProps>) => {
+export declare const useFieldState: <TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, any>>(params: UseFieldParams<TValue, TDate, TSection, TForwardedProps, TInternalProps>) => {
     state: UseFieldState<TValue, TSection>;
     selectedSectionIndexes: FieldSelectedSectionsIndexes | null;
     setSelectedSections: (newSelectedSections: FieldSelectedSections) => void;

package/internals/hooks/useField/useFieldState.js

@@ -4,6 +4,7 @@ import useControlled from '@mui/utils/useControlled';
 import { useTheme } from '@mui/material/styles';
 import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
 import { addPositionPropertiesToSections, splitFormatIntoSections, clampDaySectionIfPossible, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
+import { getSectionTypeGranularity } from '../../utils/getDefaultReferenceDate';
 export const useFieldState = params => {
   var _ref;
   const utils = useUtils();
@@ -20,6 +21,7 @@ export const useFieldState = params => {
     internalProps: {
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       onChange,
       format,
       formatDensity = 'dense',
@@ -36,12 +38,24 @@ export const useFieldState = params => {
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
     validateSections(sections, valueType);
-    return {
+    const stateWithoutReferenceDate = {
       sections,
       value: valueFromTheOutside,
-      referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, valueManager.getTodayValue(utils, valueType)),
+      referenceValue: valueManager.emptyValue,
       tempValueStrAndroid: null
     };
+    const granularity = getSectionTypeGranularity(sections);
+    const referenceValue = valueManager.getInitialReferenceValue({
+      referenceDate: referenceDateProp,
+      value: valueFromTheOutside,
+      valueType,
+      utils,
+      props: internalProps,
+      granularity
+    });
+    return _extends({}, stateWithoutReferenceDate, {
+      referenceValue
+    });
   });
   const [selectedSections, innerSetSelectedSections] = useControlled({
     controlled: selectedSectionsProp,
@@ -241,7 +255,13 @@ export const useFieldState = params => {
     tempValueStrAndroid
   }));
   React.useEffect(() => {
+    let shouldUpdate = false;
     if (!valueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) {
+      shouldUpdate = true;
+    } else {
+      shouldUpdate = valueManager.getTimezone(utils, state.value) !== valueManager.getTimezone(utils, valueFromTheOutside);
+    }
+    if (shouldUpdate) {
       setState(prevState => _extends({}, prevState, {
         value: valueFromTheOutside,
         referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, prevState.referenceValue),

package/internals/hooks/useMobilePicker/useMobilePicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { UseMobilePickerParams, UseMobilePickerProps } from './useMobilePicker.types';
 import { DateOrTimeViewWithMeridiem } from '../../models';
 /**
@@ -8,5 +8,5 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - MobileTimePicker
  */
 export declare const useMobilePicker: <TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobilePickerProps<TDate, TView, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseMobilePickerParams<TDate, TView, TExternalProps>) => {
-    renderPicker: () => JSX.Element;
+    renderPicker: () => React.JSX.Element;
 };

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

@@ -14,7 +14,7 @@ export interface UseMobilePickerSlotsComponent<TDate, TView extends DateOrTimeVi
     /**
      * Component used to enter the date with the keyboard.
      */
-    Field: React.ElementType<BaseSingleInputFieldProps<TDate | null, FieldSection, any>>;
+    Field: React.ElementType<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, any>>;
     /**
      * Form control with an input to render the value inside the default field.
      * Receives the same props as `@mui/material/TextField`.
@@ -23,7 +23,7 @@ export interface UseMobilePickerSlotsComponent<TDate, TView extends DateOrTimeVi
     TextField?: React.ElementType<TextFieldProps>;
 }
 export interface ExportedUseMobilePickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, FieldSection, unknown>>, {}, UsePickerProps<TDate | null, any, FieldSection, any, any, any>>;
+    field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, unknown>>, {}, UsePickerProps<TDate | null, any, FieldSection, any, any, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
 }
 export interface UseMobilePickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedUseMobilePickerSlotsComponentsProps<TDate, TView>, Pick<PickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, 'toolbar'> {

package/internals/hooks/usePicker/usePickerValue.types.d.ts

@@ -3,6 +3,7 @@ import { InferError, Validator } from '../useValidation';
 import { UseFieldValidationProps } from '../useField/useField.types';
 import { WrapperVariant } from '../../models/common';
 import { FieldSection, FieldSelectedSections, FieldValueType, MuiPickersAdapter } from '../../../models';
+import { GetDefaultReferenceDateProps } from '../../utils/getDefaultReferenceDate';
 export interface PickerValueManager<TValue, TDate, TError> {
     /**
      * Determines if two values are equal.
@@ -25,6 +26,26 @@ export interface PickerValueManager<TValue, TDate, TError> {
      * @returns {TValue} The value to set when clicking the "Today" button.
      */
     getTodayValue: (utils: MuiPickersAdapter<TDate>, valueType: FieldValueType) => TValue;
+    /**
+     * @template TDate, TValue
+     * Method returning the reference value to use when mounting the component.
+     * @param {object} params The params of the method.
+     * @param {TDate | undefined} params.referenceDate The referenceDate provided by the user.
+     * @param {TValue} params.value The value provided by the user.
+     * @param {GetDefaultReferenceDateProps<TDate>} params.props The validation props needed to compute the reference value.
+     * @param {MuiPickersAdapter<TDate>} params.utils The adapter.
+     * @param {FieldValueType} params.valueType The type of the value being edited.
+     * @param {granularity} params.granularity The granularity of the selection possible on this component.
+     * @returns {TValue} The reference value to use for non-provided dates.
+     */
+    getInitialReferenceValue: (params: {
+        referenceDate: TDate | undefined;
+        value: TValue;
+        props: GetDefaultReferenceDateProps<TDate>;
+        utils: MuiPickersAdapter<TDate>;
+        valueType: FieldValueType;
+        granularity: number;
+    }) => TValue;
     /**
      * Method parsing the input value to replace all invalid dates by `null`.
      * @template TDate, TValue
@@ -61,6 +82,15 @@ export interface PickerValueManager<TValue, TDate, TError> {
      * The value identifying no error, used to initialise the error state.
      */
     defaultErrorState: TError;
+    /**
+     * Return the timezone of the date inside a value.
+     * Throw an error on range picker if both values don't have the same timezone.
+     @template TValue, TDate
+     @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
+     @param {TValue} value The current value.
+     @returns {string | null} The timezone of the current value.
+     */
+    getTimezone: (utils: MuiPickersAdapter<TDate>, value: TValue) => string | null;
 }
 export interface PickerChangeHandlerContext<TError> {
     validationError: TError;
@@ -164,7 +194,7 @@ export interface UsePickerValueBaseProps<TValue, TError> {
 /**
  * Props used to handle the value of non-static pickers.
  */
-export interface UsePickerValueNonStaticProps<TValue, TSection extends FieldSection> extends Pick<UseFieldInternalProps<TValue, TSection, unknown>, 'selectedSections' | 'onSelectedSectionsChange'> {
+export interface UsePickerValueNonStaticProps<TValue, TSection extends FieldSection> extends Pick<UseFieldInternalProps<TValue, unknown, TSection, unknown>, 'selectedSections' | 'onSelectedSectionsChange'> {
     /**
      * If `true`, the popover or modal will close after submitting the full date.
      * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
@@ -207,7 +237,7 @@ export interface UsePickerValueActions {
     onOpen: () => void;
     onClose: () => void;
 }
-export type UsePickerValueFieldResponse<TValue, TSection extends FieldSection, TError> = Required<Pick<UseFieldInternalProps<TValue, TSection, TError>, 'value' | 'onChange' | 'selectedSections' | 'onSelectedSectionsChange'>>;
+export type UsePickerValueFieldResponse<TValue, TSection extends FieldSection, TError> = Required<Pick<UseFieldInternalProps<TValue, unknown, TSection, TError>, 'value' | 'onChange' | 'selectedSections' | 'onSelectedSectionsChange'>>;
 /**
  * Props passed to `usePickerViews`.
  */

package/internals/hooks/usePicker/usePickerViews.js

@@ -82,15 +82,12 @@ export const usePickerViews = ({
     hasUIView: false,
     viewModeLookup: {}
   }), [disableOpenPicker, viewRenderers, views]);
-  const hasMultipleUITimeView = React.useMemo(() => {
-    const numberUITimeViews = views.reduce((acc, viewForReduce) => {
-      if (viewRenderers[viewForReduce] != null && isTimeView(viewForReduce)) {
-        return acc + 1;
-      }
-      return acc;
-    }, 0);
-    return numberUITimeViews > 1;
-  }, [viewRenderers, views]);
+  const timeViewsCount = React.useMemo(() => views.reduce((acc, viewForReduce) => {
+    if (viewRenderers[viewForReduce] != null && isTimeView(viewForReduce)) {
+      return acc + 1;
+    }
+    return acc;
+  }, 0), [viewRenderers, views]);
   const currentViewMode = viewModeLookup[view];
   const shouldRestoreFocus = useEventCallback(() => currentViewMode === 'UI');
   const [popperView, setPopperView] = React.useState(currentViewMode === 'UI' ? view : null);
@@ -152,7 +149,8 @@ export const usePickerViews = ({
         onViewChange: setView,
         focusedView,
         onFocusedViewChange: setFocusedView,
-        showViewSwitcher: hasMultipleUITimeView
+        showViewSwitcher: timeViewsCount > 1,
+        timeViewsCount
       }));
     }
   };

package/internals/hooks/useStaticPicker/useStaticPicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { UseStaticPickerParams, UseStaticPickerProps } from './useStaticPicker.types';
 import { DateOrTimeViewWithMeridiem } from '../../models';
 /**
@@ -8,5 +8,5 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - StaticTimePicker
  */
 export declare const useStaticPicker: <TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TDate, TView, any, TExternalProps>>({ props, ref, ...pickerParams }: UseStaticPickerParams<TDate, TView, TExternalProps>) => {
-    renderPicker: () => JSX.Element;
+    renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useViews.js

@@ -52,15 +52,6 @@ export function useViews({
   const viewIndex = views.indexOf(view);
   const previousView = (_views = views[viewIndex - 1]) != null ? _views : null;
   const nextView = (_views2 = views[viewIndex + 1]) != null ? _views2 : null;
-  const handleChangeView = useEventCallback(newView => {
-    if (newView === view) {
-      return;
-    }
-    setView(newView);
-    if (onViewChange) {
-      onViewChange(newView);
-    }
-  });
   const handleFocusedViewChange = useEventCallback((viewToFocus, hasFocus) => {
     if (hasFocus) {
       // Focus event
@@ -73,6 +64,16 @@ export function useViews({
 
     onFocusedViewChange == null ? void 0 : onFocusedViewChange(viewToFocus, hasFocus);
   });
+  const handleChangeView = useEventCallback(newView => {
+    if (newView === view) {
+      return;
+    }
+    setView(newView);
+    handleFocusedViewChange(newView, true);
+    if (onViewChange) {
+      onViewChange(newView);
+    }
+  });
   const goToNextView = useEventCallback(() => {
     if (nextView) {
       handleChangeView(nextView);

package/internals/index.d.ts

@@ -42,8 +42,9 @@ export type { BaseToolbarProps, ExportedBaseToolbarProps } from './models/props/
 export type { DefaultizedProps, MakeOptional } from './models/helpers';
 export type { WrapperVariant } from './models/common';
 export type { BaseDateValidationProps, BaseTimeValidationProps, TimeValidationProps, MonthValidationProps, YearValidationProps, DayValidationProps, DateTimeValidationProps, } from './models/validation';
-export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual } from './utils/date-utils';
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, } from './utils/date-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
+export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, } from './utils/utils';
 export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
 export { extractValidationProps } from './utils/validation/extractValidationProps';

package/internals/index.js

@@ -15,8 +15,9 @@ export { useStaticPicker } from './hooks/useStaticPicker';
 export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';
 export { useValidation } from './hooks/useValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
-export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual } from './utils/date-utils';
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate } from './utils/date-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
+export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';
 export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
 export { extractValidationProps } from './utils/validation/extractValidationProps';

package/internals/models/fields.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import type { UseFieldInternalProps } from '../hooks/useField';
 import type { FieldSection } from '../../models';
-export interface BaseFieldProps<TValue, TSection extends FieldSection, TError> extends Omit<UseFieldInternalProps<TValue, TSection, TError>, 'format'> {
+export interface BaseFieldProps<TValue, TDate, TSection extends FieldSection, TError> extends Omit<UseFieldInternalProps<TValue, TDate, TSection, TError>, 'format'> {
     className?: string;
     format?: string;
     disabled?: boolean;

package/internals/utils/date-time-utils.d.ts

@@ -0,0 +1,6 @@
+import { DateOrTimeView, MuiPickersAdapter } from '../../models';
+export declare const resolveDateTimeFormat: (utils: MuiPickersAdapter<any>, { views, format, ...other }: {
+    format?: string | undefined;
+    views: readonly DateOrTimeView[];
+    ampm: boolean;
+}) => string;

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

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["views", "format"];
+import { resolveTimeFormat, isTimeView } from './time-utils';
+import { resolveDateFormat } from './date-utils';
+export const resolveDateTimeFormat = (utils, _ref) => {
+  let {
+      views,
+      format
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (format) {
+    return format;
+  }
+  const dateViews = [];
+  const timeViews = [];
+  views.forEach(view => {
+    if (isTimeView(view)) {
+      timeViews.push(view);
+    } else {
+      dateViews.push(view);
+    }
+  });
+  if (timeViews.length === 0) {
+    return resolveDateFormat(utils, _extends({
+      views: dateViews
+    }, other), false);
+  }
+  if (dateViews.length === 0) {
+    return resolveTimeFormat(utils, _extends({
+      views: timeViews
+    }, other));
+  }
+  const timeFormat = resolveTimeFormat(utils, _extends({
+    views: timeViews
+  }, other));
+  const dateFormat = resolveDateFormat(utils, _extends({
+    views: dateViews
+  }, other), false);
+  return `${dateFormat} ${timeFormat}`;
+};

package/internals/utils/date-utils.d.ts

@@ -1,4 +1,5 @@
-import { MuiPickersAdapter } from '../../models';
+import { DateView, FieldValueType, MuiPickersAdapter } from '../../models';
+import { DateOrTimeViewWithMeridiem } from '../models';
 interface FindClosestDateParams<TDate> {
     date: TDate;
     disableFuture?: boolean;
@@ -15,4 +16,10 @@ export declare const applyDefaultDate: <TDate>(utils: MuiPickersAdapter<TDate, a
 export declare const areDatesEqual: <TDate>(utils: MuiPickersAdapter<TDate, any>, a: TDate, b: TDate) => boolean;
 export declare const getMonthsInYear: <TDate>(utils: MuiPickersAdapter<TDate, any>, year: TDate) => TDate[];
 export declare const mergeDateAndTime: <TDate>(utils: MuiPickersAdapter<TDate, any>, dateParam: TDate, timeParam: TDate) => TDate;
+export declare const getTodayDate: <TDate>(utils: MuiPickersAdapter<TDate, any>, valueType: FieldValueType) => TDate;
+export declare const isDatePickerView: (view: DateOrTimeViewWithMeridiem) => view is DateView;
+export declare const resolveDateFormat: (utils: MuiPickersAdapter<any>, { format, views }: {
+    format?: string | undefined;
+    views: readonly DateView[];
+}, isInToolbar: boolean) => string;
 export {};

package/internals/utils/date-utils.js

@@ -1,3 +1,4 @@
+import { areViewsEqual } from './views';
 export const findClosestEnabledDate = ({
   date,
   disableFuture,
@@ -85,4 +86,38 @@ export const mergeDateAndTime = (utils, dateParam, timeParam) => {
   mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam));
   mergedDate = utils.setSeconds(mergedDate, utils.getSeconds(timeParam));
   return mergedDate;
+};
+export const getTodayDate = (utils, valueType) => valueType === 'date' ? utils.startOfDay(utils.date()) : utils.date();
+const dateViews = ['year', 'month', 'day'];
+export const isDatePickerView = view => dateViews.includes(view);
+export const resolveDateFormat = (utils, {
+  format,
+  views
+}, isInToolbar) => {
+  if (format != null) {
+    return format;
+  }
+  const formats = utils.formats;
+  if (areViewsEqual(views, ['year'])) {
+    return formats.year;
+  }
+  if (areViewsEqual(views, ['month'])) {
+    return formats.month;
+  }
+  if (areViewsEqual(views, ['day'])) {
+    return formats.dayOfMonth;
+  }
+  if (areViewsEqual(views, ['month', 'year'])) {
+    return `${formats.month} ${formats.year}`;
+  }
+  if (areViewsEqual(views, ['day', 'month'])) {
+    return `${formats.month} ${formats.dayOfMonth}`;
+  }
+  if (isInToolbar) {
+    // Little localization hack (Google is doing the same for android native pickers):
+    // For english localization it is convenient to include weekday into the date "Mon, Jun 1".
+    // For other locales using strings like "June 1", without weekday.
+    return /en/.test(utils.getCurrentLocaleCode()) ? formats.normalDateWithWeekday : formats.normalDate;
+  }
+  return formats.keyboardDate;
 };

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', 'format', 'formatDensity', 'onChange', 'readOnly', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef'];
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'readOnly', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef'];
 export const splitFieldInternalAndForwardedProps = (props, valueType) => {
   const forwardedProps = _extends({}, props);
   const internalProps = {};

package/internals/utils/getDefaultReferenceDate.d.ts

@@ -0,0 +1,15 @@
+import { FieldSection, FieldValueType, MuiPickersAdapter } from '../../models';
+export interface GetDefaultReferenceDateProps<TDate> {
+    maxDate?: TDate;
+    minDate?: TDate;
+    minTime?: TDate;
+    maxTime?: TDate;
+    disableIgnoringDatePartForTimeValidation?: boolean;
+}
+export declare const getSectionTypeGranularity: (sections: FieldSection[]) => number;
+export declare const getDefaultReferenceDate: <TDate>({ props, utils, valueType, granularity, }: {
+    props: GetDefaultReferenceDateProps<TDate>;
+    utils: MuiPickersAdapter<TDate, any>;
+    valueType: FieldValueType;
+    granularity: number;
+}) => TDate;