@mui/x-date-pickers 7.0.0-beta.1 → 7.0.0-beta.4

package/TimePicker/TimePicker.types.d.ts

@@ -1,11 +1,12 @@
 import { DesktopTimePickerProps, DesktopTimePickerSlots, DesktopTimePickerSlotProps } from '../DesktopTimePicker';
 import { TimeViewWithMeridiem } from '../internals/models';
 import { MobileTimePickerProps, MobileTimePickerSlots, MobileTimePickerSlotProps } from '../MobileTimePicker';
-export interface TimePickerSlots<TDate> extends DesktopTimePickerSlots<TDate>, MobileTimePickerSlots<TDate, TimeViewWithMeridiem> {
+import { PickerValidDate } from '../models';
+export interface TimePickerSlots<TDate extends PickerValidDate> extends DesktopTimePickerSlots<TDate>, MobileTimePickerSlots<TDate, TimeViewWithMeridiem> {
 }
-export interface TimePickerSlotProps<TDate> extends DesktopTimePickerSlotProps<TDate>, MobileTimePickerSlotProps<TDate, TimeViewWithMeridiem> {
+export interface TimePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileTimePickerSlotProps<TDate, TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {
 }
-export interface TimePickerProps<TDate> extends DesktopTimePickerProps<TDate>, Omit<MobileTimePickerProps<TDate, TimeViewWithMeridiem>, 'views'> {
+export interface TimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends DesktopTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>, Omit<MobileTimePickerProps<TDate, TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
     /**
      * CSS media query when `Mobile` mode will be changed to `Desktop`.
      * @default '@media (pointer: fine)'
@@ -21,5 +22,5 @@ export interface TimePickerProps<TDate> extends DesktopTimePickerProps<TDate>, O
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: TimePickerSlotProps<TDate>;
+    slotProps?: TimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
 }

package/TimePicker/TimePickerToolbar.d.ts

@@ -2,14 +2,16 @@ import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { TimePickerToolbarClasses } from './timePickerToolbarClasses';
 import { TimeViewWithMeridiem } from '../internals/models';
-export interface TimePickerToolbarProps<TDate> extends BaseToolbarProps<TDate | null, TimeViewWithMeridiem> {
+import { PickerValidDate } from '../models';
+export interface TimePickerToolbarProps<TDate extends PickerValidDate> extends BaseToolbarProps<TDate | null, TimeViewWithMeridiem>, ExportedTimePickerToolbarProps {
     ampm?: boolean;
     ampmInClock?: boolean;
-    classes?: Partial<TimePickerToolbarClasses>;
 }
 export interface ExportedTimePickerToolbarProps extends ExportedBaseToolbarProps {
-    ampm?: boolean;
-    ampmInClock?: boolean;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<TimePickerToolbarClasses>;
 }
 /**
  * Demos:
@@ -21,7 +23,7 @@ export interface ExportedTimePickerToolbarProps extends ExportedBaseToolbarProps
  *
  * - [TimePickerToolbar API](https://mui.com/x/api/date-pickers/time-picker-toolbar/)
  */
-declare function TimePickerToolbar<TDate extends unknown>(inProps: TimePickerToolbarProps<TDate>): React.JSX.Element;
+declare function TimePickerToolbar<TDate extends PickerValidDate>(inProps: TimePickerToolbarProps<TDate>): React.JSX.Element;
 declare namespace TimePickerToolbar {
     var propTypes: any;
 }

package/TimePicker/TimePickerToolbar.js

@@ -1,7 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly"];
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { useTheme, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -132,7 +133,8 @@ function TimePickerToolbar(inProps) {
       onViewChange,
       views,
       disabled,
-      readOnly
+      readOnly,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
@@ -160,7 +162,7 @@ function TimePickerToolbar(inProps) {
     toolbarTitle: localeText.timePickerToolbarTitle,
     isLandscape: isLandscape,
     ownerState: ownerState,
-    className: classes.root
+    className: clsx(classes.root, className)
   }, other, {
     children: [/*#__PURE__*/_jsxs(TimePickerToolbarHourMinuteLabel, {
       className: classes.hourMinuteLabel,
@@ -213,6 +215,9 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   // ----------------------------------------------------------------------
   ampm: PropTypes.bool,
   ampmInClock: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   disabled: PropTypes.bool,
@@ -230,6 +235,9 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   titleId: PropTypes.string,
   /**
@@ -241,7 +249,7 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: PropTypes.node,
-  value: PropTypes.any,
+  value: PropTypes.object,
   /**
    * Currently visible picker view.
    */

package/TimePicker/shared.d.ts

@@ -5,12 +5,12 @@ import { BasePickerInputProps } from '../internals/models/props/basePickerProps'
 import { BaseTimeValidationProps } from '../internals/models/validation';
 import { LocalizedComponent } from '../locales/utils/pickersLocaleTextApi';
 import { TimePickerToolbarProps, ExportedTimePickerToolbarProps } from './TimePickerToolbar';
-import { TimeValidationError } from '../models';
+import { PickerValidDate, TimeValidationError } from '../models';
 import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
 import { TimeViewRendererProps } from '../timeViewRenderers';
 import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock';
 import { TimeViewWithMeridiem } from '../internals/models';
-export interface BaseTimePickerSlots<TDate> extends TimeClockSlots {
+export interface BaseTimePickerSlots<TDate extends PickerValidDate> extends TimeClockSlots {
     /**
      * Custom component for the toolbar rendered above the views.
      * @default TimePickerToolbar
@@ -20,7 +20,7 @@ export interface BaseTimePickerSlots<TDate> extends TimeClockSlots {
 export interface BaseTimePickerSlotProps extends TimeClockSlotProps {
     toolbar?: ExportedTimePickerToolbarProps;
 }
-export interface BaseTimePickerProps<TDate, TView extends TimeViewWithMeridiem> extends BasePickerInputProps<TDate | null, TDate, TView, TimeValidationError>, ExportedBaseClockProps<TDate> {
+export interface BaseTimePickerProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem> extends BasePickerInputProps<TDate | null, TDate, TView, TimeValidationError>, ExportedBaseClockProps<TDate> {
     /**
      * Display ampm controls under the clock (instead of in the toolbar).
      * @default true on desktop, false on mobile
@@ -43,6 +43,6 @@ export interface BaseTimePickerProps<TDate, TView extends TimeViewWithMeridiem>
      */
     viewRenderers?: Partial<PickerViewRendererLookup<TDate | null, TView, TimeViewRendererProps<TView, BaseClockProps<TDate, TView>>, {}>>;
 }
-type UseTimePickerDefaultizedProps<TDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>> = LocalizedComponent<TDate, DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>>;
-export declare function useTimePickerDefaultizedProps<TDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>>(props: Props, name: string): UseTimePickerDefaultizedProps<TDate, TView, Props>;
+type UseTimePickerDefaultizedProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>> = LocalizedComponent<TDate, DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>>;
+export declare function useTimePickerDefaultizedProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>>(props: Props, name: string): UseTimePickerDefaultizedProps<TDate, TView, Props>;
 export {};

package/YearCalendar/YearCalendar.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { YearCalendarProps } from './YearCalendar.types';
-type YearCalendarComponent = (<TDate>(props: YearCalendarProps<TDate>) => React.JSX.Element) & {
+import { PickerValidDate } from '../models';
+type YearCalendarComponent = (<TDate extends PickerValidDate>(props: YearCalendarProps<TDate>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/YearCalendar/YearCalendar.js

@@ -270,7 +270,7 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * The default selected value.
    * Used when the component is not controlled.
    */
-  defaultValue: PropTypes.any,
+  defaultValue: PropTypes.object,
   /**
    * If `true` picker is disabled
    */
@@ -295,11 +295,11 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: PropTypes.any,
+  maxDate: PropTypes.object,
   /**
    * Minimal selectable date.
    */
-  minDate: PropTypes.any,
+  minDate: PropTypes.object,
   /**
    * Callback fired when the value changes.
    * @template TDate
@@ -316,7 +316,7 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid year using the validation props, except callbacks such as `shouldDisableYear`.
    */
-  referenceDate: PropTypes.any,
+  referenceDate: PropTypes.object,
   /**
    * Disable specific year.
    * @template TDate
@@ -340,7 +340,7 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.any,
+  value: PropTypes.object,
   /**
    * Years rendered per row.
    * @default 3

package/YearCalendar/YearCalendar.types.d.ts

@@ -2,7 +2,7 @@ import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { YearCalendarClasses } from './yearCalendarClasses';
 import { BaseDateValidationProps, YearValidationProps } from '../internals/models/validation';
-import { TimezoneProps } from '../models';
+import { PickerValidDate, TimezoneProps } from '../models';
 export interface ExportedYearCalendarProps {
     /**
      * Years rendered per row.
@@ -10,7 +10,7 @@ export interface ExportedYearCalendarProps {
      */
     yearsPerRow?: 3 | 4;
 }
-export interface YearCalendarProps<TDate> extends ExportedYearCalendarProps, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, TimezoneProps {
+export interface YearCalendarProps<TDate extends PickerValidDate> extends ExportedYearCalendarProps, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, TimezoneProps {
     autoFocus?: boolean;
     className?: string;
     /**

package/dateTimeViewRenderers/dateTimeViewRenderers.d.ts

@@ -3,7 +3,8 @@ import { DateCalendarProps } from '../DateCalendar';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { MultiSectionDigitalClockProps } from '../MultiSectionDigitalClock';
 import type { DateTimePickerProps } from '../DateTimePicker/DateTimePicker.types';
-export interface DateTimeViewRendererProps<TDate> extends Omit<DateCalendarProps<TDate> & MultiSectionDigitalClockProps<TDate>, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView' | 'slots' | 'slotProps'>, Pick<DateTimePickerProps<TDate>, 'slots' | 'slotProps'> {
+import { PickerValidDate } from '../models';
+export interface DateTimeViewRendererProps<TDate extends PickerValidDate> extends Omit<DateCalendarProps<TDate> & MultiSectionDigitalClockProps<TDate>, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView' | 'slots' | 'slotProps'>, Pick<DateTimePickerProps<TDate>, 'slots' | 'slotProps'> {
     view: DateOrTimeViewWithMeridiem;
     onViewChange?: (view: DateOrTimeViewWithMeridiem) => void;
     views: readonly DateOrTimeViewWithMeridiem[];
@@ -11,4 +12,4 @@ export interface DateTimeViewRendererProps<TDate> extends Omit<DateCalendarProps
     timeViewsCount: number;
     shouldRenderTimeInASingleColumn: boolean;
 }
-export declare const renderDesktopDateTimeView: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, shouldRenderTimeInASingleColumn, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;
+export declare const renderDesktopDateTimeView: <TDate extends PickerValidDate>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, shouldRenderTimeInASingleColumn, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;

package/dateViewRenderers/dateViewRenderers.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { DateCalendarProps } from '../DateCalendar';
-import { DateView } from '../models';
+import { DateView, PickerValidDate } from '../models';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
-export interface DateViewRendererProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends Omit<DateCalendarProps<TDate>, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView'> {
+export interface DateViewRendererProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends Omit<DateCalendarProps<TDate>, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView'> {
     view: TView;
     onViewChange?: (view: TView) => void;
     views: readonly TView[];
     focusedView: TView | null;
 }
-export declare const renderDateViewCalendar: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;
+export declare const renderDateViewCalendar: <TDate extends PickerValidDate>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;

package/hooks/index.d.ts

@@ -1,2 +1,2 @@
 export { useClearableField } from './useClearableField';
-export type { UseClearableFieldSlots, UseClearableFieldSlotProps } from './useClearableField';
+export type { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, UseClearableFieldResponse, } from './useClearableField';

package/hooks/useClearableField.d.ts

@@ -4,8 +4,15 @@ import MuiIconButton from '@mui/material/IconButton';
 import { SxProps } from '@mui/system';
 import { ClearIcon } from '../icons';
 export interface ExportedUseClearableFieldProps {
+    /**
+     * If `true`, a clear button will be shown in the field allowing value clearing.
+     * @default false
+     */
     clearable?: boolean;
-    onClear?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Callback fired when the clear button is clicked.
+     */
+    onClear?: React.MouseEventHandler;
 }
 export interface UseClearableFieldSlots {
     /**
@@ -31,5 +38,6 @@ interface UseClearableFieldProps extends ExportedUseClearableFieldProps {
     slots?: UseClearableFieldSlots;
     slotProps?: UseClearableFieldSlotProps;
 }
-export declare const useClearableField: <TFieldProps extends UseClearableFieldProps>(props: TFieldProps) => Omit<TFieldProps, "slotProps" | "slots" | "onClear" | "clearable">;
+export type UseClearableFieldResponse<TFieldProps extends UseClearableFieldProps> = Omit<TFieldProps, 'clearable' | 'onClear' | 'slots' | 'slotProps'>;
+export declare const useClearableField: <TFieldProps extends UseClearableFieldProps>(props: TFieldProps) => UseClearableFieldResponse<TFieldProps>;
 export {};

package/index.js

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

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.d.ts

@@ -14,6 +14,9 @@ export interface ExportedPickersArrowSwitcherProps {
      * @default {}
      */
     slotProps?: PickersArrowSwitcherSlotProps;
+    /**
+     * Override or extend the styles applied to the component.
+     */
     classes?: Partial<PickersArrowSwitcherClasses>;
     /**
      * Format used to display the date.

package/internals/components/PickersPopper.d.ts

@@ -59,6 +59,9 @@ export interface PickerPopperProps extends UsePickerValueActions {
     onBlur?: () => void;
     slots?: PickersPopperSlots;
     slotProps?: PickersPopperSlotProps;
+    /**
+     * Override or extend the styles applied to the component.
+     */
     classes?: Partial<PickersPopperClasses>;
     shouldRestoreFocus?: () => boolean;
     reduceAnimations?: boolean;

package/internals/components/PickersPopper.js

@@ -225,8 +225,7 @@ export function PickersPopper(inProps) {
   } = props;
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
-      // IE11, Edge (prior to using Blink?) use 'Esc'
-      if (open && (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc')) {
+      if (open && nativeEvent.key === 'Escape') {
         onDismiss();
       }
     }

package/internals/demo/DemoContainer.js

@@ -3,6 +3,7 @@ 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 '@mui/x-date-pickers/PickersTextField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getChildTypeFromChildName = childName => {
@@ -123,13 +124,13 @@ export function DemoContainer(props) {
   } else if (childrenTypes.has('single-input-range-field')) {
     if (!childrenSupportedSections.has('date-time')) {
       extraSx = {
-        [`& > .${textFieldClasses.root}`]: {
+        [`& > .${textFieldClasses.root}, & > .${pickersTextFieldClasses.root}`]: {
           minWidth: 300
         }
       };
     } else {
       extraSx = {
-        [`& > .${textFieldClasses.root}`]: {
+        [`& > .${textFieldClasses.root}, & > .${pickersTextFieldClasses.root}`]: {
           minWidth: {
             xs: 300,
             // If demo also contains MultiInputDateTimeRangeField, increase width to avoid cutting off the value.
@@ -140,21 +141,21 @@ export function DemoContainer(props) {
     }
   } else if (childrenSupportedSections.has('date-time')) {
     extraSx = {
-      [`& > .${textFieldClasses.root}`]: {
+      [`& > .${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} > .${textFieldClasses.root}, & > .${stackClasses.root} > .${pickersTextFieldClasses.root}`]: {
           minWidth: 210
         }
       };
     }
   } else {
     extraSx = {
-      [`& > .${textFieldClasses.root}`]: {
+      [`& > .${textFieldClasses.root}, & > .${pickersTextFieldClasses.root}`]: {
         minWidth: 200
       }
     };

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

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

package/internals/hooks/defaultizedFieldProps.d.ts

@@ -0,0 +1,19 @@
+import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps, TimeValidationProps } from '../models/validation';
+import { DefaultizedProps } from '../models/helpers';
+import { PickerValidDate } from '../../models';
+export interface UseDefaultizedDateFieldBaseProps<TDate extends PickerValidDate> extends BaseDateValidationProps<TDate> {
+    format?: string;
+}
+export declare const useDefaultizedDateField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedDateFieldBaseProps<TDate>, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & Omit<TKnownProps, keyof UseDefaultizedDateFieldBaseProps<any>> & Required<Pick<TKnownProps, keyof UseDefaultizedDateFieldBaseProps<any>>>;
+export interface UseDefaultizedTimeFieldBaseProps extends BaseTimeValidationProps {
+    format?: string;
+}
+export declare const useDefaultizedTimeField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedTimeFieldBaseProps & {
+    ampm?: boolean | undefined;
+}, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & Omit<TKnownProps, keyof UseDefaultizedTimeFieldBaseProps> & Required<Pick<TKnownProps, keyof UseDefaultizedTimeFieldBaseProps>>;
+export interface UseDefaultizedDateTimeFieldBaseProps<TDate extends PickerValidDate> extends BaseDateValidationProps<TDate>, BaseTimeValidationProps {
+    format?: string;
+}
+export declare const useDefaultizedDateTimeField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedDateTimeFieldBaseProps<TDate> & DateTimeValidationProps<TDate> & TimeValidationProps<TDate> & {
+    ampm?: boolean | undefined;
+}, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & Omit<TKnownProps, keyof UseDefaultizedDateTimeFieldBaseProps<any>> & Required<Pick<TKnownProps, keyof UseDefaultizedDateTimeFieldBaseProps<any>>>;

package/internals/hooks/defaultizedFieldProps.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { applyDefaultDate } from '../utils/date-utils';
+import { useUtils, useDefaultDates } from './useUtils';
+export const useDefaultizedDateField = props => {
+  var _props$disablePast, _props$disableFuture, _props$format;
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  return _extends({}, props, {
+    disablePast: (_props$disablePast = props.disablePast) != null ? _props$disablePast : false,
+    disableFuture: (_props$disableFuture = props.disableFuture) != null ? _props$disableFuture : false,
+    format: (_props$format = props.format) != null ? _props$format : utils.formats.keyboardDate,
+    minDate: applyDefaultDate(utils, props.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(utils, props.maxDate, defaultDates.maxDate)
+  });
+};
+export const useDefaultizedTimeField = props => {
+  var _props$ampm, _props$disablePast2, _props$disableFuture2, _props$format2;
+  const utils = useUtils();
+  const ampm = (_props$ampm = props.ampm) != null ? _props$ampm : utils.is12HourCycleInCurrentLocale();
+  const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h;
+  return _extends({}, props, {
+    disablePast: (_props$disablePast2 = props.disablePast) != null ? _props$disablePast2 : false,
+    disableFuture: (_props$disableFuture2 = props.disableFuture) != null ? _props$disableFuture2 : false,
+    format: (_props$format2 = props.format) != null ? _props$format2 : defaultFormat
+  });
+};
+export const useDefaultizedDateTimeField = props => {
+  var _props$ampm2, _props$disablePast3, _props$disableFuture3, _props$format3, _props$minDateTime, _props$maxDateTime, _props$minDateTime2, _props$maxDateTime2;
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  const ampm = (_props$ampm2 = props.ampm) != null ? _props$ampm2 : utils.is12HourCycleInCurrentLocale();
+  const defaultFormat = ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h;
+  return _extends({}, props, {
+    disablePast: (_props$disablePast3 = props.disablePast) != null ? _props$disablePast3 : false,
+    disableFuture: (_props$disableFuture3 = props.disableFuture) != null ? _props$disableFuture3 : false,
+    format: (_props$format3 = props.format) != null ? _props$format3 : defaultFormat,
+    disableIgnoringDatePartForTimeValidation: Boolean(props.minDateTime || props.maxDateTime),
+    minDate: applyDefaultDate(utils, (_props$minDateTime = props.minDateTime) != null ? _props$minDateTime : props.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(utils, (_props$maxDateTime = props.maxDateTime) != null ? _props$maxDateTime : props.maxDate, defaultDates.maxDate),
+    minTime: (_props$minDateTime2 = props.minDateTime) != null ? _props$minDateTime2 : props.minTime,
+    maxTime: (_props$maxDateTime2 = props.maxDateTime) != null ? _props$maxDateTime2 : props.maxTime
+  });
+};

package/internals/hooks/useClockReferenceDate.d.ts

@@ -1,8 +1,8 @@
-import { MuiPickersAdapter, PickersTimezone } from '../../models';
-export declare const useClockReferenceDate: <TDate, TProps extends {}>({ value, referenceDate: referenceDateProp, utils, props, timezone, }: {
+import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../../models';
+export declare const useClockReferenceDate: <TDate extends PickerValidDate, TProps extends {}>({ value, referenceDate: referenceDateProp, utils, props, timezone, }: {
     value: TDate;
     referenceDate: TDate | undefined;
     utils: MuiPickersAdapter<TDate, any>;
     props: TProps;
     timezone: PickersTimezone;
-}) => any;
+}) => TDate;

package/internals/hooks/useDesktopPicker/useDesktopPicker.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { UseDesktopPickerParams, UseDesktopPickerProps } from './useDesktopPicker.types';
+import { PickerValidDate } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
 /**
  * Hook managing all the single-date desktop pickers:
@@ -7,6 +8,6 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - DesktopDateTimePicker
  * - DesktopTimePicker
  */
-export declare const useDesktopPicker: <TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TDate, TView, TExternalProps>) => {
+export declare const useDesktopPicker: <TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TDate, TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -36,6 +36,9 @@ export const useDesktopPicker = _ref => {
     sx,
     format,
     formatDensity,
+    enableAccessibleFieldDOMStructure,
+    selectedSections,
+    onSelectedSectionsChange,
     timezone,
     name,
     label,
@@ -47,8 +50,8 @@ export const useDesktopPicker = _ref => {
     reduceAnimations
   } = props;
   const utils = useUtils();
-  const internalInputRef = React.useRef(null);
   const containerRef = React.useRef(null);
+  const fieldRef = React.useRef(null);
   const labelId = useId();
   const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null || (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
   const {
@@ -61,7 +64,7 @@ export const useDesktopPicker = _ref => {
     fieldProps: pickerFieldProps
   } = usePicker(_extends({}, pickerParams, {
     props,
-    inputRef: internalInputRef,
+    fieldRef,
     autoFocusView: true,
     additionalViewProps: {},
     wrapperVariant: 'desktop'
@@ -103,12 +106,17 @@ export const useDesktopPicker = _ref => {
       sx,
       format,
       formatDensity,
+      enableAccessibleFieldDOMStructure,
+      selectedSections,
+      onSelectedSectionsChange,
       timezone,
       label,
       name,
       autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined
-    }),
+    }, inputRef ? {
+      inputRef
+    } : {}),
     ownerState: props
   });
 
@@ -129,7 +137,6 @@ export const useDesktopPicker = _ref => {
     clearButton: slots.clearButton
   }, fieldProps.slots);
   const Layout = (_slots$layout = slots.layout) != null ? _slots$layout : PickersLayout;
-  const handleInputRef = useForkRef(internalInputRef, fieldProps.inputRef, inputRef);
   let labelledById = labelId;
   if (isToolbarHidden) {
     if (label) {
@@ -146,12 +153,13 @@ export const useDesktopPicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps == null ? void 0 : innerSlotProps.popper)
   });
+  const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
   const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
     localeText: localeText,
     children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
       slots: slotsForField,
       slotProps: slotProps,
-      inputRef: handleInputRef
+      unstableFieldRef: handleFieldRef
     })), /*#__PURE__*/_jsx(PickersPopper, _extends({
       role: "dialog",
       placement: "bottom-start",