Merge branch 'master' into column-virtualization-dynamic-height

packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx

@@ -221,6 +221,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar(
     name: 'DateRangeCalendar',
     timezone: timezoneProp,
     value: valueProp,
+    referenceDate,
     defaultValue,
     onChange,
     valueManager: rangeValueManager,

packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts

@@ -42,6 +42,7 @@ export const useMultiInputDateRangeField = <
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -60,6 +61,7 @@ export const useMultiInputDateRangeField = <
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager: rangeValueManager,
   });

packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts

@@ -42,6 +42,7 @@ export const useMultiInputDateTimeRangeField = <
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -60,6 +61,7 @@ export const useMultiInputDateTimeRangeField = <
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager: rangeValueManager,
   });

packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts

@@ -42,6 +42,7 @@ export const useMultiInputTimeRangeField = <
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -62,6 +63,7 @@ export const useMultiInputTimeRangeField = <
     defaultValue,
     onChange,
     valueManager: rangeValueManager,
+    referenceDate,
   });
 
   const { validationError, getValidationErrorForNewValue } = useValidation({

packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx

@@ -156,6 +156,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager,
   });

packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx

@@ -163,6 +163,7 @@ export const DigitalClock = React.forwardRef(function DigitalClock(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager,
   });

packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx

@@ -114,6 +114,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager,
   });

packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx

@@ -113,6 +113,7 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager,
   });

packages/x-date-pickers/src/TimeClock/TimeClock.tsx

@@ -114,6 +114,7 @@ export const TimeClock = React.forwardRef(function TimeClock(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager,
   });

packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx

@@ -124,6 +124,7 @@ export const YearCalendar = React.forwardRef(function YearCalendar(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager,
   });

packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts

@@ -114,6 +114,7 @@ export const useFieldState = <
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager,
   });

packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts

@@ -168,6 +168,7 @@ export const usePickerValue = <
     defaultValue: inDefaultValue,
     closeOnSelect = variant === 'desktop',
     timezone: timezoneProp,
+    referenceDate,
   } = props;
 
   const { current: defaultValue } = React.useRef(inDefaultValue);
@@ -218,6 +219,7 @@ export const usePickerValue = <
     timezone: timezoneProp,
     value: inValueWithoutRenderTimezone,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager,
   });

packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts

