@mui/x-date-pickers 6.4.0 → 6.6.0

package/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -7,7 +7,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';
@@ -47,14 +47,13 @@ var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker
     views: shouldRenderTimeInASingleColumn ? ['hours'] : views,
     slots: _extends({
       field: TimeField,
-      openPickerIcon: Clock
+      openPickerIcon: ClockIcon
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
       field: function field(ownerState) {
         var _defaultizedProps$slo;
         return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref: ref,
-          ampm: defaultizedProps.ampm
+          ref: ref
         });
       },
       toolbar: _extends({

package/legacy/MobileDateTimePicker/MobileDateTimePicker.js

@@ -37,8 +37,7 @@ var MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTime
       field: function field(ownerState) {
         var _defaultizedProps$slo;
         return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref: ref,
-          ampm: defaultizedProps.ampm
+          ref: ref
         });
       },
       toolbar: _extends({

package/legacy/MobileTimePicker/MobileTimePicker.js

@@ -33,8 +33,7 @@ var MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(i
       field: function field(ownerState) {
         var _defaultizedProps$slo;
         return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref: ref,
-          ampm: defaultizedProps.ampm
+          ref: ref
         });
       },
       toolbar: _extends({

package/legacy/MonthCalendar/MonthCalendar.js

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

package/legacy/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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -43,7 +43,8 @@ var 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)'
     }
   };
 });
