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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "8.0.0-alpha.1",
+  "version": "8.0.0-alpha.2",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -41,7 +41,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.0.0-alpha.1"
+    "@mui/x-internals": "8.0.0-alpha.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/themeAugmentation/overrides.d.ts

@@ -57,13 +57,13 @@ export interface PickersComponentNameToClassKey {
   MuiPickersCalendarHeader: PickersCalendarHeaderClassKey;
   MuiPickersDay: PickersDayClassKey;
   MuiPickersFadeTransitionGroup: PickersFadeTransitionGroupClassKey;
+  MuiPickersLayout: PickersLayoutClassKey;
   MuiPickersMonth: PickersMonthClassKey;
   MuiPickersPopper: PickersPopperClassKey;
   MuiPickersSlideTransition: PickersSlideTransitionClassKey;
   MuiPickersToolbar: PickersToolbarClassKey;
   MuiPickersToolbarButton: PickersToolbarButtonClassKey;
   MuiPickersToolbarText: PickersToolbarTextClassKey;
-  MuiPickersLayout: PickersLayoutClassKey;
   MuiPickersYear: PickersYearClassKey;
   MuiTimeClock: TimeClockClassKey;
   MuiTimePickerToolbar: TimePickerToolbarClassKey;

package/themeAugmentation/props.d.ts

@@ -52,6 +52,7 @@ import {
   PickersFilledInputProps,
 } from '../PickersTextField';
 import { PickersSectionListProps } from '../PickersSectionList';
+import { PickerValidValue } from '../internals/models';
 
 export interface PickersComponentsPropsList {
   MuiClock: ClockProps;
@@ -77,10 +78,10 @@ export interface PickersComponentsPropsList {
   MuiPickersMonth: ExportedPickersMonthProps;
   MuiPickersPopper: PickerPopperProps;
   MuiPickersSlideTransition: ExportedSlideTransitionProps;
-  MuiPickersToolbar: PickersToolbarProps<unknown, DateOrTimeView>;
+  MuiPickersToolbar: PickersToolbarProps<PickerValidValue, DateOrTimeView>;
   MuiPickersToolbarButton: PickersToolbarButtonProps;
   MuiPickersToolbarText: ExportedPickersToolbarTextProps;
-  MuiPickersLayout: PickersLayoutProps<unknown, DateOrTimeView>;
+  MuiPickersLayout: PickersLayoutProps<PickerValidValue, DateOrTimeView>;
   MuiPickersYear: ExportedPickersYearProps;
   MuiTimeClock: TimeClockProps;
   MuiTimeField: TimeFieldProps<any>;

package/validation/useValidation.d.ts

@@ -1,7 +1,8 @@
 import { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider';
 import { OnErrorProps, PickersTimezone } from '../models';
 import type { PickerValueManager } from '../internals/hooks/usePicker';
-export type Validator<TValue, TError, TValidationProps> = {
+import { PickerValidValue } from '../internals/models';
+export type Validator<TValue extends PickerValidValue, TError, TValidationProps> = {
     (params: {
         adapter: MuiPickersAdapterContextValue;
         value: TValue;
@@ -10,7 +11,7 @@ export type Validator<TValue, TError, TValidationProps> = {
     }): TError;
     valueManager: PickerValueManager<TValue, any>;
 };
-interface UseValidationOptions<TValue, TError, TValidationProps extends {}> extends OnErrorProps<TValue, TError> {
+interface UseValidationOptions<TValue extends PickerValidValue, TError, TValidationProps extends {}> extends OnErrorProps<TValue, TError> {
     /**
      * The value to validate.
      */
@@ -32,7 +33,7 @@ interface UseValidationOptions<TValue, TError, TValidationProps extends {}> exte
      */
     props: TValidationProps;
 }
-interface UseValidationReturnValue<TValue, TError> {
+interface UseValidationReturnValue<TValue extends PickerValidValue, TError> {
     /**
      * The validation error associated to the value passed to the `useValidation` hook.
      */
@@ -46,7 +47,7 @@ interface UseValidationReturnValue<TValue, TError> {
     /**
      * Get the validation error for a new value.
      * This can be used to validate the value in a change handler before updating the state.
-     * @template TValue The value type.
+     * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
      * @param {TValue} newValue The value to validate.
      * @returns {TError} The validation error associated to the new value.
      */
@@ -54,7 +55,7 @@ interface UseValidationReturnValue<TValue, TError> {
 }
 /**
  * Utility hook to check if a given value is valid based on the provided validation props.
- * @template TValue The value type. It will be either the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+ * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
  * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
  * @param {UseValidationOptions<TValue, TError, TValidationProps>} options The options to configure the hook.
  * @param {TValue} options.value The value to validate.
@@ -63,5 +64,5 @@ interface UseValidationReturnValue<TValue, TError> {
  * @param {TValidationProps} options.props The validation props, they differ depending on the component.
  * @param {(error: TError, value: TValue) => void} options.onError Callback fired when the error associated with the current value changes.
  */
-export declare function useValidation<TValue, TError, TValidationProps extends {}>(options: UseValidationOptions<TValue, TError, TValidationProps>): UseValidationReturnValue<TValue, TError>;
+export declare function useValidation<TValue extends PickerValidValue, TError, TValidationProps extends {}>(options: UseValidationOptions<TValue, TError, TValidationProps>): UseValidationReturnValue<TValue, TError>;
 export {};

package/validation/useValidation.js

@@ -5,7 +5,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { useLocalizationContext } from "../internals/hooks/useUtils.js";
 /**
  * Utility hook to check if a given value is valid based on the provided validation props.
- * @template TValue The value type. It will be either the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+ * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
  * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
  * @param {UseValidationOptions<TValue, TError, TValidationProps>} options The options to configure the hook.
  * @param {TValue} options.value The value to validate.

package/validation/validateDate.d.ts

@@ -1,11 +1,20 @@
+import type { MakeRequired } from '@mui/x-internals/types';
 import { Validator } from './useValidation';
 import { BaseDateValidationProps, DayValidationProps, MonthValidationProps, YearValidationProps } from '../internals/models/validation';
-import { DateValidationError, PickerValidDate } from '../models';
+import { DateValidationError } from '../models';
+import { PickerValue } from '../internals/models';
 /**
  * Validation props used by the Date Picker, Date Field and Date Calendar components.
  */
 export interface ExportedValidateDateProps extends DayValidationProps, MonthValidationProps, YearValidationProps, BaseDateValidationProps {
 }
-export interface ValidateDateProps extends DayValidationProps, MonthValidationProps, YearValidationProps, Required<BaseDateValidationProps> {
+/**
+ * Validation props as received by the validateDate method.
+ */
+export interface ValidateDateProps extends MakeRequired<ExportedValidateDateProps, ValidateDatePropsToDefault> {
 }
-export declare const validateDate: Validator<PickerValidDate | null, DateValidationError, ValidateDateProps>;
+/**
+ * Name of the props that should be defaulted before being passed to the validateDate method.
+ */
+export type ValidateDatePropsToDefault = keyof BaseDateValidationProps;
+export declare const validateDate: Validator<PickerValue, DateValidationError, ValidateDateProps>;

package/validation/validateDate.js

@@ -5,6 +5,14 @@ import { singleItemValueManager } from "../internals/utils/valueManagers.js";
  * Validation props used by the Date Picker, Date Field and Date Calendar components.
  */
 
+/**
+ * Validation props as received by the validateDate method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateDate method.
+ */
+
 export const validateDate = ({
   props,
   value,

package/validation/validateDateTime.d.ts

@@ -1,13 +1,21 @@
 import { Validator } from './useValidation';
-import { ExportedValidateDateProps, ValidateDateProps } from './validateDate';
-import { ExportedValidateTimeProps, ValidateTimeProps } from './validateTime';
-import { DateTimeValidationError, PickerValidDate } from '../models';
+import { ExportedValidateDateProps, ValidateDateProps, ValidateDatePropsToDefault } from './validateDate';
+import { ExportedValidateTimeProps, ValidateTimeProps, ValidateTimePropsToDefault } from './validateTime';
+import { DateTimeValidationError } from '../models';
 import { DateTimeValidationProps } from '../internals/models/validation';
+import { PickerValue } from '../internals/models';
 /**
  * Validation props used by the Date Time Picker and Date Time Field components.
  */
 export interface ExportedValidateDateTimeProps extends ExportedValidateDateProps, ExportedValidateTimeProps, DateTimeValidationProps {
 }
+/**
+ * Validation props as received by the validateDateTime method.
+ */
 export interface ValidateDateTimeProps extends ValidateDateProps, ValidateTimeProps {
 }
-export declare const validateDateTime: Validator<PickerValidDate | null, DateTimeValidationError, ValidateDateTimeProps>;
+/**
+ * Name of the props that should be defaulted before being passed to the validateDateTime method.
+ */
+export type ValidateDateTimePropsToDefault = ValidateDatePropsToDefault | ValidateTimePropsToDefault;
+export declare const validateDateTime: Validator<PickerValue, DateTimeValidationError, ValidateDateTimeProps>;

package/validation/validateDateTime.js

@@ -6,6 +6,14 @@ import { singleItemValueManager } from "../internals/utils/valueManagers.js";
  * Validation props used by the Date Time Picker and Date Time Field components.
  */
 
+/**
+ * Validation props as received by the validateDateTime method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateDateTime method.
+ */
+
 export const validateDateTime = ({
   adapter,
   value,

package/validation/validateTime.d.ts

@@ -1,11 +1,20 @@
+import type { MakeRequired } from '@mui/x-internals/types';
 import { Validator } from './useValidation';
 import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation';
-import { PickerValidDate, TimeValidationError } from '../models';
+import { TimeValidationError } from '../models';
+import { PickerValue } from '../internals/models';
 /**
  * Validation props used by the Time Picker, Time Field and Clock components.
  */
 export interface ExportedValidateTimeProps extends BaseTimeValidationProps, TimeValidationProps {
 }
-export interface ValidateTimeProps extends Required<BaseTimeValidationProps>, TimeValidationProps {
+/**
+ * Validation props as received by the validateTime method.
+ */
+export interface ValidateTimeProps extends MakeRequired<ExportedValidateTimeProps, ValidateTimePropsToDefault> {
 }
-export declare const validateTime: Validator<PickerValidDate | null, TimeValidationError, ValidateTimeProps>;
+/**
+ * Name of the props that should be defaulted before being passed to the validateTime method.
+ */
+export type ValidateTimePropsToDefault = keyof BaseTimeValidationProps;
+export declare const validateTime: Validator<PickerValue, TimeValidationError, ValidateTimeProps>;

package/validation/validateTime.js

@@ -5,6 +5,14 @@ import { singleItemValueManager } from "../internals/utils/valueManagers.js";
  * Validation props used by the Time Picker, Time Field and Clock components.
  */
 
+/**
+ * Validation props as received by the validateTime method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateTime method.
+ */
+
 export const validateTime = ({
   adapter,
   value,

package/internals/hooks/useIsLandscape.d.ts

@@ -1,4 +0,0 @@
-import { DateOrTimeViewWithMeridiem } from '../models';
-type Orientation = 'portrait' | 'landscape';
-export declare const useIsLandscape: (views: readonly DateOrTimeViewWithMeridiem[], customOrientation: Orientation | undefined) => boolean;
-export {};

package/internals/hooks/useIsLandscape.js

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-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 useIsLandscape = (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 false;
-  }
-  const orientationToUse = customOrientation || orientation;
-  return orientationToUse === 'landscape';
-};

package/internals/hooks/usePicker/usePickerLayoutProps.d.ts

@@ -1,32 +0,0 @@
-import { UsePickerValueLayoutResponse } from './usePickerValue.types';
-import { UsePickerViewsLayoutResponse } from './usePickerViews';
-import { DateOrTimeViewWithMeridiem, PickerVariant } from '../../models/common';
-/**
- * Props used to create the layout of the views.
- */
-interface UsePickerLayoutProps {
-    /**
-     * Force rendering in particular orientation.
-     */
-    orientation?: 'portrait' | 'landscape';
-}
-export interface UsePickerLayoutPropsResponseLayoutProps<TValue, TView extends DateOrTimeViewWithMeridiem> extends UsePickerValueLayoutResponse<TValue>, UsePickerViewsLayoutResponse<TView>, UsePickerLayoutProps {
-    isLandscape: boolean;
-    isRtl: boolean;
-    wrapperVariant: PickerVariant;
-    isValid: (value: TValue) => boolean;
-}
-export interface UsePickerLayoutPropsResponse<TValue, TView extends DateOrTimeViewWithMeridiem> {
-    layoutProps: UsePickerLayoutPropsResponseLayoutProps<TValue, TView>;
-}
-export interface UsePickerLayoutPropsParams<TValue, TView extends DateOrTimeViewWithMeridiem> {
-    props: UsePickerLayoutProps;
-    propsFromPickerValue: UsePickerValueLayoutResponse<TValue>;
-    propsFromPickerViews: UsePickerViewsLayoutResponse<TView>;
-    variant: PickerVariant;
-}
-/**
- * Prepare the props for the view layout (managed by `PickersLayout`)
- */
-export declare const usePickerLayoutProps: <TValue, TView extends DateOrTimeViewWithMeridiem>({ props, propsFromPickerValue, propsFromPickerViews, variant, }: UsePickerLayoutPropsParams<TValue, TView>) => UsePickerLayoutPropsResponse<TValue, TView>;
-export {};

package/internals/hooks/usePicker/usePickerLayoutProps.js

@@ -1,31 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { useRtl } from '@mui/system/RtlProvider';
-import { useIsLandscape } from "../useIsLandscape.js";
-
-/**
- * Props used to create the layout of the views.
- */
-
-/**
- * Prepare the props for the view layout (managed by `PickersLayout`)
- */
-export const usePickerLayoutProps = ({
-  props,
-  propsFromPickerValue,
-  propsFromPickerViews,
-  variant
-}) => {
-  const {
-    orientation
-  } = props;
-  const isLandscape = useIsLandscape(propsFromPickerViews.views, orientation);
-  const isRtl = useRtl();
-  const layoutProps = _extends({}, propsFromPickerViews, propsFromPickerValue, {
-    isLandscape,
-    isRtl,
-    wrapperVariant: variant
-  });
-  return {
-    layoutProps
-  };
-};

package/modern/internals/hooks/useIsLandscape.js

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-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 useIsLandscape = (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 false;
-  }
-  const orientationToUse = customOrientation || orientation;
-  return orientationToUse === 'landscape';
-};

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

@@ -1,31 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { useRtl } from '@mui/system/RtlProvider';
-import { useIsLandscape } from "../useIsLandscape.js";
-
-/**
- * Props used to create the layout of the views.
- */
-
-/**
- * Prepare the props for the view layout (managed by `PickersLayout`)
- */
-export const usePickerLayoutProps = ({
-  props,
-  propsFromPickerValue,
-  propsFromPickerViews,
-  variant
-}) => {
-  const {
-    orientation
-  } = props;
-  const isLandscape = useIsLandscape(propsFromPickerViews.views, orientation);
-  const isRtl = useRtl();
-  const layoutProps = _extends({}, propsFromPickerViews, propsFromPickerValue, {
-    isLandscape,
-    isRtl,
-    wrapperVariant: variant
-  });
-  return {
-    layoutProps
-  };
-};

package/node/internals/hooks/useIsLandscape.js

@@ -1,43 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useIsLandscape = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
-var _utils2 = require("../utils/utils");
-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';
-}
-const useIsLandscape = (views, customOrientation) => {
-  const [orientation, setOrientation] = React.useState(getOrientation);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    const eventHandler = () => {
-      setOrientation(getOrientation());
-    };
-    window.addEventListener('orientationchange', eventHandler);
-    return () => {
-      window.removeEventListener('orientationchange', eventHandler);
-    };
-  }, []);
-  if ((0, _utils2.arrayIncludes)(views, ['hours', 'minutes', 'seconds'])) {
-    // could not display 13:34:44 in landscape mode
-    return false;
-  }
-  const orientationToUse = customOrientation || orientation;
-  return orientationToUse === 'landscape';
-};
-exports.useIsLandscape = useIsLandscape;

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

@@ -1,38 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.usePickerLayoutProps = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _RtlProvider = require("@mui/system/RtlProvider");
-var _useIsLandscape = require("../useIsLandscape");
-/**
- * Props used to create the layout of the views.
- */
-
-/**
- * Prepare the props for the view layout (managed by `PickersLayout`)
- */
-const usePickerLayoutProps = ({
-  props,
-  propsFromPickerValue,
-  propsFromPickerViews,
-  variant
-}) => {
-  const {
-    orientation
-  } = props;
-  const isLandscape = (0, _useIsLandscape.useIsLandscape)(propsFromPickerViews.views, orientation);
-  const isRtl = (0, _RtlProvider.useRtl)();
-  const layoutProps = (0, _extends2.default)({}, propsFromPickerViews, propsFromPickerValue, {
-    isLandscape,
-    isRtl,
-    wrapperVariant: variant
-  });
-  return {
-    layoutProps
-  };
-};
-exports.usePickerLayoutProps = usePickerLayoutProps;