@mui/x-date-pickers 7.15.0 → 7.17.0

package/YearCalendar/YearCalendar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
@@ -7,14 +9,14 @@ import clsx from 'clsx';
 import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_useControlled as useControlled, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import { PickersYear } from './PickersYear';
-import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
-import { getYearCalendarUtilityClass } from './yearCalendarClasses';
-import { applyDefaultDate } from '../internals/utils/date-utils';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
-import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
-import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from '../internals/constants/dimensions';
+import { PickersYear } from "./PickersYear.js";
+import { useUtils, useNow, useDefaultDates } from "../internals/hooks/useUtils.js";
+import { getYearCalendarUtilityClass } from "./yearCalendarClasses.js";
+import { applyDefaultDate } from "../internals/utils/date-utils.js";
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
+import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
+import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from "../internals/constants/dimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/YearCalendar/index.js

@@ -1,3 +1,3 @@
-export { YearCalendar } from './YearCalendar';
-export { yearCalendarClasses, getYearCalendarUtilityClass } from './yearCalendarClasses';
-export { pickersYearClasses } from './pickersYearClasses';
+export { YearCalendar } from "./YearCalendar.js";
+export { yearCalendarClasses, getYearCalendarUtilityClass } from "./yearCalendarClasses.js";
+export { pickersYearClasses } from "./pickersYearClasses.js";

package/dateViewRenderers/dateViewRenderers.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { DateCalendar } from '../DateCalendar';
-import { isDatePickerView } from '../internals/utils/date-utils';
+import { DateCalendar } from "../DateCalendar/index.js";
+import { isDatePickerView } from "../internals/utils/date-utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const renderDateViewCalendar = ({
   view,

package/dateViewRenderers/index.js

@@ -1 +1 @@
-export { renderDateViewCalendar } from './dateViewRenderers';
+export { renderDateViewCalendar } from "./dateViewRenderers.js";

package/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useClearableField } from './useClearableField';
 export type { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, UseClearableFieldResponse, } from './useClearableField';
 export { usePickersTranslations } from './usePickersTranslations';
+export { useSplitFieldProps } from './useSplitFieldProps';

package/hooks/index.js

@@ -1,2 +1,3 @@
-export { useClearableField } from './useClearableField';
-export { usePickersTranslations } from './usePickersTranslations';
+export { useClearableField } from "./useClearableField.js";
+export { usePickersTranslations } from "./usePickersTranslations.js";
+export { useSplitFieldProps } from "./useSplitFieldProps.js";

package/hooks/useClearableField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["clearable", "onClear", "InputProps", "sx", "slots", "slotProps"],
@@ -6,8 +8,8 @@ import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import MuiIconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
-import { ClearIcon } from '../icons';
-import { usePickersTranslations } from './usePickersTranslations';
+import { ClearIcon } from "../icons/index.js";
+import { usePickersTranslations } from "./usePickersTranslations.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useClearableField = props => {
   const translations = usePickersTranslations();

package/hooks/usePickersTranslations.js

@@ -1,2 +1,4 @@
-import { useLocalizationContext } from '../internals/hooks/useUtils';
+'use client';
+
+import { useLocalizationContext } from "../internals/hooks/useUtils.js";
 export const usePickersTranslations = () => useLocalizationContext().localeText;

package/hooks/useSplitFieldProps.d.ts

@@ -0,0 +1,19 @@
+import { FieldValueType } from '../models';
+import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from '../validation/extractValidationProps';
+declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator"];
+type InternalPropNames<TValueType extends FieldValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
+/**
+ * Split the props received by the field component into:
+ * - `internalProps` which are used by the various hooks called by the field component.
+ * - `forwardedProps` which are passed to the underlying component.
+ * Note that some forwarded props might be used by the hooks as well.
+ * For instance, hooks like `useDateField` need props like `autoFocus` to know how to behave.
+ * @template TProps, TValueType
+ * @param {TProps} props The props received by the field component.
+ * @param {TValueType} valueType The type of the field value ('date', 'time', or 'date-time').
+ */
+export declare const useSplitFieldProps: <TValueType extends FieldValueType, TProps extends { [key in InternalPropNames<TValueType>]?: any; }>(props: TProps, valueType: TValueType) => {
+    forwardedProps: Omit<TProps, InternalPropNames<TValueType>>;
+    internalProps: Pick<TProps, InternalPropNames<TValueType>>;
+};
+export {};