@@ -58,7 +59,7 @@ var MultiSectionDigitalClockSectionItem = styled(MenuItem, {
   return {
     padding: 8,
     margin: '2px 4px',
-    width: 48,
+    width: MULTI_SECTION_CLOCK_SECTION_WIDTH,
     justifyContent: 'center',
     '&:first-of-type': {
       marginTop: 4

package/legacy/TimeField/TimeField.js

@@ -240,6 +240,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/legacy/TimeField/useTimeField.js

@@ -1,10 +1,9 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateTime } from '../internals/utils/validation/validateTime';
 import { useUtils } from '../internals/hooks/useUtils';
+import { splitFieldInternalAndForwardedProps } from '../internals/utils/fields';
 var useDefaultizedTimeField = function useDefaultizedTimeField(props) {
   var _props$ampm, _props$disablePast, _props$disableFuture, _props$format;
   var utils = useUtils();
@@ -17,55 +16,16 @@ var useDefaultizedTimeField = function useDefaultizedTimeField(props) {
   });
 };
 export var useTimeField = function useTimeField(_ref) {
-  var props = _ref.props,
+  var inProps = _ref.props,
     inputRef = _ref.inputRef;
-  var _useDefaultizedTimeFi = useDefaultizedTimeField(props),
-    value = _useDefaultizedTimeFi.value,
-    defaultValue = _useDefaultizedTimeFi.defaultValue,
-    format = _useDefaultizedTimeFi.format,
-    formatDensity = _useDefaultizedTimeFi.formatDensity,
-    shouldRespectLeadingZeros = _useDefaultizedTimeFi.shouldRespectLeadingZeros,
-    onChange = _useDefaultizedTimeFi.onChange,
-    readOnly = _useDefaultizedTimeFi.readOnly,
-    onError = _useDefaultizedTimeFi.onError,
-    disableFuture = _useDefaultizedTimeFi.disableFuture,
-    disablePast = _useDefaultizedTimeFi.disablePast,
-    minTime = _useDefaultizedTimeFi.minTime,
-    maxTime = _useDefaultizedTimeFi.maxTime,
-    minutesStep = _useDefaultizedTimeFi.minutesStep,
-    shouldDisableClock = _useDefaultizedTimeFi.shouldDisableClock,
-    shouldDisableTime = _useDefaultizedTimeFi.shouldDisableTime,
-    disableIgnoringDatePartForTimeValidation = _useDefaultizedTimeFi.disableIgnoringDatePartForTimeValidation,
-    selectedSections = _useDefaultizedTimeFi.selectedSections,
-    onSelectedSectionsChange = _useDefaultizedTimeFi.onSelectedSectionsChange,
-    ampm = _useDefaultizedTimeFi.ampm,
-    unstableFieldRef = _useDefaultizedTimeFi.unstableFieldRef,
-    other = _objectWithoutProperties(_useDefaultizedTimeFi, _excluded);
+  var props = useDefaultizedTimeField(inProps);
+  var _splitFieldInternalAn = splitFieldInternalAndForwardedProps(props, 'time'),
+    forwardedProps = _splitFieldInternalAn.forwardedProps,
+    internalProps = _splitFieldInternalAn.internalProps;
   return useField({
     inputRef: inputRef,
-    forwardedProps: other,
-    internalProps: {
-      value: value,
-      defaultValue: defaultValue,
-      format: format,
-      formatDensity: formatDensity,
-      shouldRespectLeadingZeros: shouldRespectLeadingZeros,
-      onChange: onChange,
-      readOnly: readOnly,
-      onError: onError,
-      disableFuture: disableFuture,
-      disablePast: disablePast,
-      minTime: minTime,
-      maxTime: maxTime,
-      minutesStep: minutesStep,
-      shouldDisableClock: shouldDisableClock,
-      shouldDisableTime: shouldDisableTime,
-      disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
-      selectedSections: selectedSections,
-      onSelectedSectionsChange: onSelectedSectionsChange,
-      ampm: ampm,
-      unstableFieldRef: unstableFieldRef
-    },
+    forwardedProps: forwardedProps,
+    internalProps: internalProps,
     valueManager: singleItemValueManager,
     fieldValueManager: singleItemFieldValueManager,
     validator: validateTime,

package/legacy/YearCalendar/YearCalendar.js

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

package/legacy/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -0,0 +1,147 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 var renderDesktopDateTimeView = function renderDesktopDateTimeView(_ref) {
+  var _resolveComponentProp, _resolveComponentProp2, _slotProps$actionBar;
+  var view = _ref.view,
+    onViewChange = _ref.onViewChange,
+    views = _ref.views,
+    focusedView = _ref.focusedView,
+    onFocusedViewChange = _ref.onFocusedViewChange,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    classes = _ref.classes,
+    disableFuture = _ref.disableFuture,
+    disablePast = _ref.disablePast,
+    minDate = _ref.minDate,
+    minTime = _ref.minTime,
+    maxDate = _ref.maxDate,
+    maxTime = _ref.maxTime,
+    shouldDisableDate = _ref.shouldDisableDate,
+    shouldDisableMonth = _ref.shouldDisableMonth,
+    shouldDisableYear = _ref.shouldDisableYear,
+    shouldDisableTime = _ref.shouldDisableTime,
+    shouldDisableClock = _ref.shouldDisableClock,
+    reduceAnimations = _ref.reduceAnimations,
+    minutesStep = _ref.minutesStep,
+    ampm = _ref.ampm,
+    onMonthChange = _ref.onMonthChange,
+    monthsPerRow = _ref.monthsPerRow,
+    onYearChange = _ref.onYearChange,
+    yearsPerRow = _ref.yearsPerRow,
+    defaultCalendarMonth = _ref.defaultCalendarMonth,
+    components = _ref.components,
+    componentsProps = _ref.componentsProps,
+    slots = _ref.slots,
+    slotProps = _ref.slotProps,
+    loading = _ref.loading,
+    renderLoading = _ref.renderLoading,
+    disableHighlightToday = _ref.disableHighlightToday,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    showDaysOutsideCurrentMonth = _ref.showDaysOutsideCurrentMonth,
+    dayOfWeekFormatter = _ref.dayOfWeekFormatter,
+    sx = _ref.sx,
+    autoFocus = _ref.autoFocus,
+    fixedWeekNumber = _ref.fixedWeekNumber,
+    displayWeekNumber = _ref.displayWeekNumber,
+    disableIgnoringDatePartForTimeValidation = _ref.disableIgnoringDatePartForTimeValidation,
+    timeSteps = _ref.timeSteps,
+    skipDisabled = _ref.skipDisabled,
+    timeViewsCount = _ref.timeViewsCount;
+  var isActionBarVisible = !!((_resolveComponentProp = resolveComponentProps((_slotProps$actionBar = slotProps == null ? void 0 : slotProps.actionBar) != null ? _slotProps$actionBar : componentsProps == null ? void 0 : componentsProps.actionBar, {})) != null && (_resolveComponentProp2 = _resolveComponentProp.actions) != null && _resolveComponentProp2.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(_defineProperty({
+            borderBottom: 0,
+            width: 'auto'
+          }, ".".concat(multiSectionDigitalClockSectionClasses.root), {
+            maxHeight: '100%'
+          }), Array.isArray(sx) ? sx : [sx]),
+          autoFocus: autoFocus,
+          disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
+          timeSteps: timeSteps,
+          skipDisabled: skipDisabled
+        })]
+      })]
+    }), isActionBarVisible && /*#__PURE__*/_jsx(Divider, {})]
+  });
+};

