@mui/x-date-pickers 7.22.3 → 8.0.0-alpha.1

package/modern/hooks/usePickerContext.js

@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+import { PickerContext } from "../internals/components/PickerProvider.js";
+
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ */
+export const usePickerContext = () => {
+  const value = React.useContext(PickerContext);
+  if (value == null) {
+    throw new Error(['MUI X: The `usePickerContext` can only be called in fields that are used as a slot of a picker component'].join('\n'));
+  }
+  return value;
+};

package/{hooks/usePickersTranslations.js → modern/hooks/usePickerTranslations.js}

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

package/modern/index.js

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

package/modern/internals/components/PickerProvider.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { LocalizationProvider } from "../../LocalizationProvider/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PickerContext = /*#__PURE__*/React.createContext(null);
+export const PickerPrivateContext = /*#__PURE__*/React.createContext({
+  ownerState: {
+    isPickerDisabled: false,
+    isPickerReadOnly: false,
+    isPickerValueEmpty: false,
+    isPickerOpen: false,
+    pickerVariant: 'desktop',
+    pickerOrientation: 'portrait'
+  }
+});
+
+/**
+ * Provides the context for the various parts of a picker component:
+ * - contextValue: the context for the picker sub-components.
+ * - localizationProvider: the translations passed through the props and through a parent LocalizationProvider.
+ *
+ * @ignore - do not document.
+ */
+export function PickerProvider(props) {
+  const {
+    contextValue,
+    privateContextValue,
+    localeText,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(PickerContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(PickerPrivateContext.Provider, {
+      value: privateContextValue,
+      children: /*#__PURE__*/_jsx(LocalizationProvider, {
+        localeText: localeText,
+        children: children
+      })
+    })
+  });
+}

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

@@ -12,7 +12,7 @@ import useId from '@mui/utils/useId';
 import { PickersPopper } from "../../components/PickersPopper.js";
 import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
