@mui/x-date-pickers 7.19.0 → 7.21.0

package/DateTimeField/DateTimeField.types.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import TextField from '@mui/material/TextField';
-import { DateTimeValidationError, FieldSection, PickerValidDate, BuiltInFieldTextFieldProps, BaseSingleInputFieldProps } from '../models';
+import { DateTimeValidationError, FieldSection, PickerValidDate, BuiltInFieldTextFieldProps } from '../models';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
+import { MakeOptional } from '../internals/models/helpers';
 import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps, DayValidationProps, MonthValidationProps, TimeValidationProps, YearValidationProps } from '../internals/models/validation';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
 export interface UseDateTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, TimeValidationProps<TDate>, BaseTimeValidationProps, DateTimeValidationProps<TDate>, ExportedUseClearableFieldProps {
@@ -13,11 +13,6 @@ export interface UseDateTimeFieldProps<TDate extends PickerValidDate, TEnableAcc
      */
     ampm?: boolean;
 }
-/**
- * Props the field can receive when used inside a date time picker.
- * (`DateTimePicker`, `DesktopDateTimePicker` or `MobileDateTimePicker` component).
- */
-export type DateTimeFieldInPickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> = DefaultizedProps<UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | 'ampm' | keyof BaseDateValidationProps<TDate> | keyof BaseTimeValidationProps> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, DateTimeValidationError>;
 export type UseDateTimeFieldComponentProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}> = Omit<TChildProps, keyof UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> & UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
 export type DateTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = UseDateTimeFieldComponentProps<TDate, TEnableAccessibleFieldDOMStructure, BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**

package/DateTimeField/index.d.ts

@@ -1,3 +1,3 @@
 export { DateTimeField } from './DateTimeField';
 export { useDateTimeField as unstable_useDateTimeField } from './useDateTimeField';
-export type { UseDateTimeFieldProps, UseDateTimeFieldComponentProps, DateTimeFieldProps, DateTimeFieldInPickerProps, } from './DateTimeField.types';
+export type { UseDateTimeFieldProps, UseDateTimeFieldComponentProps, DateTimeFieldProps, } from './DateTimeField.types';

package/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/DateTimePicker/DateTimePicker.types.d.ts

@@ -1,7 +1,10 @@
+import { UseDateTimeFieldProps } from '../DateTimeField';
 import { DesktopDateTimePickerProps, DesktopDateTimePickerSlots, DesktopDateTimePickerSlotProps } from '../DesktopDateTimePicker';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
+import { DefaultizedProps } from '../internals/models/helpers';
+import { BaseDateValidationProps, BaseTimeValidationProps } from '../internals/models/validation';
 import { MobileDateTimePickerProps, MobileDateTimePickerSlots, MobileDateTimePickerSlotProps } from '../MobileDateTimePicker';
-import { PickerValidDate } from '../models';
+import { BaseSingleInputFieldProps, DateTimeValidationError, FieldSection, PickerValidDate } from '../models';
 import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
 export interface DateTimePickerSlots<TDate extends PickerValidDate> extends DesktopDateTimePickerSlots<TDate>, MobileDateTimePickerSlots<TDate, DateOrTimeViewWithMeridiem> {
 }
@@ -30,3 +33,8 @@ export interface DateTimePickerProps<TDate extends PickerValidDate, TEnableAcces
      */
     yearsPerRow?: 3 | 4;
 }
+/**
+ * Props the field can receive when used inside a date time picker.
+ * (`DateTimePicker`, `DesktopDateTimePicker` or `MobileDateTimePicker` component).
+ */
+export type DateTimePickerFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = DefaultizedProps<UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | 'ampm' | keyof BaseDateValidationProps<TDate> | keyof BaseTimeValidationProps> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, DateTimeValidationError>;

package/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/DateTimePicker/index.d.ts

@@ -1,5 +1,5 @@
 export { DateTimePicker } from './DateTimePicker';