package/legacy/dateTimeViewRenderers/index.js

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

package/legacy/dateViewRenderers/dateViewRenderers.js

@@ -1,9 +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";
-var isDatePickerView = function isDatePickerView(view) {
-  return view === 'year' || view === 'month' || view === 'day';
-};
 export var renderDateViewCalendar = function renderDateViewCalendar(_ref) {
   var view = _ref.view,
     onViewChange = _ref.onViewChange,
@@ -47,7 +45,7 @@ export var renderDateViewCalendar = function renderDateViewCalendar(_ref) {
     view: view,
     onViewChange: onViewChange,
     views: views.filter(isDatePickerView),
-    focusedView: focusedView,
+    focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
     onFocusedViewChange: onFocusedViewChange,
     value: value,
     defaultValue: defaultValue,

package/legacy/{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 var ArrowDropDown = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
 /**
  * @ignore - internal component.
  */
-export var ArrowLeft = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var 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 var ArrowRight = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var 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 var Calendar = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var 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 var Clock = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+export var 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 var Clock = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
 /**
  * @ignore - internal component.
  */
-export var DateRange = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var 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 var Time = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+export var 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/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.4.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/legacy/internals/components/DateTimeViewWrapper/DateTimeViewWrapper.js

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

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

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

package/legacy/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -11,7 +11,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";
@@ -130,7 +130,7 @@ export var PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Pickers
     }),
     className: classes.button
   });
-  var LeftArrowIcon = (_slots$leftArrowIcon = slots == null ? void 0 : slots.leftArrowIcon) != null ? _slots$leftArrowIcon : ArrowLeft;
+  var LeftArrowIcon = (_slots$leftArrowIcon = slots == null ? void 0 : slots.leftArrowIcon) != null ? _slots$leftArrowIcon : ArrowLeftIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   var _useSlotProps = useSlotProps({
       elementType: LeftArrowIcon,
@@ -142,7 +142,7 @@ export var PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Pickers
     }),
     leftArrowIconOwnerState = _useSlotProps.ownerState,
     leftArrowIconProps = _objectWithoutProperties(_useSlotProps, _excluded2);
