@mui/x-date-pickers 6.11.2 → 6.12.1

package/node/StaticDatePicker/StaticDatePicker.js

@@ -211,9 +211,14 @@ StaticDatePicker.propTypes = {
   readOnly: _propTypes.default.bool,
   /**
    * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: _propTypes.default.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate: _propTypes.default.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -259,9 +259,14 @@ StaticDateTimePicker.propTypes = {
   readOnly: _propTypes.default.bool,
   /**
    * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: _propTypes.default.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate: _propTypes.default.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/node/StaticTimePicker/StaticTimePicker.js

@@ -186,9 +186,14 @@ StaticTimePicker.propTypes = {
   readOnly: _propTypes.default.bool,
   /**
    * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: _propTypes.default.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate: _propTypes.default.any,
   /**
    * Disable specific clock time.
    * @param {number} clockValue The value to check.

package/node/TimeField/TimeField.js

@@ -234,10 +234,6 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onClick: _propTypes.default.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/node/TimePicker/TimePicker.js

@@ -225,9 +225,14 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   readOnly: _propTypes.default.bool,
   /**
    * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: _propTypes.default.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate: _propTypes.default.any,
   /**
    * The currently selected sections.
    * This prop accept four formats:

package/node/YearCalendar/YearCalendar.js

@@ -60,7 +60,10 @@ const YearCalendarRoot = (0, _styles.styled)('div', {
   height: '100%',
   padding: '0 4px',
   width: 320,
-  maxHeight: 304
+  maxHeight: 304,
+  // avoid padding increasing width over defined
+  boxSizing: 'border-box',
+  position: 'relative'
 });
 const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps, ref) {
   const props = useYearCalendarDefaultizedProps(inProps, 'MuiYearCalendar');

package/node/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -25,6 +25,7 @@ const renderDesktopDateTimeView = ({
   onFocusedViewChange,
   value,
   defaultValue,
+  referenceDate,
   onChange,
   className,
   classes,
@@ -79,6 +80,7 @@ const renderDesktopDateTimeView = ({
         onFocusedViewChange: onFocusedViewChange,
         value: value,
         defaultValue: defaultValue,
+        referenceDate: referenceDate,
         onChange: onChange,
         className: className,
         classes: classes,
@@ -122,6 +124,7 @@ const renderDesktopDateTimeView = ({
           views: views.filter(_timeUtils.isInternalTimeView),
           value: value,
           defaultValue: defaultValue,
+          referenceDate: referenceDate,
           onChange: onChange,
           className: className,
           classes: classes,

package/node/dateViewRenderers/dateViewRenderers.js

@@ -18,6 +18,7 @@ const renderDateViewCalendar = ({
   onFocusedViewChange,
   value,
   defaultValue,
+  referenceDate,
   onChange,
   className,
   classes,
@@ -58,6 +59,7 @@ const renderDateViewCalendar = ({
   onFocusedViewChange: onFocusedViewChange,
   value: value,
   defaultValue: defaultValue,
+  referenceDate: referenceDate,
   onChange: onChange,
   className: className,
   classes: classes,

package/node/index.js

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

package/node/internals/components/PickersPopper.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PickersPopper = PickersPopper;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/base/utils");
@@ -19,6 +20,7 @@ var _pickersPopperClasses = require("./pickersPopperClasses");
 var _utils3 = require("../utils/utils");
 var _useDefaultReduceAnimations = require("../hooks/useDefaultReduceAnimations");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["PaperComponent", "popperPlacement", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -47,9 +49,9 @@ const PickersPopperPaper = (0, _styles.styled)(_Paper.default, {
 })(({
   ownerState
 }) => (0, _extends2.default)({
-  transformOrigin: 'top center',
-  outline: 0
-}, ownerState.placement === 'top' && {
+  outline: 0,
+  transformOrigin: 'top center'
+}, ownerState.placement.includes('top') && {
   transformOrigin: 'bottom center'
 }));
 function clickedRootScrollbar(event, doc) {
@@ -167,6 +169,47 @@ function useClickAwayListener(active, onClickAway) {
   }, [active, handleClickAway]);
   return [nodeRef, handleSynthetic, handleSynthetic];
 }
+const PickersPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      PaperComponent,
+      popperPlacement,
+      ownerState: inOwnerState,
+      children,
+      paperSlotProps,
+      paperClasses,
+      onPaperClick,
+      onPaperTouchStart
+      // picks up the style props provided by `Transition`
+      // https://mui.com/material-ui/transitions/#child-requirement
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const ownerState = (0, _extends2.default)({}, inOwnerState, {
+    placement: popperPlacement
+  });
+  const paperProps = (0, _utils.useSlotProps)({
+    elementType: PaperComponent,
+    externalSlotProps: paperSlotProps,
+    additionalProps: {
+      tabIndex: -1,
+      elevation: 8,
+      ref
+    },
+    className: paperClasses,
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperComponent, (0, _extends2.default)({}, other, paperProps, {
+    onClick: event => {
+      onPaperClick(event);
+      paperProps.onClick?.(event);
+    },
+    onTouchStart: event => {
+      onPaperTouchStart(event);
+      paperProps.onTouchStart?.(event);
+    },
+    ownerState: ownerState,
+    children: children
+  }));
+});
 function PickersPopper(inProps) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,
@@ -233,18 +276,6 @@ function PickersPopper(inProps) {
   const Transition = slots?.desktopTransition ?? reduceAnimations ? _Fade.default : _Grow.default;
   const TrapFocus = slots?.desktopTrapFocus ?? _Unstable_TrapFocus.default;
   const Paper = slots?.desktopPaper ?? PickersPopperPaper;
-  const paperProps = (0, _utils.useSlotProps)({
-    elementType: Paper,
-    externalSlotProps: slotProps?.desktopPaper,
-    additionalProps: {
-      tabIndex: -1,
-      elevation: 8,
-      ref: handlePaperRef
-    },
-    className: classes.paper,
-    ownerState: {} // Is overridden below to use `placement
-  });
-
   const Popper = slots?.popper ?? PickersPopperRoot;
   const popperProps = (0, _utils.useSlotProps)({
     elementType: Popper,
@@ -276,20 +307,17 @@ function PickersPopper(inProps) {
       isEnabled: () => true
     }, slotProps?.desktopTrapFocus, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, (0, _extends2.default)({}, TransitionProps, slotProps?.desktopTransition, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Paper, (0, _extends2.default)({}, paperProps, {
-          onClick: event => {
-            onPaperClick(event);
-            paperProps.onClick?.(event);
-          },
-          onTouchStart: event => {
-            onPaperTouchStart(event);
-            paperProps.onTouchStart?.(event);
-          },
-          ownerState: (0, _extends2.default)({}, ownerState, {
-            placement: popperPlacement
-          }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersPopperPaperWrapper, {
+          PaperComponent: Paper,
+          ownerState: ownerState,
+          popperPlacement: popperPlacement,
+          ref: handlePaperRef,
+          onPaperClick: onPaperClick,
+          onPaperTouchStart: onPaperTouchStart,
+          paperClasses: classes.paper,
+          paperSlotProps: slotProps?.desktopPaper,
           children: children
-        }))
+        })
       }))
     }))
   }));

package/node/internals/demo/DemoContainer.js

@@ -41,6 +41,10 @@ const getSupportedSectionFromChildName = childName => {
   }
   return 'time';
 };
+/**
+ * WARNING: This is an internal component used in documentation to achieve a desired layout.
+ * Please do not use it in your application.
+ */
 function DemoItem(props) {
   const {
     label,
@@ -71,6 +75,11 @@ function DemoItem(props) {
     }), children]
   });
 }
