@mui/x-date-pickers 6.5.0 → 6.6.0

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -6,7 +6,7 @@ import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { getDatePickerFieldFormat, useDatePickerDefaultizedProps } from '../DatePicker/shared';
 import { useLocaleText, useUtils, validateDate } from '../internals';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
-import { Calendar } from '../internals/components/icons';
+import { CalendarIcon } from '../icons';
 import { DateField } from '../DateField';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDateViewCalendar } from '../dateViewRenderers';
@@ -28,7 +28,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
     format: getDatePickerFieldFormat(utils, defaultizedProps),
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     slots: _extends({
-      openPickerIcon: Calendar,
+      openPickerIcon: CalendarIcon,
       field: DateField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -5,9 +5,10 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { DateTimeField } from '../DateTimeField';
 import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
-import { renderDateViewCalendar } from '../dateViewRenderers';
+import { renderDateViewCalendar } from '../dateViewRenderers/dateViewRenderers';
+import { renderDesktopDateTimeView } from '../dateTimeViewRenderers';
 import { useLocaleText, validateDateTime } from '../internals';
-import { Calendar } from '../internals/components/icons';
+import { CalendarIcon } from '../icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
@@ -15,24 +16,45 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiDesktopDateTimePicker');
-  const viewRenderers = _extends({
+  const timeSteps = _extends({
+    hours: 1,
+    minutes: 5,
+    seconds: 5
+  }, defaultizedProps.timeSteps);
+  const shouldUseNewRenderer = !defaultizedProps.viewRenderers || Object.keys(defaultizedProps.viewRenderers).length === 0;
+  const viewRenderers =
+  // we can only ensure the expected two-column layout if none of the renderers are overridden
+  shouldUseNewRenderer ? {
+    day: renderDesktopDateTimeView,
+    month: renderDesktopDateTimeView,
+    year: renderDesktopDateTimeView,
+    hours: renderDesktopDateTimeView,
+    minutes: renderDesktopDateTimeView,
+    seconds: renderDesktopDateTimeView,
+    meridiem: renderDesktopDateTimeView
+  } : _extends({
     day: renderDateViewCalendar,
     month: renderDateViewCalendar,
     year: renderDateViewCalendar,
     hours: null,
     minutes: null,
-    seconds: null
+    seconds: null,
+    meridiem: null
   }, defaultizedProps.viewRenderers);
   const ampmInClock = defaultizedProps.ampmInClock ?? true;
+  // add "accept" action only when the new date time view renderers are used
+  const actionBarActions = shouldUseNewRenderer ? ['accept'] : [];
 
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
+    views: defaultizedProps.ampm ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views,
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     ampmInClock,
+    timeSteps,
     slots: _extends({
       field: DateTimeField,
-      openPickerIcon: Calendar
+      openPickerIcon: CalendarIcon
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
       field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
@@ -40,11 +62,15 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
       }),
       toolbar: _extends({
         hidden: true,
-        ampmInClock
+        ampmInClock,
+        toolbarVariant: shouldUseNewRenderer ? 'desktop' : 'mobile'
       }, defaultizedProps.slotProps?.toolbar),
       tabs: _extends({
         hidden: true
-      }, defaultizedProps.slotProps?.tabs)
+      }, defaultizedProps.slotProps?.tabs),
+      actionBar: _extends({
+        actions: actionBarActions
+      }, defaultizedProps.slotProps?.actionBar)
     })
   });
   const {
@@ -292,7 +318,7 @@ DesktopDateTimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  openTo: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Force rendering in particular orientation.
    */
@@ -370,6 +396,11 @@ DesktopDateTimePicker.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -384,6 +415,17 @@ DesktopDateTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps: PropTypes.shape({
+    hours: PropTypes.number,
+    minutes: PropTypes.number,
+    seconds: PropTypes.number
+  }),
   /**
    * The selected value.
    * Used when the component is controlled.
@@ -394,7 +436,7 @@ DesktopDateTimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -403,6 +445,7 @@ DesktopDateTimePicker.propTypes = {
   viewRenderers: PropTypes.shape({
     day: PropTypes.func,
     hours: PropTypes.func,
+    meridiem: PropTypes.func,
     minutes: PropTypes.func,
     month: PropTypes.func,
     seconds: PropTypes.func,

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -6,7 +6,7 @@ import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { TimeField } from '../TimeField';
 import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
 import { useLocaleText, validateTime } from '../internals';
-import { Clock } from '../internals/components/icons';
+import { ClockIcon } from '../icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
@@ -45,7 +45,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     views: shouldRenderTimeInASingleColumn ? ['hours'] : views,
     slots: _extends({
       field: TimeField,
-      openPickerIcon: Clock
+      openPickerIcon: ClockIcon
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
       field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {

package/modern/MonthCalendar/MonthCalendar.js

@@ -104,7 +104,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       onFocusedViewChange(newHasFocus);
     }
   });
-  const isMonthDisabled = useEventCallback(month => {
+  const isMonthDisabled = React.useCallback(month => {
     const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
     if (utils.isBefore(month, firstEnabledMonth)) {
@@ -117,7 +117,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       return false;
     }
     return shouldDisableMonth(month);
-  });
+  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableMonth, utils]);
   const handleMonthSelection = useEventCallback((event, month) => {
     if (readOnly) {
       return;

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -9,7 +9,7 @@ import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import useForkRef from '@mui/utils/useForkRef';
 import { getMultiSectionDigitalClockSectionUtilityClass } from './multiSectionDigitalClockSectionClasses';
-import { DIGITAL_CLOCK_VIEW_HEIGHT } from '../internals/constants/dimensions';
+import { DIGITAL_CLOCK_VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -43,7 +43,8 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   '&:after': {
     display: 'block',
     content: '""',
-    height: 188
+    // subtracting the height of one item, extra margin and borders to make sure the max height is correct
+    height: 'calc(100% - 40px - 6px)'
   }
 }));
 const MultiSectionDigitalClockSectionItem = styled(MenuItem, {
@@ -55,7 +56,7 @@ const MultiSectionDigitalClockSectionItem = styled(MenuItem, {
 }) => ({
   padding: 8,
   margin: '2px 4px',
-  width: 48,
+  width: MULTI_SECTION_CLOCK_SECTION_WIDTH,
   justifyContent: 'center',
   '&:first-of-type': {
     marginTop: 4

package/modern/TimeField/TimeField.js

@@ -245,6 +245,12 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default false
    */
   readOnly: PropTypes.bool,
+  /**
+   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate: PropTypes.any,
   /**
    * If `true`, the label is displayed as required and the `input` element is required.
    * @default false

package/modern/YearCalendar/YearCalendar.js

@@ -107,7 +107,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       onFocusedViewChange(newHasFocus);
     }
   });
-  const isYearDisabled = useEventCallback(dateToValidate => {
+  const isYearDisabled = React.useCallback(dateToValidate => {
     if (disablePast && utils.isBeforeYear(dateToValidate, now)) {
       return true;
     }
@@ -124,7 +124,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       return true;
     }
     return false;
-  });
+  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, utils]);
   const handleYearSelection = useEventCallback((event, year) => {
     if (readOnly) {
       return;

package/modern/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -0,0 +1,147 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import Divider from '@mui/material/Divider';
+import { resolveComponentProps } from '@mui/base/utils';
+import { DateCalendar } from '../DateCalendar';
+import { MultiSectionDigitalClock, multiSectionDigitalClockSectionClasses } from '../MultiSectionDigitalClock';
+import { DateTimeViewWrapper } from '../internals/components/DateTimeViewWrapper';
+import { isInternalTimeView } from '../internals/utils/time-utils';
+import { isDatePickerView } from '../internals/utils/date-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const renderDesktopDateTimeView = ({
+  view,
+  onViewChange,
+  views,
+  focusedView,
+  onFocusedViewChange,
+  value,
+  defaultValue,
+  onChange,
+  className,
+  classes,
+  disableFuture,
+  disablePast,
+  minDate,
+  minTime,
+  maxDate,
+  maxTime,
+  shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
+  shouldDisableTime,
+  shouldDisableClock,
+  reduceAnimations,
+  minutesStep,
+  ampm,
+  onMonthChange,
+  monthsPerRow,
+  onYearChange,
+  yearsPerRow,
+  defaultCalendarMonth,
+  components,
+  componentsProps,
+  slots,
+  slotProps,
+  loading,
+  renderLoading,
+  disableHighlightToday,
+  readOnly,
+  disabled,
+  showDaysOutsideCurrentMonth,
+  dayOfWeekFormatter,
+  sx,
+  autoFocus,
+  fixedWeekNumber,
+  displayWeekNumber,
+  disableIgnoringDatePartForTimeValidation,
+  timeSteps,
+  skipDisabled,
+  timeViewsCount
+}) => {
+  const isActionBarVisible = !!resolveComponentProps(slotProps?.actionBar ?? componentsProps?.actionBar, {})?.actions?.length;
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsxs(DateTimeViewWrapper, {
+      children: [/*#__PURE__*/_jsx(DateCalendar, {
+        view: isDatePickerView(view) ? view : 'day',
+        onViewChange: onViewChange,
+        views: views.filter(isDatePickerView),
+        focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
+        onFocusedViewChange: onFocusedViewChange,
+        value: value,
+        defaultValue: defaultValue,
+        onChange: onChange,
+        className: className,
+        classes: classes,
+        disableFuture: disableFuture,
+        disablePast: disablePast,
+        minDate: minDate,
+        maxDate: maxDate,
+        shouldDisableDate: shouldDisableDate,
+        shouldDisableMonth: shouldDisableMonth,
+        shouldDisableYear: shouldDisableYear,
+        reduceAnimations: reduceAnimations,
+        onMonthChange: onMonthChange,
+        monthsPerRow: monthsPerRow,
+        onYearChange: onYearChange,
+        yearsPerRow: yearsPerRow,
+        defaultCalendarMonth: defaultCalendarMonth,
+        components: components,
+        componentsProps: componentsProps,
+        slots: slots,
+        slotProps: slotProps,
+        loading: loading,
+        renderLoading: renderLoading,
+        disableHighlightToday: disableHighlightToday,
+        readOnly: readOnly,
+        disabled: disabled,
+        showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
+        dayOfWeekFormatter: dayOfWeekFormatter,
+        sx: sx,
+        autoFocus: autoFocus,
+        fixedWeekNumber: fixedWeekNumber,
+        displayWeekNumber: displayWeekNumber
+      }), timeViewsCount > 0 && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(Divider, {
+          orientation: "vertical"
+        }), /*#__PURE__*/_jsx(MultiSectionDigitalClock, {
+          view: isInternalTimeView(view) ? view : 'hours',
+          onViewChange: onViewChange,
+          focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
+          onFocusedViewChange: onFocusedViewChange,
+          views: views.filter(isInternalTimeView),
+          value: value,
+          defaultValue: defaultValue,
+          onChange: onChange,
+          className: className,
+          classes: classes,
+          disableFuture: disableFuture,
+          disablePast: disablePast,
+          minTime: minTime,
+          maxTime: maxTime,
+          shouldDisableTime: shouldDisableTime,
+          shouldDisableClock: shouldDisableClock,
+          minutesStep: minutesStep,
+          ampm: ampm,
+          components: components,
+          componentsProps: componentsProps,
+          slots: slots,
+          slotProps: slotProps,
+          readOnly: readOnly,
+          disabled: disabled,
+          sx: _extends({
+            borderBottom: 0,
+            width: 'auto',
+            [`.${multiSectionDigitalClockSectionClasses.root}`]: {
+              maxHeight: '100%'
+            }
+          }, Array.isArray(sx) ? sx : [sx]),
+          autoFocus: autoFocus,
+          disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
+          timeSteps: timeSteps,
+          skipDisabled: skipDisabled
+        })]
+      })]
+    }), isActionBarVisible && /*#__PURE__*/_jsx(Divider, {})]
+  });
+};