-export type { DateTimePickerProps, DateTimePickerSlots, DateTimePickerSlotProps, } from './DateTimePicker.types';
+export type { DateTimePickerProps, DateTimePickerSlots, DateTimePickerSlotProps, DateTimePickerFieldProps, } from './DateTimePicker.types';
 export { DateTimePickerTabs } from './DateTimePickerTabs';
 export type { DateTimePickerTabsProps } from './DateTimePickerTabs';
 export { dateTimePickerTabsClasses } from './dateTimePickerTabsClasses';

package/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/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/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;

package/MobileDatePicker/MobileDatePicker.js

@@ -274,7 +274,7 @@ MobileDatePicker.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/MobileDateTimePicker/MobileDateTimePicker.js

@@ -322,7 +322,7 @@ MobileDateTimePicker.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/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -10,6 +10,7 @@ import MenuItem from '@mui/material/MenuItem';
 import useForkRef from '@mui/utils/useForkRef';
 import { getMultiSectionDigitalClockSectionUtilityClass } from "./multiSectionDigitalClockSectionClasses.js";
 import { DIGITAL_CLOCK_VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from "../internals/constants/dimensions.js";
+import { getFocusedListItemIndex } from "../internals/utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -138,12 +139,42 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     containerRef.current.scrollTop = offsetTop - 4;
   });
   const focusedOptionIndex = items.findIndex(item => item.isFocused(item.value));