+
+/**
+ * WARNING: This is an internal component used in documentation to achieve a desired layout.
+ * Please do not use it in your application.
+ */
 function DemoContainer(props) {
   const {
     children,

package/node/internals/hooks/useDefaultReduceAnimations.js

@@ -4,15 +4,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useDefaultReduceAnimations = exports.defaultReduceAnimations = void 0;
+exports.useDefaultReduceAnimations = exports.slowAnimationDevices = void 0;
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 const PREFERS_REDUCED_MOTION = '@media (prefers-reduced-motion: reduce)';
-const defaultReduceAnimations = typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent);
-exports.defaultReduceAnimations = defaultReduceAnimations;
+
+// detect if user agent has Android version < 10 or iOS version < 13
+const mobileVersionMatches = typeof navigator !== 'undefined' && navigator.userAgent.match(/android\s(\d+)|OS\s(\d+)/i);
+const androidVersion = mobileVersionMatches && mobileVersionMatches[1] ? parseInt(mobileVersionMatches[1], 10) : null;
+const iOSVersion = mobileVersionMatches && mobileVersionMatches[2] ? parseInt(mobileVersionMatches[2], 10) : null;
+const slowAnimationDevices = androidVersion && androidVersion < 10 || iOSVersion && iOSVersion < 13 || false;
+exports.slowAnimationDevices = slowAnimationDevices;
 const useDefaultReduceAnimations = () => {
   const prefersReduced = (0, _useMediaQuery.default)(PREFERS_REDUCED_MOTION, {
     defaultMatches: false
   });
-  return prefersReduced || defaultReduceAnimations;
+  return prefersReduced || slowAnimationDevices;
 };
 exports.useDefaultReduceAnimations = useDefaultReduceAnimations;

package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -88,7 +88,7 @@ const useDesktopPicker = _ref => {
       externalSlotProps: innerSlotProps?.openPickerButton,
       additionalProps: {
         disabled: disabled || readOnly,
-        onClick: actions.onOpen,
+        onClick: open ? actions.onClose : actions.onOpen,
         'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils),
         edge: inputAdornmentProps.position
       },

package/node/internals/hooks/useField/useField.utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateSections = exports.splitFormatIntoSections = exports.mergeDateIntoReferenceDate = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionOrder = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionFormatHaveLeadingZeros = exports.createDateStrForInputFromSections = exports.cleanString = exports.cleanLeadingZeros = exports.cleanDigitSectionValue = exports.clampDaySectionIfPossible = exports.changeSectionValueFormat = exports.adjustSectionValue = exports.addPositionPropertiesToSections = void 0;
+exports.validateSections = exports.splitFormatIntoSections = exports.mergeDateIntoReferenceDate = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionOrder = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionFormatHaveLeadingZeros = exports.createDateStrForInputFromSections = exports.cleanString = exports.cleanLeadingZeros = exports.cleanDigitSectionValue = exports.changeSectionValueFormat = exports.adjustSectionValue = exports.addPositionPropertiesToSections = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _dateUtils = require("../../utils/date-utils");
 const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
@@ -670,55 +670,6 @@ const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom, section
 exports.mergeDateIntoReferenceDate = mergeDateIntoReferenceDate;
 const isAndroid = () => navigator.userAgent.toLowerCase().indexOf('android') > -1;
 exports.isAndroid = isAndroid;
-const clampDaySectionIfPossible = (utils, timezone, sections, sectionsValueBoundaries) => {
-  // We can only clamp the day value if:
-  // 1. if all the sections are filled (except the week day section which can be empty)
-  // 2. there is a day section
-  const canClamp = sections.every(section => section.type === 'weekDay' || section.value !== '') && sections.some(section => section.type === 'day');
-  if (!canClamp) {
-    return null;
-  }
-
-  // We try to generate a valid date representing the start of the month of the invalid date typed by the user.
-  const sectionsForStartOfMonth = sections.map(section => {
-    if (section.type !== 'day') {
-      return section;
-    }
-    const dayBoundaries = sectionsValueBoundaries.day({
-      currentDate: null,
-      format: section.format,
-      contentType: section.contentType
-    });
-    return (0, _extends2.default)({}, section, {
-      value: cleanDigitSectionValue(utils, timezone, dayBoundaries.minimum, dayBoundaries, section)
-    });
-  });
-  const startOfMonth = getDateFromDateSections(utils, sectionsForStartOfMonth);
-
-  // Even the start of the month is invalid, we probably have other invalid sections, the clamping failed.
-  if (startOfMonth == null || !utils.isValid(startOfMonth)) {
-    return null;
-  }
-
-  // The only invalid section was the day of the month, we replace its value with the maximum boundary for the correct month.
-  return sections.map(section => {
-    if (section.type !== 'day') {
-      return section;
-    }
-    const dayBoundaries = sectionsValueBoundaries.day({
-      currentDate: startOfMonth,
-      format: section.format,
-      contentType: section.contentType
-    });
-    if (Number(section.value) <= dayBoundaries.maximum) {
-      return section;
-    }
-    return (0, _extends2.default)({}, section, {
-      value: dayBoundaries.maximum.toString()
-    });
-  });
-};
-exports.clampDaySectionIfPossible = clampDaySectionIfPossible;
 const getSectionOrder = (sections, isRTL) => {
   const neighbors = {};
   if (!isRTL) {

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

@@ -218,21 +218,7 @@ const useFieldState = params => {
     const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
     const newSections = setSectionValue(selectedSectionIndexes.startIndex, newSectionValue);
     const newActiveDateSections = activeDateManager.getSections(newSections);
-    let newActiveDate = (0, _useField.getDateFromDateSections)(utils, newActiveDateSections);
-    let shouldRegenSections = false;
-
-    /**
-     * If the date is invalid,
-     * Then we can try to clamp the day section to see if that produces a valid date.
-     * This can be useful if the month has fewer days than the day value currently provided.
-     */
-    if (!utils.isValid(newActiveDate)) {
-      const clampedSections = (0, _useField.clampDaySectionIfPossible)(utils, timezone, newActiveDateSections, sectionsValueBoundaries);
-      if (clampedSections != null) {
-        shouldRegenSections = true;
-        newActiveDate = (0, _useField.getDateFromDateSections)(utils, clampedSections);
-      }
-    }
+    const newActiveDate = (0, _useField.getDateFromDateSections)(utils, newActiveDateSections);
     let values;
     let shouldPublish;
 
@@ -250,22 +236,16 @@ const useFieldState = params => {
       shouldPublish = (newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.date != null && !utils.isValid(activeDateManager.date));
     }
 
-    /**
-     * If the value has been modified (to clamp the day).
-     * Then we need to re-generate the sections to make sure they also have this change.
-     */
-    const sections = shouldRegenSections ? getSectionsFromValue(values.value, state.sections) : newSections;
-
     /**
      * Publish or update the internal state with the new value and sections.
      */
     if (shouldPublish) {
       return publishValue((0, _extends2.default)({}, values, {
-        sections
+        sections: newSections
       }));
     }
     return setState(prevState => (0, _extends2.default)({}, prevState, values, {
-      sections,
+      sections: newSections,
       tempValueStrAndroid: null
     }));
   };

package/node/timeViewRenderers/timeViewRenderers.js

@@ -20,6 +20,7 @@ const renderTimeViewClock = ({
   views,
   value,
   defaultValue,
+  referenceDate,
   onChange,
   className,
   classes,
@@ -51,6 +52,7 @@ const renderTimeViewClock = ({
   views: views.filter(_timeUtils.isTimeView),
   value: value,
   defaultValue: defaultValue,
+  referenceDate: referenceDate,
   onChange: onChange,
   className: className,
   classes: classes,
@@ -84,6 +86,7 @@ const renderDigitalClockTimeView = ({
   views,
   value,
   defaultValue,
+  referenceDate,
   onChange,
   className,
   classes,
@@ -115,6 +118,7 @@ const renderDigitalClockTimeView = ({
   views: views.filter(_timeUtils.isTimeView),
   value: value,
   defaultValue: defaultValue,
+  referenceDate: referenceDate,
   onChange: onChange,
   className: className,
   classes: classes,
@@ -148,6 +152,7 @@ const renderMultiSectionDigitalClockTimeView = ({
   views,
   value,
   defaultValue,
+  referenceDate,
   onChange,
   className,
   classes,
@@ -179,6 +184,7 @@ const renderMultiSectionDigitalClockTimeView = ({
   views: views.filter(_timeUtils.isTimeView),
   value: value,
   defaultValue: defaultValue,
+  referenceDate: referenceDate,
   onChange: onChange,
   className: className,
   classes: classes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "6.11.2",
+  "version": "6.12.1",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,8 +33,8 @@
     "directory": "packages/x-date-pickers"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.6",
-    "@mui/utils": "^5.14.5",
+    "@babel/runtime": "^7.22.11",
+    "@mui/utils": "^5.14.7",
     "@types/react-transition-group": "^4.4.6",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1",

package/tests/describeValue/testControlledUnControlled.js

@@ -74,7 +74,7 @@ export const testControlledUnControlled = (ElementToTest, options) => {
         const [value, setValue] = React.useState((props == null ? void 0 : props.value) || null);
         const handleChange = React.useCallback(newValue => {
           setValue(newValue);
-          props == null ? void 0 : props.onChange(newValue);
+          props == null || props.onChange(newValue);
         }, [props]);
         return {
           value,

package/timeViewRenderers/timeViewRenderers.d.ts

@@ -11,6 +11,6 @@ export type TimeViewRendererProps<TView extends TimeViewWithMeridiem, TComponent
     onViewChange?: (view: TView) => void;
     views: readonly TView[];
 };
-export declare const renderTimeViewClock: <TDate extends unknown>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, shouldDisableClock, minutesStep, ampm, ampmInClock, components, componentsProps, slots, slotProps, readOnly, disabled, sx, autoFocus, showViewSwitcher, disableIgnoringDatePartForTimeValidation, timezone, }: TimeViewRendererProps<TimeView, TimeClockProps<TDate, TimeView>>) => React.JSX.Element;
-export declare const renderDigitalClockTimeView: <TDate extends unknown>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, shouldDisableClock, minutesStep, ampm, components, componentsProps, slots, slotProps, readOnly, disabled, sx, autoFocus, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timezone, }: TimeViewRendererProps<"hours", Omit<DigitalClockProps<TDate>, "timeStep"> & Pick<TimePickerProps<TDate>, "timeSteps">>) => React.JSX.Element;
-export declare const renderMultiSectionDigitalClockTimeView: <TDate extends unknown>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, shouldDisableClock, minutesStep, ampm, components, componentsProps, slots, slotProps, readOnly, disabled, sx, autoFocus, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timezone, }: TimeViewRendererProps<TimeViewWithMeridiem, MultiSectionDigitalClockProps<TDate>>) => React.JSX.Element;
+export declare const renderTimeViewClock: <TDate extends unknown>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, shouldDisableClock, minutesStep, ampm, ampmInClock, components, componentsProps, slots, slotProps, readOnly, disabled, sx, autoFocus, showViewSwitcher, disableIgnoringDatePartForTimeValidation, timezone, }: TimeViewRendererProps<TimeView, TimeClockProps<TDate, TimeView>>) => React.JSX.Element;
+export declare const renderDigitalClockTimeView: <TDate extends unknown>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, shouldDisableClock, minutesStep, ampm, components, componentsProps, slots, slotProps, readOnly, disabled, sx, autoFocus, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timezone, }: TimeViewRendererProps<"hours", Omit<DigitalClockProps<TDate>, "timeStep"> & Pick<TimePickerProps<TDate>, "timeSteps">>) => React.JSX.Element;
+export declare const renderMultiSectionDigitalClockTimeView: <TDate extends unknown>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, shouldDisableClock, minutesStep, ampm, components, componentsProps, slots, slotProps, readOnly, disabled, sx, autoFocus, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timezone, }: TimeViewRendererProps<TimeViewWithMeridiem, MultiSectionDigitalClockProps<TDate>>) => React.JSX.Element;

package/timeViewRenderers/timeViewRenderers.js

@@ -12,6 +12,7 @@ export const renderTimeViewClock = ({
   views,
   value,
   defaultValue,
+  referenceDate,
   onChange,
   className,
   classes,
@@ -43,6 +44,7 @@ export const renderTimeViewClock = ({
   views: views.filter(isTimeView),
   value: value,
   defaultValue: defaultValue,
+  referenceDate: referenceDate,
   onChange: onChange,
   className: className,
   classes: classes,
@@ -75,6 +77,7 @@ export const renderDigitalClockTimeView = ({
   views,
   value,
   defaultValue,
+  referenceDate,
   onChange,
   className,
   classes,
@@ -106,6 +109,7 @@ export const renderDigitalClockTimeView = ({
   views: views.filter(isTimeView),
   value: value,
   defaultValue: defaultValue,
+  referenceDate: referenceDate,
   onChange: onChange,
   className: className,
   classes: classes,
@@ -138,6 +142,7 @@ export const renderMultiSectionDigitalClockTimeView = ({
   views,
   value,
   defaultValue,
+  referenceDate,
   onChange,
   className,
   classes,
@@ -169,6 +174,7 @@ export const renderMultiSectionDigitalClockTimeView = ({
   views: views.filter(isTimeView),
   value: value,
   defaultValue: defaultValue,
+  referenceDate: referenceDate,
   onChange: onChange,
   className: className,
   classes: classes,