@mui/x-date-pickers 9.0.0-alpha.3 → 9.0.0-rc.0

package/DateCalendar/DayCalendar.js

@@ -17,7 +17,7 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _PickersDay = require("../PickersDay");
+var _PickerDay = require("../PickerDay");
 var _hooks = require("../hooks");
 var _useUtils = require("../internals/hooks/useUtils");
 var _dimensions = require("../internals/constants/dimensions");
@@ -25,7 +25,7 @@ var _PickersSlideTransition = require("./PickersSlideTransition");
 var _useIsDateDisabled = require("./useIsDateDisabled");
 var _dateUtils = require("../internals/utils/date-utils");
 var _dayCalendarClasses = require("./dayCalendarClasses");
-var _usePickerDayOwnerState = require("../PickersDay/usePickerDayOwnerState");
+var _usePickerDayOwnerState = require("../internals/hooks/usePickerDayOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["parentProps", "day", "focusedDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"],
   _excluded2 = ["ownerState"];
@@ -44,11 +44,11 @@ const useUtilityClasses = classes => {
   return (0, _composeClasses.default)(slots, _dayCalendarClasses.getDayCalendarUtilityClass, classes);
 };
 const weeksContainerHeight = (_dimensions.DAY_SIZE + _dimensions.DAY_MARGIN * 2) * 6;
-const PickersCalendarDayRoot = (0, _styles.styled)('div', {
+const PickerCalendarDayRoot = (0, _styles.styled)('div', {
   name: 'MuiDayCalendar',
   slot: 'Root'
 })({});
-const PickersCalendarDayHeader = (0, _styles.styled)('div', {
+const PickerCalendarDayHeader = (0, _styles.styled)('div', {
   name: 'MuiDayCalendar',
   slot: 'Header'
 })({
@@ -56,7 +56,7 @@ const PickersCalendarDayHeader = (0, _styles.styled)('div', {
   justifyContent: 'center',
   alignItems: 'center'
 });
-const PickersCalendarWeekDayLabel = (0, _styles.styled)(_Typography.default, {
+const PickerCalendarWeekDayLabel = (0, _styles.styled)(_Typography.default, {
   name: 'MuiDayCalendar',
   slot: 'WeekDayLabel'
 })(({
@@ -71,7 +71,7 @@ const PickersCalendarWeekDayLabel = (0, _styles.styled)(_Typography.default, {
   alignItems: 'center',
   color: (theme.vars || theme).palette.text.secondary
 }));
-const PickersCalendarWeekNumberLabel = (0, _styles.styled)(_Typography.default, {
+const PickerCalendarWeekNumberLabel = (0, _styles.styled)(_Typography.default, {
   name: 'MuiDayCalendar',
   slot: 'WeekNumberLabel'
 })(({
@@ -86,7 +86,7 @@ const PickersCalendarWeekNumberLabel = (0, _styles.styled)(_Typography.default,
   alignItems: 'center',
   color: (theme.vars || theme).palette.text.disabled
 }));
-const PickersCalendarWeekNumber = (0, _styles.styled)(_Typography.default, {
+const PickerCalendarWeekNumber = (0, _styles.styled)(_Typography.default, {
   name: 'MuiDayCalendar',
   slot: 'WeekNumber'
 })(({
@@ -102,7 +102,7 @@ const PickersCalendarWeekNumber = (0, _styles.styled)(_Typography.default, {
   justifyContent: 'center',
   display: 'inline-flex'
 }));
-const PickersCalendarLoadingContainer = (0, _styles.styled)('div', {
+const PickerCalendarLoadingContainer = (0, _styles.styled)('div', {
   name: 'MuiDayCalendar',
   slot: 'LoadingContainer'
 })({
@@ -111,19 +111,19 @@ const PickersCalendarLoadingContainer = (0, _styles.styled)('div', {
   alignItems: 'center',
   minHeight: weeksContainerHeight
 });
-const PickersCalendarSlideTransition = (0, _styles.styled)(_PickersSlideTransition.PickersSlideTransition, {
+const PickerCalendarSlideTransition = (0, _styles.styled)(_PickersSlideTransition.PickersSlideTransition, {
   name: 'MuiDayCalendar',
   slot: 'SlideTransition'
 })({
   minHeight: weeksContainerHeight
 });
-const PickersCalendarWeekContainer = (0, _styles.styled)('div', {
+const PickerCalendarWeekContainer = (0, _styles.styled)('div', {
   name: 'MuiDayCalendar',
   slot: 'MonthContainer'
 })({
   overflow: 'hidden'
 });
-const PickersCalendarWeek = (0, _styles.styled)('div', {
+const PickerCalendarWeek = (0, _styles.styled)('div', {
   name: 'MuiDayCalendar',
   slot: 'WeekContainer'
 })({
@@ -159,18 +159,16 @@ function WrappedDay(_ref) {
   const isToday = adapter.isSameDay(day, now);
   const isDisabled = React.useMemo(() => disabled || isDateDisabled(day), [disabled, isDateDisabled, day]);
   const isOutsideCurrentMonth = React.useMemo(() => adapter.getMonth(day) !== currentMonthNumber, [adapter, day, currentMonthNumber]);
-  const ownerState = (0, _usePickerDayOwnerState.usePickerDayOwnerState)({
+  const ownerStateBase = (0, _usePickerDayOwnerState.usePickerDayOwnerState)({
     day,
     selected: isSelected,
     disabled: isDisabled,
     today: isToday,
     outsideCurrentMonth: isOutsideCurrentMonth,
-    disableMargin: undefined,
-    // This prop can only be defined using slotProps.day so the ownerState for useSlotProps cannot have its value.
     disableHighlightToday,
     showDaysOutsideCurrentMonth
   });
-  const Day = slots?.day ?? _PickersDay.PickersDay;
+  const Day = slots?.day ?? _PickerDay.PickerDay;
   // We don't want to pass to ownerState down, to avoid re-rendering all the day whenever a prop changes.
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Day,
@@ -183,7 +181,7 @@ function WrappedDay(_ref) {
         // it is used in date range dragging logic by accessing `dataset.timestamp`
         'data-timestamp': adapter.toJsDate(day).valueOf()
       }, other),
-      ownerState: (0, _extends2.default)({}, ownerState, {
+      ownerState: (0, _extends2.default)({}, ownerStateBase, {
         day,
         isDayDisabled: isDisabled,
         isDaySelected: isSelected
@@ -382,30 +380,30 @@ function DayCalendar(inProps) {
     }
     return toDisplay;
   }, [currentMonth, fixedWeekNumber, adapter]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarDayRoot, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickerCalendarDayRoot, {
     role: "grid",
     "aria-labelledby": gridLabelId,
     className: classes.root,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarDayHeader, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PickerCalendarDayHeader, {
       role: "row",
       className: classes.header,
-      children: [displayWeekNumber && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarWeekNumberLabel, {
+      children: [displayWeekNumber && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerCalendarWeekNumberLabel, {
         variant: "caption",
         role: "columnheader",
         "aria-label": translations.calendarWeekNumberHeaderLabel,
         className: classes.weekNumberLabel,
         children: translations.calendarWeekNumberHeaderText
-      }), (0, _dateUtils.getWeekdays)(adapter, now).map((weekday, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarWeekDayLabel, {
+      }), (0, _dateUtils.getWeekdays)(adapter, now).map((weekday, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerCalendarWeekDayLabel, {
         variant: "caption",
         role: "columnheader",
         "aria-label": adapter.format(weekday, 'weekday'),
         className: classes.weekDayLabel,
         children: dayOfWeekFormatter(weekday)
       }, i.toString()))]
-    }), loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarLoadingContainer, {
+    }), loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerCalendarLoadingContainer, {
       className: classes.loadingContainer,
       children: renderLoading()
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarSlideTransition, (0, _extends2.default)({
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerCalendarSlideTransition, (0, _extends2.default)({
       transKey: transitionKey,
       onExited: onMonthSwitchingAnimationEnd,
       reduceAnimations: reduceAnimations,
@@ -413,18 +411,18 @@ function DayCalendar(inProps) {
       className: (0, _clsx.default)(className, classes.slideTransition)
     }, TransitionProps, {
       nodeRef: slideNodeRef,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarWeekContainer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerCalendarWeekContainer, {
         ref: slideNodeRef,
         role: "rowgroup",
         className: classes.monthContainer,
-        children: weeksToDisplay.map((week, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarWeek, {
+        children: weeksToDisplay.map((week, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickerCalendarWeek, {
           role: "row",
           className: classes.weekContainer
           // fix issue of announcing row 1 as row 2
           // caused by week day labels row
           ,
           "aria-rowindex": index + 1,
-          children: [displayWeekNumber && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarWeekNumber, {
+          children: [displayWeekNumber && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerCalendarWeekNumber, {
             className: classes.weekNumber,
             role: "rowheader",
             "aria-label": translations.calendarWeekNumberAriaLabelText(adapter.getWeekNumber(week[0])),

package/DateCalendar/DayCalendar.mjs

@@ -12,7 +12,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
-import { PickersDay } from "../PickersDay/index.mjs";
+import { PickerDay } from "../PickerDay/index.mjs";
 import { usePickerAdapter, usePickerTranslations } from "../hooks/index.mjs";
 import { useNow } from "../internals/hooks/useUtils.mjs";
 import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.mjs";
@@ -20,7 +20,7 @@ import { PickersSlideTransition } from "./PickersSlideTransition.mjs";
 import { useIsDateDisabled } from "./useIsDateDisabled.mjs";
 import { findClosestEnabledDate, getWeekdays } from "../internals/utils/date-utils.mjs";
 import { getDayCalendarUtilityClass } from "./dayCalendarClasses.mjs";
-import { usePickerDayOwnerState } from "../PickersDay/usePickerDayOwnerState.mjs";
+import { usePickerDayOwnerState } from "../internals/hooks/usePickerDayOwnerState.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -37,11 +37,11 @@ const useUtilityClasses = classes => {
   return composeClasses(slots, getDayCalendarUtilityClass, classes);
 };
 const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 2) * 6;
-const PickersCalendarDayRoot = styled('div', {
+const PickerCalendarDayRoot = styled('div', {
   name: 'MuiDayCalendar',
   slot: 'Root'
 })({});
-const PickersCalendarDayHeader = styled('div', {
+const PickerCalendarDayHeader = styled('div', {
   name: 'MuiDayCalendar',
   slot: 'Header'
 })({
@@ -49,7 +49,7 @@ const PickersCalendarDayHeader = styled('div', {
   justifyContent: 'center',
   alignItems: 'center'
 });
-const PickersCalendarWeekDayLabel = styled(Typography, {
+const PickerCalendarWeekDayLabel = styled(Typography, {
   name: 'MuiDayCalendar',
   slot: 'WeekDayLabel'
 })(({
@@ -64,7 +64,7 @@ const PickersCalendarWeekDayLabel = styled(Typography, {
   alignItems: 'center',
   color: (theme.vars || theme).palette.text.secondary
 }));
-const PickersCalendarWeekNumberLabel = styled(Typography, {
+const PickerCalendarWeekNumberLabel = styled(Typography, {
   name: 'MuiDayCalendar',
   slot: 'WeekNumberLabel'
 })(({
@@ -79,7 +79,7 @@ const PickersCalendarWeekNumberLabel = styled(Typography, {
   alignItems: 'center',
   color: (theme.vars || theme).palette.text.disabled
 }));
-const PickersCalendarWeekNumber = styled(Typography, {
+const PickerCalendarWeekNumber = styled(Typography, {
   name: 'MuiDayCalendar',
   slot: 'WeekNumber'
 })(({
@@ -95,7 +95,7 @@ const PickersCalendarWeekNumber = styled(Typography, {
   justifyContent: 'center',
   display: 'inline-flex'
 }));
-const PickersCalendarLoadingContainer = styled('div', {
+const PickerCalendarLoadingContainer = styled('div', {
   name: 'MuiDayCalendar',
   slot: 'LoadingContainer'
 })({
@@ -104,19 +104,19 @@ const PickersCalendarLoadingContainer = styled('div', {
   alignItems: 'center',
   minHeight: weeksContainerHeight
 });
-const PickersCalendarSlideTransition = styled(PickersSlideTransition, {
+const PickerCalendarSlideTransition = styled(PickersSlideTransition, {
   name: 'MuiDayCalendar',
   slot: 'SlideTransition'
 })({
   minHeight: weeksContainerHeight
 });
-const PickersCalendarWeekContainer = styled('div', {
+const PickerCalendarWeekContainer = styled('div', {
   name: 'MuiDayCalendar',
   slot: 'MonthContainer'
 })({
   overflow: 'hidden'
 });
-const PickersCalendarWeek = styled('div', {
+const PickerCalendarWeek = styled('div', {
   name: 'MuiDayCalendar',
   slot: 'WeekContainer'
 })({
@@ -152,18 +152,16 @@ function WrappedDay(_ref) {
   const isToday = adapter.isSameDay(day, now);
   const isDisabled = React.useMemo(() => disabled || isDateDisabled(day), [disabled, isDateDisabled, day]);
   const isOutsideCurrentMonth = React.useMemo(() => adapter.getMonth(day) !== currentMonthNumber, [adapter, day, currentMonthNumber]);
-  const ownerState = usePickerDayOwnerState({
+  const ownerStateBase = usePickerDayOwnerState({
     day,
     selected: isSelected,
     disabled: isDisabled,
     today: isToday,
     outsideCurrentMonth: isOutsideCurrentMonth,
-    disableMargin: undefined,
-    // This prop can only be defined using slotProps.day so the ownerState for useSlotProps cannot have its value.
     disableHighlightToday,
     showDaysOutsideCurrentMonth
   });
-  const Day = slots?.day ?? PickersDay;
+  const Day = slots?.day ?? PickerDay;
   // We don't want to pass to ownerState down, to avoid re-rendering all the day whenever a prop changes.
   const _useSlotProps = useSlotProps({
       elementType: Day,
@@ -176,7 +174,7 @@ function WrappedDay(_ref) {
         // it is used in date range dragging logic by accessing `dataset.timestamp`
         'data-timestamp': adapter.toJsDate(day).valueOf()
       }, other),
-      ownerState: _extends({}, ownerState, {
+      ownerState: _extends({}, ownerStateBase, {
         day,
         isDayDisabled: isDisabled,
         isDaySelected: isSelected
@@ -375,30 +373,30 @@ export function DayCalendar(inProps) {
     }
     return toDisplay;
   }, [currentMonth, fixedWeekNumber, adapter]);
-  return /*#__PURE__*/_jsxs(PickersCalendarDayRoot, {
+  return /*#__PURE__*/_jsxs(PickerCalendarDayRoot, {
     role: "grid",
     "aria-labelledby": gridLabelId,
     className: classes.root,
-    children: [/*#__PURE__*/_jsxs(PickersCalendarDayHeader, {
+    children: [/*#__PURE__*/_jsxs(PickerCalendarDayHeader, {
       role: "row",
       className: classes.header,
-      children: [displayWeekNumber && /*#__PURE__*/_jsx(PickersCalendarWeekNumberLabel, {
+      children: [displayWeekNumber && /*#__PURE__*/_jsx(PickerCalendarWeekNumberLabel, {
         variant: "caption",
         role: "columnheader",
         "aria-label": translations.calendarWeekNumberHeaderLabel,
         className: classes.weekNumberLabel,
         children: translations.calendarWeekNumberHeaderText
-      }), getWeekdays(adapter, now).map((weekday, i) => /*#__PURE__*/_jsx(PickersCalendarWeekDayLabel, {
+      }), getWeekdays(adapter, now).map((weekday, i) => /*#__PURE__*/_jsx(PickerCalendarWeekDayLabel, {
         variant: "caption",
         role: "columnheader",
         "aria-label": adapter.format(weekday, 'weekday'),
         className: classes.weekDayLabel,
         children: dayOfWeekFormatter(weekday)
       }, i.toString()))]
-    }), loading ? /*#__PURE__*/_jsx(PickersCalendarLoadingContainer, {
+    }), loading ? /*#__PURE__*/_jsx(PickerCalendarLoadingContainer, {
       className: classes.loadingContainer,
       children: renderLoading()
-    }) : /*#__PURE__*/_jsx(PickersCalendarSlideTransition, _extends({
+    }) : /*#__PURE__*/_jsx(PickerCalendarSlideTransition, _extends({
       transKey: transitionKey,
       onExited: onMonthSwitchingAnimationEnd,
       reduceAnimations: reduceAnimations,
@@ -406,18 +404,18 @@ export function DayCalendar(inProps) {
       className: clsx(className, classes.slideTransition)
     }, TransitionProps, {
       nodeRef: slideNodeRef,
-      children: /*#__PURE__*/_jsx(PickersCalendarWeekContainer, {
+      children: /*#__PURE__*/_jsx(PickerCalendarWeekContainer, {
         ref: slideNodeRef,
         role: "rowgroup",
         className: classes.monthContainer,
-        children: weeksToDisplay.map((week, index) => /*#__PURE__*/_jsxs(PickersCalendarWeek, {
+        children: weeksToDisplay.map((week, index) => /*#__PURE__*/_jsxs(PickerCalendarWeek, {
           role: "row",
           className: classes.weekContainer
           // fix issue of announcing row 1 as row 2
           // caused by week day labels row
           ,
           "aria-rowindex": index + 1,
-          children: [displayWeekNumber && /*#__PURE__*/_jsx(PickersCalendarWeekNumber, {
+          children: [displayWeekNumber && /*#__PURE__*/_jsx(PickerCalendarWeekNumber, {
             className: classes.weekNumber,
             role: "rowheader",
             "aria-label": translations.calendarWeekNumberAriaLabelText(adapter.getWeekNumber(week[0])),

package/DateField/DateField.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DateFieldProps } from "./DateField.types.mjs";
-type DateFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DateFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type DateFieldComponent = ((props: DateFieldProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };
 /**

package/DateField/DateField.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DateFieldProps } from "./DateField.types.js";
-type DateFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DateFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type DateFieldComponent = ((props: DateFieldProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };
 /**

package/DateField/DateField.js

@@ -59,6 +59,12 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty: _propTypes.default.bool,
   /**
    * If `true`, the `input` element is focused during the first mount.
    * @default false
@@ -105,9 +111,18 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   disablePast: _propTypes.default.bool,
   /**
-   * @default true
+   * End `InputAdornment` for this component.
    */
-  enableAccessibleFieldDOMStructure: _propTypes.default.bool,
+  endAdornment: _propTypes.default.node,
+  /**
+   * If `true`, the `input` will indicate an error.
+   * @default false
+   */
+  error: _propTypes.default.bool,
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  fieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * If `true`, the component is displayed in focused state.
    */
@@ -145,7 +160,6 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   hiddenLabel: _propTypes.default.bool,
   /**
    * The id of the `input` element.
-   * Use this prop to make `label` and `helperText` accessible for screen readers.
    */
   id: _propTypes.default.string,
   /**
@@ -207,6 +221,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * Callback fired when the clear button is clicked.
    */
   onClear: _propTypes.default.func,
+  onClick: _propTypes.default.func,
   /**
    * Callback fired when the error associated with the current value changes.
    * When a validation error is detected, the `error` parameter contains a non-null value.
@@ -218,6 +233,9 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   onError: _propTypes.default.func,
   onFocus: _propTypes.default.func,
+  onInput: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  onPaste: _propTypes.default.func,
   /**
    * Callback fired when the selected sections change.
    * @param {FieldSelectedSections} newValue The new selected sections.
@@ -242,7 +260,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   referenceDate: _propTypes.default.object,
   /**
-   * If `true`, the label is displayed as required and the `input` element is required.
+   * If `true`, the label will indicate that the `input` is required.
    * @default false
    */
   required: _propTypes.default.bool,
@@ -307,6 +325,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default {}
    */
   slots: _propTypes.default.object,
+  /**
+   * Start `InputAdornment` for this component.
+   */
+  startAdornment: _propTypes.default.node,
   style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -320,10 +342,6 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: _propTypes.default.string,
-  /**
-   * The ref object used to imperatively interact with the field.
-   */
-  unstableFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/DateField/DateField.mjs

@@ -52,6 +52,12 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty: PropTypes.bool,
   /**
    * If `true`, the `input` element is focused during the first mount.
    * @default false
@@ -98,9 +104,18 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   disablePast: PropTypes.bool,
   /**
-   * @default true
+   * End `InputAdornment` for this component.
    */
-  enableAccessibleFieldDOMStructure: PropTypes.bool,
+  endAdornment: PropTypes.node,
+  /**
+   * If `true`, the `input` will indicate an error.
+   * @default false
+   */
+  error: PropTypes.bool,
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  fieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * If `true`, the component is displayed in focused state.
    */
@@ -138,7 +153,6 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   hiddenLabel: PropTypes.bool,
   /**
    * The id of the `input` element.
-   * Use this prop to make `label` and `helperText` accessible for screen readers.
    */
   id: PropTypes.string,
   /**
@@ -200,6 +214,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * Callback fired when the clear button is clicked.
    */
   onClear: PropTypes.func,
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated with the current value changes.
    * When a validation error is detected, the `error` parameter contains a non-null value.
@@ -211,6 +226,9 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   onError: PropTypes.func,
   onFocus: PropTypes.func,
+  onInput: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onPaste: PropTypes.func,
   /**
    * Callback fired when the selected sections change.
    * @param {FieldSelectedSections} newValue The new selected sections.
@@ -235,7 +253,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   referenceDate: PropTypes.object,
   /**
-   * If `true`, the label is displayed as required and the `input` element is required.
+   * If `true`, the label will indicate that the `input` is required.
    * @default false
    */
   required: PropTypes.bool,
@@ -300,6 +318,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default {}
    */
   slots: PropTypes.object,
+  /**
+   * Start `InputAdornment` for this component.
+   */
+  startAdornment: PropTypes.node,
   style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -313,10 +335,6 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,
-  /**
-   * The ref object used to imperatively interact with the field.
-   */
-  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/DateField/DateField.types.d.mts

@@ -4,8 +4,8 @@ import { UseFieldInternalProps } from "../internals/hooks/useField/index.mjs";
 import { ExportedValidateDateProps } from "../validation/validateDate.mjs";
 import { PickerValue } from "../internals/models/index.mjs";
 import { ExportedPickerFieldUIProps, PickerFieldUISlotProps, PickerFieldUISlots } from "../internals/components/PickerFieldUI.mjs";
-export interface UseDateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, ExportedValidateDateProps, ExportedPickerFieldUIProps {}
-export type DateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseDateFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseDateFieldProps<TEnableAccessibleFieldDOMStructure>> & {
+export interface UseDateFieldProps extends MakeOptional<UseFieldInternalProps<PickerValue, DateValidationError>, 'format'>, ExportedValidateDateProps, ExportedPickerFieldUIProps {}
+export type DateFieldProps = UseDateFieldProps & Omit<BuiltInFieldTextFieldProps, keyof UseDateFieldProps> & {
   /**
    * Overridable component slots.
    * @default {}
@@ -17,6 +17,6 @@ export type DateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean =
    */
   slotProps?: DateFieldSlotProps;
 };
-export type DateFieldOwnerState<TEnableAccessibleFieldDOMStructure extends boolean> = DateFieldProps<TEnableAccessibleFieldDOMStructure>;
+export type DateFieldOwnerState = DateFieldProps;
 export interface DateFieldSlots extends PickerFieldUISlots {}
 export interface DateFieldSlotProps extends PickerFieldUISlotProps {}

package/DateField/DateField.types.d.ts

@@ -4,8 +4,8 @@ import { UseFieldInternalProps } from "../internals/hooks/useField/index.js";
 import { ExportedValidateDateProps } from "../validation/validateDate.js";
 import { PickerValue } from "../internals/models/index.js";
 import { ExportedPickerFieldUIProps, PickerFieldUISlotProps, PickerFieldUISlots } from "../internals/components/PickerFieldUI.js";
-export interface UseDateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, ExportedValidateDateProps, ExportedPickerFieldUIProps {}
-export type DateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseDateFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseDateFieldProps<TEnableAccessibleFieldDOMStructure>> & {
+export interface UseDateFieldProps extends MakeOptional<UseFieldInternalProps<PickerValue, DateValidationError>, 'format'>, ExportedValidateDateProps, ExportedPickerFieldUIProps {}
+export type DateFieldProps = UseDateFieldProps & Omit<BuiltInFieldTextFieldProps, keyof UseDateFieldProps> & {
   /**
    * Overridable component slots.
    * @default {}
@@ -17,6 +17,6 @@ export type DateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean =
    */
   slotProps?: DateFieldSlotProps;
 };
-export type DateFieldOwnerState<TEnableAccessibleFieldDOMStructure extends boolean> = DateFieldProps<TEnableAccessibleFieldDOMStructure>;
+export type DateFieldOwnerState = DateFieldProps;
 export interface DateFieldSlots extends PickerFieldUISlots {}
 export interface DateFieldSlotProps extends PickerFieldUISlotProps {}

package/DateField/useDateField.d.mts

@@ -1,2 +1,2 @@
 import { UseDateFieldProps } from "./DateField.types.mjs";
-export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TProps) => import("../internals/index.mjs").UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;
+export declare const useDateField: <TProps extends UseDateFieldProps>(props: TProps) => import("../internals/index.mjs").UseFieldReturnValue<TProps>;

package/DateField/useDateField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateFieldProps } from "./DateField.types.js";
-export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TProps) => import("../internals/index.js").UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;
+export declare const useDateField: <TProps extends UseDateFieldProps>(props: TProps) => import("../internals/index.js").UseFieldReturnValue<TProps>;

package/DateField/useDateField.js

@@ -8,7 +8,7 @@ exports.useDateField = void 0;
 var _useField = require("../internals/hooks/useField");
 var _managers = require("../managers");
 const useDateField = props => {
-  const manager = (0, _managers.useDateManager)(props);
+  const manager = (0, _managers.useDateManager)();
   return (0, _useField.useField)({
     manager,
     props

package/DateField/useDateField.mjs

@@ -3,7 +3,7 @@
 import { useField } from "../internals/hooks/useField/index.mjs";
 import { useDateManager } from "../managers/index.mjs";
 export const useDateField = props => {
-  const manager = useDateManager(props);
+  const manager = useDateManager();
   return useField({
     manager,
     props

package/DatePicker/DatePicker.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DatePickerProps } from "./DatePicker.types.mjs";
-type DatePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DatePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type DatePickerComponent = ((props: DatePickerProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };
 /**

package/DatePicker/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DatePickerProps } from "./DatePicker.types.js";
-type DatePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DatePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type DatePickerComponent = ((props: DatePickerProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };
 /**