@mui/x-date-pickers 9.0.0-alpha.1 → 9.0.0-alpha.2

package/internals/components/PickersModalDialog.mjs

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import DialogContent from '@mui/material/DialogContent';
+import Fade from '@mui/material/Fade';
+import MuiDialog, { dialogClasses } from '@mui/material/Dialog';
+import { styled } from '@mui/material/styles';
+import { DIALOG_WIDTH } from "../constants/dimensions.mjs";
+import { usePickerContext } from "../../hooks/index.mjs";
+import { usePickerPrivateContext } from "../hooks/usePickerPrivateContext.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const PickersModalDialogRoot = styled(MuiDialog, {
+  slot: 'internal'
+})({
+  [`& .${dialogClasses.container}`]: {
+    outline: 0
+  },
+  [`& .${dialogClasses.paper}`]: {
+    outline: 0,
+    minWidth: DIALOG_WIDTH
+  }
+});
+const PickersModalDialogContent = styled(DialogContent, {
+  slot: 'internal'
+})({
+  '&:first-of-type': {
+    padding: 0
+  }
+});
+export function PickersModalDialog(props) {
+  const {
+    children,
+    slots,
+    slotProps
+  } = props;
+  const {
+    open
+  } = usePickerContext();
+  const {
+    dismissViews,
+    onPopperExited
+  } = usePickerPrivateContext();
+  const Dialog = slots?.dialog ?? PickersModalDialogRoot;
+  const Transition = slots?.mobileTransition ?? Fade;
+  return /*#__PURE__*/_jsx(Dialog, _extends({
+    open: open,
+    onClose: () => {
+      dismissViews();
+      onPopperExited?.();
+    }
+  }, slotProps?.dialog, {
+    TransitionComponent: Transition,
+    TransitionProps: slotProps?.mobileTransition,
+    PaperComponent: slots?.mobilePaper,
+    PaperProps: slotProps?.mobilePaper,
+    children: /*#__PURE__*/_jsx(PickersModalDialogContent, {
+      children: children
+    })
+  }));
+}

package/internals/components/PickersToolbar.d.mts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { BaseToolbarProps } from "../models/props/toolbar.mjs";
+import { PickersToolbarClasses } from "./pickersToolbarClasses.mjs";
+export interface PickersToolbarProps extends Pick<BaseToolbarProps, 'hidden' | 'titleId'> {
+  className?: string;
+  landscapeDirection?: 'row' | 'column';
+  toolbarTitle: React.ReactNode;
+  classes?: Partial<PickersToolbarClasses>;
+}
+type PickersToolbarComponent = ((props: React.PropsWithChildren<PickersToolbarProps> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+export declare const PickersToolbar: PickersToolbarComponent;
+export {};

package/internals/components/PickersToolbar.mjs

@@ -0,0 +1,117 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "className", "classes", "toolbarTitle", "hidden", "titleId", "classes", "landscapeDirection"];
+import * as React from 'react';
+import clsx from 'clsx';
+import Typography from '@mui/material/Typography';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import { shouldForwardProp } from '@mui/system/createStyled';
+import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.mjs";
+import { useToolbarOwnerState } from "../hooks/useToolbarOwnerState.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    title: ['title'],
+    content: ['content']
+  };
+  return composeClasses(slots, getPickersToolbarUtilityClass, classes);
+};
+const PickersToolbarRoot = styled('div', {
+  name: 'MuiPickersToolbar',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+  padding: theme.spacing(2, 3),
+  variants: [{
+    props: {
+      pickerOrientation: 'landscape'
+    },
+    style: {
+      height: 'auto',
+      maxWidth: 160,
+      padding: 16,
+      justifyContent: 'flex-start',
+      flexWrap: 'wrap'
+    }
+  }]
+}));
+const PickersToolbarContent = styled('div', {
+  name: 'MuiPickersToolbar',
+  slot: 'Content',
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'landscapeDirection'
+})({
+  display: 'flex',
+  flexWrap: 'wrap',
+  width: '100%',
+  flex: 1,
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  flexDirection: 'row',
+  variants: [{
+    props: {
+      pickerOrientation: 'landscape'
+    },
+    style: {
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      pickerOrientation: 'landscape',
+      landscapeDirection: 'row'
+    },
+    style: {
+      flexDirection: 'row'
+    }
+  }]
+});
+export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersToolbar(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersToolbar'
+  });
+  const {
+      children,
+      className,
+      classes: classesProp,
+      toolbarTitle,
+      hidden,
+      titleId,
+      landscapeDirection
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = useToolbarOwnerState();
+  const classes = useUtilityClasses(classesProp);
+  if (hidden) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(PickersToolbarRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: ownerState
+  }, other, {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      color: "text.secondary",
+      variant: "overline",
+      id: titleId,
+      className: classes.title,
+      children: toolbarTitle
+    }), /*#__PURE__*/_jsx(PickersToolbarContent, {
+      className: classes.content,
+      ownerState: ownerState,
+      landscapeDirection: landscapeDirection,
+      children: children
+    })]
+  }));
+});
+if (process.env.NODE_ENV !== "production") PickersToolbar.displayName = "PickersToolbar";