package/hooks/useSplitFieldProps.js

@@ -0,0 +1,43 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.js";
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator'];
+/**
+ * Split the props received by the field component into:
+ * - `internalProps` which are used by the various hooks called by the field component.
+ * - `forwardedProps` which are passed to the underlying component.
+ * Note that some forwarded props might be used by the hooks as well.
+ * For instance, hooks like `useDateField` need props like `autoFocus` to know how to behave.
+ * @template TProps, TValueType
+ * @param {TProps} props The props received by the field component.
+ * @param {TValueType} valueType The type of the field value ('date', 'time', or 'date-time').
+ */
+export const useSplitFieldProps = (props, valueType) => {
+  return React.useMemo(() => {
+    const forwardedProps = _extends({}, props);
+    const internalProps = {};
+    const extractProp = propName => {
+      if (forwardedProps.hasOwnProperty(propName)) {
+        // @ts-ignore
+        internalProps[propName] = forwardedProps[propName];
+        delete forwardedProps[propName];
+      }
+    };
+    SHARED_FIELD_INTERNAL_PROP_NAMES.forEach(extractProp);
+    if (valueType === 'date') {
+      DATE_VALIDATION_PROP_NAMES.forEach(extractProp);
+    } else if (valueType === 'time') {
+      TIME_VALIDATION_PROP_NAMES.forEach(extractProp);
+    } else if (valueType === 'date-time') {
+      DATE_VALIDATION_PROP_NAMES.forEach(extractProp);
+      TIME_VALIDATION_PROP_NAMES.forEach(extractProp);
+      DATE_TIME_VALIDATION_PROP_NAMES.forEach(extractProp);
+    }
+    return {
+      forwardedProps,
+      internalProps
+    };
+  }, [props, valueType]);
+};

package/icons/index.js

@@ -5,35 +5,35 @@ import * as React from 'react';
  * @ignore - internal component.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const ArrowDropDownIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
 /**
  * @ignore - internal component.
  */
-export const ArrowLeftIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const ArrowLeftIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
 }), 'ArrowLeft');
 
 /**
  * @ignore - internal component.
  */
-export const ArrowRightIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const ArrowRightIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
 }), 'ArrowRight');
 
 /**
  * @ignore - internal component.
  */
-export const CalendarIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const CalendarIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
 }), 'Calendar');
 
 /**
  * @ignore - internal component.
  */
-export const ClockIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+export const ClockIcon = createSvgIcon(/*#__PURE__*/_jsxs(React.Fragment, {
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
   }), /*#__PURE__*/_jsx("path", {
@@ -44,14 +44,14 @@ export const ClockIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
 /**
  * @ignore - internal component.
  */
-export const DateRangeIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const DateRangeIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"
 }), 'DateRange');
 
 /**
  * @ignore - internal component.
  */
-export const TimeIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+export const TimeIcon = createSvgIcon(/*#__PURE__*/_jsxs(React.Fragment, {
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
   }), /*#__PURE__*/_jsx("path", {
@@ -62,6 +62,6 @@ export const TimeIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
 /**
  * @ignore - internal component.
  */
-export const ClearIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const ClearIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 }), 'Clear');

package/index.d.ts

@@ -35,3 +35,4 @@ export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';
 export * from './icons';
 export * from './hooks';
+export * from './validation';

package/index.js