+  const handleKeyDown = event => {
+    switch (event.key) {
+      case 'PageUp':
+        {
+          const newIndex = getFocusedListItemIndex(containerRef.current) - 5;
+          const children = containerRef.current.children;
+          const newFocusedIndex = Math.max(0, newIndex);
+          const childToFocus = children[newFocusedIndex];
+          if (childToFocus) {
+            childToFocus.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      case 'PageDown':
+        {
+          const newIndex = getFocusedListItemIndex(containerRef.current) + 5;
+          const children = containerRef.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(MultiSectionDigitalClockSectionRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
     ownerState: ownerState,
     autoFocusItem: autoFocus && active,
-    role: "listbox"
+    role: "listbox",
+    onKeyDown: handleKeyDown
   }, other, {
     children: items.map((option, index) => {
       const isItemDisabled = option.isDisabled?.(option.value);

package/PickersSectionList/PickersSectionList.d.ts

@@ -7,5 +7,14 @@ export declare const PickersSectionListSectionContent: import("@emotion/styled")
 type PickersSectionListComponent = ((props: PickersSectionListProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
+/**
+ * Demos:
+ *
+ * - [Custom field](https://mui.com/x/react-date-pickers/custom-field/)
+ *
+ * API:
+ *
+ * - [PickersSectionList API](https://mui.com/x/api/date-pickers/pickers-section-list/)
+ */
 declare const PickersSectionList: PickersSectionListComponent;
 export { PickersSectionList };

package/PickersSectionList/PickersSectionList.js

@@ -49,15 +49,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getPickersSectionListUtilityClass, classes);
 };
-/**
- * Demos:
- *
- * - [Custom field](https://mui.com/x/react-date-pickers/custom-field/)
- *
- * API:
- *
- * - [PickersSectionList API](https://mui.com/x/api/date-pickers/pickers-section-list/)
- */
 function PickersSection(props) {
   const {
     slots,
@@ -105,6 +96,36 @@ function PickersSection(props) {
     children: [/*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorBeforeProps)), /*#__PURE__*/_jsx(SectionContent, _extends({}, sectionContentProps)), /*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorAfterProps))]
   }));
 }
+process.env.NODE_ENV !== "production" ? PickersSection.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object.isRequired,
+  element: PropTypes.shape({
+    after: PropTypes.object.isRequired,
+    before: PropTypes.object.isRequired,
+    container: PropTypes.object.isRequired,
+    content: PropTypes.object.isRequired
+  }).isRequired,
+  /**
+   * The props used for each component slot.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   */
+  slots: PropTypes.object
+} : void 0;
+/**
+ * Demos:
+ *
+ * - [Custom field](https://mui.com/x/react-date-pickers/custom-field/)
+ *
+ * API:
+ *
+ * - [PickersSectionList API](https://mui.com/x/api/date-pickers/pickers-section-list/)
+ */
 const PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSectionList(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/StaticDatePicker/StaticDatePicker.js

@@ -208,7 +208,7 @@ StaticDatePicker.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/StaticDateTimePicker/StaticDateTimePicker.js

@@ -256,7 +256,7 @@ StaticDateTimePicker.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/TimeClock/Clock.js

@@ -274,6 +274,14 @@ export function Clock(inProps) {
         handleValueChange(viewValue - keyboardControlStep, 'partial');
         event.preventDefault();
         break;
+      case 'PageUp':
+        handleValueChange(viewValue + 5, 'partial');
+        event.preventDefault();
+        break;
+      case 'PageDown':
+        handleValueChange(viewValue - 5, 'partial');
+        event.preventDefault();
+        break;
       case 'Enter':
       case ' ':
         handleValueChange(viewValue, 'finish');

package/TimeField/TimeField.types.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import TextField from '@mui/material/TextField';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
+import { MakeOptional } from '../internals/models/helpers';
 import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation';
-import { FieldSection, PickerValidDate, TimeValidationError, BuiltInFieldTextFieldProps, BaseSingleInputFieldProps } from '../models';
+import { FieldSection, PickerValidDate, TimeValidationError, BuiltInFieldTextFieldProps } from '../models';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
 export interface UseTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps, ExportedUseClearableFieldProps {
     /**
@@ -13,11 +13,6 @@ export interface UseTimeFieldProps<TDate extends PickerValidDate, TEnableAccessi
      */
     ampm?: boolean;
 }
-/**
- * Props the field can receive when used inside a time picker.
- * (`TimePicker`, `DesktopTimePicker` or `MobileTimePicker` component).
- */
-export type TimeFieldInPickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> = DefaultizedProps<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | 'ampm' | keyof BaseTimeValidationProps> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, TimeValidationError>;
 export type UseTimeFieldComponentProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}> = Omit<TChildProps, keyof UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> & UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
 export type TimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = UseTimeFieldComponentProps<TDate, TEnableAccessibleFieldDOMStructure, BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**

package/TimeField/index.d.ts

@@ -1,3 +1,3 @@
 export { TimeField } from './TimeField';
 export { useTimeField as unstable_useTimeField } from './useTimeField';
-export type { UseTimeFieldProps, UseTimeFieldComponentProps, TimeFieldProps, TimeFieldInPickerProps, } from './TimeField.types';
+export type { UseTimeFieldProps, UseTimeFieldComponentProps, TimeFieldProps, } from './TimeField.types';

package/TimePicker/TimePicker.types.d.ts

@@ -1,7 +1,10 @@
 import { DesktopTimePickerProps, DesktopTimePickerSlots, DesktopTimePickerSlotProps } from '../DesktopTimePicker';
 import { TimeViewWithMeridiem } from '../internals/models';
+import { DefaultizedProps } from '../internals/models/helpers';
+import { BaseTimeValidationProps } from '../internals/models/validation';
 import { MobileTimePickerProps, MobileTimePickerSlots, MobileTimePickerSlotProps } from '../MobileTimePicker';
-import { PickerValidDate } from '../models';
+import { BaseSingleInputFieldProps, FieldSection, PickerValidDate, TimeValidationError } from '../models';
+import { UseTimeFieldProps } from '../TimeField';
 export interface TimePickerSlots<TDate extends PickerValidDate> extends DesktopTimePickerSlots<TDate>, MobileTimePickerSlots<TDate, TimeViewWithMeridiem> {
 }
 export interface TimePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileTimePickerSlotProps<TDate, TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {
@@ -24,3 +27,8 @@ export interface TimePickerProps<TDate extends PickerValidDate, TEnableAccessibl
      */
     slotProps?: TimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
 }
+/**
+ * Props the field can receive when used inside a time picker.
+ * (`TimePicker`, `DesktopTimePicker` or `MobileTimePicker` component).
+ */
+export type TimePickerFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = DefaultizedProps<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | 'ampm' | keyof BaseTimeValidationProps> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, TimeValidationError>;

package/TimePicker/index.d.ts

@@ -1,5 +1,5 @@
 export { TimePicker } from './TimePicker';
-export type { TimePickerProps, TimePickerSlots, TimePickerSlotProps } from './TimePicker.types';
+export type { TimePickerProps, TimePickerSlots, TimePickerSlotProps, TimePickerFieldProps, } from './TimePicker.types';
 export { TimePickerToolbar } from './TimePickerToolbar';
 export type { TimePickerToolbarProps } from './TimePickerToolbar';
 export { timePickerToolbarClasses } from './timePickerToolbarClasses';

package/hooks/index.d.ts

@@ -2,3 +2,5 @@ export { useClearableField } from './useClearableField';
 export type { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, UseClearableFieldResponse, } from './useClearableField';
 export { usePickersTranslations } from './usePickersTranslations';
 export { useSplitFieldProps } from './useSplitFieldProps';
+export { useParsedFormat } from './useParsedFormat';
+export { usePickersContext } from './usePickersContext';

package/hooks/index.js

@@ -1,3 +1,5 @@
 export { useClearableField } from "./useClearableField.js";
 export { usePickersTranslations } from "./usePickersTranslations.js";
-export { useSplitFieldProps } from "./useSplitFieldProps.js";
+export { useSplitFieldProps } from "./useSplitFieldProps.js";
+export { useParsedFormat } from "./useParsedFormat.js";
+export { usePickersContext } from "./usePickersContext.js";

package/hooks/useParsedFormat.d.ts

@@ -0,0 +1,15 @@
+import { PickerValidDate } from '../models';
+import type { UseFieldInternalProps } from '../internals/hooks/useField';
+interface UseParsedFormatParameters extends Pick<UseFieldInternalProps<any, any, any, any, any>, 'format' | 'formatDensity' | 'shouldRespectLeadingZeros'> {
+}
+/**
+ * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
+ * This format is localized (e.g: `AAAA` for the year with the French locale) and cannot be parsed by your date library.
+ * @param {object} The parameters needed to build the placeholder.
+ * @param {string} params.format Format of the date to use.
+ * @param {'dense' | 'spacious'} params.formatDensity Density of the format (setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character).
+ * @param {boolean} params.shouldRespectLeadingZeros If `true`, the format will respect the leading zeroes, if `false`, the format will always add leading zeroes.
+ * @returns
+ */
+export declare const useParsedFormat: <TDate extends PickerValidDate>(parameters: UseParsedFormatParameters) => string;
+export {};

package/hooks/useParsedFormat.js

@@ -0,0 +1,43 @@
+'use client';
+
+import * as React from 'react';
+import { useRtl } from '@mui/system/RtlProvider';
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { buildSectionsFromFormat } from "../internals/hooks/useField/buildSectionsFromFormat.js";
+import { getLocalizedDigits } from "../internals/hooks/useField/useField.utils.js";
+import { usePickersTranslations } from "./usePickersTranslations.js";
+/**
+ * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
+ * This format is localized (e.g: `AAAA` for the year with the French locale) and cannot be parsed by your date library.
+ * @param {object} The parameters needed to build the placeholder.
+ * @param {string} params.format Format of the date to use.
+ * @param {'dense' | 'spacious'} params.formatDensity Density of the format (setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character).
+ * @param {boolean} params.shouldRespectLeadingZeros If `true`, the format will respect the leading zeroes, if `false`, the format will always add leading zeroes.
+ * @returns
+ */
+export const useParsedFormat = parameters => {
+  const {
+    format,
+    formatDensity = 'dense',
+    shouldRespectLeadingZeros = false
+  } = parameters;
+  const utils = useUtils();
+  const isRtl = useRtl();
+  const translations = usePickersTranslations();
+  const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
+  return React.useMemo(() => {
+    const sections = buildSectionsFromFormat({
+      utils,
+      format,
+      formatDensity,
+      isRtl,
+      shouldRespectLeadingZeros,
+      localeText: translations,
+      localizedDigits,
+      date: null,
+      // TODO v9: Make sure we still don't reverse in `buildSectionsFromFormat` when using `useParsedFormat`.
+      enableAccessibleFieldDOMStructure: false
+    });
+    return sections.map(section => `${section.startSeparator}${section.placeholder}${section.endSeparator}`).join('');
+  }, [utils, isRtl, translations, localizedDigits, format, formatDensity, shouldRespectLeadingZeros]);
+};

package/hooks/usePickersContext.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ */
+export declare const usePickersContext: () => import("../internals/components/PickersProvider").PickersContextValue;

package/hooks/usePickersContext.js

@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+import { PickersContext } from "../internals/components/PickersProvider.js";
+
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ */
+export const usePickersContext = () => {
+  const value = React.useContext(PickersContext);
+  if (value == null) {
+    throw new Error(['MUI X: The `usePickersContext` can only be called in fields that are used as a slot of a picker component'].join('\n'));
+  }
+  return value;
+};

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.19.0
+ * @mui/x-date-pickers v7.21.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickersProvider.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { PickerValidDate } from '../../models';
+import { PickersInputLocaleText } from '../../locales';
+export declare const PickersContext: React.Context<PickersContextValue | null>;
+/**
+ * Provides the context for the various parts of a picker component:
+ * - contextValue: the context for the picker sub-components.
+ * - localizationProvider: the translations passed through the props and through a parent LocalizationProvider.
+ *
+ * @ignore - do not document.
+ */
+export declare function PickersProvider<TDate extends PickerValidDate>(props: PickersFieldProviderProps<TDate>): React.JSX.Element;
+interface PickersFieldProviderProps<TDate extends PickerValidDate> {
+    contextValue: PickersContextValue;
+    localeText: PickersInputLocaleText<TDate> | undefined;
+    children: React.ReactNode;
+}
+export interface PickersContextValue {
+    /**
+     * Open the picker.
+     * @param {React.UIEvent} event The DOM event that triggered the change.
+     */
+    onOpen: (event: React.UIEvent) => void;
+    /**
+     * Close the picker.
+     * @param {React.UIEvent} event The DOM event that triggered the change.
+     */
+    onClose: (event: React.UIEvent) => void;
+    /**
+     * `true` if the picker is open, `false` otherwise.
+     */
+    open: boolean;
+}
+export {};

package/internals/components/PickersProvider.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { LocalizationProvider } from "../../LocalizationProvider/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PickersContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Provides the context for the various parts of a picker component:
+ * - contextValue: the context for the picker sub-components.
+ * - localizationProvider: the translations passed through the props and through a parent LocalizationProvider.
+ *
+ * @ignore - do not document.
+ */
+export function PickersProvider(props) {
+  const {
+    contextValue,
+    localeText,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(PickersContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(LocalizationProvider, {
+      localeText: localeText,
+      children: children
+    })
+  });
+}

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -11,15 +11,16 @@ import useForkRef from '@mui/utils/useForkRef';
 import useId from '@mui/utils/useId';
 import { PickersPopper } from "../../components/PickersPopper.js";
 import { usePicker } from "../usePicker/index.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 desktop pickers:
  * - DesktopDatePicker
  * - DesktopDateTimePicker
  * - DesktopTimePicker
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useDesktopPicker = _ref => {
   let {
       props,
@@ -57,7 +58,9 @@ export const useDesktopPicker = _ref => {
     layoutProps,
     renderCurrentView,
     shouldRestoreFocus,
-    fieldProps: pickerFieldProps
+    fieldProps: pickerFieldProps,
+    contextValue,
+    ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
@@ -65,11 +68,6 @@ export const useDesktopPicker = _ref => {
     additionalViewProps: {},
     wrapperVariant: 'desktop'
   }));
-
-  // TODO v8: Apply this ownerState to all the slots in this hook.
-  const ownerStateV8 = {
-    open
-  };
   const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;
   const _useSlotProps = useSlotProps({
       elementType: InputAdornment,
@@ -97,7 +95,7 @@ export const useDesktopPicker = _ref => {
   const openPickerIconProps = useSlotProps({
     elementType: OpenPickerIcon,
     externalSlotProps: innerSlotProps?.openPickerIcon,
-    ownerState: ownerStateV8
+    ownerState
   });
   const Field = slots.field;
   const fieldProps = useSlotProps({
@@ -161,7 +159,8 @@ export const useDesktopPicker = _ref => {
     }, innerSlotProps?.popper)
   });
   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,