package/internals/components/PickersToolbarButton.d.mts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+import { TypographyProps } from '@mui/material/Typography';
+import { ExtendMui } from "../models/helpers.mjs";
+import { PickersToolbarButtonClasses } from "./pickersToolbarButtonClasses.mjs";
+export interface PickersToolbarButtonProps extends ExtendMui<ButtonProps, 'value' | 'variant'> {
+  align?: TypographyProps['align'];
+  selected: boolean;
+  typographyClassName?: string;
+  value: React.ReactNode;
+  variant: TypographyProps['variant'];
+  classes?: Partial<PickersToolbarButtonClasses>;
+  width?: number | string;
+}
+export declare const PickersToolbarButton: React.ForwardRefExoticComponent<Omit<PickersToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/internals/components/PickersToolbarButton.mjs

@@ -0,0 +1,64 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["align", "className", "classes", "selected", "typographyClassName", "value", "variant", "width"];
+import * as React from 'react';
+import clsx from 'clsx';
+import Button from '@mui/material/Button';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import { PickersToolbarText } from "./PickersToolbarText.mjs";
+import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getPickersToolbarUtilityClass, classes);
+};
+const PickersToolbarButtonRoot = styled(Button, {
+  name: 'MuiPickersToolbarButton',
+  slot: 'Root'
+})({
+  padding: 0,
+  minWidth: 16,
+  textTransform: 'none'
+});
+export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function PickersToolbarButton(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersToolbarButton'
+  });
+  const {
+      align,
+      className,
+      classes: classesProp,
+      selected,
+      typographyClassName,
+      value,
+      variant,
+      width
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const classes = useUtilityClasses(classesProp);
+  return /*#__PURE__*/_jsx(PickersToolbarButtonRoot, _extends({
+    variant: "text",
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: props
+  }, width ? {
+    sx: {
+      width
+    }
+  } : {}, other, {
+    children: /*#__PURE__*/_jsx(PickersToolbarText, {
+      align: align,
+      className: typographyClassName,
+      variant: variant,
+      value: value,
+      selected: selected
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") PickersToolbarButton.displayName = "PickersToolbarButton";

package/internals/components/PickersToolbarText.d.mts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { TypographyProps } from '@mui/material/Typography';
+import { PickersToolbarTextClasses } from "./pickersToolbarTextClasses.mjs";
+export interface ExportedPickersToolbarTextProps extends Omit<TypographyProps, 'classes' | 'variant' | 'align'> {
+  classes?: Partial<PickersToolbarTextClasses>;
+}
+export interface PickersToolbarTextProps extends Omit<TypographyProps, 'classes'>, Pick<ExportedPickersToolbarTextProps, 'classes'> {
+  selected?: boolean;
+  value: React.ReactNode;
+}
+export declare const PickersToolbarText: React.ForwardRefExoticComponent<Omit<PickersToolbarTextProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/internals/components/PickersToolbarText.mjs

@@ -0,0 +1,55 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "classes", "selected", "value"];
+import * as React from 'react';
+import clsx from 'clsx';
+import Typography from '@mui/material/Typography';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import { getPickersToolbarTextUtilityClass } from "./pickersToolbarTextClasses.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getPickersToolbarTextUtilityClass, classes);
+};
+const PickersToolbarTextRoot = styled(Typography, {
+  name: 'MuiPickersToolbarText',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  transition: theme.transitions.create('color'),
+  color: (theme.vars || theme).palette.text.secondary,
+  [`&[data-selected]`]: {
+    color: (theme.vars || theme).palette.text.primary
+  }
+}));
+export const PickersToolbarText = /*#__PURE__*/React.forwardRef(function PickersToolbarText(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersToolbarText'
+  });
+  const {
+      className,
+      classes: classesProp,
+      selected,
+      value
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const classes = useUtilityClasses(classesProp);
+  return /*#__PURE__*/_jsx(PickersToolbarTextRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    component: "span",
+    ownerState: props
+  }, selected && {
+    'data-selected': true
+  }, other, {
+    children: value
+  }));
+});
+if (process.env.NODE_ENV !== "production") PickersToolbarText.displayName = "PickersToolbarText";