@@ -1,59 +1,60 @@
 /**
- * @mui/x-date-pickers v7.15.0
+ * @mui/x-date-pickers v7.17.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 // Clocks
-export * from './TimeClock';
-export * from './DigitalClock';
-export * from './MultiSectionDigitalClock';
-export * from './LocalizationProvider';
-export * from './PickersDay';
-export * from './locales/utils/pickersLocaleTextApi';
+export * from "./TimeClock/index.js";
+export * from "./DigitalClock/index.js";
+export * from "./MultiSectionDigitalClock/index.js";
+export * from "./LocalizationProvider/index.js";
+export * from "./PickersDay/index.js";
+export * from "./locales/utils/pickersLocaleTextApi.js";
 
 // Fields
-export * from './DateField';
-export * from './TimeField';
-export * from './DateTimeField';
+export * from "./DateField/index.js";
+export * from "./TimeField/index.js";
+export * from "./DateTimeField/index.js";
 
 // Calendars
-export * from './DateCalendar';
-export * from './MonthCalendar';
-export * from './YearCalendar';
-export * from './DayCalendarSkeleton';
+export * from "./DateCalendar/index.js";
+export * from "./MonthCalendar/index.js";
+export * from "./YearCalendar/index.js";
+export * from "./DayCalendarSkeleton/index.js";
 
 // New Pickers
-export * from './DatePicker';
-export * from './DesktopDatePicker';
-export * from './MobileDatePicker';
-export * from './StaticDatePicker';
-export * from './TimePicker';
-export * from './DesktopTimePicker';
-export * from './MobileTimePicker';
-export * from './StaticTimePicker';
-export * from './DateTimePicker';
-export * from './DesktopDateTimePicker';
-export * from './MobileDateTimePicker';
-export * from './StaticDateTimePicker';
+export * from "./DatePicker/index.js";
+export * from "./DesktopDatePicker/index.js";
+export * from "./MobileDatePicker/index.js";
+export * from "./StaticDatePicker/index.js";
+export * from "./TimePicker/index.js";
+export * from "./DesktopTimePicker/index.js";
+export * from "./MobileTimePicker/index.js";
+export * from "./StaticTimePicker/index.js";
+export * from "./DateTimePicker/index.js";
+export * from "./DesktopDateTimePicker/index.js";
+export * from "./MobileDateTimePicker/index.js";
+export * from "./StaticDateTimePicker/index.js";
 
 // View renderers
-export * from './dateViewRenderers';
-export * from './timeViewRenderers';
+export * from "./dateViewRenderers/index.js";
+export * from "./timeViewRenderers/index.js";
 
 // Layout
-export * from './PickersLayout';
-export * from './PickersActionBar';
-export * from './PickersShortcuts';
+export * from "./PickersLayout/index.js";
+export * from "./PickersActionBar/index.js";
+export * from "./PickersShortcuts/index.js";
 
 // Other slots
-export * from './PickersCalendarHeader';
+export * from "./PickersCalendarHeader/index.js";
 
 // Field utilities
-export * from './PickersTextField';
-export * from './PickersSectionList';
-export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
-export * from './models';
-export * from './icons';
-export * from './hooks';
+export * from "./PickersTextField/index.js";
+export * from "./PickersSectionList/index.js";
+export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./internals/utils/utils.js";
+export * from "./models/index.js";
+export * from "./icons/index.js";
+export * from "./hooks/index.js";
+export * from "./validation/index.js";

package/internals/components/PickerViewRoot/PickerViewRoot.js

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles';
-import { DIALOG_WIDTH, VIEW_HEIGHT } from '../../constants/dimensions';
+import { DIALOG_WIDTH, VIEW_HEIGHT } from "../../constants/dimensions.js";
 export const PickerViewRoot = styled('div')({
   overflow: 'hidden',
   width: DIALOG_WIDTH,

package/internals/components/PickerViewRoot/index.js

@@ -1 +1 @@
-export { PickerViewRoot } from './PickerViewRoot';
+export { PickerViewRoot } from "./PickerViewRoot.js";

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -11,8 +11,8 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
 import IconButton from '@mui/material/IconButton';
-import { ArrowLeftIcon, ArrowRightIcon } from '../../../icons';
-import { getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses';
+import { ArrowLeftIcon, ArrowRightIcon } from "../../../icons/index.js";
+import { getPickersArrowSwitcherUtilityClass } from "./pickersArrowSwitcherClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PickersArrowSwitcherRoot = styled('div', {
   name: 'MuiPickersArrowSwitcher',

package/internals/components/PickersArrowSwitcher/index.js

@@ -1,2 +1,2 @@
-export { PickersArrowSwitcher } from './PickersArrowSwitcher';
-export { pickersArrowSwitcherClasses, getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses';
+export { PickersArrowSwitcher } from "./PickersArrowSwitcher.js";
+export { pickersArrowSwitcherClasses, getPickersArrowSwitcherUtilityClass } from "./pickersArrowSwitcherClasses.js";

package/internals/components/PickersModalDialog.js

@@ -4,7 +4,7 @@ import DialogContent from '@mui/material/DialogContent';
 import Fade from '@mui/material/Fade';
 import MuiDialog, { dialogClasses } from '@mui/material/Dialog';
 import { styled } from '@mui/material/styles';
-import { DIALOG_WIDTH } from '../constants/dimensions';
+import { DIALOG_WIDTH } from "../constants/dimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersModalDialogRoot = styled(MuiDialog)({
   [`& .${dialogClasses.container}`]: {

package/internals/components/PickersPopper.js

@@ -10,9 +10,9 @@ import MuiPopper from '@mui/material/Popper';
 import BaseFocusTrap from '@mui/material/Unstable_TrapFocus';
 import { unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, unstable_ownerDocument as ownerDocument, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { getPickersPopperUtilityClass } from './pickersPopperClasses';
-import { getActiveElement } from '../utils/utils';
-import { useDefaultReduceAnimations } from '../hooks/useDefaultReduceAnimations';
+import { getPickersPopperUtilityClass } from "./pickersPopperClasses.js";
+import { getActiveElement } from "../utils/utils.js";
+import { useDefaultReduceAnimations } from "../hooks/useDefaultReduceAnimations.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/internals/components/PickersToolbar.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { getPickersToolbarUtilityClass } from './pickersToolbarClasses';
+import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/internals/components/PickersToolbarButton.js

@@ -6,8 +6,8 @@ import clsx from 'clsx';
 import Button from '@mui/material/Button';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { PickersToolbarText } from './PickersToolbarText';
-import { getPickersToolbarUtilityClass } from './pickersToolbarClasses';
+import { PickersToolbarText } from "./PickersToolbarText.js";
+import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/internals/components/PickersToolbarText.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { getPickersToolbarTextUtilityClass, pickersToolbarTextClasses } from './pickersToolbarTextClasses';
+import { getPickersToolbarTextUtilityClass, pickersToolbarTextClasses } from "./pickersToolbarTextClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/internals/demo/DemoContainer.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import Stack, { stackClasses } from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { textFieldClasses } from '@mui/material/TextField';
-import { pickersTextFieldClasses } from '../../PickersTextField';
+import { pickersTextFieldClasses } from "../../PickersTextField/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getChildTypeFromChildName = childName => {
   if (childName.match(/^([A-Za-z]+)Range(Calendar|Clock)$/)) {
@@ -68,7 +68,7 @@ export function DemoItem(props) {
 }
 DemoItem.displayName = 'DemoItem';
 const isDemoItem = child => {
-  if ( /*#__PURE__*/React.isValidElement(child) && typeof child.type !== 'string') {
+  if (/*#__PURE__*/React.isValidElement(child) && typeof child.type !== 'string') {
     // @ts-ignore
     return child.type.displayName === 'DemoItem';
   }
@@ -165,7 +165,7 @@ export function DemoContainer(props) {
     spacing: spacing,
     sx: finalSx,
     children: React.Children.map(children, child => {
-      if ( /*#__PURE__*/React.isValidElement(child) && isDemoItem(child)) {
+      if (/*#__PURE__*/React.isValidElement(child) && isDemoItem(child)) {
         // Inject sx styles to the `DemoItem` if it is a direct child of `DemoContainer`.
         // @ts-ignore
         return /*#__PURE__*/React.cloneElement(child, {

package/internals/demo/index.js

@@ -1 +1 @@
-export { DemoContainer, DemoItem } from './DemoContainer';
+export { DemoContainer, DemoItem } from "./DemoContainer.js";

package/internals/hooks/date-helpers-hooks.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useUtils } from './useUtils';
-import { getMeridiem, convertToMeridiem } from '../utils/time-utils';
+import { useUtils } from "./useUtils.js";
+import { getMeridiem, convertToMeridiem } from "../utils/time-utils.js";
 export function useNextMonthDisabled(month, {
   disableFuture,
   maxDate,

package/internals/hooks/defaultizedFieldProps.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { applyDefaultDate } from '../utils/date-utils';
-import { useUtils, useDefaultDates } from './useUtils';
+import { applyDefaultDate } from "../utils/date-utils.js";
+import { useUtils, useDefaultDates } from "./useUtils.js";
 export const useDefaultizedDateField = props => {
   const utils = useUtils();
   const defaultDates = useDefaultDates();

package/internals/hooks/useClockReferenceDate.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { singleItemValueManager } from '../utils/valueManagers';
-import { getTodayDate } from '../utils/date-utils';
-import { SECTION_TYPE_GRANULARITY } from '../utils/getDefaultReferenceDate';
+import { singleItemValueManager } from "../utils/valueManagers.js";
+import { getTodayDate } from "../utils/date-utils.js";
+import { SECTION_TYPE_GRANULARITY } from "../utils/getDefaultReferenceDate.js";
 export const useClockReferenceDate = ({
   value,
   referenceDate: referenceDateProp,

package/internals/hooks/useDesktopPicker/index.js

@@ -1 +1 @@
-export { useDesktopPicker } from './useDesktopPicker';
+export { useDesktopPicker } from "./useDesktopPicker.js";

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -9,11 +9,10 @@ import MuiInputAdornment from '@mui/material/InputAdornment';
 import IconButton from '@mui/material/IconButton';
 import useForkRef from '@mui/utils/useForkRef';
 import useId from '@mui/utils/useId';
-import { PickersPopper } from '../../components/PickersPopper';
-import { useUtils } from '../useUtils';
-import { usePicker } from '../usePicker';
-import { LocalizationProvider } from '../../../LocalizationProvider';
-import { PickersLayout } from '../../../PickersLayout';
+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";
 /**
  * Hook managing all the single-date desktop pickers:
@@ -47,7 +46,6 @@ export const useDesktopPicker = _ref => {
     localeText,
     reduceAnimations
   } = props;
-  const utils = useUtils();
   const containerRef = React.useRef(null);
   const fieldRef = React.useRef(null);
   const labelId = useId();
@@ -67,6 +65,11 @@ 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,
@@ -84,13 +87,18 @@ export const useDesktopPicker = _ref => {
       additionalProps: {
         disabled: disabled || readOnly,
         onClick: open ? actions.onClose : actions.onOpen,
-        'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils),
+        'aria-label': getOpenDialogAriaText(pickerFieldProps.value),
         edge: inputAdornmentProps.position
       },
       ownerState: props
     }),
     openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
   const OpenPickerIcon = slots.openPickerIcon;
+  const openPickerIconProps = useSlotProps({
+    elementType: OpenPickerIcon,
+    externalSlotProps: innerSlotProps?.openPickerIcon,
+    ownerState: ownerStateV8
+  });
   const Field = slots.field;
   const fieldProps = useSlotProps({
     elementType: Field,
@@ -125,7 +133,7 @@ export const useDesktopPicker = _ref => {
     }, !props.disableOpenPicker && {
       [`${inputAdornmentProps.position}Adornment`]: /*#__PURE__*/_jsx(InputAdornment, _extends({}, inputAdornmentProps, {
         children: /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
-          children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, innerSlotProps?.openPickerIcon))
+          children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, openPickerIconProps))
         }))
       }))
     });

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, MuiPickersAdapter, PickerValidDate } from '../../../models';
+import { BaseSingleInputFieldProps, FieldSection, PickerValidDate } from '../../../models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
@@ -40,12 +40,15 @@ 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?: Record<string, any>;
+    openPickerIcon?: SlotComponentPropsFromProps<Record<string, any>, {}, UseDesktopPickerOwnerState>;
 }
 export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps {
     /**
@@ -68,5 +71,5 @@ export interface UseDesktopPickerProps<TDate extends PickerValidDate, TView exte
 }
 export interface UseDesktopPickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
     props: TExternalProps;
-    getOpenDialogAriaText: (date: TDate | null, utils: MuiPickersAdapter<TDate>) => string;
+    getOpenDialogAriaText: (date: TDate | null) => string;
 }

package/internals/hooks/useField/buildSectionsFromFormat.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { applyLocalizedDigits, cleanLeadingZeros, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, removeLocalizedDigits } from './useField.utils';
+import { applyLocalizedDigits, cleanLeadingZeros, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, removeLocalizedDigits } from "./useField.utils.js";
 const expandFormat = ({
   utils,
   format

package/internals/hooks/useField/index.js

@@ -1,2 +1,2 @@
-export { useField } from './useField';
-export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from './useField.utils';
+export { useField } from "./useField.js";
+export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";