@mui/x-date-pickers 5.0.0-beta.6 → 5.0.0-beta.7

package/CHANGELOG.md

@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.16.0
+
+_Aug 25, 2022_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce column grouping for data grid (#5133) @alexfauquette
+
+  You can now group columns using the `columnGroupingModel` prop. This lets you to display more structured data.
+
+  <img src="https://user-images.githubusercontent.com/45398769/186178366-4fba66b2-bf90-4c7a-9d83-940a7fc78704.png" width="800" />
+
+  To enable this feature, add `experimentalFeatures={{ columnGrouping: true }}`.
+  The grouping header can be fully customized.
+  See the [documentation](https://mui.com/x/react-data-grid/column-groups/) to explore everything it has to offer.
+
+- 🐞 Bugfixes
+- 🌏 New locales for pickers thanks to @tesseractjh and @drastus
+
+### `@mui/x-data-grid@v5.16.0` / `@mui/x-data-grid-pro@v5.16.0` / `@mui/x-data-grid-premium@v5.16.0`
+
+#### Changes
+
+- [DataGrid] Implement column grouping (#5133) @alexfauquette
+- [DataGrid] Handle `disableVirtualization` prop change (#5889) @cherniavskii
+- [DataGrid] Improve `GridRowModel` typing (#5734) @cherniavskii
+- [DataGrid] Update deprecation note for `GridColDef` `hide` property (#5886) @cherniavskii
+
+### `@mui/x-date-pickers@v5.0.0-beta.7` / `@mui/x-date-pickers-pro@v5.0.0-beta.7`
+
+#### Changes
+
+- [DatePicker] Fix to pass down `className` prop provided on DatePicker to `renderInput` (#5471) @CruseCtrl
+- [DatePicker] Improve `a11y` support (#5809) @LukasTy
+- [pickers] Add `PaperContent` component slot (#5801) @LukasTy
+- [pickers] Add a breaking change section in the migration guide (#5805) @alexfauquette
+- [pickers] Add new translations to `localeText` (#5143) @alexfauquette
+- [pickers] Document components slots (#4657) @flaviendelangle
+- [pickers] Add new unstable field components (#5504) @flaviendelangle
+- [pickers] Fallback to default `minDate` / `maxDate` when `null` value is passed (#5397) @flaviendelangle
+- [l10n] Add Korean (ko-KR) locale (#5854) @tesseractjh
+- [l10n] Add Polish (pl-PL) locale (#5833) @drastus
+
+### Docs
+
+- [docs] Fix typo in `migration from lab` (#5277) @chuckwired
+- [docs] Use `dayjs` instead of `date-fns` in doc examples (#5481) @flaviendelangle
+
+### Core
+
+- [core] Clarify the scope of the license key used for tests and documentation (#5824) @oliviertassinari
+- [core] Fix Typescript error on field hooks (#5892) @flaviendelangle
+- [core] Memoize `columns` in `useDemoData` hook (#5848) @cherniavskii
+- [core] Remove Firefox from the BrowserStack list (#5874) @DanailH
+- [core] Small changes to the release script (#5840) @m4theushw
+
 ## 5.15.3
 
 _Aug 18, 2022_

package/CalendarPicker/CalendarPicker.d.ts

@@ -4,12 +4,13 @@ import { PickerOnChangeFn } from '../internals/hooks/useViews';
 import { ExportedCalendarHeaderProps, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps } from './PickersCalendarHeader';
 import { CalendarPickerView } from '../internals/models';
 import { CalendarPickerClasses } from './calendarPickerClasses';
-import { MonthValidationProps, YearValidationProps } from '../internals/hooks/validation/models';
+import { BaseDateValidationProps, DayValidationProps, MonthValidationProps, YearValidationProps } from '../internals/hooks/validation/models';
+import { DefaultizedProps } from '../internals/models/helpers';
 export interface CalendarPickerSlotsComponent extends PickersCalendarHeaderSlotsComponent {
 }
 export interface CalendarPickerSlotsComponentsProps extends PickersCalendarHeaderSlotsComponentsProps {
 }
-export interface CalendarPickerProps<TDate> extends ExportedDayPickerProps<TDate>, YearValidationProps<TDate>, MonthValidationProps<TDate>, ExportedCalendarHeaderProps<TDate> {
+export interface CalendarPickerProps<TDate> extends ExportedDayPickerProps<TDate>, BaseDateValidationProps<TDate>, DayValidationProps<TDate>, YearValidationProps<TDate>, MonthValidationProps<TDate>, ExportedCalendarHeaderProps<TDate> {
     className?: string;
     classes?: Partial<CalendarPickerClasses>;
     /**
@@ -86,6 +87,7 @@ export interface CalendarPickerProps<TDate> extends ExportedDayPickerProps<TDate
     onMonthChange?: (month: TDate) => void | Promise<void>;
 }
 export declare type ExportedCalendarPickerProps<TDate> = Omit<CalendarPickerProps<TDate>, 'date' | 'view' | 'views' | 'openTo' | 'onChange' | 'changeView' | 'slideDirection' | 'currentMonth' | 'className' | 'classes' | 'components' | 'componentsProps'>;
+export declare type CalendarPickerDefaultizedProps<TDate> = DefaultizedProps<CalendarPickerProps<TDate>, 'views' | 'openTo' | 'loading' | 'reduceAnimations' | 'renderLoading' | keyof BaseDateValidationProps<TDate>>;
 declare type CalendarPickerComponent = (<TDate>(props: CalendarPickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };
@@ -99,5 +101,5 @@ declare type CalendarPickerComponent = (<TDate>(props: CalendarPickerProps<TDate
  *
  * - [CalendarPicker API](https://mui.com/x/api/date-pickers/calendar-picker/)
  */
-declare const CalendarPicker: CalendarPickerComponent;
-export { CalendarPicker };
+export declare const CalendarPicker: CalendarPickerComponent;
+export {};

package/CalendarPicker/CalendarPicker.js

@@ -1,11 +1,12 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoFocus", "onViewChange", "date", "disableFuture", "disablePast", "defaultCalendarMonth", "loading", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "renderLoading", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["autoFocus", "onViewChange", "date", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_useId as useId } from '@mui/material/utils';
 import { MonthPicker } from '../MonthPicker/MonthPicker';
 import { useCalendarState } from './useCalendarState';
 import { useDefaultDates, useUtils } from '../internals/hooks/useUtils';
@@ -14,7 +15,7 @@ import { DayPicker } from './DayPicker';
 import { useViews } from '../internals/hooks/useViews';
 import { PickersCalendarHeader } from './PickersCalendarHeader';
 import { YearPicker } from '../YearPicker/YearPicker';
-import { findClosestEnabledDate } from '../internals/utils/date-utils';
+import { findClosestEnabledDate, parseNonNullablePickerDate } from '../internals/utils/date-utils';
 import { PickerViewRoot } from '../internals/components/PickerViewRoot';
 import { defaultReduceAnimations } from '../internals/utils/defaultReduceAnimations';
 import { getCalendarPickerUtilityClass } from './calendarPickerClasses';
@@ -32,6 +33,29 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getCalendarPickerUtilityClass, classes);
 };
 
+function useCalendarPickerDefaultizedProps(props, name) {
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  const themeProps = useThemeProps({
+    props,
+    name
+  });
+  return _extends({
+    loading: false,
+    disablePast: false,
+    disableFuture: false,
+    openTo: 'day',
+    views: ['year', 'day'],
+    reduceAnimations: defaultReduceAnimations,
+    renderLoading: () => /*#__PURE__*/_jsx("span", {
+      children: "..."
+    })
+  }, themeProps, {
+    minDate: parseNonNullablePickerDate(utils, themeProps.minDate, defaultDates.minDate),
+    maxDate: parseNonNullablePickerDate(utils, themeProps.maxDate, defaultDates.maxDate)
+  });
+}
+
 const CalendarPickerRoot = styled(PickerViewRoot, {
   name: 'MuiCalendarPicker',
   slot: 'Root',
@@ -58,13 +82,10 @@ const CalendarPickerViewTransitionContainer = styled(PickersFadeTransitionGroup,
  *
  * - [CalendarPicker API](https://mui.com/x/api/date-pickers/calendar-picker/)
  */
-const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inProps, ref) {
+export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inProps, ref) {
   const utils = useUtils();
-  const defaultDates = useDefaultDates();
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiCalendarPicker'
-  });
+  const id = useId();
+  const props = useCalendarPickerDefaultizedProps(inProps, 'MuiCalendarPicker');
 
   const {
     autoFocus,
@@ -73,25 +94,21 @@ const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inP
     disableFuture,
     disablePast,
     defaultCalendarMonth,
-    loading = false,
     onChange,
     onYearChange,
     onMonthChange,
-    reduceAnimations = defaultReduceAnimations,
-    renderLoading = () => /*#__PURE__*/_jsx("span", {
-      children: "..."
-    }),
+    reduceAnimations,
     shouldDisableDate,
     shouldDisableMonth,
     shouldDisableYear,
     view,
-    views = ['year', 'day'],
-    openTo = 'day',
+    views,
+    openTo,
     className,
     disabled,
     readOnly,
-    minDate = defaultDates.minDate,
-    maxDate = defaultDates.maxDate,
+    minDate,
+    maxDate,
     disableHighlightToday
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -220,6 +237,7 @@ const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inP
     readOnly,
     disabled
   };
+  const gridLabelId = `${id}-grid-label`;
   return /*#__PURE__*/_jsxs(CalendarPickerRoot, {
     ref: ref,
     className: clsx(classes.root, className),
@@ -238,7 +256,8 @@ const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inP
       disabled: disabled,
       disablePast: disablePast,
       disableFuture: disableFuture,
-      reduceAnimations: reduceAnimations
+      reduceAnimations: reduceAnimations,
+      labelId: gridLabelId
     })), /*#__PURE__*/_jsx(CalendarPickerViewTransitionContainer, {
       reduceAnimations: reduceAnimations,
       className: classes.viewTransitionContainer,
@@ -262,9 +281,8 @@ const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inP
           reduceAnimations: reduceAnimations,
           selectedDays: [date],
           onSelectedDaysChange: onSelectedDayChange,
-          loading: loading,
-          renderLoading: renderLoading,
-          shouldDisableDate: shouldDisableDate
+          shouldDisableDate: shouldDisableDate,
+          gridLabelId: gridLabelId
         }))]
       })
     })]
@@ -469,5 +487,4 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
    * @default ['year', 'day']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired)
-} : void 0;
-export { CalendarPicker };
+} : void 0;

package/CalendarPicker/DayPicker.d.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { PickersDayProps } from '../PickersDay/PickersDay';
 import { PickerOnChangeFn } from '../internals/hooks/useViews';
 import { SlideDirection, SlideTransitionProps } from './PickersSlideTransition';
-import { DayValidationProps } from '../internals/hooks/validation/models';
-export interface ExportedDayPickerProps<TDate> extends DayValidationProps<TDate>, Pick<PickersDayProps<TDate>, 'disableHighlightToday' | 'showDaysOutsideCurrentMonth'> {
+import { BaseDateValidationProps, DayValidationProps } from '../internals/hooks/validation/models';
+export interface ExportedDayPickerProps<TDate> extends Pick<PickersDayProps<TDate>, 'disableHighlightToday' | 'showDaysOutsideCurrentMonth'> {
     autoFocus?: boolean;
     /**
      * If `true` renders `LoadingComponent` in calendar instead of calendar view.
@@ -34,7 +34,7 @@ export interface ExportedDayPickerProps<TDate> extends DayValidationProps<TDate>
      */
     dayOfWeekFormatter?: (day: string) => string;
 }
-export interface DayPickerProps<TDate> extends ExportedDayPickerProps<TDate> {
+export interface DayPickerProps<TDate> extends ExportedDayPickerProps<TDate>, DayValidationProps<TDate>, Required<BaseDateValidationProps<TDate>> {
     autoFocus?: boolean;
     className?: string;
     currentMonth: TDate;
@@ -49,6 +49,7 @@ export interface DayPickerProps<TDate> extends ExportedDayPickerProps<TDate> {
     reduceAnimations: boolean;
     slideDirection: SlideDirection;
     TransitionProps?: Partial<SlideTransitionProps>;
+    gridLabelId?: string;
 }
 /**
  * @ignore - do not document.

package/CalendarPicker/DayPicker.js

@@ -81,7 +81,8 @@ export function DayPicker(props) {
     minDate,
     maxDate,
     shouldDisableDate,
-    dayOfWeekFormatter = defaultDayOfWeekFormatter
+    dayOfWeekFormatter = defaultDayOfWeekFormatter,
+    gridLabelId
   } = props;
   const isDateDisabled = useIsDayDisabled({
     shouldDisableDate,
@@ -103,14 +104,19 @@ export function DayPicker(props) {
   const transitionKey = currentMonthNumber; // eslint-disable-next-line react-hooks/exhaustive-deps
 
   const slideNodeRef = React.useMemo(() => /*#__PURE__*/React.createRef(), [transitionKey]);
-  return /*#__PURE__*/_jsxs(React.Fragment, {
+  const startOfCurrentWeek = utils.startOfWeek(now);
+  return /*#__PURE__*/_jsxs("div", {
+    role: "grid",
+    "aria-labelledby": gridLabelId,
     children: [/*#__PURE__*/_jsx(PickersCalendarDayHeader, {
+      role: "row",
       children: utils.getWeekdays().map((day, i) => {
         var _dayOfWeekFormatter;
 
         return /*#__PURE__*/_jsx(PickersCalendarWeekDayLabel, {
-          "aria-hidden": true,
           variant: "caption",
+          role: "columnheader",
+          "aria-label": utils.format(utils.addDays(startOfCurrentWeek, i), 'weekday'),
           children: (_dayOfWeekFormatter = dayOfWeekFormatter == null ? void 0 : dayOfWeekFormatter(day)) != null ? _dayOfWeekFormatter : day
         }, day + i.toString());
       })
@@ -126,28 +132,34 @@ export function DayPicker(props) {
       nodeRef: slideNodeRef,
       children: /*#__PURE__*/_jsx(PickersCalendarWeekContainer, {
         ref: slideNodeRef,
-        role: "grid",
+        role: "rowgroup",
         children: utils.getWeekArray(currentMonth).map(week => /*#__PURE__*/_jsx(PickersCalendarWeek, {
           role: "row",
           children: week.map(day => {
+            const isSelected = validSelectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
+            const isToday = utils.isSameDay(day, now);
             const pickersDayProps = {
               key: day == null ? void 0 : day.toString(),
               day,
               isAnimating: isMonthSwitchingAnimating,
               disabled: disabled || isDateDisabled(day),
               autoFocus: autoFocus && focusedDay !== null && utils.isSameDay(day, focusedDay),
-              today: utils.isSameDay(day, now),
+              today: isToday,
               outsideCurrentMonth: utils.getMonth(day) !== currentMonthNumber,
-              selected: validSelectedDays.some(selectedDay => utils.isSameDay(selectedDay, day)),
+              selected: isSelected,
               disableHighlightToday,
               showDaysOutsideCurrentMonth,
               onDayFocus: onFocusedDayChange,
-              onDaySelect: handleDaySelect
+              onDaySelect: handleDaySelect,
+              role: 'gridcell',
+              'aria-selected': isSelected
             };
-            return renderDay ? renderDay(day, validSelectedDays, pickersDayProps) : /*#__PURE__*/_jsx("div", {
-              role: "cell",
-              children: /*#__PURE__*/_jsx(PickersDay, _extends({}, pickersDayProps))
-            }, pickersDayProps.key);
+
+            if (isToday) {
+              pickersDayProps['aria-current'] = 'date';
+            }
+
+            return renderDay ? renderDay(day, validSelectedDays, pickersDayProps) : /*#__PURE__*/_jsx(PickersDay, _extends({}, pickersDayProps), pickersDayProps.key);
           })
         }, `week-${week[0]}`))
       })

package/CalendarPicker/PickersCalendarHeader.d.ts

@@ -39,6 +39,7 @@ export interface PickersCalendarHeaderProps<TDate> extends ExportedArrowSwitcher
     openView: CalendarPickerView;
     reduceAnimations: boolean;
     onViewChange?: (view: CalendarPickerView) => void;
+    labelId?: string;
 }
 /**
  * @ignore - do not document.

package/CalendarPicker/PickersCalendarHeader.js

@@ -72,7 +72,8 @@ export function PickersCalendarHeader(props) {
     openView: currentView,
     reduceAnimations,
     rightArrowButtonText: rightArrowButtonTextProp,
-    views
+    views,
+    labelId
   } = props;
   deprecatedPropsWarning({
     leftArrowButtonText: leftArrowButtonTextProp,
@@ -124,12 +125,14 @@ export function PickersCalendarHeader(props) {
     children: [/*#__PURE__*/_jsxs(PickersCalendarHeaderLabel, {
       role: "presentation",
       onClick: handleToggleView,
-      ownerState: ownerState,
+      ownerState: ownerState // putting this on the label item element below breaks when using transition
+      ,
+      "aria-live": "polite",
       children: [/*#__PURE__*/_jsx(PickersFadeTransitionGroup, {
         reduceAnimations: reduceAnimations,
         transKey: utils.format(month, 'monthAndYear'),
         children: /*#__PURE__*/_jsx(PickersCalendarHeaderLabelItem, {
-          "aria-live": "polite",
+          id: labelId,
           ownerState: ownerState,
           children: utils.format(month, 'monthAndYear')
         })

package/CalendarPicker/PickersSlideTransition.js

@@ -89,6 +89,7 @@ export const PickersSlideTransition = _ref => {
     childFactory: element => /*#__PURE__*/React.cloneElement(element, {
       classNames: transitionClasses
     }),
+    role: "presentation",
     children: /*#__PURE__*/_jsx(CSSTransition, _extends({
       mountOnEnter: true,
       unmountOnExit: true,

package/CalendarPicker/useCalendarState.d.ts

@@ -1,6 +1,6 @@
 import { SlideDirection } from './PickersSlideTransition';
 import { MuiPickersAdapter } from '../internals/models';
-import type { CalendarPickerProps } from './CalendarPicker';
+import type { CalendarPickerDefaultizedProps } from './CalendarPicker';
 interface CalendarState<TDate> {
     currentMonth: TDate;
     focusedDay: TDate | null;
@@ -19,7 +19,7 @@ export declare const createCalendarStateReducer: <TDate extends unknown>(reduceA
 } | ReducerAction<"changeMonth", ChangeMonthPayload<TDate>> | ReducerAction<"changeFocusedDay", {
     focusedDay: TDate | null;
 }>) => CalendarState<TDate>;
-interface CalendarStateInput<TDate> extends Pick<CalendarPickerProps<TDate>, 'date' | 'defaultCalendarMonth' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
+interface CalendarStateInput<TDate> extends Pick<CalendarPickerDefaultizedProps<TDate>, 'date' | 'defaultCalendarMonth' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
     disableSwitchToMonthOnDayFocus?: boolean;
 }
 export declare const useCalendarState: <TDate extends unknown>({ date, defaultCalendarMonth, disableFuture, disablePast, disableSwitchToMonthOnDayFocus, maxDate, minDate, onMonthChange, reduceAnimations, shouldDisableDate, }: CalendarStateInput<TDate>) => {

package/ClockPicker/ClockPicker.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { unstable_useId as useId } from '@mui/utils';
+import { unstable_useId as useId } from '@mui/material/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { Clock } from './Clock';

package/DateField/DateField.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { DateFieldProps } from './DateField.interfaces';
+declare type DateFieldComponent = (<TInputDate, TDate = TInputDate>(props: DateFieldProps<TInputDate, TDate> & React.RefAttributes<HTMLInputElement>) => JSX.Element) & {
+    propTypes?: any;
+};
+export declare const DateField: DateFieldComponent;
+export {};

package/DateField/DateField.interfaces.d.ts

@@ -0,0 +1,9 @@
+import { TextFieldProps } from '@mui/material/TextField';
+import { UseFieldProps } from '../internals/hooks/useField';
+import { DateValidationError, DateValidationProps } from '../internals/hooks/validation/useDateValidation';
+import { DefaultizedProps } from '../internals/models/helpers';
+export interface UseDateFieldProps<TInputDate, TDate> extends UseFieldProps<TInputDate | null, TDate | null, DateValidationError>, Partial<Omit<DateValidationProps<TInputDate, TDate>, 'value'>> {
+}
+export declare type UseDateFieldDefaultizedProps<TInputDate, TDate> = DefaultizedProps<UseDateFieldProps<TInputDate, TDate>, 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast'>;
+export interface DateFieldProps<TInputDate, TDate> extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'onError'>, UseDateFieldProps<TInputDate, TDate> {
+}

package/DateField/DateField.interfaces.js

@@ -0,0 +1 @@
+export {};

package/DateField/DateField.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { useDateField } from './useDateField';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref) {
+  const {
+    inputRef,
+    inputProps
+  } = useDateField(inProps);
+  return /*#__PURE__*/_jsx(TextField, _extends({
+    ref: ref,
+    inputRef: inputRef
+  }, inputProps));
+});

package/DateField/index.d.ts

@@ -0,0 +1,3 @@
+export { DateField as Unstable_DateField } from './DateField';
+export { useDateField as unstable_useDateField } from './useDateField';
+export type { UseDateFieldProps } from './DateField.interfaces';

package/DateField/index.js

@@ -0,0 +1,2 @@
+export { DateField as Unstable_DateField } from './DateField';
+export { useDateField as unstable_useDateField } from './useDateField';

package/DateField/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/DateField/index.js",
+  "types": "./index.d.ts"
+}

package/DateField/useDateField.d.ts

@@ -0,0 +1,2 @@
+import { UseDateFieldProps } from './DateField.interfaces';
+export declare const useDateField: <TInputDate, TDate, TProps extends UseDateFieldProps<TInputDate, TDate>>(inProps: TProps) => import("../internals/hooks/useField").UseFieldResponse<TProps & Omit<UseDateFieldProps<TInputDate, TDate>, "minDate" | "maxDate" | "disableFuture" | "disablePast"> & Required<Pick<UseDateFieldProps<TInputDate, TDate>, "minDate" | "maxDate" | "disableFuture" | "disablePast">>>;

package/DateField/useDateField.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { datePickerValueManager } from '../DatePicker/shared';
+import { useField, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrFromSections } from '../internals/hooks/useField';
+import { validateDate } from '../internals/hooks/validation/useDateValidation';
+import { parseNonNullablePickerDate } from '../internals/utils/date-utils';
+import { useUtils, useDefaultDates } from '../internals/hooks/useUtils';
+const dateRangeFieldValueManager = {
+  getSectionsFromValue: (utils, prevSections, date, format) => addPositionPropertiesToSections(splitFormatIntoSections(utils, format, date)),
+  getValueStrFromSections: sections => createDateStrFromSections(sections),
+  getValueFromSections: (utils, prevSections, sections, format) => {
+    const dateStr = createDateStrFromSections(sections);
+    const value = utils.parse(dateStr, format);
+    return {
+      value,
+      shouldPublish: utils.isValid(value)
+    };
+  },
+  getActiveDateFromActiveSection: value => ({
+    value,
+    update: newActiveDate => newActiveDate
+  }),
+  hasError: error => error != null
+};
+
+const useDefaultizedDateField = props => {
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  return _extends({
+    disablePast: false,
+    disableFuture: false
+  }, props, {
+    minDate: parseNonNullablePickerDate(utils, props.minDate, defaultDates.minDate),
+    maxDate: parseNonNullablePickerDate(utils, props.maxDate, defaultDates.maxDate)
+  });
+};
+
+export const useDateField = inProps => {
+  const props = useDefaultizedDateField(inProps);
+  return useField({
+    props,
+    valueManager: datePickerValueManager,
+    fieldValueManager: dateRangeFieldValueManager,
+    // TODO: Support time validation.
+    validator: validateDate
+  });
+};

package/DatePicker/DatePickerToolbar.js

@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import { generateUtilityClasses } from '@mui/material';
 import { PickersToolbar, pickersToolbarClasses } from '../internals/components/PickersToolbar';
-import { useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const datePickerToolbarClasses = generateUtilityClasses('MuiDatePickerToolbar', ['root', 'title']);
@@ -41,12 +41,14 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     toggleMobileKeyboardView,
     toolbarFormat,
     toolbarPlaceholder = '––',
-    toolbarTitle = 'Select date',
+    toolbarTitle: toolbarTitleProp,
     views
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const utils = useUtils();
+  const localeText = useLocaleText();
+  const toolbarTitle = toolbarTitleProp != null ? toolbarTitleProp : localeText.datePickerDefaultToolbarTitle;
   const dateText = React.useMemo(() => {
     if (!parsedValue) {
       return toolbarPlaceholder;

package/DatePicker/shared.d.ts

@@ -7,6 +7,8 @@ import { ExportedDateInputProps } from '../internals/components/PureDateInput';
 import { BasePickerProps } from '../internals/models/props/basePickerProps';
 import { PickerStateValueManager } from '../internals/hooks/usePickerState';
 import { BaseToolbarProps } from '../internals/models/props/baseToolbarProps';
+import { DefaultizedProps } from '../internals/models/helpers';
+import { BaseDateValidationProps } from '../internals/hooks/validation/models';
 export interface BaseDatePickerProps<TInputDate, TDate> extends ExportedCalendarPickerProps<TDate>, BasePickerProps<TInputDate | null, TDate | null>, ValidationProps<DateValidationError, TInputDate | null>, ExportedDateInputProps<TInputDate, TDate> {
     /**
      * Callback fired on view change.
@@ -43,8 +45,7 @@ export interface BaseDatePickerProps<TInputDate, TDate> extends ExportedCalendar
 }
 export declare const isYearOnlyView: (views: readonly CalendarPickerView[]) => views is readonly "year"[];
 export declare const isYearAndMonthViews: (views: readonly CalendarPickerView[]) => views is readonly ("month" | "year")[];
-export declare type DefaultizedProps<Props> = Props & {
+export declare function useDatePickerDefaultizedProps<TInputDate, TDate, Props extends BaseDatePickerProps<TInputDate, TDate>>(props: Props, name: string): DefaultizedProps<Props, 'openTo' | 'views' | keyof BaseDateValidationProps<TDate>, {
     inputFormat: string;
-};
-export declare function useDatePickerDefaultizedProps<TInputDate, TDate, Props extends BaseDatePickerProps<TInputDate, TDate>>(props: Props, name: string): DefaultizedProps<Props> & Required<Pick<BaseDatePickerProps<TInputDate, TDate>, 'openTo' | 'views'>>;
+}>;
 export declare const datePickerValueManager: PickerStateValueManager<any, any, any>;

package/DatePicker/shared.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useThemeProps } from '@mui/material/styles';
 import { useDefaultDates, useUtils } from '../internals/hooks/useUtils';
-import { parsePickerInputValue } from '../internals/utils/date-utils';
+import { parsePickerInputValue, parseNonNullablePickerDate } from '../internals/utils/date-utils';
 export const isYearOnlyView = views => views.length === 1 && views[0] === 'year';
 export const isYearAndMonthViews = views => views.length === 2 && views.indexOf('month') !== -1 && views.indexOf('year') !== -1;
 
@@ -38,10 +38,12 @@ export function useDatePickerDefaultizedProps(props, name) {
   const views = (_themeProps$views = themeProps.views) != null ? _themeProps$views : ['year', 'day'];
   return _extends({
     openTo: 'day',
-    minDate: defaultDates.minDate,
-    maxDate: defaultDates.maxDate
+    disableFuture: false,
+    disablePast: false
   }, getFormatAndMaskByViews(views, utils), themeProps, {
-    views
+    views,
+    minDate: parseNonNullablePickerDate(utils, themeProps.minDate, defaultDates.minDate),
+    maxDate: parseNonNullablePickerDate(utils, themeProps.maxDate, defaultDates.maxDate)
   });
 }
 export const datePickerValueManager = {

package/DateTimePicker/DateTimePickerToolbar.js

@@ -8,7 +8,7 @@ import { PickersToolbarText } from '../internals/components/PickersToolbarText';
 import { PickersToolbar, pickersToolbarClasses } from '../internals/components/PickersToolbar';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
 import { DateTimePickerTabs } from './DateTimePickerTabs';
-import { useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -68,12 +68,14 @@ export const DateTimePickerToolbar = props => {
     toggleMobileKeyboardView,
     toolbarFormat,
     toolbarPlaceholder = '––',
-    toolbarTitle = 'Select date & time',
+    toolbarTitle: toolbarTitleProp,
     views
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const utils = useUtils();
+  const localeText = useLocaleText();
+  const toolbarTitle = toolbarTitleProp != null ? toolbarTitleProp : localeText.dateTimePickerDefaultToolbarTitle;
   const wrapperVariant = React.useContext(WrapperVariantContext);
   const showTabs = wrapperVariant === 'desktop' ? true : !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
 

package/DateTimePicker/shared.d.ts

@@ -8,6 +8,8 @@ import { ExportedDateInputProps } from '../internals/components/PureDateInput';
 import { CalendarOrClockPickerView } from '../internals/models';
 import { PickerStateValueManager } from '../internals/hooks/usePickerState';
 import { BaseToolbarProps } from '../internals/models/props/baseToolbarProps';
+import { DefaultizedProps } from '../internals/models/helpers';
+import { BaseDateValidationProps } from '../internals/hooks/validation/models';
 export interface BaseDateTimePickerProps<TInputDate, TDate> extends ExportedClockPickerProps<TDate>, ExportedCalendarPickerProps<TDate>, BasePickerProps<TInputDate | null, TDate | null>, ValidationProps<DateTimeValidationError, TInputDate | null>, ExportedDateInputProps<TInputDate, TDate> {
     /**
      * 12h/24h view for hour selection clock.
@@ -67,9 +69,7 @@ export interface BaseDateTimePickerProps<TInputDate, TDate> extends ExportedCloc
      */
     views?: readonly CalendarOrClockPickerView[];
 }
-declare type DefaultizedProps<Props> = Props & {
+export declare function useDateTimePickerDefaultizedProps<TInputDate, TDate, Props extends BaseDateTimePickerProps<TInputDate, TDate>>(props: Props, name: string): DefaultizedProps<Props, 'openTo' | 'views' | keyof BaseDateValidationProps<TDate>, {
     inputFormat: string;
-};
-export declare function useDateTimePickerDefaultizedProps<TInputDate, TDate, Props extends BaseDateTimePickerProps<TInputDate, TDate>>(props: Props, name: string): DefaultizedProps<Props> & Required<Pick<BaseDateTimePickerProps<TInputDate, TDate>, 'openTo' | 'views'>>;
+}>;
 export declare const dateTimePickerValueManager: PickerStateValueManager<any, any, any>;
-export {};