package/internals/demo/DemoContainer.mjs

@@ -0,0 +1,179 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import Stack, { stackClasses } from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { textFieldClasses } from '@mui/material/TextField';
+import { pickersTextFieldClasses } from "../../PickersTextField/index.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getChildTypeFromChildName = childName => {
+  if (childName.match(/^([A-Za-z]+)Range(Calendar|Clock)$/)) {
+    return 'multi-panel-UI-view';
+  }
+  if (childName.match(/^([A-Za-z]*)(DigitalClock)$/)) {
+    return 'Tall-UI-view';
+  }
+  if (childName.match(/^Static([A-Za-z]+)/) || childName.match(/^([A-Za-z]+)(Calendar|Clock)$/)) {
+    return 'UI-view';
+  }
+  if (childName.match(/^MultiInput([A-Za-z]+)RangeField$/)) {
+    return 'multi-input-range-field';
+  }
+  if (childName.match(/^SingleInput([A-Za-z]+)RangeField$/) || childName.match(/^([A-Za-z]+)RangePicker$/)) {
+    return 'single-input-range-field';
+  }
+  return 'single-input-field';
+};
+const getSupportedSectionFromChildName = childName => {
+  if (childName.includes('DateTime')) {
+    return 'date-time';
+  }
+  if (childName.includes('Date')) {
+    return 'date';
+  }
+  return 'time';
+};
+/**
+ * WARNING: This is an internal component used in documentation to achieve a desired layout.
+ * Please do not use it in your application.
+ */
+export function DemoItem(props) {
+  const {
+    label,
+    children,
+    component,
+    sx: sxProp,
+    alignItems = 'stretch'
+  } = props;
+  let spacing;
+  let sx = sxProp;
+  if (component && getChildTypeFromChildName(component) === 'multi-input-range-field') {
+    spacing = 1.5;
+    sx = _extends({}, sx, {
+      [`& .${textFieldClasses.root}`]: {
+        flexGrow: 1
+      }
+    });
+  } else {
+    spacing = 1;
+  }
+  return /*#__PURE__*/_jsxs(Stack, {
+    direction: "column",
+    alignItems: alignItems,
+    spacing: spacing,
+    sx: sx,
+    children: [label && /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      children: label
+    }), children]
+  });
+}
+DemoItem.displayName = 'DemoItem';
+const isDemoItem = child => {
+  if (/*#__PURE__*/React.isValidElement(child) && typeof child.type !== 'string') {
+    // @ts-ignore
+    return child.type.displayName === 'DemoItem';
+  }
+  return false;
+};
+/**
+ * WARNING: This is an internal component used in documentation to achieve a desired layout.
+ * Please do not use it in your application.
+ */
+export function DemoContainer(props) {
+  const {
+    children,
+    components,
+    sx: sxProp
+  } = props;
+  const childrenTypes = new Set();
+  const childrenSupportedSections = new Set();
+  components.forEach(childName => {
+    childrenTypes.add(getChildTypeFromChildName(childName));
+    childrenSupportedSections.add(getSupportedSectionFromChildName(childName));
+  });
+  const getSpacing = direction => {
+    if (direction === 'row') {
+      return childrenTypes.has('UI-view') || childrenTypes.has('Tall-UI-view') ? 3 : 2;
+    }
+    return childrenTypes.has('UI-view') ? 4 : 3;
+  };
+  let direction;
+  let spacing;
+  let extraSx = {};
+  let demoItemSx = {};
+  const sx = _extends({
+    overflow: 'auto',
+    // Add padding as overflow can hide the outline text field label.
+    pt: 1
+  }, sxProp);
+  if (components.length > 2 || childrenTypes.has('multi-input-range-field') || childrenTypes.has('single-input-range-field') || childrenTypes.has('multi-panel-UI-view') || childrenTypes.has('UI-view') || childrenSupportedSections.has('date-time')) {
+    direction = 'column';
+    spacing = getSpacing('column');
+  } else {
+    direction = {
+      xs: 'column',
+      lg: 'row'
+    };
+    spacing = {
+      xs: getSpacing('column'),
+      lg: getSpacing('row')
+    };
+  }
+  if (childrenTypes.has('UI-view')) {
+    // noop
+  } else if (childrenTypes.has('single-input-range-field')) {
+    if (!childrenSupportedSections.has('date-time')) {
+      extraSx = {
+        [`& > .${textFieldClasses.root}, & > .${pickersTextFieldClasses.root}`]: {
+          minWidth: 300
+        }
+      };
+    } else {
+      extraSx = {
+        [`& > .${textFieldClasses.root}, & > .${pickersTextFieldClasses.root}`]: {
+          minWidth: {
+            xs: 300,
+            // If demo also contains MultiInputDateTimeRangeField, increase width to avoid cutting off the value.
+            md: childrenTypes.has('multi-input-range-field') ? 460 : 440
+          }
+        }
+      };
+    }
+  } else if (childrenSupportedSections.has('date-time')) {
+    extraSx = {
+      [`& > .${textFieldClasses.root}, & > .${pickersTextFieldClasses.root}`]: {
+        minWidth: 270
+      }
+    };
+    if (childrenTypes.has('multi-input-range-field')) {
+      // increase width for the multi input date time range fields
+      demoItemSx = {
+        [`& > .${stackClasses.root} > .${textFieldClasses.root}, & > .${stackClasses.root} > .${pickersTextFieldClasses.root}`]: {
+          minWidth: 210
+        }
+      };
+    }
+  } else {
+    extraSx = {
+      [`& > .${textFieldClasses.root}, & > .${pickersTextFieldClasses.root}`]: {
+        minWidth: 200
+      }
+    };
+  }
+  const finalSx = _extends({}, sx, extraSx);
+  return /*#__PURE__*/_jsx(Stack, {
+    direction: direction,
+    spacing: spacing,
+    sx: finalSx,
+    children: React.Children.map(children, child => {
+      if (/*#__PURE__*/React.isValidElement(child) && isDemoItem(child)) {
+        // Inject sx styles to the `DemoItem` if it is a direct child of `DemoContainer`.
+        // @ts-ignore
+        return /*#__PURE__*/React.cloneElement(child, {
+          sx: _extends({}, extraSx, demoItemSx)
+        });
+      }
+      return child;
+    })
+  });
+}

