@mui/x-date-pickers 7.19.0 → 7.21.0

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

@@ -6,7 +6,7 @@ import { SlotComponentProps } from '@mui/utils';
 import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
 import { PickersPopperSlots, PickersPopperSlotProps } from '../../components/PickersPopper';
 import { UsePickerParams, UsePickerProps } from '../usePicker';
-import { BaseSingleInputFieldProps, FieldSection, PickerValidDate } from '../../../models';
+import { BaseSingleInputFieldProps, FieldSection, PickerOwnerState, PickerValidDate } from '../../../models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
@@ -40,15 +40,12 @@ export interface UseDesktopPickerSlots<TDate extends PickerValidDate, TView exte
 }
 export interface UseDesktopPickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<TDate | null, TDate, TView>, 'toolbar'> {
 }
-export interface UseDesktopPickerOwnerState {
-    open: boolean;
-}
 export interface ExportedUseDesktopPickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<TDate | null, TDate, TView>, UseClearableFieldSlotProps {
     field?: SlotComponentPropsFromProps<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, unknown>, {}, UsePickerProps<TDate | null, TDate, any, any, any, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
     inputAdornment?: Partial<InputAdornmentProps>;
     openPickerButton?: SlotComponentProps<typeof IconButton, {}, UseDesktopPickerProps<TDate, any, TEnableAccessibleFieldDOMStructure, any, any>>;
-    openPickerIcon?: SlotComponentPropsFromProps<Record<string, any>, {}, UseDesktopPickerOwnerState>;
+    openPickerIcon?: SlotComponentPropsFromProps<Record<string, any>, {}, PickerOwnerState<TDate | null>>;
 }
 export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps {
     /**

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

@@ -1,11 +1,10 @@
-import { FieldSection, MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../../../models';
+import { FieldSection, MuiPickersAdapter, PickerValidDate } from '../../../models';
 import { PickersLocaleText } from '../../../locales';
 interface BuildSectionsFromFormatParams<TDate extends PickerValidDate> {
     utils: MuiPickersAdapter<TDate>;
     format: string;
     formatDensity: 'dense' | 'spacious';
     isRtl: boolean;
-    timezone: PickersTimezone;
     shouldRespectLeadingZeros: boolean;
     localeText: PickersLocaleText<TDate>;
     localizedDigits: string[];

package/internals/hooks/useField/buildSectionsFromFormat.js

@@ -38,12 +38,12 @@ const getEscapedPartsFromFormat = ({
   }
   return escapedParts;
 };
-const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, sectionFormat) => {
+const getSectionPlaceholder = (utils, localeText, sectionConfig, sectionFormat) => {
   switch (sectionConfig.type) {
     case 'year':
       {
         return localeText.fieldYearPlaceholder({
-          digitAmount: utils.formatByString(utils.date(undefined, timezone), sectionFormat).length,
+          digitAmount: utils.formatByString(utils.date(undefined, 'default'), sectionFormat).length,
           format: sectionFormat
         });
       }
@@ -99,7 +99,6 @@ const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, secti
 };
 const createSection = ({
   utils,
-  timezone,
   date,
   shouldRespectLeadingZeros,
   localeText,
@@ -112,7 +111,7 @@ const createSection = ({
     throw new Error('MUI X: Should not call `commitToken` with an empty token');
   }
   const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
-  const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, timezone, sectionConfig.contentType, sectionConfig.type, token);
+  const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
   const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
   const isValidDate = date != null && utils.isValid(date);
   let sectionValue = isValidDate ? utils.formatByString(date, token) : '';
@@ -134,7 +133,7 @@ const createSection = ({
     format: token,
     maxLength,
     value: sectionValue,
-    placeholder: getSectionPlaceholder(utils, timezone, localeText, sectionConfig, token),
+    placeholder: getSectionPlaceholder(utils, localeText, sectionConfig, token),
     hasLeadingZerosInFormat,
     hasLeadingZerosInInput,
     startSeparator,

package/internals/hooks/useField/useField.js

@@ -75,7 +75,7 @@ export const useField = params => {
     // eslint-disable-next-line default-case
     switch (true) {
       // Select all
-      case (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a' && !event.shiftKey && !event.altKey:
+      case (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'A' && !event.shiftKey && !event.altKey:
         {
           // prevent default to make sure that the next line "select all" while updating
           // the internal state at the same time.

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

@@ -3,7 +3,7 @@ import { FieldSectionType, FieldValueType, FieldSection, MuiPickersAdapter, Fiel
 export declare const getDateSectionConfigFromFormatToken: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, formatToken: string) => Pick<FieldSection, "type" | "contentType"> & {
     maxLength: number | undefined;
 };
-export declare const getDaysInWeekStr: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, timezone: PickersTimezone, format: string) => string[];
+export declare const getDaysInWeekStr: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, format: string) => string[];
 export declare const getLetterEditingOptions: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, timezone: PickersTimezone, sectionType: FieldSectionType, format: string) => string[];
 export declare const FORMAT_SECONDS_NO_LEADING_ZEROS = "s";
 export declare const getLocalizedDigits: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>) => string[];
@@ -22,7 +22,7 @@ export declare const adjustSectionValue: <TDate extends PickerValidDate, TSectio
 }) => string;
 export declare const getSectionVisibleValue: (section: FieldSection, target: "input-rtl" | "input-ltr" | "non-input", localizedDigits: string[]) => string;
 export declare const changeSectionValueFormat: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, valueStr: string, currentFormat: string, newFormat: string) => string;
-export declare const doesSectionFormatHaveLeadingZeros: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, timezone: PickersTimezone, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
+export declare const doesSectionFormatHaveLeadingZeros: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
 /**
  * Some date libraries like `dayjs` don't support parsing from date with escaped characters.
  * To make sure that the parsing works, we are building a format and a date without any separator.
@@ -32,7 +32,7 @@ export declare const createDateStrForV7HiddenInputFromSections: (sections: Field
 export declare const createDateStrForV6InputFromSections: (sections: FieldSection[], localizedDigits: string[], isRtl: boolean) => string;
 export declare const getSectionsBoundaries: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, localizedDigits: string[], timezone: PickersTimezone) => FieldSectionsValueBoundaries<TDate>;
 export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: FieldValueType) => void;
-export declare const mergeDateIntoReferenceDate: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, timezone: PickersTimezone, dateToTransferFrom: TDate, sections: FieldSection[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
+export declare const mergeDateIntoReferenceDate: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, dateToTransferFrom: TDate, sections: FieldSection[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
 export declare const isAndroid: () => boolean;
 export declare const getSectionOrder: (sections: FieldSection[], shouldApplyRTL: boolean) => SectionOrdering;
 export declare const parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;

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

@@ -31,9 +31,9 @@ const getDeltaFromKeyCode = keyCode => {
       return 0;
   }
 };
-export const getDaysInWeekStr = (utils, timezone, format) => {
+export const getDaysInWeekStr = (utils, format) => {
   const elements = [];
-  const now = utils.date(undefined, timezone);
+  const now = utils.date(undefined, 'default');
   const startDate = utils.startOfWeek(now);
   const endDate = utils.endOfWeek(now);
   let current = startDate;
@@ -51,7 +51,7 @@ export const getLetterEditingOptions = (utils, timezone, sectionType, format) =>
       }
     case 'weekDay':
       {
-        return getDaysInWeekStr(utils, timezone, format);
+        return getDaysInWeekStr(utils, format);
       }
     case 'meridiem':
       {
@@ -234,17 +234,17 @@ export const changeSectionValueFormat = (utils, valueStr, currentFormat, newForm
   }
   return utils.formatByString(utils.parse(valueStr, currentFormat), newFormat);
 };
-const isFourDigitYearFormat = (utils, timezone, format) => utils.formatByString(utils.date(undefined, timezone), format).length === 4;
-export const doesSectionFormatHaveLeadingZeros = (utils, timezone, contentType, sectionType, format) => {
+const isFourDigitYearFormat = (utils, format) => utils.formatByString(utils.date(undefined, 'system'), format).length === 4;
+export const doesSectionFormatHaveLeadingZeros = (utils, contentType, sectionType, format) => {
   if (contentType !== 'digit') {
     return false;
   }
-  const now = utils.date(undefined, timezone);
+  const now = utils.date(undefined, 'default');
   switch (sectionType) {
     // We can't use `changeSectionValueFormat`, because  `utils.parse('1', 'YYYY')` returns `1971` instead of `1`.
     case 'year':
       {
-        if (isFourDigitYearFormat(utils, timezone, format)) {
+        if (isFourDigitYearFormat(utils, format)) {
           const formatted0001 = utils.formatByString(utils.setYear(now, 1), format);
           return formatted0001 === '0001';
         }
@@ -350,7 +350,7 @@ export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
       format
     }) => ({
       minimum: 0,
-      maximum: isFourDigitYearFormat(utils, timezone, format) ? 9999 : 99
+      maximum: isFourDigitYearFormat(utils, format) ? 9999 : 99
     }),
     month: () => ({
       minimum: 1,
@@ -369,7 +369,7 @@ export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
       contentType
     }) => {
       if (contentType === 'digit') {
-        const daysInWeek = getDaysInWeekStr(utils, timezone, format).map(Number);
+        const daysInWeek = getDaysInWeekStr(utils, format).map(Number);
         return {
           minimum: Math.min(...daysInWeek),
           maximum: Math.max(...daysInWeek)
@@ -435,7 +435,7 @@ export const validateSections = (sections, valueType) => {
     }
   }
 };
-const transferDateSectionValue = (utils, timezone, section, dateToTransferFrom, dateToTransferTo) => {
+const transferDateSectionValue = (utils, section, dateToTransferFrom, dateToTransferTo) => {
   switch (section.type) {
     case 'year':
       {
@@ -447,7 +447,7 @@ const transferDateSectionValue = (utils, timezone, section, dateToTransferFrom,
       }
     case 'weekDay':
       {
-        const formattedDaysInWeek = getDaysInWeekStr(utils, timezone, section.format);
+        const formattedDaysInWeek = getDaysInWeekStr(utils, section.format);
         const dayInWeekStrOfActiveDate = utils.formatByString(dateToTransferFrom, section.format);
         const dayInWeekOfActiveDate = formattedDaysInWeek.indexOf(dayInWeekStrOfActiveDate);
         const dayInWeekOfNewSectionValue = formattedDaysInWeek.indexOf(section.value);
@@ -499,11 +499,11 @@ const reliableSectionModificationOrder = {
   meridiem: 8,
   empty: 9
 };
-export const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
+export const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
 // cloning sections before sort to avoid mutating it
 [...sections].sort((a, b) => reliableSectionModificationOrder[a.type] - reliableSectionModificationOrder[b.type]).reduce((mergedDate, section) => {
   if (!shouldLimitToEditedSections || section.modified) {
-    return transferDateSectionValue(utils, timezone, section, dateToTransferFrom, mergedDate);
+    return transferDateSectionValue(utils, section, dateToTransferFrom, mergedDate);
   }
   return mergedDate;
 }, referenceDate);

package/internals/hooks/useField/useFieldCharacterEditing.js

@@ -199,7 +199,7 @@ export const useFieldCharacterEditing = ({
       // When editing a letter-format month and the user presses a digit,
       // We can support the numeric editing by using the digit-format month and re-formatting the result.
       if (activeSection.type === 'month') {
-        const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, timezone, 'digit', 'month', 'MM');
+        const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, 'digit', 'month', 'MM');
         const response = getNewSectionValue(queryValue, {
           type: activeSection.type,
           format: 'MM',
@@ -224,7 +224,7 @@ export const useFieldCharacterEditing = ({
         if (isQueryResponseWithoutValue(response)) {
           return response;
         }
-        const formattedValue = getDaysInWeekStr(utils, timezone, activeSection.format)[Number(response.sectionValue) - 1];
+        const formattedValue = getDaysInWeekStr(utils, activeSection.format)[Number(response.sectionValue) - 1];
         return _extends({}, response, {
           sectionValue: formattedValue
         });

package/internals/hooks/useField/useFieldState.js

@@ -48,7 +48,6 @@ export const useFieldState = params => {
   const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
   const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, date => buildSectionsFromFormat({
     utils,
-    timezone,
     localeText: translations,
     localizedDigits,
     format,
@@ -57,7 +56,7 @@ export const useFieldState = params => {
     shouldRespectLeadingZeros,
     enableAccessibleFieldDOMStructure,
     isRtl
-  })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, timezone, enableAccessibleFieldDOMStructure]);
+  })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, enableAccessibleFieldDOMStructure]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
     validateSections(sections, valueType);
@@ -154,7 +153,6 @@ export const useFieldState = params => {
       }
       const sections = buildSectionsFromFormat({
         utils,
-        timezone,
         localeText: translations,
         localizedDigits,
         format,
@@ -164,7 +162,7 @@ export const useFieldState = params => {
         enableAccessibleFieldDOMStructure,
         isRtl
       });
-      return mergeDateIntoReferenceDate(utils, timezone, date, sections, referenceDate, false);
+      return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
     const newReferenceValue = fieldValueManager.updateReferenceValue(utils, newValue, state.referenceValue);
@@ -202,7 +200,7 @@ export const useFieldState = params => {
      * This makes sure that we don't lose some information of the initial date (like the time on a date field).
      */
     if (newActiveDate != null && utils.isValid(newActiveDate)) {
-      const mergedDate = mergeDateIntoReferenceDate(utils, timezone, newActiveDate, newActiveDateSections, activeDateManager.referenceDate, true);
+      const mergedDate = mergeDateIntoReferenceDate(utils, newActiveDate, newActiveDateSections, activeDateManager.referenceDate, true);
       values = activeDateManager.getNewValuesFromNewActiveDate(mergedDate);
       shouldPublish = true;
     } else {

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -8,15 +8,16 @@ import useId from '@mui/utils/useId';
 import { PickersModalDialog } from "../../components/PickersModalDialog.js";
 import { usePicker } from "../usePicker/index.js";
 import { onSpaceOrEnter } from "../../utils/utils.js";
-import { LocalizationProvider } from "../../../LocalizationProvider/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PickersProvider } from "../../components/PickersProvider.js";
+
 /**
  * Hook managing all the single-date mobile pickers:
  * - MobileDatePicker
  * - MobileDateTimePicker
  * - MobileTimePicker
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useMobilePicker = _ref => {
   let {
       props,
@@ -49,7 +50,8 @@ export const useMobilePicker = _ref => {
     actions,
     layoutProps,
     renderCurrentView,
-    fieldProps: pickerFieldProps
+    fieldProps: pickerFieldProps,
+    contextValue
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
@@ -110,7 +112,8 @@ export const useMobilePicker = _ref => {
     }, innerSlotProps?.mobilePaper)
   });
   const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickersProvider, {
+    contextValue: contextValue,
     localeText: localeText,
     children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
       slots: slotsForField,

package/internals/hooks/usePicker/usePicker.js

@@ -2,6 +2,7 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { usePickerValue } from "./usePickerValue.js";
 import { usePickerViews } from "./usePickerViews.js";
 import { usePickerLayoutProps } from "./usePickerLayoutProps.js";
+import { usePickerOwnerState } from "./usePickerOwnerState.js";
 export const usePicker = ({
   props,
   valueManager,
@@ -39,6 +40,10 @@ export const usePicker = ({
     propsFromPickerValue: pickerValueResponse.layoutProps,
     propsFromPickerViews: pickerViewsResponse.layoutProps
   });
+  const pickerOwnerState = usePickerOwnerState({
+    props,
+    pickerValueResponse
+  });
   return {
     // Picker value
     open: pickerValueResponse.open,
@@ -49,6 +54,10 @@ export const usePicker = ({
     hasUIView: pickerViewsResponse.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker layout
-    layoutProps: pickerLayoutResponse.layoutProps
+    layoutProps: pickerLayoutResponse.layoutProps,
+    // Picker context
+    contextValue: pickerValueResponse.contextValue,
+    // Picker owner state
+    ownerState: pickerOwnerState
   };
 };

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

@@ -1,7 +1,7 @@
 import { UsePickerValueParams, UsePickerValueProps, UsePickerValueBaseProps, UsePickerValueResponse } from './usePickerValue.types';
 import { UsePickerViewsProps, UsePickerViewParams, UsePickerViewsResponse, UsePickerViewsBaseProps } from './usePickerViews';
 import { UsePickerLayoutProps, UsePickerLayoutPropsResponse } from './usePickerLayoutProps';
-import { FieldSection, PickerValidDate } from '../../../models';
+import { FieldSection, PickerOwnerState, PickerValidDate } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
 /**
  * Props common to all picker headless implementations.
@@ -14,4 +14,5 @@ export interface UsePickerParams<TValue, TDate extends PickerValidDate, TView ex
     props: TExternalProps;
 }
 export interface UsePickerResponse<TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TError> extends Omit<UsePickerValueResponse<TValue, TSection, TError>, 'viewProps' | 'layoutProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps'>, UsePickerLayoutPropsResponse<TValue, TView> {
+    ownerState: PickerOwnerState<TValue>;
 }

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

@@ -0,0 +1,9 @@
+import { FieldSection, PickerOwnerState } from '../../../models';
+import type { UsePickerProps } from './usePicker.types';
+import { UsePickerValueResponse } from './usePickerValue.types';
+interface UsePickerOwnerStateParameters<TValue> {
+    props: UsePickerProps<TValue, any, any, any, any, any>;
+    pickerValueResponse: UsePickerValueResponse<TValue, FieldSection, any>;
+}
+export declare function usePickerOwnerState<TValue>(parameters: UsePickerOwnerStateParameters<TValue>): PickerOwnerState<TValue>;
+export {};

package/internals/hooks/usePicker/usePickerOwnerState.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export function usePickerOwnerState(parameters) {
+  const {
+    props,
+    pickerValueResponse
+  } = parameters;
+  return React.useMemo(() => ({
+    value: pickerValueResponse.viewProps.value,
+    open: pickerValueResponse.open,
+    disabled: props.disabled ?? false,
+    readOnly: props.readOnly ?? false
+  }), [pickerValueResponse.viewProps.value, pickerValueResponse.open, props.disabled, props.readOnly]);
+}

package/internals/hooks/usePicker/usePickerValue.js

@@ -5,7 +5,6 @@ import { useOpenState } from "../useOpenState.js";
 import { useLocalizationContext, useUtils } from "../useUtils.js";
 import { useValidation } from "../../../validation/index.js";
 import { useValueWithTimezone } from "../useValueWithTimezone.js";
-
 /**
  * Decide if the new value should be published
  * The published value will be passed to `onChange` if defined.
@@ -334,11 +333,17 @@ export const usePickerValue = ({
     onSelectShortcut: handleSelectShortcut,
     isValid
   });
+  const contextValue = React.useMemo(() => ({
+    onOpen: handleOpen,
+    onClose: handleClose,
+    open: isOpen
+  }), [isOpen, handleClose, handleOpen]);
   return {
     open: isOpen,
     fieldProps: fieldResponse,
     viewProps: viewResponse,
     layoutProps: layoutResponse,
-    actions
+    actions,
+    contextValue
   };
 };

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

@@ -4,6 +4,7 @@ import { WrapperVariant } from '../../models/common';
 import { FieldSection, FieldValueType, TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, PickerValidDate, OnErrorProps, InferError } from '../../../models';
 import { GetDefaultReferenceDateProps } from '../../utils/getDefaultReferenceDate';
 import { PickerShortcutChangeImportance, PickersShortcutsItemContext } from '../../../PickersShortcuts';
+import { PickersContextValue } from '../../components/PickersProvider';
 export interface PickerValueManager<TValue, TDate extends PickerValidDate, TError> {
     /**
      * Determines if two values are equal.
@@ -268,4 +269,5 @@ export interface UsePickerValueResponse<TValue, TSection extends FieldSection, T
     viewProps: UsePickerValueViewsResponse<TValue>;
     fieldProps: UsePickerValueFieldResponse<TValue, TSection, TError>;
     layoutProps: UsePickerValueLayoutResponse<TValue>;
+    contextValue: PickersContextValue;
 }

package/internals/index.d.ts

@@ -1,5 +1,6 @@
 export { PickersArrowSwitcher } from './components/PickersArrowSwitcher/PickersArrowSwitcher';
 export type { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, } from './components/PickersArrowSwitcher';
+export { PickersProvider } from './components/PickersProvider';
 export { PickersModalDialog } from './components/PickersModalDialog';
 export type { PickersModalDialogSlots, PickersModalDialogSlotProps, } from './components/PickersModalDialog';
 export { PickersPopper } from './components/PickersPopper';

package/internals/index.js

@@ -1,4 +1,5 @@
 export { PickersArrowSwitcher } from "./components/PickersArrowSwitcher/PickersArrowSwitcher.js";
+export { PickersProvider } from "./components/PickersProvider.js";
 export { PickersModalDialog } from "./components/PickersModalDialog.js";
 export { PickersPopper } from "./components/PickersPopper.js";
 export { PickersToolbar } from "./components/PickersToolbar.js";

package/internals/utils/utils.d.ts

@@ -3,4 +3,11 @@ export declare function arrayIncludes<T>(array: T[] | readonly T[], itemOrItems:
 export declare const onSpaceOrEnter: (innerFn: (ev: React.MouseEvent<any> | React.KeyboardEvent<any>) => void, externalEvent?: (event: React.KeyboardEvent<any>) => void) => (event: React.KeyboardEvent) => void;
 export declare const executeInTheNextEventLoopTick: (fn: () => void) => void;
 export declare const getActiveElement: (root?: Document | ShadowRoot) => Element | null;
+/**
+ * Gets the index of the focused list item in a given ul list element.
+ *
+ * @param {HTMLUListElement} listElement - The list element to search within.
+ * @returns {number} The index of the focused list item, or -1 if none is focused.
+ */
+export declare const getFocusedListItemIndex: (listElement: HTMLUListElement) => number;
 export declare const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = "@media (pointer: fine)";

package/internals/utils/utils.js

@@ -32,4 +32,15 @@ export const getActiveElement = (root = document) => {
   }
   return activeEl;
 };
+
+/**
+ * Gets the index of the focused list item in a given ul list element.
+ *
+ * @param {HTMLUListElement} listElement - The list element to search within.
+ * @returns {number} The index of the focused list item, or -1 if none is focused.
+ */
+export const getFocusedListItemIndex = listElement => {
+  const children = Array.from(listElement.children);
+  return children.indexOf(getActiveElement(document));
+};
 export const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';

package/models/pickers.d.ts

@@ -9,4 +9,22 @@ export interface PickerChangeHandlerContext<TError> {
 }
 export interface PickerValidDateLookup {
 }
-export type PickerValidDate = keyof PickerValidDateLookup extends number ? any : PickerValidDateLookup[keyof PickerValidDateLookup];
+export type PickerValidDate = keyof PickerValidDateLookup extends never ? any : PickerValidDateLookup[keyof PickerValidDateLookup];
+export interface PickerOwnerState<TValue> {
+    /**
+     * The value currently displayed in the field and in the view.
+     */
+    value: TValue;
+    /**
+     * `true` if the picker is open, `false` otherwise.
+     */
+    open: boolean;
+    /**
+     * `true` if the picker is disabled, `false` otherwise.
+     */
+    disabled: boolean;
+    /**
+     * `true` if the picker is read-only, `false` otherwise.
+     */
+    readOnly: boolean;
+}

package/modern/AdapterDayjs/AdapterDayjs.js

@@ -254,6 +254,8 @@ export class AdapterDayjs {
       const timezone = this.getTimezone(value);
       if (timezone !== 'UTC') {
         const fixedValue = value.tz(this.cleanTimezone(timezone), true);
+        // TODO: Simplify the case when we raise the `dayjs` peer dep to 1.11.12 (https://github.com/iamkun/dayjs/releases/tag/v1.11.12)
+        /* istanbul ignore next */
         // @ts-ignore
         if (fixedValue.$offset === (value.$offset ?? 0)) {
           return value;

package/modern/DateCalendar/DateCalendar.js

@@ -487,7 +487,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/modern/DatePicker/DatePicker.js

@@ -256,7 +256,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/modern/DateTimePicker/DateTimePicker.js

@@ -294,7 +294,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/modern/DateTimePicker/DateTimePickerTabs.js

@@ -87,7 +87,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,
-    className: clsx(classes.root, className),
+    className: clsx(className, classes.root),
     sx: sx,
     children: [/*#__PURE__*/_jsx(Tab, {
       value: "date",

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -277,7 +277,7 @@ DesktopDatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -402,7 +402,7 @@ DesktopDateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/modern/DigitalClock/DigitalClock.js

@@ -23,6 +23,7 @@ import { DIGITAL_CLOCK_VIEW_HEIGHT } from "../internals/constants/dimensions.js"
 import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useClockReferenceDate } from "../internals/hooks/useClockReferenceDate.js";
+import { getFocusedListItemIndex } from "../internals/utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -104,6 +105,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
   const utils = useUtils();
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
+  const listRef = React.useRef(null);
   const props = useThemeProps({
     props: inProps,
     name: 'MuiDigitalClock'
@@ -236,15 +238,46 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     }, (_, index) => utils.addMinutes(startOfDay, timeStep * (index + 1)))];
   }, [valueOrReferenceDate, timeStep, utils]);
   const focusedOptionIndex = timeOptions.findIndex(option => utils.isEqual(option, valueOrReferenceDate));
+  const handleKeyDown = event => {
+    switch (event.key) {
+      case 'PageUp':
+        {
+          const newIndex = getFocusedListItemIndex(listRef.current) - 5;
+          const children = listRef.current.children;
+          const newFocusedIndex = Math.max(0, newIndex);
+          const childToFocus = children[newFocusedIndex];
+          if (childToFocus) {
+            childToFocus.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      case 'PageDown':
+        {
+          const newIndex = getFocusedListItemIndex(listRef.current) + 5;
+          const children = listRef.current.children;
+          const newFocusedIndex = Math.min(children.length - 1, newIndex);
+          const childToFocus = children[newFocusedIndex];
+          if (childToFocus) {
+            childToFocus.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      default:
+    }
+  };
   return /*#__PURE__*/_jsx(DigitalClockRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
     children: /*#__PURE__*/_jsx(DigitalClockList, {
+      ref: listRef,
       role: "listbox",
       "aria-label": translations.timePickerToolbarTitle,
       className: classes.list,
+      onKeyDown: handleKeyDown,
       children: timeOptions.map((option, index) => {
         if (skipDisabled && isTimeDisabled(option)) {
           return null;