-import { PickersProvider } from "../../components/PickersProvider.js";
+import { PickerProvider } from "../../components/PickerProvider.js";
 
 /**
  * Hook managing all the single-date desktop pickers:
@@ -56,17 +56,18 @@ export const useDesktopPicker = _ref => {
     actions,
     hasUIView,
     layoutProps,
+    providerProps,
     renderCurrentView,
     shouldRestoreFocus,
     fieldProps: pickerFieldProps,
-    contextValue,
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
+    localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'desktop'
+    variant: 'desktop'
   }));
   const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;
   const _useSlotProps = useSlotProps({
@@ -75,7 +76,7 @@ export const useDesktopPicker = _ref => {
       additionalProps: {
         position: 'end'
       },
-      ownerState: props
+      ownerState
     }),
     inputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const OpenPickerButton = slots.openPickerButton ?? IconButton;
@@ -88,7 +89,7 @@ export const useDesktopPicker = _ref => {
         'aria-label': getOpenDialogAriaText(pickerFieldProps.value),
         edge: inputAdornmentProps.position
       },
-      ownerState: props
+      ownerState
     }),
     openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
   const OpenPickerIcon = slots.openPickerIcon;
@@ -101,27 +102,32 @@ export const useDesktopPicker = _ref => {
   const fieldProps = useSlotProps({
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
-    additionalProps: _extends({}, pickerFieldProps, isToolbarHidden && {
-      id: labelId
-    }, {
+    additionalProps: _extends({
+      // Internal props
       readOnly,
       disabled,
-      className,
-      sx,
       format,
       formatDensity,
       enableAccessibleFieldDOMStructure,
       selectedSections,
       onSelectedSectionsChange,
       timezone,
+      autoFocus: autoFocus && !props.open
+    }, pickerFieldProps, {
+      // onChange and value
+
+      // Forwarded props
+      className,
+      sx,
       label,
       name,
-      autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined
-    }, inputRef ? {
+    }, isToolbarHidden && {
+      id: labelId
+    }, !!inputRef && {
       inputRef
-    } : {}),
-    ownerState: props
+    }),
+    ownerState
   });
 
   // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
@@ -159,9 +165,7 @@ export const useDesktopPicker = _ref => {
     }, innerSlotProps?.popper)
   });
   const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/_jsxs(PickersProvider, {
-    contextValue: contextValue,
-    localeText: localeText,
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
     children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
       slots: slotsForField,
       slotProps: slotProps,
@@ -182,7 +186,7 @@ export const useDesktopPicker = _ref => {
         children: renderCurrentView()
       }))
     }))]
-  });
+  }));
   return {
     renderPicker
   };

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

@@ -17,7 +17,7 @@ export const useField = params => {
     internalProps: {
       unstableFieldRef,
       minutesStep,
-      enableAccessibleFieldDOMStructure = false,
+      enableAccessibleFieldDOMStructure = true,
       disabled = false,
       readOnly = false
     },

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import { useRtl } from '@mui/system/RtlProvider';
-import { usePickersTranslations } from "../../../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../../../hooks/usePickerTranslations.js";
 import { useUtils, useLocalizationContext } from "../useUtils.js";
 import { mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, parseSelectedSections, getLocalizedDigits } from "./useField.utils.js";
 import { buildSectionsFromFormat } from "./buildSectionsFromFormat.js";
@@ -10,7 +10,7 @@ import { useValueWithTimezone } from "../useValueWithTimezone.js";
 import { getSectionTypeGranularity } from "../../utils/getDefaultReferenceDate.js";
 export const useFieldState = params => {
   const utils = useUtils();
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const adapter = useLocalizationContext();
   const isRtl = useRtl();
   const {
@@ -30,7 +30,7 @@ export const useFieldState = params => {
       onSelectedSectionsChange,
       shouldRespectLeadingZeros = false,
       timezone: timezoneProp,
-      enableAccessibleFieldDOMStructure = false
+      enableAccessibleFieldDOMStructure = true
     }
   } = params;
   const {
@@ -41,6 +41,7 @@ export const useFieldState = params => {
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager
   });

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

@@ -5,7 +5,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useId from '@mui/utils/useId';
 import { getSectionValueNow, getSectionValueText, parseSelectedSections } from "./useField.utils.js";
 import { getActiveElement } from "../../utils/utils.js";
-import { usePickersTranslations } from "../../../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../../../hooks/usePickerTranslations.js";
 import { useUtils } from "../useUtils.js";
 export const useFieldV7TextField = params => {
   const {
@@ -39,7 +39,7 @@ export const useFieldV7TextField = params => {
   } = params;
   const sectionListRef = React.useRef(null);
   const handleSectionListRef = useForkRef(inSectionListRef, sectionListRef);
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const utils = useUtils();
   const id = useId();
   const [focused, setFocused] = React.useState(false);
@@ -198,8 +198,9 @@ export const useFieldV7TextField = params => {
     if (focused || !sectionListRef.current) {
       return;
     }
+    const activeElement = getActiveElement(document);
     setFocused(true);
-    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(getActiveElement(document)) != null;
+    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(activeElement) != null;
     if (!isFocusInsideASection) {
       setSelectedSections(sectionOrder.startIndex);
     }

package/modern/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -9,7 +9,7 @@ import { PickersModalDialog } from "../../components/PickersModalDialog.js";
 import { usePicker } from "../usePicker/index.js";
 import { onSpaceOrEnter } from "../../utils/utils.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
-import { PickersProvider } from "../../components/PickersProvider.js";
+import { PickerProvider } from "../../components/PickerProvider.js";
 
 /**
  * Hook managing all the single-date mobile pickers:
@@ -49,42 +49,49 @@ export const useMobilePicker = _ref => {
     open,
     actions,
     layoutProps,
+    providerProps,
     renderCurrentView,
     fieldProps: pickerFieldProps,
-    contextValue
+    ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
+    localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'mobile'
+    variant: 'mobile'
   }));
   const Field = slots.field;
   const fieldProps = useSlotProps({
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
-    additionalProps: _extends({}, pickerFieldProps, isToolbarHidden && {
-      id: labelId
-    }, !(disabled || readOnly) && {
-      onClick: actions.onOpen,
-      onKeyDown: onSpaceOrEnter(actions.onOpen)
-    }, {
+    additionalProps: _extends({
+      // Internal props
       readOnly: readOnly ?? true,
       disabled,
-      className,
-      sx,
       format,
       formatDensity,
       enableAccessibleFieldDOMStructure,
       selectedSections,
       onSelectedSectionsChange,
-      timezone,
+      timezone
+    }, pickerFieldProps, {
+      // onChange and value
+
+      // Forwarded props
+      className,
+      sx,
       label,
       name
-    }, inputRef ? {
+    }, isToolbarHidden && {
+      id: labelId
+    }, !(disabled || readOnly) && {
+      onClick: actions.onOpen,
+      onKeyDown: onSpaceOrEnter(actions.onOpen)
+    }, !!inputRef && {
       inputRef
-    } : {}),
-    ownerState: props
+    }),
+    ownerState
   });
 
   // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
@@ -112,9 +119,7 @@ export const useMobilePicker = _ref => {
     }, innerSlotProps?.mobilePaper)
   });
   const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/_jsxs(PickersProvider, {
-    contextValue: contextValue,
-    localeText: localeText,
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
     children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
       slots: slotsForField,
       slotProps: slotProps,
@@ -129,7 +134,7 @@ export const useMobilePicker = _ref => {
         children: renderCurrentView()
       }))
     }))]
-  });
+  }));
   return {
     renderPicker
   };

package/modern/internals/hooks/usePicker/usePicker.js

@@ -2,17 +2,18 @@ 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";
+import { usePickerProvider } from "./usePickerProvider.js";
 export const usePicker = ({
   props,
   valueManager,
   valueType,
-  wrapperVariant,
+  variant,
   additionalViewProps,
   validator,
   autoFocusView,
   rendererInterceptor,
-  fieldRef
+  fieldRef,
+  localeText
 }) => {
   if (process.env.NODE_ENV !== 'production') {
     if (props.renderInput != null) {
@@ -23,7 +24,7 @@ export const usePicker = ({
     props,
     valueManager,
     valueType,
-    wrapperVariant,
+    variant,
     validator
   });
   const pickerViewsResponse = usePickerViews({
@@ -36,13 +37,17 @@ export const usePicker = ({
   });
   const pickerLayoutResponse = usePickerLayoutProps({
     props,
-    wrapperVariant,
+    variant,
     propsFromPickerValue: pickerValueResponse.layoutProps,
     propsFromPickerViews: pickerViewsResponse.layoutProps
   });
-  const pickerOwnerState = usePickerOwnerState({
+  const providerProps = usePickerProvider({
     props,
-    pickerValueResponse
+    pickerValueResponse,
+    localeText,
+    valueManager,
+    variant,
+    views: pickerViewsResponse.views
   });
   return {
     // Picker value
@@ -55,9 +60,9 @@ export const usePicker = ({
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker layout
     layoutProps: pickerLayoutResponse.layoutProps,
-    // Picker context
-    contextValue: pickerValueResponse.contextValue,
+    // Picker provider
+    providerProps,
     // Picker owner state
-    ownerState: pickerOwnerState
+    ownerState: providerProps.privateContextValue.ownerState
   };
 };

package/modern/internals/hooks/usePicker/usePickerLayoutProps.js

@@ -4,7 +4,6 @@ import { useIsLandscape } from "../useIsLandscape.js";
 
 /**
  * Props used to create the layout of the views.
- * Those props are exposed on all the pickers.
  */
 
 /**
@@ -14,7 +13,7 @@ export const usePickerLayoutProps = ({
   props,
   propsFromPickerValue,
   propsFromPickerViews,
-  wrapperVariant
+  variant
 }) => {
   const {
     orientation
@@ -24,9 +23,7 @@ export const usePickerLayoutProps = ({
   const layoutProps = _extends({}, propsFromPickerViews, propsFromPickerValue, {
     isLandscape,
     isRtl,
-    wrapperVariant,
-    disabled: props.disabled,
-    readOnly: props.readOnly
+    wrapperVariant: variant
   });
   return {
     layoutProps

package/modern/internals/hooks/usePicker/usePickerProvider.js

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useUtils } from "../useUtils.js";
+import { arrayIncludes } from "../../utils/utils.js";
+function getOrientation() {
+  if (typeof window === 'undefined') {
+    return 'portrait';
+  }
+  if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
+    return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
+  }
+
+  // Support IOS safari
+  if (window.orientation) {
+    return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
+  }
+  return 'portrait';
+}
+export const usePickerOrientation = (views, customOrientation) => {
+  const [orientation, setOrientation] = React.useState(getOrientation);
+  useEnhancedEffect(() => {
+    const eventHandler = () => {
+      setOrientation(getOrientation());
+    };
+    window.addEventListener('orientationchange', eventHandler);
+    return () => {
+      window.removeEventListener('orientationchange', eventHandler);
+    };
+  }, []);
+  if (arrayIncludes(views, ['hours', 'minutes', 'seconds'])) {
+    // could not display 13:34:44 in landscape mode
+    return 'portrait';
+  }
+  return customOrientation ?? orientation;
+};
+export function usePickerProvider(parameters) {
+  const {
+    props,
+    pickerValueResponse,
+    valueManager,
+    localeText,
+    variant,
+    views
+  } = parameters;
+  const utils = useUtils();
+  const orientation = usePickerOrientation(views, props.orientation);
+  const ownerState = React.useMemo(() => ({
+    isPickerValueEmpty: valueManager.areValuesEqual(utils, pickerValueResponse.viewProps.value, valueManager.emptyValue),
+    isPickerOpen: pickerValueResponse.open,
+    isPickerDisabled: props.disabled ?? false,
+    isPickerReadOnly: props.readOnly ?? false,
+    pickerOrientation: orientation,
+    pickerVariant: variant
+  }), [utils, valueManager, pickerValueResponse.viewProps.value, pickerValueResponse.open, orientation, variant, props.disabled, props.readOnly]);
+  const contextValue = React.useMemo(() => ({
+    onOpen: pickerValueResponse.actions.onOpen,
+    onClose: pickerValueResponse.actions.onClose,
+    open: pickerValueResponse.open,
+    disabled: props.disabled ?? false,
+    readOnly: props.readOnly ?? false,
+    variant,
+    orientation
+  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open, variant, orientation, props.disabled, props.readOnly]);
+  const privateContextValue = React.useMemo(() => ({
+    ownerState
+  }), [ownerState]);
+  return {
+    localeText,
+    contextValue,
+    privateContextValue
+  };
+}
+
+/**
+ * Props used to create the private context.
+ * Those props are exposed on all the pickers.
+ */