package/internals/demo/index.d.mts

@@ -0,0 +1 @@
+export { DemoContainer, DemoItem } from "./DemoContainer.mjs";

package/internals/demo/index.mjs

@@ -0,0 +1 @@
+export { DemoContainer, DemoItem } from "./DemoContainer.mjs";

package/internals/hooks/date-helpers-hooks.d.mts

@@ -0,0 +1,24 @@
+import { PickerOnChangeFn } from "./useViews.mjs";
+import { PickerSelectionState } from "./usePicker/index.mjs";
+import { PickersTimezone, PickerValidDate } from "../../models/index.mjs";
+export interface MonthValidationOptions {
+  disablePast?: boolean;
+  disableFuture?: boolean;
+  minDate: PickerValidDate;
+  maxDate: PickerValidDate;
+  timezone: PickersTimezone;
+}
+export declare function useNextMonthDisabled(month: PickerValidDate, {
+  disableFuture,
+  maxDate,
+  timezone
+}: Pick<MonthValidationOptions, 'disableFuture' | 'maxDate' | 'timezone'>): boolean;
+export declare function usePreviousMonthDisabled(month: PickerValidDate, {
+  disablePast,
+  minDate,
+  timezone
+}: Pick<MonthValidationOptions, 'disablePast' | 'minDate' | 'timezone'>): boolean;
+export declare function useMeridiemMode(date: PickerValidDate | null, ampm: boolean | undefined, onChange: PickerOnChangeFn, selectionState?: PickerSelectionState): {
+  meridiemMode: import("../utils/time-utils.mjs").Meridiem | null;
+  handleMeridiemChange: (mode: "am" | "pm") => void;
+};