-  var RightArrowIcon = (_slots$rightArrowIcon = slots == null ? void 0 : slots.rightArrowIcon) != null ? _slots$rightArrowIcon : ArrowRight;
+  var RightArrowIcon = (_slots$rightArrowIcon = slots == null ? void 0 : slots.rightArrowIcon) != null ? _slots$rightArrowIcon : ArrowRightIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   var _useSlotProps2 = useSlotProps({
       elementType: RightArrowIcon,

package/legacy/internals/components/PickersToolbarButton.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant"];
+var _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant", "width"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Button from '@mui/material/Button';
@@ -38,13 +38,18 @@ export var PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Pickers
     typographyClassName = props.typographyClassName,
     value = props.value,
     variant = props.variant,
+    width = props.width,
     other = _objectWithoutProperties(props, _excluded);
   var classes = useUtilityClasses(props);
   return /*#__PURE__*/_jsx(PickersToolbarButtonRoot, _extends({
     variant: "text",
     ref: ref,
     className: clsx(className, classes.root)
-  }, other, {
+  }, width ? {
+    sx: {
+      width: width
+    }
+  } : {}, other, {
     children: /*#__PURE__*/_jsx(PickersToolbarText, {
       align: align,
       className: typographyClassName,

package/legacy/internals/constants/dimensions.js

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

package/legacy/internals/hooks/useField/useField.js

@@ -67,10 +67,18 @@ export var useField = function useField(params) {
       return;
     }
     var browserStartIndex = (_selectionStart = inputRef.current.selectionStart) != null ? _selectionStart : 0;
-    var nextSectionIndex = browserStartIndex <= state.sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
-    : state.sections.findIndex(function (section) {
-      return section.startInInput - section.startSeparator.length > browserStartIndex;
-    });
+    var nextSectionIndex;
+    if (browserStartIndex <= state.sections[0].startInInput) {
+      // Special case if browser index is in invisible characters at the beginning
+      nextSectionIndex = 1;
+    } else if (browserStartIndex >= state.sections[state.sections.length - 1].endInInput) {
+      // If the click is after the last character of the input, then we want to select the 1st section.
+      nextSectionIndex = 1;
+    } else {
+      nextSectionIndex = state.sections.findIndex(function (section) {
+        return section.startInInput - section.startSeparator.length > browserStartIndex;
+      });
+    }
     var sectionIndex = nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
     _setSelectedSections(sectionIndex);
   };
@@ -160,7 +168,7 @@ export var useField = function useField(params) {
       return;
     }
     var 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 {
       var prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections, isRTL));
@@ -183,7 +191,7 @@ export var useField = function useField(params) {
 
       // The active section being selected, the browser has replaced its value with the key pressed by the user.
       var 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);
@@ -299,7 +307,12 @@ export var useField = function 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
       var 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/legacy/internals/hooks/useField/useFieldState.js

@@ -6,6 +6,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 var useFieldState = function useFieldState(params) {
   var _ref;
   var utils = useUtils();
@@ -21,6 +22,7 @@ export var useFieldState = function useFieldState(params) {
     _params$internalProps = params.internalProps,
     valueProp = _params$internalProps.value,
     defaultValue = _params$internalProps.defaultValue,
+    referenceDateProp = _params$internalProps.referenceDate,
     onChange = _params$internalProps.onChange,
     format = _params$internalProps.format,
     _params$internalProps2 = _params$internalProps.formatDensity,
@@ -46,12 +48,24 @@ export var useFieldState = function useFieldState(params) {
   var _React$useState = React.useState(function () {
       var sections = getSectionsFromValue(valueFromTheOutside);
       validateSections(sections, valueType);
-      return {
+      var stateWithoutReferenceDate = {
         sections: sections,
         value: valueFromTheOutside,
-        referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, valueManager.getTodayValue(utils, valueType)),
+        referenceValue: valueManager.emptyValue,
         tempValueStrAndroid: null
       };
+      var granularity = getSectionTypeGranularity(sections);
+      var referenceValue = valueManager.getInitialReferenceValue({
+        referenceDate: referenceDateProp,
+        value: valueFromTheOutside,
+        valueType: valueType,
+        utils: utils,
+        props: internalProps,
+        granularity: granularity
+      });
+      return _extends({}, stateWithoutReferenceDate, {
+        referenceValue: referenceValue
+      });
     }),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     state = _React$useState2[0],
@@ -271,7 +285,13 @@ export var useFieldState = function useFieldState(params) {
     });
   };
   React.useEffect(function () {
+    var 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(function (prevState) {
         return _extends({}, prevState, {
           value: valueFromTheOutside,