@mui/x-date-pickers 7.20.0 → 7.22.0

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/index.js

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

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -59,7 +59,8 @@ export const useDesktopPicker = _ref => {
     renderCurrentView,
     shouldRestoreFocus,
     fieldProps: pickerFieldProps,
-    contextValue
+    contextValue,
+    ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
@@ -67,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,
@@ -99,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({

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/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/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,
@@ -51,6 +56,8 @@ export const usePicker = ({
     // Picker layout
     layoutProps: pickerLayoutResponse.layoutProps,
     // Picker context
-    contextValue: pickerValueResponse.contextValue
+    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/utils/utils.js

@@ -40,7 +40,7 @@ export const getActiveElement = (root = document) => {
  * @returns {number} The index of the focused list item, or -1 if none is focused.
  */
 export const getFocusedListItemIndex = listElement => {
-  const children = listElement.children;
-  return Array.from(children).findIndex(child => child === getActiveElement(document));
+  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

@@ -10,3 +10,21 @@ export interface PickerChangeHandlerContext<TError> {
 export interface 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/DayCalendar.js

@@ -378,9 +378,8 @@ export function DayCalendar(inProps) {
     return internalFocusedDay;
   }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils, timezone]);
   const weeksToDisplay = React.useMemo(() => {
-    const currentMonthWithTimezone = utils.setTimezone(currentMonth, timezone);
-    const toDisplay = utils.getWeekArray(currentMonthWithTimezone);
-    let nextMonth = utils.addMonths(currentMonthWithTimezone, 1);
+    const toDisplay = utils.getWeekArray(currentMonth);
+    let nextMonth = utils.addMonths(currentMonth, 1);
     while (fixedWeekNumber && toDisplay.length < fixedWeekNumber) {
       const additionalWeeks = utils.getWeekArray(nextMonth);
       const hasCommonWeek = utils.isSameDay(toDisplay[toDisplay.length - 1][0], additionalWeeks[0][0]);
@@ -392,7 +391,7 @@ export function DayCalendar(inProps) {
       nextMonth = utils.addMonths(nextMonth, 1);
     }
     return toDisplay;
-  }, [currentMonth, fixedWeekNumber, utils, timezone]);
+  }, [currentMonth, fixedWeekNumber, utils]);
   return /*#__PURE__*/_jsxs(PickersCalendarDayRoot, {
     role: "grid",
     "aria-labelledby": gridLabelId,

package/modern/DateCalendar/useCalendarState.js

@@ -15,6 +15,20 @@ export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMont
         currentMonth: action.newMonth,
         isMonthSwitchingAnimating: !reduceAnimations
       });
+    case 'changeMonthTimezone':
+      {
+        const newTimezone = action.newTimezone;
+        if (utils.getTimezone(state.currentMonth) === newTimezone) {
+          return state;
+        }
+        let newCurrentMonth = utils.setTimezone(state.currentMonth, newTimezone);
+        if (utils.getMonth(newCurrentMonth) !== utils.getMonth(state.currentMonth)) {
+          newCurrentMonth = utils.setMonth(newCurrentMonth, utils.getMonth(state.currentMonth));
+        }
+        return _extends({}, state, {
+          currentMonth: newCurrentMonth
+        });
+      }
     case 'finishMonthSwitchingAnimation':
       return _extends({}, state, {
         isMonthSwitchingAnimating: false
@@ -61,14 +75,25 @@ export const useCalendarState = params => {
       referenceDate: referenceDateProp,
       granularity: SECTION_TYPE_GRANULARITY.day
     });
-  }, [] // eslint-disable-line react-hooks/exhaustive-deps
-  );
+  },
+  // We want the `referenceDate` to update on prop and `timezone` change (https://github.com/mui/mui-x/issues/10804)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [referenceDateProp, timezone]);
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: referenceDate,
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
+
+  // Ensure that `calendarState.currentMonth` timezone is updated when `referenceDate` (or timezone changes)
+  // https://github.com/mui/mui-x/issues/10804
+  React.useEffect(() => {
+    dispatch({
+      type: 'changeMonthTimezone',
+      newTimezone: utils.getTimezone(referenceDate)
+    });
+  }, [referenceDate, utils]);
   const handleChangeMonth = React.useCallback(payload => {
     dispatch(_extends({
       type: 'changeMonth'

package/modern/DigitalClock/DigitalClock.js

@@ -232,21 +232,22 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     return !containsValidTime() || !isValidValue();
   }, [disableIgnoringDatePartForTimeValidation, utils, minTime, maxTime, disableFuture, now, disablePast, minutesStep, shouldDisableTime]);
   const timeOptions = React.useMemo(() => {
+    const result = [];
     const startOfDay = utils.startOfDay(valueOrReferenceDate);
-    return [startOfDay, ...Array.from({
-      length: Math.ceil(24 * 60 / timeStep) - 1
-    }, (_, index) => utils.addMinutes(startOfDay, timeStep * (index + 1)))];
+    let nextTimeStepOption = startOfDay;
+    while (utils.isSameDay(valueOrReferenceDate, nextTimeStepOption)) {
+      result.push(nextTimeStepOption);
+      nextTimeStepOption = utils.addMinutes(nextTimeStepOption, timeStep);
+    }
+    return result;
   }, [valueOrReferenceDate, timeStep, utils]);
   const focusedOptionIndex = timeOptions.findIndex(option => utils.isEqual(option, valueOrReferenceDate));
   const handleKeyDown = event => {
     switch (event.key) {
       case 'PageUp':
         {
-          if (!listRef.current) {
-            return;
-          }
           const newIndex = getFocusedListItemIndex(listRef.current) - 5;
-          const children = listRef.current?.children;
+          const children = listRef.current.children;
           const newFocusedIndex = Math.max(0, newIndex);
           const childToFocus = children[newFocusedIndex];
           if (childToFocus) {
@@ -257,11 +258,8 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
         }
       case 'PageDown':
         {
-          if (!listRef.current) {
-            return;
-          }
           const newIndex = getFocusedListItemIndex(listRef.current) + 5;
-          const children = listRef.current?.children;
+          const children = listRef.current.children;
           const newFocusedIndex = Math.min(children.length - 1, newIndex);
           const childToFocus = children[newFocusedIndex];
           if (childToFocus) {
@@ -304,7 +302,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
           tabIndex: tabIndex
         }, clockItemProps, {
           children: formattedValue
-        }), formattedValue);
+        }), `${option.valueOf()}-${formattedValue}`);
       })
     })
   }));

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -143,11 +143,8 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     switch (event.key) {
       case 'PageUp':
         {
-          if (!containerRef.current) {
-            return;
-          }
           const newIndex = getFocusedListItemIndex(containerRef.current) - 5;
-          const children = containerRef.current?.children;
+          const children = containerRef.current.children;
           const newFocusedIndex = Math.max(0, newIndex);
           const childToFocus = children[newFocusedIndex];
           if (childToFocus) {
@@ -158,11 +155,8 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
         }
       case 'PageDown':
         {
-          if (!containerRef.current) {
-            return;
-          }
           const newIndex = getFocusedListItemIndex(containerRef.current) + 5;
-          const children = containerRef.current?.children;
+          const children = containerRef.current.children;
           const newFocusedIndex = Math.min(children.length - 1, newIndex);
           const childToFocus = children[newFocusedIndex];
           if (childToFocus) {

package/modern/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/modern/index.js

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

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -59,7 +59,8 @@ export const useDesktopPicker = _ref => {
     renderCurrentView,
     shouldRestoreFocus,
     fieldProps: pickerFieldProps,
-    contextValue
+    contextValue,
+    ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
@@ -67,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,
@@ -99,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({

package/modern/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/modern/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,
@@ -51,6 +56,8 @@ export const usePicker = ({
     // Picker layout
     layoutProps: pickerLayoutResponse.layoutProps,
     // Picker context
-    contextValue: pickerValueResponse.contextValue
+    contextValue: pickerValueResponse.contextValue,
+    // Picker owner state
+    ownerState: pickerOwnerState
   };
 };

package/modern/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/modern/internals/utils/utils.js

@@ -40,7 +40,7 @@ export const getActiveElement = (root = document) => {
  * @returns {number} The index of the focused list item, or -1 if none is focused.
  */
 export const getFocusedListItemIndex = listElement => {
-  const children = listElement.children;
-  return Array.from(children).findIndex(child => child === getActiveElement(document));
+  const children = Array.from(listElement.children);
+  return children.indexOf(getActiveElement(document));
 };
 export const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';

package/node/AdapterDayjs/AdapterDayjs.js

@@ -262,6 +262,8 @@ 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/node/DateCalendar/DayCalendar.js

@@ -386,9 +386,8 @@ function DayCalendar(inProps) {
     return internalFocusedDay;
   }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils, timezone]);
   const weeksToDisplay = React.useMemo(() => {
-    const currentMonthWithTimezone = utils.setTimezone(currentMonth, timezone);
-    const toDisplay = utils.getWeekArray(currentMonthWithTimezone);
-    let nextMonth = utils.addMonths(currentMonthWithTimezone, 1);
+    const toDisplay = utils.getWeekArray(currentMonth);
+    let nextMonth = utils.addMonths(currentMonth, 1);
     while (fixedWeekNumber && toDisplay.length < fixedWeekNumber) {
       const additionalWeeks = utils.getWeekArray(nextMonth);
       const hasCommonWeek = utils.isSameDay(toDisplay[toDisplay.length - 1][0], additionalWeeks[0][0]);
@@ -400,7 +399,7 @@ function DayCalendar(inProps) {
       nextMonth = utils.addMonths(nextMonth, 1);
     }
     return toDisplay;
-  }, [currentMonth, fixedWeekNumber, utils, timezone]);
+  }, [currentMonth, fixedWeekNumber, utils]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarDayRoot, {
     role: "grid",
     "aria-labelledby": gridLabelId,

package/node/DateCalendar/useCalendarState.js

@@ -22,6 +22,20 @@ const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayF
         currentMonth: action.newMonth,
         isMonthSwitchingAnimating: !reduceAnimations
       });
+    case 'changeMonthTimezone':
+      {
+        const newTimezone = action.newTimezone;
+        if (utils.getTimezone(state.currentMonth) === newTimezone) {
+          return state;
+        }
+        let newCurrentMonth = utils.setTimezone(state.currentMonth, newTimezone);
+        if (utils.getMonth(newCurrentMonth) !== utils.getMonth(state.currentMonth)) {
+          newCurrentMonth = utils.setMonth(newCurrentMonth, utils.getMonth(state.currentMonth));
+        }
+        return (0, _extends2.default)({}, state, {
+          currentMonth: newCurrentMonth
+        });
+      }
     case 'finishMonthSwitchingAnimation':
       return (0, _extends2.default)({}, state, {
         isMonthSwitchingAnimating: false
@@ -69,14 +83,25 @@ const useCalendarState = params => {
       referenceDate: referenceDateProp,
       granularity: _getDefaultReferenceDate.SECTION_TYPE_GRANULARITY.day
     });
-  }, [] // eslint-disable-line react-hooks/exhaustive-deps
-  );
+  },
+  // We want the `referenceDate` to update on prop and `timezone` change (https://github.com/mui/mui-x/issues/10804)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [referenceDateProp, timezone]);
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: referenceDate,
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
+
+  // Ensure that `calendarState.currentMonth` timezone is updated when `referenceDate` (or timezone changes)
+  // https://github.com/mui/mui-x/issues/10804
+  React.useEffect(() => {
+    dispatch({
+      type: 'changeMonthTimezone',
+      newTimezone: utils.getTimezone(referenceDate)
+    });
+  }, [referenceDate, utils]);
   const handleChangeMonth = React.useCallback(payload => {
     dispatch((0, _extends2.default)({
       type: 'changeMonth'