@@ -257,7 +257,10 @@ export interface UsePickerValueNonStaticProps {
 export interface UsePickerValueProps<TValue, TError>
   extends UsePickerValueBaseProps<TValue, TError>,
     UsePickerValueNonStaticProps,
-    TimezoneProps {}
+    TimezoneProps {
+  // We don't add JSDoc here because we want the `referenceDate` JSDoc to be the one from the view which has more context.
+  referenceDate?: PickerValidDate;
+}
 
 export interface UsePickerValueParams<
   TValue,

packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.test.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { screen } from '@mui/internal-test-utils';
+import { PickersTimezone, PickerValidDate } from '@mui/x-date-pickers/models';
+import { createPickerRenderer } from 'test/utils/pickers';
+import { useValueWithTimezone } from './useValueWithTimezone';
+import { singleItemValueManager } from '../utils/valueManagers';
+
+describe('useValueWithTimezone', () => {
+  const { render, adapter } = createPickerRenderer({
+    clock: 'fake',
+    adapterName: 'luxon',
+  });
+
+  function runTest(params: {
+    timezone: PickersTimezone | undefined;
+    value: PickerValidDate | null | undefined;
+    defaultValue: PickerValidDate | null | undefined;
+    referenceDate: PickerValidDate | undefined;
+    expectedTimezone: PickersTimezone;
+  }) {
+    const { expectedTimezone, ...other } = params;
+
+    function TestComponent(props: typeof other) {
+      const { timezone } = useValueWithTimezone({
+        ...props,
+        valueManager: singleItemValueManager,
+        onChange: () => {},
+      });
+
+      return <div data-testid="result">{timezone}</div>;
+    }
+
+    render(<TestComponent {...other} />);
+
+    expect(screen.getByTestId('result').textContent).to.equal(expectedTimezone);
+  }
+
+  it('should use the timezone parameter when provided', () => {
+    runTest({
+      timezone: 'America/New_York',
+      value: undefined,
+      defaultValue: undefined,
+      referenceDate: undefined,
+      expectedTimezone: 'America/New_York',
+    });
+  });
+
+  it('should use the timezone parameter over the value parameter when both are provided', () => {
+    runTest({
+      timezone: 'America/New_York',
+      value: adapter.date(undefined, 'Europe/Paris'),
+      defaultValue: undefined,
+      referenceDate: undefined,
+      expectedTimezone: 'America/New_York',
+    });
+  });
+
+  it('should use the value parameter when provided', () => {
+    runTest({
+      timezone: undefined,
+      value: adapter.date(undefined, 'America/New_York'),
+      defaultValue: undefined,
+      referenceDate: undefined,
+      expectedTimezone: 'America/New_York',
+    });
+  });
+
+  it('should use the value parameter over the defaultValue parameter when both are provided', () => {
+    runTest({
+      timezone: undefined,
+      value: adapter.date(undefined, 'America/New_York'),
+      defaultValue: adapter.date(undefined, 'Europe/Paris'),
+      referenceDate: undefined,
+      expectedTimezone: 'America/New_York',
+    });
+  });
+
+  it('should use the defaultValue parameter when provided', () => {
+    runTest({
+      timezone: undefined,
+      value: undefined,
+      defaultValue: adapter.date(undefined, 'America/New_York'),
+      referenceDate: undefined,
+      expectedTimezone: 'America/New_York',
+    });
+  });
+
+  it('should use the referenceDate parameter when provided', () => {
+    runTest({
+      timezone: undefined,
+      value: undefined,
+      defaultValue: undefined,
+      referenceDate: adapter.date(undefined, 'America/New_York'),
+      expectedTimezone: 'America/New_York',
+    });
+  });
+
+  it('should use the "default" timezone is there is no way to deduce the user timezone', () => {
+    runTest({
+      timezone: undefined,
+      value: undefined,
+      defaultValue: undefined,
+      referenceDate: undefined,
+      expectedTimezone: 'default',
+    });
+  });
+});

packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts

@@ -3,7 +3,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import useControlled from '@mui/utils/useControlled';
 import { useUtils } from './useUtils';
 import type { PickerValueManager } from './usePicker';
-import { PickersTimezone } from '../../models';
+import { PickersTimezone, PickerValidDate } from '../../models';
 
 /**
  * Hooks making sure that:
@@ -14,15 +14,10 @@ export const useValueWithTimezone = <TValue, TChange extends (...params: any[])
   timezone: timezoneProp,
   value: valueProp,
   defaultValue,
+  referenceDate,
   onChange,
   valueManager,
-}: {
-  timezone: PickersTimezone | undefined;
-  value: TValue | undefined;
-  defaultValue: TValue | undefined;
-  onChange: TChange | undefined;
-  valueManager: PickerValueManager<TValue, any>;
-}) => {
+}: UseValueWithTimezoneParameters<TValue, TChange>) => {
   const utils = useUtils();
 
   const firstDefaultValue = React.useRef(defaultValue);
@@ -41,7 +36,16 @@ export const useValueWithTimezone = <TValue, TChange extends (...params: any[])
     return valueManager.setTimezone(utils, inputTimezone, newValue);
   });
 
-  const timezoneToRender = timezoneProp ?? inputTimezone ?? 'default';
+  let timezoneToRender: PickersTimezone;
+  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),
@@ -64,16 +68,10 @@ export const useControlledValueWithTimezone = <TValue, TChange extends (...param
   timezone: timezoneProp,
   value: valueProp,
   defaultValue,
+  referenceDate,
   onChange: onChangeProp,
   valueManager,
-}: {
-  name: string;
-  timezone: PickersTimezone | undefined;
-  value: TValue | undefined;
-  defaultValue: TValue | undefined;
-  onChange: TChange | undefined;
-  valueManager: PickerValueManager<TValue, any>;
-}) => {
+}: UseControlledValueWithTimezoneParameters<TValue, TChange>) => {
   const [valueWithInputTimezone, setValue] = useControlled({
     name,
     state: 'value',
@@ -90,7 +88,29 @@ export const useControlledValueWithTimezone = <TValue, TChange extends (...param
     timezone: timezoneProp,
     value: valueWithInputTimezone,
     defaultValue: undefined,
+    referenceDate,
     onChange,
     valueManager,
   });
 };
+
+interface UseValueWithTimezoneParameters<TValue, 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: PickerValidDate | undefined;
+  onChange: TChange | undefined;
+  valueManager: PickerValueManager<TValue, any>;
+}
+
+interface UseControlledValueWithTimezoneParameters<
+  TValue,
+  TChange extends (...params: any[]) => void,
+> extends UseValueWithTimezoneParameters<TValue, TChange> {
+  name: string;
+}

packages/x-internals/src/types/DefaultizedProps.ts

@@ -0,0 +1,15 @@
+/**
+ * Combines a type with required and additional properties.
+ *
+ * @template P - The original type.
+ * @template RequiredProps - The keys to make required.
+ * @template AdditionalProps - Additional properties to include.
+ */
+
+export type DefaultizedProps<
+  P extends {},
+  RequiredProps extends keyof P,
+  AdditionalProps extends {} = {},
+> = Omit<P, RequiredProps | keyof AdditionalProps> &
+  Required<Pick<P, RequiredProps>> &
+  AdditionalProps;

packages/x-internals/src/types/MakeOptional.ts

@@ -0,0 +1,7 @@
+/**
+ * Makes specified keys in a type optional.
+ *
+ * @template T - The original type.
+ * @template K - The keys to make optional.
+ */
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

packages/x-internals/src/types/MakeRequired.ts

@@ -0,0 +1,8 @@
+/**
+ * Makes specified keys in a type required.
+ *
+ * @template T - The original type.
+ * @template K - The keys to make required.
+ */
+
+export type MakeRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;

packages/x-internals/src/types/SlotComponentPropsFromProps.ts

@@ -0,0 +1,13 @@
+/**
+ * Defines the props for a slot component, which can be either partial props with overrides or a function returning such props.
+ *
+ * @template TProps - The original props type.
+ * @template TOverrides - The overrides type.
+ * @template TOwnerState - The owner state type.
+ */
+
+export type SlotComponentPropsFromProps<
+  TProps extends {},
+  TOverrides extends {},
+  TOwnerState extends {},
+> = (Partial<TProps> & TOverrides) | ((ownerState: TOwnerState) => Partial<TProps> & TOverrides);