package/modern/internals/hooks/usePicker/usePickerValue.js

@@ -5,6 +5,7 @@ import { useOpenState } from "../useOpenState.js";
 import { useLocalizationContext, useUtils } from "../useUtils.js";
 import { useValidation } from "../../../validation/index.js";
 import { useValueWithTimezone } from "../useValueWithTimezone.js";
+
 /**
  * Decide if the new value should be published
  * The published value will be passed to `onChange` if defined.
@@ -112,7 +113,7 @@ export const usePickerValue = ({
   props,
   valueManager,
   valueType,
-  wrapperVariant,
+  variant,
   validator
 }) => {
   const {
@@ -120,8 +121,9 @@ export const usePickerValue = ({
     onChange,
     value: inValueWithoutRenderTimezone,
     defaultValue: inDefaultValue,
-    closeOnSelect = wrapperVariant === 'desktop',
-    timezone: timezoneProp
+    closeOnSelect = variant === 'desktop',
+    timezone: timezoneProp,
+    referenceDate
   } = props;
   const {
     current: defaultValue
@@ -160,6 +162,7 @@ export const usePickerValue = ({
     timezone: timezoneProp,
     value: inValueWithoutRenderTimezone,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager
   });
@@ -343,17 +346,11 @@ export const usePickerValue = ({
     onSelectShortcut: handleSelectShortcut,
     isValid
   });
-  const contextValue = React.useMemo(() => ({
-    onOpen: handleOpen,
-    onClose: handleClose,
-    open: isOpen
-  }), [isOpen, handleClose, handleOpen]);
   return {
     open: isOpen,
     fieldProps: fieldResponse,
     viewProps: viewResponse,
     layoutProps: layoutResponse,
-    actions,
-    contextValue
+    actions
   };
 };

package/modern/internals/hooks/usePicker/usePickerViews.js

@@ -134,6 +134,7 @@ export const usePickerViews = ({
   };
   return {
     hasUIView,
+    views,
     shouldRestoreFocus,
     layoutProps,
     renderCurrentView: () => {

package/modern/internals/hooks/usePickerPrivateContext.js

@@ -0,0 +1,9 @@
+'use client';
+
+import * as React from 'react';
+import { PickerPrivateContext } from "../components/PickerProvider.js";
+
+/**
+ * Returns the private context passed by the picker that wraps the current component.
+ */
+export const usePickerPrivateContext = () => React.useContext(PickerPrivateContext);