package/modern/dateTimeViewRenderers/index.js

@@ -0,0 +1 @@
+export { renderDesktopDateTimeView } from './dateTimeViewRenderers';

package/modern/dateViewRenderers/dateViewRenderers.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DateCalendar } from '../DateCalendar';
+import { isDatePickerView } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const isDatePickerView = view => view === 'year' || view === 'month' || view === 'day';
 export const renderDateViewCalendar = ({
   view,
   onViewChange,
@@ -45,7 +45,7 @@ export const renderDateViewCalendar = ({
   view: view,
   onViewChange: onViewChange,
   views: views.filter(isDatePickerView),
-  focusedView: focusedView,
+  focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
   onFocusedViewChange: onFocusedViewChange,
   value: value,
   defaultValue: defaultValue,

package/modern/{internals/components/icons → icons}/index.js

@@ -6,35 +6,35 @@ import * as React from 'react';
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const ArrowDropDown = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
 /**
  * @ignore - internal component.
  */
-export const ArrowLeft = 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 ArrowRight = 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 Calendar = 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 Clock = 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", {
@@ -45,14 +45,14 @@ export const Clock = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
 /**
  * @ignore - internal component.
  */
-export const DateRange = 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 Time = 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", {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.5.0
+ * @mui/x-date-pickers v6.6.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -47,4 +47,5 @@ export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
-export * from './models';
+export * from './models';
+export * from './icons';

package/modern/internals/components/DateTimeViewWrapper/DateTimeViewWrapper.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/material/styles';
+export const DateTimeViewWrapper = styled('div')({
+  display: 'flex',
+  margin: '0 auto'
+});

package/modern/internals/components/DateTimeViewWrapper/index.js

@@ -0,0 +1 @@
+export { DateTimeViewWrapper } from './DateTimeViewWrapper';

package/modern/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -10,7 +10,7 @@ import { useTheme, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useSlotProps } from '@mui/base/utils';
 import IconButton from '@mui/material/IconButton';
-import { ArrowLeft, ArrowRight } from '../icons';
+import { ArrowLeftIcon, ArrowRightIcon } from '../../../icons';
 import { getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -121,7 +121,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     }),
     className: classes.button
   });
-  const LeftArrowIcon = slots?.leftArrowIcon ?? ArrowLeft;
+  const LeftArrowIcon = slots?.leftArrowIcon ?? ArrowLeftIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps = useSlotProps({
       elementType: LeftArrowIcon,
@@ -132,7 +132,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       ownerState: undefined
     }),
     leftArrowIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const RightArrowIcon = slots?.rightArrowIcon ?? ArrowRight;
+  const RightArrowIcon = slots?.rightArrowIcon ?? ArrowRightIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps2 = useSlotProps({
       elementType: RightArrowIcon,

package/modern/internals/components/PickersToolbarButton.js

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

package/modern/internals/constants/dimensions.js

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

package/modern/internals/hooks/useField/useField.js

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

package/modern/internals/hooks/useField/useFieldState.js

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