package/internals/hooks/date-helpers-hooks.mjs

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { getMeridiem, convertToMeridiem } from "../utils/time-utils.mjs";
+import { usePickerAdapter } from "../../hooks/usePickerAdapter.mjs";
+export function useNextMonthDisabled(month, {
+  disableFuture,
+  maxDate,
+  timezone
+}) {
+  const adapter = usePickerAdapter();
+  return React.useMemo(() => {
+    const now = adapter.date(undefined, timezone);
+    const lastEnabledMonth = adapter.startOfMonth(disableFuture && adapter.isBefore(now, maxDate) ? now : maxDate);
+    return !adapter.isAfter(lastEnabledMonth, month);
+  }, [disableFuture, maxDate, month, adapter, timezone]);
+}
+export function usePreviousMonthDisabled(month, {
+  disablePast,
+  minDate,
+  timezone
+}) {
+  const adapter = usePickerAdapter();
+  return React.useMemo(() => {
+    const now = adapter.date(undefined, timezone);
+    const firstEnabledMonth = adapter.startOfMonth(disablePast && adapter.isAfter(now, minDate) ? now : minDate);
+    return !adapter.isBefore(firstEnabledMonth, month);
+  }, [disablePast, minDate, month, adapter, timezone]);
+}
+export function useMeridiemMode(date, ampm, onChange, selectionState) {
+  const adapter = usePickerAdapter();
+  const cleanDate = React.useMemo(() => !adapter.isValid(date) ? null : date, [adapter, date]);
+  const meridiemMode = getMeridiem(cleanDate, adapter);
+  const handleMeridiemChange = React.useCallback(mode => {
+    const timeWithMeridiem = cleanDate == null ? null : convertToMeridiem(cleanDate, mode, Boolean(ampm), adapter);
+    onChange(timeWithMeridiem, selectionState ?? 'partial');
+  }, [ampm, cleanDate, onChange, selectionState, adapter]);
+  return {
+    meridiemMode,
+    handleMeridiemChange
+  };
+}

package/internals/hooks/useClockReferenceDate.d.mts

@@ -0,0 +1,15 @@
+import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from "../../models/index.mjs";
+import { PickerValue } from "../models/index.mjs";
+export declare const useClockReferenceDate: <TProps extends {}>({
+  value,
+  referenceDate: referenceDateProp,
+  adapter,
+  props,
+  timezone
+}: {
+  value: PickerValue;
+  referenceDate: PickerValidDate | undefined;
+  adapter: MuiPickersAdapter;
+  props: TProps;
+  timezone: PickersTimezone;
+}) => PickerValidDate;

package/internals/hooks/useClockReferenceDate.mjs

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { singleItemValueManager } from "../utils/valueManagers.mjs";
+import { getTodayDate } from "../utils/date-utils.mjs";
+import { SECTION_TYPE_GRANULARITY } from "../utils/getDefaultReferenceDate.mjs";
+export const useClockReferenceDate = ({
+  value,
+  referenceDate: referenceDateProp,
+  adapter,
+  props,
+  timezone
+}) => {
+  const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
+    value,
+    adapter,
+    props,
+    referenceDate: referenceDateProp,
+    granularity: SECTION_TYPE_GRANULARITY.day,
+    timezone,
+    getTodayDate: () => getTodayDate(adapter, timezone, 'date')
+  }),
+  // We want the `referenceDate` to update on prop and `timezone` change (https://github.com/mui/mui-x/issues/10804)
+  [referenceDateProp, timezone] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  return value ?? referenceDate;
+};

package/internals/hooks/useControlledValue.d.mts

@@ -0,0 +1,38 @@
+import type { PickerRangeValue, PickerValueManager } from "../models/index.mjs";
+import { PickersTimezone, PickerValidDate } from "../../models/index.mjs";
+import { PickerValidValue } from "../models/index.mjs";
+/**
+ * Hooks controlling the value while making sure that:
+ * - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined
+ * - The value rendered is always the one from `props.timezone` if defined
+ */
+export declare const useControlledValue: <TValue extends PickerValidValue, TChange extends (...params: any[]) => void>({
+  name,
+  timezone: timezoneProp,
+  value: valueProp,
+  defaultValue,
+  referenceDate,
+  onChange: onChangeProp,
+  valueManager
+}: UseControlledValueWithTimezoneParameters<TValue, TChange>) => {
+  value: TValue;
+  handleValueChange: TChange;
+  timezone: string;
+};
+interface UseValueWithTimezoneParameters<TValue extends PickerValidValue, TChange extends (...params: any[]) => void> {
+  timezone: PickersTimezone | undefined;
+  value: TValue | undefined;
+  defaultValue: TValue | undefined;
+  /**
+   * The reference date as passed to `props.referenceDate`.
+   * It does not need to have its default value.
+   * This is only used to determine the timezone to use when `props.value` and `props.defaultValue` are not defined.
+   */
+  referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
+  onChange: TChange | undefined;
+  valueManager: PickerValueManager<TValue, any>;
+}
+interface UseControlledValueWithTimezoneParameters<TValue extends PickerValidValue, TChange extends (...params: any[]) => void> extends UseValueWithTimezoneParameters<TValue, TChange> {
+  name: string;
+}
+export {};