package/modern/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { usePicker } from "../usePicker/index.js";
-import { LocalizationProvider } from "../../../LocalizationProvider/index.js";
+import { PickerProvider } from "../../components/PickerProvider.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { DIALOG_WIDTH } from "../../constants/dimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -40,17 +40,18 @@ export const useStaticPicker = _ref => {
   } = props;
   const {
     layoutProps,
+    providerProps,
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
     props,
     autoFocusView: autoFocus ?? false,
     fieldRef: undefined,
+    localeText,
     additionalViewProps: {},
-    wrapperVariant: displayStaticWrapperAs
+    variant: displayStaticWrapperAs
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
-  const renderPicker = () => /*#__PURE__*/_jsx(LocalizationProvider, {
-    localeText: localeText,
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
     children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
       slots: slots,
       slotProps: slotProps,
@@ -59,7 +60,7 @@ export const useStaticPicker = _ref => {
       ref: ref,
       children: renderCurrentView()
     }))
-  });
+  }));
   return {
     renderPicker
   };

package/modern/internals/hooks/useValueWithTimezone.js

@@ -11,6 +11,7 @@ export const useValueWithTimezone = ({
   timezone: timezoneProp,
   value: valueProp,
   defaultValue,
+  referenceDate,
   onChange,
   valueManager
 }) => {
@@ -24,7 +25,16 @@ export const useValueWithTimezone = ({
     }
     return valueManager.setTimezone(utils, inputTimezone, newValue);
   });
-  const timezoneToRender = timezoneProp ?? inputTimezone ?? 'default';
+  let timezoneToRender;
+  if (timezoneProp) {
+    timezoneToRender = timezoneProp;
+  } else if (inputTimezone) {
+    timezoneToRender = inputTimezone;
+  } else if (referenceDate) {
+    timezoneToRender = utils.getTimezone(referenceDate);
+  } else {
+    timezoneToRender = 'default';
+  }
   const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, inputValue), [valueManager, utils, timezoneToRender, inputValue]);
   const handleValueChange = useEventCallback((newValue, ...otherParams) => {
     const newValueWithInputTimezone = setInputTimezone(newValue);
@@ -45,6 +55,7 @@ export const useControlledValueWithTimezone = ({
   timezone: timezoneProp,
   value: valueProp,
   defaultValue,
+  referenceDate,
   onChange: onChangeProp,
   valueManager
 }) => {
@@ -62,6 +73,7 @@ export const useControlledValueWithTimezone = ({
     timezone: timezoneProp,
     value: valueWithInputTimezone,
     defaultValue: undefined,
+    referenceDate,
     onChange,
     valueManager
   });